Ein Mockup ist eine Darstellung einer (geplanten) Benutzungsoberfläche. Während die Vorstufe, ein Wireframe, sich auf die Navigation, Funktionen, Ein und Ausgaben konzentriert, kann ein Mockup schon Gestaltungsmerkmale hinzunehmen. Um bei einem neuen Produkt, einer Software oder einer Dienstleistung eine gute User Experience (UX, Nutzungserfahrung) zu Gewährleisten, ist es wesentlich, sich schon zu Beginn einer Entwicklung Gedanken über die Benutzungsoberfläche zu machen.
Stand: 23.2.2023
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.
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 (aus der UML-Welt) 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.
Abb. 2: Einfaches Mockup (fast eher ein Wireframe) für tagesaktuelle Umsätze und die Umsatzentwicklung
Abb. 3: Ein Mockup, das über die Eigenschaften eines Wireframe hinausgeht. Die darstellung ist aus einer Prüfungsaufgabe …
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.
Was ist der Unterschied zwischen einem Mockup und einem Wireframe?
Ein Wireframe ist eine einfache, skelettartige Darstellung einer Benutzungsoberfläche, die die grundlegenden Strukturen und Funktionalitäten eines Designs zeigt. Wireframes sind hauptsächlich auf die Darstellung des Layouts, der Navigation und der Funktionalität ausgerichtet und enthalten möglichst keine visuellen Designs oder Stilelemente. Sie sind ein Werkzeug, um die Platzierung von Inhalten und die Interaktionen zwischen Benutzer und Benutzeroberfläche zu planen und ggf. zu validieren.
Ein Mockup ist eine detailliertere Darstellung einer Benutzungsoberfläche, die visuelle Designs und Stilelemente enthält. Ein Mockup kann die tatsächlichen Farben, Schriftarten, Bilder und andere visuelle Elemente zeigen, die im endgültigen Design verwendet werden. Ein Mockup ist ein nützliches Werkzeug, um das Aussehen und die Usability eines Designs zu visualisieren und zu überprüfen.
Zusammenfassend lässt sich sagen, dass Wireframes den Fokus auf Funktionalität und Struktur legen, während Mockups den Fokus auf das visuelle Aussehen und die Benutzungsrfreundlichkeit legen. Beide Werkzeuge sind zu Beginn der Planung für eine Gestaltung von Applikationen wichtig.
Mockups, Wireframes, ihre Beziehung zu Use Case Diagrammen und der UML-Welt
Mockups und Wireframes sollten sich in der Darstellung der Nutzer:innen-bezogenen in den Anwendungsfällen oder Use Cases wiederfinden. Mockups und Wireframes sind damit keine Bestandteile der UML-Welt (so wie Use Case Diagramme (UCD)), haben aber über diese eien Bezug zu UML. Mockups und Use Case Diagramme sollten iterativ und zusammen entworfen werden – Inkonsistenzen zwischen Mockup und Use-Case-Diagrammen sind der späteren Produktqualität wenig zuträglich.
Glossar
Usability
Usability ist ein Begriff für die Benutzungsfreundlichkeit einer Technologie, eines Produkts wie einer Software oder einer Dienstleistung. Im Fokus steht, wie einfach es für eine Person ist, eine bestimmte Aufgabe auszuführen oder eine bestimmte Funktion zu nutzen. Eine gute Usability bedeutet, dass eine Person das Produkt intuitiv versteht und problemlos damit arbeiten kann, ohne dass sie lange Lernzeit mit häufigen Fehlbedienungen durchlebt.
Ein Beispiel für eine gute Usability ist eine gut gestaltete Smartphone-App, die einfach zu verstehen und zu bedienen ist. Eine App mit schlechter Usability hingegen könnte komplexe Menüs haben, die schwer zu navigieren sind, und Funktionen, die schwer zu verstehen sind. Insbesondere dann, wenn mehere Pfade zur gleichen Funktion führen, kann das die Nutzer:innen eher verwirren statt unterstützen.
Usability ist wichtig, weil es dazu beiträgt, dass ein Produkt erfolgreich ist. Wenn ein Produkt schwer zu bedienen ist, werden Mesnschen möglicherweise Konkurrenzprodukten wechseln. Eine gute Usability führt zu einer besseren Benutzungserfahrung (UX, User Experience) und kann die Zufriedenheit z.V. von Kund:innen verbessern.
User Experience (UX)
User Experience (UX) ist die Gesamterfahrung einer Person, wenn sie mit einem Produkt, einer Dienstleistung oder einer Technologie interagiert. Es geht darum, wie eine Person ein Produkt wahrnimmt und wie sie es nutzt, um bestimmte Aufgaben auszuführen.
UX bezieht sich auf alle Aspekte eines Produkts, einschließlich seiner Usability, seiner Ästhetik, seiner Funktionalität und seiner Verfügbarkeit. Es geht allerdings nicht nur um die rein technischen Aspekte eines Produkts, sondern auch um die Emotionen, die es bei Menschen hervorruft.
Ein gutes UX-Design zielt darauf ab, die Bedürfnisse und Ziele der Benutzenden zu verstehen und eine einfache, intuitiv erfahrbare Lösung zu schaffen, die ihnen hilft, ihre Aufgaben erfolgreich zu erfüllen. Wesentlich ist, die Benutzungserfahrung zu optimieren. Das gelingt, wenn dass das Produkt leicht zu verstehen und zu nutzen ist und es den Nutzer:innen ein angenehmes und erfüllendes Erlebnis bietet.
Unified Modelling Language UML (mit Bezug zu Mockups und Wireframes)
UML ist eine grafische Sprache, die verwendet wird, um die Struktur, das Verhalten und das Design von Software-Systemen zu beschreiben. Es wird häufig verwendet, um komplexe Systeme zu visualisieren und zu dokumentieren, um bessere Kommunikation und Zusammenarbeit zwischen Entwickler:innen und anderen Beteiligten zu ermöglichen.
Es ist möglich, dass UML in der frühen Planungsphase eines Software-Systems verwendet wird, um dessen Architektur und Verhalten zu definieren, bevor ein Mockup erstellt wird, um das Benutzer-Interface zu planen. In diesem Sinne kann man sagen, dass es eine gewisse Überschneidung zwischen den beiden Werkzeugen gibt, aber sie haben unterschiedliche Zwecke und werden in unterschiedlichen Phasen des Entwicklungsprozesses verwendet.
Ein Mockup hingegen ist eine nicht funktionale Darstellung eines Benutzer-Interfaces, die verwendet wird, um die visuelle Darstellung und Navigation einer Anwendung oder einer Website zu planen und zu testen. Es ist ein frühes Design-Modell, das den Entwicklern hilft, das Aussehen und die Bedienbarkeit eines Produkts vor der eigentlichen Umsetzung zu überprüfen.
Ähnlich wie bei einem Mockup hat ein Wireframe in der Regel nicht direkt etwas mit UML (Unified Modeling Language) zu tun. Wireframes sind einfache, schlicht gestaltete Diagramme, die dazu verwendet werden, das grundlegende Layout und die Navigation einer Benutzer-Oberfläche zu planen und zu testen. Sie zeigen die grundlegenden Strukturen und Elemente einer Anwendung oder einer Website, ohne sich auf Design-Details oder Farben zu konzentrieren.
UML hingegen ist eine grafische Sprache, die verwendet wird, um die Struktur, das Verhalten und das Design von Software-Systemen zu beschreiben. Es wird häufig verwendet, um komplexe Systeme zu visualisieren und zu dokumentieren, um bessere Kommunikation und Zusammenarbeit zwischen Entwicklern und anderen Beteiligten zu ermöglichen.
Es ist möglich, dass UML in der frühen Planungsphase eines Software-Systems verwendet wird, bevor ein Wireframe erstellt wird, um das Benutzer-Interface zu planen. In diesem Sinne kann man sagen, dass es eine gewisse Überschneidung zwischen den beiden Werkzeugen gibt, aber sie haben unterschiedliche Zwecke und werden in unterschiedlichen Phasen des Entwicklungsprozesses verwendet. Wireframes konzentrieren sich auf die visuelle Darstellung des Benutzer-Interfaces, während UML das Verhalten und die Architektur des gesamten Systems beschreibt.
Ein Mockup oder Wireframe hat also in der Regel nichts direkt mit UML (Unified Modeling Language) zu tun. Über Use Case Diagramme, einer Diagramm-Art in UML, ist jedoch opportun, verschieden Methoden zur Gestaltung von neunen Produkten gemeinsam zu denken.
Use Case Diagramm (UCD)
Ein Use Case Diagramm ist eine Art von UML-Diagramm, das verwendet wird, um die Funktionalität eines Systems zu beschreiben. Es zeigt die Beziehungen zwischen den Akteuren (Benutzern) eines Systems und den Funktionen (Use Cases), die das System bereitstellt.
Das Diagramm besteht aus einer Reihe von Kreisen oder Ellipsen, die die Use Cases darstellen, und rechteckigen Formen, die die Akteure darstellen. Zwischen den Akteuren und den Use Cases werden Linien gezeichnet, die die Interaktionen darstellen.
Use Case Diagramme werden verwendet, um ein besseres Verständnis dafür zu erlangen, wie das System genutzt werden wird und welche Funktionalitäten für die Benutzer wichtig sind. Sie sind ein wertvolles Werkzeug in der Anfangsphase der Systementwicklung und können verwendet werden, um die Anforderungen an das System zu definieren und zu kommunizieren. Sie helfen auch, Abhängigkeiten und Interaktionen zwischen den verschiedenen Teilen des Systems zu visualisieren und zu verstehen.