Wireframing

Wireframing ist die Visualisierung von grundlegenden Konzepten bei der Erstellung und Gestaltung von Websites. Ein Wireframe (deutsch: Drahtgerüst, Drahtmodell) repräsentiert Teile der Informationsarchitektur, der Benutzerführung und der Navigation. Der Fokus liegt dabei auf dem Layout, der Art des Contents, der dargestellt werden soll, und den Elementen, die die Customer Journey steuern – wie zum Beispiel interne Links, Formulare oder die Form der Text- und Bilddarstellung. Weitere Bezeichnungen sind Page Schematics, Screen Blueprint oder Website-Gerüst. Wireframes können sowohl per Hand als auch mit speziellen Tools erstellt werden.

Allgemeine Informationen zum Thema

Der Wireframe beschreibt die Beziehungen zwischen den Elementen, die auf einer Website zum Einsatz kommen, und macht dadurch die Website-Struktur deutlich. Er abstrahiert von der konkreten grafischen Darstellung, indem Farben, Fonts, der tatsächliche Content sowie Bilder nicht in den Website-Entwurf miteinbezogen werden.

Während Mock-ups schon Bilder, Grafiken, Farben und Fonts beinhalten, ist dies bei Wireframes nicht der Fall. Auch von Prototypen (mit Ausnahme von Paper Prototypes) müssen Wireframes unterschieden werden: Prototypen sind konkrete Websites, die bereits als Quellcode in HTML und CSS vorliegen. Zwar können diese in funktioneller Hinsicht noch Defizite aufweisen, aber sie kommen im Sinne der agilen Softwareentwicklung dem angestrebten Ergebnis schon nahe.

Wireframes konzentrieren sich dagegen auf die Anordnung der Elemente, die die Interaktion zwischen Website und Benutzer bestimmen. Einerseits wird dadurch das noch rohe Layout festgelegt. Andererseits wird definiert, wie Benutzer die Funktionen einer Website verwenden können. Struktur und Benutzerführung sind die beiden wesentlichen Aspekte beim Wireframing. Ausgehend von einem User Centered Design werden die Nutzungsmuster einer Website bestimmt und abstrakt mit einem Wireframe dargestellt, ohne dass dieser bereits interaktiv ist.[1]

Ziele des Wireframing

Die Ziele von Wireframes bestehen zunächst darin, dass der Designer über ein strukturelles Modell der Website verfügt, das ihm bei der Gestaltung hilft. Wireframing erfolgt vor dem grafischen Design (Mock-up) und der technischen Umsetzung (Prototyp). Um ein Wireframe zu erstellen, muss jedoch vorab der Zweck eines Projektes festgelegt werden. Das Geschäftsmodell und das Ziel der Website beeinflusst die optimale Struktur und die Art und Weise der Benutzerführung. Idealerweise ist ein Wireframe ein Bestandteil einer Konversation zwischen Designer und Klient, sodass die Expertise des Designers sowie die Wünsche und Bedürfnisse des Klienten zusammengebracht werden können.

Funktionsweise

Beim Wirferaming konzentrieren sich die am Entwurf beteiligten Personen auf folgende Bereiche:[2]

  • Designkonzept und Layout: Die grundlegende Struktur in Form der Informationshierarchie oder -architektur dient der Verknüpfung mit dem späteren visuellen Design.
  • Website-Elemente: Header, Body, Footer sowie Listen, Formulare und interne Links werden in ihrer Anordnung definiert und bilden die Grundstruktur.
  • Arten von Content: Bestimmte Arten von Inhalten werden auf bestimmte Weisen dargestellt. Text wird meist als Lorem Ipsum eingefügt, um zu sehen, ob die Darstellung die Informationsaufnahme des Nutzers unterstützt und seinen kognitiven Fähigkeiten entgegenkommt. Bilder und Grafiken werden schematisch mit Kästen oder Boxen abgebildet, um die Proportionen des Layouts abschätzen zu können.
  • Benutzerführung: Die verschiedenen Website-Elemente werden anhand einer idealisierten Benutzerführung miteinander verknüpft, sodass ersichtlich ist, wie Nutzer mit der Website interagieren können und welche Nutzungsmuster dem Ziel der Website am nächsten sind.

Wireframes dienen oft als Diskussionsgrundlage. Sie sind zugleich die Blaupause und die Dokumentation für den Entwicklungsprozess. Der Auftraggeber sieht, ob der Entwurf seinen Vorstellungen nahe kommt. Der Designer kann anhand des Wireframes einen Mock-up Entwurf erstellen. Der Programmierer oder Webdesigner erhält durch den Wireframe eine Liste an Kriterien, die das Layout, die Darstellung der Inhalte und die Funktionen der Website detaillierter beschreiben. Eine wichtige Funktion von Wireframes ist die iterative Überprüfung in der Konzeptionsphase, sodass Auftraggeber und Auftragnehmer sich genau über die Ziele, Möglichkeiten und Restriktionen des Projektes austauschen können.

Arten von Wireframes

Wireframes können in der Darstellung von Details variieren. Es wird zwischen Low- und High-Fidelity-Wireframes unterschieden – beziehungsweise zwischen statischen und dynamischen Wireframes. Die Ausarbeitung der Details oder deren Vollständigkeit ist das Unterscheidungsmerkmal.

High-Fidelity-Wireframes

High-Fidelity-Wireframes erfordern weniger Vorstellungskraft des Klienten, weil die Form und die Funktionen einer Website hier besser kommuniziert werden können. Ein vollständiger Entwurf eines Wireframes kommt einem Mock-up bereits sehr nahe. Er beansprucht jedoch meist auch mehr Zeit, wenn nicht standardisierte Bibliotheken und Wireframe-Tools zum Einsatz kommen. Zudem können diese Modellentwürfe dem Auftragnehmer bei Verhandlungen eine Hilfe sein.[3]

Low-Fidelity-Wireframes

Low-Fidelity-Wireframes reduzieren hingegen die verwendeten Elemente auf das Wesentliche. Sie sind hier weniger Verkaufsargument für den Auftragnehmer, sondern ein Entwurf, der zur Diskussion steht. Ist es vom Auftraggeber gewünscht und sieht er seine Vorgaben umgesetzt, kann dieser Entwurf dann zu einer High-Fidelity-Variante ausgearbeitet oder mit der Entwicklung von Mock-ups und Prototypen begonnen werden.[4]

Beispiel für einen Wireframe

Ein exemplarischer, reduzierter Wireframe könnte folgende Elemente enthalten:[5]

  • Logo
  • Suchfeld
  • Breadcrumb-Navigation
  • Header und Überschriften wie H1 und H2-Tags
  • Menü und lokale Navigation
  • Inhalte im Body als Lorem-Ipsum-Text
  • Share- und Like Buttons
  • Kontaktinformationen
  • Footer mit Deeplinks und anderen Elementen

Bedeutung für die Usability

Als Modell für die Informationsarchitektur unterstützt der Wireframe in erster Linie den Entwicklungsprozess einer Website.[6] Er vereint die Vorstellungen des Auftraggebers mit dem Fachwissen des Webdesigners oder Informationsarchitekten. Dabei spielt der Nutzer einer enorm wichtige Rolle: Die Möglichkeiten zur Interaktion zwischen Website und Benutzer bestimmen die Benutzerfreundlichkeit zu einem großen Teil.

Dabei muss der Entwurf selbst noch nicht interaktiv sein; es wird lediglich definiert, welche Nutzungsszenarien gewünscht sind. Ein wesentlicher Teil der Nutzungsmuster ist die Aufnahme von Informationen, die durch die Struktur unterstützt und erleichtert werden soll. Dazu gehören ebenfalls Menüs, Navigationselemente und Breadcrumbs, sodass eine optimale Benutzerführung gefunden werden kann. Diese Aspekte können sich an den Erkenntnissen von Usablity-Experten orientieren, um Studien über Eye Tracking, Leseverhalten oder Klickpfade zu antizipieren und dem Nutzer einen sogenannten Joy of Use zu bieten, der seinen Erwartungshaltungen entspricht.

Einzelnachweise

  1. ↑ What's the Difference between a Wireframe, Prototype or Mockup? quickfocus.com. Abgerufen am 22.06.2015
  2. ↑ Definition & usage – Wireframe web2usability.wordpress.com. Abgerufen am 22.06.2015
  3. ↑ 4 Things No One Told Me About High-Fidelity Wireframes uxmovement.com. Abgerufen am 22.06.2015
  4. ↑ Wireframing usability.gov. Abgerufen am 22.06.2015
  5. ↑ Presenting Information Architecture webstyleguide.com. Abgerufen am 22.06.2015
  6. ↑ The what, when and why of wireframes userpathways.com. Abgerufen am 22.06.2015

Weblinks


Abgerufen von „https://de.ryte.com/wiki/index.php?title=Wireframing&oldid=19572“

Kategorie