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.