Interface-Design handelt von Konzeptmodellen, von Aufgaben- und Nutzerszenarien und von Beziehungsdiagrammen. Von Begriffslexika, Ablaufdiagrammen und von Fallstudien… und von Design.
Das Design ist oft der letzte Schritt auf dem Weg zu einem Interface, doch es ist ein sehr entscheidender. Im Folgenden möchte ich Ihnen zeigen, wie Sie allein durch Design ein Interface entscheidend verbessern können, oder die ganze vorherige Arbeit zunichte machen können.

Worum geht es?

Sie sehen eine Dialogbox aus einem bekannten Animationsprogramm. Sie heißt “Dokumenteigenschaften” und genau das ist auch ihr Zweck; Sie können hier die Größe der Animation, die Geschwindigkeit und die Hintergrundfarbe der Bühne einstellen.

Finden Sie diese Dialogbox übersichtlich? Ich nicht! Aber der Reihe nach. Ich werde am Beispiel dieser kleinen Dialogbox einige typische Fehler aufzeigen, die oft in letzter Minute beim Design entstehen, und sie korrigieren. Aus der Dialogbox wird dadurch kein Meisterwerk und das muss sie auch gar nicht sein, aber man kann sie leicht mit ein paar einfachen Methoden entscheidend verbessern.
Ich will hier auch nicht dieses Programm oder dessen Hersteller an den Pranger stellen; die gezeigten Fehler lassen sich sehr häufig wieder finden. Deshalb ist dieses Beispiel nur als eines von vielen zu sehen.

1. Anordnung

Einer der Grundsätze des Designs lautet: “Was inhaltlich zusammen gehört, gehört auch optisch zusammen.” In diesem Fall sind die Felder für die Größe der Animation weit entfernt von der Linealeinheit, obwohl beides miteinander verwandt ist. Auch die Funktion “Anpassen an” hat mit der Größe zu tun.
Mein Verbesserungsvorschlag für die Dialogbox: Ich habe diese Felder zusammen geschoben und die Hintergrundfarbe und die Bildrate davon etwas abgesetzt.

2. Beschriftung

Die erste Zeile heißt “Größe”, doch das ist ein sehr vager Begriff. Damit es zu keinen Missverständnissen kommt, hat der Designer dieser Dialogbox die beiden Felder, aus denen sich die Größe zusammensetzt, noch einmal separat benannt (“Breite” und “Höhe”). Diese Bezeichnungen stehen aber hinter den Feldern. Dazu kommt ein kleines X, welches irgendwo dazwischen steht.
Beschriftungen zu Feldern sollten immer vor den Feldern stehen und sie müssen unbedingt eindeutig sein. Die Bezeichnung “Größe” hilft hier nicht weiter, ich habe sie entfernt und statt dessen die beiden Felder einzeln benannt. Dass sich aus der Breite und der Höhe die Gesamtgröße der Animation ergibt, versteht ein Benutzer so auch.

3. Einheiten

Die Größe ist in Pixeln anzugeben, deshalb steht nach der Zahl auch “px”. Aber es steht in dem Eingabefeld, was den Anschein erweckt, man könnte die Einheit ebenfalls bearbeiten (und evtl. die Größe in Zentimetern eingeben). Das kann auch verwirren, wenn man einen Moment lang darüber nachdenken muss was passiert, wenn man beim Überschreiben die Einheit px weglässt. Bei der Bildrate hingegen steht die Einheit nach dem Feld — das ist eindeutiger.
Verwenden Sie Eingabefelder nur für Daten, die der Benutzer verändern kann. Wenn, wie in diesem Beispiel, die Einheit sowieso feststeht, stellen Sie sie hinter das Feld. Wenn das Programm nur eine begrenzte Anzahl von Einheiten versteht, bieten Sie zur Auswahl lieber ein Pulldown-Menü an, statt eines Textfelds.

4. Auswahl

Die Funktion “Anpassen an” verändert die Größe der Animation auf einen vordefinierten Wert: Die Ausgabefläche des Druckers, die mindestens benötigte Fläche für den Inhalt oder eine im Programm gespeicherte Standardgröße.
Eine Auswahl aus mehreren Optionen sollte nie mit mehreren Buttons geschehen. In diesem Fall wäre ein Pulldown-Menü geeigneter, weil es, anders als die Buttons, die gewählte Option dauerhaft anzeigt, auch nachdem die Auswahl getroffen wurde. Bei der Linealeinheit wurde die selbe Aufgabe besser gelöst.

5. Steuerungsbuttons

Am unteren Rand sehen Sie mehrere Buttons. Zwei davon steuern die Dialogbox (“OK” und “Abbrechen”), einer öffnet Informationen über die Dialogbox (“Hilfe”) und einer übernimmt die aktuellen Einstellungen als Standard für neue Dokumente (“Als Standard”). Hier sind die Elemente mit verschiedenen Bedeutungen zu nahe beieinander.
Trennen Sie inhaltliche Elemente von Steuerungselementen. In diesem Fall ist der Button “Als Standard” Teil des Inhalts, während die anderen drei Buttons das Verhalten der Dialogbox steuern.

Fazit

Sie sehen, es ist nicht schwer, selbst eine kleine Dialogbox übersichtlich und verständlich zu gestalten. Dabei habe ich das Programmmodell nicht verändert, lediglich das Design. Auch habe ich die Größe der Dialogbox nicht verändert, um zu zeigen, dass gutes Design nicht unbedingt mehr Platz benötigt. Im Gegenteil, die Dialogbox ist jetzt zu breit und könnte etwas schmaler sein.
Die hier genannten Prinzipien gelten nicht nur für Dialogboxen, sondern Sie können Sie auf das gesamte Interface anwenden. Eine Benutzeroberfläche sollte immer der Maxime folgen, den Benutzer nicht unnötig überlegen zu lassen. Die Optionen (“Was kann ich hier machen?”) müssen schnell zu erfassen sein und ein Dialog muss intuitiv bedienbar sein.

Interface Guidelines

Für fast alle grafischen Betriebssysteme gibt es Regeln, wie sich das Interface zu verhalten hat. Diese sollten Sie auf alle Fälle befolgen, denn es erhöht die Wahrscheinlichkeit, dass ein Benutzer ein Element oder Prinzip bereits aus einem anderen Programm kennt. Wenn Sie ein Programm für mehrere Betriebssysteme entwickeln, richten Sie sich für jede Plattform nach deren Eigenheiten. Ihre Benutzer werden eher andere Programme auf der gleichen Plattform verwenden, als Ihr Programm auf mehreren Plattformen. Wenn sich die Benutzer einer Plattform an verschiedene Interaktionsmethoden unterschiedlicher Programmhersteller gewöhnen müssen, hemmt dies den Arbeitsfluss.