Woran erinnern sich Benutzer am meisten, an Position oder Farbe von Elementen?


11

Ich habe ein Navigationsmenü mit einigen Schaltflächen, das ungefähr so ​​aussieht (HINWEIS: Jede Schaltfläche hat ein eigenes Symbol , das sie von den anderen unterscheidet. Ich habe sie nicht zum Modell hinzugefügt, aber sie ähneln den Wins8-Symbolen):

Geben Sie hier die Bildbeschreibung ein

Einige Benutzer haben gemeldet, dass sie versehentlich auf Signieren anstatt auf Senden geklickt haben , was einfach unzulässig ist. Ich überlege jetzt, wie ich die Tasten besser unterscheiden kann. Eine Möglichkeit besteht darin, das Zeichen nach rechts zu verschieben. Der andere (wahrscheinlich zum Verschieben hinzufügen), um seine Farbe zu ändern:

Geben Sie hier die Bildbeschreibung ein

Ist die Position gut genug Differenzierung? Oder sollte ich auch Farbe verwenden? Das Hinzufügen einer neuen Farbe zu dieser Navigation hat einige Auswirkungen auf die Gesamtpalette und das Erscheinungsbild, sodass ich einen Preis zahlen muss.


2
Ich würde dies nicht als "Off Topic" bezeichnen, aber dies könnte sinnvoller sein, wenn Sie auf UX migriert werden.
DA01

@ DA01 Ja, ich habe darüber nachgedacht. Der farbliche Teil der Dinge ließ mich wundern und dachte schließlich: Kann in beides gehören? Es macht mir jedoch nichts aus, es zu migrieren!
Yisela

Einige Ihrer Benutzer haben eine blau / gelbe Farbenblindheit. Stellen Sie sicher, dass diese Farben für sie unterschiedlich sind!
Keshlam

@keshlam Auf jeden Fall! Ich habe eine farbenblinde App in der Taskleiste, um die Paletten auszuprobieren :)
Yisela

Ich würde auch nicht sagen. Geruch ist unvergesslicher :)
Scott

Antworten:


5

Es hilft auch nicht, dass Sie mit drei Wörtern aus vier Buchstaben arbeiten, die alle mit dem Buchstaben 'S' beginnen. :) :)

Farbe ist ein unmittelbarer Indikator dafür, dass etwas anders ist. In Ihrem ersten Beispiel haben Sie wirklich keine Ahnung, was diese Schaltflächen tun, es sei denn, Sie nehmen sich wirklich die Zeit, aufmerksam zu sein und sie zu lesen. Auf einen Blick sind sie viel zu ähnlich, um sie zu unterscheiden. Ein Paradigma, das wir bei meiner Arbeit verwenden, ist, dass wir unsere primäre Aktion von weniger wichtigen oder weniger dauerhaften / abschließenden Aktionen trennen.

Aber Farbe ist nicht unbedingt der Make-It- oder Break-It-Punkt. Eine andere gültige Strategie wäre, jeder Schaltfläche ein Symbol zuzuordnen (nicht nur den letzten beiden). Auf diese Weise schaffen Sie einen weiteren leicht unterscheidbaren Unterschied in den Elementen.

Was Ihre eigentliche Frage betrifft, wenn die Position ausreichend differenziert ist, denke ich, dass dies sicherlich hilfreich ist, da das Muster der Schaltflächen durch die beiden kleineren unterbrochen wird, was Sie dazu zwingt, die Unterschiede in den Schaltflächen wirklich zu betrachten, anstatt sie zu ignorieren. Die hinzugefügte Farbe hilft nur, dies weiter zu betonen, und wenn möglich, würde ich die Farbe auch persönlich hinzufügen, da dies die Zukunftssicherung erleichtert, falls später weitere Optionen hinzugefügt werden und die Schaltfläche möglicherweise häufiger übersehen wird. Vorausgesetzt, dass das Ändern der Farbe schwierig ist, würde ich die neue Positionierung als ausreichend empfinden.

Was ich jedoch denke, ist wahrscheinlich viel weniger relevant als das, was Ihre Benutzer denken oder tun, und wenn Sie die Ressourcen dazu haben, würde ich verschiedene Designs ausprobieren und es mit Benutzern testen, um zu sehen, welche sie bevorzugen und aus welchen Gründen.


Vielen Dank! Nur eine Anmerkung: Die Schaltflächen haben ziemlich unterschiedliche Symbole, ich kann die tatsächlichen Screenshots nicht veröffentlichen und ich habe sie nicht zu den Modellen hinzugefügt ... aber die Leute verwirren sie trotzdem!
Yisela

Ich dachte, sie wären nicht dem Leben treu, obwohl ich nicht schließen konnte, ob sie Symbole hatten oder nicht, danke, dass Sie das geklärt haben.
Hanna

6

Dinge, die zur Unterscheidung von Schaltflächen verwendet werden können:

  • die Etiketten (offensichtlich)
  • Farbe
  • Größe
  • bestellen
  • Ort
  • Nähe
  • Form / Stil

Je mehr unbeabsichtigten Schaden eine Aktion verursachen kann, desto wahrscheinlicher ist es, dass Sie aus mehr als nur einer der oben genannten Optionen auswählen möchten.

Da ich den Benutzerfluss für diese Befehle nicht kenne, weiß ich nicht, ob Ihr Vorschlag ausreicht, aber es ist definitiv eine Verbesserung gegenüber dem vorherigen, da Sie jetzt die Aktion "Oh, oh", "Senden", von den beiden anderen entfernt haben.

Ich würde vielleicht noch einen Schritt weiter gehen und eine vernünftige Differenzierung in der Nähe verwenden. Vielleicht etwas so drastisches wie dieses:

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

Ich habe hier eine Reihe von Unterscheidungsmerkmalen verwendet ... Nähe, Stil / Art der Schaltfläche und umbenannt in "Senden" in "Liefern" (siehe unten).

Eine weitere Herausforderung, die Sie zu haben scheinen, ist ein massiver Fall von Alliteration. Das kann etwas Kreativität erfordern, um das zu überwinden. Zum Beispiel möchten Sie wahrscheinlich nie zwei Schaltflächen nebeneinander mit den Bezeichnungen "Löschen" und "Liefern" haben :)


3

Ich stimme sowohl Johannes als auch DA01 zu, sie haben beide die Punkte angesprochen, die ich in Bezug auf Positionierung, Alliteration usw. machen würde.

Aber was möchte ich hinzufügen.

Da bereits Symbole zum Speichern und Senden von Zeichen vorhanden sind, sollte die Neupositionierung der Schaltfläche zum Senden allein ausreichend sein. Ich würde vorschlagen, die Farbe nicht zu ändern, da dies nicht erforderlich ist, und es ist auch eine drastischere Änderung für die Benutzer. (Versteh mich nicht falsch, ich weiß, dass sie damit umgehen können, aber ich denke nicht, dass dies erforderlich ist.)

Wenn die Symbole für Personen erkennbar genug sind, sollte die Trennung der Senden-Schaltfläche ausreichen.

Wenn Ihre Symbole weniger sofort erkennbar sind, dh Sie haben möglicherweise eine Disc oder einen USB-Stick anstelle der herkömmlichen Diskette für das Speichersymbol. Ich empfehle dringend, die Farbe so zu ändern, wie Sie es vorgeschlagen haben. Die Leute verstehen, dass Grün bedeutet, dass Sie gehen.

Hoffe die User sind am Ende glücklich;)


1

Woran erinnern sich Benutzer am meisten, an Position oder Farbe von Elementen?

Ich werde keine konkreten Vorschläge machen, sondern einen kurzen Kommentar zur Überschrift: Es ist sehr individuell. So wie manche Leute sagen "Ich verstehe, was du meinst" und andere sagen "Ich höre dich" oder ähnliches. Einige Leute sind auf Visuals eingestellt, andere eher auf Sound.

Manche Menschen sind mehr auf Form eingestellt, andere auf Farben. So wie Sie Farbenblindheit befriedigen müssen, müssen Sie berücksichtigen, dass nicht alle Menschen Form und Farbe als ihre primären Hinweise auf die Navigation sehen (manche Menschen identifizieren einen Baum, ein Tier, ein Haus anhand ihrer Form oder Farbe, andere Identifizieren Sie ein vorbeifahrendes Auto anhand von Geräuschen und nicht anhand von Form und / oder Farbe usw.).

In diesem Fall ist es natürlich ein Gleichgewicht zwischen den beiden (es würde Spaß machen herauszufinden, welche Art von Benutzern in die falsche Taste geraten. Möglicherweise gibt es dort ein Muster. Ich denke auch, dass Benutzer mit hervorragenden Computerkenntnissen schneller sind vorausgesetzt, wo man den richtigen Knopf findet.).

Da Sie uns die tatsächlichen Schaltflächen mit den Symbolen nicht anzeigen können, ist es schwierig, Vorschläge zu machen. Ein einfacher Weg könnte einfach darin bestehen, den Abstand zu dem "out" zu vergrößern, wie @ DA01 vorschlägt. So ähnlich wie MailApp:

Geben Sie hier die Bildbeschreibung ein

Nur ein Gedanke.


Bearbeiten

Ein Experiment, das Spaß macht, besteht darin, einer Handvoll Menschen ein primitives Modell (je einfacher desto besser: Zeichnungen, Post-its an einer Wand, Flip-Over-Skizze, Whiteboard usw.) mit Schaltflächen zu präsentieren, die platziert, aber nicht markiert und identifiziert sind. Fragen Sie dann die Leute, was sie von den anonymen Schaltflächen erwarten. Manchmal kann dies informative und sehr interessante Ergebnisse bringen.

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.