Infografik userinterfacedesign Wireframe 1

Wireframes visualisieren den Bauplan des digitalen Produkts.

Digitale Produkte benötigen einen Bauplan. Diesen Bauplan lässt sich am schnellsten und einfachsten mit Wireframes entwickeln.

Was sind Wireframes?

Wireframes (dt. Drahtgittermodelle oder Funktionslayout) sind schematische Skizzen für bildschirmbasierte Anwendungen. Wireframes visualisieren einerseits Aufbau, Inhalt und Funktion des Screens, andererseits die Beziehung der einzelnen User Interface Elemente untereinander. Die schematischen Skizzen können als Scribbles von Hand auf Papier gezeichnet, oder mit entsprechender Software erstellt, werden. Sie zeigen die Platzierung von User Interface Elemente wie Navigation, Orientierungshilfen, Content und Logo des späteren Produkts. Wireframes werden von User Experience Designer in der Konzeption eingesetzt. Sie eignen sich hauptsächlich für den internen Austausch mit dem Visual Designer und dem Technik-Team. Für die Diskussion mit dem Kunden sind die schematischen Layouts in der Regel zu abstrakt und nicht zielführend.

Vorgehen

Grobkonzeption des User Interfaces mittels Wireframing

Bei der Gestaltung von Mensch-Maschine-Schnittstellen dient das Interface als Kommunikationsmittel zwischen Nutzer, Computer und Realität. Mit den Mitteln des Informationsdesigns gilt es, komplexe Informationen und Sachverhalte möglichst verständlich darzustellen, so dass diese vom Nutzer effektiv und effizient aufgenommen und verarbeitet werden können.

Ein Wireframe ist eine low fidelity Darstellung eines (Screen) Designs. Es zeigt auf abstrahierte Weise

  • Die wichtigsten Gruppen von Inhalten (was?)
  • Die Struktur der Informationen (wo?)
  • Eine Beschreibung und grundlegende Visualisierung der Benutzerschnittstelle (wie?)

Diese Fragen sollen mittels Wireframing beantwortet werden:

  • Welches ist die wichtigste Information auf dem Screen?
  • Wie wird diese Information dargestellt?
  • Wie kann auf dem Screen navigiert werden?
  • Welche bekannten Muster werden für die Navigation eingesetzt?
  • Welche Element helfen bei der Orientierung?
  • Welche Image-Elemente geben Auskunft über den Brand?

Folgende Schritte helfen beim Erarbeiten einer klaren groben Struktur der Raumaufteilung:

  1. Wahl des Arbeitsbereichs
  2. Festlegen des Viewports
  3. Raumaufteilung (zum Beispiel Spaltenaufteilung oder Module).
  4. Anordnen der Bilder, Infografiken, Charts …
  5. Anordnen der Textelemente (immer genügend Reserve einrechnen für Sprachadaptionen und Skalierbarkeit).
  6. Sicherstellen der Registerhaltigkeit (Grundraster).
  7. Anordnen zusätzlicher Elemente, die das Design der Anwendung verbessern (Trennlinien, Brandelemente etc.).
  8. Festlegen typografischer Details

Aus der Praxis

Screen Real Estate (Bildschirm-Grundstück)

Das Konzept des Usability-Experten Jakob Nielsen vergleicht den Platz auf einem Screen (Screen Real Estate) mit kostbarem Baugrund in Manhattan. Wie also soll der kostbare Platz auf dem Screen genutzt werden? Bei den Überlegungen muss jeweils der beste Kompromiss zwischen den folgenden Herausforderungen gefunden werden:

  • Prominente Platzierung der wichtigsten Informationen
  • Darstellung möglichst vieler Inhalte
  • Möglichst wenig ungenutzter Platz
  • Gute Orientierung
  • Möglichst grosszügige Gestaltung für eine angenehme Anmutung
  • Verschiedenen Navigationsmöglichkeiten

Aufteilung in vier Gruppen

Um Struktur in die Wireframes zu bringen, empfiehlt es sich, bereits in dieser Phase die späteren Inhalte in folgende vier Gruppen zu unterteilen und diese farblich unterschiedlich zu kodieren:

Image-Elemente

Platzierung der Elemente, die den Nutzenden Auskunft über den Absender geben. Logos, Produktlabels, Adressen etc.

Orientierungs-Elemente

Bei der Anordnung der Interface Elemente auf dem Screen muss berücksichtigt werden, dass der Mensch an unbekannten Orten nach Vertrautem Ausschau hält, um auf dieser Basis weitere Informationen wie derzeitigen Standort, Richtung und Entfernung seines Ziels ableiten zu können. Bereits in Wireframes kann man wichtige Orientierungspunkte dort platzieren, wo der Besucher hinsieht und sie erwartet.

Navigations-Elemente

Die Platzierung und Kodierung der Navigationselemente ist eine besonders wichtige Aufgabe bei der Entwicklung einer Anwendung, denn die Navigation macht das Produkt für den Benutzer erst nutzbar. Sie ist der Türöffner zu den Inhalten und Funktionen. Deshalb ist es notwendig, dass die Navigation stets verfügbar ist und ein hohes Mass an Usability aufweist. Zudem sollte sie unmittelbar verständlich (selbstbeschreibungsfähig), den Erwartungen der Nutzer entsprechen (erwartungskonform und konsistent) und den unterschiedlichen Nutzer ermöglichen, ihre Ziel auf unterschiedlichen Wegen zu erreichen (Steuerbarkeit). Welche Navigationskonzepte sich eignen, ist bei jedem Projekt neu zu prüfen und hängt vor allem von den definierten Persona, der Struktur der Anwendung, dem Thema und der Navigationsebene ab.

Content-Elemente

Alle Medienobjekte wie Texte, Bilder, Audio(player), Videos, Animationen, Dokumente usw.
Berücksichtigen Sie dabei folgende Punkte bereits beim Wireframing:

  • Texte: genügend breite Spalten, damit der spätere reale Text sinnvoll dargestellt werden kann
  • Bilder: Proportionen (1:1, 4:3, 3:4, 16:9 etc.)
  • Videos: Proportionen, Formate und Grössen

Wireflows

Wireflows sind eine Mischung aus statischen Wireframes und dynamischen Process Flows. Sie werden verwendet, wenn das Verhalten von dynamische Inhalten oder Module aufgezeigt werden soll. Ebenso eignen sich Wireflows, um einen definierten Use Case als Prototyp zu visualisieren und mit Nutzenden zu testen.

Tools

UI-Stencil bietet Tools für alle, die es gerne etwas genauer lieben

uistencil