UI-Patterns — Referenzpunkte für ein besseres Visual Design

Etablierte UI-Patterns

Diesem Wissen um die Wahrnehmungsgesetze, die uns Menschen inhärent sind, folgen auch gängige UI-Patterns, die sich im Laufe der letzten Jahre entwickelt und ihre Effizienz nachgewiesen haben. Denn eine erfolgreiche und konsistente Benutzeroberfläche sollte schlussendlich so gestaltet sein, dass sich die Nutzer schnell zurechtfinden und eine Aufgabe mit der Mindestanzahl an Aktionen ausgeführt werden kann.

Anhand der folgenden drei Hauptkategorien kann man gut erkennen, wie etablierte UI-Patterns dabei helfen können, den Nutzern eine bessere Orientierung zu bieten und die Schritte zur Aufgabenerfüllung zu verkürzen.

Inhaltsstruktur:

Da unsere Wahrnehmung gerne gruppiert, geht es hierbei um das Erstellen einer visuellen Hierarchie. Nutzer scannen einen digitalen Service direkt auf notwendige Informationen und mögliche Interaktionen. Deshalb sollte der Inhalt immer so dargestellt werden, dass die Nutzer den Grad der Wichtigkeit jedes einzelnen Elements nachvollziehen können — Sei es durch Größe, Farbe, Kontrast oder ähnlich aussagekräftigen Indikatoren. Es geht also darum, Ordnung herzustellen; verwandte Elemente in Gruppen zu fassen und differierende Elemente sowohl optisch als auch räumlich zu trennen.

Navigation:

Die Nutzer müssen sofort erkennen, wo sie sich gerade auf einer Seite oder Applikation befinden und wo sie als nächstes hinkönnen. Da die Navigation eines der essentiellsten Design-Elemente ist, erwarten die Nutzer eine klare Übersicht des Hauptmenüs z.B. am Seitenanfang, an dem alle‚ besuchbaren Orte’ aufgelistet sind. Falls es sich um ein komplexeres Konstrukt handelt, bietet es sich an, ein Dropdown Menü bzw. das sogenannte Hamburger-Menü zu verwenden. Das etablierte Symbol mit den drei Strichen wird vom Nutzer direkt als Menüliste identifiziert und kann vor allem im Kleindisplay-Bereich für eine gewisse Übersichtlichkeit sorgen.

Klare Kommunikation und Anweisungen:

Als Designer muss man verstehen, dass jede Interaktion mit den Nutzern auch Kommunikation bedeutet. Das Zauberwort hierbei ist konsistentes Feedback — Die Nutzer wollen schließlich stets auf dem Laufenden sein. Um die größtmögliche affordance zu erzeugen, muss jede noch so kleine Interaktionsmöglichkeit klar dargestellt und jede Aktion bestätigt werden — Sei es durch die Farbänderung eines Buttons oder ein Soundeffekt. Dabei ist es auch erstmal egal, ob es sich um eine Erfolgs- oder Fehlermeldung handelt. Das Letzte, was man den Nutzern zumuten sollte, ist ihnen Zeit damit zu rauben, dass nicht klar ersichtlich ist, ob eine Aktion auch erfolgreich war oder wie sie eine Aktion durchführen können.

Grundlage einer optimalen Nutzererfahrung

Viele UI-Patterns haben sich über die Zeit hinweg entwickelt und ihre Berechtigung im UX-Kontext erhalten. Sie helfen nicht nur dabei, dass sich die Nutzer leichter zurechtfinden und die Bedienbarkeit so intuitiv wie nur möglich von der Hand geht, sondern geben Designern ein paar Richtlinien an die Hand, die Lösungswege für bekannte Probleme bieten und somit bereits in der Entwicklungsphase Zeit und Nerven erspart.

Dies bedeutet aber nicht, dass durch das Zugrundelegen angelernter und funktionierender Muster alles nach Schema F laufen muss. Es geht vielmehr um das Vereinen von Konvention und Innovation. Bewährte UI-Patterns bilden Grundprinzipien, an denen man sich orientieren sollte und die noch genügend Ansatzpunkte sowie Platz für kreativen Raum bieten, um neue Ideen auszutesten und bessere Lösungen zu finden.

Das Kernziel guter User Experience ist schließlich immer die bestmögliche Erfahrung für seine Nutzer zu schaffen. Die Einführung von Mustern im Produkt- und Service-Design trägt seinen Teil dazu bei, eben diese Erfahrung zu verbessern, indem angelerntes Verhalten belohnt, die kognitive Belastung für die Nutzer verringert und die visuelle Wahrnehmung gleichermaßen erleichtert wird.