Meine Erfahrungen mit UI Prototyping – Welches Tool eignet sich wann am besten?

Eine gute User Experience ist entscheidend für eine gute Software. Bei der Entwicklung von Applikationen führt daher kein Weg daran vorbei, sich professionell mit dem UX Design zu befassen. Im Sinne einer agilen Methodik bin ich immer bemüht, dem Kunden schnell Entwürfe des UIs zu zeigen. Dazu bieten sich Prototypen an; denn damit können Usability Tests gemacht werden, bevor die Software fertig entwickelt ist. Nun gibt es zahlreiche verschiedene Arten von Prototypen und entsprechende Tools, die je nach Anwendungsfall besser oder schlechter geeignet sind.

Statischer Prototyp

Bei dieser Form des Prototyps werden statische Bilder angefertigt, um ein User Interface zu simulieren. Ich arbeite dabei oft mit Adobe Photoshop. Dazu erstelle ich Screenshots von bestehenden UIs und verwende diese als Vorlage für meine Entwürfe. Besonders geeignet ist diese Methode bei der Weiterentwicklung von bestehenden Applikationen. Aber auch für neue Apps habe ich gute Erfahrungen damit gemacht. Dazu beginne ich mit UIs von Konkurrenzprodukten und verändere diese– man muss ja die Welt schliesslich nicht immer neu erfinden.

Bei der Online-Zusammenarbeit hat sich das Whiteboard Tool Miro als super Ergänzung erwiesen. In Miro lassen sich Screenshots oder Segmente aus Photoshop einfügen und von verschiedenen Benutzern bearbeiten oder kommentieren. Ein ideales Tool für die Kollaborationen an einem Prototyp.

Weniger gute Erfahrungen habe ich mit Balsamiq gemacht. Mit diesem Tool können einfache schematische Wireframes skizziert werden. Bei Reviews können sich die Anwender leider oft schlecht vorstellen, wie sich das UI am Ende anfühlen wird, wenn der Entwurf ohne Farben und Bilder daherkommt.

Klick Prototyp

Die nächste Stufe von Prototypen ist klickbar. Zu deren Erstellung können eine Reihe von Tools verwendet werden. Ich habe bisher mit  Adobe XD, Axure und Marvel gearbeitet. Es gibt aber noch zahlreiche weitere solcher Produkte am Markt.

Die einfachste und kostengünstigste Anwendung ist Marvel: In dieser Webapplikation lassen sich Applikations-Screens und Controls zusammenklicken, miteinander verlinken und in einer Vorschau testen. In diesem Video wird die Erstellung einer einfachen App in fünf Minuten erklärt.

Adobe XD und Axure funktionieren nach demselben Prinzip. Es handelt sich dabei allerdings um Desktopapplikationen mit einem größeren Funktionsumfang. Gerade in Axure können sogenannte High Fidelity Prototypen so weit verfeinert werden, dass sie kaum mehr von einer fertigen Applikation zu unterscheiden sind.

In meiner Erfahrung kann man sehr schnell sehr viel Zeit in die Erstellung von Klick Prototypen investieren. Ich empfehle daher sich gut zu überlegen, welche Teile eines UIs wirklich klickbar gemacht werden müssen für eine Validierung und wo es reicht, mit dem Kunden / User statische Frames zu besprechen.

CSS und JavaScript Prototypen

In Anbetracht des grossen Aufwands, den ein umfassender UI Prototyp in Axure oder XD verursacht, kann man sich fragen, ab welchem Punkt besser direkt entwickelt wird.

Ich finde gerade in einem klassischen Scrum Setup, wo das Team alle nötigen Fähigkeiten für UX Design und Entwicklung vereint, ist es durchaus eine gute Option, UI Prototypen direkt in CSS und JavaScript anzufertigen. Vielleicht in Kombination mit statischen Mockups. Ein erfahrener Frontend Entwickler wird in vielen Fällen schneller in der Umsetzung sein, als ein UX Engineer in einem der obgenannten Tools und seine Resultate können womöglich wiederverwendet werden.

Fazit

Prototypen sind ein wichtiges Instrument, um die Userexperience einer Anwendung mit dem Kunden und/oder Anwender zu validieren. Aufgrund des hohen Zeitaufwands, den ein hoch ausgereifter Prototyp generieren kann, gilt es gut zu überlegen, ob dieser wirklich nötig ist.

Generell ist meine Empfehlung: Keep it simpel – aber farbig. Mit grafischen Mock-ups lässt sich schon sehr viel erreichen.