Mit Wireframes & Prototypes zur optimalen UX

Wie Wireframes und Prototypen den Weg zu einer perfekten User Experience ebnen.

5 min read

Mit Wireframes & Prototypes zur optimalen UX

Wireframes und Prototypen sind die beiden Design-Ergebnisse, die am häufigsten mit UX-Design (User Experience Design) in Verbindung gebracht werden. Viele Menschen im Bereich des digitalen Designs verwenden die Begriffe “Wireframe” und “Prototyp” synonym, es gibt jedoch signifikante Unterschiede zwischen den beiden: Sie sehen unterschiedlich aus, sie kommunizieren unterschiedliche Dinge und sie dienen unterschiedlichen Zwecken. Was genau ist also ein Wireframe und wo liegt der Unterschied zu einem Prototyp? In diesem Artikel klären wir die Grundlagen hinter den beiden Begriffen und zeigen auf, wie sie in den UX-Designprozess einfließen.

Wireframes

Ein Wireframe ist eine schematische Darstellung einer Seitenoberfläche, die verwendet wird, um die Platzierung von Inhalten und funktionalen Elementen auf einer Website zu demonstrieren. Sie helfen dabei, Beziehungen zwischen einzelnen Seiten herzustellen und dienen als Grundlage für Prototypen. Wireframes verwenden einfache Formen, um visuelle Darstellungen von Seitenlayouts zu erstellen. Sie werden verwendet, um die Struktur der einzelnen Seiten aufzuzeigen — also wie die Seitenelemente zusammenarbeiten werden, wo der Inhalt sein wird und wie die Seiten miteinander verbunden werden bzw. wie die Benutzeroberfläche aus der Sicht des Benutzers funktionieren wird.

Wie sieht ein Wireframe aus und welchen Zweck erfüllt es?

Wireframes haben sehr begrenzte visuelle Eigenschaften, da die meisten Designelemente (wie Bilder, Videos, Farben, finaler Text usw.) nicht enthalten sind. Anstelle dieser spezifischen Designelemente verwenden die Designer in der Regel Platzhalter. Designer verfolgen diesen Ansatz aus einem bestimmten Grund: Eine begrenzte Anzahl visueller Elemente und eine Graustufen-Farbpalette helfen dabei, sich auf das Layout und die Struktur der Seite zu konzentrieren, anstatt von visuellen Detailaspekte des Designs abgelenkt zu werden.

Wann sollten Sie ein Wireframe erstellen?

Konzepter erstellen Wireframes in der Regel vor Beginn des Designprozess, also bevor das Team mit der Arbeit an den visuellen Details beginnt. In der Wireframing-Phase ist es viel einfacher, große Änderungen vorzunehmen. Da Wireframes relativ schnell zu erstellen sind, können Designer mit dem Hinzufügen oder Entfernen von Objekten, dem Verschieben von Inhalten und Objekten sowie dem Gruppieren von Elementen experimentieren.

Wie wird ein Wireframe erstellt?

Auch wenn der Arbeitsablauf bei jedem Wireframe unterschiedlich ist, umfasst das der Prozess meist die folgenden Schritte: Grundsätzlich können Wireframes von Hand oder digital mit einem Tool wie z.B. Adobe XD erstellt werden.

Als Ausgangspunkt für das Wireframing sollte zunächst die Zielgruppe im Detail analysiert werden. Je mehr man über seine Zielgruppe erfährt, desto besser kann man verstehen, wie man ihre Wünsche und Bedürfnisse erfüllen kann. Daher gilt es, die Handlungen zu definieren, die der spätere User auf der Website ausführen soll. Das Bestimmen des Weges, den die Benutzer bei der Verwendung der Website nehmen sollen, kann dabei helfen, einen optimalen Benutzerfluss, den sog. User Flow, zu kreieren.

Bei der Erstellung der Wireframes sollte man sich vor allem Gedanken darüber machen, wie Benutzer mit den einzelnen Elementen interagieren könnten, von Schaltflächen und Links bis hin zu Navigationsmenüs. Außerdem sollte die Benutzerfreundlichkeit der Wireframes getestet werden, um frühzeitig zu erkennen, was funktioniert und was verbessert werden sollte.

Die Vorteile des Wireframing: Ein Bild sagt mehr als tausend Worte.

Wireframes helfen Designern, Ideen zu kommunizieren und Design-Entscheidungen zu vermitteln. Beim Betrachten eines Wireframes sollte man eine gute Vorstellung davon bekommen, welche Screens eine Website haben wird. Selbst ein Wireframe für eine Website oder eine mobile App voller Platzhalter hilft dem Team zu sehen, wie sich das Design entwickelt. Projektdokumentation vorbereiten. Wireframes dienen auch als Referenzpunkt für funktionale Spezifikationen.

Die Grenzen des Wireframing

Da es sich beim Wireframe-Design um eine schematische und statische Darstellung des finalen Designs handelt, eignen sich Wireframes nur bedingt zur Beurteilung der allgemeinen Benutzererfahrung (der sogenannten Usability). Ebenso sind Wireframes nicht das beste Werkzeug, um den Projektbeteiligten ein Konzept zu demonstrieren, da auch sie Schwierigkeiten haben können, zu verstehen, wie das endgültige Design aussehen wird. Außerdem helfen Wireframes nicht, wenn komplexe Design-Ideen beschrieben werden müssen, wie z.B. animierte Effekte oder komplexe Übergänge. Wireframes können zwar zeigen, wo die Interaktion beginnt und endet, aber sie beschreiben nicht, was dazwischen passiert.

Prototypen

Prototyping hingegen ist der Prozess der Erstellung eines interaktiven Erlebnisses. Ein Prototyp stellt das Endprodukt dar, einschließlich Simulationen der Interaktionen auf der Benutzeroberfläche. Im Gegensatz zu Wireframes, die oft ähnlich aussehen, können Prototypen stark variieren. Prototypen können einfache Artefakte sein, die nur grundlegenden Interaktionen ähneln, bis hin zu codierten Prototypen, die fast wie ein echtes Produkt aussehen und funktionieren.

Was ist der Zweck eines Prototyps?

Prototypen dienen als Brücke zum finalen Produkt. Sie werden erstellt, wenn visuelles und interaktives Design miteinander verbunden werden und bevor man zur eigentlichen Entwicklung übergeht. Das Ziel eines Prototyps ist es, die Interaktion zwischen dem Benutzer und der Benutzeroberfläche zu simulieren und zu verstehen, wie das Endprodukt funktionieren wird. Dadurch eignet sich ein Prototyp gut für abschließende Tests mit “echten” Benutzern. Auf diese Weise können Designer sowohl die Benutzerfreundlichkeit als auch die Machbarkeit von Produktdesigns erproben.

Fazit

Wireframing und Prototyping sind integrale Bestandteile des Designprozesses. Das Wichtigste, was man bei der Erstellung beachten sollte: Man sollte niemals ein Wireframe oder einen Prototyp erstellen, ohne die Zielgruppe und deren Bedürfnisse im Kopf zu haben. Der Benutzer sollte im Mittelpunkt eines jeden Designs stehen. So lässt sich sicherstellen, dass die Nutzer auf der Website eine optimale User Experience haben.

Prototypen für reale Tests

Prototypen bringen uns näher an das echte Produkt. Sie ermöglichen es uns, die Interaktivität zu testen und zu verstehen, wie der Nutzer wirklich mit der Oberfläche umgehen wird. Nur so können wir sicherstellen, dass das Design am Ende funktioniert.

Mehr erfahren

Florian Möllering

Head of UX/UI Design

Jetzt Termin mit unseren Experten vereinbaren.

Sie sehen gerade einen Platzhalterinhalt von Standard. Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf den Button unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.

Weitere Informationen