{"id":2147,"date":"2021-09-17T10:00:45","date_gmt":"2021-09-17T08:00:45","guid":{"rendered":"https:\/\/cbrell.de\/blog\/?p=2147"},"modified":"2023-02-13T10:12:00","modified_gmt":"2023-02-13T09:12:00","slug":"mockup-die-benutzungsoberflaeche-visualisieren","status":"publish","type":"post","link":"https:\/\/cbrell.de\/blog\/mockup-die-benutzungsoberflaeche-visualisieren\/","title":{"rendered":"Mockup – die Benutzungsoberfl\u00e4che visualisieren"},"content":{"rendered":"

Ein Mockup ist eine Darstellung einer (geplanten) Benutzungsoberfl\u00e4che. W\u00e4hrend 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\u00e4hrleisten, ist es wesentlich, sich schon zu Beginn einer Entwicklung Gedanken \u00fcber die\u00a0Benutzungsoberfl\u00e4che zu machen.<\/em><\/p>\n

Stand: 23.2.2023<\/p>\n

Was ist ein Mockup?<\/h2>\n

Ein Mockup ist eine Attrappe oder ein Demonstrator\u00a0 einer Benutzungsoberfl\u00e4che. 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\u00fchen Projekt-Phase herauszubekommen, wie sich ein Anwender die Benutzungsoberfl\u00e4che seines Systems vorstellt. Ein Mockup erstellen Sie im Rahmen einer Anforderungsanalyse<\/a> f\u00fcr ein Softwaresystem.<\/p>\n

\"Archtiektenmodel<\/a><\/p>\n

Abb. 1 Beispiel eines Mockups in der Architektur – Sperrholzmodell f\u00fcr das Einkaufszentrum \u201eMinto\u201c in M\u00f6nchengladbach<\/p>\n

Vorgehen bei der Erstellung eines Mockups<\/h2>\n

Ausgangspunkt f\u00fcr die Erstellung eines Mockups kann ein Anwendungsfalldiagramm<\/a> (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<\/a> oder eine textliche Beschreibung, die in Zusammenarbeit mit dem Stakeholder, z.B. dem zuk\u00fcnftige Anwender, erstellt wird. Im Ersten Schritt k\u00f6nnen alle Datenfelder mit ihrer Beschriftung untereinander aufgelistet werden. Die Vorstellung, dass sp\u00e4ter alles auch mit einem Smartphone funktionieren soll, ist dabei hilfreich. Auf alle Elemente, die lediglich der Gestaltung dienen, soll beim Mockup verzichtet werden.<\/p>\n

Beispiel f\u00fcr ein einfaches Mockup<\/h2>\n

Gew\u00fcnscht ist die Darstellung in einer \u00dcbersicht mit den drei umsatzst\u00e4rksten Kunden und des Gesamtumsatzes, immer auf den jeweiligen Tag bezogen. Die Anwendung wird meist unterwegs auf dem Smartphone genutzt und hat eine dementsprechend rudiment\u00e4re Benutzungsoberfl\u00e4che (Abb. 2). Gegen\u00fcber dem ersten Entwurf mit einer tabellarischen Umsatzentwicklung w\u00fcnscht sich der Anwender f\u00fcr den schnellen \u00dcberblick eine grafische Darstellung der Umsatzentwicklung.<\/p>\n

\"Ein<\/a><\/p>\n

Abb. 2: Einfaches Mockup (fast eher ein Wireframe) f\u00fcr tagesaktuelle Ums\u00e4tze und die Umsatzentwicklung<\/p>\n

\"Bild,<\/a><\/p>\n

Abb. 3: Ein Mockup, das \u00fcber die Eigenschaften eines Wireframe hinausgeht. Die darstellung ist aus einer Pr\u00fcfungsaufgabe …<\/p>\n

Werkzeuge f\u00fcr die Erstellung von Mockups<\/h2>\n

Geeignet ist, neben Stift und Papier, jedes (vektororienetierte) Zeichenwerkzeug wie z. B. Power Point.<\/p>\n

Systemadministratoren verwenden gern Microsoft Visio.<\/p>\n

Studierende m\u00f6gen Draw IO (https:\/\/www.draw.io<\/a>, leitet um auf https:\/\/app.diagrams.net\/<\/a>). Hier ist dann der Diagrammtyp \u201eWireframe\u201c (deutsch: Drahtgittermodell) zu w\u00e4hlen.<\/p>\n

\n
\n
\n
\n

Was ist der Unterschied zwischen einem Mockup und einem Wireframe?<\/h2>\n<\/div>\n
<\/div>\n
Ein Mockup und ein Wireframe sind beides Werkzeuge, die bei der Gestaltung von Benutzungsoberfl\u00e4chen und Webseiten verwendet werden. Sie haben etwas unterschiedliche Zwecke und Eigenschaften.<\/div>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n
\n
\n
\n

Ein Wireframe ist eine einfache, skelettartige Darstellung einer Benutzungsoberfl\u00e4che, die die grundlegenden Strukturen und Funktionalit\u00e4ten eines Designs zeigt. Wireframes sind haupts\u00e4chlich auf die Darstellung des Layouts, der Navigation und der Funktionalit\u00e4t ausgerichtet und enthalten m\u00f6glichst keine visuellen Designs oder Stilelemente. Sie sind ein Werkzeug, um die Platzierung von Inhalten und die Interaktionen zwischen Benutzer und Benutzeroberfl\u00e4che zu planen und ggf. zu validieren.<\/p>\n

Ein Mockup ist eine detailliertere Darstellung einer Benutzungsoberfl\u00e4che, die visuelle Designs und Stilelemente enth\u00e4lt. Ein Mockup kann die tats\u00e4chlichen Farben, Schriftarten, Bilder und andere visuelle Elemente zeigen, die im endg\u00fcltigen Design verwendet werden. Ein Mockup ist ein n\u00fctzliches Werkzeug, um das Aussehen und die Usability eines Designs zu visualisieren und zu \u00fcberpr\u00fcfen.<\/p>\n

Zusammenfassend l\u00e4sst sich sagen, dass Wireframes den Fokus auf Funktionalit\u00e4t und Struktur legen, w\u00e4hrend Mockups den Fokus auf das visuelle Aussehen und die Benutzungsrfreundlichkeit legen. Beide Werkzeuge sind zu Beginn der Planung f\u00fcr eine\u00a0 Gestaltung von Applikationen wichtig.<\/p>\n

Mockups, Wireframes, ihre Beziehung zu Use Case Diagrammen und der UML-Welt<\/h2>\n

Mockups und Wireframes sollten sich in der Darstellung der Nutzer:innen-bezogenen in den Anwendungsf\u00e4llen oder Use Cases wiederfinden. Mockups und Wireframes sind damit keine Bestandteile der UML-Welt (so wie Use Case Diagramme (UCD)<\/a>), haben aber \u00fcber 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\u00e4teren Produktqualit\u00e4t wenig zutr\u00e4glich.<\/p>\n

Glossar<\/h2>\n

Usability<\/h3>\n

Usability ist ein Begriff f\u00fcr die Benutzungsfreundlichkeit einer Technologie, eines Produkts wie einer Software oder einer Dienstleistung. Im Fokus steht, wie einfach es f\u00fcr eine Person ist, eine bestimmte Aufgabe auszuf\u00fchren 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\u00e4ufigen Fehlbedienungen durchlebt.<\/p>\n

Ein Beispiel f\u00fcr eine gute Usability ist eine gut gestaltete Smartphone-App, die einfach zu verstehen und zu bedienen ist. Eine App mit schlechter Usability hingegen k\u00f6nnte komplexe Men\u00fcs haben, die schwer zu navigieren sind, und Funktionen, die schwer zu verstehen sind. Insbesondere dann, wenn mehere Pfade zur gleichen Funktion f\u00fchren, kann das die Nutzer:innen eher verwirren statt unterst\u00fctzen.<\/p>\n

Usability ist wichtig, weil es dazu beitr\u00e4gt, dass ein Produkt erfolgreich ist. Wenn ein Produkt schwer zu bedienen ist, werden Mesnschen m\u00f6glicherweise Konkurrenzprodukten wechseln. Eine gute Usability f\u00fchrt zu einer besseren Benutzungserfahrung (UX, User Experience) und kann die Zufriedenheit z.V. von Kund:innen verbessern.<\/p>\n

User Experience (UX)<\/h3>\n

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\u00fchren.<\/p>\n

UX bezieht sich auf alle Aspekte eines Produkts, einschlie\u00dflich seiner Usability, seiner \u00c4sthetik, seiner Funktionalit\u00e4t und seiner Verf\u00fcgbarkeit. Es geht allerdings nicht nur um die rein technischen Aspekte eines Produkts, sondern auch um die Emotionen, die es bei Menschen hervorruft.<\/p>\n

Ein gutes UX-Design zielt darauf ab, die Bed\u00fcrfnisse und Ziele der Benutzenden zu verstehen und eine einfache, intuitiv erfahrbare L\u00f6sung zu schaffen, die ihnen hilft, ihre Aufgaben erfolgreich zu erf\u00fcllen. Wesentlich ist, die Benutzungserfahrung zu optimieren. Das gelingt, wenn dass das Produkt leicht zu verstehen und zu nutzen ist und\u00a0 es den Nutzer:innen ein angenehmes und erf\u00fcllendes Erlebnis bietet.<\/p>\n

Unified Modelling Language UML (mit Bezug zu Mockups und Wireframes)<\/h3>\n

UML ist eine grafische Sprache, die verwendet wird, um die Struktur, das Verhalten und das Design von Software-Systemen zu beschreiben. Es wird h\u00e4ufig verwendet, um komplexe Systeme zu visualisieren und zu dokumentieren, um bessere Kommunikation und Zusammenarbeit zwischen Entwickler:innen und anderen Beteiligten zu erm\u00f6glichen.<\/p>\n

Es ist m\u00f6glich, dass UML in der fr\u00fchen 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 \u00dcberschneidung zwischen den beiden Werkzeugen gibt, aber sie haben unterschiedliche Zwecke und werden in unterschiedlichen Phasen des Entwicklungsprozesses verwendet.<\/p>\n

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\u00fches Design-Modell, das den Entwicklern hilft, das Aussehen und die Bedienbarkeit eines Produkts vor der eigentlichen Umsetzung zu \u00fcberpr\u00fcfen.<\/p>\n

\u00c4hnlich 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\u00e4che 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.<\/p>\n

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\u00e4ufig verwendet, um komplexe Systeme zu visualisieren und zu dokumentieren, um bessere Kommunikation und Zusammenarbeit zwischen Entwicklern und anderen Beteiligten zu erm\u00f6glichen.<\/p>\n

Es ist m\u00f6glich, dass UML in der fr\u00fchen 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 \u00dcberschneidung 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\u00e4hrend UML das Verhalten und die Architektur des gesamten Systems beschreibt.<\/p>\n

Ein Mockup oder Wireframe hat also in der Regel nichts direkt mit UML (Unified Modeling Language) zu tun. \u00dcber Use Case Diagramme, einer Diagramm-Art in UML, ist jedoch opportun, verschieden Methoden zur Gestaltung von neunen Produkten gemeinsam zu denken.<\/p>\n

Use Case Diagramm (UCD)<\/h3>\n

Ein Use Case Diagramm ist eine Art von UML-Diagramm, das verwendet wird, um die Funktionalit\u00e4t eines Systems zu beschreiben. Es zeigt die Beziehungen zwischen den Akteuren (Benutzern) eines Systems und den Funktionen (Use Cases), die das System bereitstellt.<\/p>\n

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.<\/p>\n

Use Case Diagramme werden verwendet, um ein besseres Verst\u00e4ndnis daf\u00fcr zu erlangen, wie das System genutzt werden wird und welche Funktionalit\u00e4ten f\u00fcr die Benutzer wichtig sind. Sie sind ein wertvolles Werkzeug in der Anfangsphase der Systementwicklung und k\u00f6nnen verwendet werden, um die Anforderungen an das System zu definieren und zu kommunizieren. Sie helfen auch, Abh\u00e4ngigkeiten und Interaktionen zwischen den verschiedenen Teilen des Systems zu visualisieren und zu verstehen.<\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n

 <\/p>\n

<\/p>\n

Teile diesen Beitrag.<\/div>