--- title: 'Vom Wireframe zum Clickdummy — Prototyp in 4 Schritten' date: '2020-10-26' description: 'Wie aus einer ersten Skizze ein funktionsfähiger Clickdummy wird — ein Erfahrungsbericht in vier Schritten zur agilen Produktentwicklung.' keywords: - 'agile produktentwicklung' - clickdummy - mockup - prototyp - wireframe canonical: 'http://innovation-agents.de/blog/prototyp-erfahrungsbericht' language: de author: 'Andreas Keßler' image: 'https://cms.innovation-agents.de/assets/bd00b771-c825-4392-8f82-bd3d0cca9ee5?key=blog-post' --- Die Vorteile von Prototypen liegen auf der Hand. Sie ermöglichen eine unkomplizierte, oft interaktive Darstellung des späteren Produkts und beugen somit Verständnisproblemen vor. Zudem helfen sie, den Entwicklungsprozess dynamischer und kreativer zu gestalten, weil Stakeholder und Entwicklungsteam anhand des Prototyps Anforderungen und Ideen konkreter kommunizieren können. Prototypen sind echte „ Innovations-Katalysatoren“ für nahezu jeden Entwicklungsprozess. Doch gute Prototypen fallen nicht vom Himmel. Sie sind das Ergebnis eines durchdachten Denk- und Visualisierungsprozesses, den der nachfolgende Erfahrungsbericht in vier bewährten Schritten beschreibt: ### Schritt „0“: Der Kundenblick – für eine stärkere Bedürfnisorientierung Er mag selbstverständlich wirken und kommt doch immer wieder zu kurz: der empathische Blick auf die Bedürfnisse, Wünsche und Forderungen des Kunden. Denn auch der Prototyp dient nicht dazu, die Genialität und Kreativität des Entwicklers zu beweisen, sondern eine konkrete Aufgabenstellung zu lösen, die sich aus den Anforderungen des Auftraggebers ergibt. Die genaue Betrachtung der Kundenwünsche ist daher bei der Erstellung eines Prototyps – wie im gesamten Entwicklungsprozess auch – der „Schritt 0“, der vor allen anderen Schritten getan werden muss, um bedürfnisorientierte und somit auch schlanke Prototypen bzw. Produkte zu gestalten. ### Schritt 1: Die Mindmap – damit keine Anforderung aus dem Blick gerät Ganz gleich, ob analog oder digital, eine Mindmap hilft immer, Klarheit über die grundsätzliche Struktur und den Umfang des späteren Prototyps zu erhalten. Kundenwünsche können in erste konkrete Anforderungenübersetzt werden: Welche Inhalte und Funktionen dürfen nicht fehlen? Braucht es ein Login und deshalb auch entsprechende Registrierungsoptionen? Ist eine Bearbeitungsfunktion notwendig? Welche sonstigen Einstellungen sollten festgehalten werden? Auch eigene Ideen und offene Fragen können einen Platz in der Mindmap finden. ### Schritt 2: Die Skizze – für eine klare Struktur und schlanke Produkte Bei allen technischen Möglichkeiten geht nichts über eine einfache Skizze, wenn es gilt, die benötigen Anforderungen und Inhalte in eine konkrete Navigation und Anwendungsstruktur zu übersetzen. Ihre Schlichtheit ist dabei die besondere Stärke der Skizze. Da Details, wie Technik, Farben oder Darstellung noch keine Rolle spielen, landet auf dem Papier nur, was wirklich wesentlich ist und tatsächlich gebraucht wird. Die Skizze ist somit eine wertvolle Hilfe, um eigene Gedanken zu strukturieren und so ein möglichst hohes Maß an Klarheit für das spätere Produkt zu erhalten. Ein Verlieren in „Schnörkeleien“ und Details wird vermieden. ### Schritt 3: Das Mockup, der Clickdummy – für eine dynamische Produktentwicklung Viele Entwickler\*innen schalten zwischen Papierskizze und Mockup zunächst ein Wireframe als Low-Fidelity-Prototyp zwischen, um einen Übergang von der Skizze zur Anwendungsoberfläche zu gestalten, ohne sich dabei bereits Gedanken über die konkrete Gestaltung einzelner Designelemente machen zu müssen. Herrscht ausreichend Klarheit über die wichtigsten Merkmale der Design-Handschrift des Auftraggebenden, kann dieser Schritt allerdings übersprungen und direkt mit der Gestaltung eines Mockups im Sinne eines High-Fidelity-Prototypen begonnen werden. Das Mockup ist das erste präsentationsfähige Arbeitsresultat, das sich gut eignet, um dem Auftraggeber einen ersten Eindruck zum Produktentwurf zu geben und das weitere Vorgehen abzusprechen. Der Übergang vom Mockup zum Clickdummy bzw. Prototyp kann fließend gestaltet werden, indem das zunächst statische Mockup um verschiedene Klickfunktionalitäten erweitert wird, wodurch oft erste Aufgabenpakete für den späteren Entwicklungsprozess abgeleitet werden können. Eine organischere und dynamischere Produktentwicklung wird möglich. ### Schritt 4: Der „Abschied“ – damit Aufwand und Nutzen im Verhältnis bleiben Die große Stärke von Prototypen besteht darin, dass sie mit einem verhältnismäßig geringen Aufwand eine sehr realitätsnahe Visualisierung des späteren Produktes ermöglichen und so eine gute Kommunikationsgrundlage für die Beratungen zwischen Entwicklungsteam und Stakeholdern bieten. Dennoch ist es wichtig, sich ab einem gewissen Punkt vom Prototyp zu lösen und stattdessen direkt am späteren Produkt zu arbeiten, da der Aufwand zur Pflege und Aktualisierung des Prototyps in der Regel nicht mehr im Verhältnis zu dessen Nutzen steht. Dafür gewinnt die Komponentenbibliothek bzw. der Living Styleguide an Bedeutung, der als eigene kleine Anwendung die wichtigsten UI-Bestandteile des Produktes (wie z. B. Größe und Farben von Schrift, Buttons und Eingabefeldern) darstellt und permanent zugänglich macht.
**Interaktionsmöglichkeiten für Prototypen** Durch die Schaffung von interaktiven Clickdummies erhalten Prototypen eine größere Anschaulichkeit und einen besseren Realitätsbezug. Die Integration der entsprechenden Interaktionsfunktionen ist dabei meist ohne großen Aufwand möglich: - Einzelne Elemente können verlinkt werden, um den User Flow besser abzubilden. - Der Prototyp sollte widerspiegeln, wie sich die Anwendung beim Klick bzw. Hover verschiedener Buttons verhält, indem Modals, Popovers oder Dropdowns ebenfalls visualisiert werden. - Zudem sollte die responsive UI, also das Verhalten des Prototyps bei unterschiedlichen Bildschirmgrößen, von Anfang an mitbedacht und visualisiert werden.
**![Prototyp 2](https://cms.innovation-agents.de/assets/6a521712-be71-4994-82a8-091cd69efed1)** ## Sauber und aufgeräumt, aber schnörkellos – Die „No-Schnick-Schnack-Policy“ für überzeugende Visualisierungen Auch wenn ein Mockup immer den Charakter eines Entwurfs trägt, sollte es dennoch aufgeräumt und klar erscheinen. Ein Entwurf liefert schließlich bei aller Vorläufigkeit keinen Freifahrtschein für ungenaues oder unordentliches Arbeiten. Vielmehr verleiht ein übersichtliches und sauberes Layout dem Entwurf erst ein professionelles Aussehen, das zudem eine entsprechende Wertschätzung gegenüber dem\*r Auftraggeber\*in zum Ausdruck bringt und die Vorfreude auf das spätere Produkt weckt. Der Mehraufwand für ein aufgeräumtes Layout ist meist überschaubar. Oftmals sind nur kleinere Justierungen möglich, wie die nachfolgenden Tipps verdeutlichen: - **Bleibe einheitlich und konsistent:** Innerhalb des Entwurfs sollten Farben, Linien und Gestaltungselemente, wie z. B. Buttons, immer einheitlich gestaltet werden. - **Achte auf klare Linien und Kanten:** Ausgefranzte Kanten und ungleiche Absätze fallen auch Laien auf und zeugen von wenig Professionalität. Eine saubere Linienführung und einheitliche Kanten sind daher ein absolutes Muss. - **Nutze klare Formulierungen:** Arbeite mit einer klaren und einheitlichen Schrift und verwende kurze, prägnante Formulierungen. - **Bleibe eindeutig:** Achte auf eine einfache Faustregel: Jede Seite bzw. Ansicht sollte nur eine zentrale Kernfunktion fokussieren. - **Sei sparsam mit Animationen:** Viele Regeln aus der Erstellung von PowerPoint-Folien lassen sich auch auf die Erstellung von Prototypen übertragen. Animationen und sonstiger „Firlefanz“ lenkt übertrieben eingesetzt vom Wesentlichen ab und sollte daher vermieden bzw. nur sehr zielgerichtet eingesetzt werden. - **Vermeide überflüssige Bilder:** Achte darauf, den Prototypen nicht zu überladen. Bei der Verwendung von Bildern und Grafiken gilt deshalb: Weniger ist mehr.