Die Übersetzung des Artikels durch die Mitarbeiter der NN-Group wurde durch die Notwendigkeit veranlasst, Designern aus Produktteams einfache und verständliche Anweisungen zu geben, die bei Bedarf eingesehen werden können. Da der Artikel neulich veröffentlicht wurde, habe ich beschlossen, zu übersetzen und gleichzeitig nützliches Material mit allen zu teilen. Vielen Dank an Yura Vetrov für den Tipp. Den Originalartikel finden Sie hier.
Spoiler: Steuerelemente, die zwischen zwei verschiedenen Systemzuständen wechseln, sollten den Benutzern sowohl den aktuellen Status als auch den Status, in den das System eintreten wird, klar mitteilen, wenn der Benutzer auf dieses Steuerelement klickt.
Bei einem kürzlich durchgeführten WebEx-Meeting mit einem Kunden geriet ich in Panik und dachte, ich könnte das Mikrofon nicht einschalten. Ich musste eine 6-stündige Präsentation halten - wie soll ich das machen, wenn ich den Ton nicht einmal einschalten kann? Ich klickte weiter auf das durchgestrichene Mikrofonsymbol, aber das Mikrofon blieb durchgestrichen, egal was ich tat.
Hier ist ein Screenshot:
Systemsteuerung für die WebEx-Desktopanwendung:
Oben - Lautlos;
Unten - Stummgeschalt
In meiner Panik habe ich die Farbänderung des Symbols überhaupt nicht bemerkt! Trotz der Tatsache, dass das Mikrofon in beiden Zuständen gekreuzt wurde, stellte ich fest, dass die rote Farbe des Symbols signalisieren sollte, dass die Taste aktiv ist und ich deaktiviert bin.
Ich habe schon oft gesehen, wie Benutzer diesem Problem zum Opfer fielen. Die Stummschalttaste wird verwendet, um zwischen den beiden Systemzuständen (Stummschalten und Nicht stummgeschaltet) umzuschalten. Das Problem besteht jedoch darin, dass Benutzer nicht leicht erkennen können, welcher aktuelle Status vorliegt und in welchen Status sie wechseln (Im Gegensatz zu den Best Practices für das Symboldesign fehlt der WebEx-Implementierung auch Text Stummschaltflächenbeschriftung).
Zwei Informationen, zwei Kontrollen
In einer Situation, in der Benutzer zwischen zwei möglichen Zuständen navigieren können (der Einfachheit halber nennen wir sie Ein und Aus), gibt es zwei Informationsbits, die für den Benutzer relevant und zwar verwandt, aber nicht identisch sind:
- Der aktuelle Status des Systems - Ein oder Aus; im Beispiel mit einem Mikrofon - Mute oder UnMute;
- , — , , ( Unmute Mute).
Die naheliegende Möglichkeit, sie zu implementieren, besteht darin, zwei verschiedene Elemente der Benutzeroberfläche zu haben: eine Statusanzeige und eine Schaltfläche zum Ändern des Status.
In der Tesla-App geht der Steuerungsbildschirm beispielsweise folgendermaßen vor: Sie haben eine Statusanzeige, die anzeigt, dass das Auto gesperrt ist, und eine Schaltfläche zum Entsperren. Ein Klick auf die Statusanzeige bewirkt nichts, aber ein Klick auf die Steuerung entsperrt das Fahrzeug.
Tesla für iPhone:
(links) Das Symbol über der Schaltfläche zum Entsperren dient als Statusanzeige. Die Schaltfläche "Entsperren" ist eine Schaltfläche zum Umschalten des Status, mit der klar angegeben wird, was passiert, wenn Benutzer darauf klicken.
(Rechts) Der Status und die Beschriftung der Schaltfläche ändern sich, wenn der Benutzer das Fahrzeug entriegelt.
Zwei Informationszustände, eine Kontrolle
Wenn Sie jedoch ein System mit zwei Zuständen haben, dem aktuellen Zustand und dem, was als nächstes kommt, müssen sich diese ergänzen. Mit anderen Worten kann davon ausgegangen werden, dass zwei Informationen (Status und was als nächstes passiert) mit einem Steuerelement übertragen werden können - der Statusumschalttaste. Denn wenn Benutzer einen Status kennen (zumindest theoretisch), können sie auf das Ergebnis eines Klicks schließen. Denken Sie
jedoch daran, dass jede Entscheidung, die Sie treffen, Zeit und kognitive Anstrengungen erfordert und oft nur sehr wenig Zeit bleibt, um schnell zu reagieren. Wie im Beispiel: Ich versuche, mein Mikrofon einzuschalten, und jeder wartet entweder auf mich oder ignoriert mich und setzt das Gespräch fort. Das heißt, ich habe keine Zeit, anzuhalten und über die Benutzeroberfläche nachzudenken oder Schlussfolgerungen zu ziehen.
Manchmal kann der Zustand leicht anhand anderer Signale identifiziert werden. In einem Videoplayer gibt es beispielsweise nur ein Steuerelement (die Schaltfläche "Wiedergabe"), das den zukünftigen Status anzeigt. Es gibt jedoch genügend Signale, um zu verstehen, dass das Video abgespielt wird. Der Benutzer kann Audio hören oder Änderungen im Bild auf dem Bildschirm sehen.
YouTube: Das Wiedergabesymbol wird während der Wiedergabe des Videos durch eine Pause ersetzt. Das Symbol zeigt den Status an, in den das System beim Drücken der Taste eintreten wird.
Wenn Sie ein einzelnes Steuerelement verwenden müssen, um den Status zu kennzeichnen, und wie geht es weiter? Wie sollten Sie ihn kennzeichnen?
In dieser Situation können zwei Alternativen in Betracht gezogen werden:
- , , , , .
. , «», «» « ».
, , , Tesla OBS .
OBS Studio: «Start Recording» «Stop Recording» .
(, ), , . , YouTube . - .
/: , « ». , , , .
Word B () (), , , . .
Kehren wir zum WebEx-Beispiel zurück. Rückblickend sehen wir, dass WebEx ein Steuerelement verwendet hat, um sowohl den aktuellen Status als auch das, was als nächstes passieren wird, anzuzeigen, und eine zweite Entwurfsentscheidung implementiert hat - die den aktiven Status signalisiert. Leider war Rot als aktiver Indikator aus mehreren Gründen eine schlechte Wahl:
- Rot wird in der Benutzeroberfläche willkürlich verwendet. Beispielsweise ist auch die X-Taste (Beenden) rot, was nicht bedeuten kann, dass sie aktiv ist. (Wenn Rot einen aktiven Zustand darstellt, was bedeutet das rote Kreuz? Dass ich das Meeting bereits verlassen habe?)
- Eine andere Farbe (blau) wird verwendet, um den aktiven Status anderer Schaltflächen wie Video und Chat anzuzeigen (dh ein blaues Videosymbol zeigt an, dass das Video aktiviert ist).
Wenn keine eindeutige Anzeige des aktiven Status vorliegt, kann sich der Benutzer auf die Beschriftung der Schaltfläche verlassen, um zu entscheiden, was passiert. Wenn die Beschriftung des Symbols unverändert bleibt, führt dies lediglich zu Verwirrung.
Übrigens verwendet die Telefon-App auf dem iPhone dieselbe Implementierung, mit dem einzigen Unterschied, dass sie konsistenter als WebEx ist und eine weiße Füllung verwendet, um den aktiven Status anzuzeigen. Selbst mit diesen Einstellungen ist es schwierig, den aktiven Status der Schaltfläche zu bestimmen.
IPhone iPhone App: Die Stummschalttaste ändert ihr Symbol nicht, zeigt jedoch einen aktiven Status mit einer weißen Füllung an (links). Während Weiß wohl ein besserer Farbton als eine benutzerdefinierte Farbe ist, ist es kein starker Indikator für einen aktiven Zustand.
Empfehlungen
Was ist die allgemeine Empfehlung für Statusumschalttasten, die als Statusanzeigen dienen? Die sicherste Lösung besteht darin, zwei UI-Elemente zu verwenden, eines für den aktuellen Status und eines für die Statusumschaltaktion, wie im Tesla-Beispiel.
Wenn Sie möchten, können Sie beide in einem Steuerelement kombinieren, genau wie Zoom. Die Stummschaltung besteht aus zwei separaten Komponenten:
- Eine Textbeschriftung, die angibt, was passiert, wenn der Benutzer auf dieses Steuerelement klickt.
- Symbol für den aktuellen Status des Systems
Wenn Sie auf eine davon klicken, wird der Status geändert.
Im Zoom-Design soll das Symbol den aktuellen Status darstellen, und die Beschriftung gibt an, was passieren wird, wenn Benutzer auf diese Schaltfläche klicken. Durch Klicken auf ein Symbol oder eine Beschriftung wird der Status geändert.
Denken Sie daran, dass Ihr Ziel beim Ein- und Ausschalten darin besteht, sicherzustellen, dass Benutzer beide schnell verstehen:
- Aktuellen Zustand
- Was passiert, wenn sie auf dieses Steuerelement klicken?
Schätzen Sie die beiden Zustände, die das System durchlaufen wird.
Ist es offensichtlich, dass dies zwei entgegengesetzte Zustände sind?
- Wenn nicht, spricht es für ein Design mit zwei Steuerelementen: eines für den aktuellen Status und eines für die Aktion zum Übergang in einen anderen Status.
- (, , ), , , .
(, , ), ?
- , , ( ) .
- , — .
( Mute)?
- , .
- , .
Vielen Dank für die Zeit und abonnieren Sie den UXHorn tg-Kanal , auf dem ich regelmäßig die interessantesten Artikel zum Thema UX und Forschung veröffentliche.