it-swarm.com.de

Sollte ich die Schaltfläche "Weiter" ausblenden, bis die Aufgaben abgeschlossen sind?

In einem mehrstufigen Assistenten wird dem Benutzer in einigen Schritten eine Liste der Aufgaben angezeigt, die ausgeführt werden müssen, bevor mit dem nächsten Schritt fortgefahren werden kann.

Jede Aufgabe in der Liste öffnet ein Popup, in dem der Benutzer die Aufgabe abschließt.

Ich habe drei mögliche Lösungen für die Schaltfläche "Weiter":

a) Zeigen Sie es die ganze Zeit. Wenn der Benutzer darauf klickt, bevor alle Aufgaben abgeschlossen sind, werden dem Benutzer Informationen darüber angezeigt, was zu tun ist, bevor er fortfahren kann.

b) Zeigen Sie eine deaktivierte Schaltfläche an, die aktiviert ist, wenn alle Aufgaben abgeschlossen sind. Im deaktivierten Zustand wird auf der Schaltfläche eine allgemeine Meldung angezeigt, dass alle Aufgaben abgeschlossen sein müssen, bevor Sie fortfahren können.

c) Blenden Sie die Schaltfläche aus und zeigen Sie sie erst an, wenn alle Aufgaben abgeschlossen sind.

27
Dag Mikkelsen

Meine Web-App hat den gleichen Workflow und wir zeigen eine deaktivierte Version der Schaltfläche Weiter, die aktiviert ist, wenn alle Formularfelder eingegeben wurden. Wenn der Benutzer auf die Schaltfläche Weiter klickt, ohne alle Informationen einzugeben, wird im Popup eine Benutzermeldung angezeigt. Ich denke, B ist die beste Lösung.

Option A kann für den Benutzer frustrierend sein, da er möglicherweise auf Weiter klickt und eine Fehlermeldung erhält. Die deaktivierte Schaltfläche Weiter bietet einen herkömmlichen visuellen Hinweis, den sie benötigen, um die Aufgaben zu erledigen, bevor sie fortfahren können.

Option C kann sich für den Benutzer als verwirrend erweisen, da er nicht weiß, dass es einen nächsten Schritt gibt oder ob er fortfahren kann. Es ist auch keine gute Praxis, primäre Navigationssteuerelemente auszublenden. Hoffe, dies hilft!

60
Ling

Es ist ein Anti-Muster um Angebote visuell zu deaktivieren, Angebote funktional zu deaktivieren oder Angebote zu verbergen. BITTE tu es nicht. Ich werde mich für alle drei einsetzen.

Das Deaktivieren oder Verbergen von Angeboten ist einer meiner größten Probleme, zumal es sich um eine Überentwicklung der Lösung handelt:

  • Es ist immer ein zusätzlicher Entwicklungs- und Konstruktionsaufwand, etwas zeitweise auszublenden oder zu deaktivieren.
  • Die clientseitige Datenüberprüfung ist nur eine der unzähligen Möglichkeiten, wie das Speichern der Daten (oder eines anderen Endergebnisses) fehlschlagen kann. Selbst wenn die clientseitige Überprüfung erfolgreich ist und Sie Ihre Schaltfläche jetzt "anzeigen" und "aktivieren", kann dies möglich sein Immer noch ein Fehler, wenn der Benutzer auf Weiter klickt, und Sie müssen diesen Fehler immer noch auf nette Weise behandeln. Beispielsweise kann die serverseitige Überprüfung fehlschlagen, es kann ein Netzwerk- oder anderer Serverfehler vorliegen, es kann ein Fehler im Dateisystem auf dem Gerät auftreten usw.
  • Manchmal ist die clientseitige Validierung falsch (veraltet oder fehlerhaft) oder kann die Schaltfläche einfach nicht zum richtigen Zeitpunkt "anzeigen" oder "aktivieren". Dies würde eine Teilmenge der Benutzer vollständig blockieren, und es ist schwierig, diese Art von Fehler zu erkennen. In der Regel warten Sie darauf, dass ein Benutzer den Support kontaktiert und diese Informationen bis zu den Personen zurückfließen, die sie beheben können.

Zusammenfassend lässt sich sagen, dass Ihr zusätzlicher Design- und Engineering-Aufwand mehr Risiko als Wert schafft. Selbst wenn Sie der Meinung sind, dass Sie die Risiken zu 100% mindern können, handelt es sich immer noch um ein Anti-Muster, wie unten erläutert.

—————————————————

Von der offensivsten zur am wenigsten offensiven:

Warum sollten Sie keine Vergünstigungen verstecken?

Zunächst einmal, warum sollten Sie etwas verstecken ? Sie sollten Dinge aus Datenschutz- oder Sicherheitsgründen verstecken. Warum ist die Leistung dort? Es dient zwei Zwecken: der Kommunikation über den Nutzen der Anwendung und einem Mechanismus, mit dem der Benutzer der Anwendung seine Absichten und Überzeugungen mitteilen kann. Sie sollten also keine Vergünstigungen verbergen, es sei denn, Sie versuchen, das Dienstprogramm Ihrer Anwendung privat oder sicher zu machen. Nehmen wir an dieser Stelle an, dass Sie nicht versuchen, privat zu bleiben oder die Tatsache zu sichern, dass Ihre Anwendung die Fähigkeit Fortsetzung hat, und dass Sie die Schaltfläche dauerhaft sichtbar gemacht haben. Lassen Sie uns an dieser Stelle die Vorteile einer sichtbaren Leistung bemerken:

  • Der Benutzer kann es entdecken - er kann sich über die Funktionen der Anwendung informieren.
  • Die Kenntnis der Funktionen der Anwendung motiviert Sie, sie zu verwenden und Aufgaben auf dem Weg zur Erreichung dieser Funktionen zu erledigen. Z.B. Sie sind motivierter, das Formular auszufüllen, weil sie wissen, dass sie am Ende „weitermachen“ können.
  • Erfahrene Benutzer wissen, wo sie es finden können, und - das ist ein bisschen lustig - aber zu wissen, dass Sie es gefunden haben, auch wenn Sie es aus irgendeinem Grund momentan nicht verwenden dürfen, ist wirklich wichtig und befriedigend für die Benutzererfahrung. Wenn Sie es nicht finden können, fragen Sie sich, ob es verschoben wurde oder ob Ihr Speicher nicht funktioniert. In der Regel sehen Sie sich eine Weile um und verlieren schließlich das Vertrauen in die Anwendung. Haben sie die Funktion gelöscht? Ist es kaputt? Werden sie es alle paar Monate bewegen?

Warum sollten Sie die Vergünstigungen nicht funktional deaktivieren?

Wir haben dies im vorherigen Abschnitt angesprochen. Dies kommt auf den zweiten Zweck einer Leistung an: als Mechanismus für den Benutzer, um der Anwendung ihre Absichten und Überzeugungen mitzuteilen. Dies ist ein wichtiger Punkt der Verwirrung. Die meisten Designer und Entwickler nehmen den Vorteil zum Nennwert: Eine Schaltfläche mit der Aufschrift "Weiter" wird fortgesetzt, wenn Sie darauf klicken, oder eine Schaltfläche mit der Aufschrift "Löschen" wird gelöscht, wenn Sie darauf klicken. Dies ist das ultimative Ziel, aber der Knopf ist so viel mehr als das. Durch Klicken auf eine Schaltfläche kommuniziert der Benutzer eine oder mehrere der folgenden Aktionen:

  • sie beabsichtigen eine Aktion auszuführen
    • Die Absicht des Benutzers zu erfassen, ist ein regelrechtes Wunder. Sie sollten diese Informationen unbedingt zu Ihrem Vorteil nutzen - Sie haben einen bereiten und willigen Benutzer zur Hand. Führe sie durch den Trichter.
  • sie glauben , dass die Aktion stattfinden wird, wenn sie darauf klicken
    • Der Benutzer hat Ihnen nur etwas übermittelt, das er nur durch Klicken auf die Schaltfläche übermitteln kann: Er glaubt, die Kriterien für die Ausführung dieser Aktion erfüllt zu haben. Wenn dies nicht der Fall ist, ist dies die perfekte Gelegenheit, sie anzuleiten, und der beste Zeitpunkt, um mit ihnen zu kommunizieren, da sie aktiv mit der Anwendung interagieren.
  • sie glauben , dass sie darauf klicken sollen
    • Vielleicht sind sie ein neuer Benutzer mit einer anderen Erfahrung in der Vergangenheit, oder vielleicht sind sie neu im Internet (kein Scherz), oder vielleicht sind sie heute (oder jeden Tag) ein wenig verschwommen. Aber aus irgendeinem Grund klickten sie auf diesen Knopf und dachten, es würde das Ding tun. Es wird nicht ... aber auch dies ist die perfekte Gelegenheit, um sie zum Erfolg zu führen - offensichtlich haben sie bereits alle anderen Mitteilungen in der Benutzeroberfläche durchgeblättert, um auf diese Schaltfläche zu klicken. Der Knopf hat ihre Aufmerksamkeit erregt, also lenken Sie ihre Aufmerksamkeit auf das, was sie eigentlich tun sollten (was auch immer sie reparieren müssen).

Schließlich Warum sollten Sie die Leistung nicht visuell deaktivieren?

Einfach, weil ein Behindertengeld kein Geld ist. Da Sie sich die Mühe gemacht haben, den visuellen Stil von Schaltflächen anzupassen, die nichts tun, haben Sie dem Benutzer erfolgreich mitgeteilt, dass er nichts tut. Daher wird es ihre Aufmerksamkeit nicht erregen, sie werden nicht glauben, dass sie darauf klicken sollen, sie werden nicht glauben, dass es irgendetwas bewirken wird, und deshalb glauben sie nicht, dass sie eine Möglichkeit haben, ihre Absichten oder Überzeugungen zu kommunizieren ( oder Verwirrung) zu Ihnen. Sie sehen sich vielleicht auf der Seite nach etwas anderem um, aber was ist, wenn sie es aufgrund eines anderen UX- oder Codefehlers immer wieder vermissen? Es wäre viel einfacher und schneller, auf die Schaltfläche zu klicken, auf die sie zu klicken glauben, und dann könnten Sie ihnen klare Anweisungen geben, was als nächstes zu tun ist. Mit anderen Worten, der Benutzer ist in der Benutzeroberfläche "verloren" und nicht "früh", um auf die Schaltfläche zu klicken.

28
colllin

Wenn die Aufgaben obligatorisch sind und nur für Funktionen gelten sollten, die das Erlebnis verbessern, z. B. die Auswahl der Farbe einer Jacke vor dem Kauf, würde ich empfehlen, die Schaltfläche sichtbar, aber deaktiviert zu lassen.

In Kombination mit der Verwendung von optionalen Tagging-Feldern und Messaging sollten Ihre Benutzer die Schritte problemlos ausführen können.

Ja, wir möchten die Leute nicht ärgern. Das bedeutet nicht, dass wir keine Steuerelemente verwenden sollten, um sicherzustellen, dass das erwartete Ergebnis für den Benutzer korrekt ist, und dass sie sich nicht ärgern, wenn sie das Ende eines Prozesses erreichen und Sie müssen zu einer Seite zurückkehren, um eine Aktion auszuführen, die wir nicht erzwungen haben, obwohl dies erforderlich war.

6
DarrylGodden

Rahmenherausforderung: In den meisten Fällen ist der mehrstufige "Assistenten" -Workflow, mit dem Sie nicht weitermachen (oder sogar sehen) können, was Sie als Nächstes fragen werden, bis Sie fertig sind, wonach Sie gerade gefragt werden, benutzerfeindlich und ist ein dunkles Muster. Für den Benutzer scheint es, als würden sie gebeten, Informationen zu geben, bevor sie wissen, ob dies für sie von Vorteil ist oder ob sie den gesamten Vorgang ausführen können - es kann sich herausstellen Sie haben keine zusätzlichen Informationen, die sie zu einem späteren Zeitpunkt benötigen, oder dass ein späterer Schritt ihnen sagt, dass sie sich nicht qualifizieren, um fortzufahren.

Die richtige UX, wenn es zu überwältigend ist, alles auf eine Seite zu bringen, ist ein paginierter Prozess, der:

  • sie können sich frei hin und her bewegen, ohne alle Informationen einzugeben
  • macht deutlich, dass Sie dies tun können
  • macht Ihnen klar, wenn Sie Informationen ausgelassen haben, die benötigt werden, bevor Sie den gesamten Vorgang abschließen können
  • macht deutlich, ob Ihre Teilarbeit gespeichert wird oder gespeichert werden kann, wenn Sie den Prozess abbrechen oder bis später beiseite legen

Ich habe kürzlich an einem ähnlichen mehrstufigen Assistenten gearbeitet, der Ärzten dabei half, die richtigen medizinischen Lizenzen zu finden, um sie zu beantragen.

TL/DR: Wir haben die Option für deaktivierte Schaltflächen gewählt.

Da wir einen schrittweisen Ansatz verfolgten, bei dem die Antwort auf jede Frage die nachfolgenden Fragen leitete, musste der CTA "Weiter" nach jeder Antwort erfolgen. Bitte beachten Sie, dass alle Fragen zu diesem Ablauf obligatorisch waren.

Zu diesem Zweck haben wir die folgenden zwei Ansätze getestet

  1. Anzeigen einer aktiven Schaltfläche "Weiter", die den Status "Aktiv" anzeigt - egal was passiert.
  2. Anzeigen einer deaktivierten Schaltfläche "Weiter", die aktiv wird, wenn der Benutzer die einzelne Aktion/Auswahl getroffen hat, die zum Fortfahren erforderlich ist.

Wir haben die dritte Option zum Ausblenden des CTA "Weiter" nicht getestet, da wir dies im Wesentlichen als nicht intuitiv mit unzureichender Darstellung des Systemstatus angesehen haben.

Unsere Ergebnisse waren wie folgt:

  1. Die zweite Option (Schaltfläche deaktivieren, bis sie relevant ist) gab den Benutzern einen visuellen Hinweis auf die umsetzbaren Bereiche, auf die sie sich konzentrieren sollten.
  2. Wenn die Benutzer versuchten, auf die Schaltfläche "Deaktiviert" zu klicken (was sehr selten vorkam), kehrten sie aufgrund des Hinweises, den der deaktivierte (verblasste) Status liefert, intuitiv zur Frage zurück.
  3. Wenn die Schaltfläche immer aktiv bleibt (Option 1), werden die Benutzer verwirrt, da sie auf die Schaltfläche klicken, ohne die entsprechende Frage zu beantworten, und die nachfolgende Fehlermeldung zögert und sie verlangsamt.

Aus diesen Gründen haben wir uns für Option 2 (deaktivierte Tasten) entschieden.

Einige Dinge, die Sie beachten sollten, wenn Sie sich für Option 2 entscheiden (deaktivierte Taste)

  1. Es ist ideal für Flows, bei denen die Eingaben nur geschlossene Vokabeln (Optionsfelder, Kontrollkästchen usw.) und keine Texteingaben sind. Denn bei Texteingaben würde das Gerät nicht wissen, ob das Formular wirklich vollständig ist, um die Schaltfläche "Weiter" zu aktivieren.
  2. Die Schaltfläche sollte sichtbar sein, wenn sich die Benutzer mit der Frage beschäftigen, damit die Benutzer sehen können, wie sich der Status der Schaltfläche ändert.
  3. Es ist auch ideal für Flows, bei denen jede Stufe nur eine Frage hat, um die Interaktion der Schaltfläche "Weiter" konsistent zu machen. (dh: Sie erhalten die nächste Frage erst, wenn Sie auf Weiter klicken).

Hoffe das hilft!

1

Ich denke, der zweite Ansatz ist der richtige Weg. Der Benutzer weiß dann bereits, wo er fortfahren kann und dass weitere Schritte kommen.

der dritte Ansatz kann auch funktionieren, ich müsste einige Modelle dafür sehen. Es kann sehr elegant sein, aber die Gefahr, den Benutzer zu verwirren, besteht. Ich denke, der zweite ist sicher, zuverlässig und benutzerfreundlich.

1
Kweamod

Wo ist Option D? Zeigen Sie die Schaltfläche im aktivierten Zustand an und zeigen Sie Anweisungen an, die verdeutlichen, dass das Formular ausgefüllt werden muss, bevor Sie fortfahren können. Auf diese Weise lassen Sie etwas entdecken. Der Benutzer hätte die Anweisungen lesen können (und sollten), aber wenn er dies nicht tut, kann er trotzdem auf die Schaltfläche klicken und Feedback erhalten, was als nächstes zu tun ist.

Ich rate, keine Warnungen oder Fehlermeldungen zu senden, sondern die Anweisungen höflich erneut anzuzeigen oder zu flashen oder zusätzliche Informationen anzuzeigen, was zu tun ist. Für Bildschirmleser möchten Sie möglicherweise aria-live=“assertive” da es eine gewisse Priorität hat zu wissen, was nach dem Klicken passiert.

1
jazZRo