User Experience im Visier

Was ist User Experience (UX)?

Die User Experience (UX) beschreibt das Erlebnis und die Gefühle, die ein Mensch während der Interaktion mit einem – zumeist digitalen – Produkt hat. Diese sind sehr subjektiv und unterscheiden sich daher von Mensch zu Mensch enorm. Wenn bei Ihnen die Farbe Grün z.B. regelmäßig Magenkrämpfe auslöst, dann werden Sie beim Besuch dieser Seite keine besonders gute User Experience haben. Wir können daher lediglich versuchen, mit dem Design für ein möglichst gutes Erlebnis für die meisten User zu sorgen. Die Gefühle selbst können wir nicht gestalten.

Was beeinflusst die UX?

• Der Grundzustand: Wie sind meine Erwartungen? In welcher Stimmung befinde ich mich gerade? Was bewegt mich? Was mag ich gar nicht?
• Die Zeit: Je länger ich mich mit dem Produkt beschäftige, desto größer und umfassender wird das Wissen und die Geschichte zu diesem Produkt in meinem Kopf
• Der Kontext: Wo und wann geschieht die Interaktion? Sehe ich das Video auf einem kleinen Smartphone-Screen, oder per Beamer über meine Heimkino-Anlage?
• Die Summe der Erlebnisse: Wie ist das Erlebnis, während ich mich über das Produkt informiere? Wie ist es während des Kauf-Prozesses? Und wie bei einer Reklamation? Die UX formt sich dabei aus den Erlebnissen in allen Phasen zu einem Gesamterlebnis.

Was ist eigentlich der Unterschied zwischen UX und UI?

Ein User Interface (UI) umfasst alle visuellen und akustischen Ausprägungen der Bedienoberfläche. Also Farben, Texturen, Bilder, Grafiken, Symbole, Menüs, Buttons etc. Verantwortlich dafür sind Grafik- und Screendesigner. Das User Interface ist allerdings nur ein Teil der User Experience. UX ist viel mehr. Ein UI kann z. B. sehr ausgefeilt, modern und edel sein – wenn die anvisierte Zielgruppe das jedoch als spießig und langweilig empfindet, ist die UX wahrscheinlich schlecht.

Wie erreichen wir eine möglichst gute UX?

Bei New Communication arbeiten wir seit Jahren nach dem Vorgehensmodell des „UX-Turms“. Er fußt auf den Erkenntnissen von Jesse James Garrett, die er im Buch „Elemente der User Experience“ zusammenfasste. In seinem Modell werden auf fünf verschiedenen Ebenen die wesentlichen Stationen beschrieben, die notwendig sind, um das Erlebnis für die angepeilten Nutzer möglichst positiv zu gestalten. Die Elemente des Turms erstrecken sich dabei über zwei Bereiche: Über den Bereich der Funktionen und über den der Informationen. Wir haben dieses Modell leicht erweitert und um Methoden und Tools ergänzt.

Die fünf Ebenen des UX-Turms

Jede Ebene besteht aus mehreren Bausteinen. In unseren Workshops bauen wir den Turm tatsächlich mit echten Kinderbauklötzen nach und nach auf. Den Grund dafür erfahren Sie am Ende dieses Artikels.

Die erste Ebene: Strategie

In der Strategie-Ebene werden zwei essenzielle Dinge untersucht:

• Produktziele
• Nutzerbedürfnisse

Produktziele:

• Was will Ihr Unternehmen mit dem Produkt erreichen?
• Was soll das Produkt leisten?
• Gibt es eine Corporate Identity?
• Wie ist die übergeordnete Unternehmensstrategie?

Nutzerbedürfnisse:

• Was treibt den User an?
• Welche Ziele verfolgt er?
• Was hindert ihn an seinem Erfolg?
• Welche Vorkenntnisse hat er allgemein und in Bezug auf das Produkt?
• Womit können wir ihn überraschen?

Um diese Fragen zu beantworten, führen wir z. B. gemeinsam mit dem Auftraggeber Workshops durch. Wir vergleichen den Wettbewerb, erfragen die Unternehmensstrategie und erstellen Personas der Nutzer. Durch Onsite-Umfragen gewinnen wir wertvolle Informationen über die tatsächlichen Seitenbesucher. In Interviews mit ausgewählten Zielgruppenvertretern erhalten wir weitere Einblicke in die anvisierte Zielgruppe. Die Ergebnisse werden von uns dokumentiert und analysiert.

Die zweite Ebene: Umfang

In dieser Ebene geht es um die folgenden drei Bausteine:

• Inhaltsanforderungen
• Funktionsspezifikationen
• Kreative Leitidee

Inhaltsanforderungen:

• Welche Inhalte liegen schon vor, welche können zukünftig entfallen?

• Welche Inhaltsformen – wie z. B. Texte, Bilder, Videos, Audiodateien – sollen enthalten sein?

• Welche neuen Inhalte müssen erstellt werden?

• Wie werden sie produziert oder eingekauft und wer ist dafür verantwortlich?

• Wie ist der Umfang einzelner Inhaltsformen und wie oft werden sie aktualisiert?

Funktionsspezifikationen:

• Welche Funktionalitäten bietet das Produkt?
• Was soll entwickelt werden und was soll NICHT entwickelt werden?
• Wie kann der Erfolg einer Funktion überprüft werden?

Kreative Leitidee:

• Gibt es eine visuelle Besonderheit, die sich durch das Produkt zieht?
• Verleiht eine smarte Funktion dem Produkt Individualität?
• Spricht das Produkt eine einzigartige Sprache?

Die Beantwortung dieser Fragen ergibt sich aus den Festlegungen und Erkenntnissen der Strategie-Ebene. So schreiben wir z.B. aus der Sicht der Personas User Stories. Das sind einfache Sätze mit folgendem Aufbau: „Als ein ... (z.B. interessierter Käufer) möchte ich ... (z.B. die Produkte nach Größe filtern), um ... (z.B. eine passende Hose zu finden).“

Diese User Stories bringen wir in sogenannte User Story Maps auf, um eine Übersicht des Projektumfangs mit Inhalten und Funktionalitäten zu erhalten. Mit Hilfe eines Content-Inventories dokumentieren wir den Ist-Stand des Inhaltes – wenn es einen gibt – und überführen diesen dann in einen Soll-Zustand. Die kreative Leitidee kann durch Brainstormings oder mittels anderer Kreativtechniken gefunden werden.

Auch in dieser Ebene sind gemeinsame Workshops mit dem Auftraggeber sinnvoll. Elementar an dieser Stelle ist das Verständnis des zukünftigen Contents. Denn erst so kann eine erfolgreiche Content-Strategie implementiert werden und das Design kann „Content-first“ erfolgen.

Die dritte Ebene: Struktur

Hier bearbeiten wir die zwei Stationen:

• Informationsarchitektur
• Interaktionsdesign

Informationsarchitektur

• Wie sind die Inhalte strukturell aufgebaut?
• Welche Inhaltselemente sind miteinander verbunden?
• Wie machen wir die Informationen zugänglich – hierarchisch, organisch, sequenziell oder in einer Matrix-Struktur?
• Wie können wir die Informationen isolieren, die den User gerade interessieren?

Interaktionsdesign

• Wie kann das mögliche Nutzerverhalten beschrieben werden?
• Welche Schritte durchläuft der User in einer Funktionalität wie z. B. einem Login-Prozess, einer Newsletter-Anmeldung o.ä.?
• Welche konzeptuellen Modelle sind im Kopf des Users vorhanden?
• Wie wird mit Benutzer-Fehlern umgegangen?

Am Ende der dritten Ebene haben wir eine Sitemap sowie weitere Struktur- und Interaktionsdiagramme erarbeitet. Wir bedienen uns dabei Methoden wie dem offenen oder geschlossenen Card-Sorting, um Kategorien für die Struktur zu finden. Mit User-Tests können wir bereits auf dieser Ebene überprüfen, ob unsere Annahmen richtig sind, die Struktur verstanden wird und gegebenenfalls Änderungen einarbeiten. Der User-Flow, also der Weg, den der Nutzer im Idealfall durch das digitale Produkt geht, sollte nun feststehen.

Die vierte Ebene: Raster

In der Raster-Ebene behandeln wir:

• Navigationsdesign
• Interfacedesign
• Informationsdesign

Navigationsdesign:

• Wie erkennt der Nutzer, wo er sich gerade innerhalb der Seitenstruktur befindet?
• Wie soll der User von einer zu einer anderen Seite gelangen?
• Welche Navigationssysteme stehen zur Verfügung?
• Gibt es Elemente, die immer sichtbar – „sticky“ – sind?
• Wie ist die Beziehung zwischen den Inhalten und der Seite, auf der der Besucher gerade ist?

Interfacedesign:

• Welche Funktionen werden auf welcher Seite und an welcher Stelle platziert?
• Wie werden diese Funktionen auf der Seite realisiert?
• Welche Bedienelemente stehen in den Funktionen zur Verfügung?
• Welche Elemente sind wichtiger als andere?

Informationsdesign:

• Wie können Inhalte schnell und verständlich kommuniziert werden?
• Wie werden ungewohnte Inhalte sortiert und präsentiert?
• Wie müssen Formulare aufgebaut sein, damit sie schnell auszufüllen sind?
• Können bestimmte Inhalte in anderen Formen aufbereitet werden, wie z.B. Infografiken oder Animationen?

Resultat der Raster-Ebene sind Wireframes. Das sind Skizzen des zukünftigen digitalen Produktes. Aus ihnen wird ersichtlich, an welcher Stelle die Navigation sitzt, wo sich welche Buttons, Teaser, Texte und Bilder befinden. Im besten Fall wird hier bereits mit echtem Text gearbeitet. Platzhaltertext (das typische „Lorem ipsum“) verfälscht mitunter die Aussagekraft der Wireframes. Sie können ganz analog mit Bleistift auf Papier entstehen, aber auch digital am Bildschirm. In User-Tests sollten sie auf Verständlichkeit überprüft werden.

Die fünfte Ebene: Oberfläche

Hier gibt es nur einen Baustein – das sensorische Design:

Sensorisches Design:

• Welche Sinne sollen angesprochen werden?
• Welche Farben und Schriftarten werden mit welcher Bedeutung eingesetzt?
• Gibt es besondere Schmuckelemente?
• Wie kann der Blickverlauf mit visuellen Mitteln gelenkt werden?

Nun kommt – endlich – Farbe ins Spiel. Liegt ein Corporate Design Manual vor, integrieren wir dessen Angaben in das Layout. Gegebenenfalls erweitern wir das Manual, denn nicht immer sind die Angaben für digitale Produkte ausreichend. Das Design wird nun auch, in enger Absprache zwischen Programmierern und Screendesignern, im Frontend implementiert. Dort ergänzen animierte Effekte das Gesamtbild, z. B. wenn eine Interaktion per Maus oder Touch passiert. In der initialen Contentpflege bauen wir die wichtigsten Seitentypen auf und befüllen sie mit den finalen Text- und Bildinhalten.

Es ist geschafft.

Das Produkt ist fertig und wir beenden unsere Arbeit. Falsch gedacht! Einer der größten Fehler im UX Design ist die Annahme, dass digitale Produkte abgeschlossen werden können. Wir hoffen zwar, dass das Endprodukt die gewünschten positiven Gefühle und Verhaltensmuster bei den Nutzern auslöst. Das müssen wir nun aber stetig überprüfen. Nutzerverhalten ändert sich. Auch eine Unternehmensstrategie kann sich ändern. Vielleicht sollen in Zukunft die Anrufe im Kundensupport reduziert werden. Das könnte ein Chatbot leisten. Also wird eine neue Funktion erforderlich, deren Interaktion erarbeitet werden, und die sich irgendwo in der Struktur und im Raster widerfinden muss. Und wie ist eigentlich der Button dafür gestaltet? Wir steigen also in den virtuellen Fahrstuhl, der von der fünften Ebene wieder nach unten führt, und beginnen den Weg nach oben von neuem. Und wieder und wieder.

Warum eigentlich ein Turm aus Bauklötzen?

Der Turm aus Bauklötzen veranschaulicht sehr schön das komplexe System guter User Experience. Die Ebenen des UX-Turmes bauen aufeinander auf. Benachbarte Ebenen beeinflussen sich. Werden im Nachgang durch neue Anforderungen Änderungen an einer Ebene notwendig, ziehen wir – bildlich gesprochen – wie bei Jenga einen Baustein aus dem Turm. Das kann gut gehen, wenn man aufpasst. Wird der Stein jedoch zu sorglos und zu schnell herausgezogen, dann gerät der Turm ins Wanken oder stürzt ein. Bei nachträglichen Anforderungen und Wünschen sind also diese beiden Fragen von Bedeutung:

• An welcher Stelle im Turm ist die Änderung notwendig?
• Welche Auswirkungen haben diese auf die darüber und darunter liegende Ebene?

Wer ist am Turmbau beteiligt?

Je nach Ebene sind Personen aus verschiedenen Disziplinen bzw. mit unterschiedlichen Skills beteiligt:

• Strategie: Markenstrategen, Contentstrategen, Konzeptioner, Texter
• Umfang: Contentstrategen, Konzeptioner, Texter, Programmierer
• Struktur: Konzeptioner, Texter, Programmierer
• Raster: Konzeptioner, Screendesigner, Programmierer
• Oberfläche: Screendesigner, Programmierer

Wichtig dabei – alle Beteiligten müssen sich als UX-Design-Team begreifen und verzahnt miteinander arbeiten. Bei New Communication vereinen wir Vertreter aller Bereiche unter einem Dach. Durch die räumliche Nähe – oft nur durch eine Tür getrennt – ist es uns möglich, den UX-Turm gewissenhaft aufzubauen.

Wie lange dauert so ein Turmbau?

Das hängt stark vom geplanten Projekt ab. Eine seriöse Schätzung können wir eigentlich erst nach Abschluss der Umfangs-Ebene abgeben. Erst dann wissen wir, was entwickelt werden soll und was nicht. Daher empfehlen wir, bei Interesse einen oder mehrere Workshops zur Erarbeitung der ersten und zweiten Ebene durchzuführen. Generell können die Ebenen auch sehr schnell durchlaufen werden, es müssen dabei aber alle Fragen beantwortet werden. Nur so gelingt es, ein möglichst gutes User Erlebnis zu designen.