it-swarm-eu.dev

Sollten die OK / Abbrechen-Tasten rechts oder zentriert ausgerichtet sein?

Wo soll ich die OK/Abbrechen-Schaltflächen in meinen Dialogen platzieren? Unten zentriert oder rechts ausgerichtet? Ich habe beides gesehen und es ist mir persönlich egal, aber ich möchte ein einheitliches Erscheinungsbild für meine Anwendung erstellen. Gibt es dafür Richtlinien oder soll ich einfach machen, was ich will?

46

Ich denke, das gilt auch für diese Frage und beantwortet sie:

(Spoiler: Es spielt keine Rolle .)

In solchen Fällen spielt es oft keine Rolle , was Sie tun. Jede Wahl hat gute Argumente, und keine Wahl wird wahrscheinlich zu Usability-Katastrophen führen. Es kann einigen Benutzern 0,1 Sekunden ersparen, wenn Sie unter bestimmten Umständen die "richtige" Wahl treffen, aber es lohnt sich einfach nicht, ausreichend gründliche Nachforschungen anzustellen, um herauszufinden, was diese Wahl ist. Verwenden Sie Ihre Usability-Ressourcen besser für Dinge, die Ihre Leistungsindikatoren um 83% oder mehr verändern können.

Weitere Informationen: seit.com/alertbox/ok-cancel.html

45
Nacho

Wenn es streng genommen um Ausrichtung geht, gibt es keine richtige Antwort, als konsequent zu sein.

Die Ausrichtung der Tasten hängt jedoch mit dem Positionierung oder logische Reihenfolge der Tasten zusammen.

Es gibt zwei allgemeine Paradigmen, die auf die Positionierung von Tasten ** angewendet werden können.

  1. Lesereihenfolge - Die erste Schaltfläche in der Lesereihenfolge ist primär (OK) und hat Vorrang vor nachfolgenden Optionen (Abbrechen).
  2. Vorwärts/Rückwärts - Fortschritt oder Aktion vorwärts (Ok) ist mit einer Bewegung nach rechts verbunden, während Rückwärts oder Rückgängig (Abbrechen) mit einer Bewegung nach links verbunden ist.

Die Ausrichtung der Tasten kann das wahrgenommene Paradigma des Benutzers beeinflussen. Daher können einige Kombinationen von Ausrichtungen und Positionen für Benutzer widersprüchlich und daher verwirrend sein.

alt text

** Dies setzt eine Lesung von links nach rechts voraus. vielleicht nicht dasselbe für Lesesprachen von rechts nach links.

35
g .

Tun Sie, was zu Ihrer Anwendung und dem Zielbetriebssystem passt.

Wie Sie jedoch betonen, ist es wahrscheinlich wichtiger, in Ihrer Anwendung konsistent zu sein.

24
ChrisF

Ich denke, es ist besser (und allgemeiner), sie richtig auszurichten.

4
megubyte

Sie sind immer auf der rechten Seite und der Benutzer erwartet, dass sie auf der rechten Seite sind. Stellen Sie sicher, dass Sie genügend Platz haben, und geben Sie ihnen verschiedene Stile, um die primäre Aktion hervorzuheben.

3
giancarlo

Ich bevorzuge es, die wahrscheinlichste Aktion (in diesem Fall OK) rechts zu positionieren und ihr eine Farbe zu geben, damit sie leicht zu erkennen ist, und die weniger wahrscheinliche Aktion (in diesem Fall Abbrechen) links grau oder grau zu färben eine Farbe entlang der Linien des Formularhintergrunds.

Ich denke, es ist schlechtes Design, sie nebeneinander zu platzieren. Wenn ich abbrechen muss, halte ich an und suche nach der Schaltfläche, aber in allen anderen Fällen möchte ich nur automatisch handeln.

Auch siehe diese Frage auf ui.stackexchange .

3
idophir

Es hängt von Ihrer Plattform ab. Windows platziert die Schaltflächen auf der rechten Seite in der Reihenfolge <OK> <Abbrechen> und Mac OSX in der Reihenfolge <Abbrechen> <OK>. Wie andere Antworten ... sei konsequent. Für die Platzierung der Tasten würde ich die rechte Unterseite bevorzugen.

2
sysscore

ich denke, "OK" oder Ihre priorisierte Aktionsschaltfläche sollte aus folgendem Grund links sein: 1 Ein guter Prozentsatz der Benutzer verwendet die Tastatur in Formularen oder Dialogfeldern, und der Benutzer benötigt weniger Zeit, um die günstigste Aktion per Tab zu erreichen, wenn sie sich auf der linken Seite befinden . 2: Augenrotation oder Fittsches Gesetz 3: Denken Sie an blinde (halbblinde) Personen oder an die Verwendung von Anwendungen, wenn Sie im Sprachmodus fahren oder auf Anwendungen zugreifen. 4: Last but not least verwenden Sie Verben als Ihre Aktion

Es gibt viele Themen in diesem Forum, bitte gehen Sie sie durch

Denken Sie auch daran, dass meine Vorschläge nicht für kleine Geräte gelten.

2
Hemchandra

Bei einem linearen Prozess (wie bei einem Installationsprogramm) ist das Ausrichten der Schaltflächen "Weiter" rechts (in einer westlichen Umgebung) möglicherweise intuitiver.

Ich würde sagen, dass die Reihenfolge Ihrer Schaltflächen wichtiger ist. Unter Windows befindet sich die Schaltfläche "OK" immer links und die Schaltfläche "Abbrechen" rechts. Da Benutzer nicht lesen, verwirrt das Vertauschen der Schaltflächen OK und Abbrechen (wie dies bei einigen portierten Mac-Anwendungen der Fall ist) den Benutzer.

2
Petrus Theron

Ich denke es kommt auf das Design an. Wenn Sie ein Standarddesign für Ihr Formular verwenden, würde ich die Schaltflächen OK/Abbrechen auf der rechten Seite platzieren (http://bit.ly/9IzQo0). Wenn Sie jedoch CSS zum Ändern Ihrer Formulare verwenden, würde ich sie platzieren in der Mitte (http://www.tumblr.com/register).

1
rgaspary

Wenn Ihre Formularfelder linksbündig sind, erscheint es sinnvoll, auch Ihre Schaltflächen linksbündig auszurichten. Hier einige Untersuchungen darüber, wohin die Augen der Benutzer tatsächlich gehen und wie schnell sie reagieren: http://www.lukew.com/ff/entry.asp?571

Dies deutet darauf hin, dass die Linksausrichtung dieser beiden Optionen die beste Wahl für das Design ist - insbesondere, wenn die obigen Formularsteuerelemente ebenfalls linksbündig sind. Wenn Sie die Schaltflächen "Senden" und "Abbrechen" links platzieren, haben die Augen der Personen weniger Bewegungsfreiheit.

In Bezug auf ihre Augenbewegungen waren die Menschen am wenigsten effizient, wenn sie [eine Option mit rechtsbündigen Tasten] verwendeten.

1
Luke

Ich denke, es ist einfach, solche Themen von Fall zu Fall zu kritisieren, aber ich denke, jeder sollte ein ganzes Designsystem und/oder eine Musterbibliothek berücksichtigen, wenn er seine Meinung und/oder Testergebnisse äußert. Tatsache ist, dass je nach Inhalt und Test einige möglicherweise eine höhere Conversion aufweisen, wobei OK links und OK rechts angezeigt werden.

Wenn Sie jedoch ein gesamtes Entwurfssystem betrachten, halten Sie die Konsistenz für besser als wenn sie in einzelnen Links/Rechts-Tests am besten funktioniert? Ich bin damit einverstanden, dass Sie die "Vorwärts" -Aktion absichtlich umkehren möchten, wenn rücksichtsvolle negative externe Effekte wie "Zahlungsprofil löschen", etwas, das nicht umkehrbar ist usw. vorliegen, indem Sie den CTA - in diesen Fällen - links platzieren und abbrechen auf der rechten Seite.

Stellen wir uns jedoch vor diesem Hintergrund vor, dass die Mehrheit der Benutzer (zu diesem Zeitpunkt) Windows-Benutzer sind und Sie einen schrittweisen Ablauf für das Auschecken durchführen. Sie würden erwarten, dass "Kasse" oder "Weiter" auf der rechten Seite ist, mit "Zurück" oder "Abbrechen" auf der linken Seite. Dies ist auch bei den meisten Modal Use Cancel/Ok-Layouts der Fall (mit Ausnahme von Foundation), aber das ist nicht gut für Leute, die über einzelne A/B-Tests streiten oder Tests verwenden, bei denen eine höhere Konvertierung festgestellt wurde links gegen rechts.

Persönlich funktionieren CTAs in der Testerfahrung am besten rechts, aber ich bin immer gespannt, welche Metriken Menschen haben, die einen Styleguide oder ein Designmuster haben, das CTAs ganz links zeigt.

1
Arondale
  1. Die Reihenfolge spielt keine Rolle, solange sie nahe beieinander liegen, um zu implizieren, dass sie Geschwister sind. Das heißt, die Schaltflächen OK und Abbrechen bewirken unterschiedliche Aktionen, wirken sich jedoch auf dasselbe Element aus.
  2. Für eine Sprache von links nach rechts würde ich die Schaltflächen in die Mitte stellen oder rechts bündig.
  3. Ich würde die Schaltfläche OK mit einer Farbe hervorheben, die zum Branding passt.
0
Tim Huynh

Ich benutze normalerweise OK links, Abbrechen rechts.

Der einzige Fall, in dem ich sehen könnte, wie sich dieses Muster ändert (und dies spaltet die Haare, wohlgemerkt), wären unwiderrufliche Handlungen des Benutzers (dh mein Konto löschen, alle Menschen töten usw.), und dann könnte ich Sie möchten abweichen, um sie zu zwingen, über die Aktion nachzudenken, oder die Standardaktion zu zwingen, die sicherere Option zu sein.

0
drivingmenuts

Gemäß dem Gutenberg-Diagramm befindet sich der Terminalbereich (in dem die Site ihren letzten Anruf präsentiert, nachdem der Benutzer den Inhalt der Seite gescannt hat) unten rechts auf dem Bildschirm. Aufgrund des natürlichen Lesemusters westlicher Leser verringert das Vorhandensein der Schaltflächen an dieser Stelle die Ermüdung der Benutzer, da sie das Durchsuchen an dieser Stelle beenden. Wenn sich die Schaltflächen unten links befinden, werden die Benutzer im Allgemeinen im Terminalbereich fertig und müssen basierend auf dem Rückruf nach links zurückkehren, um ihre Aktion auszuführen. Dieses Muster gilt sowohl für Popups als auch für Bearbeitungs-/Hinzufügungsbildschirme.

Dieses allgemeine Muster gilt auch für die Reihenfolge, in der die Schaltflächen positioniert sind. Wenn Sie vor dem Abbrechen OK auflisten, zeigt der Benutzer fast immer alle Optionen an, bevor er die gewünschte auswählt. In den meisten Fällen möchte der Benutzer über Abbrechen auf OK klicken. Dies bedeutet, dass sie OK anzeigen, dann Abbrechen und dann zu OK zurückkehren. Sehr kleine, aber noch hinzugefügte Arbeit.

0
Brad Hutchison

Tolle Antworten hier. Was niemand erwähnt hat, ist das Fittsche Gesetz, das die Geschwindigkeit (und Leichtigkeit) des Klickens auf Ziele in einer GUI regelt. Es gibt einige harte Wissenschaft, wo primäre Tasten platziert werden sollen.

Grundsätzlich besagt das Fitts-Gesetz ( https://en.wikipedia.org/wiki/Fitts%27s_law ), dass die Größe des Ziels und die Entfernung vorhersehbar auf die Zeit wirken, die benötigt wird, um das Ziel zu treffen. Wenn sich eine Schaltfläche in der Ecke eines "Felds" befindet, ist die Zielgröße wohl unendlich (die einzigen wirklich unendlichen Zielgrößen sind die Ecken Ihres Computerbildschirms, in denen der Cursor von selbst zum Stillstand kommt). Während Geschwindigkeit nicht immer im Vordergrund steht, sollte Komfort (Benutzerfreundlichkeit) sein.

Interaktive Demo (ohne Ecken!): http://simonwallner.at/ext/fitts/

0
Rashcom