Definition „Vorführmodell“ Was ist ein Mockup?

Anbieter zum Thema

Vogel IT-Akademie

OutSystems

Funktionalität einer Software bedeutet nicht nur, dass diese auf Code-Ebene funktioniert, sie muss auch für die User optimiert sein. Für den UI- und UX-Workflow können Mockups das optimale Mittel sein, um ein Design während der Entwicklung zu optimieren.

Das Mockup gehört wie auch Wireframes und visuelle Prototypen in jene Schnittstelle zwischen Softwareentwicklung und Grafikdesign, welche grafische Benutzerschnittstelle (GUI) für die späteren User raffiniert. Es gibt dabei einen Einblick, wie die spätere Software in der Praxis einmal aussehen und entsprechend funktionieren könnte.

Mockups sind entsprechend wichtig, um Developer, Designer und Beauftragenden einen besseren Eindruck davon zu geben, wie genau eine Software funktionieren und bedient werden soll.

Was ist ein Mockup und wie unterscheidet es sich von Wireframe und Prototyp?

Wireframe: Wenn das User Interface konzipiert wird, so wird als erster Entwurf in der Regel ein Wireframe erstellt. Dieser sehr einfache Entwurfstyp enthält noch keine Farben oder Grafiken, sondern stellt lediglich ein grobes, funktionales Design dar. Als solcher ist er mit dem Grundriss einer Architekturzeichnung zu vergleichen.

In dieser Phase kann bereits etabliert werden, welche Elemente an welche Stelle gehören und welche Features einer Software wie bedient werden.

Mockup: Das Mockup ist die nächste Phase, in der Regel sollte hier bereits eine Abstimmung zwischen Projektmanagement und Entwicklungsteam erfolgt sein. Das Layout steht somit bereits grob, im Mockup wird dieses nun raffiniert. Farben und Grafiken kommen hinzu, die passenden Schriftarten werden ausgewählt und es wird beispielsweise klar, wie hervorgehobene Elemente aussehen.

Traditionell handelte es sich bei Mockups um eher statische Entwürfe. Es konnte durch Slides navigiert werden, aber echte Interaktionen gab es in dieser Phase noch nicht. Neure Mockup-Software erlaubt jedoch bereits die Integration dynamischer Eigenschaften. So können Testerinnen und Tester bereits im Mockup sehen, was das Klicken einer Schaltfläche auslöst – was eigentlich erst in der nächsten UI-Testphase erfolgen sollte.

Protoyp: Beim Prototypen handelt es sich um eine weitere Verfeinerung des Mockups. Wurde das Mockup abgenommen, erhalten UI-Elemente nun eine gewisse Funktionalität und der Prototyp lässt sich vage so bedienen wie dies später in der App oder auf der Website der Fall sein sollte.

Warum Mockups zum Einsatz kommen

Von einem fehlerfreien Code zu einer guten Usability zu gelangen, erfordert von Developern immer mehr Finesse in Disziplinen wie Grafikdesign oder kognitiver Psychologie. Die Kommunikation zwischen unterschiedlichen Stakeholdern kann sich dabei in vielen Entwicklugsphasen als schwierig gestalten, wenn nicht das gleiche Fachwissen vorliegt.

Visuelle Prototypen erleichtern hierbei die Kommunikation zwischen allen Parteien und ein Anforderungskatalog lässt sich visuell leichter ablesen. Auch überflüssige Features können so leichter erkannt werden und die Entwicklung erfolgt bereits mit der Usability im Blick.

Developer-Teams können zudem über Mockups leichter Kundinnen und Kunden akquirieren oder einen Überblick über den Status eines Projektes geben, als dies in Codeform möglich wäre. Bereits vor der Erstellung von testfähigen Alpha-Versionen erhalten alle Stakeholder so einen klaren Überblick über die User Experience der finalen Version. Änderungen können anhand eines Mockups ebenfalls leichter besprochen und in die agile Entwicklung integriert werden.

Ein gutes Beispiel für den Einsatz von Mockups sind die Themes von Content Management Systemen wie Wordpress, die User bereits anhand einiger Beispiele einen genauen Eindruck ihres potenziellen Websitedesigns geben.

Wichtige Tools zur Erstellung von Mockups

Für einfache (und frühe) Mockups können Tools wie InDesign, Photoshop oder Illustrator ebenso verwendet werden wie Powerpoint oder Keynote. In der Frühphase der Mockups ist der grafische Überblick wichtiger als eine interaktive Darstellung der möglichen Usability.

Je näher jedoch die Prototypisierung der Software rückt, desto mehr Augenmerk sollte auf navigierbare Mockups gelegt werden. Für die Erstellung von Websites kommen hier Tools wie Axure, Balsamiq oder Pencil in Frage. Mit Pop, Cleanmock oder Picapp gibt es vergleichbare Tools auch für die App-Entwicklung.

Die wichtigsten Faktoren – was ein gutes Mockup ausmacht

Bereits im Wireframe sollten die Grundpfeiler für Usability gelegt werden. Relationen der Elemente zueinander, Bildanteile, Formsprache und Anordnung sind im Wireframe noch am flexibelsten zu ändern. Die Entfernung oder das Hinzufügen von Elementen sollte im Idealfall hier erfolgen.

Im Mockup wird das Layout dann verfeinert. Die wichtigsten Elemente und Bedienelemente werden genauer angeordnet und die visuelle Sprache der App/Website wird genauer definiert. Zu den wichtigen Fragen gehören hierbei:

• Wie verhält sich die Software zu einer Brand Identity?

• Welche Farben und Kontraste kommen zum Einsatz?

• Welches visuelle Feedback erhalten User?

• Welche Schriftarten und Abstände werden genutzt?

• Welche Navigationsmöglichkeiten stehen zur Verfügung?

Die User Experience visuell optimieren

Ein Mockup ist keinesfalls eine Notwendigkeit im Software Development, bringt jedoch einen entscheidenden Vorteil mit sich: Mockups können die UI- und UX-Entwicklung vereinfachen, beschleunigen und teure Korrekturen verhindern.

Das Design einer Software und die Usability haben schließlich einen ungeheuren Einfluss auf Features und Code. Dies bereits frühzeitig während der Entwicklung zu berücksichtigen, macht die gesamte Projektplanung dynamischer und flexibler.

(ID:47924074)