UX of Indecision: Gedanken in eine Aktion „stornieren“… und flexibel bleiben.

PANIK! …Keine Ursache.

Das Formular ist genau das, was Sie erwartet haben, aber Sie sind gerade nicht bereit, etwas einzugeben. Sie bemerken, dass sich oben rechts im Popover ein Schließfeld befindet, fragen sich jedoch, ob das Schließen des Popovers mit dem Abbrechen des Popovers identisch ist? Es ist nur eine Millisekunde vergangen, aber es fühlt sich wie eine Ewigkeit an. Sie bemerken, dass die Schaltfläche Speichern rechts und ganz links, die das Design ausgleicht und nicht mit der Schaltfläche Speichern konkurriert, einen Link Abbrechen darstellt. Sie atmen erleichtert auf und klicken.

Dieser süße Seufzer der Erleichterung

Die Mini-Krise, die Sie gerade erlebt haben, begegnet Anwendern jeden Tag in jeder Branche, nicht nur im Gesundheitswesen. Benutzer Ihres Produkts können unentschlossen sein und benötigen manchmal einen Moment, um zu entscheiden, ob sie Daten eingeben sollen oder nicht. Abbrechen erfüllt diese Anforderung. Es gibt dem Benutzer die Möglichkeit zu atmen und „nichts zu unternehmen“.

Für einige Benutzer ist „Abbrechen“ möglicherweise nicht das richtige Wort. “Rückgängig” mag das richtige Wort sein, aber beide beschreiben die gleiche Art der Interaktion oder fast das Fehlen derselben. Sie möchten zu einem vorherigen Status zurückkehren und keine Aktion ausführen. “Abbrechen” ist nicht so sehr eine Aktion, sondern fast das Gegenteil davon. Es ist eine Aktion. Deshalb glaube ich, dass es als solches behandelt werden sollte … in der Regel.

Andere Designer machen pauschale Aussagen über die Verwendung von Elementen innerhalb eines Designs. Sie schreiben wirklich konkrete Artikel darüber, wie Dinge verwendet werden sollten und nicht. Manchmal müssen wir als UX-Designer innerhalb der Grenzen schlechter UI-Designs arbeiten, und / oder manchmal erleichtert die UX die Notwendigkeit eines Formulars auf einer Seite, die die Zurück-Schaltfläche des Browsers nicht verwenden kann. Wenn ein UX-Designer (fast JEDER UX-Benutzer) einen Artikel über ein Oberflächenelement schreibt, verweisen Entwickler und Designer auf den Artikel, als ob Jakob Nielsen selbst vom Berg Sinai heruntergekommen wäre und Anweisungen dazu gegeben hätte, wie etwas verwendet werden sollte.

Ich konnte es kaum erwarten, mit Photoshop zu arbeiten

Es gibt ungefähr ein Dutzend Artikel darüber, wie schlecht Hamburger-Menüs für Ihre Gesundheit sind, und doch sind wir hier und die Benutzer sind jetzt mit ihnen vertraut.

Ich schließe mich dieser Idee nicht an, dass Sie immer in Stein gemeißelte Regeln für UX-Elemente schreiben können. Dinge ändern sich. Änderung der Benutzeroberfläche Ideen ändern sich. Kulturen verändern sich. Aus diesem Grund sollten Sie alle Regeln, die Sie auf Ihre Benutzeroberflächen anwenden, sorgfältig prüfen und flexibel sein . Sobald eine Organisation eine Regel für die Verwendung eines Elements definiert, wird ein Edge-Case angezeigt, der die definierten Regeln widerlegt. Das soll nicht heißen, dass Entwickler und UI-Designer die Erlaubnis haben sollten, sich nicht an die Regeln zu halten und UI-Elemente zu verwenden, wie sie wollen. Ein UX / UI-Designer sollte dies jedoch berücksichtigen. Bleiben Sie flexibel .

Also hier ist meine Empfehlung :

Verwenden Sie keine Abbrechen-Schaltfläche. Machen Sie einen Abbrechen-Link . Der Unterschied besteht darin, dass eine Schaltfläche in der Regel verwendet wird, um einem Benutzer mitzuteilen, dass er Maßnahmen ergreift. Es ist mutig genug, dass es optisch auffällt.

Das Platzieren eines Links oder einer Schaltfläche zum Abbrechen neben einer Schaltfläche zum Speichern ist in der Regel auch die falsche Vorgehensweise. Wenn die Tasten zu nahe beieinander liegen, besteht die Möglichkeit, versehentlich auf die falsche Taste zu klicken. Noch beunruhigender ist es, wenn Benutzer sich selbst die Schuld geben und sagen, dass sie es „fett gefingert“ haben. Wo platzieren Sie den Link Abbrechen?

Lehrbuch “Fett fingern” eine Benutzeroberfläche

Verwendung der westlichen Sprache und Prozesse als Grundlage für das visuelle Layout: Die Dinge funktionieren normalerweise von links nach rechts. Durchführen einer Aktion, Signieren eines Dokuments, Drücken der Eingabetaste auf einer Tastatur, Drücken der Eingabetaste oder Senden, Klicken auf Antworten – all diese Aktionen werden normalerweise unten rechts auf der Benutzeroberfläche ausgeführt. Die meisten mobilen Benutzer halten ihr Telefon mit der rechten Hand und die Schaltflächen Speichern / Kaufen / OK befinden sich normalerweise auf der rechten Seite des Bildschirms, um die Bedienung für den Daumen zu vereinfachen. Wenn wir räumlich darüber nachdenken, befindet sich ein guter Platz für den Abbruchlink horizontal auf der gegenüberliegenden Seite, sodass er sich auch am unteren Rand einer Schnittstelle befindet.

Mit nur ein paar einfachen CSS können wir die Schaltflächen Abbrechen und Speichern auf den gegenüberliegenden Seiten des div positionieren.

Letztendlich führt diese Platzierung eines Abbruchlinks auf der linken Seite zu weniger Fragen, wo ein Abbruchlink oder eine weiche Aktion wie “Änderungen verwerfen” vor dem Speichern platziert werden soll. Dies spart Zeit für jedes UX- / Entwicklungsteam, das an vielen Dialogen arbeitet.

Wie ich schon sagte: Sei flexibel. Schon während des Schreibens stieß ich auf einen Randfall bei der Arbeit, bei dem wir den Link zum Abbrechen rechts neben dem Aktionsknopf platzieren mussten. Lassen Sie sich nicht vorschreiben, was für Ihre Benutzer richtig ist. Dies sollten Sie selbst mit Benutzertests tun. Verwenden Sie Ihr kritisches Denken.