Wie viel Psychologie steckt in gutem UI-Design?

Designer, Developer, Product Manager und Product Owner haben etwas gemeinsam, sie alle teilen dasselbe Leid: Tagtäglich wühlen sie sich durch einen kaum zu überblickenden Berg an Informationen, um neue Features umzusetzen. Dabei stellt es schon alleine eine Herausforderung dar, alle technischen Abhängigkeiten zu verstehen, das Corporate Design und den Styleguide zu berücksichtigen, die strategischen Vorgaben zu befolgen und psychologische Faktoren einzubeziehen. Nicht jeder bringt entsprechende Erfahrung in den einzelnen Bereichen mit, nicht jedes Unternehmen widmet den jeweiligen Aspekten genügend Aufmerksamkeit. Aber das sollten Unternehmen. Alle.

Der Hintergrundgedanke beim Berücksichtigen der Psychologie ist, dem Benutzer das intuitive Bedienen der Software zu ermöglichen – ohne, dass er es merkt. Dadurch fühlt er sich sofort vertraut mit der Anwendung und hat im Idealfall keinerlei Negativ-Erlebnisse, was für eine sofortige bzw. schnelle Akzeptanz des Produkts sorgt. Zudem senkt eine solche User Experience sowohl den Stressfaktor als auch den Arbeitsaufwand im Alltag. Ein Win-Win-Win-Szenario.

„Muss ich jetzt einen Psychologen einstellen?“ Nein, denn jeder kompetente Mitarbeiter kann die Software signifikant verbessern, indem er oder sie sich einfach in Grundlagen dieses Themas einarbeitet. Um die Qualitätsspitze zu erreichen, kann es natürlich nicht schaden, Spezialisten zu Rate zu ziehen. Das Wichtigste im ersten Schritt ist aber das Erkennen und Berücksichtigen der Relevanz des Themas.

Die folgenden Beispiele sollen verdeutlichen, welchen Einfluss der Faktor Psychologie auf die User Experience hat:

1. Fokus auf das Wesentliche

Das menschliche Gehirn neigt dazu, Formen anhand ihrer Optik zu erkennen, zu vervollständigen und zu gruppieren bzw. zu unterscheiden. Daher sollten die verschiedenen Bereiche einer Benutzeroberfläche optisch klar voneinander getrennt sein. Eine einfache Linie reicht dafür jedoch nicht aus. Der farbliche Kontrast des Hintergrunds sollte sich in jedem Bereich unterscheiden, um eine intuitive Wahrnehmung zu ermöglichen. Dabei ist es empfehlenswert, die Hintergrundfarbe weiter aufzuhellen, wenn der angezeigte Inhalt detaillierter wird. Hier kommt zusätzlich zum Tragen, dass das Gehirn sich leichter und länger auf helle Objekte konzentrieren kann. Optische Nähe wird suggeriert. Dunklere Objekte werden hingegen als weiter entfernt und weniger relevant wahrgenommen.

    

2. Der intuitive Weg

Wir alle werden durch äußere Einflüsse auf bestimmte Verhaltensweisen oder Assoziationen konditioniert, ohne genau zu verstehen, warum. Angefangen dabei, dass die Farbe Grün Rettung oder Heilung bedeutet, bis hin zu der Konvention, dass man sich mit rechts die Hand gibt. Man fühlt sich wohl, solange es nach den gewohnten Regeln abläuft.
Für das User Interface Design ist eine bestimmte Konditionierung besonders interessant: In den meisten Kulturen ist die Leserichtung von links oben nach rechts unten. Davon ableitbar: Eine Abschlussaktion sollte immer rechts unten positioniert sein, um sowohl den vom Hersteller geplanten als auch auch den vom Anwender erwarteten und gewünschten Abschluss optimal zu unterstützen – ein Prinzip, dem übrigens auch Nicht-Software-Produkte häufig folgen. Wo schaltet man beispielsweise einen Fernseher oder Monitor meist ein (und aus)? Richtig, rechts unten.

Entsprechend sollten auch Benutzeroberflächen aufgebaut sein. Links oben stehen immer die ‚gröbsten‘ Informationen, wie z. B. der Seitentitel. Im Verlauf der Seite werden die Informationen dann zunehmend ‚feinkörniger‘, bis schließlich die Abschlussaktion folgt. Daher sollte bei einem Dialog mit den Optionen „Speichern“ und „Abbrechen“ der „Speichern“-Button an letzter Position sein. So ermöglicht man dem Benutzer, bereits bekannte Muster unbewusst anwenden und die Oberfläche intuitiv bedienen zu können.

    

3. Stetiges Feedback wichtig

In Zeiten, in denen jeder ein Navigationsgerät auf seinem Mobiltelefon vorinstalliert hat, kommt es eher selten vor, dass sich jemand verfährt. Nichtsdestotrotz hat jeder bestimmt schon einmal die Erfahrung gemacht, dass Wege unzureichend ausgeschildert sind. Im besten Fall ist man nur verunsichert, im schlechtesten frustriert. Auf Anwendungen übertragen: Ein Benutzer kann Software nur dann intuitiv bedienen, wenn er sich sicher fühlt. Um ihm die nötige Sicherheit zu geben, muss er stets die aktuelle Lage vollständig erfassen können. Bedeutet: Jeder Benutzer muss auf jeder Seite die Fragen beantworten können „Wo befinde ich mich?“, „Was habe ich zuletzt gemacht?“, „Wo finde ich meine gesuchte Funktion?“.

Beantwortet werden können diese Fragen durch einen logischen Aufbau sowie durch Feedback des Programms. Dabei ist es unerheblich, ob statisches Feedback (wie Überschriften und Icons) oder dynamisches Feedback (wie Markierungen und Erfolgsmeldungen). Jedes Feedback, das zur Erfassung der Lage dient, ist letztlich hilfreich, denn damit unterbindet man Unsicherheiten, die schon vor dem ersten Klick entstehen könnten, und gibt dem Benutzer ein angenehm sicheres Gefühl.

Es gibt noch viele weitere Faktoren, die man in diesem Zusammenhang an- und ausführen könnte, wie zum Beispiel die Wirkung von Körpern, Blicklenkung oder die Farbenlehre. Klar sollte sein, dass jeder Aspekt des UI-Designs bereits bei der Konzeption berücksichtigt werden sollte, um Schwachpunkte frühzeitig identifizieren und großartige Software produzieren zu können.

 

Autor: Joachim Hirsch, Product Manager

Kontakt: Joachim.Hirsch@dot4.de

 

Comments

  • Ein Freund hatte mich auf diesen Blog hier aufmerksam gemacht… interessantes Thema und ein schönes Beispiel, wie viel sich mit doch recht simplen und intuitiven Mitteln viel erreichen lässt – wenn man sich ihnen nur bewusst ist. Beeindruckend auf gewisse Weise und bestimmt auch auf andere Medien anwendbar. Ein paar Fragen schossen mir beim Lesen in den Kopf:

    1) Wie verändert sich das UI-Design z.B. wenn man Interfaces für, sagen wir, den arabischen Raum erstellt, wo von rechts nach links gelesen wird? Ist alles einfach nur gespiegelt?

    2) Diese Frage ist an die erste in gewisser Weise angelehnt. Es wurde ja zu Beginn des Blogs auf die Farben ein wenig eingegangen. Ändern sich die Assoziationen zu Farben auch mit dem Kulturraum? Und wenn das der Fall ist und man ein Interface (oder auch etwas anderes) möglichst allgemeingültig entwerfen möchte – gibt es da eine tiefere Ebene, auf die man zurückgreifen kann, die quasi unabhänging von kulturell geprägten ‚Gewohnheiten‘ ist? Oder ist man gezwungen einfach mehre UIs zu entwerfen, die je nach Kultrraum angewendet werden? Sagen wir, es soll ein Interface für eine Maschine entworfen werden, die gleichzeitig von Menschen aus sehr verschiedenen Kulturräumen benutzt werden soll.

    3) Wahrscheinlich will man auf einer normalen UI keine bewegten Bilder haben, weil sie ablenken. Da sich die oben angesprochenen Grundregeln jedoch prinzipiell auch auf andere Medien anwenden lassen – gibt es auch für die Einbindung eine ‚elegante‘ Art der Einbindung, oder wirken diese generell ‚disruptiv‘? (Ich vermute es fast – man denke an animierte Werbebanner, die einen ja maximal ablenken sollen.)

    Wie gesagt – nur ein paar Gedanken, die mir in den Kopf schossen. Gestellt von einem Laien auf diesem Gebiet und vielleicht an falscher Stelle gestellt, aber vielleicht auch ein Anstoß für weitere Blogs? Ich habe beim Lesen jedenfalls etwas gelernt -> Danke dafür!

    • Hallo Herr Unger,

      vielen Dank für das Feedback! Es freut mich zu hören, dass wir mit dem Artikel einen Denkanstoß leisten konnten.
      Zu Ihren Fragen:

      1) Dadurch, dass Software im Normalfall für den Weltmarkt konzipiert wird und nicht für eine spezielle Region, sind es Anwender aus den östlichen Ländern gewohnt, einen Seitenaufbau vorzufinden, der von links nach rechts verläuft und von oben nach unten. Meistens wird lediglich die Ausrichtung der regionalen Schrift angepasst, um die Leserichtung beim Text einzuhalten.
      Entfällt die Navigation auf der linken Seite, wie es auf neueren Websites inzwischen Mode ist, so weicht man das Thema ein Stück weit auf und kommt somit einem flexibleren Einsatz entgegen.
      Würde man, wie Sie erwähnten, eine Software einfach spiegelverkehrt aufbauen, so würde dies zwar manchen Kulturen entgegenkommen, jedoch wären die Anwender wohl meist zunächst verwirrt ob des ungewohnten Verhaltens der Software. Hier gilt es stark abzuwägen, wer genau die Zielgruppe ist und wie eine optimale Oberfläche für die Anwendungsfälle aussieht.

      2) Die grundlegenden Assoziationen sind immer gleich, da diese etwas mit der Wirkung auf den menschlichen Körper oder allgemeine Erfahrungen des Lebens zu tun haben. So sind helle Flächen immer leichter zu fokussieren, ermüden die Augen aber auch schneller. Ein gelber Kreis wird immer mit der Sonne in Verbindung gebracht. Blau vermittelt Kälte, Rot die Liebe oder Blut. Solange man sich auf solche Punkte beschränkt, so kann die Oberfläche allgemeingültig entworfen werden.
      Allerdings gibt es auch weichere Assoziationen, die je nach Erfahrungen des Benutzers abweichen können. Wo hierzulande die Farbe Grün meist mit Heilung und Rettung in Verbindung gebracht wird, könnte ein naturverbundenerer Mensch eher an Gift denken. Auch Icons, die Handzeichen symbolisieren, können in anderen Regionen leicht missverstanden werden, wenn sie in einen Kontext gesetzt werden. In Afghanistan z.B. ist ein hochgestreckter Daumen eine Beleidigung, keine positive Zustimmung. Oder sind Zeigefinger und kleiner Finger ausgestreckt, so gilt es zwar in Deutschland als gängiges Symbol der Rockmusik, in Italien hingegen kann man damit auch Personen in unglücklichen Ehen verhöhnen.
      Je spezifischer die Details der Gestaltung werden, desto genauer muss man also auch hier auf die Zielgruppe eingehen.

      3) Generell stimme ich zu, dass sich ständig bewegende Objekte den Benutzer zu sehr ablenken, als dass er sich noch gut auf andere Bereiche konzentrieren könnte. Mit Animationen sollte man daher mit Vorsicht umgehen. Ganz nach der Devise: Weniger ist mehr.
      Was allerdings eine sehr gute Möglichkeit ist, Animationen einzusetzen, ist, sie nur ein Mal durchzuführen und nicht in einer Dauerschleife zu betreiben. Somit wird der Benutzer nur ein Mal kurz darauf aufmerksam gemacht, dass es etwas interessantes zu sehen gibt oder etwas passiert ist, das er sich ansehen sollte. Danach kann er jedoch selbst entscheiden, ob er sich darum kümmern möchte oder nicht und wird nicht mehr belästigt. Ein gutes Beispiel dafür ist beispielsweise ein Benachrichtigungstoast, wie ihn auch Outlook verwendet, wenn eine neue E-Mail eintrifft.
      Außerdem können Animationen auch gut dazu eingesetzt werden, um dem Benutzer Feedback zu Aktionen zu geben. Hovereffekte oder Ladeindikatoren sind hier wohl am verbreitetsten.

      Ich hoffe, ich konnte Ihnen mit den Fragen weiterhelfen.
      Wenn Sie noch weitere Fragen haben oder meine Antworten nicht ganz klar waren, stehe ich gerne weiter zur Verfügung.

      Viele Grüße
      Joachim Hirsch

Schreibe einen Kommentar

Your email address will not be published. Required fields are marked *