it-swarm.com.de

So richten Sie Hinweissymbole aus

Angenommen, wir haben ein Formular mit einigen Feldern, in dem jede Zeile eine Beschriftung, ein Feld und ein "Hinweis" -Symbol enthält. Nehmen wir an, es sind ungefähr 10 Felder.

Das Problem ist, dass die Felder automatisch generiert werden, basierend auf den Benutzereingaben in früheren Phasen. Einige von ihnen können lang und andere kurz sein. Sie können von verschiedenen Typen sein - z. Textfelder, Datumsauswahl, Kontrollkästchen. In jedem Fall erhält jedes Feld ein Hinweissymbol.

Was wäre der beste Weg, um die Symbole auszurichten? In einer vertikalen Linie in einiger Entfernung vom längsten Feld oder neben jedem Feld? Oder gibt es einen anderen Weg? Das Verschieben nach links vom Feld oder der Beschriftung scheint eine schlechtere Idee zu sein als eine dieser beiden Optionen.

mockup

bmml source herunterladen - Wireframes erstellt mit Balsamiq Mockups

4

Ich würde mich für Option zwei entscheiden, da ich bei Option eins meine Augen ganz nach rechts ziehen muss, um das Hilfesymbol zu sehen, seine Ausrichtung mit dem Textfeld zu vergleichen (und wenn das Textfeld kurz ist, ist es ein bisschen von Aufwand) und kommen dann zu dem Schluss, dass das Hilfesymbol mit diesem Textfeld zusammenhängt.

Mit Option 2 ist es für mich jedoch einfach, den Sprung in Bezug auf das Hilfesymbol in Bezug auf ein Textfeld zu machen, da es ein einziger kontinuierlicher Fluss ist, wenn ich von links nach rechts scanne.

Im Folgenden finden Sie ein Beispiel dafür, wie Validierungshinweise, die mit dem Textfeld übereinstimmen, die Lesbarkeit verbessern

enter image description here

Wenn Sie sich jedoch aus irgendeinem Grund für Option 1 entscheiden, geben Sie eine führende Farbe an, damit der Übergang zum Herstellen der Verbindung einfacher ist (siehe Beispiel unten).

enter image description here

Im obigen Beispiel gefällt mir jedoch nicht, dass eine Validierungsnachricht für zwei Namensfelder angegeben wird

Bildquellen: Best Practices für Hinweise und Validierung in Webformularen

6
Mervin

Eine weitere Option, die Sie in Betracht ziehen sollten (was wir verwenden), besteht darin, die Hinweissymbole direkt neben der Feldbezeichnung auszurichten. Dies hat den Vorteil, dass die angeforderten Daten klarer mit zusätzlichen Details zu diesem Artikel verknüpft werden.

mockup

bmml source herunterladen - Wireframes erstellt mit Balsamiq Mockups

In jedem Fall erhält jedes Feld ein Hinweissymbol.

Ich möchte Sie darauf hinweisen, nur Hinweise zu verwenden, bei denen sie unbedingt erforderlich sind - andernfalls können sie zu einer schlechten UX werden. Fragen Sie sich, ob der Hinweis wirklich notwendig ist, damit der Benutzer das Formular ausfüllen kann. Ein schlechter Hinweis wäre beispielsweise "Geben Sie Ihre Telefonnummer in Form von XXX-XXX-XXXX ein.", da sich ein Benutzer nicht um die Formatierung der Daten kümmern muss. Wir sollten das am hinteren Ende tun. Wenn jeder Benutzer die im Hinweis enthaltenen Informationen kennen muss, sollte es sich auch nicht um einen Hinweis handeln . Stattdessen sollten diese Informationen nur inline dargestellt werden.

In einigen Fällen möchten Sie möglicherweise auch expliziter mit Ihren Hinweisen umgehen, anstatt nur ein Standardsymbol + Popup zu verwenden. Ein solcher Fall ist, wenn Sie nach ungewöhnlichen Daten fragen. In diesem Fall ist es möglicherweise besser, einen kleinen Link wie "Warum brauchen Sie das?" (z. B. bei Telefonnummern) OR = "Wie finde ich das?" (zB bei Aktivierungsschlüsseln). Die resultierende Antwort kann immer noch in ein Popup geladen werden, aber Sie haben Ihrem Benutzer viel mehr Kontext gegeben, als Sie jemals mit einem allgemeinen Hinweissymbol könnten.

2
Daniel Newman