You are here:
  • Räumliche Nähe von Aktion und Objekt beim GUI-Design
Drucken
  • Facebook
  • Google+
  • Twitter
  • XING
07.03.2010

Räumliche Nähe von Aktion und Objekt beim GUI-Design

Die Nutzer übersehen Funktionen, wenn Elemente der grafischen Nutzeroberfläche (GUI) wie Buttons oder Checkboxen zu weit von den Objekten entfernt sind, mit denen sie zu tun haben.

 

by Jakob Nielsen (deutsche Übersetzung) - 08.03.2010

 

Eines der ältesten Prinzipien der Mensch-Computer-Interaktion besagt, dass man Dinge, die nahe beieinander stehen, als zusammengehörig versteht. (In ähnlicher Weise betrachten die Nutzer Dinge von gleicher Farbe oder Form, Dinge, die sich gemeinsam bewegen oder sich gemeinsam in einem Kasten oder ähnlichen abgeschlossenen Raum befinden, als zusammengehörig.)

Ich habe bereits 1993 in meinem Buch "Usability Engineering" darüber geschrieben, wie man das Gestaltprinzip der räumlichen Nähe auf das Design von Nutzeroberflächen anwendet, aber das war auch schon lange zuvor gut dokumentiert.

Auch wenn die Erkenntnis schon alt ist und in zahllosen Büchern und Kursen behandelt wird, sehen wir immer wieder, dass Nutzer Funktionen übersehen, weil die Layouts die Regel der Nähe missachten. Wenn Buttons, Drop-down-Menüs, Checkboxen oder andere bedienbare GUI-Elemente zu weit entfernt sind von den Objekten, auf die sie sich beziehen, sehen die Leute sie nicht. Oft bemerken die Nutzer gar nicht, dass etwas fehlt, und nehmen einfach an, dass es die Funktionen nicht gibt.

In E-Commerce-Studien zum Beispiel übersehen die Leute oft, dass Produkte in zusätzlichen Farben oder Grössen verfügbar sind.

Wie iTunes die Richtlinie der räumlichen Nähe verletzt

Hier ein gutes Beispiel: ein Bildschirm der Apple-Software iTunes, bei dem es um die Aktualisierung von iPhone-Applikationen geht. Mehrere Monate lang, nachdem ich ein iPhone bekommen hatte, dachte ich, ich müsste jedes Applikations-Icon für sich manuell überprüfen.

So sieht der Bildschirm aus:

Aktualisierung von iPhone-Applikationen auf iTunes

Am oberen Bildschirmrand steht eine Reihe von Applikations-Icons. Ganz am unteren Ende des Bildschirms gibt es einen Button mit der Aufschrift 1 Update Available (1 Update steht bereit). Wenn man ihn anklickt, werden sämtliche Apps aktualisiert, die ein Update benötigen, so dass es nicht nötig ist, die Icons einzeln anzuklicken.

Aber mehrere Monate lang habe ich diesen Button nicht bemerkt, weil die Aktion einfach zu weit weg ist von den Objekten, auf die sie sich bezieht.

Dazu kommt, dass der Button sich in einem anders eingefärbten Streifen befindet, so dass er ausserhalb des Raumes zu leben scheint, den die Icons bewohnen, und das verletzt ein Schlüsselprinzip für visuelle Schnittstellen.

(Übrigens: Warum ist das iTunes-Fenster in meinem Screenshot so gross, obwohl es nur so wenige Icons enthält? Weil die gleiche Anwendung sowohl die Telefon-Apps als auch die Musiksammlung verwaltet. Wenn Sie mit mehreren hundert Musikstücken operieren wollen, brauchen Sie viel Platz. Es ist also nicht immer gut, derartig verschiedener Aufgaben mit der gleichen GUI abzuhandeln.)

Benachbarte statt entfernt liegende Buttons

Interessanterweise präsentiert iTunes in einem anderen Teil des gleichen Arbeitsablaufes ein Beispiel für die korrekte Anordnung von Buttons:

korrekte Anordnung des Buttons in iTunes

In diesem Screenshot befindet sich der Get-Update-Button direkt neben dem Icon, auf das er sich bezieht. Man hat keine Möglichkeit, diese Funktion zu übersehen. Und es ist keine Frage, was man hier tun kann. (Der Done-Button im Dialogbereich allerdings könnte genauso gut in Sibirien stehen. Hier besteht das Problem darin, dass dieser Bildschirm während einer Interaktion Dialogbereiche mit der Rolle von Dialogboxen verwendet).

Dass gewöhnliche Firmen-Websites eklatante Usability-Fehler machen, ist verständlich, weil die meisten Mitglieder ihrer Teams keine qualifizierten Abschlüsse im Bereich der Mensch-Computer-Interaktion haben. (Deshalb habe ich kürzlich unser Angebot auf den Usability-Konferenzen um Grundlagenkurse erweitert wie "The Human Mind" ["der menschliche Verstand"].) Aber wie konnte ausgerechnet Apple einen so elementaren Fehler im GUI-Design machen? Apple war immer ziemlich gut bei grafischen Nutzeroberflächen, seit die Firma sie 1984 erstmals auf den Massenmarkt gebracht hat.

Zunächst ist das einfach ein weiteres Beispiel dafür, dass auch die Grossen manchmal Fehler machen, und dass Sie nicht alles nachmachen sollten, was Sie bei Software-Bestsellern und auf populären Websites sehen. (Das hat sich auch kürzlich bei Studien für unser Seminar "Big and Famous Sites" ["Grosse und berühmte Websites"] gezeigt, bei denen wir auch Apple.com getestet haben. Aber diese Geschichte werden wir einem anderen Tag erzählen.)

Zweitens könnte es sein, dass dieses Usability-Problem bei den eigenen Tests von Apple nicht so schlimm ausgesehen hat:

  • Wenn bei den Tests ein kleineres Fenster benutzt wurde, stand der Button vielleicht näher bei den Icons, und es war weniger wahrscheinlich, dass er von den Testnutzern übersehen wurde. (Ein kleineres Fenster könnte entstanden sein, wenn bei den Tests ein normaler Monitor verwendet wurde oder wenn die Funktionen isoliert getestet wurden und nicht im Zusammenhang mit der grossen Arbeitsfläche, die für eine Musiksammlung gebraucht wird.)
  • Wenn sie eine Konfiguration mit mehr App-Icons getestet haben, haben die Icons vielleicht den ganzen Raum ausgefüllt, so dass der Button näher am letzten Icon gestanden hätte.

Dieser Fall ist ein Beispiel dafür, wie eine alte und lang bewährte GUI-Richtlinie weiterhin wichtig bleibt: Einsichten, die vor Jahrzehnten gewonnen wurden, können Sie immer noch beissen, wenn Sie sie vergessen. Der falsch platzierte iTunes-Button zeigt auch, wie wichtig es ist, ein ganzes Spektrum von realistischen Konfigurationen und Datensätzen zu betrachten, sowohl bei Nutzertests als auch bei Design-Reviews.

 

© Deutsche Version von Jakob Nielsens Alertbox. Institut für Software-Ergonomie und Usability AG. Alle Rechte vorbehalten.

Kommentare auf diesen Beitrag

    Keine Kommentare

Kommentar hinzufügen

Die mit * gekenzeichneten Felder sind zwingend auszufüllen