Ho trovato divertente e illuminante la lettura dell'articolo Realism in UI Design di Lukas Mathis.

Attraverso una serie di esempi (ne riportiamo uno in fondo al post), l'autore espone quello che dovrebbe essere un principio guida da tenere sempre presente nella progettazione di elementi di interfaccia, specie quando essi sono rappresentati da simboli che riportano a idee e concetti (si pensi alla 'casa' che rappresenta il concetto di 'ritorno alla home page o alla pagina principale'): le persone sono confuse dai simboli nelle interfacce se essi hanno troppi o troppo pochi dettagli, un elemento di interfaccia dovrebbe collocarsi a metà  strada tra il realismo spinto e l'astrazione totale. Non c'è bisogno di evidenziare, in effetti, quale di questi tre elementi funziona di più per rappresentare un pulsante :)

screenshot

8 CommentiDi' la tua

Il tuo indirizzo email non sarà mostrato pubblicamente. I campi obbligatori sono contrassegnati da *

@ Essezeta sarà  che sono un programmatore innamorato, malato e paranoico di accessibilità  e usabilità  ma io non perderei nemmeno un secondo a pensare ad una variazione della grafica dei pulsanti... ... :D

Paolo
Paolo

sante parole Paolo... sante... ma se penso che per avere i pulsanti coordinati con la grafica si inserisocno span vuoti con 13 regole css...

EsseZeta
EsseZeta

ma il rendering normale dei pulsanti nei browser non basta?! Perché usare altri oggetti come pulsanti? Già  alcuni utenti non hanno idea di quante volte bisogni cliccare su di un pulsante, figuriamoci se gli cambiamo anche l'immagine che conosce già ...

Paolo
Paolo

Il primo é fortissimo, vi immaginate un computer con la GUI a pulsantoni come il primo?

Stefano
Stefano

Vero EsseZeta, ma se pensi che un libro scritto in quegli anni é ancora un must per il webdesign un motivo ci sarà , mi riferisco al libro "Don't make me think!" di Steve Krug scritto per l'appunto intorno agli anni 1999/00. Nico, io preferisco il secondo a dire il vero, il primo si nasconde per lo sfondo e non si comprende bene se é un elemento del medesimo o qualcos'altro. Ed infatti nell'articolo originale in inglese viene specificato che:

The trick is to figure out which details help users identify the UI element, and which details distract from its intended meaning. Some details help users figure out what they’re looking at and how they can interact with it; other details distract from the idea you’re trying to convey. They turn your interface element from a concept into a specific thing. Thus, if an interface element is too distinct from its real-life counterpart, it becomes too hard to recognize. On the other hand, if it is too realistic, people are unable to figure out that you’re trying to communicate an idea, and what idea that might be.
Non puoi esimerti dal verificare volta per volta cosa stai rappresentando e cosa effettivamente vedi. Stessa cosa per la casetta rappresentante l'homepage, se troppo realistica può distrarre, una foto di una casa come nell'esempio riportato é assurda e potrebbe far pensare ad una pagina di foto più che all'home page del sito. M.

Marco Grazia
Marco Grazia

Segnalo al webmaster che ho provato ad accendere la televisione, a sinistra dei due pulsanti ma non funziona.... :D

Giuban
Giuban

ma non si trattava di acquisizioni passate, diciamo... verso la fine degli anni novanta?!?! :p

EsseZeta
EsseZeta

Il primo sarà  efficacissimo, decisamente ;)

Nico
Nico