UX-Mockups & Prototyping

In Digitale Erlebnisse, Interface Design, Tools, Workflow Posted

Eine User Experience, die den ästhetischen und funktionalen Ansprüchen der Nutzer genügt, bildet ohne Frage das Herzstück einer erfolgreichen Anwendung. Nicht selten stecken Blut, Schweiß und Tränen in der Produktidee, was eine gut durchdachte Entwicklung geradezu unverzichtbar macht. Was es dazu braucht? Im Grunde genommen nur eine schrittweise Herangehensweise mittels Mockups und Prototypen.

In der Regel entsteht jede gute Anwendung jedoch zuallererst auf dem Reißbrett. Sämtliche kreative Eingebungen, die im Rahmen eines kollektiven Brainstormings durch den Kopf geistern, lassen sich so zunächst in Form von groben Skizzen festhalten und miteinander vergleichen. Geht nicht, gibt’s nicht. Absolut jeder Einfall, egal wie bunt und verrückt, hat eine Chance. Denn genau darum geht es beim Sketching: Ansätze in den Raum werfen, diese auf ihre Tauglichkeit prüfen und eine Auslese der innovativsten Ideen vornehmen.

Sobald das Team die ungefähre Richtung der User Experience fixiert hat, kann auch schon die nächste Etappe der Produktentwicklung in Angriff genommen werden: das Wireframing. Der Name ist Programm, schließlich steht das Errichten eines (bestenfalls digitalen) Drahtgerüsts der Anwendung im Fokus. Im Sinne der Informationsarchitektur gilt es dabei, die Benutzeroberfläche inklusive der verschiedenen Elemente modular abzulichten und einen simplen Einblick in die Benutzerführung geben. Das Design ist somit fix und das Gerüst steht bereit zur Ausarbeitung des Mockups; die Vorstufe des Prototyps.

Vom Wireframe zum Mockup

Mockups gehen hin und wieder im User Experience Design unter oder werden schlicht und einfach vergessen. Ein Fauxpas, der sich unter Umständen zu einem schwerwiegenden Bug entwickeln kann. Immerhin ermöglicht die Erstellung eines Mockups, die Anwendung auf ihre Stärken und Schwächen zu prüfen. Vor der visuellen Präsentation in Form des Prototyps lassen sich so eventuelle Makel korrigieren. Nicht umsonst weisen Mockups einige Parallelen zu den klassischen High-Fidelity-Prototypen auf: neben dem Gerüst werden auch die ästhetischen Variablen des Sketchings auf das Gerüst des Wireframings übertragen.

In ihrer Funktionalität sind Mockups in der Regel stark eingeschränkt. Das ist aber auch in Ordnung, schließlich dienen sie vielmehr der visuellen Repräsentation des Interfaces; Farben, Fonts, und Formen inklusive. Das Team oder der Kunde erhalten auf diese Weise einen vertieften Einblick in die zukünftige Ausarbeitung des Frontends und die Entwicklung des Prototyps kann beginnen.

Prototypen im Usability Testing

Prototypen bilden durch die Simulation der potentiellen User Experience die finale Stufe vor dem Product-Launch und sind im Grunde genommen das, was die potentiellen Nutzern im Rahmen der Usability Tests in den Händen halten. Ein Abbild des Endprodukts in Form eines beinahe voll funktionsfähigen Exempels. Zwar wird aufgrund des hohen Kostenaufwands auch im Prototyping auf eine ganzheitliche Codierung verzichtet, die für die User Experience relevanten Elemente sind nichtsdestotrotz abrufbar. Prototypen eignen sich somit besonders für die erste Interaktion zwischen Endverbraucher und Endprodukt.

Zwischen analog und digital

Vom Sketching bis hin zum Prototyping durchläuft die Umsetzung einer Anwendung unzählige Etappen des Grübelns, Konzipierens und Konstruierens. Doch der Aufwand lohnt sich: je systematischer das Team die Planung in Angriff nimmt, desto geringer ist die Wahrscheinlichkeit, kosten- und zeitintensive Nachbesserungen vornehmen zu müssen.

Dabei sind EntwicklerInnen keinesfalls auf eine analoge Konzipierung mittels Stift und Papier angewiesen. Das Netz eröffnet den Zugang zu einer Masse an (teilweise sogar kostenfreien) Tools, welche dabei helfen, das Mysterium User Experience Design zu entschlüsseln. Mockflow bietet sich beispielsweise für die Visualisierung von Mockups an, Prototypen hingegen lassen sich besonders einfach mit Adobe XD, Figma oder Sketch erstellen. Wer sucht, der wird auf alle Fälle fündig.

• What is the difference between a sketch, wireframe, mockup, and prototype? FarShore am 10.05.2017
• Prototyping UX: Mit Wireframes und Prototypes zum optimalen Interface t3n 2020
• Wireframe, Mockup, Prototype: What is What? UXPlanet am 26.06.2018