Prototype

Prototyp-Template

Schnelle Erstellung von Klickprototypen sowohl für Usability-Tests als auch für Feedback von Stakeholdern.

Über das Prototype Template

Was ist ein Prototyp?

Ein Prototyp ist ein aktives Lehrmodell deines Produkts. Ein Prototyp definiert die Struktur, den Arbeitsablauf der Benutzer und die Navigationsdetails (z. B. Schaltflächen und Menüs), ohne sich auf endgültige Details, wie das visuelle Design, festzulegen.

Das Prototyping mithilfe eines Klickmodells ermöglicht es dir, die Benutzererfahrung deines Produkts oder deiner Dienstleistung so nah wie möglich an der Realität (z. B. einer Website oder einer App) zu testen. Der Prototyp entsteht, bevor du dich zum Aufbau eines Produkts oder einer Dienstleistung verpflichtest, und spart dir Geld, indem er Hindernisse frühzeitig aufspürt. Er ähnelt in der Regel einer Reihe von Bildschirmfestern oder Zeichenflächen, die durch Pfeile oder Links verbunden sind. Ein Prototyp kann helfen, die häufigsten Wege oder Pfade in einem System zu finden.

Anhand eines Prototyps kann dein Team herausfinden, wie benutzerfreundlich dein Designkonzept tatsächlich ist:

  • Verstehe den Benutzerkontext und den Aufgabenablauf durch Nachahmung realer Software

  • Erstelle Szenarien zum Testen und Erproben von Benutzerszenarien, Bedürfnissen und Personas

  • Sammle detailliertes Produktfeedback in der Usability-Testphase. Dieses Feedback sollte von deinem Team und von Stakeholdern des Unternehmens kommen.

Prototypen sind ein kollaborativer und wiederholbarer Weg, um Benutzeranforderungen zu definieren. In einer High-Fidelity-Phase bringen Prototypen die Benutzerforschung mit den Geschäftszielen in Einklang. In einer Low-Fidelity-Phase sparen Prototypen den Teams Zeit und Geld.

Wann wird ein Prototyp verwendet?

Teams verwenden Prototypen, um mehr über ihre Benutzer in der Prototyping- und Testphase des Designprozesses zu erfahren. In diesen beiden Phasen wird experimentiert und eine verkleinerte Version eines Produkts oder einer Dienstleistung erstellt. Anschließend wird sie getestet, um die bestmöglichen Lösungen zu erzielen.

Prototypen regen Teams dazu an, an greifbare Ergebnisse zu denken, anstatt an abstrakte Ideen.

High-Fidelity-Prototypen – interaktive Templates, die dem tatsächlichen Produkt so nahe wie möglich kommen – können als Tool für die Einbindung der Stakeholder und deren Zustimmung verwendet werden. Ein Prototyp, der dem fertigen Produkt ähnelt, kann einem Team auch dabei helfen, Vertrauen in die Interaktion der Benutzer mit dem Design und ihre Gefühle dafür aufzubauen. Ein realistisches Prototyp Template kann Teams auch dabei helfen, genaueres Feedback zu sammeln. So kann dein Team Hindernisse oder unrealistische Erwartungen schon früh im Entwicklungsprozess ansprechen.

Erstelle deinen eigenen Prototyp

Prototyping ist eine schnelle und einfache Methode, um wertvolle Erkenntnisse über die Benutzer zu gewinnen. Um auf dem richtigen Weg zu bleiben, solltest du dir vor Augen halten, was du testen willst, und deinen Prototyp mit Blick auf die Bedürfnisse der Benutzer erstellen. Die Herstellung deines eigenen Prototyps ist einfach. Das Whiteboard-Tool von Miro ist die perfekte Leinwand, um ihn zu erstellen und mit deinem Team zu teilen. Beginne mit der Auswahl des Prototyp Templates von Miro.

Erste Schritte:

  1. Definiere dein Designkonzept. Wähle gemeinsam mit deinem Team eine Idee aus, um sie weiterzuentwickeln. Erwäge das Storyboarding. Verschaffe dir ein umfassendes Verständnis der Funktionsweise, und noch besser, erkläre sie deinem Team.

  2. Plane den Benutzerfluss. Du kannst nun damit beginnen, mögliche Benutzerinteraktionen mit deinem Produkt oder deiner Dienstleistung sowie die Verbindungen darzustellen, die der Benutzer zwischen ihnen herstellen würde. Die Planungsphase für deinen Prototyp ist auch die Zeit, Fragen zu stellen: Welche Interaktionen sind möglich? Wo beginnt und endet das Produkt oder die Dienstleistung für den Benutzer? Welche Fragen versucht der Benutzer zu beantworten? Welche Annahmen stellst du auf – und willst du sie überprüfen?

  3. Erstelle und verbinde alle deine Bildschirmfenster. Erstelle einen Wireframe für alle wichtigen Bildschirmfenster mit Interaktion. Füge Navigationselemente wie Menüs, Schaltflächen, Symbole und Bilder ein. Beginne anhand der von dir erstellten Mindmap damit, Elemente interaktiv zu gestalten, indem du Links, Hotspots, Bildlauffunktionen und Endpunkte einführst. Du kannst deinen Prototyp testen, indem du in den Präsentationsmodus wechselst oder eine PDF-Datei exportierst.

  4. Teile ihn mit Benutzern und Stakeholdern.  Führe Usability-Tests mit Benutzern durch, die das Problem haben, das du zu lösen versuchst. Während du lernst und wiederholst, erstellst du prägnante Notizen, die du mit deinen Stakeholdern im Unternehmen teilen kannst, um frühes Feedback zu erhalten. Damit dokumentierst du dein Lernen für interne Zwecke und verfolgst deinen Fortschritt im Hinblick auf die Erreichung deiner Unternehmensziele!

FAQ about Prototyping

Wie erstellt man einen Prototyp?

Die Erstellung eines Prototyps kann so einfach sein wie das Skizzieren deines Designs und des Benutzerflusses per Hand oder realistischer für Benutzertests durch die Verwendung von Prototypentools. Mit der Prototyp-Vorlage von Miro kannst du einen Prototyp erstellen, der dem fertigen Produkt ähnelt. So kannst du während der Nutzertestphase genaueres Feedback sammeln.

Verwandte Templates
soar-analysis-thumb-web
Vorschau

Das SOAR-Analysis-Template

Ideal für:

Leadership, Decision Making, Strategic Planning

Die Vorlage für die SOAR-Analyse regt zum Nachdenken über die Stärken und das Potenzial deiner Organisation an, um eine gemeinsame Vision für die Zukunft zu entwickeln. Die SOAR-Analyse ist insofern einzigartig, als sie dich dazu ermutigt, dich auf das Positive zu konzentrieren, anstatt nur Bereiche für Wachstum zu identifizieren. SOAR steht für Strengths (Stärken), Opportunities (Chancen), Aspirations (Ziele) und Results (Ergebnisse). Um die Vorlage zu verwenden, sollte jede Kategorie durch eine positive Brille betrachtet werden. Führe eine SOAR-Analyse immer dann durch, wenn du Menschen zusammenbringen und zum Handeln ermutigen willst.

Das SOAR-Analysis-Template
entity-relationship-diagram-thumb-web
Vorschau

Das Entity-Relationship-Diagramm-Template

Ideal für:

Flussdiagramme, Strategische Planung, Diagramme

Manchmal sind die wichtigsten Geschäftsbeziehungen die internen Beziehungen, z. B. unter Teams, Entitäten und Akteuren in einem System. Ein Entity Relationship Diagram (ERD) ist ein strukturelles Diagramm, das zur Visualisierung und zu deinem Verständnis der vielen komplexen Verbindungen zwischen den verschiedenen Rollen beiträgt. Wann wird ein ERD eingesetzt? Es ist ein großartiges Tool für die Ausbildung und das Onboarding neuer Mitarbeiter oder Teammitglieder. Unser Template lässt sich ganz einfach an deine individuellen Bedürfnisse anpassen.

Das Entity-Relationship-Diagramm-Template
Wardley Map Thumbnail
Vorschau

Template für Wardley-Map-Canvas

Ideal für:

Leadership, Strategic Planning, Mapping

Eine Wardley-Map stellt die Landschaft dar, in der ein Unternehmen tätig ist. Sie besteht aus einer Wertschöpfungskette (die für die Erfüllung der Nutzerbedürfnisse erforderlichen Aktivitäten), die in Relation zur Entwicklung einzelner Aktivitäten im Laufe der Zeit steht. Komponenten von Wert werden auf der Y-Achse platziert und Waren auf der X-Achse. Verwende eine Wardley-Map ein, um gemeinsame Annahmen zu deinem Umfeld zu verstehen und um verfügbare strategische Optionen aufzudecken. Mit diesem Ansatz kannst du dein Verständnis des geschäftlichen Umfelds deinem Team, neuen Mitarbeitern und Stakeholdern einfach vermitteln.

Template für Wardley-Map-Canvas
Design Brief Thumbnail
Vorschau

Das Design-Brief-Template

Ideal für:

Design, Marketing, UX Design

Damit ein Design erfolgreich oder gar großartig ist, müssen Designagenturen und Teams die Ziele, Timelines, das Budget und den Umfang des Projekts kennen. Mit anderen Worten: Design benötigt einen strategischen Prozess, und dieser beginnt mit einem Design Brief. Mit diesem nützlichen Template kannst du einen Brief erstellen, der für Koordinierung und klare Kommunikation zwischen deinem Unternehmen und deiner Designagentur sorgt. Er ist die Grundlage jedes kreativen Projekts und eine einzige Quelle der Wahrheit, auf die sich Teams während des gesamten Prozesses beziehen können.

Das Design-Brief-Template
Competitive Analysis Thumbnail
Vorschau

Wettbewerbs-analyse-Template (Konkurrenz-analyse)

Ideal für:

Marketing, Entscheidungsfindung, Strategische Planung

Die Entwicklung eines großartigen Produkts beginnt damit, dass man die Gegebenheiten des Landes kennt (d. h. weiß, mit wem man es zu tun hat) und einige Fragen beantwortet: Wer sind deine Mitbewerber? Wie schneidet dein Produkt oder deine Dienstleistung im Vergleich ab? Wodurch hebst du sich von anderen ab? Eine Wettbewerbsanalyse hilft dabei, die Antworten zu finden, die letztlich deine Produkt-, Wertversprechen-, Marketing- und Vertriebsstrategien prägen können. Es ist eine großartige Maßnahme, wenn ein großes Geschäftsereignis bevorsteht – wie eine neue Produktveröffentlichung oder eine strategische Planungssitzung.

Wettbewerbs-analyse-Template (Konkurrenz-analyse)
Action-Priority-Matrix-thumb-web
Vorschau

Matrixvorlage für Handlungsprioritäten - Action-Priority-Matrix-Template

Ideal für:

Kartierung

Möglicherweise hast du und deine Teammitglieder mehr Ideen als Ressourcen, was die Priorisierung von Aufgaben erschweren kann.  Verwende eine Action Priority Matrix zur Auswahl der Reihenfolge, in der du deine Aufgaben bearbeitest. So kannst du Zeit und Geld sparen und vermeiden, dass du dich in unnötiger Arbeit verzettelst. Eine Action Priority Matrix ist ein einfaches Diagramm, mit dem du Aufgaben auf der Grundlage ihrer Auswirkungen und des für ihre Erledigung erforderlichen Aufwands bewerten kannst. Du verwendest deine Bewertungen, um jede Aufgabe in einen von vier Quadranten einzuordnen: schnelle Erfolge, wichtige Projekte, Lückenfüller und undankbare Aufgaben.

Matrixvorlage für Handlungsprioritäten - Action-Priority-Matrix-Template