it-swarm.com.de

Positionieren von Zurück, Abbrechen und Weiter in einem Vollbild-Assistenten

Hallo, ich habe einen Vollbild-Assistenten, der wie viele Assistenten die Schaltflächen Zurück, Abbrechen und Weiter hat. Wie können diese Schaltflächen auf dem Bildschirm optimal positioniert werden?

Gibt es Studien, die sich damit befasst haben?.

Dies sind einige der Optionen, aber Sie können mir gerne sagen, ob alle falsch sind: Here are some of the options:

10
Viraj

Dies ist ein guter Artikel über die wizard patternhttp://ui-patterns.com/patterns/Wizard

Das Beste ist Ihre dritte Option, die Schaltflächen Next und Back unten rechts zu haben, da der Benutzer sie häufig verwendet, hauptsächlich die Schaltflächen Next und Er wird die Schaltfläche Back verwenden, wenn er etwas vergessen hat oder etwas überprüfen möchte. Die Schaltfläche Cancel sollte sich unten links befinden, da dies als Ausnahme gedacht ist (d. H. Der Benutzer möchte den Vorgang abbrechen).

mockup

bmml source herunterladen - Wireframes erstellt mit Balsamiq Mockups

Es ist sehr wichtig, die Abbrechen-Schaltfläche zu haben. Stellen Sie sich vor, Sie haben einen Assistenten mit mehreren Schritten und Sie haben nicht die Schaltfläche Abbrechen und möchten zu dem Punkt zurückkehren, an dem Sie begonnen haben. Dann müssen Sie den ganzen Weg zurück klicken, indem Sie auf die Schaltflächen Back mehrere klicken mal, was für den Benutzer eine schreckliche Erfahrung ist.

8

Ich würde das Etikett Zurück vermeiden und es durch Zurück ersetzen, um Verwechslungen mit der Schaltfläche Zurück zu vermeiden. Dies gilt insbesondere dann, wenn die Assistentenseiten nicht dem Browserverlauf entsprechen.

Und da Abbrechen für Webseiten nicht sehr klar ist, empfehle ich Ihnen, es wie folgt umzubenennen: Abbrechen und Zurück zu abc

Was das Layout betrifft, würde ich Ihre dritte Option bevorzugen, bei der die Seitennavigation kolokalisiert ist und der Abbrechen-Link etwas unscharf ist.

4
heumann

Hier ist ein Artikel, den Sie wahrscheinlich irgendwann über die Positionierung von Schaltflächen haben, bei der Sie primäre und sekundäre Aktionen ausführen. http://www.lukew.com/ff/entry.asp?571

Ich denke, Ihr Beispiel rechtfertigt einen etwas anderen Ansatz, da es sich um einen mehrseitigen Assistenten handelt und zwei sekundäre Schaltflächen enthält.

So etwas könnte also funktionieren.

mockup

bmml source herunterladen - Wireframes erstellt mit Balsamiq Mockups

1
Jung Lee

Ich gehe davon aus, dass Ihr Beispiel eine Webanwendung ist, die im Gegensatz zu einer Desktopanwendung in einem Browser ausgeführt wird. Wenn dies zutrifft, kann die Verwirrung beim Auslegen der Schaltflächen darauf zurückzuführen sein, dass Sie nicht wirklich verstehen, was mit einem Klick auf eine Schaltfläche geschehen wird.

Allerdings ist "Abbrechen" in einer Webanwendung relativ schwer zu verstehen, da die Benutzer häufig nicht sicher sind, was nach dem Klicken auf "Abbrechen" passieren wird. Wir haben einige Benutzertests durchgeführt und mehr als 95% der Benutzer waren sich nicht sicher, was nach dem Klicken auf "Abbrechen" passieren wird.

In Bezug auf die Schaltflächen "Zurück" und "Weiter". Diese funktionieren besser, wenn angezeigt wird, wo sich der Benutzer gerade im Prozess befindet.

Als persönlicher Vorschlag, wenn ein Formular nicht übermäßig groß ist, würde ich empfehlen, es auf einer einzigen Seite mit klaren visuellen Indikatoren für Abschnitte zu haben. Denken Sie, klare Untertitel und Zeilen könnten gut funktionieren.

mockup

bmml source herunterladen - Wireframes erstellt mit Balsamiq Mockups

0
Denzo