UI Design Patterns –Lösungen für Usability-Probleme einfach finden

Vergangenen Freitag habe ich in unserem regelmäßig stattfindenden UX Lunch (TechTalk internes Event) meinen Kollegen verschiedene UI Design Pattern Libraries und deren Einsatzmöglichkeiten vorgestellt.

Die Idee von UI Design Patterns ist es Lösungen für häufig auftretende Usability Probleme zu sammeln und dabei Best Practices zu beschreiben. Dabei werden sowohl die Einsatzmöglichkeiten als auch die Vor- und Nachteile der jeweiligen Lösung dargestellt.

Beispielpattern „Illustrated Choices“

Die Patterns sind dabei möglichst konkret beschrieben, aber meist auch auf verschiedene Systeme anwendbar. Ein Beispiel für ein solches Pattern ist z.B. „Illustrated Choices“. Dieses Pattern beschreibt, dass die Optionen für den Benutzer auch visualisiert werden sollen um die verschiedenen Optionen zu erklären. Ein Beispiel dafür sind ist die Animationsauswahl im PowerPoint. Jede Animation ist dabei zur Erklärung auch mit einem Symbol visualisiert um die Funktionsweise besser darzustellen.

Screenshot: Animationsauswahl in PowerPoint

Screenshot: Animationsauswahl in PowerPoint

Dieses Pattern ist beispielsweise in der Pattern Library zum Buch „Desiging Interfaces“ von Jenifer Tidwell.

Es gibt im Internet sehr viele verschiedene Pattern Libraries, um eine Lösung zu finden ist es gut einige davon zu kennen. Nachfolgend eine Auswahl der aus meiner Sicht wichtigsten Links:

  • UI Patterns: Sammlung von fast 90 User Interface Patterns und 55 Persuasive Design Patterns
  • Yahoo Design Patterns: eine bereits lang bestehende Pattern Library mit 59 Patterns.
  • Designing Interfaces Patterns: basierend auf dem Buch “Designing Interfaces” von Jenifer Tidwell sind hier viele Patterns auch online abrufbar
  • Welie.com: Diese Seite enthält ungefähr 100 verschiedene Patterns. Die Seite existiert bereits seit 2008, aber die Patterns sind noch immer gültig.

Neben diesen Pattern Libraries die sich mit allgemeinen Themen vor allem für Webanwendungen beschäftigen gibt es auch noch Pattern Libraries für spezifische Anwendungen und Plattformen:

Für weitere Inspiration möchte ich noch auf eine Liste von Pattern Libraries verweisen, die von Yahoo zusammengestellt wurde. Viel Spaß damit!