it-swarm.com.de

Sollten deaktivierte Schaltflächen beim Klicken Feedback geben?

Ich habe mich gefragt, ob Sie mir bei einem UX-Problem helfen können, das ich mit "deaktivierten Schaltflächen in Mobile" habe.

Wir haben einige verschiedene Eingabefelder als Teil eines mobilen Onboarding-Prozesses. Diese Formulare enthalten einige Felder. Derzeit deaktivieren wir die Schaltfläche "Weiter", bis alle Felder ausgefüllt sind. Wenn der Benutzer jedoch auf die Schaltfläche "Deaktiviert" tippt, wird eine Inline-Fehlermeldung in den nicht ausgefüllten Eingabefeldern angezeigt.

Wir haben darüber diskutiert, ob es eine bessere Benutzererfahrung ist, Feedback zu zeigen, wenn der Benutzer auf die deaktivierte Schaltfläche tippt, um anzuzeigen, dass etwas fehlt, oder ob deaktivierte Schaltflächen im Allgemeinen niemals reagieren sollten, da sie deaktiviert sind.

28

Am Ende führen beide Wege zum gleichen Ergebnis. Unabhängig davon, ob es sich um einen Inline-Fehler oder eine Blase mit Feedback handelt, erfährt der Benutzer, warum er nicht fortfahren kann (was Sichtbarkeit des Systemstatus entspricht).

Der Punkt, dass deaktivierte Elemente niemals eine Aktion ausführen, ist verständlich, aber das strikte Festhalten an dieser Regel ist für den Benutzer nicht wirklich von Nutzen. Wenn er mit Ihrem Produkt eine bessere UX für den geringen Preis haben könnte, wenn er sich nicht zu 100% an eine Regel hält, würde ich sagen, dass es sich lohnt. Sie brechen es sowieso nicht vollständig, sondern weichen nur geringfügig davon ab.

Angesichts dessen denke ich persönlich, dass dieses Feedback auf diese Weise als moderner oder "cooler" angesehen werden könnte. Vor allem, wenn Sie ein jüngeres Publikum ansprechen, würde ich sagen, dass dies eine Verbesserung wäre.

Ein Nachteil hierbei kann sein, dass einige Benutzer, die sehr an die "alten Methoden" gewöhnt sind, dies möglicherweise unerwartet und damit ärgerlich finden. Aber das scheint eine eher kleine Chance zu sein.

Noch etwas zu beachten: Benutzer mit Sehbehinderung . Ihre Screenreader können Inline-Fehlermeldungen problemlos abfangen (soweit ich weiß), aber eine Sprechblase kann schwierig sein. Zumindest sollte es dann einfach den Systemfokus auf das Erscheinen lenken.


So etwas scheint ein guter Weg zu sein:
A disabled button showing a speech bubble with reasons on why it is disabled
Quelle

Sie können es entweder beim Klicken auf die Schaltfläche anzeigen oder mit einer kleineren (?) Schaltfläche darüber platzieren, wodurch die Schaltfläche nicht beschädigt wird deaktivierte Tastenregel mehr.

23
Big_Chair

Wenn dies nicht mobil wäre , würde ich sagen, dass es besser ist, eine Nachricht neben der deaktivierten Schaltfläche anzuzeigen

Bitte füllen Sie die verbleibenden Pflichtfelder aus (markiert mit *).

oder solche (Wortschmiedekunst erforderlich).

Aber für Mobilgeräte , bei denen Sie diese Immobilie nicht haben, die Schaltfläche aktiv (nicht deaktiviert) haben und dem Benutzer mitteilen, welche Felder sie noch haben Das Ausfüllen beim Klicken erscheint sinnvoll. Ich würde den Button nicht deaktiviert machen, aber immer noch auf Klicks reagieren, aber vielleicht könnte er sagen (Kann noch nicht senden) vs (wenn alle erforderlichen Felder ausgefüllt sind) Senden .

Barrierefreiheit nicht vergessen. Es gibt verschiedene Dinge , die Sie dort tun können. Eine davon ist, dass Sie den "Hinweis", den der sehbehinderte Benutzer für die Schaltfläche hört, anders und länger als den visuell angezeigten machen können, wenn der Benutzer die beliebten Bildschirmleser für Handys verwendet (VoiceOver für iOS, TalkBack für Android) ). Details hier und hier . In der Nachricht könnte beispielsweise "Bitte füllen Sie die Felder Vorname, Nachname und E-Mail aus." Testen Sie unbedingt mit Screenreadern.

10
T.J. Crowder

So funktioniert der Google-Anmeldevorgang. Es sollte Ihrem Prozess sehr ähnlich sein. Beachten Sie, dass die Primärschaltfläche immer aktiviert ist und nur ihre Funktion ändert!

  1. Sie erhalten eine ziemlich selbsterklärende Form

(empty form

  1. Die Schaltfläche Weiter hat die Primärfarbe und kann angeklickt werden. Beachten Sie, dass Sie mit der sekundären Schaltfläche zu einem völlig anderen Vorgang gelangen (in diesem Fall anmelden).

(Active next button

  1. Nachdem Sie das ungültige Formular über die Schaltfläche Weiter gesendet haben, werden Sie zum ersten ungültigen Formular gescrollt und alle Steuerelemente werden validiert (auch wenn sie nicht verschmutzt sind). Sie sehen somit alle ungültigen Steuerelemente auf Ihrem Weg zum Weiter Button.

(Invalid controls

Der einzige Unterschied für Sie besteht darin, dass Sie anscheinend optionale Felder haben. Sie können diese mit (optional) markieren oder in einer vollständig optionalen Form sammeln, die zusätzlich zu einem Weiter eine Überspringen Schaltfläche hat (Dies ist sehr oft für Telefonnummern verwendet.)

Wenn Ihr Formular zu groß wird, überlegen Sie, ob alle erforderlichen Daten wirklich benötigt werden bei der Anmeldung. Wenn der Benutzer selbst Aktionen auslöst, für die mehr Daten erforderlich sind, z. B. ein Kauf in einem Online-Shop ist besser, nur dann eine Zahlungsmethode und Adresse zu verlangen.

7
knallfrosch

Nach dem Konzept der „informierten Entscheidungen“ ist es immer besser, den Benutzern genügend Anweisungen zu geben, damit sie keine Fehler machen, anstatt herauszufinden, dass alles, was sie getan haben, falsch war. Wenn die Formularfelder mit einem Sternchen * oder auf andere Weise zusammen mit den anderen Entwurfsabsichten gekennzeichnet sein müssen, wird das Formular korrekt ausgefüllt und es sollte nicht erforderlich sein, die Schaltfläche zum Senden zu deaktivieren. Ich empfehle, keine deaktivierten Tasten zu verwenden, es sei denn, dies ist wirklich erforderlich.

4
Ren

Für mich sieht es so aus, als hätten Sie die Schaltfläche "Weiter" nicht deaktiviert, sondern nur das Verhalten umgeschaltet. Also statt

enabled (action a) ↔︎ disabled (no action)

du hast jetzt

enabled (action a) ↔︎ enabled (action b)

Das an sich ist nicht unbedingt ein Problem, es sei denn, Sie rendern es als tatsächlich deaktiviert. Wenn Sie dies tun, erwarten Ihre Benutzer, dass andere "deaktivierte" Schaltflächen Verhalten zeigen. Wenn sie auf eine tatsächlich deaktivierte Schaltfläche stoßen (d. H. Ohne Verhalten), haben sie möglicherweise den Eindruck, dass die Schaltfläche defekt ist, da erwartet wird, dass "deaktivierte" Schaltflächen Feedback geben (oder zumindest eine Aktion ausführen).

Dies ist, wie ich es verstehe, Ihre aktuelle Lösung:

(current solution

Der Benutzer erhält keinen Hinweis darauf, welche der beiden letzten Schaltflächen auf die Interaktion reagiert.

Betrachten Sie stattdessen eine visuelle Unterscheidung zwischen "aktiviert", "deaktiviert, aber nicht wirklich" und "deaktiviert für real", z.

(proposed solution

Auf diese Weise können Sie zwischen Normalzustand, Rückkopplungszustand und tatsächlich deaktiviert unterscheiden.

2
Zano

Ich denke, wie Sie es beschrieben haben, macht Sinn. Ich würde ein Sternchen in alle erforderlichen Felder einfügen, obwohl sie alle erforderlich sind. Sie können sogar oben eine Notiz haben, aus der hervorgeht, dass alle Felder erforderlich sind. Alles, was dem Benutzer hilft, zu verstehen, was in einem komplexen Formular zu tun ist, ist am besten.

0
David Saunders

Da im mobilen vertikalen Bildschirmbereich (fast) unbegrenzt ist, würde ich einfach eine permanent sichtbare Nachricht direkt über der deaktivierten Schaltfläche hinzufügen.

Sie müssen den Namen und die Handynummer ausfüllen und unseren AGB zustimmen, bevor Sie fortfahren können.

Da die Nachricht nur angezeigt wird, wenn jemand zur Schaltfläche "Weiter" blättert, ist sie nur für Benutzer sichtbar, die nach der Schaltfläche greifen, ohne alle erforderlichen Felder ausgefüllt zu haben. Und Sie können die deaktivierte = keine Reaktionsrichtlinie intakt lassen.

0
Falco

Durch die Beobachtung, wie Benutzer meine App verwenden, habe ich festgestellt, dass deaktivierte Schaltflächen immer noch von einem erheblichen Teil der Benutzer gedrückt werden, insbesondere von Benutzern, die weniger technisch vertraut sind. Dies geschah auch dann, wenn die deaktivierte Taste deutlich ausgegraut war.

Meine Lösung besteht normalerweise darin, tatsächlich eine Validierungsantwort auszulösen, wenn eine deaktivierte Taste gedrückt wird. Durch Beobachtung des Verhaltens vor und nach der Implementierung einer solchen Validierungsnachricht hatte dies tatsächlich den gewünschten Effekt.

Die andere Lösung besteht darin, die Aktionsschaltfläche nicht zu deaktivieren und eine Validierungsnachricht wie gewohnt anzuzeigen ( Beispiel beim Stapelaustausch).

0
Tom

Ich würde zuerst einige Usability-Tests durchführen, um festzustellen, ob dies überhaupt von Bedeutung ist. Sie können keine großartige Benutzererfahrung gewährleisten, ohne den Benutzer einzubeziehen, oder? Führen Sie einige Usability-Tests durch, um festzustellen, ob Benutzer verwirrt sind, warum die Schaltfläche deaktiviert ist. Ihre Benutzer verstehen möglicherweise, warum es deaktiviert ist, und dies ist möglicherweise kein Problem. Das Hinzufügen von Hilfeblasen oder anderen Dingen erhöht lediglich die Komplexität Ihrer Benutzeroberfläche, von der Sie nicht wissen, dass Sie sie benötigen.

Wenn Ihre Benutzer ständig auf die Schaltfläche Deaktiviert klicken, müssen Sie feststellen, warum. Klicken sie, weil es nicht deaktiviert aussieht? Vielleicht ist es ein Problem mit der visuellen Erschwinglichkeit? Klicken sie, weil sie versehentlich eines der erforderlichen Felder überspringen? Ich hatte dies einmal passiert, als der Benutzer das Kontrollkästchen aktivieren musste, um den Bedingungen zuzustimmen, und mit allen anderen Inhalten auf dem Bildschirm wurde es nicht angezeigt. Als sie dann am Ende des Formulars ankamen, verstanden sie nicht, warum die Schaltfläche deaktiviert war.

0
John