Mit Wireframes Konzepte visualisieren

Do it right
Wireframing_Blogartikel

Ein Wireframe ist eine grobe Skizze, die sich auf die Informationshierarchie beschränkt und auf Gestaltungsdetails verzichtet. Mit diesen analogen und digitalen Skizzen konzentrieren wir uns auf den Inhalt und die Struktur unserer digitalen Produkte.

Author
Daniel Öttl
Date
October 19, 2022
Reading time
3 Minutes

Navigation mit Sitemap

Bevor wir mit dem Wireframing-Prozess beginnen, klären wir die Hierarchie der einzelnen Seiten und deren Beziehung zueinander. Das Navigationskonzept bildet die Basis der Applikation und bestimmt, wie verschachtelt die Anwendung ist und welche Seiten benötigt werden.

Sitemap
Sitemap einer fiktiven Applikation

Informationsarchitektur

Sobald die Struktur der Applikation steht, konzentrieren wir uns auf die Hierarchie in den einzelnen Seiten.

  • Welcher Bereich eignet sich für Aktionen?
  • Wo werden welche Informationen benötigt?
  • Wie müssen diese Informationen gegliedert sein?

Die Fragen helfen uns, den Inhalt auf den einzelnen Seiten so zu strukturieren, dass Nutzer:innen ihre Aufgaben effizient erledigen können.

Gleichzeitig bauen wir ein Navigationskonzept auf. Das heißt, dass Seitenüberschriften, Navigations- und Interaktionselemente mit einheitlicher Logik durch die ganze Applikation gezogen werden. Dadurch stellen wir sicher, dass der Seitenaufbau einfach zu verstehen ist und man sich schnell zurechtfindet.

Wireframes
Wireframe für Listen- und Detailansicht

Alle Daten vorhanden?

Der wohl wichtigste Teil des Wireframes sind die darzustellenden Daten. Um nicht mit Platzhaltertexten und -bildern arbeiten zu müssen, arbeiten wir von Beginn an eng mit unseren Kund:innen zusammen. Im besten Fall kommen in dieser Phase bereits die ersten Erkenntnisse und Verbesserungspotentiale zum Vorschein, denn die Wireframe-Phase eignet sich hervorragend für Korrekturschleifen. Die Skizzen sind durch ihren groben Aufbau wesentlich schneller angepasst als im fertigen Design, geschweige denn in der Implementierung.

Die richtigen Daten ermöglichen uns, den Kontext noch klarer zu evaluieren und herauszufinden, ob es zusätzliche Informationen in Form von Visualisierungen benötigt. Sowohl die Art der Daten als auch deren Platzbedarf haben einen großen Einfluss auf die Gestaltung der Applikation.


Ohne visuelle Details

Mit den fertigen Wireframes testen wir die vorab definierten Workflows. Bei den Abstimmungsgesprächen und Usability Tests können sich unsere Kund:innen und deren Nutzer:innen komplett auf die Struktur und den Inhalt konzentrieren, ohne sich von visuellen Details ablenken zu lassen. Persönliche Präferenzen und Geschmäcker kommen nicht zum Tragen, wodurch sich das Feedback wie gewünscht rein auf die Information und Workflows konzentriert.

More of that?

Blogartikel Titelbilder
Do it right
Agile-Coaching-Tag: Projektstart einmal anders
September 28, 2022 | 3 Min.
IMG_0207
Do it right
Prototyping mit interaktiven Klickdummys
July 26, 2022 | 3 Min.
Blog_Titelbild_Usability Testing
Do it right
Software vor Entwicklungsstart validieren
June 10, 2022 | 5 Min.

Contact form

*Required field
*Required field
*Required field
*Required field
We protect your privacy

We keep your personal data safe and do not share it with third parties. You can find out more about this in our privacy policy.