User Experience Design #6 – Das Nutzererlebnis gestalten

Im abschliessenden Teil der Blog-Serie über User Experience Design wird mithilfe von Prototyping die Entwicklung von der Idee bis zum finalen Produkt erleb- und testbar. Prototypen helfen das Designkonzept einer Idee zu verstehen, erleichtern Nutzertests und zeigen den Entwicklern die Anforderungen auf.

Was ist ein Prototyp?

Ein Prototyp ist eine interaktive Simulation des digitalen Produkts. Anhand der definierten User Stories kann mittels einem Prototypen der Fluss des Prozesses visualisiert werden. Das zukünftige Produkt lässt sich dadurch erleben und für mögliche Nutzer testen, bevor es programmiert wird.

Never fall in love with your prototype!

Ideen beruhen generell auf verschiedenen Annahmen. Diese gilt es zu hinterfragen und durch Testen zu bestätigen oder zu verwerfen. Prototyping ermöglicht es schnell und effizient zielgerichtetes Feedback zu erhalten. Es ermöglicht Funktionen und Lösungen in der Realität zu testen und von den Nutzern zu lernen. In mehreren Iterationen werden die Prototypen so lange weiterentwickelt und getestet bis eine überzeugende Lösung entstanden ist.

I have not failed. I’ve just found 10,000 ways that won’t work.

Thomas A. Edison

Die Dimensionen eines Prototypen

Grundsätzlich lässt sich ein Prototyp auf die unterschiedlichsten Arten realisieren: grob skizziert auf Papier, detaillierter visualisiert mittels einer Design-Software oder auch bereits als Code umgesetzt. Bei Bedarf lassen sich die Prototypen zusätzlich mit Interaktivitäten (beispielsweise als Klick-Dummy oder HTML-Umsetzung) anreichern. Unzählige Tools helfen bei der Erstellung der Prototypen. Einen umfassenden Überblick über aktuelle Tools finden Sie in unserem Blog-Post «Liste von Prototyping-Tools».

Scribbles

Mit Papier und Stiften lassen sich viele Ideen und Ansätze sehr einfach ausprobieren. Durch den haptischen Ansatz wird zudem die Kreativität gefördert und der Denkprozess angeregt. Konkrete Inhalte und Grössen spielen eine untergeordnete Rolle. Rechtecke oder Kreise symbolisieren Bilder, Wellenlinien stellen Text dar. Beim Scribbeln geht es in erster Linie um die zentralen Inhalte und Funktionen auf den einzelnen Screens und wie sich diese attraktiv und sinnvoll in Szene setzen lassen.

Wireframes

Ein Wireframe ist ein erster schematischer Entwurf. Es zeigt auf abstrahierte Weise Aufbau, Inhalt und Funktion einer Seite. Content-Elemente wie Bilder, Videos und Texte als auch die Interaktions- und Navigationselemente werden grob strukturiert und sind in der gewünschten Hierarchie zueinander angeordnet. Es handelt sich dabei um eine Art Gerüst. Noch ohne Design – es wird üblicherweise mit Blindtext und Rechtecken anstelle von Bildern gearbeitet.

Mockups

Der «nackte» Wireframe erhält mit der Erstellung eines Mockups sozusagen sein Kleid. In diesem Schritt wird die visuelle Designsprache entwickelt. Schriften, Farben, Icons und Bilder geben eine eindeutige visuelle Identität. Auch wenn das Design noch nicht detailliert ausgearbeitet wurde, kann man sich dadurch bereits ein klares Bild vom zukünftigen Produkt machen, bevor auch nur eine Zeile Code geschrieben wird.

Prototyping

Ein Prototyp entsteht durch die Aneinanderreihung der einzelnen Screens. Je nach Detaillierungsgrad kann es sich hierbei um die Scribbles, Wireframes oder Mockups handeln. Mittels einer Prototyping-Software wie z.B. InVision lassen sich Interaktionen und Animationen hinzufügen und es entsteht eine klares Erlebnis vom zukünftigen Produkt oder Service. Es geht also nicht «nur» darum wie das digitale Produkt in Zukunft aussehen könnte, sondern auch wie der Nutzer damit interagiert. Der Prototyp erlaubt es bereits die Akzeptanz mit zukünftigen Nutzern zu testen und herauszufinden wo sie allenfalls Schwierigkeiten haben.

Fazit

Durch die Erstellung von Prototypen lassen sich Ideen viel besser verkaufen, da diese erlebbar werden. Sie integrieren sich ideal in agile Arbeitsweisen und es lassen sich schon früh Ideen und Konzepte mit zukünftigen Nutzern testen und optimieren. Prototypen helfen, die Anforderungen zu verstehen, Konzepte zu prüfen und schlussendlich auch die technische Machbarkeit zu belegen.

User Experience und Design

In unseren Projekten hat UX & Design einen festen Platz. Sie möchten mehr darüber erfahren, wie Sie User-Experience-Verbesserungen auf Ihre Business-Ziele zuschneiden können? Wir beraten Sie gerne kostenlos dazu.

Zudem könnte unser E-Book "Redesign Checkliste" für Sie und Ihr Webseiten Redesign interessant sein.

jetzt Downloaden

Webseiten-Redesign-Checkliste

Erfolgreicher Webseiten Relaunch

Mit der Webseiten-Redesign/Relaunch-Checkliste wird Ihre neue Webseite garantiert ein Erfolg.

mehr erfahren.

Quellen:

Buxton Bill: Sketching User Experiences – getting the design right and the right design. BHV / MITP
Lewrick, Link, Leifer: Das Design Thinking Playbook. Verlag Franz Vahlen
Spies Marco: Branded Iteractions. Digitale Markenerlebnisse planen & gestalten. Verlag Hermann Schmidt

User Experience

User Experience Design

Prototyping

Wireframes