Um nutzer-zentrierte Design Projekte erfolgreich durchzuführen ist es wichtig, dass das Projektteam auf ein gemeinsames Vokabular und ein gemeinsames Verständnis von Schlüsselkonzepten zurückgreifen kann. Sind identische Begriffe bei unterschiedlichen Mitgliedern des Projektteams nicht mit denselben Konzepten verknüpft, so kann dies zu Missverständnissen führen. Dies kann z.B. bei Begriffen wie „Usability“ oder „User Experience“ der Fall sein, für die man, im ungünstigsten Falle, so viele unterschiedliche Definitionen finden kann wie es Mitglieder im Projektteam gibt. Auch bezogen auf das Konzept “Interaktionsdesign” können Missverständnisse auftreten.

Die Klärung bestimmter Schlüsselkonzepte zu Beginn eines Projekts kann sehr hilfreich sein wenn es darum geht, das Projekt auf einen guten Weg zu bringen und Kommunikationsprobleme zu vermeiden. Erläuterungen, wie sie etwa Jesse James Garret in „The Elements of User Experience“ [PDF] vornimmt, können dabei helfen, Missverständnisse zu vermeiden, z.B. dass eine „Usability-Optimierung“ verlangt wird, wenn in Wirklichkeit eine reine Verbesserung des visuellen Designs gewünscht ist.

Bestimmte Aspekte der User Experience, wie z.B. visuelles Design, können Personen ohne „UX Hintergrund“ relativ einfach erläutert werden. Visuelles Design ist ein Konzept, dass üblicherweise gut und schnell verstanden wird – schließlich hat jeder eine Vorstellung von Ästhetik. (Dies bedeutet nicht unbedingt, dass auch die Ästhetik-Beurteilungen verschiedener Personen notwendigerweise übereinstimmen.)

Mikro-Interaktionsdesign vs. Makro-Interaktionsdesign

Beim Interaktionsdesign kann die Sachlage schwieriger sein, da wirklich gutes Interaktionsdesign oft gar nicht bewusst wahrgenommen wird (und auch nicht bewusst wahrgenommen werden soll, da sich die Interaktion einfach natürlich anfühlen sollte, ohne dass der Nutzer großartig darüber nachdenkt). Daher kann es aufwändiger sein, einem Laien den Fokus des Interaktionsdesigns zu vermitteln, der auf dem Verhalten des Systems in Verbindung mit den Aktionen des Anwenders liegt. Selbst wenn dies gelingt, sind implizite Missverständnisse nicht völlig ausgeschlossen, nämlich dann, wenn einer der Kommunikationspartner das Interaktionsdesign auf Komponentenebene im Sinn hat, wohingegen der andere an das „Gesamtbild“ der Interaktion des Anwenders mit dem User Interface denkt.

Die Unterscheidung von Mikro-Interaktionsdesign und Makro-Interaktionsdesign kann nützlich sein, wenn es darum geht, zu vermeiden, dass Teammitglieder schlicht von „Interaktionsdesign“ reden, sich dabei aber auf unterschiedliche Konzepte beziehen. Die entsprechenden Einträge in einem „Projekt-Glossar“ könnten wie folgt aussehen:

Makro-Interaktionen beschreiben, wie der Anwender mit dem User Interface interagiert, um sinnvolle Schlüsselaufgaben durchzuführen, indem er durch das User Interface navigiert und eine Reihe von Funktionalitäten sowie verschiedene Widgets/Controls nutzt. Bei den Makro-Interaktionen geht es darum, dass er Anwender für seine Arbeit relevante Ziele erreicht.

Mikro-Interaktionen beziehen sich auf das Verhalten einzelner Widgets/Controls, ohne dass dabei umfassendere Interaktionen berücksichtigt werden – die Mikro-Interaktionen berücksichtigen also nicht die „Semantik“ der Arbeitsabläufe des Anwenders. Mikro-Interaktionen beschreiben, quasi auf „atomarer“ und kontextfreier Ebene, das generische Verhalten einzelner Komponenten als Reaktion auf die Aktionen des Anwenders.

Im Folgenden ist ein Beispiel für Mikro-Interaktion dargestellt.

Der Clip zeigt, wie die Auto-Vervollständigung von Adressen in Firefox und in Safari umgesetzt ist. Die Makro-Interaktion ist im Wesentlichen gleich: der Anwender möchte zur einer Adresse browsen und das User Interface unterstützt ihn, indem es Adressen aus der Historie, die auf seine bisherigen Eingaben passen, vorschlägt, so dass der Anwender ggf. die gewünschte Adresse auswählen kann.

Auto-Vervollständigung von Adressen in Firefox und Safari

Im Mikro-Interaktionsdesign der beiden Browser existieren jedoch Unterschiede. Ein wesentlicher Unterschied besteht darin, dass die Auto-Vervollständigung in Firefox ausschließlich unterhalb des Adressfeldes stattfindet, so dass der Anwender, um zur ersten passenden Adresse zu gelangen, die Pfeiltaste nach unten (oder die Maus) und dann die Eingabetaste betätigen muss. In Safari findet die Auto-Vervollständigung des „besten Treffers“ im Adressfeld statt, so dass der Anwender nur die Enter Taste betätigen muss, um zu der Adresse zu navigieren.

Dies ist kein riesiger Unterschied und das Ziel, dem Anwender eine Liste passender Adressen zu präsentieren, wird in beiden Fällen erreicht. Aber die Mikro-Interaktionen tragen zum „Feel“ der beiden User Interfaces bei. Entweder durch den Extra-Komfort, in Safari durch einfaches Drücken der Enter Taste zum ersten Treffer zu gelangen, oder durch die Verwirrung, beim Tippen schon eine vollständige Adresse im Eingabefeld zu sehen.

Derartige Mikro-Interaktionen können auch das Verhalten der Anwender beeinflussen, wenn sie sich so einprägen, dass es für Anwender schwierig ist, mit User Interfaces zu interagieren, in denen die betreffende Mikro-Interaktion anders ausfällt: es gibt Fälle von Anwendern, die so gut wie ausschließlich Safari nutzen und die Firefox verfluchen, wenn sie Enter drücken, um zu ersten Adresse zu gelangen, was jedoch in einer ungültigen Eingabe resultiert – und die den gleichen Fehler bei der nächsten Gelegenheit wieder machen, weil ihnen die Art und Weise, wie dies in Safari umgesetzt ist, in Fleisch und Blut übergegangen ist.

Dokumentation von Interaktionsdesigns

Wireframes und Storyboards sind essenzielle Werkzeuge zur Dokumentation von Makro-Interaktionsdesigns, z.B. wenn es darum geht, zu veranschaulichen, wie eine Reihe von Screens und Dialogen sich entfaltet, während ein Anwender mit dem User Interface arbeitet, oder um zu zeigen wie auf die zur Erledigung von Aufgaben erforderlichen Funktionen zugegriffen werden kann.

Zur Dokumentation des Mikro-Interaktionsdesigns werden andere Wege beschritten. Da diese Ebene des Interaktionsdesigns sehr dynamische Details einzelner Komponenten betrifft, können umfassende textuelle Beschreibungen oder detaillierte Storyboards erforderlich werden. Aber selbst diese können oft nicht das „Feel“ der jeweiligen Interaktion vermitteln, das durch die vielen „Kleinigkeiten“ entsteht und eigentlich nur durch die „echte“ Erfahrung selbst kommuniziert werden kann. So können z.B. die Mikro-Interaktionen zur Autovervollständigung aus obigem Beispiel textuell beschrieben werden, aber die Beschreibungen würden den tatsächlichen Interaktionserfahrungen nicht gerecht werden. Selbst eine Beurteilung der beiden Mikro-Interaktionen anhand des Clips kann schwierig sein.

Bearbeitung von Interaktionsdesigns

Besteht das Ziel eines Projekts in der „Optimierung des Interaktionsdesigns“, so kommen hierfür offensichtlich zwei Bereiche in Frage. Ein sinnvoller Ansatz besteht darin, sich „von oben nach unten“ vorzuarbeiten und ein geeignetes Makro-Interaktionsdesign zu erstellen, bevor dann das Mikro-Interaktionsdesign gestaltet wird. Dies bedeutet nicht, dass das Mikro-Interaktionsdesign mit weniger Sorgfalt angegangen werden sollte – Mikro-Interaktionen können einen bedeutenden Teil zur gesamten User Experience beitragen. Das Makro-Interaktionsdesign eines User Interface liefert jedoch den Rahmen, in dem sich das Mikro-Interaktionsdesign abspielt und legt unter anderem fest, welche Controls verwendet werden sollten. Wurden solche Festlegungen getroffen, die den Rahmen abstecken, so kann das Mikro-Interaktionsdesign entworfen werden. Durch den Einsatz eines GUI Theme, das mittels eines modernen GUI Toolkit wie z.B. WPF oder Silverlight erstellt wurde, ist es sogar möglich, ein Mikro-Interaktionsdesign „von der Stange“ einzusetzen. Das Verhalten der einzelnen Komponenten eines solchen Mikro-Interationsdesigns ist bereits harmonisch aufeinander abgestimmt. Auf diese Weise ist sichergestellt, dass die Komponenten reibungslos und kohärent zusammenspielen. Durch die zentrale Konfiguration von Parametern können alle Komponenten gleichartig beeinflusst werden, so dass auch bei Anpassung bspw. der Reaktionsgeschwindigkeit der Komponenten der kohärente Gesamteindruck erhalten bleibt.

Bearbeitung von Mikro-Interaktionsdesigns

Angenommen in einem Projekt soll das Mikro-Interaktionsdesign für ein User Interface fokussiert werden. Falls das Projektteam (oder der Projektsponsor) sich des Unterschieds zwischen Mikro-Interaktionsdesign und Makro-Interaktionsdesign nicht bewusst ist, so wäre es nun ein guter (sprich: der späteste) Zeitpunkt, dies zu erläutern. Nur durch ein präzises Verständnis der Rolle des Mikro-Interaktionsdesigns können falsche Erwartungen hinsichtlich der hierdurch möglichen Usability-Verbesserungen vermieden werden.
Nachdem korrekte Erwartungen bestehen kann die Gestaltung des Mikro-Interaktionsdesigns auf zwei prototypische Arten erfolgen:

1. komponentenweise Gestaltung des Interaktionsdesigns
   In diesem Fall werden die Mikro-Interaktionen pro Komponente definiert, d.h. jede Komponente wie Suchfelder, Expansion Toggles usw. werden isoliert betrachtet ohne dass die einzelnen „Verhaltensweisen“ miteinander abgeglichen werden, z.B. hinsichtlich der Animationsgeschwindigkeit
2. konzertierte Gestaltung des Interaktionsdesigns
   Beim konzertierten Interaktionsdesign, am anderen Ende des Kontinuums, liegt der Fokus zwar immer noch auf dem Verhalten einzelner Controls, aber das Verhalten der Controls ist abgestimmt dahingehend, dass sie sich in Schlüsselaspekten wie etwa Animationsgeschwindigkeit und Reaktionszeit, gleichartig verhalten. (Diesbezüglich kann die oben erwähnte Verwendung eines GUI Theme, das über zentrale Parameter konfiguriert wird hilfreich sein.)

Überflüssig, darauf hinzuweisen, dass die komponentenweise Gestaltung in einem unausgewogenen Verhalten des User Interface resultieren kann, z.B. wenn die Geschwindigkeit der Animationen zwischen den Komponenten variiert. Die konzertierte Gestaltung dagegen gewährleistet die Kohärenz des dynamischen Verhaltens und des „Feel“ des User Interface. Dennoch sollten sich alle Stakeholder der Tatsache bewusst sein, dass viele sorgfältig gestaltete Mikro-Interaktionen nicht notwendigerweise zu einem überzeugenden Makro-Interaktionsdesign führen. Das „Feel“ des User Interface kann auf den beschriebenen Wegen „poliert“ und kohärent gemacht werden und der ein oder andere nutzerfreundliche Aspekt kann eventuell über Mikro-Interaktionen in das Interface „geschmuggelt“ werden, aber trotzdem kann das User Interface immer noch versagen, wenn es um die Unterstützung der Arbeit des Anwenders in ihrer Gesamtheit geht.

Relevanz von Mikro-Interaktionen

Wenn Mikro-Interaktionsdesign sorgfältig durchgeführt wird, kann es der Aspekt sein, in dem sich ein gutes von einem hervorragenden User Interface unterscheidet. Mit neuen Technologien und Interaktionsparadigmen gewinnt der Bereich des Mikro-Interaktionsdesigns für die User Experience zunehmend an Bedeutung. Produkte wie das iPhone oder Surface sind Beispiele für Interfaces, die reich an Mikro-Interaktionen sind – mit Elementen die „zittern“, „atmen“ und „pulsieren“, wenn sie berührt oder bewegt werden. Keiner dieser Aspekte betrifft wesentlich die Möglichkeit, Aufgaben überhaupt auszuführen, aber sie tragen entscheidend zur Gesamterfahrung bei, die der Anwender bei der Interaktion mit dem System macht. Wäre das Mikro-Interaktionsdesign für diese Produkte nicht wohl durchdacht und kohärent, so wäre die User Experience beeinträchtigt – und die Anwender könnten eventuell nicht einmal sagen, warum.

Dies könnte schließlich eine weitere Möglichkeit sein, Mikro-Interaktionsdesign von Makro-Interaktionsdesign zu unterscheiden: wenn Anwender sagen, dass sich ein User Interface „irgendwie nicht richtig anfühlt“, ohne genau sagen zu können, warum, so könnte es angebracht sein, die Mikro-Interaktionen zu prüfen.

Firefox ist eine eingetragene Marke der Mozilla Fundation.
Safari ist eine Marke von Apple Inc. in den USA und anderen Ländern.