en
de

Team-Kommunikation mit visuellen Repräsentationen

8 August 2013
| |
Lesezeit: 4 Minutes

Zu den zentralen Aufgaben des Usability Engineering zählt die Gestaltung grafischer Benutzerschnittstellen (GUIs). Über die GUI kommuniziert der Computer in visueller Form mit dem Benutzer. Um diese Kommunikation optimal zu gestalten, nutze ich als Interaktionsdesigner unter anderem Erkenntnisse über die Funktionsweise kognitiver Prozesse wie Wahrnehmung, Gedächtnis und Denken. Mit diesem Beitrag möchte ich darauf aufmerksam machen, dass die bei der Gestaltung von GUIs genutzten Prinzipien auch an anderer Stelle im Usability Engineering wertvolle Dienste leisten können: zur Unterstützung der Kommunikation in einem Designteam.

Visuelle Kommunikation zwischen Computer und Mensch

Die menschliche Wahrnehmung ist optimiert auf das scheinbar mühelose Erkennen von Mustern und Ordnung in unserer Umwelt. Die folgende Abbildung zeigt ein Beispiel: wir sehen unwillkürlich einen Würfel, obwohl streng genommen kein Würfel vorhanden ist. Der Wahrnehmungsapparat erschließt die Form aus den sichtbaren Elementen der Darstellung.

Illustration des Gestaltgesetzes der "guten Fortsetzung": der Betrachter sieht einen imaginären Würfel

Illustration des Gestaltgesetzes der „guten Fortsetzung“: der Betrachter sieht einen imaginären Würfel. Quelle: https://commons.wikimedia.org/wiki/File:Nocube.svg

Die Regeln, denen das Wahrnehmungssystem dabei folgt, wurden schon zu Beginn des 20. Jahrhunderts in Form der Gestaltgesetze formuliert. In neuerer Zeit haben die Kognitions- und Neurowissenschaften unser Verständnis der Wahrnehmung vertieft und um weitere Aspekte ergänzt [1], [2].

Die kognitive Verarbeitung einer Benutzerschnittstelle endet aber nicht mit der Wahrnehmung. Denn die Benutzerschnittstelle dient immer auch als eine Art „externes Gedächtnis“. Sofern die relevanten Informationen dargestellt werden, kann der Benutzer sie viel effektiver aus der Benutzerschnittstelle abrufen als aus seinem Gedächtnis. Unterstützend wirkt dabei, dass Menschen sehr gut darin sind, sich Informationen zu merken anhand der Position dieser Information im Raum, also z.B. auf einem Bildschirm.

Visuelle Darstellungen können uns also auf verschiedene Art beim Denken unterstützen: indem sie uns helfen, Strukturen und Beziehungen zu erkennen und indem sie unser Gedächtnis sowohl entlasten als es auch effektiv unterstützen.

Bei Zühlke setzen wir diese Stärken visueller Darstellungen gezielt ein, um die Kommunikation im Rahmen des User Centered Designs zu fördern.  Denn Visualisierungen eignen sich nicht nur zur Kommunikation zwischen Computer und Mensch, sondern können nach meiner Erfahrung auch ein Designteam unterstützen, das versucht, die Benutzeranforderungen eines geplanten Systems zu verstehen.

Beobachtungen ordnen mit Affinity-Diagrammen

Beim User Centered Design versuchen wir zunächst durch Vor-Ort-Beobachtungen und Interviews mit Benutzern den Nutzungskontext zu verstehen. Ideal ist dafür ein gut gemischtes Team mit Vertretern unterschiedlicher Rollen: nicht nur der Produktmanager, sondern auch Benutzer, Entwickler und andere Stakeholder sollten am Design beteiligt sein.

Nachdem ein Designteam eine Reihe von Benutzern bei ihrer Arbeit beobachtet und interviewt hat, steht es vor der Herausforderung, aus einer Vielzahl einzelner Beobachtungen und Aussagen ein stimmiges Gesamtbild zu formen. Dabei kann ein Affinity-Diagramm eine große Hilfe sein.

Affinity Diagram

Ein Affinity-Diagramm hilft effektiv bei der Strukturierung einer Vielzahl von Beobachtungen und Aussagen

Ein Affinity-Diagramm entsteht, indem zunächst die Beobachtungen auf Post-it-Kärtchen an einer Wand gesammelt werden – im Beispiel sind das die blauen Kärtchen. Das Team diskutiert und gruppiert zunächst Beobachtungen, die ein gemeinsames Thema haben. Anschließend leitet es aus Gruppen von Aussagen „generalisierte Benutzeraussagen“ ab, die als orange Kärtchen oberhalb der blauen angepinnt werden. Im letzten Schritt fasst das Team diese Benutzeraussagen zu Anforderungen an das Design zusammen (die grünen Kärtchen).

Am Ende steht ein übersichtliches Diagramm, das viele Einzelaussagen zu wenigen Anforderungen zusammenfasst. Seine Ausdruckskraft bezieht das Affinity Diagramm aus der geschickten Nutzung visueller Informationen: sowohl die räumliche Anordnung der Kärtchen als auch ihre Farbe tragen zum Verständnis des erreichten Ergebnisses bei.

Die Fachdomäne verstehen

Gelegentlich steht ein Designteam vor der Aufgabe, sich auf ein gemeinsames Verständnis der Fachdomäne aus Sicht des Benutzers zu verständigen. Es geht dabei um die Frage, welche Entitäten die Domäne umfasst und in welchen Beziehungen diese Entitäten untereinander stehen. In diesem Fall bietet sich die Nutzung eines UML-Domänenmodells an.

Domänenmodell

Ein Fachmodell illustriert die Struktur der Fachdomäne aus der Sicht des Benutzers

Dieses Diagramm sollte nicht mit einem Objektmodell verwechselt werden. Es geht in dieser Phase nicht um die Strukturierung einer Software, sondern um die Frage, in welche Elemente die Fachdomäne sich für den Benutzer untergliedert.

Das gemeinsame Erstellen eines visuellen Domänenmodells im Team kann sehr wertvoll sein, um Klarheit über Begriffe und ihre Beziehungen zu erzielen. Die eher formale Notation und die Verwandschaft zum Objektmodell kann helfen, technisch orientierte Teammitglieder wie z.B. Entwickler „ins Boot zu holen“.

Interaktionsdesign aus der Vogelperspektive

Screenflow Diagram

Screen Flow Diagramme helfen, die Übersicht zu behalten: der Fokus liegt auf der Navigation, nicht auf den Inhalten

Bei der Gestaltung von Benutzeroberflächen werden in der Regel Wireframes, also schematische Bildschirmskizzen, gezeichnet – eine nahe liegende Wahl, da Wireframes auf recht konkrete Weise den Aufbau und die Gliederung eines User Interface darstellen. Da zudem fast jeder die typischen Bedienelemente kennt, können Wireframes von den Teilnehmern eines Designworkshops gemeinsam am Whiteboard gezeichnet werden.

Die Konzentration auf Wireframes kann jedoch dazu führen, dass das Team das Gesamtbild aus den Augen verliert. Hier helfen sogenannte „Screen Flow Diagramme“. Ein solches Diagramm zeigt das Interaktionsdesign aus der Vogelperspektive. Bei dieser Darstellung verzichtet man bewusst auf viele Details. Jeder Bildschirm oder Dialog wird darin durch einen einfachen Kasten repräsentiert. Pfeile erklären die Navigationsmöglichkeiten zwischen den Bildschirmen. Durch bewusste Reduktion auf die Navigationssicht kann ein Screen Flow Diagramm dabei helfen, wichtige Fragen zu klären:

  • Wie viele unterschiedliche Bildschirme oder Dialoge gibt es?
  • Wie navigiert der Benutzer im System?
  • Kommt man von überall zurück, oder gibt es „Sackgassen“?
  • Wie viele Klicks braucht der Benutzer, um eine bestimmte Funktion zu erreichen?

Aus diesen Gründen finde ich es hilfreich, in Designworkshops parallel zu den Wireframes immer auch ein Screen Flow Diagramm zu erstellen.

Die hier beschriebenen Darstellungsformen sind eine subjektive Auswahl. Welche Typen von Diagrammen nutzen Sie, um mit Ihrem Team effektiv zu kommunizieren?

Quellen und weiterführende Literatur

[1] Colin Ware (2008). Visual Thinking for Design. Boston, MA: Morgan Kaufmann.
[2] Blackwell, Alan (2013): Visual Representation. In: Soegaard, Mads and Dam, Rikke Friis (eds.). „The Encyclopedia of Human-Computer Interaction, 2nd Ed.“. Aarhus, Denmark: The Interaction Design Foundation. Available online at http://www.interaction-design.org/encyclopedia/visual_representation.html

Kommentare (0)

×

Updates

Schreiben Sie sich jetzt ein für unsere zwei-wöchentlichen Updates per E-Mail.

This field is required
This field is required
This field is required

Mich interessiert

Select at least one category
You were signed up successfully.

Erhalten Sie regelmäßige Updates zu neuen Blogartikeln

Jetzt anmelden

Oder möchten Sie eine Projektanfrage mit uns besprechen? Kontakt aufnehmen »