it-swarm.com.de

Platzierung von Schaltflächen für die Aktionen Zurück, Weiter und Entwurf speichern

Ich entwerfe ein fünfstufiges Formular. Der Benutzer kann das Formular verlassen und später darauf zurückgreifen. Ich habe also eine Aktion Zurück, Weiter und Entwurf speichern.

Was ist die ideale Platzierung der Schaltflächen/Elemente?

Ich möchte, dass sie links unterhalb der Formularfelder ausgerichtet sind, und ich möchte die primäre Aktion klar angeben: Weiter.

Bisher habe ich mir Folgendes ausgedacht:

de-emphasized the Previous button, emphasized Next button, Save Draft hyperlink

Alle Gedanken oder Lösungen werden geschätzt.

26
Giselle Sperber

Linksbündige Schaltflächen unter den Feldern bieten einen eindeutigen Pfad zur Fertigstellung. Luke Wroblewski diskutiert in seinem Buch "Web Form Design" ( PDF, das einige der Bilder enthält ) den klaren Weg zur Fertigstellung.

Hier ist ein Beispiel aus dem Buch, wie die Ausrichtung den Weg der Vollendung klarer machen kann:

Poor Path to Completion

Clearer Path to Completion

Ähnlich wie im obigen Beispiel können Sie in Betracht ziehen, "Weiter" als einzige primäre Aktion und "Zurück" und "Entwurf speichern" als sekundäre Aktionen (Links) zu verwenden.

Obwohl Sie in Ihrer Frage nicht direkt danach gefragt haben und möglicherweise bereits planen, diese Technik zu implementieren, würde ich auch empfehlen, dies in Ihrem Formular zu verwenden:

Steps

Dies würde dem Benutzer klar anzeigen, auf welchem ​​Schritt er sich befindet und wie viele Schritte noch übrig sind. Sie können auch auf einen beliebigen Schritt im Formular klicken, anstatt mehrmals auf die vorherige Aktion klicken zu müssen, um zu einem einzelnen Schritt zurückzukehren.

24
Keiwes

Der Designansatz, den Sie gewählt haben, ist gut, aber ein paar Dinge zu beachten:

Der schrittweise Ansatz könnte für sein

  1. Nur organisieren - hier funktioniert Previous gut
  2. Ein Schritt wirkt sich auf den nächsten aus. Bedeutet das, dass der Benutzer verliert? Dies macht Previous zu einer potenziell gefährlichen Funktion in dem Sinne, dass der Benutzer möglicherweise einige Daten verliert.

    In diesem Fall möchte ich Previous nicht so stark hervorheben und habe es möglicherweise sogar nicht. Stattdessen würde ich eine Liste der 5 Schritte anzeigen und sie anklickbar machen. Die abgeschlossenen Schritte würden ein Häkchen anzeigen. Auf diese Weise können Sie auf diesen Etiketten visuelle Anzeigen haben, um zu zeigen, dass das Sichern von Schritt 4 auf Schritt 2 die Daten von Schritt 3 und 4 beeinflussen kann.

Als zweites muss berücksichtigt werden, was passieren soll, wenn man auf Save as Draft Klickt, der Benutzer den Assistenten beendet oder im Formular selbst bleibt. Wenn beispielsweise Save as Draft Vorhanden ist, während der Benutzer viele Daten eingibt und diese nicht verlieren sollte, während er daran arbeitet, bleibt der Benutzer im Formular. Wenn der Benutzer den Vorgang möglicherweise über einen bestimmten Zeitraum abschließt, wird er das Formular wahrscheinlich verlassen. Im ersten Fall sollten Sie die automatische Speicherung in Betracht ziehen, da dies sicherstellt, dass keine Daten verloren gehen und Sie die Schaltfläche dann nicht benötigen.

3
Alok Jain

Tastenausrichtung

Links ausgerichtete Tasten haben mehrere Vorteile:

  • passt Formulare an, die mit links oder oben ausgerichteten Beschriftungen strukturiert sind
  • keine Ahnung, wo die Schaltfläche auf einem Breitbildschirm positioniert werden soll
  • funktioniert gut auf dem Handy

Tastenpriorisierung

  • angenommen, die meisten Benutzer schließen den gesamten Prozess in einer Sitzung ab . Next ist die primäre Aktion und sollte als solche hervorgehoben werden
  • Previous ist sekundär , d. h. sollte grau sein (oder sogar ein Link)

Entwurf speichern

  • Kann eine nette und praktische Funktion sein, wenn das Formular sehr lang ist oder es einen Grund gibt, warum Benutzer speichern möchten
  • Das Speichern erfordert auch einige Überlegungen: Wie speichern Benutzer, was wird beim Speichern der Eingabe angezeigt und was wird als Bestätigung angezeigt? Können sie wieder sparen? Wie greifen sie anschließend auf ein gespeichertes Formular zu?
  • Wenn Sie es sich leisten können, würde ich vorschlagen , das Formular automatisch zu speichern (siehe das Erstellen von E-Mails in Google Mail als Beispiel).

mockup

bmml source herunterladen - Wireframes erstellt mit Balsamiq Mockups

3
greenforest

Ich empfehle immer einen Mind-Map-Ansatz.

Berücksichtigung von Benutzern auf der rechten Seite - Zurück/Zurück ist immer links und Weiter ist immer rechts und vor allem Speichern/Entwurf/.. usw. sind kontextbasierte Aktionen und sollten sich daher im Symbolleistenbereich des Bildschirms befinden ( oben, unten - ich bevorzuge unten).

HINWEIS: Wenn Sie REGISTERKARTEN nicht verwenden, sollten Sie außerdem die Zugkomponente bereitstellen, um die aktuelle Position/Navigation anzuzeigen.

Finden Sie das Bild unten mit der Darstellung meiner Erklärung in weiteren Details.

Click Here

1
Tamjeed

Es gibt schwerwiegende Usability-Mängel bei der Platzierung Ihrer Schaltflächen, die mit keiner dieser Antworten behoben werden.

Ihre Schaltflächen "Weiter" und "Zurück" liegen zu nahe beieinander. Benutzer können auf einen klicken, wenn sie bei einem Unfall den anderen meinen. Sie sollten die Richtungszuordnung verwenden und die nächste Schaltfläche rechts platzieren. Dies ist das, was Benutzer erwarten und gewohnt sind, wenn sie paginieren, und es hilft, Klickfehler zu vermeiden.

Ihre vorherige Schaltfläche sieht deaktiviert aus. Ich bin mir nicht sicher, ob es im Bild deaktiviert ist, aber eine nicht deaktivierte vorherige Schaltfläche sollte mehr Farbkontrast haben, damit sie aktiv aussieht.

Ihr Save Draft-Link ragt heraus wie ein schmerzender Daumen. Es sieht so aus, als hätten Sie keine Ideen mehr, wo Sie es platzieren sollen, also haben Sie es am Ende willkürlich aufgeschlagen.

Durch Klicken auf die Schaltfläche Weiter sollten Benutzer zur nächsten Seite gelangen, aber auch automatisch den Fortschritt des Benutzers speichern, ohne dass der Benutzer manuell auf Entwurf speichern klicken muss. Sie können dies zulassen Der Benutzer weiß, dass dies geschieht, indem er die Benachrichtigung "Ihre Informationen wurden gespeichert" anzeigt, wenn der Benutzer auf Weiter drückt.

Es ist nicht erforderlich, eine Schaltfläche "Entwurf speichern" anzubieten, wenn die oben genannten Optionen vorhanden sind. Sie können Benutzer motivieren, zur nächsten Seite zu gelangen, bevor sie das Formular verlassen.

Wenn jedoch jede Ihrer Formularseiten viele Felder enthält, muss ein Benutzer möglicherweise in der Mitte des Formulars bleiben, bevor er auf Weiter klickt. In diesem Fall können Sie die Schaltfläche Entwurf speichern anbieten. Es sollte eine neutrale Taste neben der Schaltfläche Weiter sein.

Hier ist ein Artikel über Schaltflächen, die jeder Designer lesen sollte: http://uxmovement.com/buttons/how-button-color-contrast-guides-users-to-action/

1
delicatesteve

Wenn Sie jemanden durch einen Prozess führen, wird die nächste Schaltfläche als Speicher im Hintergrund verwendet. Sie müssen die Daten speichern, damit sie trotzdem zurückkehren können.

Es sei denn, sie schreiben eine Massenkopie und möchten den Entwurf möglicherweise speichern, bevor sie mit dem nächsten Schritt fortfahren. Ist das der Fall?

1
Ryan

In Bezug auf die Platzierung der Schaltflächen, wenn Save Draft (wie auch immer Sie es nennen möchten) wird den Workflow beenden. Vielleicht sollten Sie ihn weiter von den anderen entfernt platzieren. Es wäre störend, wenn jemand vor dem Klicken versehentlich ein paar Pixel nach rechts mit der Maus ruckte und rausgeschmissen wurde des Assistenten (obwohl sie keine Daten verlieren).

Ich erwarte, dass Websites die eingegebenen Daten (mit Ausnahme von Kennwörtern) auf späteren Seiten speichern, wenn ich einen Tab Previous erneut aufrufen möchte. Vermutlich ist dies hier der Fall (ansonsten interessieren Sie sich nicht genug für Benutzer, um sie zuzulassen auf halbem Weg speichern;)

Next kann für den letzten Schritt als Finish verwendet werden. Wenn Previous für den ersten Schritt ausgeblendet ist, können Sie die Schaltfläche Next an derselben relativen Position belassen, anstatt sie zu verschieben.

Wie Sie überlegt haben, den Titel für Save Draft in Kommentaren zu den anderen Antworten einige alternative Vorschläge:

  • Save and Exit: Nur wenn dies ein separates Popup ist, das automatisch geschlossen wird
  • Complete Later: Implizit, dass Sie die Informationen speichern, wenn der Workflow angehalten wird
1
Alok