Bezeichnungsfelder (Label) sind wichtig!

Im Web haben wir uns daran gewöhnt, dass Eingabefelder ihre Bezeichnung im eigentlichen Inhaltsbereich zeigen. Beispielsweise beim Einloggen im E-Mail-Postfach über die Webseiten unserer Provider:

useability-fehlende-bezeichnungsfelder-web1  useability-fehlende-bezeichnungsfelder-web2

Wenn man den Text eingegeben hat, ist die Bezeichnung nicht mehr sichtbar. Trotzdem ist alles klar, schließlich ist die Anmeldung ja eine triviale Sache. Man kann mit Icons anstelle von Bezeichnungsfeldern oder durch ein Bezeichnungsfeld, das auf das eigentliche Textfeld folgt (z.B. „@arcor.de“) noch deutlicher machen, wozu das Feld dient.

useability-fehlende-bezeichnungsfelder-web3 useability-fehlende-bezeichnungsfelder-web4

useability-fehlende-bezeichnungsfelder-web8 useability-fehlende-bezeichnungsfelder-web9

Auch bei Flugbuchungen findet man Seiten, die keine separaten Bezeichnungsfelder haben (z.B. Lufthansa). Auch hier sind die Eingabefelder ohne separate Bezeichnung, diese steht stattdessen innerhalb des leeren Feldes. Wenn man etwas eingibt, sieht man nicht mehr wozu das Feld gedacht ist. Aber trotzdem ist irgendwie alles klar, oder? Von wo nach wo fliege ich?

useability-fehlende-bezeichnungsfelder-web7

Klar, von oben nach unten und von links nach rechts gelesen von: Von Tegel (TXL) am 03.09. nach Düsseldorf (DUS) und Rückflug am 04.09.

Weil das gut aussieht, zur Übersichtlichkeit beizutragen scheint und Platz auf der Oberfläche immer knapp ist, könnte man verführt sein, das auch auf andere Sachverhalte in Web- und Desktop-Anwendungen zu übertragen. Im folgenden Dialog kann man einen Termin eintragen, ganz einfach. Termin? Ja, einen einfachen Termin – kennt doch jeder. Der gleiche Dialog öffnet sich auch, wenn man einen bereits eingetragenen Termin bearbeiten möchte. (Das finde ich prima, weil es den ergonomischen Grundatz der Erwartungskonformität erfüllt.) Sehen Sie es sich einmal an:

useability-fehlende-bezeichnungsfelder-desktop1

Aber wozu dienen die Felder? Unter dem Titel steht in der Zeile darunter wahrscheinlich links das Beginn-Datum und rechts daneben das Ende-Datum. In der Zeile darunter stehen dann sicher auch Beginn-Uhrzeit und Ende-Uhrzeit. Aber was bedeutet Rot? Wofür steht Bildung? Was bedeutet die Zahl 1? Was ist mit Uni gemeint? Ganz so klar ist das doch nicht, oder? Obwohl wir einen ganz einfachen Termin hier sehen, gibt es wegen der fehlenden Bezeichnungsfelder einige Unklarheiten.

Um es aufzulösen sehen Sie sich bitte den Dialog an, wenn noch keine Eingaben gemacht wurden. Wir haben einen klaren Entwurf, aber ohne die Zusatzinformationen eben nicht so gut verständlich. (Sehr gelungen ist übrigens der Abstand des Titels zu den restlichen Feldern, um die Bedeutung des Titels zu betonen.)

useability-fehlende-bezeichnungsfelder-desktop2

Stellen Sie sich eine Patientenakte im Krankenhaus vor. Darf es dort zu Unklarheiten kommen? Soll sich der Arzt fragen müssen, ob Rot für die Dringlichkeit der Behandlung oder die Haarfarbe des Patienten steht? Nein. Hier müssen die Felder alle eindeutig und klar sein.

Aktenführung (CC-BY-SA 3.0, Tombrock16)
Aktenführung – Quelle: [1]
Auch wenn Ihnen Sachverhalte klar und einfach erscheinen, denken Sie an den Schulungsaufwand und an gelegentliche Benutzer. Deshalb fügen Sie bitte immer, immer, immer Bezeichnungsfelder zu Ihren Felden hinzu, die unmissverständlich kar machen, was der Inhalt des Feldes ist.

In diesem Sinne, weiterhin viel Spaß!


Quellen:

[1] Abbildung: Abbildung: By Tombrock16 (Own work) [CC BY-SA 3.0 (http://creativecommons.org/licenses/by-sa/3.0)], via Wikimedia Commons

Schreibe einen Kommentar