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

Image for post
Image for post

Als User Experience-Designer ist man ein allgegenwärtiger Problemlöser — Ständig damit beschäftigt, ein Produkt oder Service nach Machbarkeit und Relevanz zu überprüfen, sodass den Bedürfnissen und Wünschen der Nutzer Rechnung getragen werden kann, um schlussendlich mit der bestmöglichen Nutzererfahrung aufzuwarten.

Da ist es gut zu wissen, dass man heutzutage beim Gestalten einer Benutzeroberfläche über eine gewisse Sammlung an Tools und Methoden verfügt, um den Spagat zwischen Altbekanntem und innovativen Neuerungen zu bestehen, damit eine gemeinsame Designsprache fortgeführt und weiterentwickelt werden kann.

Hierbei erleichtern User Interface Design Patterns den Designern die Aufrechterhaltung dieser gemeinsamen Sprache, indem sie bewährte Lösungen für eine Vielzahl von häufig auftretenden Problemen bieten. UI-Patterns sind sozusagen standardisierte Entwurfsmuster, die Designern als Referenzpunkte dienen und eine grundlegende Konsistenz gewährleisten.

Muster in der menschlichen Wahrnehmung

Die visuelle Wahrnehmung ist einer der wichtigsten Parameter, wenn es um Visual Design im Nutzungskontext geht. Dies liegt allein schon daran, dass wir Menschen uns extrem auf unsere Augen verlassen und dem Gesehenen stets Informationen entnehmen — oder auferlegen. Unser Sehsinn ist nämlich perfekt imperfekt.

Wir leben schließlich in einer dreidimensionalen Welt, in der wir vor allem durch Licht und Schatten Objekten eine Form zusprechen und sie im Raum verorten. Dass diese Lichtspiele unseren Sehsinn auch täuschen und ihn mehr oder minder entlarven können, ist dabei mehr Notwendigkeit als Fehler. Denn es gleicht immer noch eher einem Wunder, dass es unserem Gehirn gelingt, aus dieser Vielzahl an optischen Reizen ein stimmiges Abbild einer Welt zu erschaffen, die durch den Abgleich mit bereits Erfahrenem einem ständigen Realitätscheck standhalten muss.

Die wahrgenommene Welt liefert uns allerdings nicht nur grundlegende Informationen wie Größen oder Entfernungen, sondern wird auch direkt nach den vor uns liegenden Möglichkeiten gefiltert. Der von Don Norman eingeführte Begriff „affordance“ (Angebotscharakter) beschreibt hierbei alle Aktionen, die durch die Eigenschaften eines Objekts oder einer Umgebung physisch ermöglicht werden. Objekte werden also sowohl in Windeseile identifiziert als auch auf ihre Interaktionsmöglichkeiten geprüft.

Unsere Wahrnehmung beruht dabei nur allzu oft auf unvollständigen Informationen, da wir stets nach erwartungskonformen Mustern in unserer Umgebung suchen, denen wir eine Sinnhaftigkeit unterstellen können. In der Gestaltpsychologie geht man deswegen davon aus, dass unsere Wahrnehmung gewissen Gesetzmäßigkeiten folgt. So werden z.B. Elemente, die nahe beieinander stehen, sich in die gleiche Richtung bewegen oder sich schlichtweg ähneln, als zusammengehörig wahrgenommen.

Wir nutzen also uns bekannte Muster sinnstiftend als Orientierungshilfe. Sobald einem Objekt oder einer Funktion ein Wiedererkennungswert zugeschrieben werden kann, fühlt sich die Interaktion damit natürlich und intuitiv an. Man könnte auch sagen, dass aussagekräftige Muster dem Mensch ein Gefühl der Kontrolle und Bestätigung geben, da er sie einfach mit vorherigen Erlebnissen und Erfahrungen abgleichen kann.

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.

Written by

Innovation Explorer. Design Consultants. User Experience Experts.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store