Sieht schick aus - aber funktioniert das auch?

Hinter jedem digitalen Anwendungserlebnis steckt ein dynamischer Bauplan, der aus der Perspektive des Produktbesitzers, des Gestalters, des Programmierers und des Kunden in gemeinsamer Zusammenarbeit begutachtet und entwickelt wird. What-You-See-Is-What-You-Get sieht demnach nicht nur schick aus, sondern beinhaltet verschiedene Gedankengänge und Lösungsansätze, die vorweg ausprobiert und im Idealfall mit realen Nutzern getestet wurden.

Bevor es in die Umsetzung gehen kann, verschafft sich das Team gemeinsam mit dem Kunden einen Überblick über die geplanten Anforderungen und stellt am Anfang möglichst viele Fragen, die frühzeitig auf Probleme in der Entwicklung aufmerksam machen. Product Owner, Gestalter, Programmierer und Kunde stehen idealerweise zu jeder Zeit in regelmäßiger Abstimmung miteinander.

Wichtig ist es, dass alle beteiligten Teammitglieder ein gemeinsames Verständnis entwickeln und sich für eine Strategie in der Umsetzung entscheiden. Damit eine zukünftige Anwendung angenehm in der Benutzung wird, wird diese per Definition interaktiv beschrieben, am besten in Form einer Anforderungsliste in einem Ticketsystem wie Github, Jira oder Trello. Dazu gehört auch die Verortung der grundlegender Funktionen und priorisierte Erreichbarkeit. Eine User Story enthält mehrere relevante Informationen, wo wird der Nutzer wann und wie eine Anwendung ausführen und welche technischen Bedingungen müssen dafür gegeben sein.

Flow Charts helfen besonders effektiv dabei, diese interaktive Reise von Nutzern sowohl technisch als auch benutzerfreundlich im Vorfeld darzustellen. Es wird schnell erkennbar, wo der Nutzer klickt und welche Prozesse im System ausgelöst oder abgebrochen werden. Ein Flow Chart bildet somit die Komplexität und Zusammenhänge zwischen einzelnen Funktionen ab, damit das Team Übersicht behält und die Entwicklung gegebenenfalls erste Systemvoraussetzungen erfüllen.

Teilfunktionen aus der Flow Charts werden dann in Wireframes übersetzt. Wireframes geben Team und Kunden ein erstes gemeinsames Verständnis für die Anordnung der Funktionen auf dem geplanten Ausgabemedium. Es reicht prinzipiell eine einfache Darstellung in Form von Skizzen auf Papier oder Zeichnungen an einem Whiteboard aus, um Anpassungen und Anmerkungen zu dokumentieren. Natürlich können Wireframes genauso gut bereits in einem Layout Programm erstellt werden, jedoch kann es hier passieren, dass das Team zu früh über die Gestaltung nachdenkt.

Hat sich das Team auf eine oder mehrere Versionen geeinigt, dann erstellt der Designer erste Visualisierungen in Form von Mockups. Grafik Programme wie Adobe XD, Sketch oder Figma unterstützen den Gestaltungsprozess, indem sie dem Designer helfen eine visuelle Sprache zu entwickeln. Mit Hilfe von Styleguide Vorlagen und Symbolen kann der Designer in relativ kurzer Zeit seine Entscheidungen in der Gestaltung dokumentieren, was vor allem den großen Vorteil hat, dass nicht unnötig viel Zeit in die Instandhaltung von Stilvorlagen investiert werden muss. Eine Änderung an einem Symbol, wie zum Beispiel der Header Komponente, findet überall automatisch in den Mockups statt, in denen diese Komponente verwendet wird.

Das Layout sollte die jeweilig geplanten Ausgabemedien berücksichtigen. Dem Gestalter muss klar sein, welche damit zusammenhängenden Einschränkungen vorkommen könnten. Moderne Grafik Programme unterstützen Designer mit einer Auswahl an Artboards von mobile Ansichten bis hin zu großen Bildschirmformaten und den verschiedenen Auflösungen. Der Designer kann dann die Aufteilung der Spalten vornehmen, an denen sich die Komponenten orientieren, z.B. ob eine Fläche zu 75% gefüllt werden soll oder nur zu einem Drittel.

Im Anschluss beginnt die detaillierte Ausarbeitung der UI Elemente. Ist bereits eine Stilvorlage vorhanden, dann kann der Designer die Angaben auf die einzelnen Elemente, wie Eingabefelder oder Buttons übertragen. Mit Hilfe von Symbolen kann der Designer aber auch eine andere visuelle Sprache entwickeln und zum Beispiel Farbwerte und Kontraste ändern. Dabei muss der Designer die Stilvorlagen für die einzelnen Interaktionssituationen bestimmen. Ein Eingabefeld verändert sich sobald der Nutzer eine Eingabe macht und diese bestätigt. Macht der Nutzer eine fehlerhafte Eingabe, dann erscheint eine kleine Nachricht, die auf den Fehler aufmerksam macht.

Die meisten Grafik Programme erlauben es dem Designer Prototypen aus den Mockups heraus zu erstellen. Der Designer verlinkt dabei Klickpfade in den Artboards und kann sogar weitere Angaben vornehmen, was zum Beispiel genau passieren soll, wenn der Nutzer mit dem Mauszeiger über ein Element fährt oder wenn der Nutzer einen Befehl bestätigt. Animationen spielen zu diesem Zeitpunkt ebenfalls eine Rolle und sie können dem Entwickler eine gemeinsame Vorstellung für den Aufwand in der Umsetzung vermitteln.

Invision Studio und Principle konzentrierten sich vor allem auf Motion Design in Kombination mit Prototyping. Die Verlinkungen von Klickpfaden in Artboards lassen sich ebenfalls so schnell und unkompliziert wie in Adobe XD oder Figma erstellen. Als relativ schlankes Dateiformat kann der Prototyp mit seinen Animationen als HTML Seite exportiert werden und mit Kollegen für Feedback geteilt werden.

Feedback Runden

Teaminternes Feedback sollte regelmäßig genutzt werden, um möglichst viele Schwachstellen in der Benutzerführung im Vorfeld zu erkennen und zu verbessern. Dabei hilft es vor allem Feedback von Mitarbeitern einzuholen, die nicht auf dem Projekt arbeiten und nicht direktes Hintergrundwissen zur Entwicklung haben. Die Hinweise, die man aus unterschiedlichen Blickwinkeln bekommen kann, können eine Verbesserung ermöglichen, bevor eine Zeile Code geschrieben wurde, wodurch der Mehraufwand zum Ändern einer Implementierung vermieden werden kann.

Das Feedback vom Kunden sollte ebenfalls möglichst frühzeitig eingeholt und eingebunden werden. Der Kunde hat dann auch die Möglichkeit seine ursprünglich geplanten Anwendungen auf deren unternehmerischen Mehrwert hin zu überprüfen. Eventuell ändern sich die Prioritäten der Funktionen noch einmal, weil der Kunde ein besseres Verständnis entwickeln konnte oder weil inzwischen wieder neue Erkenntnisse zum Verhalten der Zielgruppen bekannt geworden sind. Mit Hilfe von Nutzerstudien können Zwischenergebnisse aus der Zusammenarbeit zwischen dem Kunden und dem Produktteam auf deren realen Mehrwert hin getestet werden. Anbieter wie Hotjar können wertvollen Aufschluss über die tatsächliche Benutzerführung anhand von Daten aus verschiedenen Aufzeichnungen geben. In einem Testlabor können genauere Angaben zum Verständnis und Verhalten ermittelt werden, da die Nutzer bei der Benutzung einer Anwendung beobachtet und in Interviews zu ihren Vorgängen befragt werden.

Nutzertest und A/B Varianten

Hinter einer App oder einer Website, die angenehm in ihrer Benutzerführung und ansprechend gestaltet sind, steckt meist ein interdisziplinäres Team, das sich monatelang mit Detailfragen und geeigneten Anwendungsmusters auseinander gesetzt hat. Erfahrene Teams erfinden das Rad mit jeder neuen Entwicklung nicht komplett neu, sondern sie greifen auf bereits entwickelte Systeme zurück, die eine technische Grundlage bilden. Das User Interface kann ebenfalls auf der Basis einer Component Library entwickelt werden, die sich anpassen und erweitern lässt. What-you-see-is-what-you-get kombiniert die strategische Zusammenarbeit im Team und deren Austausch an Erfahrung und Wissen in Bezug auf technischen Erneuerungen. Verfolgt der Kunde einen innovativen Ansatz, dann lohnt es sich mit Hilfe von Nutzerstudien neue Interaktionen auf ihre Akzeptanz zu überprüfen.