Mockup – die Benutzungsoberfläche visualisieren

Ein Mockup ist eine rudimentäre Darstellung der Benutzungsoberfläche.

Stand: 17.09.2021

Was ist ein Mockup?

Ein Mockup ist eine Attrappe oder ein Demonstrator  einer Benutzungsoberfläche. Architekten benutzen Mockups aus Sperrholz, um Auftraggebern ihre Vorstellungen zu visualisieren (siehe Abb. 1). Es geht bei einem Mockup nicht darum, das genaue Aussehen einer zu entwickelnden Anwendung aufzuzeigen, sondern darum, in einer frühen Projekt-Phase herauszubekommen, wie sich ein Anwender die Benutzungsoberfläche seines Systems vorstellt. Ein Mockup erstellen Sie im Rahmen einer Anforderungsanalyse für ein Softwaresystem.

Archtiektenmodel Mockup am Beispiel des Minto in Möcnchengladbach

Abb. 1 Beispiel eines Mockups in der Architektur – Sperrholzmodell für das Einkaufszentrum „Minto“ in Mönchengladbach

Vorgehen bei der Erstellung eines Mockups

Ausgangspunkt für die Erstellung eines Mockups kann ein Anwendungsfalldiagramm in Kombination mit einer Liste der Datenfelder, in die eine Anwender etwas eintragen soll, sein. Die Datenfelder liefert ein eventuell schon vorhandenes Datenmodell oder eine textliche Beschreibung, die in Zusammenarbeit mit dem Stakeholder, z.B. dem zukünftige Anwender, erstellt wird. Im Ersten Schritt können alle Datenfelder mit ihrer Beschriftung untereinander aufgelistet werden. Die Vorstellung, dass später alles auch mit einem Smartphone funktionieren soll, ist dabei hilfreich. Auf alle Elemente, die lediglich der Gestaltung dienen, soll beim Mockup verzichtet werden.

Beispiel für ein einfaches Mockup

Gewünscht ist die Darstellung in einer Übersicht mit den drei umsatzstärksten Kunden und des Gesamtumsatzes, immer auf den jeweiligen Tag bezogen. Die Anwendung wird meist unterwegs auf dem Smartphone genutzt und hat eine dementsprechend rudimentäre Benutzungsoberfläche (Abb. 2). Gegenüber dem ersten Entwurf mit einer tabellarischen Umsatzentwicklung wünscht sich der Anwender für den schnellen Überblick eine grafische Darstellung der Umsatzentwicklung.

Ein einfaches Mockup für eine App zur Visualisierung der Umsatzentwicklung

Abb. 2: Einfaches Mockup für tagesaktuelle Umsätze und die Umsatzentwicklung

Werkzeuge für die Erstellung von Mockups

Geeignet ist, neben Stift und Papier, jedes (vektororienetierte) Zeichenwerkzeug wie z. B. Power Point.

Systemadministratoren verwenden gern Microsoft Visio.

Studierende mögen Draw IO (https://www.draw.io, leitet um auf https://app.diagrams.net/). Hier ist dann der Diagrammtyp „Wireframe“ (deutsch: Drahtgittermodell) zu wählen.

 

Teile diesen Beitrag.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.