Mock-up

Ein Mock-up ist eine statische Darstellung eines Produktdesigns, die zur Präsentation und Validierung von Ideen dient. Es zeigt das Aussehen und Teilfunktionen, ohne vollständige Funktionalität zu bieten, und hilft in frühen Phasen, Anforderungen zu klären und mit Stakeholdern zu kommunizieren.

Kurzüberblick

Ein Mock-up ist eine Attrappe oder ein Modell, das Design und Teilfunktionen eines Produkts zeigt. Es dient der Präsentation und dem Sammeln von Feedback, im Gegensatz zu funktionsfähigen Prototypen. Mock-ups kommen in der Benutzeroberflächengestaltung vor, um Konzepte zu validieren, bevor Ressourcen in die Entwicklung fließen.

Kontext und Einordnung

Mock-ups finden ihren Platz im iterativen Designprozess nach der Ideenfindung und einfachen Wireframes, aber vor der Erstellung interaktiver Prototypen. Sie unterstützen die Kommunikation zwischen Designern, Entwicklern und Stakeholdern, indem sie eine greifbare Visualisierung liefern. Neben der Softwareentwicklung kommen Mock-ups in Bereichen wie Architektur, Luftfahrt und Konsumgüterindustrie zum Einsatz, wo physische oder digitale Modelle zur Demonstration von Produkteigenschaften genutzt werden.

Begriffe und Definitionen

Mock-up

Ein Mock-up ist eine statische Darstellung, die Design und Teilfunktionen eines Produkts zeigt. Es hat keine vollständige Funktionalität und dient Präsentationszwecken.

Abgrenzung zu Prototyp

Ein Prototyp ist ein interaktives, funktionsfähiges Modell, das zur Erprobung im Entwicklungsprozess eingesetzt wird. Mock-ups gehen Prototypen voraus und fokussieren auf das Aussehen, Prototypen auf das Verhalten.

Abgrenzung zu Wireframe

Ein Wireframe ist eine skelettartige, einfache Layout-Darstellung ohne Farben, Bilder oder detaillierte Designelemente. Mock-ups bauen auf Wireframes auf, indem sie visuelle Elemente wie Typografie, Farben und Abstände hinzufügen, um eine realistischere Präsentation zu ermöglichen.

Low-Fidelity vs. High-Fidelity

Low-Fidelity-Mock-ups sind einfache, schnelle Darstellungen mit wenigen Details, geeignet für frühe Iterationen und Ideenfindung. High-Fidelity-Mock-ups sind detailliert und dem Endprodukt ähnlich, mit Farben, Texten und visuellen Elementen, ideal für Stakeholder-Präsentationen und User-Testing.

Vorgehen

Der Prozess zur Erstellung und Nutzung von Mock-ups umfasst folgende Schritte:

1. Nach der Erstellung von Wireframes und der Ideenfindung wird ein Low-Fidelity-Mock-up skizziert oder digital erstellt.
2. Feedback von Stakeholdern einholen und Iterationen durchführen.
3. Bei Bedarf ein High-Fidelity-Mock-up entwickeln, um detaillierte Aspekte zu präsentieren.
4. Mock-up als Referenz für Entwickler nutzen, um den Übergang zu Prototypen zu erleichtern.

Beispiele

Worked Example: Mock-up für eine mobile App

Ein Team entwickelt eine App zur Datenerfassung für Prozessanalysen. Zunächst wird ein Wireframe mit Grundlayout erstellt: Eine Startseite mit Menü, Eingabefeldern für "Prozessname" und "Startzeit" sowie einem Button "Speichern".

Der anschließende Low-Fidelity-Mock-up zeigt einfache Rechtecke und Linien für die Elemente, ohne Farben. Im High-Fidelity-Mock-up werden Farben hinzugefügt (blauer Button, grauer Hintergrund), eine Schriftart gewählt und Icons eingebaut, um eine realistische Darstellung zu schaffen. Dieses Mock-up wird Stakeholdern präsentiert, um Feedback zu Usability zu erhalten, bevor ein funktionsfähiger Prototyp entwickelt wird.

Häufige Fehler und Tipps

• Fehler: Mock-up und Prototyp synonym verwenden. Tipp: Mock-ups können als "Bilder" für Präsentation betrachtet werden, Prototypen als "Modelle" für Interaktion.
• Fehler: Zu früh High-Fidelity-Mock-ups erstellen, ohne Low-Fidelity zu testen. Tipp: Einfache Versionen zu Beginn erlauben kostengünstige Änderungen.
• Tipp: Tools wie Figma oder Adobe XD eignen sich für digitale Mock-ups und erleichtern die Zusammenarbeit.

Weiterführendes

Für tiefergehende Einblicke in den Designprozess siehe Software-Anforderungen und Projektmanagement.