Machen Sie sich keine Sorgen um die Schaltflächenreihenfolge in Führen Sie dies stattdessen in einer Webanwendung aus.

(4. Juni 2019)

Sie entwerfen also eine Webanwendung. Wie sollte Ihre Button-Reihenfolge sein? Hier finden Sie einige Richtlinien für die Entscheidung über die Reihenfolge Ihrer Schaltflächen. Abgesehen von diesen Fällen spielt es keine Rolle, ob Sie die folgenden Anweisungen befolgen.

Lassen Sie uns zunächst alle Schaltflächen als primär und sekundär klassifizieren. In den meisten Kontexten sind primäre Aktionen positive Aktionen wie Speichern oder Senden und sekundäre Aktionen negative Aktionen wie Abbrechen oder Löschen.

Befolgen Sie die Plattformrichtlinien

Wenn Sie einen Desktop erstellen oder Bei einer mobilen Anwendung lautet die Antwort auf die Tastenreihenfolge der Schaltflächen einfach: Befolgen Sie die Plattformrichtlinien.

Für einen PC bedeutet dies eine primäre Aktion, gefolgt von einer sekundären Aktion.

Für einen Mac bedeutet dies eine sekundäre Aktion, gefolgt von einer primären Aktion.

Für Android bedeutet dies sekundäre Aktion, gefolgt von primärer Aktion.

Das war einfach. Aber mit welcher Schaltflächenreihenfolge arbeiten Sie für eine Webanwendung?

Schaltflächenreihenfolge für Webanwendungen

Wenn Sie eine Webanwendung entwerfen, die einen Dienst für Benutzer einer einzelnen Plattform bereitstellt Es ist ein Kinderspiel, die Konvention dieser Plattform erneut zu befolgen.

Wenn nicht, werden die Dinge etwas komplizierter. Benutzer verwenden Desktops, Tablets und Mobiltelefone. Sie können PC-Benutzer haben, die iPhones oder Androids verwenden, und Sie können Mac-Benutzer haben, die… nun, sie verwenden wahrscheinlich mehr iPhones als Androids. Ja, der Marktanteil für iOS, Android und OSX für Windows liegt derzeit bei 60 bis 40, aber das bedeutet nicht, dass Sie für 60% der Benutzer und nicht für die restlichen 40% optimieren. Warum nicht für 100% Ihrer Benutzer optimieren?

Die Reihenfolge der Schaltflächen spielt keine Rolle, wenn Sie dies tun. Stattdessen können Sie kontrastierte Schaltflächen in Form und Größe

für 100% optimieren Ihre Benutzer, indem Sie sich überhaupt nicht auf die Tastenreihenfolge konzentrieren. Sie können fortfahren und tatsächlich die Reihenfolge wählen, die Sie möchten. Konzentrieren Sie sich stattdessen auf den visuellen Kontrast nicht nur durch die Dimension der Farbe, sondern auch durch Form und Größe.

Wenn Sie die primäre Aktion als reguläre Schaltfläche und die sekundäre Aktion als gerade haben Text (Unterstreichung ist optional, aber meiner Erfahrung nach ist es besser, diesen Stil an Produktbesitzer zu verkaufen). Sie schaffen es, effektiv einen ausreichenden Kontrast zu schaffen, damit Benutzer den Unterschied zwischen primären und sekundären Schaltflächen leicht erkennen können.

Sie tun dies nicht. Im Gegensatz zu normalen Tasten, die beide die gleiche Form und Größe haben und sich nur nach Farbe unterscheiden, werden Sie nicht verwirrt. Im Folgenden finden Sie Beispiele für beide Aufträge, die beide gleichermaßen wirksam sind, damit Benutzer zwischen primären und sekundären Aktionen unterscheiden können.

So transformieren Sie reguläre Schaltflächen in kontrastierende Schaltflächen in Form und Größe

Wenn Sie über ein Design-System verfügen, aktualisieren Sie Ihre primären und sekundären Anwendungsschaltflächen über normale Schaltflächen (vorausgesetzt, sie sind nebeneinander platziert und nicht polig), um kontrastierte Tasten zu formen und zu dimensionieren, ist überhaupt nicht schwer. Es sollte auch ein einfacher Verkauf an Ihren Product Owner oder Enterprise Design System Council sein, da diese aktualisiert werden können, ohne sich um die Positionierung kümmern zu müssen. Gleiches gilt für die Aktualisierung des CSS, wenn Sie ein Web erstellen. Sie können die Tasten in Ihrem System praktisch von normalen Tasten durch kontrastierende Tasten in Form und Größe ersetzen, ohne sich um irgendetwas kümmern zu müssen.

  1. Angenommen, eines dieser Paare ist Ihre ursprüngliche Taste.

2. Ändern Sie die Farbe des Texts für die sekundäre Schaltfläche.

3. Bewegen Sie sie nebeneinander, damit sie sich berühren.

3. Entfernen Sie die Hintergrundform für die sekundäre Schaltfläche

4. Optional, obwohl empfohlen; Unterstreichen Sie den Text der sekundären Schaltfläche.

Vielen Dank fürs Lesen.

Nehmen Sie Kontakt mit uns auf oder bleiben Sie auf LinkedIn in Verbindung

und Twitter .

Lesen Sie mehr über UX, laden Sie UX-Ressourcen herunter und erhalten Sie unter Kegelbäume – Benutzerrecherche & Design und UX Quotes .

Und wenn dieser Artikel Ihnen hilft, klatschen Sie in die Hände! 👏

Bildnachweis

Ursprünglich veröffentlicht unter https://www.conetrees.com am 4. Juni 2019.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.