Glossario del web design cos'è Affordance?

Il termine "affordance" è quello che sentirai spesso nel mondo del web design. Appare regolarmente anche nei tutorial su Tuts +, quindi questo articolo servirà come una definizione solo per chiarire eventuali dubbi.

Definizioni generali

A volte c'è un po 'di confusione riguardo l'affordance, quindi diamo un'occhiata a tre importanti termini correlati:

affordance

Definito originariamente da James J. Gibson negli anni '70, le affordance sono le azioni possibili tra un oggetto e un individuo. Una maniglia per porta è uno degli esempi classicamente usati; offre un movimento di torsione. Indipendentemente dall'individuo riconosce la possibilità di quell'azione è irrilevante: l'affordance è ancora presente.

Consapevolezza percepita

Il termine come lo usiamo spesso oggigiorno è diventato mainstream di Donald Norman nel suo libro The Design of Everyday Things (originariamente pubblicato sotto "La psicologia delle cose di tutti i giorni") e si scontra un po 'con quello di Gibson. Norman ha preso l'idea concettuale di affordance e ha aggiunto ad essa "interpretazione umana", dandoci ciò che egli definisce "affordance percepita". 

Tornando alla nostra maniglia, è un oggetto la cui forma comunica Come l'utente dovrebbe impegnarsi con esso. Se progettato in modo efficace, l'utente saprà istintivamente se spingere, tirare, torcere e così via.

Norman gode dell'idea che l'affordance dovrebbe essere una combinazione di azioni che sono in realtà possibile e quelli che sono semplicemente percepito come possibile.

La convenienza percepita è particolarmente rilevante nella progettazione dell'interfaccia, che esamineremo tra un momento.

significanti

I significanti hanno un ruolo nella definizione di Norman. In vari modi, le caratteristiche di un oggetto suggeriscono all'individuo quali azioni sono possibili. I significanti sono le "parti percettibili di un affordance". Ancora usando l'esempio della manopola della porta, la sua rotondità significa che offre torsione. 

Design interattivo

Come web designer modelliamo il modo in cui le interfacce appaiono e si comportano, influenzando il modo in cui gli utenti interagiscono con esse, spesso attraverso elementi comuni dell'interfaccia utente come pulsanti, controlli di input, componenti di navigazione e così via.

Usiamo i dettagli visivi come significanti che aiutano gli utenti percepire come dovrebbero interagire con quegli elementi dell'interfaccia utente.

Quella Tutta "piatta"

Quello che i monitor dei computer mostrano è piatto; una raccolta di pixel, niente di più. Tuttavia, suggerendo graficamente la profondità e la dimensione, possiamo portare le convenienze percepite nel mix per aiutare gli utenti. Prendi i pulsanti, per esempio. Quale di questi percepisci come "favorevole" a un'azione pressante più efficace?

La profondità sul pulsante inferiore "significa" che può essere premuto

Questo è forse il più grande argomento contro il movimento del design piatto; rimozione dei dettagli nel tentativo di essere minimi possibile qualche volta ostacolare le percezioni percepite. Ad esempio, hai mai incontrato un modulo come questo?

Qual è il pulsante?

Andando super-minimale, tutte le differenze tra il pulsante di invio e gli input sono state rimosse. I significanti (come le ombre interne sugli input e gli angoli arrotondati sul pulsante) avrebbero aiutato visivamente a comunicare che gli input sono contenitori e il pulsante è per "premere".

"Un buon designer si assicura che le azioni appropriate siano percepibili e quelle inappropriate invisibili." - Donald Norman

Tenere presente

  • Non tutti gli utenti sono uguali! Le credenziali non possono essere percepite e interpretate allo stesso modo da tutti.
  • Le etichette e le istruzioni sono utili nel design dell'interfaccia, ma le supportano con altri suggerimenti visivi.
  • Per quanto riguarda le interfacce grafiche, ci riferiamo a "affordance percepita"; non hanno proprietà fisiche reali a differenza del design del prodotto.
  • Il design "piatto" può comunicare le affordance in modo altrettanto efficace del snouomorfismo: basta assicurarsi che le azioni siano percepibili quando si progetta.

Ulteriori letture

  • Affordances: l'arma segreta del designer su Envato
  • Il design delle cose di tutti i giorni di Don Norman
  • Nozioni di base sul design dell'interfaccia utente su usability.gov
  • Affordances and Design di Don Norman