it-swarm.com.de

Sollte die Schaltfläche "Weiter" deaktiviert werden, wenn die Validierung unvollständig ist?

In Formularen wird die Schaltfläche "Weiter" häufig inaktiv angezeigt, bis alle erforderlichen Felder ausgefüllt sind:

mockup

bmml source herunterladen - Wireframes erstellt mit Balsamiq Mockups

Ist dies tatsächlich eine Hilfe für den Benutzer oder ein Hindernis?

Ich stelle mir vor, dass der Pro dafür ein visueller Indikator für den Benutzer ist, dass er das Formular noch nicht vollständig ausgefüllt oder Fehler behoben hat (denn selbst bei der Inline-Validierung wird ein Benutzer nicht informiert, wenn er noch nie mit ihm interagiert hat Ein Feld zeigt also zu diesem Zeitpunkt keine Fehler an.

Aber dann ist der Hauptnachteil dafür (was ich auch bei Usability-Tests gesehen habe), dass Benutzer verwirrt sind, warum sie nicht auf die Schaltfläche klicken können.

Ist das Muster des Deaktivierens der Schaltfläche Weiter, bis die Validierung abgeschlossen ist, tatsächlich eine negative Benutzererfahrung?

99
JonW

Art der erfassten Informationen und Anzahl der erforderlichen Felder

Es hängt wirklich von der Art und dem Umfang der Informationen ab, nach denen Sie fragen, und von der Anzahl der Felder, die ausgefüllt werden müssen:

Ich habe dieses Muster erfolgreich bei der Anmeldung und Kennworterstellung getestet und verwendet. Ich denke, weil die Benutzeroberfläche so einfach ist und die Anzahl der erforderlichen Felder begrenzt ist, gab es keine Unklarheiten hinsichtlich der Informationen, die zum Aktivieren der Schaltfläche "Weiter" erforderlich sind.

(Meiner Meinung nach) Benutzer sind im Allgemeinen aufgabenorientiert, sodass das Einarbeiten der Aufgabe an erster Stelle steht, bevor sie eine Aufgabe abschließen, indem sie sich zum Handeln verpflichten.

Betrachten Sie als Beispiel den Fall einer Seite zum Erstellen eines Passworts mit spezifischen Passwortanforderungen (die Situation, für die ich entworfen habe). In diesem speziellen Fall habe ich die Schaltfläche "Weiter" deaktiviert, bis alle Regeln für das Kennwort erfüllt waren. Die Einschränkung bestand darin, dass der Benutzer visuelles Feedback erhalten musste, während er sein neues Kennwort eingab und sah, dass seine Eingabe alle Kennwortanforderungen erfüllte.

Das System sollte die Benutzer stets durch angemessenes Feedback innerhalb angemessener Zeit über die aktuellen Ereignisse auf dem Laufenden halten.

quelle: 10 Usability-Heuristiken für das Design von Benutzeroberflächen

Im Folgenden finden Sie ein hervorragendes Beispiel für diesen Ansatz, der auch eine Gamification-Logik enthält, und Sie können die reale Sache hier neben anderen Variationen testen:

enter image description here


Fehlervermeidung

In der Regel versuche ich, (wenn möglich) Fehlermeldungen zu vermeiden, die die Frustration der Benutzer erhöhen und ihr Vertrauen untergraben. Anstatt eine Fehlermeldung anzuzeigen, indem ich die Schaltfläche "Weiter" aktiv halte, würde ich versuchen, Hinweise und Informationen zu den erforderlichen Feldern aktiv zu übermitteln, wann und wo immer dies möglich ist.

Noch besser als gute Fehlermeldungen ist ein sorgfältiges Design, das verhindert, dass ein Problem überhaupt auftritt. Beseitigen Sie entweder fehleranfällige Bedingungen oder suchen Sie nach ihnen und stellen Sie den Benutzern eine Bestätigungsoption zur Verfügung, bevor sie sich zur Aktion verpflichten.

quelle: 10 Usability-Heuristiken für das Design von Benutzeroberflächen


Inline-Validierung: Bereitstellung von Fehlermeldungen im Kontext

Unten ist ein weiteres gutes Beispiel eines einfachen Formulars mit deaktivierter Schaltfläche. Felder werden inline validiert und die deaktivierte Schaltfläche "schüttelt", um die Unvollständigkeit des Formulars anzuzeigen. Auch in Bezug auf Ihren Punkt:

Selbst bei der Inline-Validierung wird ein Benutzer nicht informiert, wenn er noch nie mit einem Feld interagiert hat, sodass zu diesem Zeitpunkt keine Fehler angezeigt werden

Jede Interaktion mit dem Formular führt entweder zu Fortschritt (Häkchen) oder (Inline-Fehlermeldung). Der einzige Fall, in dem dies nicht funktioniert, ist, wenn der Benutzer auf "Anmelden" klickt, ohne Informationen anzugeben, die höchst unwahrscheinlich/irrational sind und für die Sie nicht sorgen müssen.

enter image description here

Wenn Sie mit längeren und komplexeren Formularen arbeiten, lohnt es sich, Ihr Formular nach Aufteilen der Informationen zu strukturieren, die in erforderlich sind eine sinnvolle Art und Weise und Einführung eines inszenierten Prozesses/Assistenten oder eines ähnlichen Musters, falls relevant. Dies hilft Ihnen, Ihr Design zu optimieren und sich auf die Fehlervermeidung zu konzentrieren.


Inhalt von Fehlermeldungen

Der andere Bereich, den Sie möglicherweise berücksichtigen müssen, wenn "Senden" oder "Weiter" aktiviert sind, ist:

Übereinstimmung zwischen System und realer Welt

Dies mag ein Edge-Fall sein, aber es ist dennoch erwähnenswert; Stellen Sie sich ein typisches Anmeldeformular mit aktivierter Anmeldeschaltfläche vor und der Benutzer klickt auf Anmeldung, ohne Angaben zu machen. Welche Fehlermeldung würde der Benutzer erhalten, ohne die Systemsicherheit zu verletzen: Die einfachste Meldung, die ich gesehen habe, lautet wie folgt: "Ungültiger Benutzername oder Passwort"

Dies ist eine eindeutige Nichtübereinstimmung zwischen dem, was der Benutzer getan hat, und dem, was das System ihm zurückgibt. In diesem speziellen Fall würde ich die Anmeldeschaltfläche deaktivieren, bis die erforderlichen Felder ausgefüllt sind.


Wann könnte eine deaktivierte Schaltfläche verwendet werden?

Das Ziel einer deaktivierten Schaltfläche ist es, Fehlermeldungen zu verhindern und zu verhindern. Dies kann auf optimale Weise erreicht werden, wenn:

  1. Das Formular hat eine begrenzte Anzahl von Feldern und Benutzer können auf einen Blick sehen, welche Felder fehlen.
  2. Es gibt eine visuelle Betonung der erforderlichen Felder und eine klare Rückmeldung, wenn jedes Feld ausgefüllt ist (Ziele, die erreicht werden müssen, um die Schaltfläche zu aktivieren)
  3. Feldbezeichnungen sind kurz und können leicht gescannt werden , z. B. Name, Benutzername, Stadt usw., wodurch der 1. Punkt verstärkt wird.
  4. Alle Felder sind obligatorisch , da sie Benutzern einen eindeutigen Pfad zum Aktivieren der Schaltfläche und zum Festschreiben der Aktion * bieten.

    * Es scheint mir, dass Benutzer bei optionalen Feldern möglicherweise falsch interpretieren, was tatsächlich zum Aktivieren der Schaltfläche erforderlich ist, obwohl ich keine Beweise dafür habe.


Ist der deaktivierte Knopf ein Hindernis?

Es ist eindeutig nicht . Es ist eine helfende Hand, die eine alte Maxime verkörpert "Vorbeugen ist besser als heilen" , aber es ist mit Einschränkungen verbunden und erfordert das Abwägen einiger der oben genannten Faktoren und das Testen mit Ihrer Zielgruppe, um sicherzustellen, dass es das tut, was es tun soll.


Entwerfen für Menschen, nicht für Maschinen

Fehlermeldungen bestrafen Menschen dafür, dass sie sich nicht wie Maschinen verhalten. Es ist Zeit, dass wir Menschen wie Menschen benehmen lassen. Wenn ein Problem auftritt, sollten wir es als Maschinenfehler und nicht als menschliches Versagen bezeichnen: Die Maschine wurde falsch konstruiert und verlangt, dass wir ihren besonderen Anforderungen entsprechen. Es ist Zeit, Maschinen zu entwerfen und zu bauen, die unseren Anforderungen entsprechen. Hören Sie auf, uns zu konfrontieren: Arbeiten Sie mit uns zusammen.

Quelle: Don Norman: Entwerfen für Menschen

Ich denke, der Punkt, den ich ansprechen möchte, ist, dass „Benutzer“ Menschen wie wir alle sind und wir ihre Intelligenz nicht unterschätzen und sie herablassend behandeln sollten:

  • Sie werden Labels lesen und verstehen, wenn dies klar, lesbar und prägnant
  • Sie werden prüfen , was von ihnen benötigt wird wenn das Formular gut strukturiert ist und mit dem übereinstimmt, was sie erreichen möchten (aufgabenorientiert)
74
Okavango

Ich muss sagen, dass dieses Verhalten die Benutzererfahrung behindert.

Wenn Sie jemals Don't Make Me Think von Steve Krug gelesen haben, werden Sie schnell feststellen, dass dieses Muster gegen die im Titel angegebene Regel verstößt.

Man könnte fragen: Warum ist das deaktiviert?

Es hat keinen Vorteil, einen Benutzer durch diesen Rahmen springen zu lassen.

Grundsätzlich impliziere ich, dass der Benutzer mit einem Formular begrüßt wird, das nicht umsetzbar ist, und dass er durch Entdeckung oder noch schlimmer durch Lesen herausfinden muss, wie er das ihm vorgelegte Formular richtig verwenden kann.

Eine Problemumgehung hierfür wäre, die Aufmerksamkeit sofort auf die erforderlichen Felder zu lenken. Dies würde sie jedoch in Panik versetzen, da sie sich fragen, warum sie mit einer Reihe roter Fehler begrüßt wurden, obwohl sie das Formular noch nicht einmal berührt haben.

Halten Sie den Benutzer nicht davon ab, die beabsichtigte Aufgabe auszuführen, auf die Schaltfläche "Senden" zu klicken. Es ist gut zu wissen, dass Sie das Formular mit minimalen Auswirkungen ausprobieren können. Eine sanfte Fehlermeldung mit der Aufschrift "Bitte überprüfen Sie die rot hervorgehobenen Formularfehler" reicht aus.


Andere Gedanken:

Ich bin nicht sicher, auf welchen Websites oder Seiten Sie dies häufig sehen, aber ein kurzer Blick auf die ersten 10 "Kontakt" -Website-Formulare bei Google scheint gegen Ihre Beobachtung zu sprechen.

Meine zwei Cent:

Wenn ich raten müsste, dann ist das Deaktivieren der Schaltfläche "Senden" zu einer Standardfunktion eines beliebten Validierungs-Plugins geworden, und "Entwickler" lassen es einfach so, wie es ist.

23
MonkeyZeus

wir sehen oft die Schaltfläche "Weiter" inaktiv

Ich denke das darf falsch sein. Weiter lesen!

Für das, was es wert ist, aktualisiere ich im Moment einige alte Recherchen zu Anmeldeformularen für beliebte Websites und habe festgestellt, dass ein ziemlich kleiner Prozentsatz - etwa 5% oder weniger - die Schaltfläche "Senden" deaktiviert (ob dies nun das endgültige ist) -sign up oder a continue Typ button) bis die Daten als 'gültig' gelten.

Nach dem Studium so vieler Formen wird es eher zu einem wahrnehmbaren Verhalten als zu einem unsichtbaren Verhalten, wenn die Senden-Schaltfläche deaktiviert ist. Aus diesem Grund denke ich, dass Sie fühlen so mögen, als würden Sie es öfter sehen, als Sie es tatsächlich tun.

Es gibt auch das zusätzliche Problem mit deaktivierten Schaltflächen: Wenn das Formular die Daten nicht im laufenden Betrieb überprüft, ohne den Benutzer gleichzeitig abzulenken, kann der Benutzer nicht erkennen, was mit den Schaltflächen nicht stimmt Inhalt.

Eine Site, die dies akzeptabel macht, ist für eine BBC-ID

enter image description here

Sie machen es jedoch außergewöhnlich klar on-the-fly, was gültig ist und was nicht.

enter image description here

Ein weiteres bemerkenswertes Beispiel für ein Anmeldeformular, das die Schaltfläche deaktiviert, ist MailChimp, aber Sie deaktivieren es nur, bis das Passwort akzeptabel ist - nicht das gesamte Formular - also Sie können ein Passwort eingeben und die Schaltfläche aktivieren - ohne weitere gültige Daten im Formular.

Sie sehen das Passwort eindeutig als etwas, das unbedingt richtig sein muss, bevor Sie das Formular abschicken können. Der Rest der Daten darf beim Absenden validiert werden. Sie deaktivieren nicht die Schaltfläche zum Senden für die Anmeldung.

Das Mailchimp-Anmeldeformular ist meiner Meinung nach in vielerlei Hinsicht außergewöhnlich gut.

enter image description here

GoDaddy ist ein drittes Beispiel für eine Site, die die Senden-Schaltfläche deaktiviert. Hier deaktivieren sie die Schaltfläche jedoch erst, wenn alle Daten vorliegen gültig - die Felder müssen nur nicht leer sein - daher reicht ein Buchstabe in jedem Feld aus.

Hier hilft die deaktivierte Schaltfläche dem Benutzer, verpasst Felder anstatt ungültig Felder zu erkennen.

enter image description here

Also zusammenfassend:

Wenn Sie die Schaltfläche wirklich deaktivieren möchten, bis alle Daten tatsächlich gültig sind, dann das Formular muss sehr kurz sein und außergewöhnlich gut validiert on the fly. Eine lange Form wird zu unklar sein, was falsch ist, und der erforderliche Validierungsgrad würde für alle Bereiche übermäßig ablenken.

Dies würde Sie in eine kleine Minderheit bringen, insbesondere für die vollständige Validierung - was auch immer das Gefühl ist, dass Sie es "oft" sehen :)

15
Roger Attrill

Man sollte die Schaltfläche nicht deaktivieren

Betrachten Sie die Situation aus der Sicht des Benutzers. Teilen Sie Benutzer in zwei Gruppen ein

  • Diejenigen, die derzeit nicht glauben, dass sie fortfahren können, suchen daher nicht nach einer Möglichkeit, fortzufahren
  • Diejenigen, die glauben, bereit zu sein, fortzufahren, und nach einem Weg suchen, dies zu tun.

Für die erstere Gruppe ist das Deaktivieren der Schaltfläche "Weiter" lediglich ein visuelles Artefakt, das in der Ecke der eigenen Sicht zu sehen ist. Es ist hilfreich, aber nicht hilfreicher als jede andere Grafik, die den Status des Formulars darstellt. Für diese Personen ist eine grafische Änderung (z. B. ein Pfeil, der auf die Schaltfläche "Weiter" zeigt, oder eine hervorgehobene Schaltfläche "Weiter") genauso aussagekräftig wie eine Schaltfläche, die von grau nach schwarz wechselt.

Für die letztere Gruppe glauben sie, dass das Formular ausgefüllt ist. Eine deaktivierte Schaltfläche zeigt ihnen an, dass sie falsch liegen, hilft ihnen jedoch nicht bei der Identifizierung von Fehlern. Sie müssen nun das gesamte Formular scannen, von dem sie glauben, dass es korrekt ausgefüllt ist , um festzustellen, welche Notation sie verpasst haben, um auf einen unvollständigen Abschnitt hinzuweisen. Dadurch wird die Möglichkeit verpasst, mit dem Benutzer zu interagieren. Diese Interaktion kann ihnen helfen, die Abschnitte des Formulars zu finden, die nicht vollständig ausgefüllt sind. Wenn Sie diese Interaktion verpassen, wird das Formular zu einem Rätsel: "Die Webadmins wissen, dass Sie etwas falsch gemacht haben, aber Sie müssen es finden."

Angesichts der Tatsache, dass es andere Möglichkeiten gibt, mit dem grafischen Hinweis umzugehen, dass ein Formular vollständig ist (ich mag hervorgehobene Schaltflächen selbst), und die Schaltfläche "Weiter" eine Möglichkeit für Benutzer bietet, um Unterstützung zu bitten, sehe ich keinen Grund, die Schaltfläche jemals zu deaktivieren.

12
Cort Ammon

Dies ist eine Meta-Antwort, die sich aus den unterschiedlichen Meinungen ergibt.

Wenn Sie die Schaltfläche deaktivieren möchten, sollten Sie dennoch nach Klicks suchen und den Grund angeben, warum sie deaktiviert ist. Dies hat zwei Vorteile: Es werden weniger Fehler angezeigt. Wenn Sie aus irgendeinem Grund zuvor nicht mitgeteilt haben, warum das Formular nicht gesendet werden kann, können Sie dies explizit tun.

5
hildred

Schaltflächen sollen angeklickt werden. Wenn der Benutzer eine Schaltfläche sieht, möchte er darauf klicken. Die Deaktivierung der Schaltfläche, die nur dann aktiv wird, wenn alle Daten in diesem bestimmten Formular ausgefüllt sind, ist keine gute Erfahrung. Ich möchte dem Benutzer (was ich mit den von mir entworfenen Formularen mache) gleich zu Beginn mitteilen, dass alle Felder obligatorisch sind und Sie sich nicht anmelden können, wenn eines dieser Felder leer bleibt. Ihr Formular ist kein Spiel, bei dem der Benutzer das von ihm gespielte Level beenden muss, um ein anderes freizuschalten. Nur ein Gedanke :)

4
Guru Munishwar

Ja Die Schaltfläche " Weiter " sollte deaktiviert sein, bis alle erforderlichen Felder mit at ausgefüllt sind mindestens Text (dies setzt voraus, dass die erforderlichen Felder dem Benutzer in irgendeiner Weise als solche gekennzeichnet sind). Der Vorteil hierbei ist, dass das System kann nicht einmal versuchen, fortzufahren , bis es die erforderliche Eingabe vom Benutzer hat.

Sobald die erforderlichen Felder ausgefüllt wurden, sollte die Schaltfläche " Weiter " sofort aktiviert werden, um anzuzeigen, dass das System über die erforderlichen Funktionen verfügt versuche fortzufahren.

Von dort aus wird durch Klicken auf die Schaltfläche " Weiter " die vollständige Validierung ausgeführt und möglicherweise Validierungsnachrichten an den Benutzer zurückgegeben.

1
landonz

Die Schaltfläche 'Weiter' eines Formulars sollte deaktiviert sein, bis alle erforderlich Felder ausgefüllt wurden und die Validierung bestanden haben.

Warum? Nun, es ist wirklich gesunder Menschenverstand:

Stellen Sie sich vor, Sie sind eine Bank. Und Sie haben ein einfaches Formular-Setup, mit dem Sie Gelder von einer Partei an eine andere übertragen können. Sie haben ein "Von welchem ​​Konto möchten Sie Geld überweisen?" Feld, ein Feld 'Empfänger' und ein Feld 'Zu sendender Betrag'.

Wenn eines dieser Felder nicht ausgefüllt ist, kann die Übertragung nicht stattfinden. Daher sind alle drei Felder obligatorisch. Ohne die Informationen aus allen erforderlichen Feldern kann diese Übertragung nicht stattfinden.

Was passiert nun, wenn wir alle drei Felder obligatorisch machen und dies dem Benutzer anzeigen und der Benutzer zwar Informationen in alle erforderlichen Felder eingibt, diese jedoch im Feld "Zu sendender Betrag" einen Fehler machen?

Sagen wir einfach, dass der Benutzer 0,00 eingegeben hat.

Wir können keine 0,00 USD senden. Was kann passieren, wenn das Backend nicht richtig eingerichtet ist, um Fälle wie das Senden von null Dollar zu behandeln? Wenn der Benutzer auf "Weiter" klickt, verlieren Sie nicht nur Bandbreite und Zeit, sondern auch Bandbreite und Zeit. Und in der Wirtschaft ist Zeit gleich Geld, und wenn viele Menschen ständig Fehler machen oder keine Details eingeben, wann sie sein sollten, verursachen Sie effektiv viel zu viel Overhead für sich selbst (damit zu viele Ressourcen verwendet werden können) und mich Wetten, dass dies irgendwann zu nicht übereinstimmenden Daten führen wird?.

Als Benutzer ist es außerdem sehr ärgerlich, ein Formular nicht zu validieren und mir zu erlauben, fortzufahren, ohne mir mitzuteilen, dass etwas nicht stimmt. Besonders wenn die Seite aktualisiert wird und ich gezwungen bin, alles ein zweites Mal auszufüllen.

1
Jase

Ich glaube, es gibt einen Mittelweg. Eine visuell deaktivierte Schaltfläche muss nicht bedeuten, dass das Klicken "nichts" wie vorgeschlagen bewirkt. Es verhindert logischerweise, dass der Benutzer fortfährt, wenn nichts erforderlich ist, um diese primäre Aktion zu aktivieren. Es gibt jedoch keinen Grund, warum das Klicken darauf keine Warnmeldung für den Benutzer anzeigen kann, in der erläutert wird, warum sie deaktiviert ist und wie sie aktiviert wird.

1
Bryan

Während ich einige Webseiten entwarf, kam ich auf diese Seite, um zu sehen, was andere zu sagen hatten, um einige Entscheidungen zu treffen. Ich bin zu dem Schluss gekommen, dass die beste Antwort "es kommt darauf an" ist.

Ich dachte über meine eigenen Erfahrungen mit aktivierten Schaltflächen nach, die nichts anderes tun, als mir zu sagen, was ich falsch gemacht habe, und manchmal auf einer schlecht gestalteten Webseite alles löschen! Ich ärgere mich besonders, wenn ich mich in einem langen Formular befinde und der Fehler oben auf der Seite ist ... was ich erst sehe, wenn ich mehrmals auf die Schaltfläche Senden klicke und dann nach oben scrolle, um das zu sehen Problem. Außerdem macht nicht jede Website klar, was erforderlich ist, bis auf die Schaltfläche Senden geklickt wird. Fangen Sie mich nicht an einem schlechten Tag mit einer Website, die mir sagt, dass ich etwas eingeben muss!

Ich denke, Webseiten sollten absolut klar sein, was in einem Formular erforderlich ist, bevor ich auf eine Schaltfläche drücke. Wenn ich also vor dem Eingeben eines erforderlichen Felds auf die Schaltfläche Senden drücke, denke ich, duh, ich kann nicht glauben, dass ich das verpasst habe, ich wusste es war erforderlich! Andererseits muss ich Jase zustimmen, dass ich auf keinen Fall die Schaltfläche "Senden" auf der Website meiner Bank aktivieren möchte, bis ich alle erforderlichen Felder eingegeben habe! Ich benutze die Website meiner Bank mehr als jede andere Website und der deaktivierte Button hat mich nie verwirrt.

Also meine Schlussfolgerung? Wenn Sie ein umfangreiches Formular mit mehreren Feldern haben, sind einige erforderlich, andere optional, markieren Sie alle erforderlichen Felder deutlich, aktivieren Sie die Schaltfläche Senden und markieren Sie die Problemfelder und Listenmeldungen, wenn das Formular mit ungültigen oder fehlenden erforderlichen Daten gesendet wird mit den Fehlern. Wenn Sie ein Formular haben, in dem alle Felder auf derselben Seite angezeigt werden ... zusammen mit der Schaltfläche Senden, deaktivieren Sie die Schaltfläche und geben Sie deutlich an, was der Benutzer tun muss, um die Schaltfläche zu aktivieren. Die Schaltfläche Senden kann auch aktiviert werden. In beiden Fällen sollte es jedoch einwandfrei funktionieren und eine gute Benutzererfahrung bieten. Hier liegt die Schönheit des Webdesigns. Es liegt an Ihnen! Schließlich sollten Sie wissen, welcher Weg schwieriger zu codieren ist, da dies Ihnen auch dabei helfen kann, eine Entscheidung auf die eine oder andere Weise zu treffen, wenn beides in Ordnung erscheint. Es sollte immer eine Überlegung sein, die Kosten für den Kunden niedrig zu halten.

Oh ... und wie oft "deaktiviert" der typische Benutzer sein HTML? Ich denke, das ist nicht üblich und der durchschnittliche Benutzer (Nicht-IT) weiß nicht einmal, wie es geht. Ich denke nicht, dass dies ein guter Grund ist, dies bei der Gestaltung einer benutzerfreundlichen Website zu berücksichtigen. Wenn der Benutzer klug genug ist, um sein HTML zu deaktivieren, sollte er wissen, dass er es aktivieren muss, damit die Website voll funktionsfähig ist !! Viel Spaß beim Entwerfen! :) :)

1
My Two Cents

Ich werde dies kurz und auf den Punkt bringen, da die meisten Antworten bereits viele gültige und gute Bereiche abdecken.

Fügt es einen Mehrwert hinzu?

Ich kann mir keinen Fall vorstellen, in dem der Benutzer auf die Schaltfläche Weiter klicken wird/sollte, um festzustellen, ob er das Ausfüllen eines Formulars abgeschlossen hat. Wann immer ein Benutzer auf die Schaltfläche klicken möchte, glaubt er das Formular ausgefüllt hat und ihn zu den erforderlichen Aktionen weiterleiten muss, ist dies an dieser Stelle erforderlich. Im Prinzip sollte dies bereits in einer gut gestalteten Form klar sein, aber die Tatsache, dass der Benutzer glaubte, er sei fertig beweist, dass dies nicht der Fall war, also Fokussierung, vorübergehendes Blinken oder in einer anderen Die Art und Weise, wie der Benutzer geleitet wird, ist ein guter Aktionsplan.

Was ist mit einer nicht synchronen Validierung?

Eine Sache, die noch nicht behandelt wurde, ist, dass viele Formulare Webformulare oder anderweitig internetabhängig sind und nicht jede Validierung sofort erfolgen kann. Um einem typischen Beispiel ein Registrierungsformular mit einem Benutzernamen zu geben: Der Benutzername muss in der Datenbank nachgeschlagen werden. Wenn der Benutzername bereits verwendet wird, muss für das Feld ein anderer Benutzername eingegeben werden. Normalerweise ist dies eine extrem schnelle Suche, aber was ist, wenn der Benutzer beispielsweise das mobile Internet nutzt und gerade seine Verbindung verloren hat oder eine unglaublich langsame Verbindung hat? Wenn die Schaltfläche "Weiter" deaktiviert ist, erhält der Benutzer ein ausgefülltes Formular und keine Schaltfläche zum Klicken. Dies ist vergleichsweise verwirrender als das Klicken auf eine Schaltfläche und das Warten auf das Laden der nächsten Seite, auf der ein solcher Benutzer mit einer schlechten Internetverbindung verwendet wird zu nehmen ein bisschen länger.

Natürlich kann das oben Gesagte etwas verhindert werden, wenn Felder, die auf eine Validierung warten, dies sehr deutlich zeigen, dies jedoch normalerweise nicht der Fall ist und wenn all Felder auf der Serverseite live überprüft werden, wie dies zunehmend üblich ist, kann dies der Fall sein Verwirren Sie den Benutzer nur: "Warum dreht sich neben meinem vollständigen Namen ein Ding?". Wenn Sie dies tun möchten, war die einzige Lösung, an die ich denken konnte, einen Spinner in den deaktivierten Senden-Button zu setzen, während die Validierung ausgeführt wird. Die einzige Gefahr besteht darin, dass der Benutzer denkt, er habe das Formular bereits versehentlich gesendet, da eine deaktivierte Schaltfläche häufig mit einem angeklickten/gedrückten Status verbunden ist.

1
David Mulder

Ich denke, es ist schlecht, es zu deaktivieren, wenn es um die Validierung nativer HTML-Formularbeschränkungen geht. Die Formularvalidierung nimmt jegliche Benutzerfreundlichkeit und Sie haben nur noch die Validierung.

In diesem einfachen Formular passiert beispielsweise nichts, wenn Sie etwas in das Feld a ausfüllen und die Eingabetaste drücken. Sie erhalten kein sichtbares Feedback. Sie wissen nicht, was erforderlich ist, wenn Sie nur die visuelle Benutzeroberfläche betrachten.

<form>
  <input type="text" name="a" required>
  <input type="text" name="b" required>
  <input type="submit" disabled>
</form>

Wo, als ob Sie die Schaltfläche aktiviert hätten

<form>
  <input type="text" name="a" required value="sometext">
  <input type="text" name="b" required>
  <input type="submit">
</form>

Wenn Sie nun die Eingabetaste drücken, nachdem Sie etwas in das Feld a eingegeben haben, wird ein Popup angezeigt und das Eingabefeld wird ebenfalls fokussiert

(enter image description here


Eine perfekt strukturierte Formularüberprüfung ohne Deaktivierung der Schaltfläche "Weiter"

  • Sie würden kein Javascript benötigen
  • Die Seite würde nicht neu geladen (wodurch Bandbreite gespart wird).
  • Sie erhalten ein gutes detailliertes Feedback in Ihrer eigenen Sprache für das, was falsch ist (sprechende Zahlen mit Schritt, min max hinzugefügt - Sie erhalten so etwas wie: "Geben Sie eine gültige Nummer ein, die zwei nächsten, gültigen Zahlen sind x, y")
  • Das falsch gefüllte Feld wird ebenfalls fokussiert
  • Verwirrt einen Benutzer nicht darüber, warum er nicht darauf klicken kann. Im Gegenteil, Sie wissen jetzt, was mit dem Formular nicht stimmt
0
Endless