Muster etiketten

Posted on Posted in Uncategorized

Ich mag dieses Muster wirklich – Es ist ein gutes Meet-me-halfway zwischen nur Platzhaltern und Ihrer grundlegenden Label /Input Combo. Muster geprägte Etiketten werden sorgfältig gefertigt, um das Aussehen und das Gefühl von High-End-Etikettenmaterialien zu emulieren, die die gesamte Etikettenoberfläche abdecken und jedes Etikettendesign geschickt akzentuieren können. Es ist klar, dass das dritte Muster (floating labels) das stärkste ist – Weil Benutzer eine klare Ansicht darüber erhalten, in welchem Feld sie sich befinden und was sie jederzeit eingeben. Designer Matt D Smith teilte eine Dribble-Aufnahme eines cleveren neuen Forminteraktionsmusters. Das float-Beschriftungsmuster schwebt die Inlinebeschriftung über der Eingabe nach oben, nachdem der Benutzer sich auf das Formularfeld konzentriert oder einen Wert eingibt. Bei oben ausgerichteten Beschriftungen ist die Querprüfung der Eingaben gegen Ende nicht schnell zu tun. Benutzer müssen ihre Augen von Etikett zu Eingabe nach oben und unten fegen, um zu sehen, ob sie übereinstimmen. Der Leerraum-Zeilen- und Feldrahmen wird ihrem visuellen Pfad in den Weg gestellt und verlangsamt ihren Fluss nach unten. Ich würde im Allgemeinen sagen, dass immer sichtbare Etiketten wahrscheinlich “besser” sind – aber das ist eine kluge Idee und richtig gemacht, kann gelegentlich nützlich sein.

Es besteht immer die Gefahr, dass dies aufgeschraubt und auch die Barrierefreiheit beeinträchtigt wird, also achten Sie darauf. Ein Nachteil dieses Musters: Wir können nicht Platzhalter zusätzlich zum Etikett verwenden, was hilfreich sein kann (z. B. ein Etikett von “Telefonnummer” und ein Platzhalter-Hinweis von “(555) 555-5555”). Ich habe und problem mit Firefox und IE. Die Etiketten reihen sich nicht in der Eingabe auf, sie sind rechts davon. Sieht in Chrome, Safari und Opera gut aus. Ist das jemand rübergekommen oder bin ich es nur? Tags: Barrierefreiheit, Entwurf, Form, Beschriftung, matt d schmied, mobile, Muster, Benutzerfreundlichkeit, Web Wenn das Musterattribut vorhanden ist, aber nicht angegeben ist oder ungültig ist, wird kein regulärer Ausdruck angewendet und dieses Attribut wird vollständig ignoriert. Wenn das Musterattribut gültig ist und ein nicht leerer Wert nicht mit dem Muster übereinstimmt, verhindert die Einschränkungsüberprüfung die Formularübermittlung. webdesign.tutsplus.com/tutorials/ux-tutorials/implementing-the-float-label-form-pattern/ Selbst ein einfaches Benutzername- und Passwort-Szenario kann ohne Beschriftungen frustating sein.

Ich kann mich nie ganz erinnern, ob es im ersten Feld “Benutzername” oder “Benutzername oder E-Mail” heißt. Und das ist eine große Sache beim Einloggen. Es ist frustrierend, nicht zu wissen, ob etwas richtig ist oder nicht, weil es kein Etikett gibt. Ich dachte immer noch, dass das ursprüngliche Konzept Verdienst hatte, erkannte aber schnell, dass eine Ikone allein nicht ausreicht, um vollständig zugänglich zu sein. Denn ohne vollständige UI-Unterstützung ist dies nur eine Prototyp-Idee. IMHO ist es nicht in Ordnung, einige UI-Muster in Textfeldern zu haben, aber nicht andere Typen. Benutzer können ziemlich zögerlich sein, Formulare auszufüllen, so dass wir als Designer diesen Prozess so einfach wie möglich machen sollten. Geringfügige Änderungen – wie Etiketten dargestellt werden – können die Formverwendbarkeit erheblich erhöhen. Usability-Tests sind im Formdesign einfach unverzichtbar.

Sehr oft können Sie einen guten Einblick in die Verwendbarhen des Formulars erhalten, wenn Sie nur wenige Tests durchführen oder einfach einen Kollegen bitten, einen Prototyp des Formulars zu durchforsten. Für die Beschriftungen auf der rechten Seite verhindert eine Auffüllungsrechte auf der Eingabe:fokus und textarea:fokus größer oder gleich der Breite der Beschriftung (40% in der Demo), die Ihre Eingabe während der Eingabe unter die Beschriftung. Vereinfacht gesagt ist eine Musterprägung eine kostensparende Technik, mit der das Erscheinungsbild eines vorhandenen Etikettenmaterials natürlich und glaubwürdig dupliziert wird, wie z. B.: Die Beschriftungen und Eingabefelder werden in ein enthaltendes div-Element mit dem Klassennamen “field-wrapper” eingewickelt. Die enthaltenden div-Elemente haben Position: relativ auf sie angewendet, so dass die Beschriftung relativ zum enthaltenden div positioniert werden kann.