Wie visuelle Muster Sinn ergeben

Die Rolle von UI-Patterns im UX-Design
2 Kommentare

Um Designentscheidungen treffen zu können, müssen UX-Designer die Bedürfnisse und die Wünsche der Nutzer kennen. Eine immer wichtigere Rolle spielt hierbei die visuelle Wahrnehmung der Menschen. Aber auf welche mentalen Modelle greifen die Anwender zurück, wenn sie durch das Netz navigieren?

Die menschliche Wahrnehmung ist darauf gepolt, aussagekräftige Muster zu entdecken und sie miteinander zu verknüpfen, um der Umwelt einen Sinn zu geben. Heutzutage kommt die Fähigkeit bei der Auswertung abstrakter Informationen zum Einsatz. Die Analyse und Decodierung bekannter visueller Muster wurde aber bereits in den 1920er Jahren im Bereich der Psychologie wissenschaftlich untersucht.

Die Welt in Mustern

So geht die Gestaltpsychologie der Frage nach, warum die Menschen etwas als eine Einheit wahrnehmen und anderes nicht. Die Gestaltpsychologen sind sich darüber einig, dass die menschliche Wahrnehmung von Strukturen und Ordnungsprinzipien nicht zufällig erfolgt, sondern gesetzmäßigen Mechanismen unterliegt.

Die aus dieser Einschätzung resultierenden Gestaltunggesetze beschreiben, wie und warum Menschen bestimme visuelle Bausteine zu einer Gruppe organisieren. So werden beispielsweise ähnliche Elemente oder Elemente mit geringen Abständen zueinander als zusammengehörig wahrgenommen. Außerdem werden bevorzugt Strukturen erfasst, die eher geschlossen als offen wirken, und in einer einprägsamen und einfachen Struktur resultieren.

Wie die Ergebnisse belegen, greifen Menschen, um sich in neuen Situationen orientieren zu können, auf bekannte Muster zurück. Auf diese Weise können fremde Elemente schnell und einfach in Zusammenhang gebracht werden.

Muster in der Architektur und Softwareentwicklung

Es bedurfte aber knapp 60 Jahre, bis der Ansatz wieder vom Architekten Christopher Alexander aufgegriffen wurde. Er verfolgte mit seiner Entwicklung standardisierter Entwurfsmuster das Ziel, die Bewohner in den Bauprozess mit einzubeziehen. In der Architektur fand die Methode nur wenig Anklang; in der Softwareentwicklung erfreute sie sich in den 80ern aber immer größerer Beliebtheit.

So griffen Programmierer Kurt Beck und Ward Cunningham auf die Idee von Alexander zurück und entwickelten auf ihrer Grundlage Entwurfsmuster für die Erstellung grafischer Benutzeroberflächen. Bereits einige Jahre zuvor veröffentlichten John D. Gould und Clayton Lewis einen Fachartikel im Magazin „Communications of the ACM“. Die Autoren beschreiben drei Designprinzipien, mit deren Hilfe das Interface-Design an die Bedürfnisse der Nutzer angepasst werden kann. Sie nahmen mit ihrer Untersuchung bereits viel von dem vorweg, was später unter dem Namen des User-Experience-Designs bekannt wurde.

Die Rolle von UI-Patterns im UX-Design

Knapp dreißig Jahre später ist die visuelle Wahrnehmung zur Schlüsselgröße im Kampf um die Aufmerksamkeit der Anwender im UX-Design geworden. Navigationen und Interaktionen müssen möglichst intuitiv von der Hand gehen, damit die Nutzer die Erfahrungen mit diesen Elementen als positiv bewerten.

UI-Design-Patterns sind mittlerweile zu einer gemeinsamen visuellen Sprache geworden, die sowohl von den Anwendern als auch von Designern verstanden wird. Sie bieten Lösungen auf bekannte Usability-Probleme. Der Wiedererkennungswert von Patterns erlaubt es den Nutzern, sich schnell durch das Web zu navigieren. Ganz im Sinne der Gestaltgesetze müssen sie nicht bei jedem Klick darüber nachdenken, welche Art von Interaktion mit welchem Element ausgeführt wird.

Weil die User versuchen, immer und überall Muster zu erkennen, sind sie stets auf der Suche nach bekannten Interaktionsbausteinen, mit denen sie positive Erfahrungen verbinden.

UI-Patterns funktionieren, weil sie sich über die Zeit hinweg entwickelt und auf diese Weise als erfolgreiche Muster etabliert haben. Sie liefern erprobte Lösungen auf bekannte Probleme, die von einer Vielzahl von Nutzern getestet worden sind. Halten sie der tagtäglichen Belastung im Netz nicht stand, werden sie erst gar nicht als Patterns identifiziert.

Die besten UI-Patterns-Ressourcen

Der Vorteil von UI-Patterns liegt aber nicht nur in ihrer intuitiven Bedienbarkeit, sondern ihr Einsatz erspart ebenfalls viel Zeit und Nerven in der Design- und Entwicklungsphase. UXPin und Infragistics haben die besten Ressourcen im Netz für UI-Patterns zusammengetragen:

  • UI Patterns: UI Patterns hat die Muster in themenspezifische Sektionen gegliedert. Es wird erklärt, wann sie am besten eingesetzt werden, wie die Nutzer voraussichtlich mit den Elementen interagieren und auf welche Weise die Entwurfsmuster zu einer guten User Experience beitragen.
uipatterns

Quelle: UI Patterns

  • Patternry: Patternry bietet detaillierte Informationen zu unterschiedlichen Design-Patterns und erklärt, welche Muster welche Probleme lösen und wann sie am besten eingesetzt werden.
patternry

Quelle: Patternry

  • Zurb: Mit weit über 5000 Interface-Patterns sowie einer Vielzahl von Code-Snippets gehört Zurb zu einer der größten Pattern-Bibliotheken im Netz. Allerdings geht die Informationsdichte zulasten ausführlicher Beschreibungen. Die Seite richtet sich deshalb in erster Linie an erfahrende Designer, die auf der Suche nach Inspirationen sind.
zurb

Quelle: Zurb

  • UseYourInterface: Das Angebot von UserYourInterface ist als GIF-Sammlung aufbereit und umfasst eine Reihe mobiler UI-Patterns.
  • UXPin: UXPin hält ebenfalls eine Sammlung mobiler Design-Patterns bereit, die sich im Wesentlichen auf die Kategorien E-Commerce, Musik, Video und Social Media beziehen. Allerdings ist der Service nicht umsonst. Interessierte können sich jedoch einen kostenlosen Testaccount einrichten.
uxpin

Quelle: UXPin

  • Pttrns: Pttrns ermöglicht es, mobile UI-Patterns nach Kategorie, Jahr und Gerät (iPhone, Android, iPad, Apple Watch) zu suchen.
pttrns

Quelle: Pttrns

  • Dark Patterns: Dark Patterns erklärt am Beispiel bekannter Unternehmen, wie UI-Patterns am besten nicht eingesetzt werden sollten.

UI-Patterns steigern nicht automatisch die User Experience

Der Vorteil von Design-Patterns liegt klar auf der Hand: Die Interaktionsrate der Nutzer wird durch eine flache Lernkurve erhöht. Allerdings darf auch nicht unterschätzt werden, dass das Netz einem kontinuierlichen Wandel unterworfen ist. Hierbei spielen nicht nur interne und externe Faktoren eine wichtige Rolle, sondern teilweise erfolgen Veränderungen willkürlich oder zufällig.

Beim Einsatz von UI-Patterns ist daran zu denken, dass immer nur bereits bekannte Probleme mit alten Mitteln gelöst werden. Drängende, aktuelle Fragen können so mitunter auf der Strecke bleiben. Das menschliche Wahrnehmungsvermögen richtet sich zwar primär auf das Wiedererkennen bekannter Muster, ist aber nicht allein auf diese Fähigkeit beschränkt. Es ist ebenfalls in der Lage, neue Patterns zu identifizieren und einzuordnen.

Entwurfsmuster sollten daher als Grundlage für die eigene Kreativität dienen und nicht bloß eins zu eins in das Design integriert werden. Es bedarf aber ausführlicher Tests, um zu ermitteln, wie die Patterns am besten auf die Wünsche und die Bedürfnisse der Nutzer abgestimmt werden. UXPin hat das Testen von UI-Patterns in fünf Schritten zusammengefasst:

1. Designprobleme identifizieren: Interviews und Surveys geben wichtige Hinweise darauf, mit welchen Elementen die Anwender Probleme haben.

2. Existierende Designpatterns heranziehen: Sind die Probleme identifiziert, sollten die Lösungsstrategien von Webseiten und Apps, die vor den gleichen Herausforderungen standen, in Augenschein genommen werden.

3. Design-Prototypen: Die existierenden Patterns dienen als Basis einfacher Prototypen-Tests. Sie bilden die Grundlage, um verschiedene Gestaltungspunkte zu überarbeiten oder sie gänzlich zu verändern.

4. Das Design testen: Usability-Tests sind nicht nur in der Softwareentwicklung wichtig, sondern auch ein elementarer Bestandteil im Designprozess. Der eigene Entwurf sollte je nach Budget und Zeit von mindestens fünf Nutzern getestet werden.

5. Ergebnisse evaluieren und Tests wiederholen: Die gemachten Lernerfolge sollten in jede weitere Testrunde integriert werden. Auf diese Weise können nach und nach weitere Elemente hinzugefügt oder entfernt werden. Das Testen des Designs ist keine einmalige Sache, sondern muss kontinuierlich erfolgen.

Fazit

Durch den Einsatz von UI-Patterns wird den Nutzern viel Arbeit beim Erlernen neuer Interface-Systeme abgenommen und dadurch die User Experience gesteigert. Außerdem sorgen sie für eine effiziente und zeitsparende Arbeitsweise. Ihr Wiedererkennungswert ist aber zugleich ihre größte Schwäche. Um möglichen negativen Effekten aus dem Weg zu gehen, sollten UI-Patterns nicht blind integriert, sondern durch ausführliche Tests auf die Bedürfnisse und Wünsche der User zugeschnitten werden.

Aufmacherbild: Train your brain via Shutterstock / Urheberrecht: Shirstok

Unsere Redaktion empfiehlt:

Relevante Beiträge

X
- Gib Deinen Standort ein -
- or -