Weniger ist mehr
Nichts ist anstrengender für das menschliche Auge als ein überladener Internetauftritt. Auf vielen Websites weiß der Nutzer nicht, wo er zuerst hinschauen soll. Das Lesen wird durch zahlreiche Elemente, die nach Aufmerksamkeit buhlen, zu einer fragmentierten Angelegenheit. Bei einem überladenen User Interface kann sich der Nutzer nach kurzer Zeit nicht mehr richtig auf die primären Informationen konzentrieren. Als Folge darauf sinkt die Produktivität und der Nutzer verliert das Interesse an der Anwendung. Deshalb spielt Minimalismus im User Interface Design eine sehr wichtige Rolle. Wenn man es schafft, das Layout soweit wie nur möglich zu reduzieren, finden sich die Nutzer schneller zurecht und fühlen sich weniger überfordert.
Viele Navigationsleisten sind überfüllt mit Menüpunkten. Navigations-Fragmentierungen entstehen oft mit dem Lauf der Zeit, wenn hier und da noch ein Menüpunkt hinzukommt, der einem anderen ähnlich ist. Daher lohnt es sich von Zeit zu Zeit, den Frühjahrsputz beim Interface anzusetzen: Ähnliche Punkte und Funktionen werden zu einem Oberbegriff zusammen gefasst. Dem Besucher wird erst einmal in einem aufgeräumten Interface die bekannte Auswahl von „Produkte, Support, Kontakt und Über uns“ geboten. Erst danach sollte auf den Folgeseiten ins Detail gegangen werden.
Klare Navigationsstruktur trotz vielen Untermenüs, Diakonie Frankfurt
Konsistenz
Immer häufiger gibt es Websites die allein auf ihrer Startseite mehr als 50 funktionale und nicht-funktionale Elemente haben. So entsteht schnell ein inkonsistentes Design, welches dazu führt, dass der Nutzer den Überblick verliert und die Anwendung verlässt. Durch die Nichteinhaltung der gewachsenen Standards und den wenigen Normen fürs Web entsteht eine funktionale Inkonsistenz, die es zu vermeiden gilt. Es sollte darauf geachtet werden, dass ähnliche Elemente ähnlich gestaltet sind. Um den Nutzer deutlich zu machen, was zusammengehört und was sich vom anderen abheben soll, sollte sich die Anwendung nicht nur in der Farbigkeit, sondern auch bei Schriftarten und Schriftgrößen unterscheiden. Dem Nutzer macht es mehr Spaß die Anwendung zu bedienen wenn ihm auffällt, dass sie eine Einheit bildet. Um diese wichtige Gestaltungsregel einzuhalten, sollte die Konsistenz nicht wegen anderer Punkte vernachlässigt werden.
Konsistentes User Interface sowohl in Farbigkeit als auch in Typografie und Positionierung der Elemente
Visuelle Hirarchie
Die Optik ist der erste Eindruck, der von einer Anwendung vermittelt wird. Hierbei gilt es ein funktionales Design zu schaffen, bei dem erkennbare und klare Strukturen dem Nutzer helfen, sich zurecht zu finden und ihn klar zwischen primären und -sekundären Informationen unterscheiden lässt. Die Aufgabe einer Anwendung ist es, den Bedürfnissen des Kunden nachzukommen. Der Kunde möchte informiert werden, unterhalten werden, oder etwas kaufen. Um dies so gut wie möglich zu gewährleisten, muss das Interface eindeutig seinen Inhalt vermitteln. Die Informationen sollten in Hierarchien klar dargestellt und sinnvoll gruppiert sein.
Sowohl Typografie als auch Farbe sollte jeweils einen eigenen Zweck erfüllen. Ebenso verhält es sich auch mit Aufzählungen, Icons und Dropdown-Listen. Jedes dieser Elemente hat einen Zweck und sollte nur dann verwendet werden wenn es diesen erfüllt. Dabei gehören Icons zu den trügerischsten Gestaltungsmitteln. Häufig sieht man, dass Plattformen viele Ihrer Navigationspunkte und Funktionen durch Icons repräsentieren. Leider sind die verwendeten Icons für die Nutzer nur selten so klar zu verstehen wie für den Designer. Hier empfiehlt es sich, mit zusätzlichen Bezeichnungen zu arbeiten oder zumindest Description-Tags einzufügen, die beim Hover mit der Maus weitere Hilfestellung geben.
Vergleich zwischen dem Spotify ohne und mit Beschriftung der Icons, Spotify
Feedback bei Fehlern und Interaktionen
Eine der menschlichsten Eigenarten liegt darin, Fehler zu machen. Die Anwendung sollte daher kleine Fehler verzeihen können. Eine Fehlermeldung sollte immer in unmittelbarer Nähe zum entsprechenden Feld angezeigt werden. So fällt dem Nutzer die Zuordnung leicht und er muss nicht unnötig hin- und herscrollen, um das Problem zu korrigieren. Die Oberfläche sollte also jederzeit mit dem User kommunizieren und ihn über Status, Fehler und Fortschritte informieren. Das ist leider viel zu selten der Fall. Nur zu gerne lässt uns die Software im Dunkeln stehen, wenn es darum geht, den Nutzer über das aktuelle Geschehen zu informieren.
Bei sämtlichen Interaktionen zwischen App/Website und Nutzer sollte dieser jederzeit eine direkte Rückmeldung darüber erhalten, was gerade passiert (ist). Drückt der Nutzer beispielsweise eine Schaltfläche, so sollte auch entsprechend Feedback darüber gegeben werden, ob sie tatsächlich gedrückt wurde (etwa durch farbliche Hervorhebung oder Positionsveränderung). Nur wenn solche Elemente klar mit dem Nutzer kommunizieren, ist gewährleistet, dass sie auch im Kontext problemlos funktionieren.
Linkes Bild: Hover-Zustand eines Buttons, Rechtes Bild: Feedback bei fehlerhafter Eingabe
Der erfahrene Nutzer
Viele Websites und Apps haben tolle Funktionen auf dem Kasten, die Betreiber ihren Kunden natürlich gerne anbieten wollen. Das hat jedoch zwei Seiten: Jede zusätzliche Funktion bedeutet weitere Entscheidungen für den Besucher, mit jedem Feature steigt die Lernkurve für das Interface. Mit zu vielen und zu komplexen Optionen wird der ungeduldige User eher erschlagen und überfordert. Daher gilt: Features sparsam anbieten! Das gilt in allen Bereichen: Erst die Basics anbieten, Profi-Funktionen verstecken und optional sofort oder passend zur Situation zeigen. Besonders zurückführen lässt sich dies auf das Lean-Startup, bei dem zuerst das Minimum Viable Product (MVP) definiert und verprobt wird um danach das Feedback von den Nutzern einzuholen.
Ein herausragendes Interface lässt hier und da etwas Brillanz aufblitzen, agiert dabei aber immer nicht um des Features willen, sondern im Sinne der Nutzer. So gibt es Websites und -applikationen, die Anwender im Idealfall täglich aufrufen. Den Power-Usern kommen gute Interfaces mit Abkürzungen entgegen, die viele Funktionen schneller nutzbar machen. Sehr beliebt sind Steuerungsmöglichkeiten per Tastatur. Googles Gmail machte zum Beispiel die J- und K-Taste für das Springen zur nächsten oder vorherigen Mail bekannt.
Fazit
Denken Sie beim Design Ihrer Webseite oder Ihres Produkts also an die folgenden Punkte: Weniger ist mehr, das heißt der User sollte nicht von den wesentlichen Informationen und Funktionen abgelenkt werden. Bleiben Sie in ihrem Design konsistent, da der User sonst den Überblick verliert und Ihre Webseite verlässt. Unerfahrene User machen bei der Benutzung Ihrer Webseite oder Ihres Produkts häufiger Fehler, deshalb ist es wichtig, dass die Anwendung kleinere Fehler verzeihen kann und Fehlermeldungen in unmittelbarer Nähe des entsprechenden Eingabefelds angezeigt werden. Ebenfalls sollten User stets eine direkte Rückmeldung darüber erhalten, was gerade passiert.
Ein gutes User Interface sorgt für eine gute User Experience. Damit macht die Arbeit mit der Anwendung Spaß und der Nutzer kann sich auf das konzentrieren, was wirklich zählt.
Über den Autor:Ich heiße Danny Lang und studiere Intermediales Design an der Hochschule für Gestaltung in Pforzheim unter der Lehre von Prof. Wolfgang Henseler. Die vorangegangenen 5 Regeln sind aus meinen Erfahrungen zusammengetragen, die ich während meines halbjährigen Praxissemesters bei candylabs verinnerlicht habe. Sie gelten sowohl für Internetseiten und Applikationen als auch für alle anderen Interfaces im digitalen Bereich.
