Affordances in Form Design

Diamo un'occhiata alle opportunità nel regno digitale, in particolare come possiamo prendere questi principi e applicarli agli elementi dell'interfaccia utente di tutti i giorni che creiamo come pulsanti, campi modulo, icone, metafore e altri elementi visivi.

Affor-cosa?

Gli accessi sono possibili azioni tra un oggetto e un individuo. Ad esempio, una manopola porta offre un movimento di torsione. Indipendentemente dal fatto che l'individuo riconosca la possibilità di tale azione è irrilevante - l'affordance è ancora lì

Una "affordance percepita", d'altra parte comunica come l'utente dovrebbe impegnarsi con esso. L'utente saprà se spingere, tirare, torcere e così via. La convenienza percepita dovrebbe essere una combinazione di azioni che sono effettivamente possibili e quelle che sono semplicemente percepite come possibili.

I significanti suggeriscono a un individuo quali azioni sono possibili. In vari modi, le caratteristiche di un oggetto suggeriscono all'individuo quali azioni sono possibili. Ad esempio, la rotondità significa che offre torsioni. 

• 

  Glossario del web design: cos'è "Affordance"?

  Il termine "affordance" è quello che sentirai spesso nel mondo del web design. Appare regolarmente anche in tutorial su Tuts +, quindi questo articolo servirà da ...

Perché è importante sapere?

Potrebbe sembrare un buon senso discutere di qualcosa come le maniglie delle porte perché sono così onnipresenti nella nostra vita di tutti i giorni. Ma pensa alle nuove tecnologie e alle innovazioni, come le macchine entry keyless. Sono un nuovo territorio per molte persone, quindi i significanti sono vitali. Un piccolo pulsante sporgente può offrire indizi sulla sua funzione. 

1. Una macchina da stampa aperta porta / porte aperte.
2. Tieni premuto il pulsante per bloccare la macchina. 

Piuttosto che leggere un manuale, come utenti dovremmo guardare agli spunti del passato, prodotti analoghi, per navigare attraverso il nostro mondo in continua evoluzione.

Design del modulo

Gli accessi sono anche rilevanti nella progettazione dell'interfaccia utente. In questo rapido articolo discuterò la loro applicazione in forma di modulo (campi modulo, pulsanti, elementi di navigazione, ecc.) Con alcuni esempi pertinenti, suggerendo miglioramenti mentre vado. Poiché non hanno proprietà fisiche reali, come nel design industriale, quello a cui mi riferirò sono le "percependence percepite". 

Disegni "Bottone piatto"

I disegni dei pulsanti piatti sono problematici. Spesso si perdono nel design, ma vengono interpretati come grafica banner.

Il seguente modulo di iscrizione (basato su un'app che resterà anonima) mostra un numero di elementi ...  

1. Titolo 
2. Campi di input 
3. Pulsante CTA principale 
4. Pulsante secondario

Ci sono molti elementi diversi qui, ma non c'è molto da distinguere tra loro, quindi tutti si confondono. È una forma, che di per sé suggerisce che ci sono pulsanti e campi di input presenti, ma un utente può faticare a percepire qualcuno di loro come " offrendo "un'azione specifica. 

Principali miglioramenti del CTA

Come potremmo migliorare il design in modo che gli utenti percepiscano più facilmente la direttiva per "creare account"? Può aiutare a fare quanto segue:

• Aggiungi un'ombreggiatura sottile per esprimere l'accenno di profondità a un movimento di "pressione". Non sono un grande fan delle ombre e dei gradienti, ma fatto nel giusto contesto può migliorare l'accessibilità percepita.
• Forse arrotondare i bordi e rendere il pulsante più piccolo, in modo che non sia confuso come banner o intestazione secondaria. 
• Migliorare decisamente il contrasto. Attualmente, le tonalità grigio chiaro e bianco sono difficili da distinguere l'una dall'altra. Un grigio più scuro farà davvero uscire il pulsante e guidare l'azione dell'utente.

Pulsante secondario

Questo pulsante secondario super-minimo viene perso e i significanti che altrimenti lo differenziano dai campi del modulo (ad esempio le ombre interne sugli input) mancano. Alcuni suggerimenti per il miglioramento sono i seguenti:

• Angoli arrotondati per indicare che si tratta di un pulsante che richiede la pressione.
• Prossimità: posizionando il pulsante più vicino all'opzione "crea account" si comunica più chiaramente che è correlato in qualche modo.
• Etichetta: anziché "hai già un account", considera qualcosa di più semplice come "login" per indicare l'azione di ciò che farà il pulsante.

• 

  Principi per la progettazione di pulsanti di successo

  Ci sono mille modi per progettare e creare pulsanti oggi e hai solo bisogno di dedicare un po 'di tempo a guardare attraverso il lavoro sul dribbble per ottenere un ...

Controlli di input del campo modulo

Un altro esempio di modulo, questa volta per inserire i dettagli della spedizione. Le disponibilità dei campi di forma sembrano non appariscenti, tuttavia possono avere un impatto considerevole. 

Alcuni suggerimenti per miglioramenti includono:

• Considerare il fatto che il campo del codice postale ha le stesse dimensioni di tutti gli altri campi. In Australia, il codice postale è di quattro cifre, in Olanda, sei. In ogni caso, i codici postali sono invariabilmente più brevi della prima riga di indirizzo, quindi un input più appropriato può rendere gli utenti più a loro agio.
• Il design piatto qui può essere efficace, ma potrebbe essere interpretato più accuratamente come una serie di campi di input se aggiungiamo un po 'di profondità. Alcune persone potrebbero percepire questi campi come banner o pulsanti basati sul design delle pagine precedenti.
• Un maggiore contrasto migliorerebbe la leggibilità del modulo in generale, sebbene questo non sia direttamente connesso con le affordances.

Conclusione

In questo articolo abbiamo esaminato alcuni moduli di esempio e il modo in cui la loro interfaccia utente si riferisce alle percezioni percepite nella progettazione dell'interfaccia utente. Comprensione di un utente percezione ti fornisce informazioni su come progettare in modo chiaro e intuitivo. I tuoi progetti avranno meno probabilità di confondere gli utenti, aiutandoli piuttosto a completare il percorso dell'utente in una serie logica di passaggi.