Präsentation

Der erste Bereich, den wir behandeln, ist mit Präsentation überschrieben und umfasst alles, was es auf dem Bildschirm zu sehen gibt.

Im Kapitel Architektur der Wahrnehmung haben wir erläutert, dass das menschliche Wahrnehmungssystem als das Ergebnis der evolutionären Anpassung des Menschen an seine natürliche Umwelt verstanden werden kann. Mit diesem Wahrnehmungssystem werden auch die vom Computer bereitgestellten Nutzungsschnittstellen erfasst und verarbeitet. Entsprechend sollten die am Bildschirm sichtbaren Objekte und Strukturen so gestaltet werden, dass die Hypothesen, die das Wahrnehmungssystem anstellt, zielführend sind. Laufen sie dagegen ins Leere, kann die Software nicht effektiv genutzt werden, weil ihre schnelle und korrekte Wahrnehmung erschwert oder gar verhindert wird. In jedem Fall bedeutet es erhöhten Aufwand, der im Sinne der Reduzierung erzwungener Sequenzialität zu vermeiden ist.

Bildschirmobjekte

In unserem ersten Praxiskapitel werfen wir einen Blick auf die Gestaltung visueller Objekte am Bildschirm. Die grundlegende Voraussetzung für den Umgang mit diesen Objekten ist, dass sie gut und schnell erkennbar sowie sicher unterscheidbar sind und dass wichtige Objekte leicht aufgefunden werden können. All das sollte möglichst ohne ungewollte Ablenkungen vonstatten gehen, denn eine Ablenkung verkörpert immer erzwungene Sequenzialität.

Unterscheidung von Objekt und Hintergrund

Objekte am Bildschirm als solche erkennbar zu gestalten bedeutet zunächst einmal, sie vom Hintergrund abzusetzen. Bevor wir uns näher mit dieser Frage beschäftigen, schauen wir uns eine problematische Gestaltung aus einem ganz anderen Bereich an:

Bei diesem Lageplan einer Universität dürfte Ihnen vielleicht an der Farbgebung auffallen, wie typisch diese für die 1970er Jahre ist. Wie ergonomisch die Wahl der Farben an sich ist, wollen wir an dieser Stelle nicht thematisieren. Wir kommen am Ende dieses Kapitels noch auf das Thema Farbwahl und Farbpaletten zu sprechen. Das größte Problem ist nicht die Farbwahl an sich, sondern die Art und Weise der Auszeichnung von Bildschirmobjekten oder eher der Nicht-Auszeichnung dieser Objekte. Der gezeigte Plan sollte zwei Aufgaben erfüllen. Betrachten Sie die Darstellung zunächst unter der Annahme, dass sie den im Gebäude befindlichen Personen die Orientierung ermöglichen soll, wie sie von einem Gebäude in ein anderes gelangen können.

Der Hintergrund der Karte ist eine dunkelgelbe Fläche. Auf den ersten Blick sieht man eine sich eindeutig davon abhebende hellblaue Struktur. Die hellblauen Flächen verkörpern jedoch nicht die Gebäude, die zur Orientierung von vorrangigem Interesse sind. Herausgestellt werden erstaunlicherweise die Straßen und Parkplätze auf dem Uni-Campus. Die Gebäude sind zwar ebenfalls eingezeichnet, aber nur zu erkennen, wenn man den Plan ganz genau anschaut, denn sie sind nur als Umrisse gezeichnet und werden damit optisch zu einem Teil des Hintergrunds, statt sich von diesem abzusetzen.

Betrachtet man den Plan mit einer anderen Intention, ist die Auszeichnung schon verständlicher. Demnach sollte nicht dargestellt werden, wie man sich in der Gebäudestruktur orientieren kann, sondern wo sich Versammlungs- und Rettungsplätze befinden und wie man am schnellsten ins Freie kommt. Aber auch für diesen Zweck ist die Darstellung problematisch, da schwer ersichtlich ist, wo man sich genau befindet und wie man von dort zum nächsten Versammlungsplatz findet. Eine solche Karte, auf der die Rettungswege dargestellt sind, mag interessant für die Anfahrt der Feuerwehr sein, zur Orientierung innerhalb der Gebäude ist sie ergonomisch schlecht geeignet.

Eine Gestaltung, bei der die eigentlichen Objekte des Interesses nicht zu erkennen sind, sollte uns bei der Gestaltung von Nutzungsschnittstellen möglichst nicht unterlaufen. Objekte müssen als solche gut wahrnehmbar sein, indem sie sich als optisch erkennbare Gebilde vom Hintergrund absetzen. Die Erkennbarkeit von Objekten ist daher auch die erste unserer Forderungen zur Reduzierung erzwungener Sequenzialität.

Erkennbarkeit bedeutet im Speziellen, dass es einen sichtbaren Unterschied zwischen dem Objekt und dem Hintergrund geben muss. Der wichtigste Unterschied ist die Helligkeit, genauer: ein hoher Helligkeitskontrast. Ist der Hintergrund beispielsweise weiß, kann ein Objekt im Vordergrund schwarz oder auch zum Beispiel dunkelgrün sein. Ist der Hintergrund hingegen dunkelgrau oder schwarz, setzt sich ein hellgraues, ein weißes, aber auch ein gelbes Objekt gut davon ab. Ein Absetzen nur durch Wählen einer höheren oder niedrigeren Sättigung (Sättigungskontrast) oder durch die Wahl eines anderen Farbtons (Farbtonkontrast) sollten Sie vermeiden, denn in diesem Fall haben Sie nur bei der Kombination von gelb auf blau einen hinreichend großen Kontrast. Dass die Farbkombination gelb-blau genügend Kontrast bietet, liegt vor allem an der Unzulänglichkeit der Farbmischung an RGB-Monitoren im Verhältnis zur Farbwahrnehmung des menschlichen Auges. Beim RGB-Farbmodell haben alle drei Grundfarben die gleiche technische Helligkeit. Gelb ist die Kombination aus rot und grün. Rein technisch betrachtet ist RGB-Gelb (100 %,100 %,0 %) doppelt so hell wie RGB-Blau (0 %,0 %,100 %). Hinzu kommt, dass das menschliche Auge über weitaus weniger Zapfen für den Blaubereich verfügt als für andere Bereiche des Spektrums. Die Kombination blau-gelb auf RGB-Monitoren ist daher nur auf den ersten Blick ein Farbtonkontrast. Faktisch handelt es sich in der Wahrnehmung um einen starken Helligkeitskontrast.

Auszeichnung manipulierbarer und aktivierbarer Objekte

Besonderes Augenmerk muss bei der Gestaltung auf Objekte gelegt werden, die anklickbar sind, die ausgewählt oder verschoben werden können oder in die etwas eingegeben werden kann. Derartige Objekte müssen sich von den anderen Elementen am Bildschirm so deutlich unterscheiden, dass sie als andersartig wahrgenommen werden. Die Objekte müssen also eine hohe Unterscheidbarkeit aufweisen.

Die Forderung nach Unterscheidbarkeit bewirkt, dass bestimmte Objekte als andersartig wahrgenommen werden können, und ermöglicht damit entsprechende Differenzerfahrungen. Diese wahrgenommene Andersartigkeit reicht aber allein nicht aus, um feststellen zu können, was es genau mit der Andersartigkeit auf sich hat oder wie ein auf diese Art ausgezeichnetes Objekt funktioniert. Wir müssen an dieser Stelle daher einem weit verbreiteten Missverständnis vorbeugen: Die vielfach erhobene Forderung, Nutzungsschnittstellen intuitiv zu gestalten, sodass bei der Nutzung ohne Vorwissen erkennbar ist, wofür Bildschirmobjekte stehen und wie Programme zu handhaben sind, ist nicht erfüllbar. Die Unterstellung einer intuitiven Nutzbarkeit unterschlägt die bereits vor der aktuellen Nutzung stattgefundenen Lernprozesse.

Es gibt keine Nutzungsschnittstelle, die für eine beliebige Person, die mit dem System nicht vertraut ist, unmittelbar einsichtig wäre oder bei der die Zwecke der einzelnen Objekte aus sich heraus offensichtlich wären. Wenn Sie den Eindruck haben, dass Sie allein durch scharfes Hinsehen ein Objekt am Bildschirm beispielsweise als Button erkennen können, liegt das daran, dass Sie schon viele Buttons gesehen haben und wissen, wie diese üblicherweise gestaltet werden. Sie haben also schon vorher an vergleichbaren Beispielen gelernt, wie ein Button aussieht. Würden Sie die Nutzungsschnittstelle einer Person zeigen, die noch nie ein solches Bildschirmobjekt gesehen hat, würde sie sicher nicht verstehen, was sie da sieht und wie man es benutzt ¹.

Intuitivität verweist daher in unserem Fachgebiet lediglich auf etablierte Praktiken der Gestaltung und Nutzung von Artefakten.

Die Gestaltung von Schaltflächen (Buttons)

Ein Button ist ein Textobjekt, das beim Anklicken eine Funktion auslöst. Nur der typografische Text gäbe keinen Hinweis darauf, dass dieses Textobjekt anders ist als die umgebenden. Ein verbreiteter Ansatz, die Klickbarkeit dieses Textobjekts zu kennzeichnen, besteht darin, den Text blau darzustellen oder zu unterstreichen. Diese Art der Darstellung entstammt dem World Wide Web und kam mit den Webbrowsern auf. Von der ergonomischen Gestaltung her ist dieser „Link-Stil“ jedoch nicht so gut. Wir kommen darauf im Kapitel Typographie zu sprechen und lassen diese Variante zunächst beiseite. Welche anderen Möglichkeiten gibt es, ein anklickbares Objekt oder einen Bereich auszuzeichnen, also so darzustellen, dass er sich von anderen Objekten und Bereichen absetzt?

Dieses Beispiel zeigt, dass es nicht ausreichend ist, lediglich ein besonders auffälliges Element zu gestalten, um zu verdeutlichen, dass es sich um ein anklickbares Objekt handelt. Die Grafik unten links, der Schriftzug „Search“ mit der Lupe davor, ist in der Bildschirmdarstellung ein animiertes GIF. Die Lupe bewegt sich unentwegt über dem Text hin und her. Dies ist grundsätzlich schon nicht ergonomisch, denn das sich dauerhaft bewegende Element besitzt ein erhebliches Ablenkungspotenzial. Das größere Problem ist jedoch, dass ebendieses Element mit der sich bewegenden Lupe die aktive Schaltfläche verkörpert. Man muss auf die bewegte Grafik drücken, um die Suche in der Datenbank zu starten. Wären Sie darauf gekommen? Warum erkennt man diesen „Button“ nicht, obwohl er doch das auffälligste Element auf dem Bildschirm ist? Eine Reihe von Gründen spielen hier eine Rolle, denn die Gestaltung widerspricht vielen der Forderungen, die wir in den nachfolgenden Kapiteln ausführlich besprechen werden:

• Die Gestaltung dieser „Schaltfläche“ ist sehr verschieden von den anderen Buttons in demselben Formular. Es wurde ein gestalterischer Unterschied eingeführt, der bedeutungslos ist. (Wir behandeln dies später genauer bei der Forderung nach Interner Konsistenz)
• Die Positionierung des Elements ist ungünstig, denn die Gestaltung entspricht nicht der Leseflussrichtung. Befände sich die Grafik unten rechts, wäre die Wahrscheinlichkeit, dass man sie als Auslöser erkennt, möglicherweise höher. (Hierzu mehr im Kapitel über Kulturelle Konventionen)
• Die Animation hat ein großes Ablenkungspotenzial. Da diese Störquelle kontinuierlich aktiv ist, muss man sich regelrecht darauf konzentrieren, das Element zu ignorieren. Dieses Phänomen ist auch als „Banner Blindness“ bekannt².
• Das Element entspricht keiner Konvention für anklickbare Objekte: Animierte Grafiken dieser Art sind üblicherweise Überschriften, Zierwerk oder allenfalls ein Prozessindikator.

Für uns ist an dieser Stelle am wichtigsten:

• Das Element lenkt zwar die Aufmerksamkeit auf sich, es setzt sich aber nicht räumlich vom Hintergrund ab. Es wird also eher als integraler Bestandteil der Umgebung bzw. des Hintergrunds angesehen als ein davon abgesetztes Objekt.

Während das aktive Element im obigen Beispiel zu auffällig war, geht es im folgenden Beispiel nahezu unter:

Den linken Teil dieser Abbildung haben Sie bereits im Einführungskapitel kennengelernt. Zu sehen ist ein Teil der sogenannten „Charms-Bar“ von Windows 8. Diese Leiste kann bei Windows 8 jederzeit geöffnet werden, um bestimmte Systemfunktionen, aber auch Funktionen des gerade laufenden Programms zu erreichen. Unter anderem ermöglicht die Charms-Bar auch den Zugriff auf die Systemeinstellungen. Dafür muss im unteren Bereich der Leiste auf den Text „PC-Einstellungen ändern“ geklickt werden.

Diese Gestaltung ist problematisch, weil der Text nicht als eigenes Objekt erkennbar ist. Es wirkt als Beschriftung und erzeugt nicht den Eindruck einer Schaltfläche. Dass man an dieser Stelle klicken kann, muss man wissen oder man entdeckt es durch Zufall. Der rechte Teil der Abbildung zeigt eine mögliche Verbesserung mit minimalen Mitteln. Es wurde lediglich der Hintergrund um den Text herum aufgehellt. Die kleine Änderung macht einen großen Unterschied, denn jetzt erscheint der Text als eigenständiges Objekt, das sich durch die Helligkeitsstaffelung räumlich abhebt und zudem auch noch einer typischen Konvention für das Aussehen von Buttons entspricht.

Interessanterweise treten Fehler in der mangelnden Unterscheidung von Objekt und Hintergrund bis heute auf. Auch die bekannte Grafiksoftware Photoshop von Adobe hielt sich bis vor einigen Jahren stets an das Farbschema des Betriebssystems und damit auch an das Standarddesign von Schaltflächen und Eingabebereichen. Inzwischen ist man aber zu einer eigenen, in Dunkel gehaltenen Darstellung übergegangen.

Über die Probleme dieser Negativdarstellung sprechen wir intensiver im Kapitel Typographie. Das eigentliche Problem im oben abgebildeten Fenster ist nicht die Darstellung von heller Schrift auf dunklem Grund, sondern, dass die Buttons und die Eingabefelder nur schwer erkennbar sind. Buttons heben sich nicht mehr ab, sondern sind nur noch mit einer sehr dünnen Linie umrahmt. Gravierender noch ist die fehlende Auszeichnung der Eingabefelder zum Beispiel hinter „Breite“ und „Höhe“. Der Eingabebereich ist nur noch durch einen sehr dünnen, etwas helleren, grauen Strich ausgezeichnet. Dadurch ist schwer zu erkennen, wo etwas einzugeben ist und wo es sich um eine reine Ausgabe handelt. Wenn eine Firma wie Adobe eine solche Designänderung durchführt, ist das Grund genug zu überlegen, was die Gründe dahinter gewesen sein mögen. In gewisser Weise ist die Entscheidung, ein dunkles, zurückhaltendes Design zu wählen, sinnvoll, denn bei einer Anwendung zur Bildbearbeitung sollte das zu bearbeitende Bild im Vordergrund stehen. Die Objekte der Nutzungsschnittstelle sind nur ein notwendiges Übel. Sie sollten daher zurückhaltend gestaltet sein und möglichst nicht auffallen. Dieses Ziel wurde durch die Designänderung zwar erreicht, doch wurde dabei das Kind mit dem Bade ausgeschüttet. Das Design ist nicht aufdringlich, aber es ist eben auch nicht prägnant genug, sodass durch zusätzliche Anforderungen an das Orientierungsvermögen und die Konzentration erzwungene Sequenzialität entsteht und dadurch die Nutzung erschwert wird.

Auf der folgenden Abbildung sehen Sie eine schnelle Überarbeitung desselben Fensters, bei dem die Buttons leicht aufgehellt und die Eingabefelder leicht abgedunkelt wurden. Durch diese minimale Änderung sind die Objekte der Manipulation und der Interaktion deutlich besser erkennbar, ohne dass die Oberfläche unruhiger und aufdringlicher geworden wäre.

Die Simulation von Plastizität

Vor allem am Beispiel der Buttons haben wir bisher überlegt, wie diese gestaltet werden können, um als Objekte am Bildschirm gut erkennbar zu sein. Damit ein Bildschirmelement als Objekt erkennbar ist, muss es sich optisch absetzen. Oben haben wir das durch einen Helligkeitsunterschied zur Umgebung erreicht. Diese einfache Gestaltung passt zur Grundhypothese aus dem Kapitel Architektur der Wahrnehmung, wonach unser Wahrnehmungssystem auf eine Welt von dreidimensionalen, einander verdeckenden, beleuchteten Objekten ausgeht. Ziehen wir die dort herausgearbeiteten Beleuchtungs-Hypothesen heran, können wir leicht weitere Gestaltungsvorschläge ableiten, die dieser Grundhypothese des Wahrnehmungssystems entsprechen.

Eine eingefärbte Fläche hebt sich von ihrer Umgebung ab. Diese Art der Auszeichnung durch die Einfärbung des Hintergrunds und durch eine eventuelle zusätzliche Umrandung hat den Vorteil, sehr einfach zu sein. Der Wahrnehmungseindruck bleibt aber, ähnlich wie bei Text auf Papier, im Zweidimensionalen.

Bei diesem Button hingegen, obwohl in der technischen Umsetzung sehr ähnlich, gibt es einen plastischen Effekt. Dadurch dass der Hintergrund dunkel und die Buttonfarbe heller gestaltet ist, erscheint der Button optisch näher als der Hintergrund.

Simulierte Schlagschatten

Neben solchen Helligkeits- und Sättigungsunterschieden sind in zweidimensionalen Darstellungen vor allem Schlagschatten Indikatoren für Tiefe. Die folgenden beiden Darstellungen können das gut verdeutlichen.

Beide Quadrate auf diesen Abbildungen befinden sich an genau der gleichen relativen Position zum Hintergrund. Der Eindruck des Vom-Hintergrund-abgesetzt-Seins und eines größeren Abstands zwischen Vordergrund und Hintergrund auf der rechten Seite entsteht ausschließlich durch die Position und das Aussehen des simulierten Schlagschattens. So einen Schatten zu simulieren bedeutet, eine virtuelle Lichtquelle zu simulieren. Aber wo sollten Sie diese Lichtquelle positionieren? Von den vielen Möglichkeiten sind nur einige wenige sinnvoll.

• Die imaginäre Lichtquelle muss sich auf jeden Fall hinter dem Nutzer befinden, denn sonst würden die Objekte keinen Schatten auf den Bildschirmhintergrund werfen und die Lichtquelle wäre nutzlos.
• Die imaginäre Lichtquelle muss sich oberhalb des Kopfes befinden. Dies entspricht den natürlichen Wahrnehmungssituationen mit einer Beleuchtung vom Himmel her, also von oben. Damit entspricht eine solche Gestaltung auch der Architektur der Hypothesenbildung im Wahrnehmungssystem.
• Letztendlich funktionieren die Schatteneffekte besser, wenn die imaginäre Lichtquelle von der Seite kommt. Im Prinzip ist es egal, ob das Licht von links oder von rechts her scheint. Ein Lichteinfall von links ist aber schon seit Langem die in der Kunst und Malerei bevorzugte Positionierung, sodass wir diese Variante empfehlen.

Nimmt man diese Hinweise zusammen, simuliert man also eine Lichtquelle von oben-links-hinter-Kopf, hebt sich ein Button, wie er hier dargestellt ist, noch stärker vom Hintergrund ab, als dies nur durch die Helligkeitsstaffelung möglich wäre. Die Schlagschatten müssen bei Weitem nicht so auffällig gestaltet sein wie in der obigen Abbildung. Für den plastischen Effekt reicht auch ein viel subtilerer Schatten.

Der unten abgebildete Button etwa hat einen minimalen Schlagschatten, den man fast nicht bewusst wahrnimmt. Dennoch sorgt er dafür, dass sich der Button vom Hintergrund stärker abhebt, als es eine helle Fläche allein tun würde.

Darstellungen von Aus- und Einstülpungen

Sehr effektiv, aber leider aus der Mode gekommen, ist das Vermitteln von Plastizität durch das Simulieren von Aus- und Einstülpungen, also der Darstellung von Flächen, die aus dem Hintergrund heraus oder in diesen hinein zu reichen scheinen.

Ein Button wie der rechts abgebildete simuliert ein auf dem Hintergrund liegendes Objekt mit abgeschrägtem Profil. Die simulierte Beleuchtung liegt in diesem Falle in der linken oberen Bildschirmecke. Sie sorgt dafür, dass der von oben betrachtete Button zwei Kanten aufweist, die von der Lichtquelle direkt beleuchtet werden, die linke und die obere, und zwei Kanten, die im Schatten liegen, die rechte und die untere. Faktisch bedeutet dies, dass zwei Kanten heller als die Button-Grundfarbe und zwei Kanten dunkler als diese gestaltet werden sollten.

Diese Darstellung von Buttons war in den 1990er Jahren sehr verbreitet. Oben sehen Sie ein Exemplar aus Windows 95. Buttons so zu gestalten, erfordert jedoch bestimmte Randbedingungen: Die Gestaltung funktioniert nicht gut auf weißem oder schwarzem Hintergrund, wenn Kanten des Buttons selbst weiß oder schwarz werden müssen. In Windows 95 mit seiner vorherrschenden mittelgrauen Farbe funktionierte es hingegen hervorragend.

Die Vorteile dieser Technik sind zum einen, dass sie keiner großen grafischen Finesse, wie etwa der Simulation eines Schlagschattens mit einem Helligkeitsverlauf, bedürfen und daher auch auf Systemen ohne hohe Farbauflösung leicht umsetzbar sind. Der Plastizitätseffekt ist trotz dieser einfachen Gestaltung groß. Ein wichtiger Vorteil gegenüber den zuvor vorgestellten Gestaltungsalternativen ist aber vor allem, dass ein solcher Button einem realweltlichen Druckschalter ähnelt. Ein Button hebt sich damit nicht nur räumlich ab, sondern erinnert durch seine Gestaltung auch an seine Funktion. Er hat dadurch eine höhere Wiedererkennbarkeit als eine anders gestaltete Schaltfläche.

Achtung: Es gilt weiterhin unser Hinweis, dass man ohne Vorwissen nicht an der Gestaltung eines Objekts erkennen kann, wofür ein Objekt steht bzw. wie es funktioniert. Wiedererkennbarkeit bedeutet lediglich, dass die Gestaltung dabei unterstützt, etwas, das man schon erlernt hat, wiederzuerkennen. Wir werden das Potenzial der Wiedererkennbarkeit später als eine wichtige Anforderung beim Icon-Design kennenlernen und uns da vor allem mit dem wichtigen Unterschied zwischen Erkennen und Wiedererkennen befassen.

Helligkeitsverläufe

Eine komplementäre Technik, um ein Objekt plastisch hervorzuheben, ist der Einsatz von Helligkeitsverläufen. Sie entsprechen dem natürlichen Wahrnehmungseindruck, bei dem eine beleuchtete Fläche immer einen gewissen Helligkeitsverlauf aufweist.

Dieser Button von Windows XP (links) weist einen solchen Helligkeitsverlauf auf. Er ist oben heller als unten. Das simulierte Licht kommt demnach von mittig oben. Daneben abgebildet ist ein Button aus Googles ehemaliger Software Picasa. Auch hier gibt es einen vergleichbaren Helligkeitsverlauf von oben nach unten. Die Richtung des Verlaufs ist wichtig! Aus dem gleichen Grunde, aus dem wir zuvor dafür argumentiert haben, dass eine Lichtposition von oben angenommen werden muss, müssen wir auch hier von einer natürlichen Beleuchtung von oben ausgehen.

Die vorgestellten Techniken lassen sich auch kombinieren. Der abgebildete Button aus Adobes Lightroom Classic CC hat sowohl einen Helligkeitsverlauf von oben nach unten, der in der vorliegenden Abbildung kaum noch zu erkennen ist, als auch leicht angedeutete helle Kanten links und oben.

Die vorgestellten Techniken zur Simulation von Plastizität am Bildschirm gelten nicht nur für Schaltflächen, sondern können auf eine Vielzahl von Objekten übertragen werden.

Diese Darstellung eines Browser-Reiters arbeitet beispielsweise mit den hier vorgestellten Techniken. Der ausgewählte Reiter ist heller als der Hintergrund und als die übrigen, nicht ausgewählten Reiter. Ein leichter Schlagschatten unterstützt das visuelle Absetzen und schlussendlich wird die Plastizität durch einen leichten Helligkeitsverlauf unterstützt.

Maßvoller Einsatz

Bei allen hier vorgestellten Techniken gilt es, sie maßvoll anzuwenden. Werden sie übertrieben angewandt, unterstützen sie nicht mehr die Wahrnehmung der Objekte und der Struktur am Bildschirm, sondern werden zu ablenkenden Elementen.

Im obigen Beispiel des Datenrettungsprogramms Stellar Phoenix gibt es Elemente, bei denen zu starke Verläufe und sogar Texturen eingesetzt werden. Dazu gehören die Buttons im unteren Bereich, die mit Glanzeffekten und mit einer Textur eine edelsteinartige Anmutung haben, die die Erkennbarkeit und Unterscheidbarkeit nicht fördert, wohl aber starke visuelle Unruhe erzeugt. Dieser visuelle Reichtum hat nicht nur keine eigene Funktion, sondern vermindert unnötig die Erkennbarkeit der eigentlichen Abbildungen der Buttons. Noch kritischer ist die mit „Stellar Phoenix Macintosh 4.1“ beschriftete Leiste oben im Bild. Diese Leiste hat keine Funktion, ist aber das bei Weitem auffälligste Element im gesamten Fenster. Die Verwendung eines Helligkeitsverlaufs dieser Art, der entfernt an die Darstellung eines Metallrohrs erinnert, lenkt ab, ohne einen Zweck zu erfüllen. Gestaltungen dieser Art verstoßen gegen die Forderung nach Einfachheit.

Wir werden uns mit dieser Forderung beim Icon-Design und im Kapitel Anordnung noch intensiver beschäftigen.

In diesem Bild sehen Sie ein älteres Design von Mac OS X. Auch hier wurde eine Gestaltung gewählt, die zwar sehr plastische Objekte erzeugt, aber die Forderung nach Einfachheit der Darstellung nicht berücksichtigt. Am augenfälligsten wird dies bei den Buttons, die eine Glasanmutung inklusive Glanzeffekten haben. Dies ist zwar auffällig, hat aber gegenüber den optisch eher „langweiligen“ Buttons wie den zuvor gezeigten von Windows 95 keinerlei Vorteile.

Vorsicht bei teiltransparenten Elementen

Der Ansatz, Plastizität am Bildschirm zu erzeugen, ist letztlich der Versuch, den Eindruck von sich verdeckenden Elementen und eine daraus resultierende Tiefe zu erzeugen. Eine aufwändige Möglichkeit, diesen Eindruck zu erzielen, ist, Elemente der Nutzungsschnittstelle teildurchsichtig zu machen, also so zu gestalten, dass der Hintergrund teilweise durchscheint. Die Verwendung dieser Technik sieht in Produktvorstellungen oft besonders gut aus. Gegenwärtig ist die Verwendung teiltransparenter Objekte in vielen Anwendungen und Betriebssystemen verbreitet und sowohl im Windows-, Apple- als auch Linux-Bereich zu finden. In der Praxis ergeben sich durch diese Gestaltung jedoch Probleme, die ihren Einsatz eigentlich verbieten sollten, da sie der Forderung nach Robustheit in der Gestaltung widerspricht.

Zur Erinnerung: Im Gegensatz zur Gestaltung eines Spiels oder eines statischen Bildes lassen sich bei der Entwicklung einer Nutzungsschnittstelle nie alle Kombinationen von möglicherweise gemeinsam auftretenden Bildschirmelementen vorhersehen. In Multitasking-Systemen mit mehreren gleichzeitig sichtbaren Programmen verstärkt sich dieses Problem. Bei der Gestaltung einer einzelnen Anwendung ist nicht mehr durchgängig klar, mit welchen anderen Programmen und Fenstern es zusammen auf dem Bildschirm erscheinen wird, wie die Fenster angeordnet sein werden und welcher individuelle Hintergrund bei der jeweiligen Nutzung gewählt worden ist. Bei teiltransparenten Elementen wird das zu einem Problem. Da zum Zeitpunkt der Gestaltung nicht generell vorhersehbar ist, welche Objekte hinter dem teiltransparenten Objekt liegen werden, kann es zu eigenartigen Störeffekten kommen.

Das Problem veranschaulichen die obigen Abbildungen. Im linken Beispiel scheint die Scrollbar eines hinten liegenden Fensters durch ein im Vordergrund befindliches Menü durch und das recht auffällig. Der so entstandene Balken ist bestenfalls überflüssiger Hintergrund, der wahrgenommen werden muss. Schlimmstenfalls kommt es zu Irritationen und Fehlinterpretationen. In beiden Fällen entsteht erzwungene Sequenzialität. Im rechten Beispiel ist es ähnlich. Der Hintergrund einiger Elemente auf der linken Seite scheint eingefärbt zu sein. Diese Färbung hat aber nichts mit den dort sichtbaren Elementen zu tun, sondern ist auf ein dahinter liegendes Fenster mit einem großen, roten Element zurückzuführen. Diese Seiteneffekte aus anderen Fenstern und Programmen können in der Bedienung zu Irritationen führen. Nochmals gesteigert wird der Irritationseffekt, wenn der Hintergrund nicht statisch ist, sondern zum Beispiel aus einem Video oder einer blinkenden Werbeanzeige besteht. Dieses Blinken und Flackern hat mit der aktuell zu erledigenden Aufgabe nichts zu tun und ist daher störend.

Unsere dringende Erinnerung daher an dieser Stelle: Nutzungsschnittstellen möglichst robust gestalten! Robust gestalten bedeutet zurückhaltend gestalten, indem auf visuelle Spielereien und ornamentale Ausschmückungen verzichtet wird, um die potenzielle Zahl von Konfliktsituationen bei der Kombination von Bildschirmelementen zu reduzieren. Die Verwendung teiltransparenter Elemente vergrößert die Zahl möglicher Komplikationen und verringert dadurch die Robustheit.

Objektauszeichnung

Objekte als bearbeitbar und aktiv darzustellen, ist nur ein Grund für eine Auszeichnung. Es gibt noch viele weitere Notwendigkeiten, ein Objekt unterschiedlich dar- und dadurch herauszustellen. In einer visuellen Nutzungsschnittstelle können Objektzustände nur dann Gegenstand des Denkens und der Differenzerfahrung werden, wenn sie auch visuell wahrnehmbar sind. Für die Anwendung wichtige Zustandsinformationen müssen daher möglichst deutlich als Objekteigenschaft erkennbar sein und sie dadurch von anderen absetzen. Nutzer müssen zum Beispiel die Objekte einer Auswahl, also selektierte Objekte, von anderen unterscheiden können. In einem Formular kann es notwendig sein, durch einen optischen Unterschied klarzumachen, dass bestimmte Eingabefelder momentan nicht zur Verfügung stehen. In einem System zur Überwachung einer Industrieanlage kann es notwendig sein, bestimmte Bildschirmobjekte, die ein defektes Aggregat oder einen gefährlichen Messwert repräsentieren, von den übrigen Objekten abzusetzen.

Diese Abbildung zeigt zwei Beispiele für die Auszeichnung von Objekten: In beiden Fällen ist je ein Objekt ausgezeichnet – es ist selektiert. Das Beispiel auf der linken Seite stammt von Windows XP, das rechte von Windows 7. In beiden Fällen liegt eine Auszeichnung der Selektion durch den Einsatz von Farbe vor. Bei Windows XP wird zur Darstellung der Selektion das Icon mit einem Blauschleier versehen. Auch die Icon-Beschriftung wird blau hinterlegt. Bei Windows 7 wird das Icon nicht mehr verändert, sondern stattdessen die Umgebung des Icons, quasi eine Kachel, eingefärbt. Die Einfärbung des Hintergrunds vermeidet das Problem, das entsteht, wenn die Farbe des Icons mit der Auszeichnungsfarbe übereinstimmt oder ihr zumindest sehr nahekommt. In diesen Fällen erscheint ein Icon auch im nicht selektierten Zustand als selektiert. Beim Hinterlegen ist der Zustand eindeutig erkennbar. Allerdings können auch dabei Konflikte auftreten, sodass das Icon selbst schlechter zu erkennen ist. Vor allem wenn verschiedene Personen zu verschiedenen Zeitpunkten die Art und Weise der Darstellung der Selektion und die Auswahl und Darstellung von Icons gestalten, funktioniert die Windows-7-Variante immer. Das Hinterlegen mit einer Farbe ist also die robustere Technik für eine Auszeichnung.

Die Verwendung von Signalfarben

Besondere Vorsicht ist bei der Auszeichnung mit Signalfarben geboten. Problematisch ist hier vor allem das gesättigte Rot. Signalfarben leiten die Wahrnehmung stark. Sie eignen sich damit gut, die Aufmerksamkeit auf ein problematisches Element zu ziehen oder um eine Fehlermeldung mit dem Hinweis auszuzeichnen, dass etwas potenziell Gravierendes passiert ist, das eine Reaktion erfordert. Sie eignen sich auch gut, um ein Objekt möglichst auffällig zu gestalten.

Die Zeichen dieser Abbildung sind sehr auffällig gestaltet. Sie ziehen deshalb die Aufmerksamkeit auf sich. Das ist gerechtfertigt, wenn sie in Situationen eingesetzt werden, in denen die Aufmerksamkeit von der momentanen Handlung auf eine andere Situation gerichtet werden soll. Die Objekte erfüllen dann die Forderung nach Attentionalität.

Im Umkehrschluss heißt das, dass Signalfarben nicht eingesetzt werden sollten, wenn es nicht notwendig ist, Aufmerksamkeit zu erzeugen oder auf ein Element explizit hinzuweisen, denn dann entsteht eine unnötige Ablenkung und die Forderung nach Ablenkungsfreiheit ist verletzt.

Die aufgestellten Forderungen nach Attentionalität und Ablenkungsfreiheit wirken so, als wären sie absolut unvereinbar, legt doch Attentionalität nahe, Gestaltungsmittel zu nutzen, um die Aufmerksamkeit auf etwas zu ziehen, und Ablenkungsfreiheit, genau diese Gestaltungsmittel zu vermeiden, um nicht abzulenken. Hier einen unlösbaren Konflikt zu vermuten, ist jedoch ein Trugschluss, denn nicht jede erregte Aufmerksamkeit ist eine unerwünschte Ablenkung. Auf ein Problem beim Speichern oder eine Inkonsistenz in den Daten hinzuweisen, ist keine Ablenkung im Sinne unserer Forderung. Eine Aufmerksamkeitsleitung ist nur dann eine Ablenkung, wenn sie keinen Zweck erfüllt. Eine attentionale Gestaltung kann die Ablenkungsfreiheit nicht verletzen, wenn diese in der Situation nicht erforderlich ist. Andersherum kann eine Verletzung der Ablenkungsfreiheit nicht mit Attentionalität gerechtfertigt werden. Es tritt immer nur die eine oder die andere Forderung zu einem Zeitpunkt auf und Signalfarben sind nur im Fall der Attentionalität gerechtfertigt.

Leider werden Signalfarben in gutem Glauben oft in falschen Situationen eingesetzt:

Die obige Abbildung einer Version des Firefox Browsers unter Windows 7 zeigt gleich zwei problematische Elemente, von denen eins auf die Gestaltung der Software, das andere auf die Gestaltung des Betriebssystems zurückzuführen ist. Zum einen gibt es das orange Firefox-Menü innerhalb der Titelleiste. Es ist in der Umgebung aus sonst blauen Farbtönen sehr dominant und zieht die Aufmerksamkeit auf sich, obwohl das Menü in der täglichen Nutzung recht selten verwendet wird und daher keine Notwendigkeit besteht, permanent darauf hinzuweisen.

Noch problematischer – und ein typisches Beispiel, das leider auch in vielen anderen Anwendungen anzutreffen ist – ist die Gestaltung des Schließen-Knopfes des Fensters von Windows XP bis Windows 8. Welchen Grund sollte es geben, diesen Knopf rot zu gestalten und damit zu einem der auffälligsten Elemente eines jeden Fensters zu machen? Die Intention hinter der roten Einfärbung dürfte gewesen sein, mit der roten Farbe davor zu warnen, hier versehentlich zu klicken. Die Anwendung der Signalfarbe Rot ist hier aber widersinnig und fehlangewandt, denn der rote Knopf zieht die Aufmerksamkeit auf sich, wenn er eigentlich ncht genutzt werden sollte. Microsoft hat später in Windows 10 das Aussehen des Fenster-Schließens geändert. Der Knopf ist nicht mehr dauerhaft rot und damit auch nicht mehr ablenkend. Er wird erst dann rot, wenn man den Mauszeiger auf ihm ruhen lässt. Diese Gestaltungsentscheidung ist zwar nachvollziehbar, aber damit erhält der rot werdende Knopf die Bedeutung „Achtung, das Drücken könnte etwas potenziell Gefährliches auslösen“. Die Frage ist nur: Wieso soll eine normale und gewollte Operation als problematisch ausgezeichnet werden? Ein Hinweis oder eine Aufforderung zur Bestätigung der letzten Eingabe bei etwaigem Datenverlust muss ohnehin separat ermittelt und angezeigt werden.

Diese Abbildung zeigt eine ältere Version des Datenbankverwaltungs-Tools phpMyAdmin. Hier gibt es genau die gleiche Unsinnigkeit. Die Funktion „Drop“, also das Löschen einer Tabelle, ist mit einem auffällig roten Icon versehen. Man schaut unweigerlich dort hin. Warum? Um zu wissen, dass man genau das jetzt nicht tun sollte?

Eine rote Färbung ist nicht dazu geeignet, eine Warnung vor der Nutzung zu sein. Rote Elemente im Auto (Schalter für Warnblinklicht), an Anlagen (Not-Aus) oder im Zug (Notbremse) sind nicht rot, damit man davor gewarnt ist, sie nicht zu nutzen, sondern damit man sie, wenn man sie mal nutzen muss, nicht erst lange suchen muss. Es will uns aber kein sinnvoller Grund einfallen, ein Fenster im Notfall schnell zu schließen oder eine Tabelle im Notfall schnell zu löschen. Sollten Sie dafür in Ihrer Software doch einen triftigen Grund haben, können Sie ein rotes Element verwenden, sonst bitte nicht, denn Sie erreichen damit nicht den gewünschten Effekt.

Objekte im Ensemble gestalten!

Wir werden in den folgenden Kapiteln noch öfter darauf zu sprechen kommen, dass Objekte im Zusammenhang zu betrachten sind. Icons beispielsweise müssen immer im Ensemble betrachtet werden, denn nur so kann sichergestellt werden, dass sie hinreichend ähnlich gestaltet sind und somit nicht ein Icon aus den anderen heraussticht (siehe Kapitel Icon-Gestaltung). Auch Forderungen wie Robustheit in der Gestaltung können nicht mit Blick auf jeweils einzelne Objekte umgesetzt werden. Die Notwendigkeit, einzelne Objekte nicht isoliert zu entwerfen, betrifft fast alle Aspekte der Gestaltung.

Verfügt eine Maske beispielsweise über mehrere Buttons, so sollten diese Buttons möglichst gleichartig gestaltet werden. Eine unbegründete Abweichung im Design wird zu einer unbegründeten Auszeichnung eines einzelnen Objekts und führt damit zu erzwungener Sequenzialität, denn sie zieht die Aufmerksamkeit unnötigerweise auf sich, sei es durch die schiere optische Auffälligkeit oder dadurch, dass über den Grund des Unterschieds nachgedacht wird. Auch wenn ein Objekt explizit ausgezeichnet werden soll, müssen die anderen Objekte betrachtet werden, denn nur dann kann die Gestaltung ja bewusst abweichend sein. Wollen wir eine farbliche Auszeichnung festlegen, müssen die Farben der nicht ausgezeichneten Objekte betrachtet werden, um sicherstellen zu können, dass auch bei jeder Kombination ein Unterschied schnell und sicher erkennbar ist.

Gerade beim Einsatz von Farben zur Auszeichnung und zur plastischen Gestaltung von Bildschirmumgebungen gilt es, einige Fallstricke zu vermeiden. Allzu leicht entstehen ungewollte Ablenkungen oder die Erkennbarkeit leidet.

Maßvoller Einsatz von Farbe

Schon die Hinweise zum Einsatz von Signalfarben legen nahe, dass bei der Farbwahl generell Maßhalten angebracht ist. Der Einsatz von Signalfarben sollte eine Ausnahme sein, auch wenn sie nicht das einzige Problem für die Farbwahl am Bildschirm sind. Das Problem einer zurückhaltenden Gestaltung lässt sich bei der Farbgestaltung mit dem Slogan „Farblich, aber nicht bunt!“ charakterisieren. Um Ablenkungen zu vermeiden, gilt es Maß zu halten und vor allem die Anzahl gesättigter Farben auf ein Minimum zu reduzieren. Vor allem bei der Verwendung stark gesättigter Farben kommt es zu physischen Belastungen des Auges (etwa durch den starken Effekt der chromatischen Aberration). Es gilt also, Objekte am Bildschirm nicht auf gut Glück einzufärben, sondern sich eine abgestimmte Farbpalette zu erstellen.

Zum Erzeugen einer Farbpalette braucht es Wissen über das HSB/HSV-Farbmodell, das wir in Kapitel Farbmodelle behandeln! Die folgende Anleitung kann zum Erstellen von Paletten eine gute Leitlinie sein.

Bestimmen Sie einen Grundfarbton für Ihre Anwendung. Die Farbpalette, die Sie nun erzeugen, enthält zunächst einmal Abstufungen dieses Farbtons in verschiedenen Helligkeits- und Sättigungsstufen. Beachten Sie: Zu dieser Palette gehören auch immer alle Abstufungen von Grau (Sättigung 0), sodass sich schon jetzt eine auf Grau basierende Nutzungsschnittstelle mit der von Ihnen ausgesuchten Farbe als Auszeichnungsfarbe realisieren ließe.

Entfernen Sie nun aus der Palette Farben mit hoher Helligkeit oder hoher Sättigung. In HSB bedeutet das, dass Sie keine Sättigung über 50 % wählen sollten.

Als Resultat bleiben Farben wie die folgenden übrig:

Wird eine weitere kräftigere Auszeichnungsfarbe (innerhalb der obigen Schranken) gebraucht, wählen Sie einen Farbwinkel zwischen der Grundfarbe und der Auszeichnungsfarbe von nicht mehr als 45 Grad. Die so entstehende Farbe ist hinreichend abweichend, um erkennbar zu sein, aber noch ähnlich genug, um nicht zu sehr abzulenken.

Fügen Sie auffällige Auszeichnungsfarben mit höherer Sättigung nur dann hinzu, wenn es einen guten Grund dafür gibt. Dieser ist dann gegeben, wenn es notwendig ist, Objekte so auszuzeichnen, dass sie die Aufmerksamkeit stark auf sich lenken. Wenn möglich, verwenden Sie diese Auszeichnungsfarben nur auf kleinen Flächen, um einen zu bunten Gesamteindruck und damit ungewollte Ablenkungen zu vermeiden.

Wenn es einen Grund dafür gibt, eine Vielzahl von Farben in der Nutzungsschnittstelle zu verwenden, zum Beispiel wenn sie für eine farbliche Codierung genutzt werden sollen, beschränken Sie sich auf Pastelltöne für den Hintergrund (etwa V bzw. B > 65 % in HSV/HSB) und/oder gedeckte, dunkle Töne für den Vordergrund (etwa V < 30 %).

Farbfehlsichtigkeit beachten!

Beim Einsatz zu vieler oder zu greller Farben werden unsere Forderungen nach Einfachheit und Ablenkungsfreiheit verletzt. Die Forderung nach Unterscheidbarkeit hingegen wird dann ein Problem, wenn eine Unterscheidung durch farbliche Auszeichnung nicht erkannt werden kann. Um bei farblicher Codierung eine Unterscheidbarkeit zu gewährleisten, muss ein hinreichend großer Sättigungs- oder Farbtonkontrast gewählt werden. Nicht alle Menschen können Farben gleichermaßen gut wahrnehmen. Vollständige Farbenblindheit ist selten. Weitaus häufiger sind Farbschwächen, vor allem die Rot-Grün-Schwäche. Etwa 9 % aller Männer leiden darunter. Aus genetischen Gründen sind Frauen erheblich weniger davon betroffen.

Die Ishihara-Tafeln von 1917, von denen unten nur eine kleine Auswahl abgebildet ist, werden noch heute genutzt, um Farbsehschwächen zu diagnostizieren. Die Tafeln sind geschickt ausgetüftelt, sodass mit ihnen festgestellt werden kann, unter welcher Art von Farbfehlsicht man leidet. Beachten Sie, dass es häufig beim Einscannen oder bei der Wiedergabe am Bildschirm zu Farbverschiebungen kommen kann. Wenn Sie also auf der Abbildung oben etwas nicht erkennen können oder etwas anderes erkennen, als Sie erkennen sollten, kann es sein, dass nicht Sie eine Farbschwäche haben, sondern dass das Medium, das Sie benutzen, über keine optimale Farbdarstellung verfügt. Wenn die Wiedergabe korrekt ist und wenn Sie keine Farbfehlsicht haben, sollten Sie hier auf allen Karten, bis auf einer, Zahlen lesen können: 45, 2, -, 42, 74, 97, 6, 3. Bei verschiedenen Farbwahrnehmungsproblemen sehen Betrachter teilweise nichts auf den Karten, erkennen andere Zahlen als die oben angegebenen oder erkennen auf der dritten Karte eine Zahl, die Menschen mit normaler Farbsicht nicht erkennen können.

Farbfehlsichtigkeit stellt in Bezug auf die Gestaltung von Nutzungsschnittstellen meist kein Problem dar. Die Wahrnehmung von Helligkeits- und Sättigungsabstufungen zur Erzeugung eines plastischen Eindrucks zur Vermittlung von Objektverdeckungen ist zum Beispiel davon nicht betroffen. Problematisch wird es, wenn ausschließlich Farben zur Kodierung von Informationen und zur Auszeichnung verwendet werden. Wenn Sie beispielsweise eine Software zur Steuerung einer technischen Anlage konstruieren und diese Software einen Statusbildschirm hat, auf dem die Messwerte vieler Sensoren eingezeichnet sind, kann es naheliegend sein, diese Messwerte grün anzuzeigen, wenn sie in den Spezifikationen liegen, und rot, wenn es eine besorgniserregende Abweichung gibt. Selbst wenn Sie hier voll gesättigte Farben nehmen, die auch Menschen mit Rot-Grün-Schwäche unterscheiden können, mangelt es für diese Personen am Farbkontrast. Sie können bei genauem Hinsehen zwar feststellen, dass der eine Wert rot dargestellt ist, der andere grün, aber im großen Überblick hebt sich für sie der rote Wert nicht von den anderen ab. Bei kritischen Prozessen stellt dies ein erhebliches Sicherheitsrisiko dar.

Verwenden Sie also nie ausschließlich Farbe zur Auszeichnung. Bei der Anlagensteuerung könnten die betroffenen Werte zum Beispiel zusätzlich fett dargestellt werden oder gar blinken. Nutzer mit Rot-Grün-Schwäche und anderen Farbschwächen können auch durch die Möglichkeit der Verwendung verschiedener Farbschemata unterstützt werden. So könnten Nutzer die Software auf die Unterscheidung etwa in Blau und Orange umstellen, falls das für sie besser unterscheidbar ist.

Typographie

Wenn wir in diesem Buch von Nutzungsschnittstellen sprechen, meinen wir „grafische Nutzungsschnittstellen“. Dieser Begriff wurde eingeführt, um sich von auf Textzeichen basierenden Nutzungsschnittstellen abzusetzen. Doch auch die grafischen Nutzungsschnittstellen enthalten zu einem großen Teil Text. Fast schon als ironisch zu bezeichnen ist die Tatsache, dass der Textgestaltung bei grafischen Nutzungsschnittstellen viel mehr Bedeutung zukommt als in textbasierten Systemen. Bei einer textuellen Schnittstelle ist das Aussehen des Textes eine Frage der Hardware oder bestenfalls des Betriebssystems. Der Gestaltungsspielraum ist auf die Auswahl von Textfarben oder den Einsatz eines dynamischen Features wie dem Blinken von Text beschränkt. Eine grafische Nutzungsschnittstelle bietet dagegen sehr viel mehr Gestaltungsoptionen, denn sie ermöglicht es, das Aussehen des Textes am Bildschirm zu bestimmen und schafft damit die Voraussetzung, mit diesem Aussehen auch die Funktion eines Textes im Objektarrangement am Bildschirm besser auszudrücken. Diese zusätzlichen Freiheiten bergen zugleich neue Gefahren, denn jetzt können Texte auch schwer lesbar gestaltet werden oder als Quelle für ungewollte visuelle Störungen dienen. Damit das nicht passiert, ist grundlegendes Wissen über die Gestaltung von Schrift am Bildschirm erforderlich.

Spätestens seit Johannes Gutenberg im 15. Jahrhundert den Buchdruck mit beweglichen Lettern in Europa bekannt gemacht hat, beschäftigen sich in der westlichen Welt Buchdrucker und Schriftgelehrte damit, wie gedruckte Schrift gestaltet werden soll. Das Wissen über das Schreiben mit Buchstaben, der Typographie (von griechisch τύπος (typos) = Buchstabe und γράφειν (graphein) = Schreiben), ist also über Jahrhunderte gewachsen, hat sich weiterentwickelt, wurde aktualisiert und tradiert. Im Laufe der Zeit – vom Buchdruck mit Bleilettern bis zum modernen Desktop-Publishing – haben sich sehr viele Praktiken und Konventionen herausgebildet. All diese Details zu behandeln würde für unsere Zwecke zu weit gehen, denn ein großer Teil des typographischen Wissens für den Druck eines gut lesbaren und ästhetisch anspruchsvollen Buches ist für unsere Gestaltungsaufgaben gänzlich ungeeignet.

Doch was unterscheidet Buchdruck-Typographie von Nutzungsschnittstellen-Typographie? Das Offensichtlichste ist der Unterschied im Medium: Beim Buchdruck geht es um die Gestaltung von Text, der in der Regel mit einer dunklen Tinte auf hellem Papier gedruckt wird. Die Drucktechnik erlaubt schon seit Jahrhunderten eine saubere Darstellung sehr fein strukturierter Zeichen. Am Bildschirm handelt es sich dagegen um eine Fläche aus leuchtenden Pixeln. Bis vor wenigen Jahren war die Menge dieser Pixel pro Flächeneinheit, die Pixeldichte oder Auflösung, eher gering. Text am Bildschirm war also im Vergleich zu gedrucktem Text sehr grob. Ein weiterer wichtiger Unterschied betrifft die Textlänge. Im Buchdruck liegt das Hauptaugenmerk auf der lesefreundlichen Gestaltung von langen Fließtexten. In der Nutzungsschnittstelle hingegen haben wir es oft mit kurzen Texten, manchmal mit nur einzelnen Worten oder Zeichen zu tun.

Ein letzter und sehr wichtiger Unterschied zwischen dem Design von Text für eine Nutzungsschnittstelle und der Textgestaltung im klassischen Druck hängt mit unserer Grundforderung nach Robustheit zusammen. Wenn ein Buchtext gesetzt wird – wobei es egal ist, ob es klassisch mit Bleilettern oder modern mit einer DTP-Software passiert –, liegt der komplette Text vor. Der Setzer hat die Gelegenheit, die Gestaltung jedes einzelnen Wortes, jedes einzelnen Satzes und des Textes im Ganzen zu optimieren. Bei Nutzungsschnittstellen hingegen hängt der dargestellte Text zu einem nicht geringen Teil von früheren Eingaben oder vom Zustand des Programms ab. Zum Zeitpunkt der Gestaltung ist es deshalb nicht möglich, für sämtliche Konstellationen vorherzubestimmen, welche Worte an welcher Position und in welchem Zusammenhang am Bildschirm erscheinen werden.

Diese Unterschiede sind, wie wir gleich zeigen werden, sehr bedeutsam. Sie führen dazu, dass am Bildschirm andere Entscheidungen bezüglich der Schriftwahl und der Formatierung gewählt werden müssen als auf gedrucktem Papier.

Lesen als Hypothesenbildung

Bevor wir mit konkreten Hinweisen beginnen können, wollen wir uns nochmal kurz unseren Grundlagen zuwenden und einige Konkretisierungen vornehmen. Der nachfolgende Text erschien in dieser Form in der Frankfurter Allgemeinen Zeitung ³:

FKARFNRUT, 23. Sptbemeer. Ncah enier nueen Sutide, die uetnr aerdnem von der Cmabirdge Uinertvisy dührruchgeft wrdoen sien slol, ist es eagl, in wlehcer Rehenifloge Bcuhstbaen in eneim Wrot sethen, Huaptschae, der esrte und ltzete Bcuhstbae snid an der rhcitgien Setlle. Die rsetclhien Bshcuteban kenönn ttoal druchenianedr sien, und man knan es tortzedm onhe Poreblme lseen, wiel das mneschilhce Gherin nhcit jdeen Bcuhstbaen enizlen leist, snodren das Wrot als gnazes. Mti dme Pähonemn bchesfätgein shci mherere Hhcochsluen, acuh die aerichmkianse Uivnäseritt in Ptstbigurh. Esrtmlas üebr das Tmeha gchseibren hat aebr breteis 1976 - und nun in der rgchitien Bruecihhsetnafoelngbe - Graham Rawlinson in sieenr Dsiestraiton mit dem Tetil “The Significance of Letter Position in Word Recognition” an der egnlsicehn Uitneivrsy of Ntitongahm.

Dass das Lesen derart verdrehter Texte kaum Probleme bereitet, ist verblüffend, weshalb sich auch Wissenschaftler mit diesem Phänomen beschäftigt haben. Dreißig Jahre nach der im Text erwähnten Arbeit von Rawlinson⁴ hat der amerikanische Psychologe Keith Rayner⁵ 2006 herausgefunden, dass Wörter mit verdrehten Buchstaben zwar langsamer gelesen, aber meist gut verstanden werden. Wie gut das im Einzelfall funktioniert, hängt vom Vertauschungsgrad, von der Bekanntheit der Worte und von der Stabilität des ersten und des letzten Buchstabens ab.

Offensichtlich gelingt es uns, ein Wort zu lesen, das an dieser Stelle nicht steht. Für diesen Sachverhalt liefert der von uns im Grundlagenkapitel vorgestellte Hypothesengenerator nach Gregory zusammen mit den ebenfalls dort beschriebenen Merkmalen der menschlichen Wahrnehmung eine plausible Grundlage: Die Bandbreite an Informationen, die über die Sensoren, in diesem Fall das Auge, in den Wahrnehmungsapparat gelangen können, ist sehr begrenzt. Um effektiv wahrnehmen zu können, muss eine Selektion erfolgen, indem unser Wahrnehmungssystem auf der Grundlage des Gesehenen und früherer Erfahrungen Hypothesen darüber aufstellt, welche Reize für das Erkennen maßgeblich sind. Bestätigen sich die jeweils aufgestellten Hypothesen, verdeutlicht dies, dass die ausgeblendeten Informationen nicht erforderlich sind. Wir gewinnen Schnelligkeit durch Informationsverlust.

Beim Lesen verhält es sich ebenso: Ein erfahrener Lesender nimmt nur einzelne Punkte eines Textes wahr und bildet unter Zuhilfenahme früherer Erfahrungen Hypothesen darüber, was dort stehen könnte. Nur wenn sich keine Hypothese bilden lässt oder wenn die Hypothese sich im Leseverlauf als falsch erweisen sollte, ist es nötig, sich die ausgelassenen Textbestandteile genauer anzusehen. Wenn wir das obige Textbeispiel halbwegs flüssig lesen können, sind die Hypothesen unseres Wahrnehmungssystems korrekt, obwohl die gelesenen Worte faktisch falsch (geschrieben) sind.

Diese Abbildung zeigt die Augenbewegung eines Kindes einer vierten Klasse beim Lesen eines anspruchsvollen Textes⁶. Man erkennt gut, dass der Text nicht Buchstabe für Buchstabe, sondern in viel gröberen Zügen erschlossen wird. Die roten Punkte stellen die Fixationen dar. Fixationen nehmen 90 % der Lesezeit ein. Während einer Fixation verweilt der Blick des Lesers auf einer Stelle und das grobe Wortbild wird wahrgenommen. Dieses grobe Bild bildet zusammen mit dem bisher Gelesenen und dem Wissen des Lesers die Grundlage für eine Hypothese über das, was dort geschrieben ist. Die Linien von Fixation zu Fixation sind Sakkadenbewegungen, also schnelle, ruckartige Bewegungen des Auges zum nächsten Fixationspunkt. Zwar erfolgen diese Bewegungen ohne bewusste Steuerung, doch sind sie nicht willkürlich, sondern folgen ebenfalls einer Erfahrung, einer Hypothese des Wahrnehmungssystems, nämlich dass sich der Text bis zum Zeilenende fortsetzt und am Anfang der nächsten Zeile weitergeht.

Es kommt vor, dass bei einer Fixation keine Hypothese gebildet werden kann, das Wortbild also im Kontext nicht erkannt werden kann. Auch kann sich eine Hypothese beim weiteren Lesen als falsch erweisen. Wenn dies passiert, entsteht ein zusätzlicher Aufwand, weil ein Wort in kleineren Schritten erschlossen werden muss oder weil ein Rücksprung zu einer bereits gelesenen Stelle erforderlich ist. Es kommt zu Regressionen, also Sakkadenbewegungen entgegen der Leserichtung. Dies ist etwa in der dritten Zeile der Abbildung zu sehen. Das für das Kind ungewohnte Wort „Korkgewebe“ ist von ihm recht mühselig in insgesamt acht Fixationen in zwei Lesedurchgängen erschlossen worden.

Um einen gut lesbaren Text am Bildschirm zu erzeugen, gilt es eine Vielzahl von Aspekten der Schriftgestaltung zu beachten. Es reicht nicht aus, lediglich gut lesbare Einzelbuchstaben zu gestalten. Zu bedenken und zu beachten ist vielmehr auch die Eignung einer Schriftart, ein prägnantes Wortbild zu bilden, um gute Hypothesen über das gelesene Wort aufstellen zu können. Ebenso wichtig ist die Gestaltung eines Schriftzugs auf eine Art und Weise, die das Auge beim Folgen einer Zeile und beim Finden des Zeilenanfangs unterstützen kann.

Schriftfamilien und Schrifttypen

Schriftgestaltung für Nutzungsschnittstellen erfordert neben der Formatierung (fett, kursiv etc.) vor allem die Auswahl einer Schriftart (auch im Deutschen oft Font genannt). Das Gestalten einer eigenen Schriftart erfordert dagegen umfangreiches Wissen, ausreichend praktische Erfahrung und gestalterische Kompetenzen, weshalb wir davon abraten, ohne diese Voraussetzungen ein solches Unterfangen zu beginnen. Wir konzentrieren uns deshalb auf bereits bekannte Schriftarten.

Heutige Textverarbeitungsprogramme offerieren eine sehr große Anzahl verschiedener Schriften. Es gibt jedoch Möglichkeiten, durch die Einordnung in „Schriftartenfamilien“ Ordnung zu schaffen. Allerdings gibt es für diese Einsortierungen verschiedene Vorschläge, hinter denen unterschiedliche Interessen stecken. Die DIN 16518, das „Klassifizierungssystem für Schriftarten“ unterscheidet insgesamt elf Familien. Wir machen es für unsere Zwecke einfacher und betrachten in erster Linie nur zwei Familien, fügen eine Sonderklasse hinzu und lassen viele andere Schriftarten außen vor, weil sie für den Texteinsatz in der Nutzungsschnittstelle nicht brauchbar sind.

Zu den für uns nicht betrachteten Schriften gehören Symbolschriftarten wie Wingdings. Sie dienen nur der Darstellung von Symbolen und enthalten nicht die üblichen Buchstaben. Das Gleiche gilt für die im Webdesign verbreiteten Icon-Fonts⁷. Auch Nachbildungen menschlicher Schreibschriften sind für uns nicht brauchbar. Sie eignen sich eventuell als Überschrift für einen Text oder zum Verfassen einer Speisekarte, können in der Nutzungsschnittstelle aber nicht sinnvoll eingesetzt werden. Ebenso sind Frakturschriften, also alte deutsche Schriften, ausgeschlossen. Selbst im Druck sind sie heutzutage selten geworden. Man findet sie gelegentlich noch in Zeitungstiteln oder auf dem Schild vor dem Restaurant „Zum röhrenden Hirschen“, um einen historischen Eindruck zu erwecken. Schließlich gehören auch Zier- und Spaßschriften, die zum Beispiel die Beschriftung eines Western-Saloons oder Darstellungen aus Science-Fiction-Serien nachahmen, in die Kategorie der für Nutzungsschnittstellen ungeeigneten Schriften.

Befreit von all diesen Schriftarten, die ihre Berechtigung nur außerhalb der Nutzungsschnittstelle haben, bleiben vor allem zwei große Schriftfamilien übrig. Sie unterscheiden sich vor allem durch das Vorhandensein oder Fehlen von Serifen und durch unterschiedliche Strichstärken.

Oben zu sehen ist die Schriftart „Liberation Serif“. Es handelt sich um eine sogenannte „Serifenschrift“⁸. Wie der Name sagt, verfügt diese Schrift über sogenannte „Serifen“. Am Großbuchstaben T kann man sie gut erkennen.

Im Prinzip besteht ein großes T nur aus zwei einfachen Strichen. Verwendet man eine Serifenschrift, hängen jedoch an den Enden des Querbalkens kleine Haken und der Buchstabe als Ganzes hat, ähnlich einer Stehlampe, unten einen Fuß, auf dem er ruht. Eine zweite charakteristische Eigenschaft typischer Serifenschriften sind augenfällige Variationen in der Strichstärke. Man erkennt dies im obigen Beispiel am deutlichsten am Buchstaben x. Der Abstrich, also der Strich von links oben nach rechts unten, ist dicker als der Aufstrich von links unten nach rechts oben. Die Gestaltung mit unterschiedlichen Strichstärken lehnt sich an handgeschriebene Lettern an, bei denen eine breite Feder benutzt wird. Deshalb ist dieses Feature auch in kalligrafischen Schriften besonders prägnant.

Den Gegenpol zu den Serifenschriften bilden die serifenlosen Schriften⁹, oft „Sans-Serif-Schriften“ genannt. Zu sehen ist die Schriftart „Liberation Sans“. Betrachten wir wieder das T und das x: Beide Buchstaben bestechen durch ihre Einfachheit. Es gibt keine Serifen oder anderweitige Verzierungen an den Buchstaben. Auch unterschiedliche Strichstärken fallen nicht ins Auge. Tatsächlich gibt es sie an einigen Stellen aber doch, wenn auch in weitaus geringerem Maße. Beim Buchstaben a beispielsweise ist zu sehen, dass der „Bauch“ des Buchstabens sich zum Querstrich hin wieder verjüngt.

Der Typograph Hans-Peter Willberg¹⁰ stellt eine recht einfache Matrix für Schriften auf, in der er neben den Serifenschriften und den serifenlosen Schriften aber noch einige Zwischenklassen wie Antiqua-Varianten mit verschiedenen Strichstärken, aber ohne Serifen und Egyptienne-Schriften mit Serifen, aber gleichen Strichstärken beschreibt. Wir beschränken uns der Einfachheit halber auf die beiden großen Schriftfamilien, denn es sind die beiden wichtigsten Schriftfamilien, die bei der Darstellung von Texten in Nutzungsschnittstellen in Frage kommen. Für spezielle Einsatzzwecke müssen wir aber noch eine Sonderklasse von Schriften einführen, die nicht ins obige Schema passt und die eine spezielle Eigenschaft aufweist.

Hier zu sehen ist die Schriftart „Liberation Mono“, eine sogenannte „Monospace-Schrift“, auf Deutsch auch „dicktengleiche Schrift“ genannt. Monospace-Schriften sind Schriftarten, bei denen jeder Buchstabe über genau die gleiche Breite verfügt. In üblichen Druckschriften ist dies nicht der Fall. Ein kleines i ist viel schmaler als ein großes M. Schreibmaschinen und frühe Textterminals verwendeten Schriftarten mit gleichbleibender Zeichenbreite. Diese Schriftarten sind heute noch in der Programmierung weit verbreitet, weil sie es erlauben, Buchstaben in ein Raster zu schreiben. Dies ermöglicht eine einfache visuelle Strukturierung von Quellcode oder das einfache Erzeugen von Bildschirmmasken durch die Verwendung von Buchstaben und Sonderzeichen. Die Gestalter von Monospace-Schriften mussten das Problem lösen, verschiedene Buchstaben so in das gleiche Raster zu schreiben, dass sie die Breite ausfüllen, ohne dass es irgendwie verzerrt aussieht und ohne dass Lücken in einem Wort entstehen. Bei der „Liberation Mono“ wird die gleiche Zeichenbreite dadurch erzeugt, dass sehr breite Buchstaben wie das W und das M leicht zusammengestaucht werden. Bei sehr schmalen Buchstaben wie dem i bedient man sich im Gegenzug üppiger, ausladender Serifen, obwohl die Schrift im Großen und Ganzen serifenlos ist.

Monospace-Schriften haben ihre Berechtigung in einigen Nischen der Nutzungsschnittstellen. Als generelle, allgemeine Schrift sollte man sie nicht verwenden. Ob man hingegen eine Schrift mit oder ohne Serifen auswählt, ist in erster Linie eine Geschmacksfrage. Serifenlose Schriften werden oft als moderner, Serifenschriften hingegen als schicker angesehen. Gerade am Bildschirm gibt es jedoch noch mehr zu beachten als nur Geschmacksunterschiede. Wir werden sehen, dass es Anforderungen gibt, die eine bestimmte Schriftwahl nahelegen. Wie so oft bei unseren Gestaltungsfragen stehen die Forderungen an die Schriftgestaltung in Konflikt zueinander. Es wird also darum gehen, unter Berücksichtigung der Rahmenbedingungen die konfligierenden Forderungen auszutarieren.

Schriften am Bildschirm

Viele der Anforderungen an die Schriftauswahl hängen mit besonderen Gegebenheiten der Darstellung von Schrift am Bildschirm zusammen, denn in diesem Fall gibt es andere Herausforderungen als in traditionellen Druckverfahren. Beim Drucken werden fein gearbeitete Bleilettern auf Papier gedrückt. Es entsteht ein sehr sauberes, klares Schriftbild. Auf Computerbildschirmen konnte man ein solches Druckbild bis vor wenigen Jahren noch nicht erzeugen. Die Auflösung der Bildschirme war zu gering, mitunter traten Unschärfen auf und sie neigten zu starken Überstrahlungen, was bedeutet, dass helle Bereiche des Bildes in dunkle Bereiche hineinstrahlten. Moderne LCD- oder OLED-Bildschirme bringen viele dieser Probleme nicht mehr mit sich. In den letzten Jahren kommen zwar vermehrt Bildschirme mit sehr hohen Auflösungen zum Einsatz, doch ist es verfrüht, wenn überhaupt je gerechtfertigt, die Anforderungen an die Schriftdarstellung auf niedrig auflösenden Bildschirmen gänzlich aus dem Blick zu verlieren, denn noch findet man solche Bildschirme häufig im Einsatz an günstigen Computern. Zudem wird es auch künftig noch Geräte geben, bei denen die Darstellung nicht im Vordergrund steht, etwa bei Steuergeräten in Industrieanlagen, die deshalb mit einfachen Anzeigeelementen ausgestattet sind. Gerade auch bei solchen Geräten sollten die ergonomischen Forderungen erfüllt sein.

Bitmap-Fonts

Bei einem klassischen Terminal oder auch einem alten MS-DOS-System hat man keinen Einfluss auf die Schriftdarstellung. Es gibt genau eine Schriftart, die in die Grafikkarte des Computers „eingebaut“ worden ist. Eine MDA-Grafikkarte von IBM aus dem Jahr 1981 verfügt im ROM über eine Bitmap von 9 x 14 Pixeln für jedes einzelne darstellbare Zeichen. Ähnlich sieht es bei den damaligen EGA- und VGA-Grafikkarten aus. Sie enthalten einen festen Schriftsatz von 8 x 16 Punkten, der im ROM der Karte gespeichert ist. Es ist jedoch bereits möglich gewesen, diese Schrift-Bitmaps per Software zu überschreiben und somit das Aussehen der Buchstaben zu verändern. Bis zum heutigen Tage besteht jedoch die Einschränkung, dass im Textmodus nur Monospace-Schriften möglich sind.

Dies ändert sich erst mit dem Aufkommen grafischer Nutzungsschnittstellen. An einem Apple Macintosh etwa sind Schriften mit variablen Buchstabenbreiten eingesetzt worden. Das Schriftbild erscheint dadurch moderner und schicker. Was sich allerdings bei den frühen grafischen Nutzungsoberflächen noch nicht geändert hat, ist die Speicherung der Schrift als Bitmap. Jeder Buchstabe ist Pixel für Pixel als Bild gespeichert. Schriftarten dieser Art werden „Raster-Fonts“ genannt. Sie haben im Kontext der damaligen Systeme wichtige Vorteile gegenüber den heute üblichen Outline-Fonts gehabt:

• Gerade bei der damals verbreiteten Ein-Bit-Darstellung, also nur weiß und schwarz, erfordert das Darstellen eines Buchstabens am Bildschirm bei Raster-Fonts nur das Kopieren der Buchstaben-Bitmap in den Grafikspeicher. Eine solche Operation ist sehr schnell und mit wenig Ressourceneinsatz verbunden.
• Die Schriftarten sind an die monochrome Ein-Bit-Darstellung und die niedrige Auflösung gut angepasst gewesen. Dies sichert trotz der technischen Einschränkungen ein klares, am Bildschirm gut lesbares Schriftbild.

Diesen Vorteilen stehen folgende Nachteile gegenüber:

• Da die Buchstaben als Pixelmatrix vorliegen, kann Text nur schwer in der Größe angepasst werden, ohne dass er bei Verkleinerung unleserlich oder bei Vergrößerung grobpixelig wird. Um die gleiche Schriftart in guter Qualität in mehreren Größen benutzen zu können, sind dafür verschiedene Schriftsätze erforderlich.
• Die Bildschirmschriftarten eignen sich mit ihrer niedrigen Auflösung nicht zum Drucken auf hochauflösenden Druckern. Will man den Bildschirmtext drucken, muss man also entweder mit einem schlechten Druckbild leben oder zu jeder Bildschirmschriftart eine alternative Druckschriftart in der Hinterhand haben.

Aktuelle Betriebssysteme mit grafischen Nutzungsschnittstellen verwenden keine Raster-Fonts, sondern Outline-Fonts. „Outline“ bedeutet, dass der Linienzug eines Buchstabens als Vektorzug der äußeren Buchstabenbegrenzung gespeichert ist. Das Aussehen eines Buchstabens auf diese Art zu speichern wiegt alle Nachteile von Rasterschriftarten auf.

• Die Schriften sind auf dem Bildschirm und im Druck verwendbar.
• Die Schriften sind beliebig skalierbar und können damit insbesondere auch sehr groß dargestellt werden.
• Die Schriften können algorithmisch manipuliert werden und so zum Beispiel automatisch fett, kursiv oder verbogen dargestellt werden. Die Ergebnisse solcher Manipulationen sind allerdings oft nicht erfreulich. Gute Schriftarten liefern deshalb Buchstaben für verschiedene Schriftstärken und einen separaten, kursiven Schriftsatz gleich mit.

Leider kehren sich auch die Vorteile der Rasterschriften ins Gegenteil um, wenn Outline-Fonts verwendet werden:

• Um zu berechnen, welche Pixel auf dem Bildschirm zur Darstellung der Schrift eingefärbt werden müssen, muss eine einigermaßen komplexe Berechnung durchgeführt werden. Auf sehr einfachen oder sehr alten Geräten steht diese Rechenleistung eventuell nicht zur Verfügung.
• Die Darstellung von Outline-Schriften ist gerade bei kleiner Größe der Darstellung und niedriger Auflösung des Bildschirms oft sehr schlecht lesbar, da die Schriftart nicht an die Bildschirmeigenschaften angepasst ist.

Anforderungen an die Schriftauswahl

Wir haben nun hinreichend vorüberlegt und vorsortiert, um, zusammen mit den Erkenntnissen des vorherigen Kapitels und vor allem des Kapitels Architektur der Wahrnehmung, uns nun den konkreten Forderungen an die Gestaltung von Schrift am Bildschirm zu widmen.

Die Grundvoraussetzung für das Erkennen von Objekten am Bildschirm ist ein hinreichender Kontrast zum Hintergrund. Wir haben dieses Thema bereits im vorherigen Kapitel im Zusammenhang mit der Erkennbarkeit behandelt. Bei der Schriftgestaltung kommt dem Kontrast jedoch nochmals eine besondere Aufmerksamkeit zu, da es sich bei Buchstaben zum einen um relativ kleine, grazile Objekte handelt und es zum anderen nicht nur darum geht, dass man Text überhaupt als Text erkennen kann, sondern dass man ihn auch lesen können muss.

Einfluss auf die Lesbarkeit von Text und damit auch auf die Erkennbarkeit und den wahrgenommenen Kontrast hat die Frage, ob Schrift in der sogenannten Positivdarstellung – Schwarz auf Weiß – oder in Negativdarstellung – Weiß auf Schwarz – dargestellt werden sollte. Gerade letztere Gestaltungsoption ist momentan mit dem Aufkommen der sogenannten „Dark Modes“ wieder in Mode gekommen.

Positiv- und Negativdarstellung

Die Praxis der Gestaltung hatte die Frage der sogenannten „Darstellungspolarität“ lange Zeit für uns beantwortet. Mit dem Übergang von Kommandozeilen-Interfaces zu grafischen Nutzungsschnittstellen und der Desktop-Metapher vollzog sich auch ein Übergang von der Negativdarstellung mit heller Schrift auf dunklem Grund zur Positivdarstellung mit dunkler Schrift auf hellem, oft weißem Grund.

Die aktuelle Mode geht wieder in die andere Richtung. Zunächst waren es Programme zur Bild- und Videobearbeitung, die eine Negativdarstellung verwendeten. Dies lässt sich auch gut begründen, denn eine dunkle Nutzungsschnittstelle drängt sich gegenüber dem zu bearbeitenden Inhalt weniger in den Vordergrund und sorgt dafür, dass die Bild- und Videoinhalte intensiv in den Vordergrund treten. Auch in der Programmierung ist die Negativdarstellung wieder eingezogen. Viele Editoren und Programmierumgebungen verwenden seit einigen Jahren eine Negativdarstellung, erlauben aber meist auch das Umschalten auf eine Positivdarstellung. Welche Wahl die richtige ist, ist in diesem Feld umstritten und offenbar eine Frage der persönlichen Präferenz. Die besseren farblichen Gestaltungsmöglichkeiten bei einer Negativdarstellung – mehr dazu weiter unten – lassen diese Wahl sinnvoll erscheinen.

Unabhängig von diesen beiden speziellen Aufgabenfeldern wird die Negativdarstellung in den letzten Jahren verstärkt beworben. Betriebssysteme beispielsweise lassen sich inzwischen in einen Dark-Mode umschalten. Eine Motivation für diesen Trend könnte auch der geringere Energieverbrauch bei mobilen Geräten sein, die zudem bei der Nutzung in dunklen Umgebungen eine weniger störende Lichtquelle verkörpern.

Auch für die Positivdarstellung lassen sich einige Nachteile finden:

• Bei der Positivdarstellung leuchtet ein großer Teil des Bildschirms. Die Umgebung des Bildschirms ist meist weniger hell beleuchtet, sodass es zu vielen Helligkeitsanpassungen des Auges kommt. Diese ständig geforderte Anpassungsleistung ist auf Dauer belastend und ermüdend.
• Die grafischen Elemente einer Nutzungsschnittstelle treten bei einer Positivdarstellung stärker in den Vordergrund als bei einer dunklen Darstellung und können dadurch von den zu bearbeitenden Inhalten ablenken. Gerade bei Anwendungen, in denen das Aussehen der zu bearbeitenden Objekte im Vordergrund steht, etwa der der Bildbearbeitung, ist das von Nachteil und sollte entsprechend vermieden werden.
• Die Darstellung von farblichem Text ist bei der Positivdarstellung stärker eingeschränkt als bei der Negativdarstellung. Im Unterkapitel Auszeichnung mit Farbe werden Sie sehen, dass es bei positiver Darstellung sehr schwer ist, Text so einzufärben, dass die Farbe einerseits gut erkennbar und andererseits unterscheidbar ist und der Text gleichzeitig lesbar bleibt.
• Es gibt bestimmte Augenerkrankungen, etwa die Eintrübung des Kammerwassers im Auge, bei denen weißer Text auf schwarzem Grund besser wahrgenommen werden kann als schwarzer Text auf weißem Grund¹¹.

Dem stehen aber auch große Nachteile der Negativdarstellung gegenüber:

• Untersuchungen¹² zeigen, dass für eine gleich gute Lesbarkeit bei Negativdarstellung ein höherer Kontrast nötig ist bzw. dass bei gleichem Kontrast die Lesbarkeit niedriger ist.
• Ein zu hoher Kontrast führt bei Negativdarstellung aber zu Problemen, da sich die Pupille aufgrund der allgemein geringen Helligkeit weiter öffnen muss. Wenn nun helle, weiße Buchstaben verwendet werden, leuchten diese so stark, dass ein Effekt entsteht, als würde man direkt in eine Lampe blicken. Wendet man den Blick ab, erscheinen einige Zeit lang Nachbilder.
• Etwa 50 % der Bevölkerung leiden unter einer mehr oder weniger starken Hornhautverkrümmung des Auges (Astigmatismus). Diese Verformung der Vorderseite des Auges sorgt dafür, dass Lichtstrahlen nicht gleichmäßig auf der Retina fokussiert werden. Ist die Pupille geschlossen, fällt das Licht nur durch einen kleinen Teil der Hornhaut, der recht gleichmäßig ist. Es entsteht ein scharfes Bild auf der Retina. Ist sie jedoch in einer dunklen Umgebung geöffnet, geraten Lichtstrahlen über verschiedene Bereiche der Hornhaut ins Auge, wo sie folglich an verschiedenen Stellen fokussieren. Helle Schrift auf dunklem Untergrund wird also bei vielen Personen unscharf wahrgenommen¹³.
• Wenn die Umgebung des Bildschirms hell ist und das Auge häufig zwischen dem Bildschirm und der Umgebung hin- und herwechselt, muss es sich ständig den Helligkeitswechseln anpassen. Diese dauerhaft erforderliche Adaption ist eine Belastung für die Augen.

Ziehen wir aus der Abwägung dieser Nachteile die Konsequenzen: In der Regel werden Computersysteme in Büros, zu Hause und auf der Straße eher in hellen Umgebungen verwendet. Nimmt man die Nachteile der Negativdarstellung bei Hornhautverkrümmung hinzu, dürfte in den meisten Fällen die Positivdarstellung nach wie vor die bessere Darstellungsform sein. Negativdarstellung hat allerdings in den genannten Anwendungsfällen und bei der Verwendung in dunklen Umgebungen ihre Vorteile. Unabhängig davon sollte es möglich sein, bei einer standardmäßig voreingestellten Negativdarstellung in die Positivdarstellung umzuschalten.

Helligkeitskontrast

Egal, ob bei Positiv- oder bei Negativdarstellung: Der höchste Kontrast wird bei der Verwendung von Schwarz und Weiß erzielt. Auch wenn man nicht in die Extreme gehen muss, ist ein hoher Helligkeitskontrast zwischen Schrift und Hintergrund erforderlich. Eine Kombination von Dunkelblau und einer nur schwach gesättigten, hellen Hintergrundfarbe funktioniert zum Beispiel auch gut. Um die unangenehmen Nachbilder zu vermeiden, ist bei Negativdarstellung unbedingt darauf zu achten, dass die Darstellung entweder hardware- oder softwareseitig abgedunkelt werden kann. Bei der Positivdarstellung gibt es dieses Problem in der Regel nicht, denn das Auge sorgt selbst aufgrund der großen Helligkeit für die nötige Abdunkelung durch das Schließen der Pupille und die Hemmung der Zapfen.

In Gestaltungshinweisen für die Farbgestaltung im Druckbereich wird empfohlen, möglichst keinen rein weißen Hintergrund zu verwenden. Neben ästhetischen Gründen hat dies auch einen ergonomischen Grund. Wenn man bei Sonnenlicht einen weißen Zettel anschaut, wirkt das helle Weiß sehr grell und kann regelrecht blenden. Ein Ausdruck auf grauem Papier oder auch auf Recycling-Papier wirkt da viel angenehmer. Trotzdem ist die Empfehlung nicht auf den Bildschirm zu übertragen, denn am Bildschirm sieht die Sache anders aus. Er ist die Lichtquelle, nicht die Reflexion einer anderen Lichtquelle wie beim Blatt Papier. Ob ein Bildschirm blendet, liegt also nicht an der Umgebungshelligkeit, sondern an seinen Helligkeitseinstellungen. Umgekehrt leidet der Bildschirmkontrast bei hoher Umgebungshelligkeit. Das ist auch der Grund, warum bei hellem Sonnenschein das Display eines Smartphone kaum noch abzulesen ist, während es bei gleichen Einstellungen in einem dunkleren Raum problemlos erkennbar ist.

Anders ausgedrückt: Bei Druckwerken entscheidet die Wahl von Vordergrund- und Hintergrundfarbe über den wahrgenommenen Kontrast. Ändert sich die Umgebungsbeleuchtung, ändern sich zwar die absoluten Helligkeiten, aber der Kontrast zwischen Buchstabe und Papier bleibt immer gleich. Beim Bildschirm und viel mehr noch bei einer Projektion hängt er zu einem großen Teil von den Umgebungsbedingungen ab. Unsere Empfehlung lautet daher, den maximalen Kontrast anzubieten, um auch bei widrigen und ständig wechselnden Umständen eine möglichst ergonomische Gestaltung anzubieten.

Schriftgrößen

Gerade im Webdesign lässt sich beobachten, dass auch Schriftgrößen nicht durchgängig nach ergonomischen Kriterien festgelegt werden. Mal werden winzige Schriften verwendet, ein andermal besteht eine Tendenz zu sehr großen Textzügen. Die Gestaltung lesbarer Schriftgrößen ist indes keine Frage der Ästhetik oder des persönlichen Geschmacks, sondern sollte sich vor allem an den Gegebenheiten des menschlichen Auges orientieren. Zu kleine Schriften sind schlecht zu lesen, doch auch eine zu große Schrift beeinträchtigt die Lesbarkeit, denn dann ist es nicht mehr möglich, ein komplettes Wortbild zu erfassen. Schlimmstenfalls muss ein einzelner Buchstabe mit mehreren Fixationen erfasst werden.

Schriften bei gleicher Schriftgrößenangabe erscheinen nicht notwendigerweise gleich groß. In obiger Darstellung sind alle Buchstaben in der gleichen nominellen Schriftgröße, aber in verschiedenen Schriftarten gesetzt. Gerade am Beispiel des kleinen a sieht man gut, dass sich die tatsächlichen Schriftgrößen stark unterscheiden. Gegen ein a in „Arial“ wirkt der gleiche Buchstabe in „Baskerville“ regelrecht winzig. Wie kann das sein? Was beschreibt die angegebene Schriftgröße überhaupt?

Schriftgrößenangaben kommen aus dem Druckbereich. Sie beschreiben leider nicht die Höhe des sichtbaren Buchstabens, der Schriftbildhöhe, sondern die Höhe des Bleikegels, auf dem der Buchstabe aufgebracht ist. Wie Sie in der Abbildung sehen, enthält diese Kegelgröße auch das sogenannte „Fleisch“ oberhalb und unterhalb des sichtbaren Buchstabens. Verschiedene Schriften unterscheiden sich in den Proportionen. Bei der oben abgebildeten „Baskerville“ etwa liegt die Mittellänge, also die obere Begrenzung der kleinen Buchstaben viel tiefer, als dies etwa bei „Arial“ der Fall ist. Daher wirkt gerade das kleine a so winzig, während das T nicht viel kleiner ist als bei anderen Schriftarten. Wir müssen diese Ungleichheiten bei der Gestaltung mitbedenken. Als Daumenregel können wir uns merken, dass serifenlose Schriften in aller Regel größer erscheinen als Serifenschriften.

Bezüglich der Frage, ob eine Schriftgröße angemessen ist, kommt es nicht auf die absolute Größe der Buchstaben auf Papier oder auf dem Bildschirm an. Buchstaben auf einem Autobahnschild haben eine andere Größe als auf einem Plakat für eine Litfaßsäule oder auf einem Flugblatt. Die Größe dieser Buchstaben ist auf die Entfernung abgestimmt, aus der die Schilder betrachtet werden¹⁴.

Diese Darstellung aus den Design-Guidelines für Windows verdeutlicht, dass verschiedene absolute Darstellungsgrößen für entsprechend unterschiedliche Abstände gleich groß erscheinen. Viele technische Geräte werden typischerweise von verschiedenen Abständen aus betrachtet. Ein Mobiltelefon wird näher am Auge positioniert als ein Computermonitor. Der Abstand zu einem Fernseher ist wiederum größer und eine Leinwandprojekion wird angemessen aus noch größeren Abständen betrachtet. Während sich die absoluten Größen stark unterscheiden, ist der Winkel zwischen den Oberkanten und Unterkanten der Buchstaben zum Auge, der sogenannte Sehwinkel, stets konstant. Durch die Angabe dieses Winkels kann man also Hinweise zu optimalen Schriftgrößen unabhängig vom Abstand und der tatsächlichen Ausgabegröße angeben.

Solche Hinweise zur Schriftgröße finden sich zum Beispiel in der Norm ISO 9241. Die Schriftgröße sollte demnach mindestens einem Sehwinkel von 0,3 Grad, besser aber 0,5 Grad entsprechen. Mehr als 5 Grad sollten die Buchstaben nicht hoch sein. Zur Veranschaulichung helfen folgende Richtwerte: 0,5 Grad entspricht etwa der Größe des Mondes am Himmel. Die Breite des Daumens bei ausgestrecktem Arm entspricht etwa 2 Grad. So praktisch die Angabe von Schriftgrößen in Gradangaben auch sein mögen, für Sie ist sie in der Praxis wenig hilfreich, denn man kann bei handelsüblichen Computersystemen Schriftgrößen nicht in Grad angeben. In der Praxis sind verschiedene, eigentlich absolute Maße verbreitet, die aber heute nicht mehr absolut interpretiert werden. Die Schriftgrößen in Textverarbeitungssystemen wie Word sind sogenannte DTP-Punkte (DTP für Desktop Publishing). Ein solcher Punkt, der üblicherweise mit „pt“ abgekürzt wird, misst genau 1/72 Zoll, was 0,3528 Millimetern entspricht. Ein solcher Punkt hat eine feste Größe und ist damit grundsätzlich anders als ein Pixel, denn die Größe eines Pixels ist abhängig von der absoluten Auflösung eines Bildschirms. Bei einem niedrigauflösenden Bildschirm ist ein Pixel sehr groß, bei einem hochauflösenden Bildschirm hingegen klein.

Die vorstehende Abbildung zeigt, wie der links abgebildete Kreis an einem Bildschirm „aufgelöst“ wird. Im ersten Fall (mittleres Bild) ist die Auflösung sehr gering, der Kreis wird mit nur 4 x 4 Pixeln dargestellt. Die Auflösung ist derart gering, dass man die runde Charakteristik des Kreises nicht erkennen kann. Rechts sehen Sie den gleichen Kreis in einer viermal so hohen Auflösung von 8 x 8 Pixeln. Diese Auflösung ist schon viel besser geeignet, um den Kreis darzustellen. Ein Verringern oder Erhöhen der Auflösung ändert nichts an der dargestellten Größe der Elemente. Es befinden sich aber auf der gleichen Fläche mehr Pixel, sodass das Dargestellte feiner und genauer abgebildet werden kann. Die Auflösung wird in Pixel pro Zoll (abgekürzt PPI, manchmal auch DPI) angegeben.

Um Größen unabhängig von der Auflösung angeben zu können, haben sich neue Einheiten etabliert. Leider sind diese in verschiedenen Gestaltungsbereichen und unter verschiedenen Betriebssystemherstellern noch nicht einheitlich. Betrachten wir diese Einheiten am Beispiel einer typischen Schriftgrößenangabe:

Die Angabe 12 pt ist eine für traditionelle Druckerzeugnisse passende Schriftgröße. Gibt man 12 pt im CSS für eine Web-Anwendung an, rechnet der Browser pt in px im Verhältnis 3:4 um.

12 pt = 16 px

Die Einheit px steht für Pixel. Sie entspricht aber nur dann einem Pixel, wenn der Bildschirm eine Auflösung von 96 ppi hat, also ein für heutige Verhältnisse niedrig auflösender Monitor ist. Verwendet man einen höher auflösenden Bildschirm, werden diese px so in tatsächliche Pixel umgerechnet, dass letztlich ein gleich großer Buchstabe dargestellt wird. px ist dadurch zu einer auflösungsabhängigen Größe geworden. Es wird daher von einem „CSS-Pixel“ gesprochen. Microsoft verwendet die gleiche Umrechnung, nennt die Größeneinheit aber Device-Independent Pixel (DIP)¹⁵. Android verwendet eine ähnliche, relative Pixelgrößenangabe Density-Independent Pixels¹⁶. Im Gegensatz zu CSS besteht in diesem Fall die Gleichheit von logischen und physikalischen Pixeln bei 160 ppi.

1 dp = 1 Pixel bei 160 ppi

Zusammengefasst: 12 pt = 26,67 dp = 16 px = 16 DIP = 4,233 mm

Was bedeutet das für uns? Es ist in Sachen Einheiten alles verworren und kompliziert geworden, doch Scaler sorgen dafür, dass unser Gestaltungsalltag erleichtert wird. Größenangaben in pt, px, DIP und dp sind auflösungsabhängige Einheiten, die sich zwar teilweise auf Pixel beziehen, aber damit nur auf ihre Größe auf einem Referenzmonitor Bezug nehmen.

Auflösungskonforme Schriftwahl

Wenn es also darum geht, wie groß etwas dargestellt wird, brauchen wir die Auflösung eines Bildschirms in der Regel nicht mehr betrachten. Sie hat dagegen großen Einfluss darauf, welche Schriftart gut dargestellt und damit gut gelesen werden kann. Problematisch bei niedrigen Auflösungen sind vor allem Strukturen, die nicht rein senkrecht oder waagerecht verlaufen. Es entsteht dann ein sichtbarer Treppeneffekt, wie er bei der obigen Abbildung des Kreises bereits zu beobachten war. Speziell in der Auflösung 8 x 8 sieht man starke Stufen. Buchstaben mit feinen Strukturen, die kleiner sind als das Pixelraster, sind deshalb bei der Textdarstellung problematisch. Sie sind nicht ordentlich darstellbar und machen die Schrift unleserlich.

Oben ist eine vergrößerte Darstellung der Schriftarten „Times New Roman“ und „Arial“ unter Windows 95 in verschiedenen Schriftgrößen zu sehen. Das Schriftbild ist aufgrund der niedrigen Auflösung sehr unruhig. Vor allem bei „Times New Roman“ in den kleinen Schriftgrößen 5, 6 und 7 erscheint schnell ein regelrechter Pixel-Brei, der nicht mehr lesbar ist, aber auch die Schriftgrößen 8 und 9 haben kein sauberes Schriftbild. Die Darstellung der Schriftart „Arial“ (rechts) ist hingegen viel klarer, auch bei relativ kleinen Schriftgrößen. Auf der Abbildung unten rechts zu sehen ist, dass das Problem der schlecht lesbaren Schrift bei niedriger Auflösung sich nochmals verstärkt, wenn eine kursive Darstellung gewählt wird.

Die problematischen Schriftdarstellungen oben sind unter Windows 95 erzeugt worden. Windows 95 ist seinerzeit meist mit Grafikkarten verwendet worden, die nur 256 oder gar nur 16 Farben gleichzeitig darstellen können. Mit der allgemeinen Verfügbarkeit von Grafikkarten mit „True-Color“-Darstellung ist es möglich, der Treppenbildung in der Schriftdarstellung durch Glättung, dem sogenannten „Anti-Aliasing“, zu begegnen. Einfache Anti-Aliasing-Lösungen vermeiden zwar Treppeneffekte, sorgen aber für ein unscharfes Schriftbild.

Oben sehen Sie ein fortgeschrittenes Anti-Aliasing unter Windows XP, bei dem durch eine Vielzahl von Tricks wie „Font-Hinting“ und „Subpixel-Rendering“, deren Erläuterung an dieser Stelle zu weit führen würde, die Schrift geglättet wird, ohne dass sie zu unscharf gerät. Schriftglättungsfunktionen sind abhängig vom Betriebssystem und lassen sich somit bestenfalls systemweit konfigurieren. Auf vielen modernen Systemen mit hoher Pixeldichte, also mit hoher Auflösung, tritt das Problem der Darstellung kursiver Schriften und kleiner Strukturen von Serifenschriften ohnehin nicht mehr auf.

Wir fassen zusammen:

• Bei geringer Auflösung und ohne Anti-Aliasing (etwa bei Monochrom-Darstellung auf einfachen Steuergeräten): serifenlose Schrift verwenden, kursive Darstellungen vermeiden.
• Bei geringer Auflösung mit Anti-Aliasing-Techniken: serifenlose Schrift bevorzugen, weil sie weniger zu einer matschigen, unscharfen Darstellung neigt. Kursivdarstellungen können in Maßen eingesetzt werden, möglichst aber nicht bei kleinen Schriftgrößen.
• Hohe Auflösung: Bezüglich der Auflösungs- und Schärfeaspekte gibt es keine Einschränkungen mehr. Gerade wenn Fließtexte gestaltet werden müssen, kann deshalb ohne Probleme auch eine Serifenschrift verwendet werden.

Prägnante Worthüllen erzeugen

Zu Beginn des Kapitels haben wir darauf hingewiesen, dass Lesen ein schnelles Erkennen von Wortbildern beinhaltet. Dabei geht es nicht um die einzelnen Buchstaben, sondern um die äußere Form, den Umriss des Worts, den wir „Worthülle“ nennen. Die Prägnanz einer solchen Worthülle speist sich vor allem aus dem oberen Teil des Geschriebenen.

Die Abbildung zeigt jeweils zweimal dasselbe Wort, einmal in gemischter Schreibweise (1. Zeile) und einmal ausschließlich in Großbuchstaben (2. Zeile). Links wird in beiden Fällen die obere Hälfte der Buchstaben verdeckt, sodass nur der untere Teil sichtbar ist. Sowohl das gemischt geschriebene als auch das groß geschriebene Wort sind schwer zu lesen. Auf der rechten Seite ist wieder das gleiche Wort abgebildet, nur ist dieses Mal die untere Hälfte abgedeckt. Es fällt auf, dass im Fall der gemischten Schreibweise das Wort „Wortbild“ relativ leicht zu lesen ist. Bei der ausschließlichen Nutzung von Großbuchstaben, in der Typographie „Versalien“ genannt, ist dies nicht so einfach möglich, obwohl flächenmäßig deutlich mehr von den Buchstaben zu sehen ist. Eine Darstellung in Versalien erfordert im Durchschnitt 35 % mehr Fläche, verringert aber die Lesbarkeit um 12 %. Es empfiehlt sich daher, auf reine Großschreibung zu verzichten und stattdessen eine gemischte Groß- und Kleinschreibung zu verwenden. Auch auf Kapitälchen, also die Verwendung von größeren Versalien für die großen Buchstaben und kleineren Versalien für die kleinen Buchstaben sollte man aus demselben Grund verzichten.

Leichtere Lesbarkeit bedeutet in erster Linie, dass der Prozess des Hypothesenbildens schneller erfolgen kann, doch beinhaltet jede Einschränkung der sichtbaren Anteile, dass die Gefahr falscher Hypothesen steigt. In unserem Beispiel könnte das erkannte Wortbild auch für das Wort „Wertbild“ stehen. Nur wenn die verwendete Schrift über hinreichend Oberlängen verfügt, bei denen die Höhen von Buchstaben wie einem kleinen o und einem kleinen f oder einem großen M genügend voneinander abweichen, kann sich der Vorteil einer gemischten Groß- und Kleinschreibung voll entfalten. Dies ist bei den üblichen am Bildschirm verwendeten Schriftarten gegeben.

Wenn nötig, Schriften mit eindeutigen Zeichen wählen

In den meisten Schriftarten gibt es Buchstaben oder Sonderzeichen, die sich ähneln oder gänzlich gleichen. Beim Lesen stört das in der Regel nicht, da das einzelne Zeichen ohnehin nicht im Vordergrund steht oder sich das Zeichen im Kontext erklärt. Es gibt jedoch Situationen, bei denen die genauere Unterscheidbarkeit einzelner Zeichen und Buchstaben wichtig ist, etwa wenn Sie eine Seriennummer oder eine kryptische Artikelnummer eintippen müssen. Auch in der Programmierung ist es wichtig, denn in diesem Bereich werden vielfach Zeichenkombinationen eingegeben, bei denen eine korrekte Schreibweise unverzichtbar ist. Eine mangelhafte Unterscheidbarkeit zwischen einem O und einer 0 oder auch zwischen einer l und einem I verursacht ein erhebliches Maß an erzwungener Sequenzialität, um Mehrdeutigkeiten aufzulösen und mögliche Fehler zu reduzieren.

Hier sind verbreitete Schriftarten abgebildet, die in dieser Hinsicht problematisch sind. Zu sehen ist jeweils die Abfolge „Großes Ih“, „Kleines Ell“, „Eins“, „Großes Oh“ und „Null“. In „Arial“ ist ein kleines „Ell“ von einem großen „Ih“ nicht zu unterscheiden. Die auch in Programmier-Editoren verbreitete Schrift „Courier New“ hat eine sehr ähnliche Darstellung des kleinen „Ell“ und der Zahl Eins, die vor allem bei kleiner Darstellung am Bildschirm kaum zu unterscheiden sind.

Bei diesen Schriften hingegen sind die Buchstaben und Zahlen gut zu unterscheiden. In Situationen, in denen Eindeutigkeit wichtig ist, sind sie daher vorzuziehen. Doch auch wenn ein O und eine 0 verschieden gestaltet sind, kann es in der Nutzung zu Problemen kommen, wenn die Zeichen nicht gleichzeitig zu sehen sind. Je feiner die Unterschiede, desto größer ist die Verwechslungsgefahr. Je mehr die Identität eines Zeichens nicht über den unmittelbaren Lesekontext bestimmbar ist, desto prägnanter sollten sich die verwendeten Zeichen unterscheiden, wenn eine sichere Erkennung entscheidend ist. Dazu ist die Konvention entwickelt worden, eine 0 mit einem zusätzlichen Schrägstrich zu versehen.

Ausrichtungen an Zeilen und Spalten

Nicht nur die Schriftwahl hat Einfluss auf die Lesbarkeit eines Textes. Ähnlich groß ist der Einfluss der Textausrichtung. Wichtig ist vor allem die linksbündige Ausrichtung. Sie hilft beim Lesen den Anfang der nächsten Zeile routiniert aufzufinden. Vor allem bei längeren Texten kann auch der rechte Rand ausgerichtet werden. Dann ist der Text im Blocksatz gesetzt.

Um diesen Blocksatz zu erzeugen, werden die Abstände zwischen den Worten und in geringerem Maße auch die Abstände zwischen den Buchstaben innerhalb der Worte vergrößert. Das funktioniert gut, wenn die einzelnen Zeilen nahezu die maximale Zeichenzahl enthalten. Bei kleinen Zeilenlängen und in Texten mit vielen langen Worten oder wenn eine Silbentrennung nicht möglich ist, kann es zu unterbesetzten Zeilen kommen. Die Folge ist eine Textdarstellung mit Löchern. Ein löchriger Text ist schlechter lesbar, denn Zwischenräume bzw. Abstände sind, wie wir im Abschnitt Anordnung noch zeigen, das wichtigste Mittel, Nicht-Zusammenhängendes voneinander abzusetzen. Die gespreizten Texte bringen durch die unnatürlichen und willkürlichen Abstände den Wahrnehmungsapparat gewissermaßen ins Stolpern und lenken dadurch von der eigentlichen Aufgabe ab.

Gestalten Sie also robust! Da bei der Wahl der Gestaltungsmittel für Text der eigentliche Textinhalt noch nicht durchgängig bekannt ist und auch nicht immer festgelegt werden kann, wie lang eine Zeile letztlich wird, empfiehlt es sich, auf Blocksatz zu verzichten und stattdessen linksbündigen Flattersatz zu verwenden.

Achtung: Auch wenn User Interface Builder, Stylesheet-Vorgaben oder auch Textverarbeitungs- und Präsentationsprogramme es ermöglichen, laufenden Text zentriert in eine Zeile zu setzen, gibt es dafür letztlich nur einen Einsatzzweck: die Darstellung eines Gedichts. Das ist aber eine kulturelle Konvention und nicht ergonomisch begründet. Eine aus ästhetischen Gründen gewählte Symmetrie läuft der Lese-Ergonomie entgegen. Die Folgezeile beginnt jeweils an einer anderer Stelle und es fehlt eine Fluchtlinie zur Orientierung.

Wenig bis keinen Einfluss hat man in der Regel auf die vertikale Ausrichtung des Textes. Es versteht sich von selbst, dass nicht einzelne Buchstaben oder Worte aus der Zeile tanzen sollten. Solche Elemente würden den Lesefluss unterbrechen. Das automatische Ausrichten der Buchstaben auf einer Grundlinie erzeugt für das Auge eine Fluchtlinie, der es beim Lesen folgen kann. Diese Unterstützung der Zeilenführung kann durch die Schriftwahl unterstützt werden.

Bei der Verwendung von Serifenschriften erzeugen die Serifen eine gut sichtbare Grundlinie (rechts). Serifenlose Schriften erzeugen diese sichtbare Grundlinie nicht oder nur in geringerem Maße (links). Bei kurzen Texten, die nur aus wenigen Worten bestehen (zum Beispiel Feld- oder Buttonbeschriftungen), spielt diese Unterstützung nur eine sehr kleine Rolle. Wenn längere Texte zum Lesen angeboten werden, kann der Einsatz einer Schriftart mit Serifen das Lesen vereinfachen, wenn die oben erläuterten Bedingungen gegeben sind.

Zeilenhöhen und Abstände

Gerade bei der Wahl der Zeilenabstände werden beim Webdesign oft Fehler gemacht. Der Zeilenabstand ist der Abstand zwischen der Grundlinie einer Zeile und der Grundlinie der Zeile darüber oder darunter. Der entstehende Platz zwischen den Zeilen wird „Durchschuss“ genannt. Zeilenabstände werden üblicherweise als Faktor der Schrifthöhe angegeben. Zu geringer Zeilenabstand macht den Text schwerer lesbar, da beim Suchen der nächsten Zeile schnell eine falsche ausgewählt wird. Ein zu großer Abstand dagegen sorgt dafür, dass die Zeilen als unzusammenhängend empfunden werden und dadurch nicht mehr der Eindruck eines Fließtextes entsteht. Der Standardfaktor für den Zeilenabstand ist 1,2. Wenn die Zeilen länger werden, kann man den Zeilenabstand bis auf etwa 1,5 erhöhen, um das Finden der nächsten Zeile zu erleichtern. Dieser Wert von 1,5 hat übrigens nichts mit dem „anderthalbfachen Zeilenabstand“ zu tun, der gelegentlich bei Gutachten, Qualifizierungsarbeiten oder Manuskripten verlangt wird und der vor allem dem leichteren Anbringen von Anmerkungen und Korrekturen dient. In diesem Fall ist nicht ein Zeilenabstand von 1,5, sondern das 1,5-fache des normalen Abstands gemeint, also etwa ein Zeilenabstand von 1,2*1,5=1,8.

Ligaturen vermeiden

In der Typographie gibt es zur Erhöhung der Lesbarkeit eine Vielzahl kleiner Kniffe, die jedoch ausgeprägte Kompetenzen im Schriftsetzen erfordern. Wie schon mehrfach erwähnt, spielt auch hier wieder eine Rolle, dass der anzuzeigende Text nutzungsabhängig ist und sich deshalb eine robuste Gestaltung empfiehlt, bei der potenziell weniger Komplikationen auftreten können. Zu den Besonderheiten, die in der Praxis der Textgestaltung jedoch zu bedenken sind, gehören die sogenannten „Unterschneidungen“ und, eng mit ihnen verbunden, die „Ligaturen“.

Ungleiche Abstände zwischen Buchstaben sorgen für eine Unterbrechung im Lesefluss. Die Buchstaben sollten also gleich weit voneinander entfernt sein. Betrachten Sie einmal die Buchstabenfolge AVE auf der linken Seite. Der Abstand zwischen A und V ist technisch genau so groß wie der zwischen V und E. Optisch scheint es aber einen übergroßen Abstand zu geben. Dieser Eindruck kommt daher, dass zwei Buchstaben ungeschickt aufeinandertreffen. Das A läuft unten nach rechts aus, das V oben nach links. In der Folge sind die beiden parallelen Linienzüge des A und des V sehr weit voneinander entfernt. Dieses Problem lässt sich durch Unterschneidung lösen, die bei der rechts stehenden Buchstabenfolge angewandt worden ist. Die linke Begrenzung des V befindet sich links von der rechten Begrenzung des A. In der Konsequenz rücken die Parallelen näher zueinander, der optische Buchstabenabstand ist ausgeglichen. Damit eine solche Unterschneidung funktioniert, müssen sowohl Betriebssystem bzw. Browser als auch die Schriftart selbst dies unterstützen. Das ist heute meist der Fall und in der Regel unproblematisch.

Auch in diesem Beispiel gibt es eine Unterschneidung. Das f reicht oben in den Bereich des r hinein. Dadurch wird verhindert, dass zwischen dem f und dem r eine optische Lücke erscheint.

Die Kombination fr ist unproblematisch, doch folgt auf das f ein Buchstabe wie i oder l, kommt es zu Überlappungen. Um das zu vermeiden, werden im Druck sogenannte Ligaturen (deutsch: Verbindungen) eingesetzt. Die Kombination aus f und l oder f und i wird jeweils zu einer Ligatur, also zu einem gemeinsamen Zeichen verschmolzen. Wie die nachfolgende Abbildung zeigt, gibt es jetzt keine unschönen Überlappungen mehr:

Am Bildschirm erweisen sich Ligaturen leider als Problem. Man kann den Computer die Ligaturen zwar automatisch einsetzen lassen, doch leider sind die Regeln für den Einsatz von Ligaturen, gerade im Deutschen, nicht einfach. Sie werden, mit wenigen Ausnahmen, nur dann gesetzt, wenn beide Buchstaben Teil der gleichen Silbe sind. Alle uns bekannten Textverarbeitungssysteme, Browser und Betriebssysteme, machen dies momentan falsch.

Hier sehen Sie das Problem: Beim Wort „Dachfirst“ ist die Ligatur richtig, bei „Kaufinteresse“ jedoch nicht, da das f und das i nicht zur gleichen Silbe gehören, denn es heißt ja nicht „Kau-Finteresse“. Ein guter Setzer würde statt der Ligatur die einzelnen Buchstaben setzen, aber auf die Unterschneidung verzichten, also dafür sorgen, dass sich f und i nicht berühren.

Um typographisch richtig zu schreiben, ist in diesem Fall also nicht nur Wissen über die Buchstaben und Zeichen, sondern auch über die Sprache erforderlich. Angesichts unvorhersehbarer Nutzungskonstellationen sind fehlerhafte Ligaturen kaum zu vermeiden und sollten daher im Sinne einer robusten Gestaltung nicht eingesetzt werden. Es gibt jedoch eine Ausnahme: Wenn man eine Schrift verwendet, in der keine Ligaturen benötigt werden.

In der gezeigten Schriftart „Liberation Serif“ sind keine Ligaturen nötig, da das f nur einen kleinen Bogen hat und nicht in den Bereich des folgenden Buchstabens hineinreicht. Auch die Kombination fi ist in dieser Schriftart unproblematisch, da der Bogen des f nicht in einem Tropfen, sondern in einer Serife endet. Diese Schrift eignet sich deshalb auch für den Einsatz am Bildschirm, beispielsweise wenn ein längerer Text in einer Serifenschrift angezeigt werden soll. Allgemein gute Kandidaten zur Vermeidung der genannten Probleme sind aber die serifenlosen Schriften, denn die meisten von ihnen verfügen nicht über Ligaturen. Aufgrund der fehlenden Serifen und Tropfen sind sie nicht notwendig.

Interessanterweise sind auch serifenlose Schriften entworfen worden, die Ligaturen enthalten. Das gilt zum Beispiel für die oben abgebildete Schriftart „Calibri“ von Microsoft. Zu sehen sind die Ligaturen bei fi, tt und fl. In der unteren Zeile sind diese Ligaturen ausgeschaltet, ohne dass es zu Beeinträchtigungen der Lesbarkeit kommt.

Zusammengefasst: Gestalten Sie robust! Um Irritationen durch überlappende Buchstaben oder durch falsche Ligaturen zu vermeiden, wählen Sie eine Schriftart, die aufgrund ihrer Gestaltung keine Ligaturen braucht. Mit serifenlosen Schriften sind Sie auf der sicheren Seite. Falls eine Schrift eingesetzt werden soll, die über Ligaturen verfügt, schalten Sie diese aus, falls eine solche Einstellung möglich ist.

Schriftwahl – Quintessenz

Ältere Ratgeber zur Schriftwahl am Bildschirm raten in der Regel zu serifenlosen Schriften, um den Treppeneffekt zu vermeiden und so die Lesbarkeit zu erhöhen. Dieser Effekt spielt aufgrund höherer Auflösungen und Farbtiefen heute an Computerbildschirmen keine so große Rolle mehr. Trotzdem empfehlen wir in den allermeisten Fällen aufgrund der nachfolgend aufgeführten Gründe die Verwendung serifenloser Schriften:

• Auf niedrigauflösenden Bildschirmen ist auch mit Techniken wie Anti-Aliasing die Darstellung von serifenlosen Schriften nach wie vor klarer als die von Serifenschriften.
• Serifenlose Schriften verursachen aufgrund des mit ihnen einhergehenden Verzichts auf dünne Linienführungen weniger Probleme mit Überstrahlungen. Dieser Effekt, bei dem helle Bereiche des Bildes in dunkle Bereiche hineinstrahlen, verliert zwar auch zunehmend an Bedeutung, tritt aber noch in vielen Fällen auf.
• Die Vorteile von Serifenschriften entfalten erst bei längeren Texten ihre Wirkung, die in der Nutzungsschnittstelle kaum auftreten.
• Bei serifenlosen Schriften sind weniger typographische Besonderheiten zu bedenken.

Nur in dem Fall, dass längere Texte dargestellt werden sollen und eine ausreichend hohe Auflösung sichergestellt werden kann, ist es auch am Bildschirm sinnvoll, eine Serifenschrift zu verwenden. In diesem Fall sollte allerdings ein Satzsystem im Hintergrund dafür sorgen, dass Ligaturen gegebenenfalls richtig angewandt werden.

Text auszeichnen

Im vorherigen Kapitel haben Sie erfahren, wie aus einer Vielzahl von Objekten einzelne herausgestellt werden können. Die dort vorgestellten Techniken dienten dazu, auf den Status von Objekten aufmerksam zu machen oder diese als markiert oder inaktiv darzustellen. Auch Text kann ausgezeichnet werden. Es gibt dazu eine Reihe von Techniken, von denen aber eine Vielzahl aus einer anderen Zeit stammt und mit anderen Technologien umgesetzt worden ist. Sie sollten am besten nicht oder nur sehr sparsam eingesetzt werden.

• Text fett setzen: Diese Art der Auszeichnung eines Textes ist sehr effektiv und kann bei sparsamem und bedachtem Einsatz die Orientierung am Bildschirm sehr erleichtern. Um die allgemeine Ruhe des Textbildes nicht zu sehr zu stören, sollte die Deckkraft des Textes bei Fettschrift ein wenig herabgesetzt werden.
• Text kursiv setzen: Kursiv gesetzter Text ist weniger aufdringlich. Üblicherweise wird solcher Text als Betonung interpretiert. Beachten Sie bei der Verwendung von kursivem Text die angesprochenen Einschränkungen bei geringer Bildschirmauflösung.
• Text unterstreichen: Text zu unterstreichen ist heute veraltet. Es handelt sich um eine Technik aus der Schreibmaschinennutzung, bei der man die Schrift nicht anpassen konnte und somit eine Hervorhebung durch späteres händisches Unterstreichen vornahm. Achtung: Unterstrichene Texte werden heute allgemein als Hyperlinks interpretiert! Unterstreichen Sie auf keinen Fall Text, der kein Link ist!
• Text sperren: Sperren bedeutet, den Abstand zwischen den Buchstaben zu erhöhen. Diese Technik, vor allem in ihrer einfachen Umsetzung durch das Einfügen von Leerzeichen zwischen den Buchstaben, ist ebenfalls eine Technik aus der Schreibmaschinenzeit. Gesperrter Text ist zwar auffällig, allerdings schwer zu lesen.
• Text in Versalien oder Kapitälchen: Bei der Verwendung von Versalien (Großbuchstaben) oder Kapitälchen (kleinere Großbuchstaben anstelle der Kleinbuchstaben) verschenken Sie das Potenzial einer prägnanten Worthülle. Die Lesbarkeit sinkt also. Kapitälchen können als Titel gut aussehen, eine Schreibung komplett in Großbuchstaben wirkt jedoch sehr aufdringlich.
• Abgewandelte Schriftgrößen: Auf keinen Fall sollten Sie innerhalb des Fließtextes die Schriftgröße ändern. Das Schriftbild wird dadurch unruhig und schwer lesbar. Auch die Zeilenabstände sind dann ungleich. Die Verwendung verschiedener Schriftgrößen ist aber eine gute Möglichkeit zur Verdeutlichung von Hierarchieebenen, etwa in Überschriften.
• Abgewandelte Schriftarten: Einen Schriftartenwechsel im Fließtext sollten Sie unbedingt vermeiden. Generell sollten Sie sich bei der Anzahl der Schriftarten in der Nutzungsschnittstelle sehr zurückhalten.

Farbe zur Textauszeichnung

Farbe haben Sie im vorherigen Kapitel bereits als gutes Gestaltungsmittel zur Auszeichnung kennengelernt. Farbe kann auch genutzt werden, um Text auszuzeichnen. Schwierig ist aber – vor allem bei Positivdarstellung – Buchstaben einzufärben. Dies zeigt sich auf obiger Abbildung vor allem in Spalte 2. Dunkle Farben wie dunkelblau und dunkelgrün sind gut lesbar, allerdings sind sie in ihrer Farbigkeit nicht mehr gut zu unterscheiden, vor allem nicht bei schnellem Hinsehen. Hellere Farben sind auffälliger, jedoch leidet die Lesbarkeit des Textes. Eine Ausnahme ist das voll gesättigte Rot, das Sie aber nur im Notfall einsetzen sollten.

In Spalte 3 wurden genau die gleichen Farben wie in Spalte 2 genutzt. Allerdings wurde diesmal der Hintergrund des Textes eingefärbt. In diesem Fall gibt es keine Probleme mehr, die Farbigkeit zu erkennen. Es tritt jedoch der Wahrnehmungseffekt ein, dass farbige Flächen erheblich stärker gesättigt wirken als kleine farbliche Strukturen. Sie können das ausgleichen, indem Sie die Sättigung der Farben, wie in Spalte 4, stark reduzieren und somit den Ablenkungscharakter mindern, ohne dass die Erkennbarkeit der farblichen Auszeichnung leiden würde.

Wenn Text farblich ausgezeichnet werden soll und eine Auszeichnung des Hintergrunds nicht in Frage kommt, wie zum Beispiel beim „Syntax Highlighting“ in der Programmierung, kann die Negativdarstellung wie in Spalte 1 eine gute Lösung verkörpern. Die Einfärbung des Textes ist in einer Negativdarstellung deutlich besser umsetzbar. Hellgrün, orange und hellblau sind sowohl gut erkennbar als auch gut lesbar. Dabei sollten jedoch die zu Beginn diskutierten Nachteile einer Negativdarstellung berücksichtigt werden, wie zum Beispiel die unterschiedliche Fokussierung bei Astigmatismus, die immerhin 50 % aller Menschen betrifft.

Nicht vergessen werden sollten schließlich unsere Hinweise zu Farbfehlsichtigkeiten. Die Nutzbarkeit einer Schnittstelle sollte nie nur von der Einfärbung eines Textes abhängig sein, sondern auch weitere Auszeichnungsarten vorsehen. Zu erwägen wäre auch, ein Möglichkeit vorzusehen, das gewählte Farbschema zur Nutzungszeit verändern zu können.

Icon-Gestaltung

Wie wir im Abschnitt Potenziale interaktiver Nutzungsschnittstellen beschrieben haben, vollzog sich der Übergang von rein textuellen zu grafischen Nutzungsoberflächen über die Verräumlichung der Nutzungsschnittstellen¹⁷. Das betrifft zum einen die Möglichkeit, eine Schreibmarke zu positionieren, und zum anderen die Fähigkeit, eine „Textschlange“ in Objekte zu zergliedern. Durch diese Möglichkeit der räumlichen Repräsentation werden Objekte zu manipulierbaren Einheiten der Nutzungsoberfläche, die insbesondere positioniert und bewegt werden können. Allerdings ist die Ausnutzung des Raums dabei noch stark durch den Medientyp Text eingeschränkt. Die durch die festgelegte Leseflussrichtung bei Lautschriften bedingte Sequenzialität verhindert, dass sich semantische Zusammenhänge durchgängig räumlich-visuell in Text abbilden lassen. Dies ändert sich mit der Einführung von Icons als einzelne unabhängig voneinander platzierbare und manipulierbare visuelle Objekte einer Nutzungsoberfläche. Diese Bildchen, die für Objekte oder Funktionen stehen, sind allgegenwärtig. Allein schon aufgrund der schieren Masse ist bei ihrer Gestaltung und Auswahl Sorgfalt geboten.

Von der Wortbedeutung her verweist Icon, oder deutsch Ikon, genau wie das manchmal auch verwendete Wort „Piktogramm“ auf bildhafte Darstellungen, die eine Ähnlichkeit zu dem aufweisen, wofür sie stehen. Das klingt zunächst plausibel, doch die Sache ist nicht so einfach. Man verwendet zum Beispiel ein Bild einer Diskette, um damit den Vorgang des Speicherns auszudrücken. Doch hat das Bild der Diskette eine Ähnlichkeit mit dem Vorgang des Speicherns? Wie könnte es das, denn das Speichern bzw. den Vorgang selbst kann man ja nicht unmittelbar sehen, also in diesem engen Sinne auch nicht abbilden.

Zudem sind viele Icons keine Abbilder, sondern frei gestaltete Grafiken. Icons wie die obigen haben keine Ähnlichkeit mit Objekten, die für einen Vorgang stehen könnten. Dennoch ist es üblich, auch wenn nicht im Wortsinn korrekt, diese Bildchen Icons zu nennen. Wir werden solche Icons weiter unten als „gegenstandslose Icons“ beschreiben.

Vor- und Nachteile von Icons

Mit Icons sind eine Vielzahl von Fehlannahmen verbunden. Eine davon ist, dass gut gewählte Icons selbsterklärend seien. Mit nur einem Blick habe man sie erfasst und wisse dadurch besser als bei einer textuellen Benennung, wofür sie stünden. Leider ist es nicht so einfach, denn die Bedeutung von Icons muss immer erlernt werden, während es Text in Grenzen ermöglicht, seine Bedeutung selbst zu erklären. Zusätzlich zur angeblichen Selbsterklärungsfähigkeit von Icons kommt die Erwartung, dass sie im Gegensatz zu Text international verständlich seien. In der Tat ist es so, dass es viele Symbole gibt, die international verbreitet sind und gleichermaßen verstanden werden. Denken Sie zum Beispiel an die Piktogramme auf Flughäfen für Ankunft, Abflug oder auch für Aufzüge oder Toiletten. Diese Bilder sind jedoch nicht deshalb international verständlich, weil es Bilder sind, sondern weil man sich international auf die Verwendung eben dieser Bilder geeinigt hat. Es ist eine Konvention, dass international die Darstellung einer Tasse für die Cafeteria steht und dass man zum Beispiel auch in Seoul das Zeichen mit Messer und Gabel als Zeichen für „Restaurant“ versteht, auch wenn Messer und Gabel dort nicht die üblichen Esswerkzeuge sind. Wenn Sie diese Icons verstehen, liegt es also nicht daran, dass sie das Abgebildete erkennen, sondern dass Sie die dahinterstehende Konvention entweder explizit erlernt oder aber sich über die mehrfache Nutzung implizit erschlossen haben (also durch Hypothesenbildung).

So ist es zu erklären, dass Sie auch diese Objekte verstehen, die in Deutschland eher unüblich sind. Sie sind zwar nicht gänzlich unbekannt, treten aber eher seltener auf. Statt des amerikanischen Folders verwenden wir eher einen stehenden Leitz-Ordner. Auch Mülltonnen aus Metall gibt es bei uns selten. Wir kennen sie aber aus amerikanischen Filmen und Serien (zum Beispiel Oscar aus der Tonne bei der „Sesamstraße“). Notizblöcke sehen bei uns üblicherweise nicht so aus, wie auf diesem Icon abgebildet, und Klemmbretter sind bei uns weniger verbreitet als in den USA¹⁸.

Dennoch gibt es eine ganze Reihe von nicht textuellen Icons gegenüber Text:

• Bilder haben einen größeren Gestaltungsfreiraum, um einzelne Objekte prägnant und unterschiedlich zu gestalten. Die Wortbilder von Text (mehr hierzu im Abschnitt Lesen als Hypothesenbildung im Kapitel Typographie) lassen sich nicht frei gestalten und unterscheiden sich oft äußerlich kaum voneinander¹⁹.
• Ein kleines Bild wie ein Icon kann ganzheitlich, also mit einem Blick erfasst werden. Bei Text ist das nicht so. Er muss in einem sequenziellen Prozess gelesen werden.
• Da Bilder räumlich sind, ist es in Bildern leichter möglich, räumliche Verhältnisse auszudrücken. Im Text ist die räumliche Relation nicht immer gewährleistet. Beispiel: In der Wortfolge „Der Apfel ist rechts von der Birne“ etwa widersprechen sich die beschriebene Anordnung der Objekte und die Positionen der Worte im Satz.
• Bilder sind nicht an eine Sprache gebunden. Eine Darstellung einer Birne etwa mag individuell unterschiedlich sein, ist aber nicht davon abhängig, ob man Deutsch, Spanisch oder Chinesisch spricht. Doch Vorsicht: Diese Internationalität gilt nicht für die inhaltliche Bedeutung von Bildern. (Mehr hierzu unter Internationale Icons)
• Bilder sind auch für Personen mit eingeschränkten Lesefähigkeiten zugänglich, wenn sie erlernt haben, wofür sie stehen.
• Bilder können in ihrer Funktion als Abbilder ein konstruktives Potenzial für mentale Prozesse entfalten. Sieht man etwa eine Feder oder eine Diskette, kann dies die Assoziation zum Bearbeiten und Speichern wecken. Die Texte „Bearbeiten“ und „Speichern“ tun das nicht so direkt. Ein Wort muss erst gelesen und verstanden werden, bevor die Assoziation zur damit verbundenen Operation rekonstruiert werden kann. Beim Bild ist dieser Umweg nicht notwendig. Diese Aspekte behandeln wir aufgrund ihrer besonderen Bedeutung für die Gestaltung weiter unten im Abschnitt „Von abbildhaften und nicht abbildhaften Zeichen“.

Auf der anderen Seite hat aber auch Text eine Vielzahl von Vorteilen auf seiner Seite:

• Text ist potenziell eindeutig. Der Text „Datenträgerimage herunterladen“ auf einem Button beschreibt zum Beispiel sehr präzise, was beim Klicken passiert. Ein Bild ist hingegen immer mehrdeutig. Das Bild einer Diskette kann für „Datenträgerimage herunterladen“ stehen, doch es kann auch für „Speichern“ stehen und die Interpretation, dass eine Diskette für „Laden“ stehen könnte, widerspricht zwar üblichen Konventionen, wäre aber allein vom Bild her ebenso denkbar. Ein bekanntes Beispiel für die Mehrdeutigkeit ist das Bild einer Lupe, das für zwei etablierte Funktionen steht, nämlich für das Zoomen (etwa in der Bildbearbeitung) und für das Suchen (wie auf vielen Websites).
• Bei einem Text lässt sich leicht Konkretes und Allgemeines unterscheiden, etwa „Mein Hund Bello“, „Hunde an sich“ oder die abstrakte Kategorie „Haustiere“. Bilder zeigen immer etwas Konkretes, also etwa einen konkreten Hund, stehen aber in der Verwendung oft für etwas Allgemeines.
• Durch Text lassen sich auch gleichartige, also gleich aussehende Objekte eindeutig unterscheiden.
• Eine weitere Konsequenz der begrenzten Ausdrucksmöglichkeiten des Medientyps Bild ist die Tatsache, dass sich Bilder nicht bzw. nur unter Verstärkung der gerade angesprochenen Defizite konstruktiv kombinieren lassen, so wie man z. B. Worte zu Sätzen oder Aussagen zusammensetzt.
• Durch Text sind Temporal- und Kausalzusammenhänge direkt beschreibbar. „Erst speichern, dann ausschalten“ oder „Wenn nicht gespeichert, dann Datenverlust“ sind Beispiele dafür. In einem Bild ist das nicht direkt ausdrückbar. Selbstverständlich kann man mehrere Abbildungen in einer Reihe arrangieren, doch benötigt dies für die Interpretation Regeln, die angeben, wie die beiden Bilder zu „lesen“ sind. Dies würde wiederum über die reine Abbildung hinausgehen.
• Im Text ist eine Negation, zum Beispiel „Nicht speichern“, oder der Ausdruck von etwas nicht Existentem, etwa „Kein Datenträger eingelegt“, möglich. Beides können Sie nicht durch eine Abbildung ausdrücken.

Nimmt man diese Vor- und Nachteile zusammen, muss man konstatieren, dass sich Text und Bild weder einander ausschließen noch der eine durch das andere ersetzbar ist. Vielmehr ergänzen sich Text und Bild gut und sollten daher gemeinsam verwendet werden. Die Menüleiste von Keynote von Apple zeigt unter jedem Icon auch einen Text bestehend aus ein bis zwei Worten, der die Funktion textuell beschreibt. Dies macht es einfacher, die Icons zu erlernen und sich im Zweifelsfalle rückzuversichern, wenn ein Icon nicht wiedererkannt werden konnte.

Ein Designkonflikt und seine Lösung

Dieser Screenshot zeigt die Icons in den sogenannten „Ribbons“ von Microsoft Word unter Windows 10. Er verdeutlicht das Problem, das sich ergeben kann, wenn Text und Bild gemeinsam verwendet werden. Die Kombination braucht recht viel Platz. Bei der von Microsoft gewählten Lösung sind bereits einige der Texte so dicht aneinander geschrieben, dass eigentlich mehr Platz spendiert werden müsste. Platz steht aber nicht unbegrenzt zur Verfügung. Er wird eingeschränkt von der Bildschirmgröße an sich, dem Platzbedarf für eine übersichtliche Darstellung, aber auch durch die Abwägung der Platzaufteilung zwischen Nutzungsschnittstelle und dem Inhaltsbereich der jeweiligen Anwendung. Steht zu wenig Platz zur Verfügung, um alle Funktionen in Text und Bild darzustellen, gilt es einen Design-Konflikt auszutarieren. Wir müssen dazu an dieser Stelle etwas vorgreifen und zwei Forderungen erwähnen, die wir erst in späteren Kapiteln intensiver besprechen.

Ohne zu weit vorzugreifen, wollen wir kurz erläutern, was diese Forderungen konkret bedeuten, denn nur dann können wir uns Gedanken über eine angemessene Lösung des Konflikts machen. Bei der Erschließbarkeit geht es darum, dass am Bildschirm schnell erfasst werden kann, welche Objekte vorhanden sind, welche manipuliert werden können und dass es erkennbare Hinweise darauf gibt, wie Funktionen und Inhalte erreicht werden können, die aktuell nicht sichtbar sind. In der Konsequenz erfordert das, nicht ausschließlich Icons anzuzeigen, denn das Erschließen wird erschwert, wenn ein Icon unbekannt ist oder vergessen wurde, wofür es steht. Übersichtlichkeit auf der anderen Seite verlangt, dass die Objekte eines Bildschirms schnell und strukturiert erschlossen werden können. Neben der Begrenzung der Anzahl der Objekte braucht es dazu auch zusätzlichen Platz, um Objekte voneinander absetzen bzw. gruppieren zu können.

Der Design-Konflikt zwischen Erschließbarkeit (kein Icon ohne Text) und Übersichtlichkeit (möglichst gut strukturierter Bildschirmaufbau) ist jeweils im Kontext auszutarieren. Im Edge-Browser von Windows 10, wie in vieler heute üblicher Software auch, hat man sich für die Maximierung des Inhaltsbereichs, also des Darstellungsbereichs der Websites, entschieden und dafür auf die dauerhafte Anzeige von Button-Beschriftungen verzichtet. Dies ist in diesem Fall auch verschmerzbar, da die Anzahl der Buttons sehr gering ist und diese Buttons zudem sehr verbreitet sind. Wird nun doch eine textuelle Beschreibung gebraucht, weil ein Icon nicht wiedererkannt werden konnte, ist sie durch einen Tooltip verfügbar und erscheint, wenn der Mauszeiger über dem Icon verweilt.

Ein Tooltip ist eine technische Auflösung des Design-Konflikts „Übersichtlichkeit versus Erschließbarkeit“. Anhand dieser Technik lässt sich gut vor Augen führen, wie sehr verschiedene Aspekte der Gestaltung und Forderungen an die Gestaltung zusammenhängen und wie sehr die Anwendung einer solchen Technik abhängig vom konkreten Einsatzfall ist, denn durch die Nutzung von Tooltips werden zwar Übersichtlichkeit und Erschließbarkeit in gewisser Weise versöhnt. Mit dieser Versöhnung gehen aber Nachteile in Form neuer erzwungener Sequenzialitäten einher:

• Tooltips erfordern einen Zwischenschritt und widersprechen damit der Forderung nach Eingabeminimalität, die wir im Kapitel Eingaben genauer besprechen.
• Damit Tooltips beim Überfahren von Objekten mit der Maus nicht stören, erscheinen sie zeitverzögert. Dies widerspricht der Forderung nach Unmittelbarkeit, die wir im Kapitel Rückmeldung besprechen werden.
• Man muss wissen, dass es die Tooltips gibt. Wenn man das nicht weiß und per Zufall einen Tooltip auslöst, entgeht einem die erklärende Beschreibung. Dieser Aspekt ist fast ironisch, widerspricht er doch genau der Forderung nach Erschließbarkeit, die ja durch den Tooltip gelöst werden sollte.
• Von diesen Schwierigkeiten abgesehen gibt es heute das Problem, dass Tooltips in erster Linie eine Maus-Technologie sind, da sie auf dem Verweilen über einem Icon basieren. Die Touch-Umsetzungen sind in aktuellen Mobil-Betriebssystemen sehr uneinheitlich und nicht sehr praktikabel.

Tooltips sollten also keinesfalls immer verwendet werden, denn die Nachteile überwiegen in vielen Fällen die Vorteile. Das verdeutlicht auch obiger Screenshot aus einer Lernplattform. Auf der rechten Seite befinden sich winzig kleine Bearbeitungs-Icons. Diese sind nicht nur aufgrund ihrer geringen Größe schlecht erkenn- und handhabbar, sie sind zudem auch noch unbeschriftet. Es sind zwar Tooltips vorhanden, das heißt, die Icons können über diesen Weg erschlossen werden, doch überwiegen in diesem Beispiel die Nachteile der Tooltips. Zur Beschriftung wäre genügend Platz für zusätzlichen Text vorhanden, was die Nutzung deutlich erleichtern würde²⁰, weil unnötige Zusatzschritte, also unnötige Sequenzialität, vermieden werden.

Eine Icon-Beschriftung und Tooltips schließen sich übrigens nicht aus. In obiger Abbildung haben die Icons eine kurze Beschriftung. Durch Verweilen auf dem Icon oder der Beschriftung erscheint eine zusätzliche, längere Beschreibung der Funktion. Man erhält eine differenziertere Beschreibung der Funktion und kann sich erschließen, welche Funktionalitäten zur Verfügung stehen (siehe Thema Erschließbarkeit).

Von abbildhaften und nicht abbildhaften Zeichen

Icons sind meist mehr oder weniger detaillierte Abbildungen von realweltlichen Objekten. Sie haben jedoch schon Beispiele für Icons gesehen, die keine solchen Objekte darstellen. Oftmals werden in der Praxis Abbildungen und willkürlich gewählte Elemente miteinander verbunden. Schauen Sie sich zur Verdeutlichung das rechts abgebildete Schild für „Rauchen verboten“ an. Bei diesem Schild ist eine Zigarette abgebildet. Die weiteren Bildanteile des Icons – der rote Kreis mit dem Balken – sind nicht abbildhaft, sondern sind ein willkürliches Zeichen, von dem Sie einmal gelernt haben, dass es für „verboten“ steht. Ein im Computerbereich typisches Beispiel für die Mischung von abbildhaften und willkürlichen Elementen ist ein Icon zum Hinzufügen von Personen, zum Beispiel bei der Vergabe von Zugriffsrechten, das etwa aus einem stilisierten Torso eines Menschen (abbildhaft) und einem Plus-Zeichen (nicht abbildhaft) bestehen könnte.

Wir nennen ein Icon dann „abbildhaft“²¹, wenn es ein wahrnehmbares Objekt abbildet. In aller Regel hat das abgebildete Objekt etwas mit dem zu tun, wofür das Icon steht. Wenn das so ist, gibt das Icon einen Hinweis auf die Funktion, das Objekt oder den Vorgang, für den es steht. Wird zum Beispiel ein Icon für die Funktion „Zugreservierung“ gesucht, könnte man zum Beispiel eine stilisierte Sitzreihe abbilden. Die Sitzreihe an sich ist zwar offen für verschiedene Interpretationen, hat jedoch im jeweiligen Kontext hinreichend viel mit der Reservierung von Plätzen in einem Zug zu tun, sodass diese Beziehung als konstruktiver Anlass für eine plausible Spekulation als Zugreservierung dienen kann. Zwar kann man ohne Vorkenntnisse solche Spekulationen nicht in Wissen verwandeln, wenn aber die Bedeutung einmal etabliert worden ist, kann man sich leichter wieder daran erinnern, weil es entsprechende Hinweisreize gibt und damit das Gedächtnis entlastet wird.

Man kann bei der Wahl von Zeichen auch solche wählen, die überhaupt nicht abbildhaft sind. Wenn Sie schon mal in Polen waren, haben Sie sich vielleicht über die dort üblichen Hinweisschilder auf Toiletten gewundert (rechts abgebildet). Im Gegensatz zum bei uns üblichen Zeichen mit einem Mann und einer Frau und einer Begrenzung dazwischen (auch dieses Zeichen bildet nicht Toiletten oder das, was man dort tut, ab), werden in Polen zwei willkürliche Zeichen verwendet: Ein Kreis steht an einer Toilettentür für „weiblich“, ein auf der Spitze stehendes Dreieck für „männlich“. Die Kombination der beiden Zeichen auf einem Schild weist auf eine öffentliche Toilette hin.

Wir nennen Zeichen wie die polnischen Toilettenzeichen arbiträr, da ihr Aussehen keinerlei abbildende Funktion hat. Das Wort „arbiträr“ bedeutet „willkürlich“, was in diesem Fall heißt, dass die Zeichen beliebig gestaltet werden können, unabhängig davon, wofür sie stehen. Insbesondere eröffnet das die Möglichkeit, sie sehr einfach zu gestalten. Einfachheit reduziert den Erkennungsaufwand, weshalb solche Icons gerne verwendet werden. Zu den arbiträren Zeichen gehören auch Buchstaben, Ziffern und die meisten Sonderzeichen.

Auch viele Verkehrszeichen, wie die oben abgebildeten, sind rein arbiträr. Eine Raute zeigt kein Objekt und verkörpert auch keine Visualisierung des Konzepts Vorfahrt. Auch das Dreieck und das Ausrufezeichen sind keine Abbildungen, sondern arbiträre Zeichen. Dass diese Zeichen willkürlich sind, heißt aber nicht, dass die Formen zwangsläufig ohne Bedacht ausgesucht worden wären. Bei Verkehrszeichen ist es etwa wichtig, dass sie schnell wahrgenommen und von der Umgebung unterschieden werden können. Wichtige Verkehrszeichen sind daher zum einen sehr einfach, etwa nur ein Dreieck oder nur ein Kreis, oder verfügen über Formen wie eine Raute oder ein auf der Spitze stehendes Dreieck, die in Land und Stadt typischerweise nicht vorkommen.

Manche Verkehrszeichen bestehen aus Kombinationen von abbildhaften und nicht abbildhaften Elementen. Beim Warnschild für den Bahnübergang (links) ist das offensichtlich. Das rote Dreieck ist ein arbiträres Zeichen, der Zug ist eine abbildhafte Darstellung. Auch das Einfahrt-verboten-Schild rechts besteht aus einem nicht abbildhaften Element, dem Kreis, und einem abbildhaften Element, dem Balken, der entfernt an das Aussehen einer Straßensperrung erinnert. Diese Darstellung ist allerdings bereits stark abstrahiert.

Die Beispiele legen nahe, dass Arbitrarität und Abbildhaftigkeit zwei Pole eines Kontinuums bilden. Doch leider ist es nicht so einfach. Die abgebildete Skala verdeutlicht verschiedene Grade der Abbildhaftigkeit. Die Icons links bilden nichts ab und sind daher nicht abbildhaft. Die Icons rechts bilden ein Objekt ab und haben daher eine hohe Abbildhaftigkeit. Etwas weniger abbildhaft sind die beiden Icons, die Sie wahrscheinlich als Lupe und Briefumschlag erkennen. Sie sind zwar abbildhaft, jedoch nicht in dem Maße, wie die nahezu fotorealistischen Darstellungen am rechten Ende der Skala. Die Zeichen auf der linken Seite sind allesamt nicht abbildhaft, aber nicht alle von ihnen sind arbiträr. Es gibt Zeichen, die zwar nicht abbildhaft, aber dennoch nicht komplett willkürlich sind. Betrachten Sie zum Beispiel den nach Links zeigenden Pfeil und nehmen an, es bedeute „Element aus der rechten Auswahl in die linke Auswahl verschieben“. Außerdem haben Sie das Zeichen, das wie ein auf der Seite liegendes Y aussieht, in der Bedeutung „Fallunterscheidung einführen“. Könnte man nun ohne Weiteres sinnvoll dieses Icons für das Verschieben nach links und den Pfeil nach Links für die Fallunterscheidung nehmen? Wenn die Icons arbiträr, also willkürlich wären, müsste das gehen. Das ist jedoch nicht der Fall. Die Zeichen referieren zwar auf kein Objekt, aber sie visualisieren durch ihr Aussehen das abstrakte Konzept zur Unterstützung der Orientierung und des Bewegens in einem Raum. Dieses Phänomen des Verräumlichens abstrakter Konzepte finden wir auch in sprachlichen Metaphern wie z. B. tiefes Nachdenken oder hohe Abstraktion.²². Sie helfen, das Nicht-Sichtbare in einen räumlichen Zusammenhang zu setzen und damit begreifbarer machen. Wir unterscheiden deshalb bei nicht abbildhaften Icons zwischen „konzeptuellen Icons“ und „arbiträren Icons“.

Die Bedeutung steckt nicht im Zeichen

An den Verkehrszeichen bzw. an ihren abbildhaften Elementen lässt sich gut verdeutlichen, dass eine bildliche Darstellung, obwohl sie etwas Realweltliches abbildet, nicht in sich trägt, wofür diese Abbildung steht. Sie gibt nur einen Hinweis auf die entsprechende Bedeutung.

Dieses Zeichen ist Teil vieler deutscher Verkehrsschilder. Dargestellt ist ein Lkw. Gemeint ist aber nicht ein Lkw, der genau so aussieht wie dieser. Die Darstellung steht stellvertretend für etwas Allgemeineres, nämlich eine ganze Klasse von Fahrzeugen. Gleichzeitig steht das Zeichen aber auch für etwas Konkreteres, das nicht direkt zu sehen ist. Laut Straßenverkehrsordnung bedeutet dieses „Sinnbild“ nämlich „Kraftfahrzeuge mit einer zulässigen Gesamtmasse über 3,5 t, einschließlich ihrer Anhänger und Zugmaschinen, ausgenommen Personenkraftwagen und Kraftomnibusse“. Diese präzise Definition kann nicht in einer Grafik dargestellt werden. Wofür dieses Sinnbild steht, ist nur klar, wenn man es erlernt hat. Eine andere Frage ist, was das Bild bedeutet, denn das wird in diesem Falle nur im Zusammenhang mit dem Rest des Schildes, von dem es ein Teil ist, erschließbar.

Diese beiden Zeichen belegen, dass man aus dem Aussehen nicht die Bedeutung ablesen kann. Das linke Zeichen stammt von einem Schild aus Großbritannien, das rechte ist Teil eines Straßenschilds aus Spanien. Zu sehen ist auf beiden Bildern eine recht altmodische Kamera mit Balgen. Beide Zeichen bilden das gleiche, oder zumindest ein sehr ähnliches, Objekt ab. Die jeweiligen Bedeutungen sind aber sehr verschieden. Das linke Zeichen weist die Fahrer auf Radarkontrollen hin, das rechte auf interessante Fotomotive am Straßenrand.

Dass das gleiche Zeichen in verschiedenen Kontexten unterschiedliche Bedeutungen hat, zeigt sich auch in Nutzungsschnittstellen. In der Abbildung oben sehen Sie abbildhafte Darstellungen. Es ist leicht erkennbar, was sie abbilden, doch ist allein vom Zeichen her nicht klar, wofür sie stehen. Die Lupe steht in Photoshop für die Vergrößerung des Bildes, in Firefox für die Suche, der Pinsel steht in Photoshop für das Zeichnen auf dem Bild und in Word für das Übertragen von Formatierungseigenschaften und die Weltkugel stand in den Systemeinstellungen von Windows 95 noch für die internationalen Einstellungen (Sprache, Währung, Maße etc.), während sie in Windows 7 nun für Internetverbindung steht. Bleibt schlussendlich noch ein Schlüssel. Dieses Icon könnte für alles Mögliche stehen, etwa für das Verschlüsseln einer Datei. Das konkrete Exemplar stammt aus einem Einstellungsfenster des Macintosh, in dem ein Anmeldepasswort vergeben werden kann. Es steht dort für die Funktion, ein Passwort automatisch zu generieren.

Fassen wir zusammen: Auch wenn man erkennt, was auf einem Icon abgebildet ist, kann man allein aus dem Zeichen nicht ableiten, für was es im jeweiligen Kontext steht. Das Abgebildete zu erkennen ist nicht das Gleiche wie seine Bedeutung zu verstehen. Die Bedeutung erschließt sich immer erst durch einen Lernprozess, in dem durch Handeln im jeweiligen Kontext eine Zuordnung etabliert wird, wie ein Zeichen zu nutzen bzw. zu verstehen ist. Icons sind also nicht selbsterklärend, aber sie können unterstützende Hinweise für die Wiedererkennung liefern.

Obschon es wichtig ist zu verstehen, dass Icons nie selbsterklärend sind und man nicht lediglich aus dem Anblick eines Icons ableiten kann, wofür es steht, muss man doch die konstruktiven Eigenschaften herausstellen, die gute abbildhafte Icons mit starkem Hinweischarakter mit sich bringen. Verwendet man etwa eine Feder für einen Editor und eine Schreibmaschine für die Druckfunktion und hat man diese Zuordnung einmal erlernt, dann ist das Wiedererkennen eben dieser Objekte bei späterer Betrachtung ein guter Hinweis auf diese Funktionen, oder, um es mit dem Vokabular aus dem Kapitel Differenzerfahrung zu sagen, eine gute Unterstützung bei der Bildung von Hypothesen darüber, welche Funktionen welchem Element der Nutzungsschnittstelle zugeordnet sind.

Anforderungen an die Icon-Gestaltung

Wir haben festgestellt, dass Icons und Text einander gut ergänzen. Wenn ein geeignetes Icon gewählt wurde, verkörpert dies eine Entlastung beim Wiedererkennen und Erinnern seiner Bedeutung, ohne die Beschriftungstexte explizit lesen zu müssen. Tägliche Erfahrung lehrt uns jedoch auch, dass es sehr auf die Auswahl und Gestaltung der Icons ankommt, denn schlecht gestalte oder ungeschickt ausgewählte Icons können auch mehr irritieren als unterstützen oder Fehlbedienungen provozieren. Basierend auf den Erkenntnissen über die menschliche Wahrnehmung und unseren Überlegungen zu arbiträren, abbildhaften und konzeptuellen Icons leiten wir eine Reihe grundlegender Forderungen an die Icon-Gestaltung ab.

Doch zuvor noch ein Hinweis: Auch wenn wir von „Icon-Gestaltung“ sprechen, wollen wir – wie schon bei den Schriftarten – nicht nahelegen, Icons ohne eine entsprechende Grafikausbildung zu gestalten. Meist ist das Zeichnen von Icons auch nicht erforderlich, weil es viele gute sowohl kostenfreie als auch kommerzielle Icon-Sätze gibt. Das Wissen, das wir vermitteln wollen, ist gleichwohl erforderlich, um eine angemessene und begründete Auswahl einzelner Icons oder ganzer Icon-Sätze treffen zu können. Unsere Betrachtungen dazu orientieren sich an den vier bereits bekannten Forderungen: Wiedererkennbarkeit, Unterscheidbarkeit, Einfachheit und Ablenkungsfreiheit.

Wiedererkennbarkeit durch Abbildhaftigkeit

Wir haben gesehen, dass es nicht möglich ist, aus dem Aussehen eines Icons abzuleiten, wofür es steht. Wenn ein Icon etwas abbildet, das man wiedererkennen kann, kann dieses Wiedererkannte bei späteren Betrachtungen aber ein guter Hinweis auf die Bedeutung sein. Ein solches Icon erleichtert den Prozess und kann gewissermaßen als Abkürzung zum Zuordnen der vorher erlernten Bedeutung betrachtet werden, weil weniger Alternativen beim Hypothesenbilden bedacht werden müssen.

Abbildhafte Darstellungen knüpfen an vertraute Wahrnehmungen an und fördern die Wiedererkennbarkeit bzw. entlasten das Gedächtnis. Wiedererkennbarkeit bedeutet daher bei der Icon-Gestaltung, abbildhafte Icons zu verwenden.

Das Potenzial, dass abbildhafte Icons einen Hinweis auf eine vorher erlernte Bedeutung des Icons beinhalten können, kann sich jedoch nur dann entfalten, wenn das Dargestellte mit dieser Bedeutung auch etwas zu tun hat. Dies ist bei den obigen Icons der Fall. Eine Briefmarke kann daran erinnern, dass das Icon für „E-Mail“ steht, ein Block kann an die Funktionalität eines Editors erinnern und Foto und Kamera sind jeweils gute Hinweise auf Funktionen zur Bilderverwaltung oder zur Bildbearbeitung.

Es gibt leider auch Icons, die abbildhaft sind, deren Abbildung aber keinen Hinweischarakter hat. Eine Erdbeere ist beispielsweise kein Hinweis auf einen Editor und ein Pylon ist kein Hinweis auf einen Mediaplayer. Wenn wir im Folgenden von „Abbildhaftigkeit“ sprechen, gehen wir jeweils davon aus, dass ein Bild mit Hinweischarakter verwendet wird. Bezugslose Bild-Icons wie ein grinsendes Gesicht für den Dateimanager Finder beim Apple Macintosh oder ein Pylon für den VLC-Mediaplayer können aufgrund ihrer Besonderheit sehr auffällig sein, die Argumentation an dieser Stelle ist aber nicht von Interesse.

Voraussetzung für die Wiedererkennbarkeit durch Abbildhaftigkeit ist eine hinreichend detaillierte und auf die übliche Art und Weise dargestellte Repräsentation. Reduziert man die Details zu sehr oder verwendet eigenartige Darstellungsweisen und Perspektiven, besteht die Gefahr, dass die Qualität des Hinweischarakters sinkt. Die rechts abgebildeten Icons sind zwar abbildhaft, doch eher als problematisch zu betrachten. Das linke Bild steht in der Vorschau-Anwendung von MacOS für „Bearbeiten“. Abgebildet ist die Spitze eines Filzstiftes. Gerade durch die Kombination mit dem Kreis ist dies aber schwer zu erkennen. Das rechte Icon wird häufiger als Icon für das Versenden einer Nachricht gesehen. Aber was stellt es dar? Es handelt sich tatsächlich um die abbildhafte Darstellung eines Papierfliegers, jedoch in einer eigenartigen Perspektive direkt von oben.

Unterscheidbarkeit

Um ein Objekt schnell unter vielen anderen herauszufinden zu können, müssen sich diese Objekte optisch gut voneinander unterscheiden. Je geringer bzw. feiner die Unterschiede sind, desto aufwändiger gestaltet sich der Wahrnehmungsprozess, desto mehr Sequenzialität gibt es also. Es gilt daher, unterscheidbare Icons zu verwenden, um unnötigen Erschließungsaufwand und Fehler zu vermeiden.

Diese Icons oben können das Problem mangelnder Unterscheidbarkeit gut verdeutlichen: Sie unterscheiden sich jeweils nur in einem kaum sichtbaren Detail. „Stopp“ und „Alle stoppen“ auf der linken Seite unterscheiden sich außer in der Beschriftung nur in der Anzahl der scheinbar um die Weltkugel herumfliegenden Ordner. Ansonsten sind die recht komplexen Icons identisch. In solchen Fällen gerät das Erkennen schnell zu einem Suchspiel (finde die fünf Unterschiede). Alternativ müsste auch der Text jedes Mal gelesen werden; in diesem Fall wäre das Icon auch verzichtbar.

Einfachheit

Jedes Bildschirmobjekt muss zunächst durch den Wahrnehmungsapparat erschlossen und dann in seiner Gesamtheit erfasst werden. Wenn das dargestellte Gebilde einfach ist, bedeutet das weniger Aufwand für den Wahrnehmungsapparat, als wenn es viele Details wahrzunehmen gilt.

Pure geometrische Formen wie diese Verkehrszeichen sind immer einfach. Sie können schnell und ohne näheres Hinsehen wahrgenommen werden. Bei Verkehrszeichen ist das besonders wichtig, denn sie müssen auch in schnell fließendem Verkehr verlässlich wahrgenommen werden, ohne dass sie die Aufmerksamkeit zu stark binden. Ein Autofahrer sollte nicht damit beschäftigt werden, die Verkehrszeichen erst zu enträtseln bzw. zu entziffern. Die Gestaltungsfreiheit bei der Nutzung arbiträrer Zeichen wird jedoch mit einer mangelhaften Gedächtnisentlastung erkauft.

Arbiträre Zeichen können einfach gestaltet sein, müssen es aber nicht. Da es sich um willkürliche Zeichen handelt, können sie auch beliebig komplex sein. Solche Icons treten jedoch selten auf, denn sie würden eher ein Hindernis als eine angemessene Unterstützung verkörpern. Willkürliche Zeichen bieten aber einen hohen Gestaltungsspielraum, um verschiedene sich teils widersprechende Anforderungen austarieren zu können.

Ablenkungsfreiheit durch Gleichförmigkeit

Im Kapitel Architektur der Wahrnehmung haben wir erläutert, wie sehr einzelne, von der Masse abweichende Objekte präattentiv wahrgenommen werden, also die Aufmerksamkeit auf sich ziehen. In einem Arrangement von Icons will man das im Regelfall nicht, denn kein Objekt soll so gestaltet sein, dass es ablenkt. Es gilt also, die Icons ablenkungsfrei zu gestalten bzw. sie entsprechend auszuwählen.

Damit Icons ablenkungsfrei sind, müssen sie gleichförmig gestaltet werden. Nicht gleichförmig gestaltete Icons werden präattentiv vorausgewählt und werden damit zu optischen Schreihälsen. Oben sehen Sie eine Ansicht der Systemsteuerung von Windows 8. Unter den vielen Icons befindet sich eines, das des Flash-Players, das so auffällig anders als alle anderen gestaltet ist, dass es unweigerlich die Aufmerksamkeit auf sich zieht. Bei der Nutzung der Systemsteuerung muss man jeweils gegen diesen visuellen Schreihals ankämpfen. Das Problem ist nicht nur die rote Farbe, sondern auch, dass es als einziges Icon die komplette Fläche ausfüllt und dadurch größer und präsenter wirkt als die anderen Elemente im Fenster. Das Problem mit diesem auffälligen Icon ist übrigens nicht etwa Microsoft zuzuschieben, denn das Icon des Flash-Players stammt ja nicht von Microsoft, sondern vom Flash-Hersteller Adobe. Die Icons der Windows-8-Systemsteuerung mögen nicht unbedingt ideal sein, aber sie enthalten von Haus aus keine derart ablenkenden Elemente.

Auch die abgebildeten Icons in der Software „Schild-NRW“, die in Schulen in NRW zur Schülerverwaltung eingesetzt wird, sind uneinheitlich. Daher fallen einzelne Icons besonders auf. Die ersten beiden sind im Windows-XP-Stil gehalten, während die anderen einen noch älteren Stil aufweisen. Einige Icons sind überdurchschnittlich bunt, wie zum Beispiel das Icon mit den drei Männchen in grün, rot und blau. Das Fernglas hingegen hat einen überdurchschnittlich hohen Schwarz-Anteil und ist dadurch viel dunkler als die übrigen Icons und damit auch auffälliger.

Der Effekt stark ablenkender Objekte tritt schnell auf, wenn Icons aus verschiedenen Sammlungen kombiniert werden, sei es im Prozess der Gestaltung oder wenn das Icon-Arrangement während der Nutzung an die jeweiligen Bedürfnisse angepasst wird. In solchen Fällen ist es schwierig, robust zu gestalten, wäre aber durch Vorgaben und technische Einschränkungen möglich, etwa der Art, dass die Sättigung von Icons automatisch reduziert wird oder nur monochrome Icons verwendet werden können.

Gestaltungskonsequenz: Reduzierte Icons

Wir haben vier Forderungen zur Gestaltung oder der Auswahl von Icons aufgestellt: Sie sollen einfach, ablenkungsfrei (also gleichförmig), abbildhaft (also wiedererkennbar) und unterscheidbar sein. Es ist nicht einfach, alle unter einen Hut zu bringen. Maximiert man die Wiedererkennbarkeit durch die Verwendung sehr detaillierter Bilder oder Fotos, ist die Darstellung sehr detailreich und erfüllt nicht mehr das Kriterium der Einfachheit. Maximiert man die Gleichförmigkeit, sind alle Icons nahezu identisch, wodurch der Ablenkungseffekt minimiert wird. Unterscheidbarkeit ist dann jedoch nicht mehr erfüllt. Es liegen bei der Icon-Gestaltung also zwei grundlegende Design-Konflikte vor.

Einfachheit versus Wiedererkennbarkeit (oder auch direkt auf Icons bezogen: Einfachheit versus Abbildhaftigkeit)

Einfachheit und Abbildhaftigkeit stehen in einem Widerspruch zueinander. Man kann sich diesen Widerspruch verdeutlichen, indem man ihn systematisch aufschreibt.

• Einfachheit ist gefordert, damit Icons schnell erfasst werden können. Einfachheit bedeutet, dass Icons wenig detailreich sind.
• Wiedererkennbarkeit ist gefordert, um das Abkürzungspotenzial von Icons auszunutzen. Wiedererkennbarkeit wird durch Abbildhaftigkeit realisiert. Abbildhafte Icons sind detailreich.
• Icons müssen beiden Forderungen entsprechend, also zugleich, sehr detailreich und wenig detailreich sein. Das heißt, Einfachheit und Wiedererkennbarkeit stehen über dem Aspekt des Detailreichtums in einem Konflikt zueinander.

Ablenkungsfreiheit versus Unterscheidbarkeit (oder auch direkt auf Icons bezogen: Gleichförmigkeit versus Unterscheidbarkeit)

Auch Ablenkungsfreiheit und Unterscheidbarkeit stehen in einem Konflikt zueinander und auch in diesem Fall lässt sich der Konflikt auf die gleiche Art und Weise aufschreiben:

• Ablenkungsfreiheit ist gefordert, um zu vermeiden, dass ein Element die Aufmerksamkeit grundlos auf sich zieht. Bei Icons erreicht man Ablenkungsfreiheit durch die Gleichförmigkeit, was heißt, dass die Icons wenige Unterschiede untereinander aufweisen sollen.
• Unterscheidbarkeit ist gefordert, damit ein gesuchtes Icon schnell und sicher ausgewählt werden kann. Damit Icons voneinander unterschieden werden können, müssen sie hinreichende optische Unterschiede zueinander aufweisen.
• Icons müssen beiden Forderungen entsprechend, also gleichzeitig, wenige Unterschiede und viele Unterschiede zueinander aufweisen. Das heißt, Ablenkungsfreiheit und Unterscheidbarkeit stehen über dem Aspekt der Menge der optischen Unterschiede in einem Konflikt zueinander.

Die Anforderungen müssen also austariert werden. Wie schwierig das sein kann und wie begrenzt möglicherweise die mit vertretbarem Aufwand erzielbaren Ergebnisse sein können, zeigen wir im nachfolgenden Abschnitt. Dazu gehen wir einmal etwas ausführlicher auf experimentelle Untersuchungen ein, um zu verdeutlichen, dass es wichtig ist, Gestaltungsvorschläge so weit wie möglich zu überprüfen und experimentell abzusichern. Zum anderen zeigt dieses Beispiel auch, dass der damit verbundene Aufwand zum einen sehr hoch ist und zum anderen zeigt, dass es in einem konfligierenden Gestaltungsfeld nicht möglich ist, in kontrollierten Experimenten alle Gestaltungsvariablen isoliert zu untersuchen und, vor allem aufgrund der Designkonflikte, nicht alle Konstellationen des Zusammenspiels der verschiedenen Faktoren unabhängig vom jeweiligen Gestaltungskontext erschöpfend und abschließend zu untersuchen. Eine nur auf experimentellen Befunden basierende Gestaltung ist somit nicht möglich. Entscheidend dafür ist, dass zum Beispiel Fragen nach der Gesamtzahl von Icons im Untersuchungsfeld oder spezifische Fragen nach der Abbildbarkeit anwendungsspezifischer Sachverhalte sowie die Probleme einer robusten Gestaltung bei der Kombination verschiedener Icon-Sätze oder ihrer Anpassung zur Nutzungszeit immer wieder spezifische Gestaltungslösungen erfordern, da sich damit auch die Anforderungen an die Austarierung der Gestaltungskonflikte verändert.

Die für uns gute Nachricht ist jedoch, dass die im Exkurs vorgestellten empirischen Untersuchungen und die Interpretation der entsprechenden Ergebnisse grundsätzlich die von uns vorgestellte Sichtweise bestätigen. Je mehr es also im Prozess der Gestaltung gelingt, die vorgestellten Gestaltungskonflikte auszutarieren, desto eher wird das Ergebnis ergonomisch auch zufriedenstellend ausfallen, solange sie nicht experimentellen Befunden widersprechen.

Untersuchung von Gestaltungsalternativen

Die vier aufgeführten Forderungen auszutarieren ist keinesfalls trivial. Das Austarieren von Gestaltungskonflikten beinhaltet notwendigerweise Prioritäten zu setzen, also festzustellen, ob und bis zu welchem Grad die unterschiedlichen Forderungen jeweils erfüllt bzw. verletzt werden sollten, also in welcher Situation beispielsweise die Abbildhaftigkeit wichtiger ist als die Einfachheit. Dies lässt sich nicht aus isolierten Laborexperimenten ableiten. Man könnte auch sagen, Gestaltung ist im Gegensatz zur reinen Experimentalwissenschaft ein schmutziges Geschäft.

Wir betrachten in der Folge eine Reihe von Untersuchungen des Psychologen Jens Wandmacher und seiner Forschungsgruppe aus der Frühzeit der Gestaltung von Nutzungsschnittstellen Anfang der 1980er Jahre. Zu dieser Zeit war die Verwendung von Icons noch neu, sodass die Ergebnisse nicht von Konventionen und Vorerfahrungen geprägt waren und eine Vielzahl von Gestaltungsalternativen in Betracht gezogen wurde. Die Untersuchungen und Abwägungen münden in das Konzept der reduzierten Icons, das wir zum Ende dieses Kapitels vorstellen.

In ihren experimentellen Untersuchungen ging es zunächst um die Frage, ob Icons grundsätzliche Vorteile gegenüber Textkommandos haben und inwiefern die Gestaltung eines Icons für seine performante Nutzung eine Rolle spielt. Dazu haben sie eine Reihe von Experimenten durchgeführt.

Im ersten Experiment, das wir uns anschauen wollen²³, ging es darum, zwei Darstellungen eines Kommandosatzes, bei dem einer aus geschriebenen Worten und der andere aus Icons bestand, miteinander zu vergleichen. Der Einfluss von Vorkenntnissen wurde dadurch ausgeschlossen, dass durch Training gleiche Voraussetzungen geschaffen wurden. Der Kommandosatz und die Bilder waren den Versuchspersonen vor dem Beginn des Experiments bereits bekannt. Im Experiment wurde ihnen dann beispielsweise die Aufgabe präsentiert: „Sie wollen ein Dokument drucken“. Im Anschluss daran bekamen sie entweder ein Textmenü oder einen Icon-Satz zu sehen. Um die Aufgabe zu lösen, mussten sie die Nummer des entsprechenden Elements auf einer Nummerntastatur eingeben²⁴.

Die Abbildung oben zeigt die Ergebnisse des Experiments. Zweierlei fällt auf: Zum einen schneiden die Icons im Experiment durchweg besser ab als die Wortkommandos. Zum anderen gibt es sehr große Unterschiede bei der Performanz der einzelnen Icons, während die Wortkommandos alle recht nahe beieinander liegen. Betrachtet man die entsprechenden Icons im Einzelnen, lässt sich eine Hypothese formulieren:

Kann es sein, dass das Icon für „Graphik“ so schlecht abschneidet, weil es so komplex ist, und die Icons für „Löschen“ und „Schreiben“ so gut, weil sie so einfach sind? Weitere Untersuchungen waren angesagt.

Einfache Formen trotz Abbildhaftigkeit

In einem weiteren Experiment verglichen Arend und Wandmacher²⁵ verschiedene Arten von Icons miteinander. Die Wortkommandos kennen Sie teilweise aus dem vorherigen Experiment. Die abbildhaften Icons zeigen sehr detaillierte Zeichnungen von Büroobjekten. Die arbiträren Icons bestehen aus einfachen geometrischen Figuren, die keinen abbildhaften Charakter aufweisen, also kein Objekt abbilden. Am interessantesten für uns sind die oben rechts abgebildeten Icons, die auf ihre globalen Eigenschaften reduziert worden sind. Globale Eigenschaften haben nichts mit Internationalität zu tun. Gemeint ist vielmehr, dass das jeweilige Icon lediglich die „groben“ Eigenschaften wie die allgemeine Form und Lage eines Objekts darstellt und nicht „kleine“ Eigenschaften wie die Oberflächentextur oder spezifische Details.

Im Experiment wurden nun diese Icon-Formen miteinander verglichen. Der Aufbau des Experiments war ähnlich wie beim zuvor beschriebenen Versuch. Zu bewältigen waren eine einfache Such- und Auswahlaufgabe und eine komplexere Dreifachaufgabe, bei der drei Elemente in bestimmter Reihenfolge auszuwählen waren. Gemessen wurden wieder die Zeiten bis zur Eingabe der korrekten Ziffer. Wenn nun die Abbildhaftigkeit für die Performanz eines Icons ausschlaggebend wäre, müssten die detailreichen abbildhaften Icons am besten abschneiden. Wenn es die Einfachheit wäre, müssten die arbiträren und die reduzierten Icons gleichermaßen gut abschneiden, denn beide zeigen einfache Formen.

Das Resultat des Experiments zeigt, dass die komplexen, detailreichen, abbildhaften Icons mit großem Abstand am schlechtesten, sogar schlechter als die Wortkommandos, abschneiden. Der Nachteil ihres Detailreichtums ist offenbar so groß, dass sie den erhofften Abkürzungscharakter von Icons gänzlich verspielen oder gar ins Gegenteil verkehren. Erlernte arbiträre Icons schneiden im Test besser ab, als man vermuten sollte. Die für uns wichtigste Folgerung aus dem Experiment ist aber, dass die auf ihre globalen Eigenschaften reduzierten Icons offenbar ein idealer Kompromiss zwischen der Einfachheit der arbiträren Icons und der Detailliertheit der abbildhaften Darstellungen sind. Sie sind wiedererkennbar genug, um das Gedächtnis zu entlasten bzw. die Erinnerung zu unterstützen, und einfach genug, um nicht zu viel Erkennungsaufwand einzufordern.

Unterscheidungen im Globalen statt im Lokalen

Die globalen Eigenschaften von Icons standen auch in der nächsten Untersuchung im Mittelpunkt des Interesses. Untersucht wurden Icons, die sich in ihren globalen Eigenschaften von solchen abgrenzten, die nur Unterschiede in ihren lokalen Eigenschaften, also in Details, aufwiesen.

Diese Abbildung zeigt einen typischen Icon-Satz, bei dem sich die Icons nur in einer lokalen Eigenschaft unterscheiden. Global, also auf ihre Grundform reduziert, zeigen alle fünf Icons die gleiche Form, nämlich einen Zylinder, eine konventionalisierte Darstellung für eine Datenbank.

Diese Untersuchung wurde an Icons für die Textverarbeitung durchgeführt. Die Unterscheidung zwischen rein abbildhaften und rein arbiträren Icons spielte in diesem Falle keine Rolle, da die Icons für typische Textmanipulationen sich teils nur sehr schwer rein abbildhaft darstellen lassen. Neben abbildhaften Elementen müssen also auch konzeptuelle Elemente wie Pfeile und bekannte arbiträre Zeichen wie das Durchstreichen genutzt werden. Die entstandenen Icons sind laut Arend, Muthig und Wandmacher „definitely not self-explanatory“. Sie müssen auf jeden Fall erlernt werden. Dafür geben sie aber, wenn man sie kennt, einen optischen Hinweis auf die Funktion und unterstützen damit die Wiedererkennung.

Der Experimentalaufbau des Versuchs ist wieder vergleichbar mit den vorherigen Untersuchungen²⁶. Die Versuchspersonen saßen vor einem Tastenfeld, das den Positionen der Icons entsprach, und hatten wiederum eine Such- und Auswahlaufgabe durchzuführen. Das Ergebnis der Untersuchung zeigt ein eindeutiges Bild. Die reduzierten Icons, die sich in ihren globalen Eigenschaften unterscheiden, schnitten erheblich besser ab als die abbildhafteren Icons, bei denen die Unterschiede nur in lokalen Merkmalen bestehen. Letztere sind optisch so komplex und die jeweiligen Unterschiede so gering, dass ihre Performanz jener der Wortkommandos sehr nahekommt. Schaut man sich die gefundenen Ergebnisse im Detail genauer an, stellt man bei den reduzierten Icons eine große Bandbreite fest.

Unter den reduzierten Icons hat „Wort suchen“ bei Weitem am besten abgeschnitten. Es ist laut Wandmacher das „unterschiedlichste“ von allen, denn es enthält als einziges einen Kreis. Die hohe Unterscheidbarkeit dieses Icons könnte also sehr gut den Ausschlag für sein gutes Abschneiden im Test gegeben haben.

Um Unterscheidbarkeit zu gewährleisten, ist diesen Ergebnissen folgend darauf zu achten, dass sich die gewählten Icons in ihren globalen Eigenschaften unterscheiden. Das kann problematisch sein, wenn es eine Vielzahl von Funktionen gibt, die an einem komplexen Objekt jeweils ein Detail manipulieren. Die Textverarbeitungs-Icons sind ein gutes Beispiel. Alle Funktionen beziehen sich auf das Textdokument. Reduzierte Icons können somit nicht erzeugt werden, indem man die detaillierten Icons auf ihre globalen Eigenschaften reduziert, denn dann wären sie nahezu identisch und jeglicher Hinweis auf die spezifische Funktionalität wäre dahin. Bei der Gestaltung der optimierten Icons wurde daher die Granularitätsebene gewechselt. Statt das Objekt „Textdokument“ darzustellen, beschränkte man sich auf die Teilobjekte, auf die sich die Bearbeitung jeweils bezieht, also eine Zeile oder ein Wort.

Zwar kann man den Icons nicht mehr ansehen, auf welches Gesamtobjekt sie sich beziehen, denn dieses Objekt ist nicht in den Icons präsent, doch ist dies bei der Textverarbeitung nicht problematisch. Im gegebenen Fall ist der Kontext aller Icons derselbe. Es gibt daher keine Notwendigkeit, das Dokument in jedem Icon abzubilden. Das ist nicht immer der Fall. Eine Software könnte über eine Reihe von Icons verfügen, die sich auf ein Dokument und andere, die sich etwa auf eine Zitatdatenbank beziehen. In so einem Fall könnte man das Problem lösen, indem verschiedene Elemente miteinander kombiniert werden.

Gibt es in einer Anwendung nur einen einzigen Objekttyp, so reicht ein simples +, um ein neues Objekt zu erstellen. Kann aber eine Vielzahl von Objekten hinzugefügt werden, reicht das Plus-Zeichen nicht mehr aus. In den obigen Android-Icons ist das Plus-Zeichen jeweils mit einem anderen Zeichen kombiniert worden. Wichtig dabei ist, dass keines der beiden Elemente zu einem Detail des anderen wird, beide also gut und schnell erkennbar bleiben, um die Unterscheidbarkeit zu gewährleisten.

Fazit: Auf globale Eigenschaften reduzierte Icons

Die vorgestellten experimentellen Untersuchungen untermauern unseren hypothesengeleiteten Ansatz zum Austarieren von Konflikten und geben nützliche Anregungen, wie die angesprochenen Design-Konflikte aufgelöst werden können. Das Ziel der Icon-Gestaltung und der Icon-Auswahl muss demnach sein, reduzierte Icons zu finden, die einen ausreichenden Hinweischarakter auf ihre Funktionalität beinhalten, sich aber untereinander hinreichend unterscheiden. In der Praxis erfordert dies, Details so zu reduzieren, dass am Ende eine recht einfache geometrische Form übrig bleibt, die aber immer noch detailliert genug ist, um das dargestellte Objekt erkennen zu können. Wo es erforderlich ist, sollten diese noch durch etablierte arbiträre und konzeptuelle Zeichen komplettiert werden.

Die Abbildung zeigt drei Icons, die diesen Ansprüchen genügen. Die durch die Icons abgebildeten Objekte sind ohne Weiteres zu erkennen, wobie die Darstellung so vereinfacht worden ist, dass keine komplexen Details wahrgenommen werden müssen.

Die Übersicht unten zeigt die verschiedenen, von uns beschriebenen Icon-Arten, eingeteilt nach dem Grad ihrer Abbildhaftigkeit und ihres Hinweischarakters. Die nicht abbildhaften Icons haben wir als „Gegenstandslose Icons“ zusammengefasst. Unter ihnen gibt es die „Arbiträren Icons“ und die „Konzeptuellen Icons“. Bei den abbildhaften Icons unterscheiden wir echte „Bild-Icons“ und die „Bezugslosen Bild-Icons“. Die letzteren sind für uns in der Ergonomie nicht interessant. Ihre Gestaltung fällt eher in den Bereich der Markengestaltung. Bei den „Bild-Icons“ können wir die detailreichen „Fotorealistischen Icons“ von den „Reduzierten Icons“ abgrenzen. Da letztere nur die globalen Eigenschaften eines Objekts darstellen, sind sie etwas weniger abbildhaft, aber immer noch abbildhaft genug, um ihren hohen Hinweischarakter zu erhalten. Sie stellen also einen idealen Kompromiss zwischen Abbildhaftigkeit und Wiedererkennbarkeit dar.

Anordnung

Bislang haben wir uns Gedanken darüber gemacht, wie Bildschirmobjekte aussehen. Wo sie auf dem Bildschirmen erscheinen und wie sie mit anderen Objekten zusammenhängen, haben wir allenfalls am Rande betrachtet. In diesem Kapitel holen wir das nach und betrachten die Forderungen an eine ergonomische Anordnung von Bildschirmobjekten. Bezüglich des Aussehens von Objekten haben wir mehrere Forderungen an die Gestaltung herausgearbeitet: von der Erkennbarkeit über die Einfachheit, die Unterscheidbarkeit, die Ablenkungsfreiheit bis hin zur Wiedererkennbarkeit. Für die Anordnung haben wir nur zwei Forderungen. Das bedeutet aber nicht, dass das Anordnungsproblem einfach wäre. Vielmehr lassen sich aus diesen zwei Forderungen in Kombination mit anderen bereits bekannten und mit ein paar vorausschauenden Blicken in nachfolgende Kapitel viele wichtige Design-Konflikte identifizieren und Gestaltungshinweise ableiten.

Man kann sich Übersichtlichkeit kaum ohne Strukturiertheit vorstellen. Beide gehen Hand in Hand, sind aber nicht identisch. Sie können sich das mit dem Aufräumen einer Wohnung veranschaulichen. In einer übersichtlichen Wohnung liegt nichts einfach herum, sondern viele Dinge sind ausgerichtet bzw. aneinandergereiht oder auch gestapelt. Eine übersichtliche Wohnung muss aber nicht gut strukturiert sein. Übertragen auf das Aufräumbeispiel bedeutet Strukturiertheit, dass die Dinge, die zusammengehören bzw. etwas miteinander zu tun haben, in der Wohnung auch räumlich zueinander angeordnet sind. Tassen und Teller stehen etwa im gleichen Schrank und im Regal gibt es abgegrenzte Bereiche beispielsweise für Fachbücher zur Softwaregestaltung und für Romane. Diese Ordnung kann auch übersichtlich gestaltet sein, dann stehen die Bücher nicht nur beisammen, sondern sind auch ausgerichtet und geordnet.

Die Entscheidung, welche Objekte am Bildschirm zusammengehören und daher wie gruppiert oder in eine Hierarchie eingeordnet werden sollten, ist abhängig von der Aufgabe, die mit der Software erledigt werden soll, und somit Gegenstand der Gebrauchstauglichkeit. Dies liegt jenseits unserer ergonomischen Überlegungen, denn unser Thema ist, wie vorhandene inhaltliche Zusammenhänge in der Nutzungsschnittstelle präsentiert werden sollen, nicht wie man zu solchen Gruppierungen und Hierarchien kommt.

Die Gestaltungshinweise zur Übersichtlichkeit und zur Strukturiertheit, die wir in diesem Kapitel vorstellen, fußen direkt auf den Erkenntnissen aus den Kapiteln Architektur der Wahrnehmung und Differenzerfahrung und Wissen. Es geht zum einen darum, Strukturen zu schaffen, die den Einschränkungen unseres Wahrnehmungssystems, also der Selektivität der Wahrnehmung angepasst sind (Übersichtlichkeit), und zum anderen darum, die Möglichkeiten der räumlichen Anordnung zu nutzen, damit zusammengehörige Objekte auch als zusammengehörig wahrgenommen und gemeinsam bedacht werden können (Strukturiertheit).

Anzahl der Bildschirmelemente verringern

Der erste Hinweis, der für mehr Übersichtlichkeit am Bildschirm sorgt, ist so einfach wie einleuchtend, wird aber leider oft nicht beherzigt. Dabei kann man mit seiner Hilfe bei der Überarbeitung einer unübersichtlichen Maske bereits viel erreichen. Das Ziel besteht darin, die Anzahl der Elemente auf dem Bildschirm zu verringern, denn alles, was zu sehen ist, fordert Aktivitäten zur Erschließung heraus: Was gibt es noch, ist es wichtig, etc.? Zwar ist unsere Wahrnehmung selektiv, weshalb nie alles Wahrnehmbare auch betrachtet wird, doch ändert das nichts daran, dass der Aufwand zur Erschließung steigt, weil auch nicht relevante Objekte erstmal wahrgenommen und als solche identifiziert werden müssen. Prinzipiell können alle wahrnehmbaren Differenzen als Grundlage für eine Hypothesenbildung fungieren. Den entstehenden Aufwand kann man nur verkleinern, indem man Objekte übersichtlich gestaltet (siehe etwa Einfachheit im Kapitel Icon-Gestaltung) und die Anzahl der Objekte verringert. Es gilt also visuelle Schnittstellen mit möglichst wenigen, gut sichtbaren und gut voneinander abgesetzten Objekten zu gestalten.

Das heißt nicht, nur sehr einfache Strukturen mit simplen Funktionen zu erstellen, denn das Ziel ist nicht, die Funktionalität einzuschränken oder für die Erledigung der Aufgabe nötige und sinnvolle Elemente nicht anzuzeigen. Beides würde zwar zu übersichtlichen Bildschirmaufbauten führen, jedoch zugleich der Gebrauchstauglichkeit zuwiderlaufen. Entscheidend ist das Vermeiden überflüssiger visueller Bildschirmelemente, die in der jeweiligen Situation keinem Zweck dienen, also weder die Bildschirmseite strukturieren, eine Funktion auslösen, über den Zustand der Anwendung informieren oder die ein relevantes Objekt der Anwendungswelt sind.

Betrachten wir dazu einen Ressourcenmonitor für Windows 95 und Windows NT. Dieses ältere Beispiel erkennt man auf den ersten Blick als Anwendung der damaligen Zeit. Sie wurde vermutlich mit GUI-Builder erzeugt und besteht aus den Standard-Elementen von Windows. Ergonomisch ließe sich in diesem Beispiel Vieles verbessern. Wir werden später im Kapitel Navigation sehen, dass die verwendete Darstellung von Karteireitern ergonomisch nicht optimal ist. Das soll uns vorerst aber nicht stören. Wir betrachten zunächst nur die Inhalte der Reiter. Da gibt es überflüssige Elemente, die weggelassen werden könnten, um die Übersichtlichkeit zu erhöhen. Fangen wir von unten an:

• Das Icon unten rechts ist ein Aktivitätsanzeiger. Während das Programm die Menge des freien Speichers berechnet, wird die Anzeige animiert und die Lupe rotiert über dem stilisierten Computer. Abgesehen von der unnötigen Komplexität des Icons erfüllt dieses keinen Zweck mehr, sobald die Ergebnisse vorliegen. Es könnte dann also ausgeblendet werden.
• Aus der Abbildung des Programms ist leider nicht ersichtlich, was die mit „Frei“ und „Ändern“ beschrifteten Elemente bedeuten oder was ein Klick bewirkt²⁷. Daher kann über das mögliche Weglassen nichts gesagt werden. Auffällig ist aber in jedem Fall der übermäßig ausgeprägte 3D-Effekt bei „Frei“. Dieser sollte abgeschwächt werden.
• Über ebenso starke 3D-Effekte verfügen die Elemente, in denen die Kapazitäten und die Mengen des freien Speichers angezeigt werden. Auch die Füllstandsanzeigen verfügen über eine 3D-Umrahmung. Gerade auch bei den Zahlenwerten sind diese Umrahmungen gänzlich überflüssig, denn es handelt sich nicht um Eingabefelder, sondern um vom System ausgegebene Werte. Bei der Füllstandsanzeige ist eine Umrahmung insofern gerechtfertigt, als man ohne sie nicht einschätzen könnte, wie viele Elemente es geben könnte.
• Sehr dominant ist die Darstellung der Spalten „Laufwerke“, „Frei“ und „Kapazität“. Sie sind mit einer schwarzen Linie umrandet. Eine zusätzliche innen laufende weiße Linie sorgt dafür, dass die schwarze Umrahmung noch auffälliger erscheint. Wir werden im Verlaufe dieses Kapitels unter anderem noch zeigen, dass man Umrahmungen durch einfache Linienzüge vermeiden und auf andere Gestaltungsmittel zurückgreifen sollte. Bei unserem Beispiel ist die Gestaltung noch einfacher, da die Umrahmung ohne Weiteres weggelassen werden kann. Die Bildschirmseite erscheint dann aufgeräumter.
• Die Umrahmung ist in diesem Fall auch nicht sinnvoll, um die Strukturiertheit zu verbessern. Was wäre denn das Zusammengehörige, das gruppiert werden soll? Welches Ziel sollte es haben, alle Frei-Werte zu gruppieren? Wenn es eines Rahmens bedurft hätte, dann hätten es die einzelnen Zeilen gewesen sein müssen, die durch einen Rahmen unterstützt werden, jedoch nicht die Spalten.

Die Abbildung zeigt eine Überarbeitung der Nutzungsschnittstelle:

• Das Status-Icon ist entfernt worden.
• Auch die Umrahmungen um die Ausgabefelder sind entfernt worden.
• Die Füllstandsanzeige ist um graue Elemente ergänzt worden, die einerseits für eine gleichmäßigere Darstellung sorgen und andererseits die Notwendigkeit einer Umrahmung beseitigen, weil jetzt auch ohne Umrahmung deutlich wird, wie breit diese Anzeige ist.
• Fehlformatierungen in den Kapazitätsfeldern sind ebenfalls beseitigt worden. Die Software kam wohl nicht richtig mit Laufwerksgrößen klar, die mehr als 1000 MB groß waren.
• Die Spaltenbeschriftungen sind so ausgerichtet worden wie die Spalten-Inhalte, das heißt „Laufwerke“ linksbündig, „Frei“ und „Kapazität“ jeweils rechtsbündig.
• Bei den übrig gebliebenen Elementen mit 3D-Effekten sind diese zwar beibehalten worden, aber nun weniger auffällig gestaltet.

Ein Tipp: Wir haben vor allem Linien und Umrahmungen weggelassen. In der Tat erweisen sich diese immer als gute Kandidaten, die daraufhin untersucht werden sollten, ob man sie nicht weglassen oder durch eine zurückhaltendere Gestaltung ersetzen kann. Nicht jede Linie ist überflüssig, aber viele sind es.

Immer noch zu viele Objekte auf dem Bildschirm?

Haben Sie alle überflüssigen Bildschirmobjekte bereits entfernt und immer noch zu viele, die Sie unterbringen müssen, sind Sie im Design-Konflikt „Erschließbarkeit versus Übersichtlichkeit“ gelandet. Für die Übersichtlichkeit möchten wir möglichst wenige Bildschirmobjekte haben. Unter der Forderung nach Erschließbarkeit im Kapitel Übergänge hingegen verlangen wir, dass alle Funktionalitäten und Inhalte zumindest indirekt erreichbar sind. Im Idealfall bedeutet das, alles anzuzeigen. Das ist jedoch nur selten möglich.

Man kann versuchen, die Objekte zu verkleinern und den Platz zwischen den Objekten zu verringern oder Strukturierungstechniken einzusetzen, die nicht so viel Platz verbrauchen – dazu weiter unten mehr –, aber irgendwann ist die Grenze überschritten, bei der die Forderungen nach Erkennbarkeit, Unterscheidbarkeit oder Handhabbarkeit (im Kapitel Eingaben) verletzt werden. Jetzt hilft nur noch, die Objekte auszulagern und bei Bedarf sichtbar zu machen. Weiteres hierzu, etwa zur Technik des Aufdeckens bei Bedarf, erfahren Sie im Kapitel Übergänge.

Reduzierung von Fluchtlinien durch Alignieren

Die Übersichtlichkeit von Anzeigen am Bildschirm lässt sich leicht durch Ausrichten der Objekte an einigen wenigen Fluchtlinien verbessern. Solche Fluchtlinien sind keine explizit sichtbaren Bildschirmobjekte. Sie bilden sich vielmehr entlang der Begrenzungen der am Bildschirm angezeigten Objekte. Die Ausrichtung dieser Objekte entlang möglichst weniger Fluchtlinien vermindert die optische Unruhe und erleichtert die visuelle Suche nach einem Objekt. Sie kennen das Ausrichtungs-Thema schon aus der Typographie. Text wird üblicherweise linksbündig dargestellt, wodurch eine Fluchtlinie entsteht. Auch horizontal gibt es bei gedrucktem Text Fluchtlinien. Alle Buchstaben sind so angeordnet, dass ihre Grundlinie auf dieser Fluchtlinie liegt. Tanzen Buchstaben oder Worte aus der Reihe oder sind Zeilen etwas nach links oder rechts verschoben, hat das Folgen:

• Die Gestaltung wirkt uneinheitlich und damit unprofessionell.
• Das Auge stolpert über solche Unregelmäßigkeiten, wird also bei seiner eigentlichen Tätigkeit gestört.
• Abweichungen in der Gestaltung verleiten dazu, sie inhaltlich zu interpretieren und können dadurch zur unangemessenen Bildung von Hypothesen führen. Das ist nicht der Fall, wenn tatsächlich ein nachvollziehbarer inhaltlicher Grund besteht. Diese Aufzählung ist beispielsweise eingerückt und weicht damit von der Fluchtlinie des Haupttextes ab. Dies ist sinnvoll, wenn man Zusammengehöriges von anderem absetzen will. Ohne einen solchen Anlass kann eine Hypothese nicht korrekt gebildet werden. Das Aufstellen und Überprüfen der Hypothese ist vertane Zeit und damit erzwungene Sequenzialität. Es kann darüber hinaus zu Fehlhandlungen führen und eine sichere Nutzung gefährden.

Die Erkenntnisse aus dem Bereich der Textgestaltung können wir auch auf die Anordnung von Objekten auf einer Bildschirmseite übertragen. Wir sprechen vom Ausrichten oder auch Alignieren von Bildschirmobjekten. „Alignieren“ bedeutet, die Anzahl der Fluchtlinien auf einer Bildschirmseite zu verringern. Das vermeidet visuelle Unruhe und entlastet das Auge beim Ansteuern des jeweils nächsten Aufsetzpunktes. Die Nachteile nicht alignierter Bildschirmelemente sind letztlich die gleichen wie bei nicht richtig ausgerichtetem Text.

Bereits ein kurzer Blick auf diese Eingabemaske eines Online-Banking-Systems vermittelt den Eindruck, dass etwas „schief“ ist. Dieser Eindruck lässt sich leicht durch die Verringerung der Fluchtlinien durch Ausrichten vermeiden.

Bei dieser Software ist die Ausrichtung der Eingabefelder ebenfalls nicht bedacht worden. Da jedes Eingabefeld auf der linken Seite an einer anderen Position beginnt, ist das Gesamtbild entsprechend unruhig.

Bei beiden Beispielen liegt das Problem der schlechten Alignierung vor allem daran, dass eine Ausrichtung nicht angestrebt worden ist, obwohl genügend Platz vorhanden wäre. Die Eingabefelder erscheinen jeweils dort, wo die vorhergehende Feldbeschreibung endet.

Es gibt jedoch auch Fälle, bei denen die Elemente zwar explizit ausgerichtet worden sind, aber dennoch zu viele Fluchtlinien entstehen.

Auf der linken Seite dieser Abbildung aus OpenOffice sind die Fluchtlinien eingezeichnet, die sich aus den linken Begrenzungen der Objekte ergeben²⁸. In solchen Situationen können die vielen nah beieinander liegenden Fluchtlinien zusammengefasst werden, um die visuelle Unruhe zu reduzieren. Die rechts abgebildete Überarbeitung zeigt das Ergebnis mit angeglichenen Fluchtlinien. Dabei sind auch die rechten Ränder ausgerichtet, also in eine Flucht gebracht worden, um das Gesamtbild noch ruhiger zu gestalten.

Horizontale Fluchtlinien

Auch in der Horizontalen ist es erforderlich, dem Auge klare Fluchtlinien anzubieten. Die unteren Kanten der Bildschirmelemente sollten sich (zeilenweise) in einer Flucht befinden. Besonderes Augenmerk ist erforderlich, wenn Bildschirmelemente ihrerseits über Textinhalte verfügen, wie es oben zu sehen ist. In diesem Fall ist nicht nur die Begrenzung des Elements selbst, dargestellt durch die grüne Fluchtlinie, sondern auch die Grundlinie des enthaltenen Textes (dargestellt durch die rote Fluchtlinie) wichtig. Im Beispiel sind nicht nur Button und Eingabefeld, sondern auch die entsprechenden Textinhalte und Beschriftungen korrekt zueinander ausgerichtet.

Im Beispiel des Online-Bankings ist diese Alignierung an horizontalen Fluchtlinien nicht realisiert. Der Text „Kreditlinie bearbeiten“, der ja auch inhaltlich der Ausgabezeile mit der Kreditlinie zuzuordnen ist, ist nach unten versetzt. Die Schaltfläche scheint regelrecht „zwischen den Zeilen“ zu stehen.

Dieses Fenster, das beim Einfügen eines Objekts in Microsoft WordPad erscheint, ist in vielerlei Hinsicht eigenartig. Unter anderem ist irreführend, dass die wählbaren Optionen in dem Dialog nicht dauerhaft sichtbar beschrieben werden. Erst nach dem zunächst willkürlichen Anklicken kann man im unten angegebenen „Ergebnis“-Feld erfahren, was diese Auswahl bedeutet. Betrachten wir das Fenster nur unter dem Gesichtspunkt der Anordnung der Elemente, fallen weitere Probleme auf. Der Knopf „Durchsuchen“ ist ohne erkennbaren Grund nach rechts verschoben. Auch seine Positionierung ist inhaltlich unsinnig, denn das Durchsuchen ist eine Funktion, die sich auf den angegebenen Dateipfad bezieht. Sinnvollerweise müsste dieser Button also in der Nähe der Pfadangabe, idealerweise dahinter untergebracht werden. Dies entspricht auch den Zuordnungstechniken, auf die wir im weiteren Verlauf des Kapitels zu sprechen kommen.

Spätestens beim Einzeichnen der horizontalen Fluchtlinien offenbart sich die chaotische Gestaltung. Zu sehen sind in Blau die unteren horizontalen Fluchtlinien der grafischen Elemente, in Rot die der Texte. Der Hauptgrund für dieses Chaos ist die Positionierung der beiden Buttons „OK“ und „Abbrechen“. Anstatt diese in einer Zeile im unteren Bereich des Fenster unterzubringen, erscheinen sie in einer Art zweiten Spalte, wobei der „OK“-Button zudem das oberste aller Elemente in diesem Fenster ist. Das führt ebenfalls zu erzwungener Sequenzialität, da aufgrund der Leseflussrichtung das Auge zunächst den Button erfassen könnte, ohne dass klar ist, auf was genau sich das „OK“ bezieht. Das Auge muss also, nachdem es beim Lesen im unteren Bereich des Fensters angekommen ist, wieder nach oben springen, um die entsprechende Operation auszulösen. Außerdem bilden die Buttons mit einem Teil der Einstellungen zur Dateiauswahl eine Spalte, ohne dass eine Gemeinsamkeit vorliegt.

Lassen wir die Buttons jetzt mal außer Acht und betrachten nur die Text-Grundlinien im linken Bereich. Die Grundlinien zwischen „Aus Datei erstellen“ und dem angegebenen Pfad sind zueinander verschoben, wodurch zwei Fluchtlinien entstehen, die ein unruhiges Bild vermitteln. Auffällig ist auch die Beschriftung „Datei:“. Sie scheint zwischen den Zeilen zu stehen, denn sie grenzt genau an die Grundlinie des oberen Punkts „Neu erstellen“.

Wir haben für dieses Fenster ein Mockup, also eine Art Vorführmodell für eine verbesserte Gestaltung erzeugt, bei dem wir folgende Änderungen vorgenommen haben:

• Ein einleitender Text beschreibt die in diesem Fenster durchzuführende Aufgabe. Ein solcher Text fehlt im Original und erschwert die Nutzung für Personen, die mit dieser Station noch nicht vertraut sind.
• Die vertikalen, linken Fluchtlinien haben wir auf 3 reduziert. Zusätzlich gibt es eine Fluchtlinie rechts, über die kein Element hinausragt. Im ursprünglichen Fenster ragt „Als Symbol anzeigen“ über die rechte Fluchtlinie der Buttons hinaus.
• Die Beschriftung „Datei:“, das Dateinamen-Feld und der Durchsuchen-Knopf befinden sich nun in einer Zeile. Dabei sind sowohl das Feld und der Button als auch die enthaltenen Texte horizontal ausgerichtet.
• Die Buttons sind im unteren Bereich des Fensters angeordnet. Den Button für den Handlungsabschluss habe wir von „OK“ in „Einfügen“ umbenannt und unseren kulturellen Konventionen entsprechend unten rechts angeordnet. Der „Abbrechen“-Knopf ist nun abgesetzt und entsprechend der linken Fluchtlinie angeordnet.

Fluchtlinien im Überblick

Für die Alignierung sind die linken und unteren Fluchtlinien am wichtigsten. Es können aber auch weitere Begrenzungen der Bildschirmobjekte betrachtet und in eine Flucht gebracht werden. Insgesamt gilt es, fünf besonders relevante Fluchtlinien zu beachten. Besonders wichtig sind linke Fluchtlinien (rot), die unbedingt reduziert werden sollten. In Grün ist eine rechte Fluchtlinie eingezeichnet. Bei blockartigen Elementen, wie in diesem Fall, sollten auch diese angeglichen werden. Bei Textelementen wie den Beschriftungen spielen rechte Fluchtlinien hingegen keine Rolle. Horizontal sind sowohl die Grundlinie der Objekte (blau), die Grundlinie des Textes (schwarz) und die Oberkanten der Objekte zu bedenken.

Alignierungsprobleme bei zusammengesetzten Nutzungsschnittstellen

Die vorgestellten Beispiele für nicht alignierte Objektanordnungen erwecken den Eindruck einer nachlässigen Gestaltung. Es gibt in der Praxis aber auch technische Gründe für eine unzureichende Alignierung, beispielsweise wenn Nutzungsschnittstellen aus mehreren Teilen dynamisch zusammengesetzt werden. Dabei kommen Gestaltungselemente zusammen, die zu verschiedenen Zeiten und ohne Bezug aufeinander gestaltet worden sind. Auch in diesem Fall gilt es, unsere Grundforderung nach Robustheit im Blick zu behalten, damit es nicht zu einer Vielzahl von Gestaltungsproblemen eben auch mit der Forderung nach Übersichtlichkeit kommt.

In diesem Beispiel aus der Druckfunktion von MacOS wird der untere Bereich „Layout“ in die vorhandene Maske eingeblendet und ist daher unabhängig von dessen Formatierung. Insofern ist es nicht überraschend, dass sich die vier Konfigurationsmöglichkeiten mit der Fluchtlinie der obigen Elemente brechen. Eine Möglichkeit, dieses Problem zu vermeiden, wäre etwa, die Breite der Elemente und Beschriftungen jeweils vorzugeben und somit für eine Vereinheitlichung zu sorgen. Das mag aber nicht immer praktisch sein. Eine weitere Möglichkeit wäre, den Bruch weniger störend zu gestalten, indem der eingeblendete Bereich stärker als eigenständige Region dargestellt wird und damit die Fluchtlinien innerhalb dieses Bereichs weniger mit denen außerhalb in Zusammenhang gebracht werden.

Streitpunkt: Ausrichtung von Beschriftungen

Bezüglich der Ausrichtung von Feldbeschriftungen gibt es in der einschlägigen Literatur verschiedene, sich zum Teil widersprechende Empfehlungen. Dahinter steckt wiederum ein Designkonflikt. Im oben abgebildeten Druckdialog von MacOS sind die Beschriftungen der einzelnen Eingabefelder rechtsbündig angeordnet. Damit befindet sich Apple in Übereinstimmung mit vielen Ratgebern. So empfiehlt die ISO-Norm 9241, im Regelfall die Beschriftungen rechtsbündig anzuordnen, damit kein großer Abstand zwischen der Beschriftung und dem eigentlichen Feld entsteht.

Wir sehen diese Lösung jedoch kritisch, denn eine solche Anordnung erzeugt viele linke Fluchtlinien. Zwar wirkt die Lösung nicht ungeordnet oder unprofessionell, jedoch wird dadurch ein schnelles Überfliegen der Beschriftungen erschwert, um ein bestimmtes Feld zu finden. Ist dies notwendig, wird auch in der ISO-Norm eine linksbündige Ausrichtung der Beschriftungen empfohlen.

Durch die Links-Ausrichtung der Beschriftung können unschöne große Abstände zwischen Beschriftung und Eingabefeld entstehen. In komplexeren Beispielen kann es dazu führen, dass die Zuordnung zwischen Beschriftung und Eingabefeld erschwert wird. Wir empfehlen dennoch, grundsätzlich linksbündig anzuordnen und somit die Fluchtlinien zu reduzieren. Um das Problem der großen Abstände zwischen Eingabefeld und Beschriftung zu vermindern, sollten dann aber die Längen der Beschriftungen angepasst werden. Im folgenden Beispiel ist das durch die Abkürzung des langen Wortes „Abitur-Durchschnitt“ zu „Abi-Schnitt“ gelungen.

Sind Abkürzungen nicht möglich oder nicht erwünscht, empfiehlt sich als alternative Technik, die Beschriftungen nicht vor den Eingabefeldern zu platzieren, sondern darüber. Dabei sollte jedoch darauf geachtet werden, dass jeweils der Abstand zwischen Beschriftung und Eingabefeld deutlich geringer ist als der zwischen dem Eingabefeld und der nachfolgenden Beschriftung des nächsten Eingabefeldes, damit eine klare Zuordnung gegeben ist.

Insgesamt lässt sich durch das Weglassen überflüssiger Objekte, der Aufteilung in mehrere Bereiche und der Technik der Ausrichtung eine Nutzungsschnittstelle übersichtlicher gestalten. Dies kann jedoch nicht sicherstellen, dass sie auch strukturiert ist, also anhand der Anordnung der Objekte zueinander erkennbar ist, was zusammengehört und was nicht. Dazu müssen wir die Zuordnung und Gruppierung von Bildschirmobjekten betrachten.

Zuordnung aufeinander bezogener Elemente

Objekte in Nutzungsschnittstellen haben oft einen direkten Bezug zueinander. Ein typisches Beispiel ist ein Eingabefeld und seine zugehörige Beschriftung. Ist diese Zuordnung nicht offensichtlich gestaltet, kommt es zwangsläufig zu erzwungener Sequenzialität.

Nehmen wir einmal an, Sie haben in Ihrer Wohnung ein Zimmer mit genau einer Tür, einem einzigen Lichtschalter und einer einzigen Lampe unter der Decke. Der Lichtschalter und die Lampe sind direkt aufeinander bezogen. Dieser eine Schalter schaltet diese eine Lampe ein und aus. Üblicherweise ist der Lichtschalter in der Nähe der Tür untergebracht, was praktisch ist, denn es vermeidet, dass man erst durch den dunklen Raum laufen muss, um den Schalter zu finden und dann betätigen zu können. Der Schalter und die zugehörige Lampe sind naturgemäß weiter voneinander entfernt. Dass ist nicht problematisch, weil es keine alternativen Zuordnungen gibt. Problematischer wird die Angelegenheit jedoch, wenn die Räume größer werden. In einer Fabrikhalle beispielsweise sind meist viele Lampen vorhanden, die aber nicht notwendigerweise nur über einen einzigen zentralen Schalter angesteuert werden. Vielmehr bietet es sich an, das Licht für einzelne Lampen oder Arbeitsbereiche separat ein- und ausschalten zu können. Die Zuordnung eines Lichtschalters zu den jeweiligen Lampen bzw. Lampengruppen ist in diesem Fall nicht mehr ohne Zusatzinformationen ersichtlich. Die Zusatzinformation kann indirekt über Konventionen oder explizit durch Beschriftung oder zusätzliche visuelle Elemente erfolgen.

Auch auf der Abbildung unten gibt es ein Zuordnungsproblem. Zu sehen ist ein Parkscheinautomat, wie man ihn in vielen Städten findet. Quer über das Bedienfeld verteilt befinden sich Elemente, die der Eingabe oder der Ausgabe dienen: die Karteneingabe, eine Münzeingabe, die Geldrückgabe, die Parkscheinausgabe, Knöpfe für ein Tagesticket, die Parkscheinanforderung, das Abbrechen des Vorgangs sowie bei Kartenzahlung Knöpfe zur Einstellung des abzubuchenden Betrags. Hinzu kommt noch eine Textanzeige in Form eines LC-Displays, auf dem die aktuelle Uhrzeit und Informationen über die gewählte Parkdauer angezeigt werden. Vielleicht haben Sie auch schon mal vor so einem Automaten gestanden und kamen sich etwas verloren vor. Warum ist das so?

Problematisch ist zunächst, dass die Anordnung der Elemente keinem erkennbaren System zu folgen scheint. Es stehen weder die Objekte beieinander, die funktional zusammengehören, noch sind die Elemente entsprechend der Nutzungsreihenfolge angeordnet. Die Anordnung von Objekten entsprechend der zu erwartenden Nutzungsreihenfolge besprechen wir, auch an diesem Beispiel, im Kapitel Konventionen. Beschäftigen wir uns zunächst einmal mit dem grundlegenden Problem der Zuordnung. Elemente mit einem klaren Bezug zueinander wie die Knöpfe, ihre Beschriftung und ihre Beschreibung lassen sich visuell kaum zuordnen. In der Darstellung haben wir die Zuordnungen von Beschriftungen, Beschreibungen und Interaktionselementen durch Pfeile visualisiert. Das Problem bei diesem Automaten ist, dass die Knöpfe nicht direkt beschriftet sind, sondern sie über Zahlen und Buchstaben erschlossen werden müssen. Die jeweiligen Beschriftungstexte und Beschreibungen befinden sich an anderen Stellen als die Objekte, auf die sie sich beziehen. Wie man am Durcheinander der Pfeile erkennt, stehen sie weder in räumlicher Nähe zueinander noch entsprechen sie sich in der Reihenfolge. Ein erhebliches Maß an erzwungener Sequenzialität ist die Konsequenz.

Möglichkeiten der räumlichen Zuordnung

Zuordnungsprobleme sind in der Psychologie intensiv behandelt worden. Ein Beispiel dafür ist die Zuordnung von Drehreglern zu Herdplatten oder allgemeiner von Stellgliedern zu Anzeigeelementen. Es lassen sich verschiedene Lösungsvarianten untersuchen.

Das grundsätzliche Problem ist links abgebildet²⁹. Vier Herdplatten sollen durch vier Drehregler geschaltet werden, doch wie kann man wissen, welcher Knopf für welche Platte zuständig ist? Als explizite Lösung für die benötigte Zusatzinformation könnten sowohl die Platten als auch die Stellglieder mit Etiketten versehen werden, etwa durch gleiche Beschriftung, eine farbliche Kodierung oder ein visuelles Zeichen bzw. Icon. Wir beschränken uns an dieser Stelle jedoch auf die Möglichkeiten der räumlichen Anordnung, also einer impliziten Lösung. Die Schwierigkeit ist, dass es keine Anordnung gibt, die eindeutig ist und damit ohne vorherigen Lernprozess verlässlich erschließbar wäre.

Die obige Abbildung zeigt für verschiedene Zuordnungsvarianten die Fehlerraten, die trotz eines zuvor erfolgten intensiven Trainings bei der Nutzung noch auftreten. Selbst im besten Fall passieren noch etliche Fehlhandlungen. Durch minimale Änderungen an der Anordnung lässt sich die Fehlerrate jedoch auf null senken.

Bei diesem Herd, der zugegebenermaßen ein wenig seltsam anmutet, treten keine Zuordnungsfehler mehr auf. Wieso ist das so? Es sind lediglich die oberen beiden Platten ein wenig nach links, die unteren beiden ein wenig nach rechts angeordnet. Diese kleinen Verschiebungen verkörpern eine Zusatzinformation, mithilfe derer sich eine eindeutige Zuordnung ergibt. Diese Abweichung von der Symmetrie bringt die Platten in eine definierte Reihenfolge, die der Anordnung der Stellglieder entspricht.

Wir nennen diese Art der Zuordnung kongruent. Das Wort „kongruent“ bedeutet „ähnlich“. Die Plattenanordnung ist also ähnlich zur Anordnung der Stellglieder. Anders formuliert: Es ist möglich, anhand der Reihenfolge in der einen Anordnung die Reihenfolgen in der anderen Anordnung vorherzusagen. Kongruente Anordnungen bieten sich immer dann an, wenn Stellglieder oder Schalter an einem Ort entfernt vom Geschalteten oder Gesteuerten zusammengefasst werden sollen oder müssen. Die eingangs genannte Industriehalle mit verschiedenen Beleuchtungsgruppen verkörpert eine solche Situation. Die Lichtschalter sollen sich an einem gemeinsamen Ort, dem Eingang, befinden. Sind die Lampengruppen in einer räumlichen Sequenz angeordnet, bietet es sich an, durch eine kongruente Anordnung der Schalter die Zuordnung zu verdeutlichen. Eine sequentielle Anordnung ist aber nicht die einzige Form, um Kongruenz herzustellen.

Auch auf dieser Abbildung sehen Sie links eine Umsetzung der Kongruenz. In diesem Falle sind nicht die Platten so angeordnet, dass sie der „Leserichtung“ der Knöpfe entsprechen, sondern die Knöpfe sind jetzt räumlich so angeordnet, dass die Zusatzinformation vorne/hinten in Bezug auf die Blickrichtung eine eindeutige Zuordnung ermöglicht.

Kongruenz ist nur eine Möglichkeit der räumlichen Zuordnung³⁰. Eine weitere, vor allem auch für uns in der Gestaltung von Nutzungsschnittstellen sehr wichtige Möglichkeit ist die Kollokation. In der Abbildung sehen Sie beim mittleren Bild, dass die Stellglieder in direkter Nähe zu den jeweiligen Herdplatten angebracht sind. Es kommt jetzt nicht mehr zu Fehlbedienungen. In Bezug auf das Beleuchtungsbeispiel in einer Fabrikhalle bedeutet Kollokation, dass in jedem einzeln zu beleuchtenden Hallenbereich ein eigener Lichtschalter angebracht ist. Dieser wäre dann jeweils in der Nähe der zu schaltenden Lampen. Bei Kollokation fällt die Zuordnung auf jeden Fall leicht. Zwar verringert sich dadurch die Gefahr, einen falschen Schalter zu drücken, doch erkauft man sich diesen Vorteil durch Nachteile an anderer Stelle. So wird beispielsweise der Aufwand größer, wenn man dieselbe Operation auf alle Anzeigeelemente anwenden will. Im Lichtschalter-Beispiel wären das zusätzliche Wege, bei digitalen Nutzungsschnittstellen könnte es die Selektion aller Elemente mithilfe eines digitalen Gummibands sein.

Bei der Kopplung als einem weiteren Lösungsansatz wird zwischen dem Stellglied und der Herdplatte eine sichtbare Verbindung in Form einer Linie hergestellt. In diesem Fall wird dem Auge als Zusatzinformation gewissermaßen eine Leitspur angeboten, um von einem Element zum anderen zu kommen. Im rechten Teil der Abbildung ist gut zu sehen, dass man die Techniken auch kombiniert einsetzen kann, indem die sichtbare Verbindung beispielsweise mit der Platzierung in räumlicher Nähe kombiniert wird. Das kann insbesondere helfen, Verbindungen möglichst übersichtlich und kreuzungsfrei zu gestalten. Abgesehen davon ist festzuhalten, dass diese Techniken bei komplexeren Beispielen schnell an ihre Grenzen stoßen. In diesen Fällen sind weitere Konzepte erforderlich, die in das Gebiet der Visualisierung fallen, das wir nicht behandeln.

Zuordnung in grafischen Nutzungsschnittstellen

Grundsätzlich sollte man versuchen, in grafischen Nutzungsschnittstellen eine Kollokation von zusammengehörigen Objekten vorzunehmen. Die Begründung für diese Designentscheidung liegt in den Eigenschaften des menschlichen Sehsinns, die wir im Kapitel Architektur der Wahrnehmung skizziert haben. Wenn zwei zusammengehörige Objekte weit auseinander liegen, dann kann zu einem Zeitpunkt nur jeweils eines im Zentrum der Wahrnehmung liegen, also scharf wahrgenommen werden. Das andere zugeordnete Objekt muss dann durch Blickbewegungen gesucht werden. Auch das kostet Aufwand und verkörpert erzwungene Sequenzialität; schlimmstenfalls kann es unentdeckt bleiben oder zu Fehlhandlungen verleiten.

Diese Abbildung zeigt einen Ausschnitt aus einem Einstellungsfenster aus Microsoft Word, das unter anderem erlaubt, die Seitenränder anzupassen. Rechts im Fernster wird in einer Vorschau verdeutlicht, was links – weit entfernt – eingestellt wird. Ein erster Schritt zur Kollokation wäre, das große Nichts in der Mitte zu überbrücken und die Darstellung und die Eingabefelder näher zusammenzurücken.

Die Kollokation kann aber noch weiter gehen, denn die eingestellten Werte können einem auf der Darstellung verdeutlichten Rand oben, unten, rechts oder links zugeordnet werden. Naheliegend wäre also, die umgesetzte Darstellung der Eingabefelder direkt an den von ihnen jeweils beeinflussten Rändern zu positionieren.

Der Ansatz der Kopplung kommt im Design von Nutzungsschnittstellen relativ selten vor. Das ist auch gut so, weil eine Zuordnung durch Kollokation in der Regel vorzuziehen ist. Auf Kollokation zu verzichten und stattdessen eine Kopplung durch eine Linie oder einen Pfeil herzustellen, sollte daher die begründete Ausnahme bleiben. Die Technik der Kopplung bietet sich jedoch an, wenn bestimmte Elemente beieinanderbleiben sollen, aber dennoch eine räumliche Zuordnung unterstützt werden soll.

Die Grafik zeigt einen Anwendungsfall für die Kopplung. Die Zuordnung von Objekten durch Verbindungslinien ist bei der Einblendung von zusätzlichen Elementen eine gute Technik, um zu verdeutlichen, worauf sich die Einblendung bezieht. Das Beispiel oben stammt aus der Mitte der 1990er Jahre. Das eingesetzte Mailprogramm eines damaligen Unix-Systems hat ein interessantes Nutzungsschnittstellen-Feature. Es zeigt bei einer Fehlermeldung, hier im Fall einer ungültigen Mailadresse, durch einen dreidimensional anmutenden Pfeil, worauf sich die Meldung bezieht.

Generische Buttons schaffen Zuordnungsprobleme

Ein Zuordnungsproblem tritt auf jeden Fall dann auf, wenn Buttons mit einem generischen Text wie „Okay“, „Ja“ oder „Nein“ beschriftet werden. Wenn Buttons so beschriftet sind, sieht man nur, dass etwas passiert, aber nicht, was genau passiert. Der Text, der diese Information enthält, befindet sich an einer anderen Stelle auf dem Bildschirm.

Unten sehen Sie eine Dateiauswahl auf einem Atari ST aus den 1980er Jahren. Die Dateiauswahlboxen des Betriebssystems TOS sind in vielerlei Hinsicht nicht gut. Besonders problematisch in Zusammenhang mit der Zuordnung ist, dass die eigentliche Auswahlbox immer gleich gestaltet und die Buttons immer mit „OK“ und „Abbrechen“ betitelt sind, unabhängig davon, ob man eine Datei öffnen, speichern oder, wie in diesem Fall abgebildet, löschen will. Wofür das „OK“ in obiger Abbildung steht, findet sich auch auf dem Bildschirm; die erste Zeile des Bildschirms ist dafür vorgesehen.

Stellen Sie sich folgendes Szenario vor: Sie haben eine Datei bearbeitet und sind damit fertig. Sie wollen mit etwas anderem fortfahren und dafür eine andere Textdatei öffnen. Doch zunächst müssen Sie den gerade bearbeiteten Text noch abspeichern. Sie wählen also „Speichern unter“ aus. Jetzt klingelt das Telefon. Sie sprechen einige Zeit und kehren zum Computer zurück. Was wollten Sie gerade noch machen? Klar, Sie wollten eine Datei öffnen. Also den Dateinamen links anklicken und auf OK klicken. Die anschließende Frage, ob Sie die Datei wirklich überschreiben wollen, ist im Eifer schnell weggeklickt und schon haben Sie wertvolle Arbeit zerstört. Fehlhandlungen lassen sich nicht vom System aus ausschließen. Doch wenn der Button nicht mit „OK“, sondern „Speichern“ beschriftet ist, wird man durch diese zusätzliche Information am Ort der Aufmerksamkeit unterstützt, weil es jetzt sehr viel unwahrscheinlicher ist, dass man diese Information übersieht. Eine zusätzliche Information im aktuellen Aufmerksamkeitsbereich kann eine Differenzerfahrung auslösen, eine außerhalb davon jedoch nicht.

In der viel gescholtenen Windows-Version 1.0 aus der gleichen Zeit gibt es dieses Problem übrigens nicht. Zwar ist auch diese Dateiauswahl nicht ideal, aber zumindest sind die Buttons spezifisch beschriftet. Diesem frühen Beispiel sollte man folgen!³¹, denn die relevanten, zur sicheren Handlungsausführung notwendigen Informationen sollten an der Stelle stehen, an der die Handlung ausgelöst wird, also auf dem Button selbst.

Generische Buttons wie „OK“, „Ja“ und „Nein“ sind grundsätzlich zu vermeiden, da sich die Beschreibung der Button-Funktion zwangsläufig an einem anderen Ort befinden muss und damit ein Zuordnungsproblem besteht.

Das Phänomen generischer Buttons ist zwar alt, gehört aber leider nicht der Vergangenheit an. Bei dieser „Erinnerung an Parkzeitende“ einer aktuellen Handy-App für bargeldloses Parken muss erst sehr aufwändig der komplette Text gelesen werden. Ärgerlicherweise ist diese Meldung auch noch irreführend, denn man kann geneigt sein, die Erinnerung an das Ende der Parkzeit mit „OK“ im Sinne von „Danke, ich habe verstanden“ zu bestätigen, weil man ohnehin gerade auf dem Rückweg ist. Damit stimmt man dann aber der Parkzeitverlängerung zu. Die muss man zwar nochmals bestätigen, doch verkörpert das in diesem Fall eine überflüssige Zusatzhandlung.

In dieser Meldung der Karten-App von Windows 10 muss auf eine Frage mit „Ja“ oder „Nein“ geantwortet werden. Dabei gibt es gleich zwei Probleme. Das erste ist, dass es sich wiederum um einen generischen Knopf handelt und dass folglich die Information, was der Knopf bedeutet, an anderer Stelle steht. Hinzu kommt, dass diese andere Stelle eine Frage ist. Das heißt, es steht eigentlich nirgends genau, was passiert, wenn man „Nein“ drückt. Man muss die Frage interpretieren, um zu wissen, dass „Nein“ das Gegenteil von dem in der Frage Angesprochenen bedeuten muss. Das gewählte Design ist also gleich doppelt kompliziert.

Mehr dazu, warum es nicht sinnvoll ist, in der Nutzungsschnittstelle einen Pseudodialog zu führen, finden Sie in unserem Exkurs-Kapitel zum Mensch-Computer-Dialog. Pseudodialoge wie zum Beispiel Fragen als Interaktionstechnik sollten generell vermieden werden, weil es darum geht, eine Auswahl aus den Alternativen anzubieten, die von der Software vorgegeben werden. Es geht somit um bekannte und feststehende Angebote, bei denen die Aufforderung eine Wahl zu treffen direkter ist, als dies hinter einer Frage zu verstecken. Umso schlimmer wird es, wenn auch noch Befindlichkeiten (Sind sie sicher?) oder Selbsteinschätzungen abgefragt werden. Wenn in einer Gestaltungssituation Fragen unverzichtbar sein sollten, sollten zumindest keine generische Button-Beschriftungen eingesetzt werden. Die zur Verfügung stehenden Optionen sollten immer direkt mit spezifisch beschrifteten Buttons angeboten werden.

Dass die Interpretation von „Ja“ und „Nein“ in Bezug auf eine Frage nicht immer einfach ist, ist zwar schon länger bekannt. Um diese Schwierigkeit zu vermeiden, hilft es auch nicht, statt einer Veränderung der Buttons lediglich umfangreichere Beschreibungen anzufertigen. Meldungsfenster, bei denen das der Fall ist, finden sich heute noch, auch in vielen Standardanwendungen. Geradezu klassisch ist in diesem Zusammenhang diese Meldung von Excel. Hier stellen „Ja“ und „Nein“ tatsächlich Antworten auf eine Frage dar. Diese ist aber zunächst einmal nicht zu finden, denn oben in fetter Schrift steht nicht die Frage, sondern eine Beschreibung des Problems. Unabhängig davon ist die Frage ohne Zusatzwissen nicht beantwortbar, denn es fehlen klare Angaben, was „Ja“ im System bewirkt. Dies erfährt man erst weiter unten, wo zu jedem Knopf beschrieben steht, was er bewirkt. Diese Meldung stellt in ihrer Komplexität vor allem für Neulinge eine große Herausforderung dar.

„Okay“ (oder „OK“), „Ja“ und „Nein“ sind die häufigsten Fälle von generischen Beschriftungen. Es gibt aber noch weitaus mehr generische Texte in Buttons und Menüs. Diese Auswahl im TOR-Browser zeigt „Niemals für diese Internetseite“ und „Jetzt nicht“ als Optionen an. Auch diese Angaben sind letztlich generisch, denn man muss ebenfalls an anderer Stelle lesen, worum es eigentlich geht. Ein gelegentlich genutztes Argument für ein solches Design ist, dass es dazu führe, dass der erläuternde Text tatsächlich gelesen werde. Dieses Argument ist jedoch zweifelhaft. Wenn man auf den Erläuterungstext aufmerksam machen will, gibt es die Möglichkeiten der Auszeichnung durch äußere Merkmale wie z. B. Farbe oder Schrift).

Auch dieses Fenster zum Exportieren einer Präsentation in Apple Keynote zeigt das Problem generischer Knöpfe. Was passiert bei „Weiter…“? Es steht nicht an dieser Stelle, sondern verteilt; zum einen in der Kopfzeile des Fensters („Exportiere deine Präsentation“) und zum anderen in der Auswahl des Feldes „PDF“. „PDF exportieren…“ wäre daher eine passende Beschriftung für den Button an dieser Stelle.

Grenzfall „Abbrechen“

Ein Grenzfall, was das Vermeiden generischer Beschriftungen angeht, ist die Beschriftung eines Buttons mit „Abbrechen“. Grundsätzlich ist „Abbrechen“ generisch, denn es sagt nicht, was denn da eigentlich abgebrochen wird. Dennoch würden wir nicht unbedingt empfehlen, in jedem Fall etwas Ausführliches zu schreiben. Unten sehen Sie ein Datei-Kopier-Meldungsfenster. Wir werden später im Kapitel Prozesse besprechen, dass es immer eine Möglichkeit geben muss, einen solchen Vorgang abzubrechen. Sie können in diesem Fall den Knopf mit „Abbrechen“ beschriften, denn der Kopierdialog beschreibt eindeutig, um welchen Prozess es sich handelt, und um den Prozess informiert abbrechen zu können, müssen Sie sich diese Informationen ohnehin vorher ansehen. Eine längere Beschriftung hätte dann keine Zusatzinformationen und wäre damit im Grunde genommen erzwungene Sequenzialität, denn sie muss ja zusätzlich gelesen werden.

In anderen Fällen sollten Sie „Abbrechen“ aber durch etwas Spezifischeres ersetzen. Dies gilt vor allem dann, wenn die abzubrechende Aktion selbst ein Beenden oder Abbrechen ist. Bleiben wir bei obigem Beispiel. Ein Klick auf „Abbrechen“ sollte eine Bestätigung erfordern, die erläutert, was die Folgen eines Abbruchs zu diesem Zeitpunkt sind. (Siehe Differenziertheit im Kapitel Rückmeldungen und Beeinflussbarkeit im Kapitel Prozesse.) Die Bestätigungsmeldung sollte dann aber auf keinen Fall wiederum einen „Abbrechen“-Knopf enthalten. Es ist kaum nachvollziehbar, dass die Aktion, die dann abgebrochen wird, das Abbrechen ist, dass man also das Abbrechen abbrechen muss, um mit dem Kopieren fortzufahren.

Schließen wir diesen Aspekt mit einem positiven Beispiel ab. Beim dargestellten Eingabefeld für Zahlungsdaten, mit dem ein Kaufvertrag abgeschlossen wird, hat man sich viel Mühe gegeben, einen nicht generischen Button zu präsentieren. Wäre der orangefarbene Button unten mit „Okay“ oder „Weiter“ beschriftet, wäre es eindeutig ein zu bemängelnder generischer Button. Eine Beschriftung mit „Zahlen“ oder „Jetzt bezahlen“ wäre schon zufriedenstellend. In diesem Fall ist man sogar noch einen Schritt weitergegangen und gibt auch den zu zahlenden Betrag nochmals an. Unbedingt notwendig ist das vielleicht nicht, doch ist es eine zusätzliche Information, die eine Rückversicherung liefert und daher sehr zu begrüßen.

Zusammenfassung: Vermeiden Sie generische Beschriftungen in der Nutzungsschnittstelle, denn sie verkörpern immer ein Zuordnungsproblem. Beschreiben Sie stattdessen im Rahmen des zur Verfügung stehenden Platzes kurz und knapp, aber möglichst spezifisch, welche Aktion durch einen Button oder Menüeintrag ausgelöst wird. Im Zweifelsfall gilt es, immer spezifisch zu formulieren und Abweichungen nur in begründeten Ausnahmefällen zuzulassen.

Gruppieren und Absetzen durch Anordnung

Die beschriebenen Zuordnungstechniken dienen dazu, Objekte, die eine inhaltliche Einheit bilden, grafisch-räumlich zuzuordnen. Es geht um die Zuordnung eines Buttons zu seiner Beschriftung oder einer Feldbeschriftung zu ihrem Eingabefeld. Die Techniken geben jedoch keine Hinweise hinsichtlich der Anordnung von Objekten, die zwar zusammengehören, einander aber nicht eins zu eins zugeordnet sind. Wir sprechen in einem solchen Fall nicht von „Zuordnung“, sondern von „Gruppierung“. Stellen Sie sich ein Eingabeformular auf einer Website vor. Unter vielen Angaben geben Sie in diesem Formular auch Ihre Adresse an. Die einzelnen Teile der Adresse, also Straße, Hausnummer, Postleitzahl, Ort etc. sind nicht einander zugeordnet in dem Sinne, wie es eine Beschriftung und ein Eingabefeld wären. Sie gehören aber zusammen und bilden eine Gruppe. Diese Gruppierung sollte sich in der Anordnung der Objekte zueinander widerspiegeln. Welche Elemente jeweils gruppiert werden, ist abhängig von der Arbeitsaufgabe und gehört entsprechend in den Bereich Gebrauchstauglichkeit.

Die Voraussetzung für die Visualisierung von Gruppenzugehörigkeiten ist das räumliche Gruppieren, also das Positionieren und Arrangieren von zusammengehörigen Objekten dergestalt, dass die Elemente einer Gruppe räumlich nahe beieinanderstehen und Gruppen untereinander deutlich voneinander abgesetzt sind. Idealerweise – das werden wir in den Beispielen sehen – findet dieses Absetzen durch das Ausnutzen von Platz statt.

Die Abbildung oben zeigt eine Eingabemaske der Literaturverwaltung von LibreOffice. Zwar ist diese Maske gut aligniert und sieht damit ordentlich aus, aber geordnet in dem Sinne, dass inhaltliche Gruppen sichtbar dargestellt wären, ist diese Maske nicht. Eines der Hauptprobleme ist, dass alle Felder ständig sichtbar sind. Mit der im Kapitel Übergänge vorgestellten Technik des Aufdeckens bei Bedarf wäre es möglich, die Anzahl der Felder je nach Wahl im Feld „Typ“ stark einzuschränken. Dazu später mehr.

Effektive Gruppierung beinhaltet immer auch eine Form des Absetzens. Es reicht also nicht, die Elemente, die zusammengehören, nur in räumliche Nähe zu bringen. Die Elemente einer Gruppe müssen sich vielmehr von denen einer anderen Gruppe wahrnehmbar absetzen.

Die Abbildung unten zeigt einen Ausschnitt aus einer Maske des Programms „Schild-NRW“, eines Programms zur Verwaltung von Schülerdaten. Es wird an den Schulen in Nordrhein-Westfalen eingesetzt. Sie haben das Programm schon als Beispiel im Kapitel Icon-Gestaltung kennen gelernt. Das Programm ermöglicht unter anderem auch das Drucken von Zeugnissen und viele andere typische Verwaltungstätigkeiten.

Schon auf den ersten Blick wirkt diese Maske überladen. Jedes freie Fleckchen Bildschirm wird genutzt, um weitere Objekte darzustellen. Dabei bleiben die Grundlagen der Gruppierung unberücksichtigt. Geburtsname und Geburtsort werden nicht mit dem Geburtsdatum gruppiert. Selbst wenn es in diesem Fall Gründe dafür geben sollte, scheint die Nähe des Feldes „Geburtsname“ zum Feld „E-Mail“ willkürlich gewählt. Es ist anzunehmen, dass diese Felder schlicht dort untergebracht worden sind, wo noch Platz vorhanden war. Auch andere Gruppierungen sind zweifelhaft. Warum stehen zum Beispiel die Konfession und die Einstellung „Konfession auf Zeugnis“ nicht beieinander? Es mag auch dafür Gründe geben, aber es gibt nichts in der Anordnung der Elemente der Maske, das auf diese Gründe hinweisen könnte. Auch für die Positionierung „Datensatz ist Duplikat“ bei den Angaben zu Konfession und Staatsangehörigkeit fällt uns als mögliche Begründung nur ein: „Da war halt Platz!“.

Versuchen wir uns daran, die Felder umzusortieren und die Gruppen durch das Ausnutzen von Platz voneinander abzusetzen. Platz scheint es auf dieser Maske erst einmal nicht zu geben. Das täuscht jedoch. Zum einen ist das Fenster recht klein. Übliche Bildschirme in Schulverwaltungen können heute sicher mehr Bildschirmobjekte gleichzeitig darstellen, als zu sehen ist. Aber auch wenn man bei diesem kleinen Fenster bleibt, können wir uns etwas Platz verschaffen. Schauen Sie sich einmal die untere Kante der Abbildung an. Warum gibt es dort so viele Linien? Zu welchem Zweck dient überhaupt die Umrahmung des kompletten oberen Bereichs? Ein erster Ansatz ist, zunächst einmal sämtliche Umrahmungen mit Ausnahme der Umrandungen der Eingabefelder zu entfernen. Weiteres Potenzial für Platzeinsparungen findet sich vor allem im unteren Bereich der Maske. Dort steht „Schulbesuchsjahre“ in einer Zeile, die ansonsten leer bleibt. Außerdem sind sehr breite Auswahlfelder für „Gliederung“, „Org.-Form“ und „Prüfungsordnung“ vorgesehen. Auch in diesem Fall lässt sich Platz einsparen. Schlussendlich gibt es ein wenig Potenzial durch das Zusammenfassen von Elementen. So wird wohl nur ein Schulkind, das mit dem Bus zur Schule kommt, auch die Angabe einer Haltestelle benötigen. Diese beiden Felder können also zu einem einzigen verschmolzen werden.

Unter Berücksichtigung des Einsparpotenzials lässt sich der Platz zum Absetzen von Gruppen finden. Das Ergebnis dieser schnellen Umsortierung und Umgruppierung ist vielleicht nicht sehr ästhetisch, aber es ist zumindest erheblich strukturierter und übersichtlicher als die überladene Maske zuvor. Die sichtbaren Gruppen sind nun Abbildungen der inhaltlichen Zusammenhänge. Auf zusätzliches Zierwerk wurde im Sinne der Übersichtlichkeit aber auch zum Vorteil der Strukturiertheit verzichtet.

Ein weiteres Beispiel für eine Nutzungsschnittstelle, bei der die Gruppierung nicht hinreichend durch die Anordnung unterstützt wird, illustriert die Abbildung unten. Auf der linken Seite ist eine Fernbedienung für einen digitalen Bilderrahmen abgebildet. Es handelt sich also nicht um eine digitale Nutzungsoberfläche, sondern um einen realweltlichen Gegenstand, was aber für unsere Überlegungen unerheblich ist. Das Beispiel verdeutlicht, dass ein rein geometrisches Anordnen, also das Ausrichten an einem Raster, nicht selten zu gut nutzbaren Oberflächen führt. Ausrichtungen an Rändern und Symmetrien sind kein Ersatz für sinnvolle Gruppierungen, denn sie lassen die inhaltlichen Zusammenhänge außer Acht.

Betrachtet man die Anordnung genau, zeigt sich, dass es eine Gruppierung gibt und sich diese auch in gewisser Weise räumlich niederschlägt. Man kann zum Beispiel ein Steuerkreuz mit Pfeilen in alle Richtungen und „Enter“ in der Mitte ausmachen, und auch die typischen vom CD-Spieler bekannten Funktionen zum Spulen und Springen befinden sich in räumlicher Nähe zueinander in der vorletzten Knopfreihe. Woran es aber fehlt, ist eine Unterstützung dieser Gruppierungen durch eine räumliche Strukturierung des Wahrnehmungsfeldes. Auf der rechten Seite ist ein Vorschlag zur Anordnung der Elemente der Fernbedienung abgebildet dergestalt, dass die Gruppierungen zwar sichtbar werden, es aber trotzdem eine einigermaßen platzsparende, fernbedienungstypische Anordnung gibt.

Die Beispiele dieses Kapitels zeigen, wie Gruppen von Elementen durch räumliches Absetzen voneinander getrennt werden können. Dieses räumliche Absetzen ist eine entscheidende Voraussetzung, um inhaltliche Zusammenhänge visuell abbilden zu können: Was inhaltlich zusammenhängend ist, steht auch nah beieinander, was nicht zusammenhängend ist, ist durch einen Abstand getrennt.

Das Absetzen gleichartiger Elemente

Grundsätzlich sollten Sie Objekte nur dann absetzen, wenn es einen inhaltlichen Grund gibt. Für diese Regel gibt es aber eine Ausnahme, denn es kann sehr wohl sinnvoll sein, gleichartige Objekte voneinander abzusetzen, obwohl es keine inhaltliche, wohl aber eine optische Notwendigkeit dafür gibt.

Betrachten Sie einmal die Zeichenfolge DE74476501301010037693. Es handelt sich um eine international normierte Kontonummer (IBAN). Sie ist recht lang und schwer zu lesen, denn bei einer langen gleichförmigen Reihe von Zeichen kommt man schnell durcheinander, wenn man eine solche Nummer lesen oder händisch eingeben muss. Dies wird verstärkt, wenn die Zeichenkette unbekannt oder nur selten bearbeitet wird. Tatsächlich ist es deutlich einfacher, wenn die gleiche Zeichenkette in separate Teilstücke aufgeteilt wird, beispielsweise in der Form DE74 4765 0130 1010 0376 93. Die IBAN ist durch das Einfügen von Zwischenräumen aufgeteilt worden. Diese Zusatzinformation ist für die Bestimmung des Wertes unerheblich und dient nur dazu, das visuelle Erkennen zu unterstützen. Durch die optische Unterteilung entstehen neue Einheiten, die in der Psychologie als „Chunks“ bezeichnet werden. Wie sehr ein solches Absetzen bei der Wahrnehmung hilft, verdeutlicht das folgende Beispiel:

Dies ist die Darstellung einer Zahl. Jeder einzelne Strich steht für eine Eins. Sie müssen also nur die Striche zählen, um zu sehen, welche Zahl kodiert wurde. Können Sie auf die Schnelle erkennen, wie viele Striche vorhanden sind? Sie müssten sie abzählen und jede Überprüfung würde den Aufwand mindestens verdoppeln, da der gesamte Zählvorgang erneut durchgeführt und zuvor noch das jeweilige Ergebnis gemerkt oder aufgeschrieben werden müsste.

Die gleiche Zahl kann man auch anders darstellen. Trauen Sie es sich jetzt zu, die Striche zu zählen? Ähnlich der IBAN sind jetzt mehrere Einsen zu – in diesem Fall – Fünferblöcken zusammengefasst³².

Wenden wir die gleiche Technik des „chunking“ nochmal an, wird es noch einfacher. Jeweils vier Fünfergruppen bilden eine Zwanzigergruppe. Wir haben also 20+20+20+20+5+3. Es sind 88 Striche. Voilà!

Warum ist das so? Wir haben schon beim Thema Typographie gesehen, dass Wortbilder entscheidend sind, um einen Text effizient zu erfassen. Sobald diese wegfallen, indem beispielsweise alle Leerzeichen und Satzzeichen gestrichen werden, ist man gezwungen, Zeichen für Zeichen zu lesen. Dadurch wird es schwieriger, bei unterbrochenem Lesen – wie es zum Beispiel beim Übertragen von längeren Zeichenketten auftritt – den Aufsetzpunkt wiederzufinden. Insgesamt wird auch der Freiraum massiv eingeschränkt, durch versiertes Lesen die Abstände zwischen den Fixationspunkten zu variieren und damit den individuellen Prozess des Hypothesenbildens zu unterstützen. Wie wir bereits im Kapitel Architektur der Wahrnehmungverdeutlicht haben, beinhaltet Zählen im Vergleich zur direkten Wahrnehmung erheblich mehr erzwungene Sequenzialität, wobei jedoch festzuhalten ist, dass durch direkte Wahrnehmung nur eine sehr geringe Anzahl (etwa 4 bis 6) optisch gleichartiger Objekte bestimmt werden kann.

Das Aufteilen einer großen Menge von Objekten bzw. das Zusammenfassen gleichartiger Objekte lediglich nach dem formalen Kriterium der Anzahl der Elemente ist der Architektur unseres Wahrnehmungssystems geschuldet und somit unabhängig davon, wofür die Elemente inhaltlich stehen. Es ist daher geboten, auch ohne einen inhaltlichen Unterschied, räumlich abzusetzen. Dies gilt insbesondere auch beim wiederholten Einsetzen der Technik des Gruppierens, wodurch Hierarchien entstehen, die weitere optische Gestaltungsforderungen stellen.

Alternative und ergänzende Absetzungstechniken

In den bisherigen Beispielen haben wir zum räumlichen Absetzen Platz genutzt. Absetzen durch das Schaffen von Platz ist, wenn genügend davon vorhanden ist, immer geboten. Platz ist aber bei der Gestaltung nicht im Überfluss vorhanden. Glücklicherweise gibt es ein paar weitere Techniken, die genutzt werden können, um trotzdem die Gruppierung durch optische Hinweise zu unterstützen.

Diese Abbildung zeigt zwei andere Möglichkeiten, Objekte voneinander abzusetzen. Auf der linken Seite sind dazu die Knöpfe eingefärbt, auf der rechten werden sie mit einer gemeinsamen Fläche hinterlegt. Hier ist jedoch Vorsicht geboten, denn das Einfärben kann nicht das räumliche Gruppieren ersetzen, sondern nur zusätzlich betonen. Prinzipiell können zwar auch räumlich verteilte Objekte über eine Farbkodierung als zusammengehörig ausgezeichnet werden, doch erfordert dies aufgrund der selektiven Aufmerksamkeit unseres Wahrnehmungssystems einen erheblichen mentalen Zusatzaufwand. Die Konsequenz ist, dass räumlich verstreute Elemente nicht ungeordnet auf eine Oberfläche gesetzt werden sollten, sondern die zusammenhängenden Objekte stets zunächst in räumliche Nähe zueinander gebracht werden müssen. Das Verwenden verschiedenfarbiger Elemente oder das Schaffen verschiedenartiger Hintergrundflächen kann dann das räumliche Absetzen teilweise ersetzen, kann es aber auch effektiv ergänzen, wobei zwischen zusätzlicher Prägnanz in der Gruppenbildung und der Forderung, überflüssige Elemente zu vermeiden, abzuwägen ist.

Die Handlungsschritte zum Schaffen einer sinnvollen Gruppierung sind zusammengefasst:

1. Das räumliche Gruppieren zusammengehöriger Elemente durch Platzierung in unmittelbarer Nähe,
2. wenn möglich, das Absetzen der Gruppen durch das Schaffen von räumlichem Abstand zwischen ihnen und
3. gegebenenfalls zusätzlich – oder bei Platzmangel alternativ – die Unterstützung der Gruppierung durch Schattierungen, Einfärben oder Flächenunterschiede.

Stapeln statt Umrahmen

Die Techniken zur Gruppierung haben letztlich den Zweck, die Zusammengehörigkeit von Objekten als Gruppe und damit die Abgrenzung dieser Gruppe von anderen Objekten darzustellen. Neben der Verwendung von Platz, dem Einfärben der Objekte oder der Platzierung auf erkennbaren Hintergrundstrukturen ist die Umrahmung eine häufig gewählte Technik. Sie wird oft von GUI-Buildern vorgegeben und entspricht zum Beispiel auch der Standarddarstellung im World Wide Web, wenn das Fieldset-Tag verwendet wird. Ein Vorteil der Umrahmung gegenüber dem Absetzen ist, dass sie auch eine Struktur mit mehreren Hierarchieebenen, also Gruppen innerhalb von Gruppen, auf einfache Art ermöglicht. Wir haben die Umrahmung bislang jedoch nicht besprochen, weil sie der Forderung nach Übersichtlichkeit zuwiderläuft.

Auch in diesem Fall ist die Architektur der Wahrnehmung der entscheidende Punkt. Das menschliche Auge sieht bei einer Fixation nur einen sehr kleinen Teil des Wahrnehmungsfeldes scharf und damit auch bewusst. Das Auge kann folglich bei einer Gestaltung wie der obigen jeweils nur einen Bruchteil jeder Umrandung erfassen (blauer Kreis). Die Information in diesem kleinen Teil ist durch die Verwendung einfacher Linien nicht besonders spezifisch, weil sie keinerlei Hinweise auf die Schließung der Figur gibt. Das Bilden von Hypothesen, wo die Schließung einer Figur zu erwarten ist, wird nicht unterstützt, weil am Ort der Fixation nicht entscheidbar ist, ob eine Kante eine linke oder rechte bzw. eine obere oder untere Kante verkörpert. Das Wahrnehmungssystem muss also die Struktur in vielen Fixationen abwandern.

Nehmen wir zur Illustration eine einfachere Struktur. Sie besteht aus zwei abgeteilten Flächen, wobei in der linken Fläche wiederum eine weitere Fläche enthalten ist. Die Abtrennung ist jeweils durch eine Umrahmung dargestellt. Der eingezeichnete Kreis zeigt in etwa, wie groß der Wahrnehmungsbereich zum Fixationszeitpunkt ist. Nur mit den darin enthaltenen Unterschieden muss das Wahrnehmungssystem entscheiden, in welcher Richtung es den nächsten Fixationspunkt setzt, um die Hypothese zu überprüfen.

Die Abbildung rechts zeigt den Bereich des Kreises im Ausschnitt, der lediglich drei parallele Linien enthält. Für keine der Linien kann das Wahrnehmungssystem entscheiden, ob hier eine Fläche beginnt oder endet bzw. auf welcher Seite der Kante sich die Gruppe fortsetzt. Viele Interpretationen wären möglich. Dieses Problem lässt sich beheben, wenn zur Gruppierung nicht nur einfache Linien eingesetzt werden, sondern der Eindruck aufeinander gestapelter Flächen erzeugt wird, denn in natürlichen Umgebungen liefert das Licht, das zum Wahrnehmen erforderlich ist, bei gestapelten Objekten wahrnehmbare Hinweise auf ihre Lage zueinander und damit auch auf ihre Gruppierung. Es geht also in der Konsequenz darum, zusammengehörige Bereiche nicht zu umrahmen, sondern visuell zu stapeln. Die Techniken, mit denen diese Stapelung erreicht werden kann, kennen Sie schon. Es sind im Prinzip die gleichen wie die zur plastischen Darstellung von Buttons, die wir Ihnen im Kapitel Bildschirmobjekte bereits vorgestellt haben.

In den beiden Abbildungen ist die bei Weitem einfachste Technik des Stapelns zu sehen, die ohne große grafische Finessen auskommt. Statt die Flächen durch eine einheitliche Linie zu umrahmen, wurden die linken und oberen Kanten hell, die untere und rechte Kante dunkel eingefärbt. Mit der Annahme einer oben links befindlichen Lichtquelle gibt die Zusatzinformation helle oder dunkle Kante für das Wahrnehmungssystem einen sichtbaren Hinweis darauf, in welche Richtung sich die Figur bzw. die jeweilige Fläche schließt. Das Auge kann zwar am Fixationspunkt immer noch nicht die gesamte Figur wahrnehmen, doch ermöglicht die Zusatzinformation das Bilden einer begründeten Hypothese, in welche Richtung die nächsten Fixationspunkte gesetzt werden sollten, um die Schließung der Figur zu erreichen bzw. zu bestätigen. Dies spart weitere explorierende Augenbewegungen, um zu einer angemessenen Hypothese zu gelangen.

Dies kann für jede Blickposition auch durch das Simulieren eines Schlagschattens erreicht werden. Der Effekt ist jedoch für sich genommen nicht so prägnant wie der Effekt der Reliefkanten. Dafür funktioniert die Schlagschatten-Methode jedoch auch auf weißem Hintergrund. Bei der Kantentechnik klappt das nicht, denn das würde ja erfordern, eine Kante zu erzeugen, die heller ist als der weiße Hintergrund.

Die Unterstützung der Gruppenbildung durch ihre plastische Darstellung kann noch durch weitere optische Hinweise unterstützt werden. Im obigen Beispiel wurde zusätzlich zu den Schlagschatten eine Helligkeitsstaffelung gewählt.

Abbildungen von Reihenfolgen

Bis hierher haben wir den Bildschirm aufgeräumt, die Objekte ausgerichtet, einander zugeordnet und zusammengehörige Objekte gruppiert. All diese Verbesserungen beziehen sich auf Eigenschaften der Anordnung der Objekte zueinander, sind aber nicht abschließend. Warum etwa befinden sich die Elemente zum Schließen eines Fensters oben im Fenster? Warum gibt man bei Adressen den Ort erst nach der Postleitzahl ein? Für beide Fragen und viele weitere lässt sich keine ergonomisch begründete Antwort geben. Es handelt sich schlichtweg um Konventionen, die wir in einem späteren Kapitel behandeln.

Aber nicht alle Handlungsfolgen sind lediglich Konventionen. Anders ausgedrückt: Es lassen sich Hinweise formulieren, die die Anordnung von Bildschirmobjekten so verbessern, dass die Notwendigkeit zu langwierigen Erkundungen der Nutzungsoberfläche verringert wird. Dies ist immer dann der Fall, wenn inhärente Bearbeitungsreihenfolgen vorliegen.

Die Abbildung zeigt erneut den schon vorgestellten Parkautomaten. Die Pfeile deuten an, in welcher Reihenfolge die Elemente gedrückt werden müssen, um zu einem Parkschein zu kommen. Dass diese Pfeile so wirr wirken, ist kein gutes Zeichen, denn es bedeutet ja, dass zum Erhalt eines Parkscheins die gesamte Nutzungsoberfläche bei jedem Schritt erneut exploriert werden muss. Es gibt keine entlastenden Orientierungshinweise, da die Anordnung der Elemente auf dem Parkautomaten nicht der aus der Aufgabe ableitbaren Handlungsfolge entspricht.

In dieser Überarbeitung wurde die Anordnung verbessert³³. In der neuen Fassung des Parkautomaten sind die Schritte zum Lösen eines Parkscheins klar zu sehen. Es braucht keinen gesonderten Erklärungsbereich mehr, da die entsprechenden Hinweise sich jetzt dort befinden, wo die Ein- und Ausgabeelemente untergebracht sind. Diesen Aspekt hatten wir unter dem Stichwort Zuordnung bereits besprochen. Die Anordnung dieser Elemente wurde an die Bearbeitungsreihenfolge angepasst: Im ersten Schritt ist zu entscheiden, ob es um eine Tageskarte geht. In Schritt 2 wird durch das Bezahlen die Parkzeitlänge festgelegt. In Schritt 3 wird schließlich der Parkschein angefordert und entnommen.

Dies ist ein weiteres Beispiel aus einer digitalen Nutzungsschnittstelle der Prüfungsorganisation einer universitären Lernplattform, an dem wir den gleichen Grundsatz anwenden. Statt alle eine einzelne Person betreffenden Aspekte zu gruppieren, sind jetzt die Phasen der Prüfungsorganisation zugrunde gelegt. Die Schnittstelle ist in die Bereiche „Vor der Prüfung“, „Für die Prüfung“, „Nach der Korrektur“ und „Nach der Prüfung“ eingeteilt, die üblicherweise in dieser Reihenfolge auch durchlaufen werden.

Die hinter diesen Beispielen steckende Idee, die Anordnung der Elemente an die typische Reihenfolge der Abarbeitung zu koppeln, kann auf eine Vielzahl von Anwendungen übertragen werden. Dort, wo sich eine typische Reihenfolge finden lässt, ist sie einer Gruppierung nach Datenklassen vorzuziehen. Doch auch eine solche Gestaltung generiert weitere Designkonflikte. Die Abbildung von Abfolgen und Reihenfolgen auf räumliche Anordnungen kann sehr viel Platz benötigen, der eher selten in ausreichendem Maß zur Verfügung steht. Ist er nicht vorhanden, müsste man Elemente verkleinern, was Probleme mit der Erkennbarkeit hervorrufen könnte. Falls es sich um ein Eingabeelement handelt, würden auch Konflikte mit allen Forderungen auftreten, die wir im folgenden Kapitel unter Handhabbarkeit zusammenfassen werden. Eine Interaktion mit zu kleinen Elementen, die aufgrund von Platzproblemen zu nah beieinander liegen, ist unsicher, langsam oder ungenau. Abhilfe lässt sich schaffen, indem nicht alle Elemente gleichzeitig angezeigt, sondern diese bei Bedarf angefordert oder gleich mehrere Bildschirmseiten oder Fenster verwendet werden. Allerdings sorgen auch diese Techniken wiederum für Designkonflikte. Wir werden sie im Kapitel Übergänge eingehender behandeln.

Positionierung von Elementen zum Handlungsabschluss

Ein besonderer und zugleich sehr häufiger Fall der Abbildung von Bearbeitungsreihenfolgen auf räumliche Anordnungen ist die Positionierung von Elementen, die dem Abschluss der jeweils aktuellen Handlung dienen. Entsprechend der Leserichtung von oben links nach unten rechts gehören die Elemente, die die Handlung abschließen bzw. zum nächsten Schritt weiterleiten, nach unten rechts.

Oben sehen Sie ein Formular für die Anmeldung zur Lehrveranstaltungskritik einer Universität. Der Button für den nächsten Schritt ist nicht ohne Weiteres zu finden. Er befindet sich unten links. Dass man den Button nicht gut erkennen kann, hat mehrere Gründe. Zum einen ist er sehr klein und fällt schon von seiner Größe her nicht auf. Zum anderen hat er keinen Abstand zum Rest des Formulars und befindet sich an einer Stelle, die mit sehr vielen überflüssigen Linien aufwartet. All dies wäre schon ein geringeres Problem, wenn der Knopf entsprechend der Leserichtung nach unten rechts verschoben würde.

Noch problematischer ist die Situation, wenn an der Position unten rechts etwas anderes untergebracht wird als das Objekt, das zum Abschluss der aktuellen Handlung führt. Am Beispiel des obigen Screenshots lässt sich illustrieren, welche Probleme entstehen können. Entsprechend der Leserichtung wird an der Spitze der Handlungsabschluss erwartet. Hier wurde nun aber das „Abbrechen“ untergebracht. Ein Autor dieses Buchs kann aus eigener Erfahrung berichten, schon des Öfteren alle Daten oben eingegeben und dann voller Tatendrang „Abbrechen“ geklickt zu haben.

Abbildungssystematiken müssen erkennbar sein!

Hinter jeder Abbildung von Reihenfolgen und Abfolgen auf räumliche Anordnungen steckt eine Abbildungssystematik. In den obigen Beispielen ist diese sehr einfach. Beim überarbeiteten Parkautomaten und bei der Prüfungsorganisation sind semantisch zusammengehörige Bearbeitungsschritte in eine lineare Anordnung überführt worden. Auch hinter der Positionierung von Elementen zum Handlungsabschluss steckt eine einfache Abbildung. Doch nicht jede Abbildungssystematik ist so einfach bzw. eindeutig. Unabhängig davon, wie komplex eine Abbildung ist, gilt es festzuhalten, dass Abbildungssystematiken nur dann Handlungsfolgen verkürzen und der Orientierung dienen können, wenn sie auch erkennbar sind.

Ein Beispiel für eine Systematik, die nicht erkennbar ist, sehen Sie auf obiger Abbildung. Es handelt sich um die Knöpfe im Aufzug eines Universitätsgebäudes. Die Reihenfolge der Stockwerke mutet eigenartig an. 1, 2, U, 0 ergibt keinen Sinn und auch in Spalten gelesen – 1, U, 2, 0 – wird es nicht besser. Haben die Fahrstuhlbauer die reine Willkür walten lassen?

Haben sie nicht. In der Tat liegt der Gestaltung eine Systematik zugrunde, die jedoch in diesem Fall nicht erkennbar und daher auch nicht handlungsunterstützend ist. Erst wenn der Fahrstuhl mit der gleichen Systematik in einem Gebäude mit noch mehr Stockwerken seine Funktion erfüllen würde, wird die Systematik offensichtlich. Nehmen wir mal an, das Gebäude habe zwanzig Stockwerke. Die insgesamt zwanzig Knöpfe für die Stockwerke untereinander zu platzieren wäre sehr unpraktisch. Man müsste sich für die unteren Stockwerke bücken oder für die oberen recken, damit man die Knöpfe erreichen kann. Statt einer großen Spalte verwendet man daher zwei halb so lange Spalten. In die eine Spalte kommen die geraden und in die anderen die ungeraden Stockwerke. Es bleiben noch U und 0, wobei die 0 kurzerhand zu einer geraden Zahl erklärt und das überbleibende U bei den ungeraden Zahlen einsortiert wird. In Fahrstühlen mit vielen Stockwerken ist diese Systematik offensichtlich und hilfreich, im kleinen Gebäude mit nur zwei Stockwerken verwirrt sie jedoch.

Zusammenfassendes Beispiel: Gestaltung einer Bildschirmmaske

Lassen Sie uns zum Abschluss einen Großteil der in diesem Kapitel erarbeiteten Gestaltungshinweise an einem realistischen Beispiel zusammenfassen. Unsere Aufgabe ist es, eine Eingabemaske für einen Eintrag in eine Personendatenbank zu gestalten. Als Felder für die Datenbank sind (etwas willkürlich) Vorname, Nachname, Firma, Straße, Ort, Postleitzahl, Land, Anredeform(Siezen/Duzen), Relation, Telefon, Handy, Fax, Titel, E-Mail-Adresse, Facebook-Name, Kontoinhaber, IBAN, Bank und PayPal-Account vorgesehen. Ferner braucht unsere Maske je einen Button zum Übernehmen und Verwerfen der Daten.

Zunächst gilt es, Datenklassen als Grundlage der Gruppierung zu bilden. In unserem Beispiel können wir diese Gruppen ausmachen:

• Adresse: Titel, Vorname, Nachname, Firma, Straße, Ort, Postleitzahl, Land
• Verhältnis: Anredeform(Siezen/Duzen), Relation
• Kontakt Telefon: Festnetz, Mobil
• Kontakt elektronisch: Fax, E-Mail-Adresse, Facebook-Name
• Bankverbindung: Kontoinhaber, IBAN, Bank, PayPal-Account
• Buttons: Übernehmen, Verwerfen

Als nächstes gilt es, die Reihenfolgen entsprechend der Konventionen und Abarbeitungsreihenfolgen anzupassen. In unserem Beispiel betrifft das die Postleitzahl und den Ort, die gegenüber der Problembeschreibung, der Konvention entsprechend, vertauscht werden. Außerdem wird die Reihenfolge der Buttons vertauscht, damit der Handlungsabschluss, also das Übernehmen am Ende unten rechts stehen kann.

Im nächsten Schritt können wir Datenfelder anlegen. Dabei gilt es, das Datenformat zu beachten. In unserem Fall deklarieren wir „Titel“ und „Relation“ zu Auswahlfeldern und „Siezen/Duzen“ zu einer binären Auswahl (Checkbox). Weitere Einschränkungen der Feldtypen sind optisch nicht sichtbar, sollten aber in der Praxis gleichwohl vorgenommen werden. So kann die Postleitzahl etwa auf Ziffern beschränkt werden (siehe Eingabeminimalität).

Bevor die Felder ausgerichtet werden können, sollten wir die Länge der Feldbeschriftungen durch Abkürzen angleichen. Wir fassen die Postleitzahl mit dem Ort zu einer gemeinsamen Beschriftung „PLZ/Ort“ zusammen, streichen bei „E-Mail“ das Wort „Adresse“, bei „Facebook“ das Wort „Name“ und bei „PayPal“ das Wort „Account“. Der einzig schwierige Fall ist das Wort „Kontoinhaber“, das wir mit „Kto-Inh.“ abkürzen. Eine bessere Lösung wäre möglich, wenn wir die Gruppen unserer Eingabemaske, wie in der nachfolgenden Abbildung zu sehen, mit einem Titel versehen würden. Dann könnten wir das Wort „Kontodaten“ absetzen und das Feld einfach mit „Inhaber“ betiteln.

Mit den angeglichenen Beschriftungslängen können wir die Felder und Beschriftungen nun ausrichten und dadurch die Anzahl der Fluchtlinien auf ein Minimum reduzieren.

Damit ist die Maske einsatzbereit und kann so verwendet werden. Der Einsatz einer Stapelungstechnik ist nicht unbedingt notwendig. Absetzen durch Platz reicht aus. Trotzdem haben wir im rechten Teil der Grafik abgebildet, wie das aussehen könnte. Mit Hilfe von Helligkeitsabstufungen und Schlagschatten haben wir vier auf den ersten Blick sichtbare Gruppen erzeugt, wobei die Gruppe „Kontakt“ sich nochmal in zwei Untergruppen aufteilt. Die Gruppen und die Maske als Ganzes haben ferner einen Titel bekommen. Den Empfehlungen aus dem Kapitel Typographie entsprechend haben wir die Titel mit einer reduzierten Deckung gesetzt, sodass sie trotz der fett gesetzten Schrift nicht allzu aufdringlich wirken. Es handelt sich um eine Hintergrundinformation, die bei routinierter Nutzung nicht mehr benötigt wird.