Wenn wir in ein neues SaaS-Produkt starten, coden wir nicht einfach ins Leere und hoffen, dass am Ende ein tolles neues Produkt entsteht. Die ersten Schritte eines neuen Produkts kommen meistens komplett ohne Code aus. Es fängt – eigentlich – alles mit einer Skizze an. Mit einem Clickdummy.

Clickdummys sind genau das, wonach sie sich anhören. Sie sind Design-Prototypen unserer Produktidee, mit denen wir testen können, wie Leute damit umgehen würden. Im Prinzip eine Zeichnung von einem Interface, mit der man eine echte App simuliert.

Aber … warum?

Aber warum fangen wir mit so einer Zeichnung an? Warum nicht einfach gleich ein gecodetes Produkt testen? Wären die Ergebnisse dann nicht viel akkurater? Das stimmt schon, aber ein Produkt zu coden und dann erst zu testen hat zwei große Nachteile: Zeit und Geld.

Ein Produkt fertig zu designen, zu coden und dann erst zu testen, kostet viel mehr Zeit und Geld. Und dann gleich nochmal mehr, wenn man erst nach der Entwicklungsarbeit bemerkt, dass man große Fehler gemacht hat, die dann noch einmal neu umgesetzt werden müssen.

Abgesehen von den Ersparnissen helfen schnelle Prototypen dabei, einen anderen Blickwinkel auf das Produkt zu finden, Lösungen zu finden und den Fortschritt zu evaluieren. Kurz: Es geht darum, so früh wie möglich Fehler zu machen, zu lernen und möglichst effektiv in die kostenintensive Phase der Produktentwicklung zu starten.

Low oder High Fidelity?

Bei Clickdummys gibt es zwei Varianten. Low Fidelity und High Fidelity. Auf der einen Seite also schnelle Prototypen ohne Design, mit schlichten Formen und wenig Aufwand. Auf der anderen Seite welche mit mehr Aufwand und echtem Design, die quasi das fertige Produkt simulieren sollen. Beide haben ihre Vorzüge.

Zu Low-Fidelity-Prototypen gehören klickbare Wireframes und Papier-Prototypen. Sie sind perfekt, wenn man erste Ideen und Konzepte greifbar machen und testen will. Außerdem sind sie eine gute Übung im Teamwork. Dafür fehlt aber natürlich das endgültige Design, die Interaktivität ist stark eingeschränkt und beim Testen kann es zu Unsicherheiten kommen.

High-Fidelity-Prototypen entstehen mit Prototyping-Tools oder sogar schon mit echtem Code. Sie sind nah am finalen Produkt und Interaktion, Inhalte und Design sind schon sehr realistisch. Das bietet natürlich Vorteile beim Testen. Dafür sind sie aber auch teurer, weniger flexibel und brauchen oftmals Vorwissen mit Tools oder Code.

Welchen soll man also nehmen? Unser Vorschlag: Beide. Nur eben in unterschiedlichen Phasen der Entwicklung. Mit dem schlichten Prototyp kannst du am Anfang wirklich grobe Macken ausmerzen, mit dem aufwendigen später die Feinheiten.

Und wie funktioniert das jetzt?

Der Weg zum Clickdummy – zumindest zum simplen – ist nicht lang. Es gibt eigentlich nur vier Schritte: Map, Sketch, Prototype, Test.

Im ersten Schritt schreibst du auf, welche Anforderungen dein Produkt hat und was Leute damit tun, wenn sie damit interagieren. Am besten als Flowchart. Stell dir die Frage: Was muss die Person tun, damit sie zu einem Ergebnis kommt?

Als nächstes geht es ans Eingemachte. Nimm deinen Flow und skizziere damit alle notwendigen Screens, die deine Nutzenden brauchen, um ans Ziel zu kommen. Entweder händisch, oder als schlichte Wireframes in Figma oder einer anderen Software. Wie viele das sind, hängt natürlich von deinem Produkt ab.

Ein paar Grundregeln und Tipps:

• Verwende so viele und so wenige Screens wie notwendig.
• Jeder Screen muss eine Aktion haben, die zum nächsten führt.
• Bleib abstrakt. Verwende Text und Labels wo notwendig.
• Starte mit dem ersten und letzten Schritt und füg den Rest dazwischen ein.

Ist alles aufgezeichnet, geht’s ans Prototyping. Dafür gibt es diverse Tools. Figma hat so eine Funktion , inVision auch und die Marvel App kann sogar aus handgezeichneten Skizzen Prototypen bauen.

Testen, testen, testen

Jetzt musst du deinen Clickdummy eigentlich nur noch testen. Natürlich zuerst mal selbst und im Team, aber du solltest ihn auch schon Menschen aus deiner Zielgruppe vor die Nase legen. Die sind schließlich diejenigen, die dann damit arbeiten müssen.

Am besten erklärst du ihnen einfach, was ihr Ziel ist, und lässt sie dann selbst herausfinden, was sie wann zu drücken haben. Lass sie auch selbst kommentieren, was sie tun. Wenn sie etwas nicht verstehen, ist das ein Zeichen für dich, etwas zu ändern.

Clickdummys sind kein Allheilmittel

Bevor du uns jetzt auf die Finger klopfst: Wir wissen natürlich, dass Clickdummys nicht für jedes Produkt funktionieren und dass du damit nicht alles testen kannst. Manchmal gibt es Logik im Code, die du einfach mit Code selbst ausprobieren musst, um zu wissen, ob sie überhaupt funktioniert.

Und natürlich haben Clickdummys auch andere Einschränkungen. Logisch: Sie sind ja auch noch kein fertiges Produkt und sie werden dir keinen Erfolg garantieren, wenn du deshalb auf Markt-Analysen, Personas, Branding etc. verzichtest. Aber sie sind ein großartiger erster Schritt auf deinem Weg zum erfolgreichen SaaS-Produkt.

Wenn du noch mehr Unterstützung bei Clickdummys, beim Prototyping und beim UX-Design deines Produkts, schau doch mal in unserer Academy vorbei. Wir bieten einen Workshop rein ums Thema Click Dummy Prototyping an und auch abseits davon helfen wir dir liebend gern dabei, dein Produkt startklar zu machen.

Jetzt Clickdummy bauen lassen