it-swarm.com.de

So geben Sie dem Benutzer klar an, welche Zeichen gültig sind

Ich versuche herauszufinden, wie der Benutzer am besten darüber informiert werden kann, dass eine Eingabe bestimmte Sonderzeichen akzeptiert. Alphanumerische Zeichen sind einfach genug, aber ich habe das Gefühl, dass ich an Klarheit verliere, wenn ich zu Zeichen wie z. und -. Ein Stil, den ich ausprobiert habe, ist folgender:

Valid characters include A-z, 0-9, and (._-).

Wenn die Klammern die gültigen Zeichen umschließen, die Klammern jedoch nicht gültig sind, scheint es zu einfach, sie als Teil der Liste zu verwechseln.

Der Stil, zu dem ich mich neige, ist der folgende:

Valid Characters include A-z, 0-9, '.', '_', and '-'.

Aber ich habe das Gefühl, dass die einfachen Anführungszeichen die Dinge durcheinander bringen und es leicht machen, sich in der Liste zu verlieren, besonders wenn sie wächst. Gibt es eine Möglichkeit, diese Informationen zu vermitteln, die als "besser" akzeptiert werden, oder gibt es tatsächlich bessere Möglichkeiten, dies vollständig zu tun?

39
MildWolfie

Unordnung ist problematisch. Das Hervorheben der gültigen Zeichen könnte ausreichen. Z.B.:

Gültige Zeichen sind A - Z a - z -9._-.

Es kann auch hilfreich sein, sie in verschiedenen Farben anzuzeigen.

48
NonNumeric

Hier einige Ratschläge:

  • verbiete Zeichen nur, wenn es absolut notwendig ist (ich hasse es, wenn ich _ nicht in meinem Spitznamen verwenden kann)
  • zeigen Sie eine Nachricht nur dem Benutzer an, der versucht, eine dieser Nachrichten zu verwenden. Andere Benutzer werden nicht gestört
  • wenn der Benutzer ein verbotenes Zeichen eingibt, berücksichtigen Sie es einfach nicht und erklären Sie ihm, warum.

mockup

bmml source herunterladen - Wireframes erstellt mit Balsamiq Mockups

32
Renaud

Ich würde vorschlagen, über die Zeichen zu sprechen, die nicht erlaubt sind, da die Anzahl ungültiger Zeichen für jede erforderliche Eingabe immer geringer ist. Dies wird dazu beitragen, Unordnung zu reduzieren. Siehe das angegebene Beispiel aus dem Windows Explorer.

enter image description here

13
SSuad

Sie können Blöcke jedes Zeichentyps wie folgt anzeigen:

Zulässige Zeichen :A-Za-z0-9-_.

12
rybo111

Ich würde A-z und möglicherweise sogar 0-9 weglassen, da dies offensichtlich erlaubt sein sollte. Für die zusätzlichen Zeichen würde ich eher ihre Namen als die Symbole verwenden

Sie können auch Unterstrich, Bindestrich und Punkt verwenden.

10
Roman Reiner

tl; dr

Sie sollten all valid oder all ungültige Zeichen anzeigen before Der Benutzer beginnt mit der Eingabe in das Feld. Dies sollte ein Hinweis sein. Halten Sie es kurz, leicht verständlich und unkompliziert.

Demonstration

mockup

bmml source herunterladen - Wireframes erstellt mit Balsamiq Mockups

Ausführliche Erklärung

Beispiel Platzhalter

Verwenden Sie Felder mit einem Platzhalter, der eine gültige Beispieleingabe anzeigt. Beispielhafte Platzhalter geben das bevorzugte Format der Eingabe an. Dies könnte beispielsweise in einem Telefonnummernfeld hilfreich sein.

Nachricht im Fokus

Zeigen Sie eine feste Beschriftung oder eine Popup-Blase an, wenn der Benutzer das Feld betritt.
Der Benutzer sieht den Hinweis vorher er beginnt mit der Eingabe der Eingabe, sodass er sich einen anderen Wert vorstellen kann, wenn der Wert, den er eingeben möchte, falsch ist. Dies löst auch die mögliche Frage, die ein Benutzer vor der Eingabe stellen würde: "Was soll ich hier schreiben? Wird meine Eingabe korrekt sein?".

Kurze und fette Zeichenliste

Verwenden Sie eine Kurzform der gültigen Zeichen wie "a-z" und nicht "nur alphanumerisch".
Es ist viel einfacher, die akzeptierten Zeichen zu überwachen und zu verstehen. Sie müssen die Bedeutung der Wörter wie "ok, alphanumerische Zeichen sind Zeichen von a bis z mit Zahlen" nicht herausfinden. Klärt auch Unklarheiten wie: "Sind Großbuchstaben erlaubt?".

Ich würde auch empfehlen @ NonNumeric's Lösung mit Fettdruck auf der Liste der erlaubten Zeichen. Dies lenkt die Aufmerksamkeit auf das Wesentliche der Popup-Nachricht.

Feedback zur Unschärfe

Nachdem der Benutzer das Feld ausgefüllt hat und der Fokus verloren gegangen ist, sollten Sie das Feld validieren.

  • Wenn die Eingabe gültig ist, zeigen Sie ein Häkchen an, das die gültige Eingabe angibt.
  • Wenn die Eingabe ungültig ist, lassen Sie das Popup dort und machen Sie es oder das Benutzerfeld (oder beide) rot, damit angezeigt wird, dass ein Fehler aufgetreten ist.

Wenn der Benutzer die Anleitung vor dem Tippen verpasst hat, erhält er nach dieser Eingabe ein Feedback. Die Fehler/Häkchen vereinfachen auch die Übersicht über das ausgefüllte Formular.

3
totymedli

Eine Möglichkeit, damit umzugehen, besteht darin, zunächst überhaupt nichts zu sagen und den Benutzer dann zu informieren, wenn ein nicht zugelassenes Zeichen eingegeben wird. Wenn Sie die Inline-Validierung verwenden und nach jeder Zeicheneingabe anwenden, muss der Benutzer (fast) nicht einmal benachrichtigt werden, welches Zeichen verboten war.

Es kommt darauf an, was auf dem Feld gehen soll. Wenn die Daten, die in das Feld eingegeben werden sollen, einer bestimmten Form folgen (z. B. einer Postleitzahl oder etwas anderem), gibt es einen sehr begrenzten Satz von Zeichen, die dort landen sollten. Typ-Os und sehr alternative Arten der Dateneingabe werden von der Fehlermeldung behandelt, und der Rest schwebt einfach vorbei, ohne es zu merken.

Es kann jedoch sein, dass das Feld für Daten erstellt wird, deren Format weniger Konventionen enthält. In diesem Fall kann die Anzahl fehlerhafter Eingaben nicht akzeptable Werte erreichen, und es ist eine Voreingabe von Anweisungen erforderlich.

Sowohl in der Inline-Fehlermeldung als auch in dem Fall, in dem ein Infotext benötigt wird, schreibe ich lieber "Buchstaben und Zahlen" als "AZ, aZ, 0-9", da dies viel einfacher zu verstehen ist und Sie speichern können die Unordnung für die Sonderzeichen.

Bsp.: Bitte verwenden Sie nur Buchstaben, Zahlen und diese Sonderzeichen (_. -)

1
Babossa

Ich würde sagen, dass Sie am besten eine tabellenartige Struktur verwenden, um jede Regel klar zu kennzeichnen und zu isolieren:

[~ # ~] css [~ # ~]

table{
    border-collapse:collapse;
}
td{
    padding:3px 6px 3px 6px;
    vertical-align:top;
    border:solid 1px #000;
}

[~ # ~] html [~ # ~]

<h3>Allowed characters</h3>
<table>
    <tr><td>Alphabet: lower-case and UPPER-case</td><td>A through Z<br>a through z</td></tr>
    <tr><td>Numbers</td><td>0 through 9</td></tr>
    <tr><td>Punctuation: period, underscore, hyphen</td><td>.<br>_<br>-</td></tr>
</table>

http://jsfiddle.net/F74L8/

Wenn Ihre Liste jetzt wächst, müssen Sie sich keine Sorgen mehr machen, dass zukünftige Zeichen mit einer Formatierung in Konflikt geraten, die Sie möglicherweise für frühere Zeichen ausgewählt haben.

1
MonkeyZeus

Wenn Sie nur alle utf8-Zeichen als Eingabe zulassen, müssen Sie sich keine Gedanken darüber machen, wie Sie es dem Benutzer erklären sollen. Und es erspart Ihnen große Kopfschmerzen, wenn Sie mit Ihrer App/Website global arbeiten.

Wenn sie eine E-Mail eingeben müssen, können Sie schreiben "Diese E-Mail-Adresse ist gemäß Internetstandard RFC nicht gültig". Das ist viel einfacher und die Leute werden verstehen, warum sie nur diese Zeichen eingeben müssen, anstatt zu denken, dass Sie ein Gemeiner sind.

0
awsm

Um die Unordnung zu vermeiden und dennoch alle gewünschten beschreibenden Informationen im Voraus bereitzustellen, können Sie in der Nähe des Eingabefelds einen "Link" verwenden, der etwa "Welche Zeichen sind hier gültig?" Sagt. Wenn eine Person ihre Maus auf den Link bewegt (mit der Maus darüber fährt), wird ein "Tooltip" angezeigt, der beschreibt, was gültig ist und in welchem ​​Detail Sie möchten.

0
Kevin Fegan

Wenn der Speicherplatz kein Problem darstellt, verwenden Sie eine vertikale Liste mit Word und tatsächlichen Hinweisen.

Sie können verwenden

  • Zahlen (-9),
  • Buchstaben (A-Z und a-z),
  • Unterstriche (_),
  • Bindestriche (-) und
  • Perioden (.)

Erklären Sie in jedem Fall die gültigen Zeichen , bevor der Benutzer Daten eingibt, nicht nach der Übermittlung oder nach der Eingabe.

0
Tim Huynh