Affordance è un termine originariamente coniato da uno psicologo, JJ Gibson, negli anni '70. Lo ha definito come la relazione tra un ambiente e un attore. Oggi l'affordance si estende oltre la psicologia comportamentale o cognitiva e nella progettazione di interfacce digitali. Comprendere la convenienza ti consentirà di comprendere meglio la progettazione di prodotti e interfacce, a sua volta, rendendoti un designer molto migliore.
Una situazione in cui le caratteristiche sensoriali di un oggetto implicano intuitivamente la sua funzionalità e il suo utilizzo. - Crowdcube
La definizione di termine di un laico di Crowdcube è azzeccata. Tutti gli oggetti che ci circondano hanno delle affordances, alcuni più ovvi di altri. La disponibilità è la possibilità di un'azione con un oggetto; non è una proprietà dell'oggetto stesso. In altre parole, un pulsante può essere premuto; la possibilità di premere un pulsante è la sua convenienza.
La definizione originale coniata da JJ Gibson descriveva tutte le possibili azioni fisiche che si potevano intraprendere con un oggetto. Nel corso del tempo la definizione è cambiata. Ora, la definizione è più ampia e include la rilevabilità delle azioni. Questo cambiamento è stato portato all'evoluzione tecnologica delle interfacce digitali. La rilevabilità è un concetto interessante nel regno digitale, come quando si utilizza un computer, si arriva a scoprire azioni attraverso i suggerimenti forniti all'interno delle interfacce stesse.
Fai un passo indietro nel mondo fisico, dove vedi che gli oggetti hanno proprietà fisiche come dimensioni, forma o peso che forniscono suggerimenti su cosa potresti fare con loro. Ecco alcuni esempi classici. Iniziamo con una tazza da tè; è piccolo e ha una maniglia, che offre tenuta. La sua forma simile a una ciotola, che indica che può contenere anche qualcosa. Quando si tiene il tè, l'affordance è che si può tenere la tazza e bere fuori da esso. Un altro esempio è uno spazzolino da denti: ha una impugnatura lunga ma sottile, che offre presa e così via.
Gli oggetti fisici possono essere ordinati in tre tipi di affordance:
L'accessibilità percettibile è la definizione base di affordance, in cui le caratteristiche di un oggetto implicano un'azione.
L'accessibilità nascosta è quando un oggetto ha delle affordances che non sono così ovvi; per esempio, semplicemente guardando una bottiglia di birra non potresti dirti che puoi usarla per aprire un'altra bottiglia di birra.
La falsa disponibilità è quando si percepisce un'accettazione; ma nessun risultato si verifica dall'azione possibile. Ad esempio, premendo un pulsante che non fa nulla, come usare il telecomando del televisore per accendere il televisore, ma non funziona per qualche motivo. L'affordance è ancora lì - sei libero di premere quel pulsante quanto vuoi - ma non succede nulla, non c'è alcuna funzione.
Le interfacce digitali sono speciali. Ci permettono di fare cose che sono limitate a un mondo bidimensionale che è uno schermo di computer. Ci sono così tante cose che potremmo fare all'interno di qualsiasi app, sito web o programma; ma hanno tutti una limitazione grande, paralizzante: non possono fornirti indizi fisici su cosa puoi fare. Invece, si basano tutti su indizi visivi o affordances. Questo può essere molto difficile se non si capisce il ruolo importante che l'affordance gioca nella creazione di interfacce di successo.
Se capisci come funzionano le affordances, sarai in grado di usarle a tuo vantaggio. Quando puoi fare uno strumento economico, sarai in grado di creare progetti intuitivi e facili da usare. I design intuitivi hanno questo particolare appeal per loro - molto probabilmente perché troviamo molti siti Web o app noiosi e noiosi - quindi è davvero piacevole utilizzarli. Inoltre, le conversioni degli effetti di affordance, che contano molto nella creazione di un design di successo.
Se vuoi comprendere appieno come funzionano le affordances nel design dell'interfaccia, dobbiamo diventare specifici. Facciamolo ora coprendo sei diversi tipi di affordance visti all'interno di interfacce digitali, tra cui: esplicito, modello, nascosto, falso, metaforico e negativo.
Simile alla convenienza percepibile, l'affordance esplicita sono gli spunti emersi dal linguaggio o dall'aspetto fisico dell'oggetto. Un pulsante in rilievo che dice "Click me" è un ottimo esempio di spunti linguistici e fisici. L'aspetto sollevato del pulsante indica la possibilità di fare clic e così fa il testo "Click me". È ovvio.
La lingua svolge un ruolo così importante nel guidare gli utenti attraverso le interfacce digitali. Un campo di input che ti chiede il tuo "Full name" consente di inserire il tuo nome in esso. Il linguaggio fornisce linee guida chiare non solo su ciò che dovresti fare, ma anche su cosa potresti fare. L'inserimento di lettere, come il tuo nome, è diverso dall'inserimento di numeri, come il tuo numero di telefono e puoi dire quale è possibile fare dal contesto del testo. Tuttavia, è anche importante considerare quanto è ovvia la tua interfaccia da utilizzare senza indicazioni esplicite e esplicite. Il tuo progetto deve essere utilizzabile e intuitivo senza tenere la mano dell'utente ad ogni passo.
Un'accettazione del modello è la convenienza stabilita dalle convenzioni. Un ottimo esempio potrebbe essere un logo che si trova nell'angolo in alto a sinistra di una pagina web cliccabile. È un modello che vediamo ovunque; quindi lo aspettiamo ovunque. Il testo di colore diverso, a volte forse sottolineato o corsivo, tra il testo del corpo invariato come un paragrafo, è considerato un collegamento. L'e-mail è spesso rappresentata con una busta, mentre le impostazioni sono rappresentate da una marcia.
In questi esempi, l'e-mail non richiede una busta effettiva - non ha mai avuto - e nemmeno le impostazioni richiedono di gestire gli ingranaggi. È uno schema metaforico a cui siamo stati esposti da molto, molto tempo; quindi divenne una convenzione.
I pattern sono ottimi per comunicare le scorciatoie mentali, ma solo se gli utenti sono a conoscenza di questi pattern. Ci sono nuovi modelli introdotti tutto il tempo, ad esempio, il menu dell'hamburger è un concetto relativamente nuovo per i menu e la navigazione. Quando progetti pensando a nuovi modelli, devi assicurarti che i tuoi utenti abbiano familiarità con loro. Ma, quando sai che il tuo pubblico è stato precedentemente esposto a questi modelli, hai la possibilità di creare alcuni fantastici disegni senza essere espliciti.
L'accessibilità nascosta nei progetti digitali è simile a quella degli oggetti fisici. Nel mondo digitale, tuttavia, l'effettiva disponibilità non è disponibile fino a quando non è stata intrapresa un'azione per rivelarlo. Ad esempio, passa con il mouse su un pulsante per vedere se non è attivo e quindi selezionabile. I menu a discesa sono un altro esempio, in cui non viene visualizzato il menu a meno che non si passa il mouse o si fa clic sulla voce dell'elenco principale.
Occasioni nascoste sono spesso utilizzate per semplificare la complessità visiva di un progetto. Nell'esempio del menu a discesa, utilizziamo il menu a discesa per nascondere tutte le opzioni di navigazione, poiché ce ne sono troppe da mostrare tutte contemporaneamente. Se un utente desidera navigare da qualche parte, deve trovarlo all'interno del menu a discesa. Ora, un grande svantaggio per le convenienze nascoste è che richiedono all'utente di trovare l'offerta mentre a volte non danno loro alcun accenno sulla loro esistenza. Non sai cosa aspettarti. È un gioco di indovinelli, per così dire, basato sulla ricerca di queste affordance mentre tu vai.
La scarsa disponibilità nello spazio digitale offre qualcos'altro che è inaspettato - come accendere le luci anziché la TV con il telecomando del televisore - o nessuna azione. Questo tipo di affordance è in tutto il Web, principalmente per sbaglio, come un pulsante che sembra attivo ma non fa nulla, un logo che non è collegato a nulla, le parole "clicca qui" all'interno del testo che non sono affatto un collegamento , o un pulsante rosso che fa qualcosa di buono con un pulsante verde che fa qualcosa di male.
La falso affordance è più abbondante nei progetti in cui i dettagli sono stati persi, come una situazione di collegamento interrotto. I colori hanno associazioni specifiche con loro. Nel mondo occidentale, il verde è buono mentre il rosso è cattivo. Quando cambi i due, sicuramente confonderai alcuni dei tuoi utenti, specialmente quando i pulsanti sono affiancati. Questo non significa che non puoi farlo; ma dovresti essere cauto quando lo fai. Non vuoi nessuna falsa convenienza nel tuo progetto se puoi aiutarlo. Non dovresti sorprendere i tuoi utenti in questo modo.
Lo Skeuomorphism si basava molto sulle affordazioni metaforiche, come le imitazioni di oggetti reali, per comunicare. Le icone sono esempi meravigliosi di questo: mappa, carrello della spesa o carrello, casa, stampante, video, microfono, telefono, ecc. Prendi il concetto di email per esempio. Le sue radici sono nella metafora di una lettera fisica; la sua icona è di solito una busta. È un grande esempio di affordance metaforica tutt'intorno. Se stai progettando qualcosa e non sei sicuro di come trasmetterlo, è sempre bene tornare al mondo fisico, almeno per ispirazione e punto di partenza.
Ora, non hai bisogno di andare in cima come i vecchi progetti di Apple, dove per la loro app di gioco hanno reso lo sfondo una tovaglia verde da piscina. Ma confrontalo con la loro attuale icona dell'app Games, che è solo poche bolle. Cosa hanno a che fare con i giochi? Non lo so, la metafora non c'è più. Che sia una buona cosa o meno dipende da te decidere. Se la metafora deve essere presente nel tuo progetto o no, dipende da te.
Si può pensare che l'offerta negativa sia specificatamente indicativa di nessuna disponibilità; è quando hai un pulsante inattivo o un pulsante che sembra inattivo. L'istanza più comune è quando un pulsante o un link è disattivato. Ora, ecco la parte più difficile: non è che tu stia specificatamente cercando di dire a un utente che non puoi usare questo pulsante - anche se potrebbe esserlo - ma che appare il pulsante che non puoi usarlo, anche se in effetti puoi farlo.
Ci sono alcuni casi in cui vorresti chiaramente indicare che non puoi fare qualcosa. Ad esempio, se un utente compila un modulo e non ha ancora compilato tutto, lo stato del pulsante potrebbe apparire inattivo perché non si desidera che continui. Ma, se il pulsante appare inattivo, ma è attivo, è semplicemente un design scadente. Stai attento con questo.
Immagine in evidenza, immagine di affordance via Shutterstock.