Erweitern Sie Ihr Design mit UX Design Patterns

Entwurfsmuster gefällig?
Kommentare

Dieser Artikel liefert einen Hintergrund zur Pattern-Sprache und stellt ein kostenloses RIA-Tool namens Quince vor, mit dem Sie UX Design Patterns untersuchen können.

Wer schon längere Zeit mit Software zu tun hat, ist vielleicht schon einmal auf das Konzept eines Softwareentwurfsmusters (Design Pattern) gestoßen. Bekannt gemacht wurden Design Patterns von der Gang of Four und später durch Fowlers PoEAA (Patterns of Enterprise Application Architecture) [1]. Zudem sind viele andere Bücher zum Thema Muster erschienen (siehe Links & Literatur am Ende des Artikels).

Abb. 1: Auswahl von Büchern zu Entwurfsmustern (Design Patterns)

Für diesen Artikel sind in erster Linie die beiden Bücher ganz oben in Abbildung 1 relevant, da sie in dem Bereich eine Rolle spielen, der als UX (User Experience) Design Patterns – Entwurfsmuster für Benutzerszenarios – bezeichnet wird. So zweckmäßig Bücher auch sind, haben sie doch auch Beschränkungen. Und genau deshalb hat Infragistics den UX-Patterns-Explorer Quince geschaffen, um den es in diesem Artikel gehen soll.

Was ist ein UX Design Pattern?

Doch bevor wir zu weit vorstoßen, soll kurz erläutert werden, was ein UX Design Pattern ist. Manchmal spricht man selbst im UX-Umfeld einfach von UI (User-Interface, Benutzeroberfläche-)Design Patterns. Allerdings sind UI und UX nicht gleichbedeutend. Genau das ist der Punkt, warum UX geeigneter erscheint. Wie Sie sehen, ist UX nicht einfach umfassender (und überspannt mit der Zeit mehrere Benutzeroberflächen und andere Berührungspunkte), sondern auch qualitativ anders. Um das Design für Benutzerszenarios zu erforschen, zu analysieren, zu synthetisieren und auszuprobieren, ist ein anderes Vorgehen erforderlich als beim Entwerfen einer bestimmten Benutzeroberfläche oder eines Bestandteils einer Benutzeroberfläche, die/der einen konkreten Zweck in einem Gesamtentwurfsszenario erfüllt. Es reicht bei Weitem nicht mehr aus, sich einfach auf einen Bereich oder ein Entitätsmodell zu stürzen, wie es so oft speziell bei Enterprisesoftware geschieht. Entwerfen für Benutzerszenarios ist ein Unterfangen mit speziellem Fokus, eigenen Techniken, oftmals eigenen Experten und letztlich einem eigenen Wissensfundus.
Und das ist genau die Stelle, an der UX Design Patterns ins Spiel kommen. Sie bilden einen Teil der Wissensbasis, wie der Entwurf für ansprechende Benutzerszenarios auszusehen hat. Vielleicht taucht bei Ihnen gleich die Frage auf, warum es Design Patterns sein müssen und nicht eine der vielen anderen Instrumente, mit denen sich gute Praktiken für den Entwurf vermitteln lassen. Hierfür gibt es viele Gründe, doch der einfachste ist einfach, dass die Muster existieren. Vor vielen Jahren hat Christopher Alexander (den man auch den Vater der richtigen Entwurfsmuster und Pattern-Sprachen nennen kann) eine recht gute Methode ausgearbeitet, um die der Realität innewohnenden Muster zu katalogisieren und darüber zu sprechen. Sein Arbeitsgebiet war die theoretische Architektur, doch wie sich vielfach gezeigt hat, durchdringt dieser Ansatz zur Schaffung eines Mustervokabulars mehrere Disziplinen – d. h. praktisch jede Disziplin, in der man in ähnlichen Kontexten mit letztlich gleichen Zielen Probleme angeht. Im Buch „The Timeless Way of Building“ referiert er über die Theorie, die dem Erstellen von Mustersprachen zugrunde liegt [2]. Im Wesentlichen wird dabei das angestrebt, was er ironischerweise als „Qualität ohne Namen“ bezeichnet und dazu bemerkt: „Lebendig, ganz bequem, frei, genau, frei vom Ich, ewig – die Qualität ist damit verknüpft und ist doch keines von diesen Dingen.“ Mit dem Anspruch, den Menschen zu helfen, diese Qualität zu erfassen und in diesem Sinne zu entwerfen, hat er die Theorie der Mustersprachen ausgearbeitet und das geschaffen, was in Entwurfsmusterkreisen als die „Alexandrinische Urform“ für das Katalogisieren von Mustern bezeichnet wird. Bei den Mustern im Quince-Katalog sind wir mehr oder weniger dieser Form gefolgt.

Abb. 2: Darstellung des Pattern-Formulars

Das Musterformular in Abbildung 2 operiert auf wenigen essenziellen Ebenen – Erkennen (Knowing), Verstehen (Understanding) und Verwenden (Using). Der Name, das Problem, die Lösung und die symbolische Visualisierung funktionieren zusammen, damit sich das Muster schnell erfassen lässt – das Problem, bei dem es helfen kann, eine prägnante Vorschrift für die Verwendung des Musters, ein symbolisches Beispiel und natürlich der Name. Dies kann ausreichen, damit Sie eine Vorstellung vom jeweiligen Muster bekommen, den Namen in Ihren Designdiskussionen verwenden können und sogar eine vorläufige Hilfe besitzen, damit Sie wissen, ob es für Ihre Anforderungen zweckmäßig ist. Der Kontext stellt zusätzliche Bedingungen bereit – situationsabhängige Einschränkungen, die Ihnen bei der Bewertung helfen, ob das Muster in Ihrem Kontext funktioniert – und das Prinzip liefert die zugrunde liegende Argumentation, warum das Muster funktioniert, sodass Sie ein tieferes Verständnis erhalten. Schließlich leitet die Implementierung Sie dazu an, das Muster in Ihrem Kontext einzusetzen. Beispiele dienen zur weiteren Veranschaulichung der Methode, wobei sie gleichzeitig das Verständnis für das Muster vertiefen und möglicherweise sogar zeigen, wie es mit anderen Mustern zusammenwirkt. Als Beispiel für dieses Formular zeigt Abbildung 3 den Quince-Inhalt für das Muster Input Hints, das erstmals von Jenifer Tidwell entdeckt und katalogisiert wurde (übrigens: sie verwendet in ihrem Buch, das manche dem Ansatz von Alexander vorziehen, ein eigenes Musterformular) [3].

Abb. 3: Symbolische Visualisierung des Musters Input Hints

Problem: Oftmals wissen die Leute nicht, was in Formularfelder eingegeben werden soll.
Lösung:
Füge einige Erläuterungen und/oder Beispiele für gültige Werte neben den Feldern hinzu, um dem Benutzer Hinweise zur Art der Eingaben zu liefern, die sie bereitstellen müssen.
Kontext:

  • Sie haben Felder, die eine zusätzliche Klarstellung gebrauchen können, da entweder das Feld dem Benutzer nicht vertraut ist oder Sie Werte erwarten, die dem Benutzer nicht geläufig sind.
  • Es gibt (k)einen vernünftigen Grund, die Werte mit einem spezifischen Eingabesteuerelement einzuschränken, beispielsweise mit einer Dropdownliste, einem Datumssteuerelement usw.
  • Die Hinweise stellen Sie nicht auf andere Weise zur Verfügung, beispielsweise als Eingabeaufforderung, als Text neben dem Eingabefeld oder als kontextbezogene Hilfe in der Ansicht, zu der die Felder gehören.

Prinzip: Es ist durchaus üblich, dass für bestimmte Felder auf Formularen zusätzliche Erläuterungen notwendig sind. Insbesondere ist es bei formatfreien Eingabefeldern zweckmäßig, zusätzliche Hilfestellung zu bieten, sofern es nicht aus der Art des jeweiligen Feldes (wie zum Beispiel bei Vorname, Stadt und dergleichen) hervorgeht, welche Werte sinnvoll sind. Außerdem sollten die Hinweise in unmittelbarer Nähe des Feldes (unmittelbar darunter oder daneben) erscheinen, damit ein Bezug der Eingabehinweise zu dem Feld, auf das Sie sich beziehen, sofort zu erkennen ist. Dadurch können sich die Benutzer darauf konzentrieren, das Formular abzuarbeiten, ohne zu raten oder die Werte an anderer Stelle nachschlagen zu müssen. Wenn Sie also auf diese Weise die richtige Anleitung bereitstellen können, ohne dass sie zu viel Platz verschlingt, ist diese Methode im Allgemeinen einer ergänzenden Hilfe oder Dokumentation vorzuziehen.
Implementierung:
Stellen Sie eine kurze Erläuterung (nicht mehr als ein oder maximal zwei Sätze) zusammen und im Idealfall einige Beispiele, die dem Benutzer helfen, die richtigen Werte einzutragen. Ordnen Sie diese Erläuterung direkt auf dem Formular neben dem jeweiligen Feld an. Oftmals ist es auch komfortabler, die Erläuterung direkt darunter vorzusehen. Es kann auch funktionieren, den Text rechts neben dem Feld oder direkt darunter oder neben der Beschriftung anzugeben. Wenn Sie dynamische Funktionen haben, können Sie Werte auch dynamisch als eine Art Callout anzeigen, wenn der Benutzer den Fokus auf das Feld gesetzt hat. Dadurch lässt sich visuelles Durcheinander auf dem Formular vermeiden. Wenn die Erläuterung inline erscheint, sollten Sie sie etwas in den Hintergrund rücken, indem Sie die Schriftgröße verringern und/oder den Text leicht ins Grau ändern. Die Erläuterungen sollen also nicht die ganze Aufmerksamkeit des Benutzers auf sich ziehen und von den eigentlichen Feldern, Beschriftungen und Aktionen ablenken, aber auch nicht zu schwer zu erkennen sein, speziell wenn Benutzer sich auf die fraglichen Felder konzentrieren. Als direkte Alternative kommt auch eine Eingabeaufforderung in Betracht. Wenn die Möglichkeit besteht und es sinnvoll ist, schränken Sie die Werte mithilfe einer geeigneten Methode ein (wie zum Beispiel mit einem strukturierten Format). Damit wird der Benutzer implizit angeleitet, ordnungsgemäße Werte bereitzustellen. Schließlich bieten sich Eingabehinweise vor allem für neue oder gelegentliche Benutzer an. Wenn Sie in erster Linie Benutzer erwarten, die ständig mit der Anwendung arbeiten, ist diese Methode nicht besonders gut geeignet. Zumindest sollten Sie eine Möglichkeit vorsehen, die Hinweise für derartige Benutzer ausblenden zu können.
Beispiele:
Das primäre Beispiel (symbolische Visualisierung) stammt vom Amazon.com-Formular zum Hinzufügen der Rechnungsadresse und verwendet Eingabehinweise, die erläutern, was in die Adresszeilen einzutragen ist. Für die anderen Beispiele sollten Sie sich die Input-Hints-Muster in Quince ansehen.

Aufmacherbild: Traditional ornamental floral paisley bandanna. You can use this pattern in the design of carpet, shawl, pillow, cushion, raster version von Shutterstock / Urheberrecht: : karakotsya

[ header = Muster und Beziehungen durchsuchen ]

Muster und Beziehungen untersuchen

Es ist zweckmäßig, einen Musterkatalog in einem Buch oder in einer einfachen Liste zur Hand zu haben. Die Muster an sich sind wie Wörter in der Sprache einzuordnen – sie besitzen einen Wert und eine Bedeutung an sich, doch die eigentliche Kunst in Sprachen ist die Kombination von Wörtern zu aussagekräftigen Sätzen. Bei Mustern ist es oftmals der schwierigste Teil, sie zu dem gewünschten Gesamtziel zu kombinieren. Aus diesem Grund kann das Verstehen der Beziehungen zwischen Mustern manchmal wertvoller sein, als die Muster an sich. Deshalb wollen wir den Benutzern helfen, diese Beziehungen in Quince über die unterschiedlichen Analysemodi zu verstehen – nach Tags selbst, nach Tag-Beziehungen, danach wie sie sich verhalten, den angestrebten Benutzerzielen und -aufgaben zu dienen, und danach, wie sie sich visuell verknüpfen lassen.

Abb. 4: Screenshot für Explore by Tag Relations

Wie bereits erwähnt, möchten wir Designer und Entwickler in die Lage versetzen, Muster nicht nur zu suchen und zu studieren, sondern auch die Beziehungen zwischen den Mustern zu erkunden. Diesem Zweck dient die Ansicht Explore by Tag Relations (Analysieren nach Tag-Beziehungen), in Abbildung 4. Muster, die durch individuelle Tags verknüpft sind, besitzen einen Wert an sich, so können Sie auf ein beliebiges Tag klicken und die verknüpften Muster untersuchen. Vielleicht finden Sie mit dieser Methode Musteralternativen. Zum Beispiel sind die mit Data Entry (Dateneingabe) markierten Muster auch als Grid (Raster, Tabelle) markiert. In manchen Fällen veranschaulicht das eine einfache hierarchische Tag-Beziehung. In anderen Fällen zeigt es, dass es Brückenmuster gibt, die Sie von der einen Art Muster zu einer anderen bringen können. Wir verwenden einen ähnlichen Ansatz, wenn Sie Explore Related auf einem bestimmten Muster in einer Musterliste auswählen.
Mithilfe der Drahtgitterzuordnung lassen sich Muster und ihre Beziehungen in unterschiedlicher Weise untersuchen. Es ist eine Art von Karte, in der das Gelände aus stereotypen Drahtgitterbereichen (wie zum Beispiel Header, Sidebar und Main Content) und Elementen (wie Tab Dialogs, Modal Panel, Titled Sections usw.) besteht. Diese Ansicht (Abb. 5) erlaubt es, Muster zu finden, von denen Sie annehmen, dass sie stereotyp in bestimmten Bereichen der Benutzeroberfläche vorkommen, oder Sie können Muster erkennen, die exemplarisch durch die jeweiligen Elemente implizit verkörpert werden. In diesen Fällen könnten Sie einfach nach einem bestimmten Muster suchen und dabei vielleicht überraschend andere, potenzielle Alternativen entdecken, und zwar in dem Raum, den Sie noch gar nicht betrachtet hatten. Und selbstverständlich können Sie sehen, wie bestimmte Muster in einer derartigen Benutzeroberfläche zusammenwirken.

Abb. 5: Screenshot für Explore by Wireframe

Abb. 6: Screenshot für Explore by User Tasks

Diese Ansicht verwendet ebenfalls Tags, zeigt aber auch die Muster, wie sie sich zu bestimmten Zielen/Aufgaben Ihrer Benutzer verhalten. In Quince gibt es natürlich auch die bewährten Möglichkeiten, um Erkundungen online anzustellen – nach Volltextsuche über Schlüsselwortsuche und eine Liste, die Facettennavigation nutzt, um schnell nach Tags und alphanumerischen Werten zu filtern. Quince wurde mit dem erklärten Ziel geschaffen, UX-Entwurfsmuster besser erkennen und durchsuchen zu können, um es Ihnen zu ermöglichen, Entwurfsmuster in Ihrer täglichen Praxis zu nutzen und das allgemeine Verständnis für Muster zu erweitern. Auf diese Weise können Sie dazu beitragen, ein gemeinsames Vokabular zu schaffen, auf dem unsere Mustersprache aufbaut.

Die Sprache zusammenbauen

Doch damit nicht genug. Wir möchten ein Forum für alle bieten, die mit dem Design von Benutzerszenarios zu tun haben. Hier können sie zusammenkommen, zusammenarbeiten, Wissen gemeinsam nutzen und voneinander lernen. Unsere Intention ist zweifellos nicht zu sagen: „Dies sind die Muster“ und fertig. Es gibt sicherlich Betrachtungen, die wir nicht berücksichtigt haben, es gibt zweifellos Raum für Verbesserungen und ganz sicher existieren mehr Muster als wir bislang katalogisiert haben (in Quince oder anderswo).
Somit möchten wir im Rahmen des Quince-Szenarios einfache Wege für die Community bieten, um die Mitarbeit zu erleichtern und dazu anzuregen, gemeinsam unsere UX-Mustersprache auszuarbeiten. Im interaktiven Muster-Viewer (den Sie erhalten, wenn Sie ein Muster in Quince auswählen), können Sie leicht neue Beispiele bekanntmachen, Ihre Gedanken kundtun, was funktioniert hat und was nicht (oder einfach andere wissen lassen, dass Sie das Muster verwenden, was zu einem gemeinsamen Vertrauen in die Muster beiträgt), und Sie können Methoden vorschlagen, um die Muster selbst zu optimieren – um Ecken zu beleuchten, die wir übersehen haben. Alles das hilft der breiteren Community, die Muster besser zu verstehen und unser gemeinsames Verständnis und die Sprache weiter zu vertiefen. Dadurch können wir einfacher miteinander kommunizieren und letztlich Szenarios entwerfen, die sich der „Qualität ohne Namen“ annähern.

Links & Literatur

[1] Fowler, Martin: „Patterns of Enterprise Application Architecture“. Addison-Wesley, 2002
[2] Alexander, Christopher: „The Timeless Way of Building“. Oxford University Press, 1979
[3] Tidwell, Jenifer: „Designing Interfaces: Patterns for Effective Interaction Design“. O’Reilly Media, Inc., 2005

Zusätzliche Quellen

Scott, Bill & Theresa Neil: „Designing Web Interfaces: Principles and Patterns for Rich Interactions“. O’Reilly Media, Inc., 2009. Ein Teil des Inhalts ist online unter http://designingwebinterfaces.com verfügbar.

Designing Interfaces (http://designinginterfaces.com) hat eine Anzahl der Muster aus dem Buch von Jenifer Tidwell frei online.

Yahoo! Design Pattern Library (http://developer.yahoo.com/ypatterns), gut organisiert und jede Menge Inhalt speziell für Web/AJAX.

Welie (http://welie.com), eine der umfangreicheren Bibliotheken.

UI Patterns (http://ui-patterns.com), einige Muster und ansprechende (Beispiel-)Sammlungen von Screenshots.

Pattern Tap (http://patterntap.com), gut konzipierte (Beispiel-)Sammlung von Screenshots.

Fluid Project (http://wiki.fluidproject.org/display/fluid/Design+Patterns), viele Links zu anderen Quellen.

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -