Ratgeber

Dein Guide zum richtigen UX-Prototyping

(Foto: AdobeStock – baranq)

Lesezeit: 4 Min.
Artikel merken

Deine Website hat keinen Erfolg? Ein Grund könnte eine schlechte Usability sein. Wir erzählen, worauf du bereits beim Prototyping achten solltest.

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.

Was ist ein Prototyp?

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:

Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

  • 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.

Prototyp vs. Wireframe vs. Mockup

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.

Wann solltest du einen Prototyp verwenden?

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.

So setzt du deinen Prototyp richtig ein

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.

Das könnte dich auch interessieren

Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Schreib den ersten Kommentar!

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!

Hallo und herzlich willkommen bei t3n!

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team von mehr als 75 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Digitales High Five
Holger Schellkopf (Chefredakteur t3n)

Anleitung zur Deaktivierung

Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder