UI Design: Unterschiede zwischen Wireframes, Mockups & Prototyping

Was sind Wireframes und was ist der Unterschied zu MockUps? Und wo kommt da Balsamiq in Spiel? Was ist Low- bzw. High-Fidelity. Dieser Artikel gibt Ihnen einen Überblick und erklärt, wie Sie Tools wie Balsamiq optimal nutzen können.

Was ist Wireframing?

Unter Wireframing versteht man die Erarbeitung stark vereinfachter GUI-Darstellungen und (UI-) Bedienkonzepte, welche sich auf die Oberflächen- und Bedienstrukturen konzentriert. Schrift- und Farbgestaltung bleiben außen vor, die Informationsarchitektur wird meist nur teilweise betrachet. Hiermit wird im Produktentwicklungsprozess erstmalig etwas "zum Anfassen" vorgelegt, das Gegenüber ist nicht mehr der eigenen Phantasie überlassen.

Begriffserklärung

  • Wireframe: Einfache Darstellung einer Benutzeroberfläche im Stile einer Strichzeichnung. Tools sind Stift + Whiteboard oder Balsamiq. Oft verwendet als Synonym zu (Low-Fidelity) MockUp.
  • Mockup: Darstellung einer Benutzeroberfläche, die von einer Strichzeichnung (= Low-Fidelity oder Wireframe) reichen kann bis hin zu einer fast vollfunktionaler Simulation.
  • Prototype: Weiterentwicklung eines MockUp zu einem voll funktionsfähigen Demonstrationsmodell. Letzte Stufe vor Übergabe in die Entwicklung.
  • Balsamiq: Weit verbreitetes Tool um schnelle Wireframes zu erstellen.

Deeper Dive: Was bedeuten die Begriffe Low- und High-Fidelity Wireframe?

Vielleicht hast du schonmal von "Low-Fidelity" und "High-Fidelity" Wireframes gehört. Was das bedeutet soll im Folgenden erklärt werden.

Low-Fidelity
Ein Low-Fidelity Wireframe stellt einen stark versimplifizierten Entwurf einer Benutzeroberfläche dar, der es aber trotz seiner Einfachheit erlaubt, erste Geschichten zur User Experience zu erzählen und Funktionalitäten zu planen. Low-Fidelity Wireframes lassen sich dabei sowohl papier- als auch software-gestützt erstellen. Besonders in Papierform lassen sich diese in Meetings mit Workshopcharakter aufbauen und gemeinsam mit anderen Teilnehmern darüber diskutieren.

High-Fidelity
Im High-Fidelity Wireframes stellen eine Weiterentwicklung der Low-Fidelity Varianten dar. Sie enthalten bereits ein paar mehr Details, wie beispielsweise die Gestaltung von Klickflächen oder auch erste konkrete textuelle Inhalte. High-Fidelity Wireframes sind nur noch softwaregestützt zu erstellen. Viele Softwaretools lassen es zu, hier bereits erste klickbare Szenarien darzustellen wie etwa den Log-In oder auch oberflächliche Navigationen.

Und was bringt uns das Wireframing?

Das Kernziel schlechthin im UX-Design ist die möglichst intensive und interaktive Einbindung der (späteren) Anwender in die Gestaltung der Lösung. Wireframeing ist dafür eine einfache und leichtgewichtige Methode - praktisch reicht für Wireframeing Stift und Papier, was in vielen Anwendungsfällen durchaus empfehlenswert ist.

Ein Wireframe stellt dem Anwender das zukünftige GUI wesentlich plastischer dar und ermöglicht ihm so in einem viel größeren Maße, sich mit der Bedienung & Nutzung des Systems auseinanderzusetzen. Er kann dort bereits sowohl die Klickstrecken und den konkreten Nutzungskontext nachvollziehen als auch die benötigte Funktionalität benennen.

Die großen Vorteile eines Wireframes sind dabei zusammengefasst:

  • Einfach zu kommunizieren: Reduktion der Kommunikationshürden zwischen Designer und potenziellem User durch offene, gemeinsame Diskussion
  • Schnell zu bauen: Zum einfachen Entwurf reichen Stift und Papier, ohne dass von Anfang an auf alle Details geachtet werden muss
  • Niedrige Kosten: Die Materialkosten für einen Entwuft mit Stift und Papier gehen gegen null. Auch Wireframing Modellierungstools sind auf dem Markt sehr erschwinglich, oft sogar kostenlos nutzbar

Was ist der Unterschied zum Mockup?

Ein Mockup ist die ausdetaillierende Weiterentwicklung des Wireframes. Es stellt nicht nur die Strukturen dar, sondern auch die Farb- & Schriftgestaltung und bietet meist auch eine wesentlich detailliertere Bediensimulation. Während Wireframes problemlos in einem Workshop zusammen mit dem Anwender erstellt werden können, sind Mockups deutlich komplexer in der Erstellung und werden meist im Nachgang zu einem Wireframeing-Workshop gebaut. Dafür können Sie dem Anwender das Benutzererlebnis deutlich detallierter und realitätsnäher darstellen. Ein beliebter Vergleich, der gerne zur Veranschaulichung der Abgrenzung gezogen wird ist der folgende: Wenn ein Wireframe die Blaupause eines Gebäudes ist stellt ein Mockup das fertige Architektur-Modell dar.

Die Hauptabgrenzungscharakteristika zu Wireframes sind also:

  • Reichere Farbpalette, Bilder und Topografien
  • Richtige Klickflächen/Buttons und Texte
  • Inhaltslayouts und korrekte Abstände zwischen Flächen
  • Detaillierte Navigationsmöglichkeiten

Wie entwickelt es sich dann zu einem Protoype weiter?

Ein Prototype ist logischerweise die dritte Entwicklungsstufe. Man kann ihn als voll funktionsfähigen, interaktiven Mockup mit hochdetailliertem User Interface bezeichnen. Es handelt sich nach wie vor um einen Entwurf, verhält sich aber bereits wie ein vorläufig fertiges Produkt. Aufrund ihrer starken, realistischen Darstellung des voraussichtlichen Endprodukts lassen sich Prototypen verwenden um, unter Einsparung von Geld und Zeit, einfache Tests hinsichtlich Usability und dem Finden von potentiellen Fehlern durchzuführen. Ein Prototype ist die letzte Entwicklungsstufe, bevor es an die Übergabe in die Produktentwicklung geht.

Und wo kommt jetzt Balsamiq ins Spiel?

Balsamiq ist eines oder das weitverbreitete Wireframing-Tool. Es ist als Cloud-Version verfügbar und eignet sich sowohl für den Einsatz innerhalb eines Workshops als auch im Nachgang zur Dokumentation oder Detaillierung von bisherigen Entwürfen. Die Stärke von Balsamiq ist seine schnelle und einfache Bedienung, der Nachteil ist der geringe Funktionsumfang im Bezug auf die Simulation von Bedien- und Klickstrecken sowie der u.U. hohe Pflegeaufwand bei großen Projekten.

Wir setzen Balsamiq in verschiedenen Projekten ein. Es ist unter https://balsamiq.cloud/ verfügbar.

Sie möchten mit UI & UX Design durchstarten? Wir verhelfen Ihnen zur Pole Position!

Ein gutes, passendes UI Design aufzusetzen ist nicht der Anfang. Gutes UI Design bettet sich vielmehr in einen gesamthaften, ganzheitlichen UX Design Prozess ein. Nur wenn man alle Schritte dessen durchläuft können alle Fragen beantwortet werden, die zwangsläufig aufkommen werden. Mit uns stellen Sie sicher, dass keiner der Quadranten des UX Design außenvor bleibt.

Denn wie careerfoundry.com den Designer Frank Chimero zitiert:

“People ignore design that ignores people.”

Kontaktieren Sie uns noch heute und lassen Sie uns gemeinsam an Ihrer UX Design Erfolgsgeschichte arbeiten.

Matthias Müller

T. +49 176 133 133 75
matthias.g.mueller@ventum.de

Sebastian Leblanc

T. +49 176 133 133 44
Sebastian.Leblanc@ventum.de