MENÜ

Protoyping im User Experience (UX) Design

Wann setzt man auf Wireframe, Mockup oder Clickdummy?

Wie kann man eine Software so gestalten, dass sie für Nutzer bestmöglich verwendet werden kann? Mit Fragen wie diesen beschäftigt sich User Experience (UX) Design – ein essenzieller Bestandteil im Prozess der Softwareentwicklung. Um Anwendungen in Hinblick auf die UX zu optimieren, setzt man auf Prototyping, um von den späteren Anwendern möglichst früh Feedback zu erhalten und Annahmen zu validieren.

 

Wireframes, Mockups, Clickdummy: Art und Umfang sowie Zielsetzung im Prototyping für die Softwareentwicklung sind nicht immer gleich. Die Prototypen unterscheiden sich hinsichtlich Interaktionsmöglichkeiten und Detailgrad. Wir wollen heute Klarheit in die Begriffsverwirrung bringen und aufzeigen, wann wir zu welcher Art des Prototypings raten. 

 

 

 

Prototyping löst viele Probleme in der Softwareentwicklung

 

Im UX Design und dem damit verbundenen „User Centered Design“ werden die Erwartungen an eine zu erstellende Software sowie die dazu herrschenden Voraussetzungen erhoben. Designer diskutieren mit ihren Kunden und Entwicklern über User Stories und Design-Ideen. Doch nichts übertrifft Visualisierung, wenn es darum geht, Konzepte erlebbar zu machen und zu validieren – idealerweise auch mit den späteren Anwendern.

 

Es gibt daher viele gute Gründe, in der Softwareentwicklung früh mit grafischen Prototypen zu arbeiten:

  • Prototypen dienen als Schnittstelle zur Entwicklung und transportieren Anforderungen, die sich textuell nicht darstellen lassen. Designideen, das Look & Feel und das gewünschte Interaktionsverhalten lassen sich viel leichter an das Entwicklungsteam kommunizieren.

  • Dabei können auch verschiedene Layouts und Designs präsentiert und gegeneinander getestet werden, um zur bestmöglichen Lösung zu finden.

  • Speziell beim Prototyping mittels Mockup und Clickdummy kann das UI-Design des späteren Endprodukts sehr detailgetreu abgebildet werden und so beispielsweise sichergestellt werden, dass die Corporate Identity des Unternehmens berücksichtigt ist.

  • Beim Erstellen und Testen eines Prototypens wird das angedachte Konzept geprüft und weitere Fragen – etwa nach dem Verhalten der Software, wenn ein User eine nicht vorgesehene Eingabe macht – kommen auf. Dies führt zu durchdachteren, qualitativ hochwertigeren Anforderungen an das System.

  • Prototyping ist besonders wichtig für das Einholen von Feedback: Erst durch die Visualisierung können sich Entwickler und Kunden schon während der Entwicklung vorstellen, wie das Endprodukt aussehen wird, den Nutzerfluss „durchspielen“ und ihre eigenen Ideen und Erwartungen klarer kommunizieren.

 

  • Dies gilt auch für die Kommunikation von Produktideen und Entwicklungsfortschritten innerhalb von Organisationen – etwa bei der Präsentation vor Lenkungsausschüssen oder anderen Stakeholdern, um Feedback und Unterstützung einzuholen.

  • Mit Prototypen ist es möglich, Feedback direkt von Usern des Systems einzuholen und bisherige Theorien zum Nutzerverhalten zu überprüfen. Durch Usertests am Prototypen erhält man Feedback zu benötigten Veränderungen oder Optimierungen und kann seine geplante Lösung validieren. Denn bis dahin existiert jedes Feature ja nur auf der Basis von Annahmen!

  • Frühe Klarheit der Anforderungen führt zu weniger Änderungen und Iterationen und somit zu einem verringertem Entwicklungsaufwand, also letztlich geringeren Kosten.

  • Das Ergebnis ist ein eindeutig verbessertes Produkt, das bei Anwendern eine höhere Akzeptanz findet, weil es in allen Aspekten auf sie zugeschnitten wurde.

 

Wann setzt man auf Wireframes, Mockups und Clickdummy?

 

Skizze

Für die ersten Entwürfe ist es gängige Praxis vieler UX Designer, mit einfachen Handskizzen zu starten. Ohne Tool, nur mit Stift und Papier, können schnell erste Ideen visualisiert werden. Der Fokus liegt hier auf dem grundlegenden Aufbau des Screens.

Klarer Vorteil ist hier, dass sehr schnell erste greifbare Ergebnisse generiert werden können. Auch lassen sich Änderungen mit wenig Aufwand durchführen. Die Barriere, den Prototypen wieder zu verwerfen und noch einmal eine andere, bessere Variante zu entwickeln, ist hier am geringsten. So können am Anfang des Prototypings verschiedene Varianten getestet und gegeneinander verglichen werden, um zur optimalen Lösung zu finden, die dann weiterverfolgt werden kann.

Handskizzen sind weitgehend abstrahiert und lassen daher bewusst noch Fragen offen. Auf dieser Basis kann dann das weitere Prototyping starten.

 

 

Wireframe

Ein einfaches Tool im Prototyping sind Wireframes. Wireframe heißt „Drahtgerüst“ und gibt eine grobe Struktur vor. Damit lässt sich die grundlegende Idee des Features auf einer hohen Abstraktionsebene testen. Durch einen Wireframe wird man angeleitet, sich vorerst auf das Wesentliche zu konzentrieren, ohne bereits durch Farben, Schriftarten, -größen und Schnitte, Bilder usw. abgelenkt zu werden.  

 

 

 

 

Wir empfehlen Wireframes am Beginn des UX Design-Prozesses, um das gewünschte Layout und den Nutzerfluss zu klären.

 

Mockup 

Ein Mockup ergänzt Wireframes um Farben, Icons, Bilder und Logos. Mit Mockups kann also zusätzlich das UI Design der späteren Software dargestellt werden. Sie bleiben allerdings noch immer statisch, also mit sehr eingeschränkten Interaktionsmöglichkeiten. Hier bei dataformers arbeiten wir intensiv mit Mockups, die wir mithilfe von Adobe XD erstellen.

 

 

 

Wir empfehlen Mockups, um die grafische und farbliche Gestaltung (samt Schriftarten) der Benutzeroberfläche der Software auf Kunden- bzw. Nutzerwünsche abzustimmen.

 

Clickdummy

Ein Clickdummy ist ein interaktives Mockup, das die Umsetzung von Interaktion und Animation erlaubt. Der Vorteil dabei ist, dass einzelne Screens miteinander verknüpft werden und so der Userflow und das Interaktionsdesign abgebildet und getestet werden kann. So kann die Interaktion des Users mit dem Produkt mittels Klick, Touch, Wischen oder weiteren Gesten abgebildet werden. Ein Clickdummy simuliert also bereits recht detailliert, wie das spätere Produkt aussehen und sich anfühlen wird („Look and Feel“). Abläufe und Interaktionen können damit im Detail durchgespielt werden.

 

 

Wir empfehlen einen Clickdummy vor allem dann, wenn vor der Entwicklung User Tests mit Kunden durchgeführt werden, um Verbesserungsmöglichkeiten aufzuzeigen.

 

Der Detailgrad und die Interaktionsmöglichkeiten steigen von Skizze und Wireframe zu statischem Mockup und Clickdummy also immer weiter an. Speziell mit dem Clickdummy kann die Usability bereits sehr nahe am späteren Produkt veranschaulicht und getestet werden. Für eine besonders flexible Zusammenarbeit direkt am Prototypen kann beispielsweise ein Clickdummy mit Adobe XD (passwortgeschützt) in der Cloud erstellt werden. Anschließend wird nur Link verteilt, so dass alle an der Entwicklung Beteiligten immer den aktuellen Stand haben.

 

 

 

UX-Design in der agilen Entwicklung

 

In der agilen Softwareentwicklung liegen laufende Änderungen und Anpassungen in der Natur der Sache: Die Möglichkeit, auf Feedback und Lerneffekte während der Entwicklung flexibel aber kontrolliert zu reagieren, ist eine Stärke agiler Vorgehensmodelle gegenüber starren Methoden.

 

Deshalb wird man auch im Prototyping für die agile Softwareentwicklung zunächst einmal das „Große Ganze“ betrachten und grundliegende Konzepte validieren. Erst nach und nach wird man, auf Basis immer neuer Erkenntnisse, zusätzlichen Aufwand in die Detaillierung stecken. Schon auf Basis früher Protoypen sollte wertvolles Feedback vom Kunden, dem Entwicklungsteam und den Benutzern eingeholt werden.

 

Dies ist auch ratsam, weil Änderungen in der UX normalerweise einfacher durch Designer am Protoypen durchgeführt werden können, als durch Entwickler an Software. Die Geschwindigkeit, mit der neue Konzepte angewandt und getestet werden können, erhöht sich also und die Kosten sinken.

 

Klar ist auch: Je später grundlegende Änderungen an der Software erfolgen müssen, desto teurer und aufwändiger ist dies normalerweise. Deshalb lohnen sich frühe Tests und Feedbackschleifen, um Änderungen zu einem Zeitpunkt durchführen zu können, an dem sie noch relativ kostengünstig am Prototypen oder einer frühen Software-Version durchgeführt werden können.

 

Die bekannte „1:10:100“-Regel besagt sinngemäß, dass man entweder 1 Euro vorab in die Recherche, 10 Euro in die Anpassung eines Designs oder 100 Euro in die Änderung an Software investieren kann bzw. muss – je nachdem, wie früh im Entwicklungsprozess sich der Änderungsbedarf ergibt.

 

 

 

 

Prototyping zahlt sich aus!

 

Der erforderliche Zeitaufwand für gutes UX-Design ist abhängig von der Vorbereitung und dem Detailgrad der Wünsche des Kunden. Den größten Stellenwert sollte jedenfalls das Durchdenken des Nutzerverhaltens haben. Dabei stellen sich Fragen wie:

  • Wie reagiert der User?
  • Welche Bedienerführung versteht dieser am besten?
  • Ist die Bedienerführung intuitiv und praktisch?
  • Findet der Nutzer alle erforderlichen Elemente rasch und einfach?

Diese Aufgabe ist der Hauptaufwand des UX-Design Prozesses und kann entsprechende Zeit in Anspruch nehmen. Das für UX Design erforderliche Budget ergibt sich in Abhängigkeit von den Anforderungen und dem Funktionsumfang der zu erstellenden Lösung sowie der benötigten Anzahl an Iterationen.

 

Es zahlt sich aber aus, in der Softwareentwicklung Prototypen zu erstellen und zu testen: Mit ihnen können Designs und Konzepte dem Kunden, dem Entwicklungsteam sowie späteren Anwendern vorgelegt werden, um früh Feedback einzuholen und bestehende Annahmen zu überarbeiten. Insbesondere die Konzeption und Verwendung von interaktiven, detaillierten Protoypen (wie Mockup oder Clickdummy) führt zu sehr ausgereiften Produkten. Vorgestellt haben wir außerdem noch einfache Skizzen und Wireframes.

 

Insgesamt leistet Prototyping einen wertvollen Beitrag dazu, dass ein Produkt für die Anwender Sinn macht, deshalb auf dem Markt akzeptiert wird und letztlich auch ein kommerzieller Erfolg wird.

 

 

Interesse? Wir unterhalten uns gerne mit Ihnen!
Neueste Beiträge
Protoyping im User Experience (UX) Design
Wann setzt man auf Wireframe, Mockup oder Clickdummy?
Wie kann man eine Software so gestalten, dass sie für Nutzer bestmöglich verwendet werden kann? Mit Fragen wie diesen beschäftigt sich User Experience (UX) Design – ein essenzieller Bestandteil im Prozess... mehr dazu
Xamarin 4.0 – Was ist neu?
Microsoft veröffentlicht Xamarin 4.0 – Welche Updates bringt der Release?
Nun wurde also endlich das viel erwartete Xamarin Forms 4.0 veröffentlicht – Microsofts aktuellste Lösung für plattformübergreifende Softwareentwicklung. Mit Xamarin 4.0 kommt eine Vielzahl von Neuerungen... mehr dazu
EREMA BluPort®: Digitale Services steigern Effizienz und Qualität im Kunststoff-Recycling
Eine dataformers Success Story
Die ökologische Bilanz von Kunststoff-Produkten hängt maßgeblich davon ab, ob aus Abfall wieder wertvoller Rohstoff gewonnen werden kann. Das Know-how dazu steckt in den Recycling-Maschinen und Anlagen... mehr dazu