infografik userinterfacedesign ux mapping

UX/UI Prototyping – Jeder Prototyp ist ein Experiment

Mit Hilfe von Prototypen werden Fragen gestellt und wegweisende Entscheidungen getroffen. Ein Prototyp ein vereinfachtes Versuchsmodell und dient zur Erprobung und Weiterentwicklung des geplanten Produktes. Damit wird einerseits die Tauglichkeit und andererseits die Akzeptanz bei den zukünftigen Nutzenden geprüft. Im UX / UI Design machen reale und digitale Prototypen die Produktentwicklung von der Ideen bis zum finalen Produkt erleb- und testbar.

Was ist UX/UI Prototyping?

Ein Prototyp macht das zukünftige Produkt, oder Teile davon, für zukünftige Nutzende testbar und bringt das «Erlebnis» aus dem Begriff «Nutzererlebnis» (User Experience) für alle Stakeholder in die Produktentwicklung. Dafür gibt es verschiedene Darstellungsarten, unterschiedliche Detaillierungsgrade und Interaktionsmöglichkeiten. Daher ist es wichtig, dass vor jedem Prototyping geklärt wird, was mit dem Prototyp herausgefunden werden soll. Ausserdem muss auch schon frühzeitig definiert sein, welche Testpersonen den Prototypen testen und wie der Test ablaufen soll. Dies hat Einfluss auf die Detaillierung der visuellen Darstellung sowie die Funktionalität und Interaktivität. UX/UI Prototypen zeigen den Fluss eines Prozesses auf. Die abgebildeten Prozesse basieren auf sogenannten User Stories. Das sind Benutzeraufgaben, die beschreiben, was die Benutzer auf der Site erreichen oder erledigen können. Anhand dieser Stories wird der fertige Prototyp dann auch überprüft und getestet.

Drei Dimensionen eines Prototypen

Darstellungsart – Wie wird das User Interface dargestellt?
Gezeichnet auf Papier, visualisiert mit Designsoftware, umgesetzt als Code

Genauigkeit – In welchem Detaillierungsgrad wir das User Interface dargestellt?
Scribble, Wireframes (low fidelity), Screen Design (high fidelity)

Interaktivität  – Wie kann mit dem Prototyp interagiert werden?
Keine Interaktivität (view-only), teilweise Interaktivität (z.B. InVision), volle Interaktivität (z.B. HTML)

Verschiedene Prototyping-Typen

Scribbles

Papier Prototypen sind schnell und kostengünstig. Viele Ideen und Ansätze können mit Papier und Stiften ausprobiert werden. Der haptische Ansatz fördert Kreativität und hilft beim Denken und Problemlösen. Konkrete Inhalte und Grössen spielen in diesem Entwicklungsstadium eine untergeordnete Rolle. Mit geraden oder wellige Linie werden Texte dargestellt, Rechtecke oder Kreise visualisieren Bilder und Grafiken. Beim Scribbeln von User Interfaces geht es um die zentralen Inhalte und Funktionen auf den einzelnen Screens. Wie lassen sich diese attraktiv in Szene setzen? Wie und wo werden Inhalts- und Interaktionselemente auf dem Screen platziert? Wo werden Orientierungs- und Brandelemente integriert?

Wireframes

Ein Wireframe (Drahtgittermodell) ist der erste schematische Entwurf des Frontends. Texte, Bilder und auch Interaktionskomponenten (wie z.B. Buttons) werde in der finalen Grösse im richtigen Masstab als Basis-Layout angeordnet. Wenn die definitiven Bilder und Texte noch nicht vorhanden sind, wird mit Rechtecken und Blindtext gearbeitet. In diesem Entwicklungsstadium sind die visuellen Designelemente (Schriften, Farben, Icons) noch nicht definiert. Im Wireframe werden die einzelnen Interfaceelemente und -komponenten bestimmt und das Verhalten auf den unterschiedlichen Endgeräten definiert. Je nach Designprozess und Arbeitsweise lassen sich Wireframes schnell als Handskizze, in einem Prototyping-Tool oder auch als HTML umsetzen.

Mockups

Oft entstehen Mockups auf der Basis von Wireframes. Ein Mockup (Attrappe, Nachbildung) ist ein fertig angezogenes Wireframe und zeigt wie das finale Produkt aussehen wird und gibt eine Idee von den Funktionalitäten. In dieser Entwicklungsphase wird die visuelle Designsprache entwickelt. Mit Mockups wird das Zusammenspiel der einzelnen visuellen Designelemente getestet bevor die erste Zeile Code geschrieben wird. Die Designelemente Schriften, Farben, Icons, Grafiken und Bilder geben dem Produkt seine eindeutige visuelle Identität und die Stakeholder können sich ein klares Bild vom zukünftigen Produkt machen.

Prototyping

Durch die Aneinanderreihung einzelner Screen (Scribbles, Wireframes oder Mockups) entsteht ein Prototyp, der für alle Nutzenden erlebbar wird. Auf der Basis von Mockups kann mittels Prototyping Software (z.B. inVisionapp) durch hinzufügen von Interaktion und Animation ein High-Fidelity Prototyp mit Teilfunktionalität erstellt werden. Dieser vermittelt allen Stakeholder ein klares Erlebnis vom zukünftigen Produkt.

Aus der Praxis

Je nach Stadium der Entwicklung eines digitalen Produkts machen unterschiedliche Arten von Prototypen Sinn. Im Groben kann zwischen Low-Fidelity Prototyp, High-Fidelity Design Prototyp und Technischer Prototyp unterschieden werden.

Low-Fidelity Prototyp (Paper Prototyp)

Papier Prototypen sind vor allem in frühen Phasen des Designprozesses eine gute Methode um kostengünstig und schnell Ideen zu visualisieren. Mit Papier und Stiften werden erste Ideen für das Interface Design entwickelt. Device Vorlagen helfen in den richtigen Dimensionen zu denken. Mit Hilfe von Apps (z.B. POP) können die einzelnen Screens in einen Ablauf gebracht und verlinkt werden.

Material: Papier und Stifte, Devices Vorlagen, POP App

High-Fidelity Design Prototyp

Wenn das Look & Feel für ein digitales Produkt erarbeitet wird, kommen High-Fidelity Design Prototypen zum Einsatz. Mit Tools wie InVision können einzelne Screens, die in einem Interface Design Tool (z.B. Sketchapp) gestaltet wurden, verlinkt und  animiert werden. So kann die Anmutung eines Produkts getestet und weiterentwickelt werden.

Tools: Sketchapp, InVision, Principle

Technischer Prototyp

Diese Art von Prototypen wird eingesetzt, wenn es darum geht, spezifische Funktionen mit Nutzern zu testen. Technische Prototypen können auch eingesetzt werden, um die technische Machbarkeit zu überprüfen.

Tools: Frontend Frameworks (z.B. Bootstrap), Just in Mind

Merksatz

Prototypen

  • verkaufen Ideen besser, da diese für alle Stakeholder erlebbar wird
  • lassen sich frühzeitig mit späteren Nutzenden testen und optimieren
  • unterstützen die Kommunikation und Zusammenarbeit in interdisziplinären Teams
  • überprüfen die Tauglichkeit und Akzeptanz bei den Nutzenden