Textfelder und Weißraum: Wenn leerer Raum aussieht, als wäre da etwas

Ist da ein Abstand oder ist da ein Leerzeichen? Oft lässt sich das nur schwer voneinander unterscheiden.

Designer von grafischen Benutzeroberflächen geben Elementen gerne »Platz zum Atmen«, sodass nicht alles direkt aneinander klebt. Weißraum nennt man diese leeren Flächen.

Darüber, wie viel Weißraum gut und richtig ist, lässt sich freilich streiten. Ich persönlich ärgere mich oftmals grün und blau, wenn mal wieder irgendein Webdesigner der Ansicht war, dass Internetseiten überwiegend aus leerem Raum bestehen sollten, und ich mir deshalb den Finger am Mausrad wundscrollen muss, um Stück für Stück winzige Texthäppchen lesen zu dürfen.

Manchmal kann zu viel Weißraum auch ein Ende vortäuschen, wo keines ist. Wenn nach einem Text gähnende Leere folgt, scrollt man eventuell gar nicht mehr weiter und übersieht so, dass das nur der erste von fünf Abschnitten war.

Unter bestimmten Umständen kann Weißraum aber auch den gegenteiligen Effekt mit sich bringen und es aussehen lassen, als wäre da etwas, obwohl da nichts ist. Insbesondere bei Texten stellt sich gern die Frage: Ist da ein bedeutungsloser Abstand oder ist das ein Leerzeichen? Die Tatsache, dass im Englischen sowohl Weißraum als auch verschiedene typografische Leerzeichen als Whitespace (beziehungsweise »White Space«) bezeichnet werden, trägt auch nicht gerade zur Minderung dieser Verwechslungsgefahr bei.

Nichtsdestotrotz hat – zumindest maßvoll eingesetzter – Weißraum auch einen Nutzen. Und es braucht beileibe nicht viel davon, um mit einem Leerzeichen verwechselt werden zu können. Das erklärt letztendlich auch, wieso es gar nicht so trivial ist, dieses Problem zu vermeiden.

Probleme mit einzeiligen Textfeldern

Besonders häufig begegnet mir persönlich die Problematik beim linken Innenabstand in einzeiligen Textfeldern – also zum Beispiel überall dort, wo man Namen, Suchbegriffe oder ähnliches eintippen soll. Insbesondere im Web sind diese Felder so vielfältig und uneinheitlich gestaltet, dass selbst ich als langjähriger Computer-Nutzer rätseln muss, ob da am Anfang nun ein Leerzeichen steht oder nicht.

Oft mag es nur eine Spitzfindigkeit sein, ob da ein Leerzeichen steht oder nicht. Wenn ich etwas bestelle und auf dem Adress-Etikett letztendlich » Michael  Treml« statt »Michael Treml« steht, wird kein Hahn danach krähen.

Heikel wird es aber überall dort, wo Daten automatisch abgeglichen oder verknüpft werden. Wenn der Online-Shop, in dem ich bestelle, Leerzeichen-Michael und Nicht-Leerzeichen-Michael als zwei unterschiedliche Personen betrachtet, kann das für allerlei Irritationen sorgen – von fehlerhaften Login-Versuchen bis hin zu Mahnungen für vermeintlich nicht bezahlte Rechnungen.

Auch für die Sortierung kann so ein Leerzeichen am Anfang einen großen Unterschied machen. Wenn ich in einem ziemlich vollen Ordner auf meinem Computer einen Entwurf mit dem Namen » Erpresserbrief« abspeichere, werde ich diesen zwischen den Anfangsbuchstaben D und F nicht wiederfinden, weil der Anfangs-»Buchstabe« in diesem Fall kein E ist.

Zugegeben ist das Risiko, dass sich beim Tippen so ein ungewolltes Leerzeichen in das Textfeld verirrt, relativ gering. Ungleich größer ist sie aber, wenn man Inhalte durch Kopieren einfügt oder einen Teil aus einem vorhandenen Inhalt löscht.

Kein Weißraum ist auch keine Lösung

Jetzt läge es natürlich auf der Hand, diesen potentiell missverständlichen Weißraum einfach wegzulassen oder ihn zumindest so weit zu reduzieren, dass er nicht mehr mit einem Leerzeichen verwechselt werden kann.

Aber abgesehen von rein ästhetischen hätte das auch nachteilige Folgen für die Lesbarkeit. Abhängig davon, welches Schriftzeichen an erster Stelle steht, könnte ein Teil davon mit der linken Begrenzungslinie des Textfeldes zusammenfallen und dadurch nicht mehr gut erkennbar sein. Bei einem W sollte es in der Regel keine Probleme geben, aber ein L könnte dann schon einmal mit einem Unterstrich verwechselt werden und ein I könnte man komplett übersehen.

Manche Designer ändern Eingabefelder dahingehend ab, dass sie nicht wie Kästchen aussehen, sondern nur aus einer einfachen Grundlinie bestehen, über der man seinen Text eintippen soll. Das behebt natürlich das geschilderte Problem, allerdings kommt es sehr auf den Kontext an, ob dieser minimalistisch-nichtssagende Strich dann überhaupt noch als Eingabefeld erkennbar ist. Als Kompromiss könnte man das ganze Feld zumindest zusätzlich mit einer zarten Farbe unterlegen oder mit einem blassen Rahmen umgeben, von dem sich die Schriftfarbe deutlich abhebt.

Die allermeisten Textfelder, die mir heutzutage unterkommen, haben zwar keinen prägnanten Unterstrich, aber rundum blasse Rahmen oder eine dezente Hintergrundfarbe. Das hilft zwar grundsätzlich, um die Schrift hervorzuheben, allerdings heben sich diese Textfelder im Gegenzug nicht wesentlich vom Untergrund ab und sind dadurch oft nur schwer zu erkennen, wenn die Bedingungen nicht gerade optimal sind. Spätestens wenn uns die Sonne direkt auf den Bildschirm scheint, sehen wir alle, wieso Hellgrau auf Zartgrau keine barrierefreie Kombination ist.

Andere Abstände als Orientierungshilfe?

Als Benutzer könnte man im Zweifelsfall versuchen, sich an anderen Abständen im Textfeld zu orientieren. Sieht man etwa, dass der leere Raum unterhalb der Schrift genauso groß ist wie jener links davon, könnte das in der Theorie ein guter Indikator dafür sein, dass das ein bewusst gesetzter, einheitlicher Weißraum ist.

Aber welchen Abstand soll man dazu in der Praxis zur Hand nehmen? Schriftzeichen teilen sich vertikal in Mittellänge, Unterlänge und Oberlänge, wobei nur die Mittellänge von allen Zeichen genutzt wird. Soll man den unteren Abstand von einem a oder von einem deutlich tieferem g weg messen?

Alternativ könnte man nur den Abstand nach rechts hernehmen. Aber den bekommt man nur dann zu Gesicht, wenn man über die Länge des Feldes hinaus schreibt – sofern er überhaupt vorhanden ist. In vielen Fällen kann man rechts bis an den äußersten Rand schreiben, obwohl es links einen Schönheits-Abstand gibt.

In manchen Fällen verschiebt sich beim Über-das-Feld-hinaus-schreiben auch der Text so, dass der linke Abstand plötzlich verschwindet. Das lässt es mitunter noch stärker so aussehen, als wäre dort ein Leerzeichen, das dort nicht hingehört.

Außerdem kann es nicht nicht erstrebenswert sein, Textfelder so klein anzulegen, dass der Benutzer beim Ausfüllen auf jeden Fall bis an den rechten Rand oder darüber hinaus kommt. Im Vergleich zu einem halben Roman in einem Zwölf-Zeichen-Textfeld wäre die Frage, ob da am Anfang ein Leerzeichen steht, noch das das kleinere Übel.

Alles in Reih und Glied

Wenn andere interne Abstände nicht zur Orientierung taugen, bleibt zu guter Letzt noch der Blick auf Elemente außerhalb des Textfeldes.

Ein Grund, warum ich mich in diesem Artikel auf einzeilige Textfelder fokussiere, liegt darin, dass mehrzeilige Textfelder mehr Kontext zur Orientierung bieten. Wenn der Anfang der zweiten Textzeile scheinbar weiter links ist als der Anfang der ersten Zeile, ist das ein guter Indikator dafür, dass da am Start ein Leerzeichen steht.

Bei einzeiligen Textfeldern könnte man auf ähnliche Art und Weise darauf achten, ob Texte darüber oder darunter in derselben Flucht stehen.

So zumindest die Theorie. In der Design-Praxis ist das allerdings so gut wie nie gegeben. Selbst die Abstände zwischen unterschiedlichen Formularfeld-Typen sind oft so uneinheitlich, dass sie die Verwirrung nur noch verstärken.

Die zugehörige Beschriftung zu einem Textfeld so zu formatieren, dass sie horizontal an derselben Stelle wie der eingetragene Text beginnt, könnte helfen … aber zugegeben auch ein wenig die Orientierung stören, schließlich sind wir es gewohnt, von links nach rechts zu lesen, und wenn die Formularfelder weiter links beginnen als ihre Beschriftungen, könnten wir daher versucht sein, zuerst auf die Felder zu achten als auf die Erklärung, wofür sie stehen.

Eine runde Angelegenheit

Eine Form, die schon seit längerem auch bei Formularfeldern als schick gilt, sind runde Ecken. Üblicherweise hält sich der praktische Mehrwert dieses Rundlutsch-Trends in Grenzen, aber für unser konkretes Leerzeichen-Problem können stark ausgeprägte Rundungen einen ausgezeichneten Orientierungspunkt darstellen.

Ästhetisch fühlt es sich gut und richtig an, den Text erst dort zu beginnen, wo die Rundung zu Ende ist. So hat man einen klaren Indikator für den Textstart, aber trotzdem auch reichlich Weißraum nach links – und das alles in einem minimalistischen Textfeld ohne der Erfordernis von externen Orientierungspunkten.

Nur muss man sehr genau hinschauen, um den exakten Punkt zu finden, wo die Rundung zur Geraden wird. Und sehr starke Rundungen erzeugen zwangsläufig auch mehr Weißraum, als man mancherorts verplempern will.

Einen hab ich noch …

Eine andere Lösungsidee, die ich bis jetzt noch nirgends gesehen habe, könnte darin bestehen, oben und unten im Textfeld kleine Hilfsmarkierungen an der Position des Text-Starts zu machen.

Damit könnte man gegenüber Rundungen Platz in der Breite sparen … braucht aber in jedem Fall eine bestimmte Mindesthöhe. Und wer als Nutzer nicht weiß, warum diese Markierungen da sind, glaubt im Endeffekt wahrscheinlich erst recht, dass da irgendetwas ist, wo eigentlich nichts sein soll.