Das Erstellen von einer guten Benutzerfreundlichkeit ist sowohl eine Kunst als auch eine Wissenschaft. Es wird ein gesamtes Experten-Team benötigt, um eine außergewöhnliche, denkwürdige und konversionsorientierte User-Experience zu erschaffen.

Während eines Webprojekts können Prototyping-Tools zum echten Helfer werden. Denn sie visualisieren den Prozess einer Website von Beginn an. Das hilft dir und allen anderen Projektbeteiligten, das gesamte Konzept besser zu verstehen. Einfach gesagt tragen Prototyping-Tools dazu bei, das Design einer Idee verständlich zu machen, sie erleichtern Nutzertests und erklären den Entwicklern die Anforderungen. Eine Liste verschiedener Tools findest du in einem separaten Artikel über Protoyping-Tools.

Der Prototyp oder das Prototyping ist ein wichtiger Schritt in der Entstehung einer Website. Ein Prototyp ist eine interaktive Simulation der Website. Er kann verschiedene Formen haben, von sehr wenig bis sehr genau entwickelt,  jedoch ist er nie das finale Produkt. Ein Vorteil eines Prototyps ist, dass er schnell verändert werden kann und Änderungen weniger Geld und Zeit kosten. Die Entwicklung eines Prototyps sollte daher am Beginn einer Produktentwicklung stehen.

Kurz gefasst, ein Prototyp ist:

• ein frühes Beispiel, Modell oder eine Veröffentlichung
• eines Produktes
• um das Produkt oder den Prozess zu testen

Wie ausführlich dein Prototyp sein soll, hängt von deinem Projekt ab. Das Ziel ist es, die Geschichte des Produktes oder der Dienstleistung auf eine klare, interaktive Weise zu erzählen.

Besonders für Neulinge in der Branche können die Begrifflichkeiten etwas verwirrend sein. Daher gehen wir kurz auf die Unterschiede zwischen Wireframe, Mockup und Prototypen ein. Grundsätzlich wird in statische und dynamische Entwürfe unterschieden. Im Gegensatz zu einem Prototyp sind Wireframes und Mockups statisch, sie besitzen somit keinerlei Interaktionen. Man nennt sie auch Low-Fidelity, was so viel bedeutet wie „wenig Wahrheitsgetreu“.

Wireframe: Ist ein erster, konzeptioneller Entwurf, oft noch handgezeichnet, der nur die nötigsten Elemente zeigt.

Mockup: Ein Schritt weiter als der Wireframe, ebenfalls statisch, zeigt die Struktur der Informationen, einfachsten Funktionalitäten und visualisiert erste Designansätze.

Wireframes und Mockups sind geeignet, um das Projekt zu dokumentieren, schnelle Einblicke zu gewinnen und Feedback zu erhalten. Sie sind zwar günstiger, aber ermöglichen keinen tiefen Einblick und zeigen keine Interaktionen, wie es ein Prototyp macht. Auch für Nutzertests sind Prototypen essenziell – verschiedene Tools können dabei helfen. Darüber hinaus verdeutlicht ein Prototyp deine Entwürfe und hilft somit dem Kunden, dein Design besser zu verstehen. Womit sich eventuell später auftretende Probleme frühzeitig vermeiden lassen.

Ein Prototyp sollte eine große Rolle bei Websites mit komplexer User-Experience (UX) und Interaktionen spielen. In so einem Fall sollten alle Interaktionen nicht nur beschrieben, sondern ausführlich visualisiert werden, bevor die Website veröffentlicht wird. Hat deine Website Animationen, eine umfangreiche Navigation oder kein Standard-Verhalten? Dann spricht alles für einen Prototyp und gegen ein Low-Fidelity-Mockup oder einen Wireframe.

Der Prototyp soll allen Projekt-Beteiligen die Details des Webprojekts visualisieren. Darüber hinaus ermöglicht er, schnell Veränderungen am Design vorzunehmen. Die Erwartungen an UX sind 2017 enorm gestiegen, und das werden sie auch darüber hinaus – ausführliches Prototyping wird also ein immer wichtigerer Prozess.

Eine interaktive Simulation der endgültigen Website gibt wichtige Einblicke in das fertige Produkt. Sie ermöglicht dir, schnell Änderungen vorzunehmen, die auf Nutzer-Interaktionen und -Erfahrungen basieren. Auch wenn ein Prototyp viel Zeit und Geld in Anspruch nimmt, ist das Ergebnis, eine optimale Website, es wert. Mit diesen drei Tipps erreichst du die bestmögliche Nutzung deines Prototypen:

1. Der richtige Prototyp: Der kann statisch, klickbar, testbar, interaktiv, high-fidelity oder low-fidelity sein. Welchen Typ und welches Tool du am Ende verwendest, hängt von dem Projekt ab. Wichtig ist aber: Du willst keine Zeit mit einem Modell verschwenden, das seinen Zweck nicht erfüllt. Entscheide dich also frühzeitig für das richtige Modell. Eine Übersicht verschiender Tools – von Wireframe- bis Prototyping-Tools – findest du in diesem Artikel.
2. Frühzeitig Testen: Dein Prototyp ist kein finales Produkt, sondern ein Prozess. Er ist eine interaktive Testmöglichkeit. Der Zweck eines Prototyps ist, das Spielen und Interagieren frühzeitig zu ermöglichen, wie es es ein echter Benutzer tun würde. Teste und lass deinen Prototypen so früh wie möglich testen, damit du das gesamte Projekt von Beginn an in die richtige Richtung lenkst.
3. Häufiges Testen: Für eine optimale UX teste deinen Prototypen, teste ihn wieder und wieder. Bis alle Bugs beseitigt sind, in jeder Stufe deines Designprozesses – sogar im ersten Entwurf. Dadurch erhältst du wichtige Einblicke in die Art und Weise, wie die Zielgruppe die Website nutzen wird, und Hinweise zum weiteren Vorgehen. Je mehr du testest, desto mehr Informationen kannst du von der Website abrufen, bevor sie live geht.

Einen Prototypen zu testen generiert wichtiges Feedback, ohne die eigentliche Zielgruppe negativ zu beeinflussen. Er gibt dir die Möglichkeit, das Design zu prüfen und Änderungen bereits im Voraus zu veranlassen. So entsteht eine optimierte Benutzeroberfläche mit zufriedenen Nutzern.