Cosa ricordano di più gli utenti, la posizione o il colore degli elementi?


11

Ho un menu di navigazione con alcuni pulsanti, che assomiglia un po 'a questo (NOTA: ogni pulsante ha un'icona distintiva che lo differenzia dal resto, non li ho aggiunti al modello ma sono simili alle icone di Wins8):

inserisci qui la descrizione dell'immagine

Alcuni utenti hanno segnalato di aver fatto clic accidentalmente su Sign anziché su Send, qualcosa che è semplicemente inammissibile. Sto ora valutando come differenziare maggiormente i pulsanti. Un'opzione è spostare il segno a destra. L'altro, (probabilmente aggiungendo per spostarlo) per cambiarne il colore:

inserisci qui la descrizione dell'immagine

La posizione è abbastanza differenziazione? O dovrei considerare di usare anche il colore? L'aggiunta di un nuovo colore a questa navigazione ha un certo impatto sulla tavolozza e l'aspetto generale, quindi ha un prezzo che dovrei pagare.


2
Non lo definirei "off topic", ma potrebbe essere più sensato eseguire la migrazione a UX.
DA01,

@ DA01 Sì, lo stavo considerando. La parte colorata delle cose mi ha fatto meravigliare, e finalmente ho pensato: può appartenere a entrambi? Non mi dispiace migrarlo, però!
Yisela,

Alcuni dei tuoi utenti avranno il daltonismo blu / giallo. Assicurati che questi colori siano distinti per loro!
Keshlam,

@keshlam Sicuramente! Ho un'app daltonica nella barra delle applicazioni per provare le tavolozze :)
Yisela,

Non direi nessuno dei due. L'odore è più memorabile :)
Scott,

Risposte:


5

Inoltre non aiuta a lavorare con tre parole di quattro lettere che iniziano tutte con la lettera "S". :)

Il colore è un indicatore immediato che qualcosa è diverso. Nel tuo primo esempio non hai davvero idea di cosa faccia uno di quei pulsanti a meno che tu non prenda davvero il tempo per prestare attenzione e leggerli, a colpo d'occhio, sono molto simili a differenziare. Un paradigma che usiamo dove lavoro è quello di rendere la nostra azione primaria un colore separato da qualsiasi azione meno importante o meno permanente / finalizzante.

Ma il colore non è necessariamente il punto di forza o di rottura. Un'altra strategia valida sarebbe quella di associare un'icona ad ogni pulsante (non solo agli ultimi due). In questo modo stai creando un'altra differenza facilmente distinguibile negli elementi.

Per quanto riguarda la tua vera domanda, se la posizione è abbastanza differenziata, penso che certamente aiuti perché lo schema dei pulsanti è rotto da due più piccoli che ti costringe a guardare davvero le differenze nei pulsanti piuttosto che ignorarli. Il colore aggiunto aiuta solo ad accentuare ulteriormente questo, e personalmente, se possibile, aggiungerei anche il colore, poiché ciò aiuta a dimostrarlo in futuro nel caso in cui vengano aggiunte più opzioni in un secondo momento e il pulsante potrebbe essere perso più spesso di nuovo. Tuttavia, a condizione che cambiare il colore sia difficile da fare, troverei che il nuovo posizionamento fosse sufficiente.

Tuttavia, ciò che penso sia probabilmente molto meno pertinente di ciò che i tuoi utenti pensano o fanno, e se hai le risorse per, proverei alcuni progetti diversi e lo testerei con gli utenti per vedere quali preferiscono e per quali motivi.


Grazie! Solo una nota: i pulsanti hanno icone abbastanza distinte, non riesco a rivelare gli screenshot reali e non li ho aggiunti ai modelli ... ma la gente li confonde comunque!
Yisela,

Ho pensato che non fossero fedeli alla vita, anche se non potevo dedurre se avessero o non avessero icone, grazie per averlo chiarito.
Hanna,

6

Cose che possono essere utilizzate per differenziare i pulsanti:

  • le etichette (ovviamente)
  • colore
  • dimensione
  • ordine
  • Posizione
  • prossimità
  • forma / stile

Più danni involontari può causare un'azione, più è probabile che tu voglia scegliere tra più di una di quelle opzioni sopra.

Non conoscendo il flusso di utenti per questi comandi, non so se il tuo suggerimento sia sufficiente, ma è sicuramente un miglioramento rispetto al precedente poiché ora hai spostato l'azione 'uh oh', invia, lontano dagli altri due.

Magari farei un ulteriore passo avanti e utilizzerei un'attenta differenziazione della prossimità. Forse qualcosa di così drastico:

--------  --------
| SAVE |  | SIGN |                                               DELIVER -->
--------  --------   

Ho usato un certo numero di differenziatori qui ... prossimità, stile / tipo di pulsante e rinominato "invia" per "consegnare" (vedi sotto).

Un'altra sfida che sembri avere è un enorme caso di allitterazione. Ciò potrebbe richiedere un po 'di creatività per superarlo. Ad esempio, probabilmente non vorrai mai avere due pulsanti affiancati con le etichette "elimina" e "consegna" :)


3

Sono d'accordo sia con Johannes che con DA01, entrambi hanno sollevato i punti che vorrei riguardo a posizionamento, allitterazione ecc.

Ma cosa vorrei aggiungere.

Con già le icone per il salvataggio e l'invio dei segni, il riposizionamento da solo del pulsante di invio dovrebbe essere abbondante. Suggerirei di non cambiare il colore in quanto non è necessario ed è anche un po 'più di un drastico cambiamento per gli utenti (non fraintendetemi, so che potrebbero farcela, ma non penso che sia necessario).

Se i simboli sono abbastanza riconoscibili per le persone, la separazione del pulsante di invio dovrebbe essere sufficiente.

Se le tue icone sono meno immediatamente riconoscibili, ad esempio hai forse un disco o usb invece del tradizionale floppy disk per l'icona di salvataggio, allora ti consiglio vivamente di cambiare il colore come hai suggerito, la gente capisce che il verde significa andare.

Spero che gli utenti finiscano felici;)


1

Cosa ricordano di più gli utenti, la posizione o il colore degli elementi?

Non fornirò suggerimenti concreti, ma un breve commento sul titolo: è altamente individuale. Proprio come alcune persone diranno "Capisco cosa intendi" e altri diranno "Ti sento" o qualcosa di simile. Alcune persone sono sintonizzate su elementi visivi, alcune persone sono più sintonizzate sul suono.

Alcune persone sono più in sintonia con la forma, altre con i colori. Proprio come hai bisogno di soddisfare la colorazione, devi tenere conto del fatto che non tutte le persone vedono la forma e i colori come i loro principali indizi sulla navigazione (alcune persone identificheranno un albero, un animale, una casa per forma o colore; alcuni lo faranno identificare un'auto che guida per suono piuttosto che per forma e / o colore ecc.).

In questo caso, è ovviamente un equilibrio tra i due (sarebbe divertente scoprire che tipo di utenti sbagliano nel pulsante sbagliato. Potrebbe esserci un modello lì. Inoltre, penso che gli utenti con eccellenti capacità informatiche saranno più veloci a supponendo dove trovare il pulsante giusto.).

Dal momento che non puoi mostrarci i pulsanti reali con le icone, diventa difficile suggerire. Un modo semplice potrebbe essere semplicemente quello di allargare la distanza a quella "fuori", come suggerisce @ DA01. Un po 'come MailApp:

inserisci qui la descrizione dell'immagine

Solo un pensiero.


modificare

Un esperimento divertente è quello di presentare a una manciata di persone un modello primitivo (più semplice è il migliore: disegni, post-it su una parete, schizzo a fogli mobili, lavagna, ecc.) Con pulsanti posizionati ma non contrassegnati e identificati. Quindi chiedi alle persone cosa si aspettano che facciano i pulsanti anonimi. A volte, questo può portare a risultati informativi e molto interessanti.

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.