Let's talk about UX, baby!

Hab‘ ich so gemeint

Im kollaborativen Bereich, also in der Zusammenarbeit mit unterschiedlichen Personen, ist Kommunikation die Schlüsselaktivität für die erfolgreiche Bewältigung eines Projektes. Ob mit Anwendern, Kunden oder anderen Projektmitgliedern – Kommunikation bedeutet viel mehr, als nur mit den jeweiligen Empfängern zu sprechen. Man soll auch sicherzustellen, dass die Worte dabei richtig herauskommen. Hört sich verständlich an. Zwei Parteien, die die gleichen Wörter verwenden, haben aber nicht immer die gleichen Konzepte im Kopf. Dieses Erkenntnis hat in unserem Meeting für ein lautes Raunen im Raum gesorgt.

Oftmals haben wir schlichtweg aneinander vorbeigeredet, obwohl wir alle dachten, vom gleichen zu sprechen. Wir haben festgestellt, dass Personen außerhalb des Themengebietes mit der UX-Terminologie ihre Schwierigkeiten haben. Begriffe wie Wireframe, Mockup oder Prototyp haben nicht dieselbe Bedeutung und werden daher anders interpretiert. Wir arbeiten schon lange und fast täglich mit diesen Begriffen und trotzdem wird uns immer wieder bewusst, dass es sogar bei uns Verständigungsprobleme gibt. Wie muss es erst Personen ergehen, die sich nicht so häufig mit diesen Themengebieten beschäftigen?

Daher haben wir uns entschieden, während der Optimierung unseres UI/UX Prozesses ein Glossar mit essentiellen Schlüsselwörtern anzulegen. Das erleichtert das allgemeine Verständnis. Im Zweifelsfall kann darauf zurückgreifen werden, und somit sichergestellt werden, dass tatsächlich über dieselben Dinge gesprochen wird und alle Punkte korrekt verstanden werden. Mit diesem Werkzeug soll die Terminologie im CodeFlügel Team gefestigt und die Kommunikation mit Personen außerhalb des Berufsstandes verbessert werden.

Natürlich wollen wir unser Glossar und unseren Prozess nicht unter Verschluss halten. Du, als Leser, UX-Experte, potenzieller Kunde oder CodeFlügel Partner sollst aus unseren Erfahrungen lernen, Unterstützung in der Terminologie erhalten und kannst uns mit deinem Feedback gerne unterstützen.

Zu Beginn zwei grundlegende Begriffe – Usability und User Experience.

Für viele sind diese beiden Begriffe bereits selbstverständlich und es bedarf keiner Erläuterung, um das Gesamtbild zu vervollständigen, sind sie trotzdem in unserem Glossar zu finden.

Usability beschreibt den Aufwand, der vom Nutzer benötigt wird, um ein Produkt effektiv zu handhaben. Eine gute Usability ist ein entscheidendes Qualitätsmerkmal einer erfolgreichen App. Hat eine App eine hohe Usability, ist sie einfach zu bedienen und wird in der Regel von Anwendern gerne eingesetzt. Der Nutzer kommt schnell an sein persönliches Ziel. Er erreicht dieses effizient und effektiv. Dabei ist er begeistert und genießt die Interaktion, wodurch Vertrauen aufgebaut wird. Der Anwender wird als loyaler Nutzer die App weiterempfehlen.

Wo liegt nun der Unterschied zu User Experience?

Usability ist ein Bestandteil von User Experience (UX). UX umschreibt die Erfahrung eines Nutzers bei der Interaktion mit einer App. Dabei fließen Erkenntnisse aus verschiedenen Teilbereichen mit ein, beispielsweise das Gefühl des Nutzers, die Reaktionen, die Erwartungen und sein allgemeines Verhalten. Zielgruppe, Konkurrenzprodukte oder auch die technischen Möglichkeiten (z.B. ein langsames und träges Endgerät) können zu einem schlechten Nutzererlebnis führen.

Während wir im Meeting den UI/UX Prozess an das White-Board gezeichnet haben und die Phasen durchlaufen sind, haben wir Schlagwörter für das Glossar gesammelt und im Anschluss definiert.

Die Prototypphasen: Skizze, Wireframe und Mockup

Grob unterscheiden wir zwischen den Prototyp-Phasen “Skizze”, “Wireframe” und “Mockup”. Idealerweise bauen die Phasen aufeinander auf und werden nacheinander verwendet:

Die erste Konkretisierung einer Idee lässt sich unkompliziert auf Papier entwickeln. Aus der Skizze wird anschließend ein Wireframe erstellt, in dem die Inhalte und die Funktionen beschrieben und miteinander verbunden werden. Es ist ein schematischer Designentwurf mit Fokussierung auf die Funktionalität und den Ablauf der App, allerdings ohne konkrete grafische Elemente. Der nächste Schritt ist das Mockup, dabei findet die visuelle und grafische Gestaltung der Oberfläche statt.

Bei kleinen, überschaubaren Projekten kann eine Phase übersprungen werden. Der ideale Designprozess ist iterativ und die App wird möglichst früh prototypisiert. Designentwürfe werden anhand der Evaluierung wiederholt. Dabei können die Iterationen in der Wireframe oder auch in der Mockup-Phase durchgeführt werden. Es gibt keinen idealen Weg, aber durchaus Bedingungen und Situationen, in denen ein Weg geeigneter ist als der andere:

Wireframe-Iterationen sind sinnvoll, wenn die funktionalen Aspekte der App im Mittelpunkt stehen.

In der Mockup-Iteration ist neben der Funktion die Gestaltung eines der wichtigsten Merkmale. Die App soll den potenziellen Nutzern gezeigt und deren Verhalten und Reaktion beobachtet werden. Somit kann die Vorstellungen der Zielgruppe besser abgebildet werden.

Nun aber nochmals ein paar Schritte zurück:

Skizze – Vom Kopf aufs Papier

Eine Skizze ist im Grunde nur die Freihandzeichnung einer Idee auf einem Stück Papier und der schnellste Weg, um Ideen während eines Workshops, Meetings oder eines Gespräches zu visualisieren. Es geht darum, eine grobe Vorstellung der App zu bekommen.

Wireframe – klare Strukturen

Mit einem Wireframe wird es schon etwas konkreter. Es entspricht dem Skelett bzw. der einfachen Struktur einer App. Im Gegensatz zu einem Mockup enthält es noch keine Farben, Typografie, Bilder oder Grafiken. Es ist wie der Bauplan eines Gebäudes. Die Funktionalität der App sowie die Beziehungen zwischen den Ansichten werden abgebildet. Das Wireframe hilft herauszufinden, ob die Funktionalität und die richtige Nutzer-Führung gewährleistet ist.

Es wird der User Flow beschrieben, der Weg, den der Anwender in der App beschreitet, um eine Aktion auszuführen. Dieser kann mit einer Flowchart oder auch Flussdiagramm unterstützt werden. Es ist die grafische Abbildung der logischen Schritte der App. Komplexe und verwinkelte Wege können damit abgebildet und Probleme, die Verbesserungsbedarf haben, lokalisiert werden.

Die Erstellung eines Wireframes ist nicht besonders kostspielig, schnell fertig gestellt und kann einfach angepasst werden. Feedback von Anwendern kann eingeholt werden, da diese der Funktionalität und der Benutzererfahrung mehr Aufmerksamkeit schenken als der Ästhetik.

Mockup – Farbe kommt ins Spiel

Ein Mockup ist die visuelle Darstellung einer App. Man spricht von mid- oder high-fidelity Design – eine mittel- oder hochauflösende Darstellung des Designs. Damit wird definiert, wie detailgetreu die Nachbildung der App ist. Das Mockup hilft bei endgültigen Entscheidungen bezüglich Farbschemata, des visuellen Stils und der Typografie.

Im Vergleich zum Wireframe, das die Struktur darstellt, zeigt ein Mockup, wie das Produkt aussehen wird. Es dient als Grundlage für den Entwicklungsprozess, also die Umsetzung in Programmcode. Vor der aufwendigen technischen Implementierung der Funktionen kann Feedback von den Anwendern zeitsparend eingearbeitet und das User-Experience Design diskutiert werden.

Klickdummy – Leben wird eingehaucht

Unser vorerst letzter Begriff im Glossar war der Prototyp. Warum war? Erstens gibt es noch weitere Schlagwörter, die wir definiert haben und zweitens haben wir festgestellt, dass Prototyp sehr häufig mit Programmcode – also tatsächlicher Umsetzung – in Verbindung gebracht wird und daher wird das Schlüsselwort Klickdummy für den grafischen interaktiven Prototypen verwendet.

Wireframe und Mockup sind statische Werkzeuge, bevor die App richtig entwickelt wird, soll auch ein interaktives Modell getestet werden. Ein Klickdummy bietet eine originalgetreue Darstellung der App. Es ist wie ein Mockup, angereichert mit Ui-Elementen, Interaktionen, Animationen und allen Eigenschaften, die beim Klicken auf Schaltflächen erlebt werden können. Das Einzige, das fehlt, ist die Funktionalität. Tatsächlich ist ein interaktiver Prototyp dem Endprodukt sehr ähnlich. Trotzdem ist es nicht das Endprodukt! Es kann das Gefühl vermitteln, eine echte Anwendung zu sein, allerdings sind es nur Bilder, die miteinander verbunden sind. Anwender vergessen oft, dass der Klickdummy nicht das fertig entwickelte Endprodukt ist und noch Aufwand dafür investiert werden muss.

Erst eine Skizze, dann ein Wireframe und zum Schluss das Mockup – und nicht umgekehrt.

Um die Schlagwörter herunterzubrechen und den Prozess zu beschreiben, gilt es zuerst die Idee, dann die funktionale Struktur und zum Schluss die grafische Gestaltung durchzuführen. Die Definition dieser grundlegenden Begrifflichkeiten ist der erste Schritt in Richtung klare und verständliche Kommunikation und damit Verbesserung in der Zusammenarbeit. Das Glossar ist nicht das einzige Produkt aus der Optimierung unseres UI/UX Prozesses. Welche Fragen vor dem Projektstart geklärt werden müssen und welche Informationen zwischen Designer und Entwickler ausgetauscht werden, sind zwei weitere Themengebiete, mit denen wir uns beschäftigen. Aber mehr dazu beim nächsten Mal!  Bleibt gespannt! Wir arbeiten bereits an weiteren Einblicken in die CodeFlügel Ui/Ux Welt. Hast du Feedback oder Fragen für uns? Wir sind natürlich gerne über Social Media oder per Mail erreichbar.