Was ist ein Mock-up? Arten und Einsatz in der Software-Entwicklung

Ein Mock-up ist eine visuelle, teilweise interaktive Darstellung einer geplanten Anwendung, die sich schnell und kosteneffizient erstellen lässt – lange bevor die eigentliche Entwicklung beginnt. Mock-ups bilden die Grundlage für Planung, Kommunikation und Umsetzung eines Softwareprojekts. Je nach Projektanforderung kann die gesamte Anwendung oder nur ein bestimmter Bereich dargestellt werden.

Wozu dienen Mock-ups?

Mock-ups schaffen ein gemeinsames Verständnis: Alle Beteiligten sehen denselben Entwurf und reden über dasselbe Bild statt über Vorstellungen im Kopf. Annahmen lassen sich früh überprüfen, solange eine Änderung noch wenig kostet. Später dient der abgestimmte Entwurf als Blaupause für die Umsetzung – und bei Bedarf als Material für Investorengespräche.

Welche Arten von Mock-ups gibt es?

Es gibt verschiedene Arten von Mock-ups, darunter Skizzen, Wireframes, digitale Mock-ups mit hoher Genauigkeit und Prototypen. Sie unterscheiden sich vor allem darin, wie nah sie am fertigen Produkt sind – und wie viel Aufwand sie kosten.

Skizzen

Skizzen auf Papier bieten die schnellste und kostengünstigste Möglichkeit, Ideen und Strukturen zu visualisieren. Sie sind schnell angefertigt und bieten eine ausreichende Genauigkeit, um als Diskussionsgrundlage genutzt zu werden. Zusätzlich können sie dazu beitragen, abstrakte Ideen zu konkretisieren, um so ein allgemeines Verständnis zu schaffen. Die Genauigkeit von Skizzen reicht jedoch nicht aus, um Aspekte der Usability (Benutzbarkeit) zu diskutieren.

Wireframes

Wireframes sind farblose Drahtgitterdarstellungen und haben eine höhere Genauigkeit als Skizzen. Durch ihre Einfachheit sind sie schnell anzufertigen und leicht abzuändern. Sie können genutzt werden, um während der Konzeptionalisierung Anwendungsstrukturen, Navigationshierarchien, Layouts und Bezeichnungen zu kommunizieren und diskutieren. Darauf basierendes Feedback von Stakeholdern kann genutzt werden, um das Konzept zu verbessern. Da sie sich sehr von der finalen Anwendung unterscheiden, ist es nicht möglich, mit ihnen Reaktionen zur Nutzung zu analysieren.

Digitale Mock-ups mit hoher Genauigkeit

Digitale Mock-ups bilden mit einer sehr hohen Genauigkeit ab, wie die finale Anwendung aussehen soll. Sie sind somit äußerlich kaum von dem schlussendlichen Design zu unterscheiden. Diese Mock-ups bieten meist keine, oder nur geringe Funktionalitäten und Interaktionen, da der Fokus auf dem User Interface Design liegt. Durch die Genauigkeit eines Mock-ups ist es möglich, die echten Reaktionen von Stakeholdern zu analysieren. Diese müssen nun weniger ihre Fantasie bemühen, um sich vorstellen zu können, wie die finale Anwendung aussehen könnte. Die Reaktionen der Stakeholder können genutzt werden, um Aspekte des Konzepts zu verbessern bzw. Hypothesen auf ihre Validität zu überprüfen. Mithilfe von Mock-ups ist es möglich, die Wünsche von Stakeholdern – wie Kunden und Nutzern – miteinander abzugleichen und in das Erscheinungsbild zu integrieren.

Prototypen

Prototypen haben eine höhere Genauigkeit als Mock-ups, da mit ihnen zusätzlich zum Design Funktionalitäten und Interaktionen umsetzbar sind. Dabei wird zumeist das Ziel verfolgt, dass Nutzer es nicht von der finalen Anwendung unterscheiden können, außer sie stoßen auf unfertige Limitierungen. Alle Elemente des User-Interfaces sind interaktiv nutzbar. Je nach Anforderung können Prototypen mit statischen Daten oder mit echten Datensätzen arbeiten. Prototypen können in unterschiedlichen Phasen des Projekts zum Einsatz kommen. Zum einen kann es früh in der Konzeptionalisierungsphase genutzt werden, um Ideen zu überprüfen. In den späteren Phasen können Prototypen genutzt werden, um Feedback von potenziellen Nutzern zur Verbesserung des Konzepts zu bekommen. Zuletzt kann ein Prototyp genutzt werden, um einen potenziellen Investor von einer Idee zu überzeugen.

Worin unterscheiden sich Wireframe, Mock-up und Prototyp?

Der Unterschied liegt im Detailgrad und in der Funktion: Ein Wireframe zeigt nur Struktur und Anordnung, ohne Farben und Design. Ein Mock-up zeigt das fertige Aussehen, ist aber nicht bedienbar. Ein Prototyp verbindet beides und ist zusätzlich interaktiv nutzbar. Vom Wireframe zum Prototyp steigen Aussagekraft und Aufwand – deshalb beginnt man mit dem Einfachen und verfeinert nur dort, wo eine offene Frage es verlangt.

Welches Mock-up passt wann?

Die Wahl richtet sich nach der Frage, die Sie gerade beantworten wollen. Geht es darum, eine Idee überhaupt erst greifbar zu machen, reicht eine Skizze. Steht die grobe Struktur im Raum, klären Wireframes Navigation und Aufbau. Soll die Wirkung der Oberfläche geprüft werden, braucht es ein detailliertes Mock-up. Und wenn das Zusammenspiel aus Bedienung und Funktion getestet werden soll, führt am Prototyp kein Weg vorbei. In der Praxis entstehen im Projektverlauf oft mehrere Mock-ups nacheinander, weil mit jeder geklärten Frage die nächste konkreter wird.

Wie wir bei in2bit mit Mock-ups arbeiten

Bei uns gehören abgestimmte Oberflächenentwürfe zur Analysephase, bevor die Entwicklung startet. Der Grund ist einfach: Eine Änderung im Mock-up kostet Minuten, dieselbe Änderung in fertig entwickelter Software kostet in der Regel Tage. Je klarer das Bild vor der Umsetzung ist, desto verlässlicher wird das anschließende Festpreisangebot. Sie sehen also früh, was Sie bekommen – und entscheiden auf dieser Grundlage.

Kurz gesagt: Mock-ups sind das günstigste Werkzeug gegen teure Missverständnisse. Jede Frage, die ein Entwurf vor der Entwicklung klärt, muss später nicht im fertigen Code korrigiert werden. Wie aus einem abgestimmten Konzept planbare individuelle Software wird, zeigen unsere Beiträge zu den Softwareumgebungen und zur App-Entwicklung mit Flutter. Wenn Sie ein Vorhaben sichtbar machen möchten: kostenloses Erstgespräch.