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.