Clickdummys sind ein starkes Mittel für zügiges Prototyping. In diesem Beitrag erklären wir den Weg vom Konzept zum Clickdummy, auf welche Tools wir dabei setzen und wie effizientes Prototyping dabei hilft, Kosten zu reduzieren sowie die UX Ihrer digitalen Produkte zu optimieren.
Was sind Clickdummys?
Clickdummys sind interaktive Vorschaumodelle eines digitalen Produkts. Es handelt sich um eine einfache Form von Prototyping, die den Entwurf eines Konzepts ohne weitere Funktionalität implementiert. Um den Prozess und die Vorteile besser nachzuvollziehen, schauen wir uns idealerweise einen konkreten Case an: Unseren Clickdummy für die Smart City App der Stadt Offenbach.
Clickdummy Entwicklung: Vom Konzept zum Prototypen
Konzeptentwicklung: Fokus aufs Wesentliche
Am Anfang steht stets das Konzept und bei jedem digitalen Produkt stellen sich viele Fragen:
Wer ist die Zielgruppe?
Welche Probleme soll das Produkt lösen?
Was sind zentrale Features?
Wie strukturieren wir den Content zielgruppengerecht?
Unser Case: Die Smart City App ist Teil der Open Smart City Initative der Stadt Offenbach. Die App muss einer breiten Zielgruppe einen barrierefreien Zugang zu einer Reihe an wesentlichen Funktionen bieten, u. A.:
Digitale Services, die den Besuch im Bürgerbüro ersetzen
Individuelle Informationen zu kommunalen News und Events, sortiert nach persönlichen Präferenzen
Integrierte Kalender- und Kartenansichten
Weitere Services wie Parkticket-Buchung & Müllabholung-Reminder
Von der Skizze zum Clickdummy
Konzeption: Wireframing mit Miro
Im ersten Schritt sind Wireframes ein unverzichtbares Hilfsmittel. Wireframes sind Blaupausen, die zunächst helfen, ein konzeptionelles Layout zu entwickeln. Dabei wird der Fokus im Wireframing zunächst auf die Struktur der einzelnen Seiten und Funktionen sowie die zu platzierenden Informationen gelegt - die Überführung in das Design erfolgt im folgenden Schritt. Bei der Entwicklung unserer Wireframes setzen wir neben Figma auf Miro. Das cloudbasierte Tool erlaubt einfache Kollaboration mit dem Kunden, dies ermöglicht kurze Feedbackloops und zügige Iterationsprozesse.
Frames aus unserem Konzept für die Smart City App der Stadt Offenbach.
UX Design: Mockup Entwicklung mit Figma
Basierend auf den Wireframes geht es im nächsten Projektschritt an die Gestaltung. Im Designprozess setzen wir ebenfalls auf eine cloudbasierte Lösung: Figma. Figma ist ein mächtiges Designtool, das die Entwicklung komplexer Designsysteme ermöglicht. Zudem bietet Figma von Haus aus die Möglichkeit Clickdummys anhand bestehender Designs zu entwickeln. So kann der gesamte Gestaltungsprozess von der Entwicklung erster Mockups bis hin zur Entwicklung und Präsentation des Clickdummys in einer kohärenten Umgebung stattfinden.
Einen Clickdummy in Figma erstellen
Die Erstellung eines Clickdummy setzt zunächst das Design der einzelnen User Interfaces voraus. Im Anschluss kann über die folgenden 4 Schritte ein Clickdummy in Figma erstellt werden:
Frames verknüpfen
Hierfür wechseln wir in der rechten Sidebar vom Design- zum Prototyp Tab. In diesem Modus können Sie Verknüpfen zwischen den verschiedenen Elementen erstellen. Beispielsweise sollte der Karten-Button die entsprechende Ansicht öffnen.Clickdummy starten
Sobald Sie eine erste Verknüpfung erstellt haben, markiert ein Play-Button Ihre Startseite. Ein weiterer Play-Button erscheint in der Toolbar, wenn Sie den Präsentationsmodus aktivieren, öffnet sich Ihr Clickdummy in einem neuen Tab.Clickdummy konfigurieren
Im Prototyp Tab können Sie verschiedene Einstellungen vornehmen und beispielsweise die Ausrichtung und das in der Vorschau verwendete Gerät auswählen.Übergänge konfigurieren
Sie können jede Verknüpfung im Prototyp Tab konfigurieren und beispielsweise Animationen für Seitenübergänge, Interaktionen – wie Wischen oder Drag and Drop – sowie Scrollverhalten konfigurieren.
Figma bietet vielfältige Möglichkeiten, um Ihr Design interaktiv erlebbar zu gestalten. Zusätzlich bietet Figma nützliche Tutorials, in denen Sie die einzelnen Schritte nochmals nachvollziehen können, um mit der Entwicklung Ihres Clickdummys zu starten.
Fazit: Mit Clickdummys frühzeitig das Verhalten echter Produkt-Nutzer verstehen
Clickdummys bieten viele Vorteile: Es handelt sich um eine zügige und kostensparende Möglichkeit, um eine interaktive Vorschau eines Konzepts zu entwickeln. Die technische Entwicklung eines entsprechenden Prototypen wäre um einiges zeitintensiver. Gleichzeitig ermöglichen Clickdummys den verschiedenen Stakeholdern, frühzeitig einen Eindruck zu gewinnen und Feedback zu geben.
Die Entwicklung von Clickdummys ermöglicht einfaches User Testing. In Figma erstellte Prototypen können Remote geteilt werden, in Verbindung mit einfachen Umfragetools oder anschließenden Befragungen können Sie effektiv verwertbare Daten sammeln.
Ihren Clickdummy können Sie der Zielgruppe in einem UX Lab oder auf Events, z.B. auf einem Tablet, präsentieren und zum Testen freigeben. So haben wir beispielsweise unseren Clickdummy für die Smart City App der Stadt Offenbach im Rahmen des Digital Forums an ausgestellten Tablets testen können. Das ermöglicht frühzeitige Insights zum Nutzerverhalten und das unmittelbare Einholen von Nutzermeinungen, die noch in die Entwicklung des MVP einfließen können.
Unser Fazit: Clickdummys ermöglichen viele Einsatzszenarien für effizientes und kostensparendes User Testing. Prototyping ist ein entscheidender Bestandteil bei der Validierung digitaler Produkte. Mit Hilfe effizienter Tools schaffen Sie kurze Feedback-Loops und können bereits vor oder während der MVP-Entwicklung Ihr Produkt vertesten – und somit zügige Iterationen ermöglichen. Durch die Entwicklung von Clickdummys profitieren Sie, Ihr digitales Produkt und vor allem Ihre User:innen.
