it-swarm.com.de

Wie zeigen Sie den Benutzern den Fortschritt in einem mehrstufigen Formular an?

Was halten Sie von dem folgenden Formularentwurf, den ich vorbereitet habe?

  • oben befindet sich ein Fortschrittsbalken
  • auf der rechten Seite werden die Schritte aufgelistet und jedes Mal, wenn der aktuelle Status durch Auswahl angezeigt wird

Alternativtext http://kepfeltoltes.hu/110210/form_progress_indicator_www.kepfeltoltes.hu_.jpg

Verwenden Sie noch etwas? Ist das ausreichend (In diesem aktuellen Fall ist das Formular für eine Bank bestimmt.)

17

... oder ist es schon zu viel? Fragen Sie sich: warum brauchen Sie eine Fortschrittsanzeige?

In der Regel geben Sie den Fortschritt an, damit der Benutzer abschätzen kann, wie lange er brauchen wird, ob er in einer bestimmten Zeit fertig sein kann. Ich würde versuchen, "Kontext" -Elemente zu minimieren.

Fortschrittsbalken

Im Vergleich zu den anderen Optionen ist dies nur in folgenden Fällen sinnvoll:

  • die für einzelne Schritte/Seiten erforderliche Zeit variiert erheblich (mehr als beispielsweise ein Faktor von 3), und diese Abweichung ist benutzerunabhängig
  • sie haben Fortschritte pro Seite, z. welche Optionsfelder bereits ausgefüllt waren. In den meisten Fällen wäre das nur eine nette Spielerei, die nicht wirklich notwendig ist.

Schritt i/N

Dies ist ausreichend, wenn der Benutzer keine Möglichkeit hat, zu einzelnen Schritten zu springen, und vorwärts/rückwärts animieren kann.

Sprungliste

Eine Sprungliste einzelner Themen ist ein definitives Plus, wenn der Benutzer bestimmte Schritte überspringen kann oder eine nicht sequentielle Verarbeitungsreihenfolge ein häufiger Anwendungsfall ist. (Ich kann mir keine vorstellen, die nicht konstruiert klingt).

statische Liste

Eine statische Liste (d. H. Nicht für die Navigation, nur eine Anzeige) hilft in einigen Fällen immer noch. Erstens gibt es dem Benutzer eine Schätzung, die viel besser sein kann als ein Step I/N oder ein Fortschrittsbalken. Zweitens gibt es Hinweise, was der Benutzer benötigt, um alle Seiten zu vervollständigen. Wenn der vorletzte Schritt "Kreditkartendetails" ist, weiß ich, dass ich eine Kreditkarte benötige.

Die Kenntnis der Anforderungen ist besonders wichtig, wenn ich eine unvollständige Sequenz nicht speichern und später fortfahren kann. Eine statische Liste ist weniger indoktrinierend als eine erklärende Seite.

Eine statische Liste ist als Vorschau wenig sinnvoll, wenn Sie je nach Benutzereingabe wichtige Teile verzweigen und überspringen. Eine Sprungliste ist in diesem Fall immer noch sinnvoll, wenn Sie zurückgehen und möglicherweise eine Vorschau der nächsten Schritte anzeigen können.


Es gibt komplexere Szenarien, z. B. das Ausfüllen von Steuerformularen, in denen Sie detailliertes Feedback geben müssen, dass einige Felder fehlen oder ungültig sind. Das lässt sich sehr gut mit einer Fortschrittsanzeige mischen.

13
peterchen

Ich fand das Beitrag auf SmashingMagazine ziemlich aufschlussreich. Dies ist ein Auszug aus dem Beitrag :

Fortschritts-Tracker sollen den Benutzern bei einem mehrstufigen Prozess helfen. Es ist wichtig, dass diese Tracker gut konzipiert sind, um die Benutzer darüber zu informieren, in welchem ​​Abschnitt sie sich gerade befinden, welchen Abschnitt sie abgeschlossen haben und welche Aufgaben noch zu erledigen sind.

Verwendung von Fortschrittsanzeigen

  1. Online-Bestellung: Die bei weitem häufigste Anwendung von Fortschrittsanzeigen ist der Online-Einkauf, da dies normalerweise mehrere Schritte umfasst.

  2. Feature-Tour-Anleitungen: Fortschritts-Tracker werden auch verwendet, um Benutzer durch die Funktionen von Online-Produkten und -Diensten zu führen, wie in den folgenden Beispielen gezeigt:

  3. Mehrschrittformulare: Wenn ein Formular viele Benutzereingaben erfordert, ist es möglicherweise am besten, das Formular in mehrere Schritte aufzuteilen.

Best Practices in Progress Tracker-Design

  1. Anzeigen eines logischen Fortschritts: Die meisten Fortschritts-Tracker sind so konzipiert, dass sie die Schritte von links nach rechts anzeigen. In den meisten Ländern lesen die Leute von links nach rechts, daher ist es sinnvoll, dass Fortschrittsanzeiger diesem Muster folgen. Das reicht jedoch nicht aus - es muss etwas geben, das den Benutzer darüber informiert, dass er einen mehrstufigen Prozess ausführt.

  2. Den Benutzer über seinen Standort auf dem Laufenden halten: Ein wesentlicher Aspekt des Entwurfs eines guten Fortschritts-Trackers besteht darin, den Benutzer darüber zu informieren, wo sich der Benutzer gerade befindet. Dies ergänzt den logischen Verlauf, da der Benutzer weiß, wo er sich in Bezug auf seinen Standort befindet und welche Abschnitte folgen sollen.

  3. Positionierung: Da Fortschritts-Tracker eine Form der Navigation sind, ist es am besten, sie unter der primären und sekundären Navigation (z. B. Brotkrumen) und über dem Inhalt zu platzieren auf die sich der Fortschritts-Tracker bezieht. Während ein Fortschritts-Tracker als Seitentitel fungieren kann, ist es am besten, den Titel des aktuellen Abschnitts unter dem Fortschritts-Tracker zu platzieren, um die aktuelle Position zu verstärken.

Lesen Sie die vollständiger Beitrag für Designfehler, um , zu vermeiden, wie und grafische Beispiele .

Codebeispiel

Sie können sehen, dass das von mir verwendete HTML/CSS (jsfiddle) Folgendes rendert (keine Bilder verwendet):

Steps in a multi-step form

10
Naoise Golden

Da der prozentuale Fortschrittsbalken mathematisch ein Intervall von reellen Zahlen zwischen 0 und 100 darstellt, eignet er sich nicht wirklich für Situationen, in denen Sie eine diskrete Anzahl von Schritten ausführen müssen.

Anstelle des prozentualen Fortschrittsbalkens können Sie auch eine Variation des "Schritt 1/6 Themas" vornehmen

(o) ---- (x) ---- (o) ---- (o) ---- (o) ---- (o)

was ich in diesem Fall für angemessener halte.

Natürlich könnte man argumentieren, dass der Prozentsatz tatsächlich (Anzahl der ausgefüllten Felder)/(Anzahl der Gesamtfelder) ist. In diesem Fall würde die Position im Formular sehr genau angezeigt. Das einzige, was hier zu tun ist, ist, es für den Benutzer nicht verwirrend zu machen, wenn der Prozentbalken bei 50% angezeigt wird, und sich dennoch in Schritt 1 zu befinden.

7
Liviu A

Ein Fortschrittsbalken soll dem Benutzer eine Vorstellung davon geben, wie weit er ist. Ich finde deine zu "präzise". Wie wäre es mit so etwas:

enter image description here

Beachten Sie das Fehlen der Bezeichnungen "0%" und "100%".

2
Hisham

Ist das Problem für den Benutzer wirklich ein Fortschritt? Oder Vollständigkeit? Anstatt ihnen zu zeigen, wie lange es dauert, bis sie fertig sind (Fortschrittsbalken), zeigen Sie ihnen, was sie noch zu tun haben (Vollständigkeitssymbol). Ich habe gerade an einer Reihe von Kabeln für einen ersten Anmelde-Workflow für ein Finanzdienstleistungsprodukt gearbeitet und mich für die Vollständigkeit entschieden.

In diesem Fall - ein ca. 30-minütiger Vorgang, bei dem der Benutzer viele externe Informationen zur Hand haben musste - war es wichtiger, dem Benutzer zu zeigen, was er getan hatte (ein Häkchen) und was er noch zu tun hatte (kein Häkchen) Symbol), angezeigt neben den Titeln in den Registerkarten, die die Aufgabe des Benutzers organisiert haben.

0
abennoschmidt

Sieht so aus, als würden Sie den Fortschritt überbestimmen, indem Sie einen Balken und auch die Schritte auf der rechten Seite haben. Verwenden Sie auf oder die andere. In diesem Fall wäre es wahrscheinlich angemessener, Schritte zu verwenden, da der Fortschritt eher diskret als kontinuierlich ist.

Außerdem sollten sich die Stufen auf der linken Seite befinden. Konvention ist, dass das linke Feld für Informationen "höherer Ordnung" (d. H. Navigation, Menü oder andere Informationen hoher Ebene) verwendet wird, während die rechte Seite für "Detail" -Informationen/Eingabe verwendet wird.

0
Simon Woodside