I ‘falsi amici’ nelle interfacce web
Mercoledì 10 Marzo 2010 - 08:42
di Cesare Lamanna
Ricorro al concetto di falso amico consapevole che non è in tutto sovrapponibile al caso di cui voglio parlare. Rimane però l’idea del trarre in inganno.
Sul sito di Querious, un’applicazione Mac per la gestione di database MySQL, è presente sulla destra una serie di miniature che, ingrandite, propongono ottimi screenshot del programma.
Ora, in questi casi è sempre lecito chiedersi “ma sono tonto io o c’è qualcosa di sbagliato?”. Indovinate dove per ben tre volte ha puntato, istintivamente, il cursore del mio mouse. Indovinate qual è l’unica zona della miniatura che non fa ingrandire l’immagine.
Categoria: Web Design | Permalink
Commenti
1
Ottimo articolo e spunto di riflessione. Il problema, secondo me, è che gli sviluppatori di interfacce si pongono poco dalla parte dell’utente finale, generalmente molto meno “esperto” di loro nella navigazione online..per mia esperienza ogni interfaccia deve ricevere come minimo feedback da un certo numero di “utilizzatori finali”, in proporzione alla sua complessità. Solo allora si potrà dire di aver fatto un valido lavoro, intuitivo, usabile e funzionale per l’obiettivo che ci si era posti….soprattutto se il proprio scopo e vendere un prodotto, online, ancora per ora, “l’apparenza può ingannare”…con ironia naturalmente :-)
# - postato da Vincenzo Ferme - 10 Marzo 2010 - 09:27
2
Questo è decisamente un errore di design…:)
# - postato da davide - 10 Marzo 2010 - 09:27
3
Da non credere… conviene sempre far testare i siti da amici quando è possibile… una cosa del genere salta fuori alla prima occhiata =)
4
onestamente non mi sembra un errore così madornale: si è visto di ben peggio.
non è madornale perché almeno su win, il cursore da una buona mano alla leggibilità e l’area clickabile è molto ampia.
errore, ma non da ergastolo.# - postato da devsmt - 10 Marzo 2010 - 10:04
5
Non consideri un errore madornale questo?!
Avere una lente di ingrandimento che addirittura cambia stato quando fai il rollover ma che poi non esegue nessuna azione quando fai click, secondo te non e’ un errore grave di implementazione? Mah…
6
Vado un pò OT: 29euro per quel programma io non li pagherei, comunque!
7
a me ha fatto ridere :)
# - postato da alberto - 10 Marzo 2010 - 14:13
8
Sinceramente è un errore abbastanza grave per chi crea interfacce utente.
I siti prima di pubblicarli vanno controllati più volte.
Sempre meglio far fare dei test a navigatori inconsapevoli prima.# - postato da Filippo Matteo Riggio - 10 Marzo 2010 - 14:27
9
@Andrea non c’è bisogno di scaldarsi tanto, dopo tutto è un errore ma mica hanno ucciso nessuno. Anzi, peggio per loro.
Ecco il codice incriminato:
[div class=”screenshot”]
[a href=”/screenflick/screenshots/keyboard_tran_75.png” rel=”lightbox[asdf]” title=”Keyboard Options”]
[img src=”/screenflick/screenshots/keyboard_200w.png” border=”0″ /][/a]
[img class=”zoom” src=”/images/application/zoom.png” border=”0″ /]
[/div]
Scusate se ho messo le parentesi quadre in luogo di ma se no l’editor interpetava lo script invece di mostrarne il contenuto e non mi andava di sbattermi con le entità :-)E questo il relativo pezzo di CSS:
div.screenshot {
width: 244px;
height: 174px;
background: url(/images/application/picture_frame.jpg);
padding-left: 12px;
padding-top: 8px;
margin-bottom: 20px;
}div.screenshot a {
display: table-cell;
width: 230px;
height: 164px;
text-align: center;
vertical-align: middle;
padding: 0;
margin: 0;
}div.screenshot img.zoom {
display: block;
opacity: 0.5;
top: -36px;
left: 194px;
margin: 0;
padding: 0;
position: relative;
z-index: 1;
}div.screenshot:hover img.zoom {
opacity: 1.0;
}Tenete presente che img.zoom si riferisce alla lente.
Io credo che l’errore è dovuto al modo di implementazione delle immagini, non so perché hanno deciso di non mettere la lente all’interno della miniatura invece che in un’immagine a parte.
Certo è che se si sono sbattuti tanti per quel pezzo di CSS potevano anche mettere un altro link sulla lente a quel punto.
Secondo me comunque l’errore è nato dall’incomunicabilità tra coder e grafici, se si fossero messi d’accordo prima avrebbero lavorato tutti meno :-)M.
# - postato da Marco Grazia - 10 Marzo 2010 - 18:31
10
Marco, se non lasciavano l’icona della lente fuori dalla thumbnail, non avrebbero ottenuto il rollover. Potevano seguire il tutorial di Nick La: http://www.webdesignerwall.com.....e-gallery/ e aggiungere il rollover allo span.
# - postato da Daniele De Nobili - 11 Marzo 2010 - 11:48
11
Buongiorno..
non riesco a capire come mai nel css, nelle proprietà del link ci sia questa proprietà:display: table-cell;
Scusate la mia ignoranza ma chi me lo spiega?
Un saluto# - postato da Luca - 11 Marzo 2010 - 12:04
12
@Luca
questa proprietà è relativamente recente, e serve per usare un “div” alla stregua di un “td” di una tabella.
Questo è utile per sfruttare l’attributo css “vertical-align:middle” che di solito non è disponibile in un div.