Mock-up bauen (Screen-Dummy)

Ein Mock-up ist ein Dummy der Benutzeroberfläche einer digitalen Idee, gezeichnet oder klickbar, der so echt aussieht, dass Testpersonen ihn wie ein fertiges Programm bedienen. Dahinter steckt keine Technik: Die Knöpfe führen zum nächsten Bild, Eingaben werden nicht gespeichert. Im Design Thinking kommt das Mock-up dann zum Einsatz, wenn der grobe Ablauf steht und es um Wörter, Anordnung und Verständlichkeit geht. Es zeigt, ob Menschen eine Oberfläche ohne Hilfe verstehen, bevor Entwicklungszeit in sie fließt.

Wo das Mock-up im Prozess steht

Vor dem Mock-up liegt meist ein Papierprototyp, mit dem das Team geprüft hat, ob der Ablauf an sich Sinn ergibt. Wenn es um Navigation und Menüs geht, lohnt sich vorher ein Card Sorting. Dort zeigt sich, wie Nutzer:innen Inhalte gruppieren und benennen, und diese Begriffe wandern direkt ins Mock-up.

Nach dem Bau geht das Mock-up in die Nutzertest-Runde. Die Ergebnisse fließen in die nächste Version, und das kann sich mehrmals wiederholen. Wenn die Oberfläche in den Tests verstanden wird und Fragen zur Technik offen sind, kommt als Nächstes oft ein Wizard-of-Oz-Test, bei dem eine Funktion im Hintergrund von Hand gespielt wird.

Formen eines Mock-ups

Saubere Zeichnung. Bildschirme auf Papier-Rahmen in Originalgröße, mit Lineal und dünnem Stift. Sie wirken aufgeräumter als ein schneller Papierprototyp und zeigen schon die Verteilung auf dem Bildschirm.

Statische Bilder. Jeder Bildschirm als Grafik, zum Beispiel aus einem Präsentationsprogramm. Testpersonen zeigen, wohin sie tippen würden, und eine Person aus dem Team wechselt das Bild.

Klickbarer Dummy. Die Bilder sind miteinander verlinkt, sodass ein Tippen auf einen Knopf zum nächsten Bild führt. Das geht mit Präsentationsfolien oder mit einem Prototyping-Werkzeug. Der Dummy lässt sich auf einem Handy öffnen, und die Testperson hält das Gerät selbst in der Hand.

Für alle Formen gilt: Echte Texte gehören hinein. Platzhalter wie „Lorem ipsum“ verhindern genau den Test, um den es geht, nämlich ob Überschriften, Knöpfe und Hinweise verstanden werden. Auch Beispieldaten sollten glaubwürdig sein, mit Namen, Preisen und Daten, wie sie im Alltag vorkommen. Und ein Mock-up für das Handy wird auf einem Handy getestet, weil Größe und Daumenreichweite die Bedienung verändern.

Varianten

Online schickt ihr den Link zum klickbaren Dummy in die Videokonferenz und bittet die Testperson, den Bildschirm zu teilen. So seht ihr jeden Klick und jedes Zögern.

Mit wenig Zeit reicht ein einziges Bild. Zeig der Testperson den Startbildschirm und frag, wohin sie für eine bestimmte Aufgabe als Erstes tippen würde. Dieser erste Klick verrät viel über Beschriftung und Anordnung.

In großen Gruppen baut jede Kleingruppe ihr Mock-up auf einem Tisch oder Laptop auf. Die Gruppen testen reihum gegenseitig. Wer den Dummy nicht gebaut hat, stößt auf die Stellen, die dem eigenen Team längst selbstverständlich vorkommen.

Ein Beispiel

Angenommen, das Team eines Stadtwerks will die Meldung des Zählerstands vereinfachen. Ein Papierprototyp hat gezeigt, dass der Ablauf mit vier Schritten verstanden wird. Jetzt baut das Team ein klickbares Mock-up mit echten Texten und testet es auf dem Handy.

Die erste Testperson bleibt beim Feld „Zählpunktbezeichnung“ stehen und sucht auf ihrer Rechnung. Die zweite tippt dort den Zählerstand ein. Gemeint ist die Nummer, die auf dem Zähler aufgedruckt ist. Das Team benennt das Feld um in „Zählernummer (steht auf dem Zähler)“, ergänzt ein kleines Foto, das die richtige Stelle zeigt, und setzt den Hinweis direkt unter das Feld. In der nächsten Runde kommen alle drei Testpersonen ohne Rückfrage bis zum Ende.

Woran du ein gutes Ergebnis erkennst

Das Feedback wird konkret. Testpersonen sprechen über einzelne Wörter, Knöpfe und Reihenfolgen. Die Aufgabe lässt sich ohne Hilfe erledigen, und das Team hat eine Liste von Änderungen, bei denen jede auf eine Beobachtung zurückgeht. Wenn zwei Varianten gebaut wurden, ist nach dem Test klar, welche Elemente aus welcher Variante übernommen werden.

Was du danach mit dem Ergebnis machst

Das letzte Mock-up ist eine gute Vorlage für die Entwicklung. Gebt es zusammen mit den Testnotizen weiter, damit das Entwicklungsteam weiß, warum ein Feld so heißt und ein Knopf an dieser Stelle sitzt. Wenn hinter der Oberfläche noch Annahmen stecken, die niemand geprüft hat, etwa ob Menschen den Dienst überhaupt regelmäßig nutzen würden, hilft ein Annahmen-Check beim Sortieren, was als Nächstes getestet wird.

Quellen

• Mock-Ups | Design Thinking Methods Catalogue
• Mock-Ups | Design Thinking Methoden Katalog