Webkrauts Logo

Webkrauts Webkrauts Schriftzug

- für mehr Qualität im Web

Wireframes für Startseiten

Wireframes für Startseiten

Für die einen sind es Klickmodelle, für die anderen Mock-Ups und wieder andere nennen sie Wireframes. Die Rede ist von statischen oder dynamischen Grobkonzepten einer Webseite oder von Teilbereichen. Ansgar Hein zeigt Euch am praktischen Beispiel, wie Ihr Wireframing für ein Startseiten-Konzept einsetzt.

Bereits im Adventskalender 2007 gab René Grassegger für die Webkrauts eine umfassende Übersicht dessen, was Wireframes sind und was sie zu leisten vermögen. Inzwischen etablieren sich Konzepte, wie die Niehaus Wireframe-Technik. Hiermit ist es möglich, gewichtete Wireframes zu erstellen, die speziell für die Umsetzung von Startseiten (z.B. für Online-Shops) geeignet sind. Ihr könnt mit dieser Technik die Vielzahl an Informationen und Tools auf eurer Startseite besser strukturieren, ohne den Nutzer vom Ziel abzubringen.

Vorarbeit notwendig

Bevor Ihr euch an die Erstellung eines Wireframes für eine Webseite heranwagt, solltet Ihr zunächst die Grundlagen schaffen. Beginnt damit, die Wünsche Eures Kunden bezüglich verschiedener Kriterien abzufragen:

  • Navigations-Struktur
    Anzahl der Hauptnavigationspunkte, Anzahl der Ebenen, Anzahl der Menüs auf der Seite
  • Features
    Bildergalerie, Newsticker, Social Media, etc.
  • Beispielseiten (max. 5)
    Seiten, die dem Kunden gefallen und kurze Statement, warum sie gefallen
  • Texte
    Ideal sind bereits fertige Texte, um im Wireframe / Mock-Up bereits die Textmenge einschätzen zu können; Blindtexte verleiten in dieser Phase dazu, die Bedeutung von Informationen zu verschleiern

Wenn Ihr genügend Zeit (und Budget) zur Verfügung habt, solltet Ihr auch eine Kunden- bzw. Nutzerbefragung ins Auge fassen. Niemand kennt die Fehler einer Seite und die eigenen Bedürfnisse besser als Eure Nutzer. Das mag im Einzelfall schmerzlich werden, aber ein (Re-)Launch ist die ideale Möglichkeit, Althergebrachtes zu verändern und Dinge zu verbessern.

Zusammenführung

Ein Wireframe verdichtet die zuvor gewonnenen Erkenntnisse auf visuelle Art und Weise. Er schafft eine Verbindlichkeit, die reine Konzeptpapiere oder Pflichtenhefte nicht erzeugen können. Oftmals wird Kunden und Webworkern sogar erst in dieser Phase klar, welche Klippen es zu umschiffen gibt, oder wie bestimmte Lösungen funktionieren können. Und wenn Ihr auf die Niehaus-Technik setzt, vielleicht sogar, welche Bedeutung einzelne Elemente für den Nutzer haben.

Für das Projekt moers.de lagen alle vorgenannten Informationen vor – inklusive einer umfangreichen Nutzerbefragung im Inter- und Intranet. Gerade die Startseite sollte gänzlich neu konzipiert werden, dabei aber unglaublich viele Informationen darstellen, die möglichst alle sofort im Viewport des Anwenders zu sehen sein sollten. Alleine die Vielfalt an Elementen, wie News, Termine, Service, Kontakt, Videos, Partner, Social-Media und Sprachversionen mit jeweils unterschiedlichen Wünschen von Nutzern und Kunden stellen eine große Herausforderung an Konzeption und Design dar. Wie also bringt Ihr Nutzer- und Kundenwünsche mit dem technisch Machbaren und dem zur Verfügung stehenden Budget unter einen Hut?

Wireframe der Startseite von moers.de, basierend auf Kunden-Workshop
Wireframe für die Startseite der Stadt Moers, basierend auf Kunden-Workshop und Nutzerwünschen

Lösung 1: Selbermachen und gewichten

Basierend auf den Wünschen des Kunden und der Anwender könnt Ihr die einzelnen Bestandteile, wie Hauptnavigation, News, etc. bewerten – idealerweise in Rücksprache mit dem Kunden, wenn die Wichtigkeit nicht aus dem Briefing bzw. dem Pflichtenheft hervorgeht. Manche Kunden sind damit allerdings überfordert, so dass viele Webworker den Wireframe im stillen Kämmerlein anhand eigener Erfahrungen und Bewertungsmuster erstellen und dem Kunden zur Abnahme übergeben. Letzteres ist übrigens ein wichtiger Punkt im Gesamtprozess: Lasst Euch einen erstellten Wireframe immer schriftlich freigeben. Das schafft Sicherheit für beide Seiten, auch was die weiteren Arbeitsschritte anbelangt. Für die Gewichtung der einzelnen Wireframe-Bestandteile könnt Ihr die Informationsblöcke mit einer Gewichtung von 1 (niedrig) bis 5 (hoch) versehen. Wenn Euer Kunde das ebenso handhabt, habt Ihr bereits zwei Gewichtungen – je mehr (unterschiedliche) Personen involviert sind, desto besser das Resultat.

Lösung 2: Workshop mit dem Kunden

Ein anderer Lösungsansatz besteht darin, das Wireframe gemeinsam und direkt vor Ort mit dem Kunden zu erstellen. Aus der Praxis heraus empfiehlt es sich, das Wireframe zusammen mit der Navigationsstruktur in Kooperation mit dem Kunden zu erarbeiten. Ihr lernt hierbei den Kunden und seine Bedürfnisse und Wünsche besser kennen und im Gegenzug lernt Euer Auftraggeber etwas über Eure professionelle Arbeitsweise sowie über mögliche Schwierigkeiten und etwaige Lösungsalternativen. Gemessen an Lösung 1 entsteht hier eine Win-Win-Situation für beide Seiten. Für den Relaunch von moers.de wurden alle Erkenntnisse in einem eintägigen Workshop verdichtet und mit Hilfe von Pidoco in einen Wireframe überführt. Ihr könnt anstelle von Pidoco auch ein anderes Tool verwenden, das Euch bei der Erstellung unterstützt – jeder hat hier sicher seine eigenen Präferenzen. Eine Liste mit ausgewählten Wireframing-Tools findet Ihr am Ende des Artikels.

Erkenntnisse aus der Praxis

Wireframes solltet Ihr generell dazu nutzen, um Eurem Kunden Lösungsmöglichkeiten für seine Wünsche (und Eure Probleme) aufzuzeigen. Wenn Ihr wenig Platz zur Verfügung habt, aber viele Informationen im direkt sichtbaren Viewport des Anwenders sichtbar sein sollen, nutzt Reiter, Akkordeon oder Slide-Out-Boxen – denkt interaktiv und visualisiert die Veränderungen direkt im Wireframe. Wenn Ihr Lösungen im Kopf habt, die das Budget übersteigen würden, ist die Wireframe-Phase der richtige Zeitpunkt, den Kunden mit Euren Ideen und den Konsequenzen zu konfrontieren. In vielen Fällen helfen Wireframes dabei, zusätzliche Gimmicks zu verkaufen.

Interaktive Wireframes bieten Euch zusätzliche Möglichkeiten, da Ihr einzelne Ansichten miteinander verlinken könnt. Somit entsteht ein Klickmodell, das nicht nur Aufschluss über die Anordnung, sondern auch über den Ablauf bestimmter Prozesse bietet. Dieses Vorgehen ist vor allem bei formularbasierten Web-Anwendungen zu empfehlen bzw. schon dann, wenn ein Login samt Registrierung verlangt wird. Einen interaktiven Wireframe könnt Ihr, je nach Tool bzw. gebuchtem Paket, auch zum Testen an Nutzer herausgeben. Diese haben dann die Möglichkeit, Kommentare zu hinterlassen und somit die Qualität des Wireframes noch einmal zu steigern.

Startseite von moers.de, leicht abweichend vom Wireframe
Startseite der Stadt Moers, aufbauend auf dem Wireframe, aber in Details mit Abweichungen

Designer haben häufig ihre Probleme mit Wireframes: Oftmals bleiben die kantigen Block-Strukturen erhalten, die Anordnung wird als Gesetz verstanden und das Layout verkrampft sich um das technische und inhaltliche Konzept. Wireframes sollten niemals Eure Kreativität ausbremsen. Das Verschieben einzelner (weniger wichtiger) Blöcke bzw. die Gestaltung von Teilbereichen mit anderen, als den im Wireframe gezeigten Lösungen, ist ein Teil Eurer Kreativleistung. Im Beispiel der Stadt Moers gibt es ebenfalls Abweichungen zwischen Wireframe und Layout bzw. Umsetzung. So wanderte der Bereich »Events« von links nach rechts und rutschte etwas höher, die ReadSpeaker-Funktionalitäten wurden auf die Unterseiten ausgelagert und die Social Media Icons wanderten vom Header in den Footer – ohne Folgen für das restlichen Wireframe. Sichtbar ist jedoch, dass die generelle Aufteilung erhalten blieb, auch was die Höhe des Headers und die Position von Suche und Navigationen anbelangt.

Gerade durch AJAX, JavaScript und HTML5 sind die Anforderungen an Webseiten und Webworker gestiegen. Mit Hilfe von Wireframes organisiert Ihr die wachsende Komplexität, schafft Vertrauen und Planungssicherheit. Außerdem schont Ihr Eure Nerven und die Eures Kunden – vielleicht der wichtigste Vorteil von Wireframes überhaupt.

Wireframing-Tools

Die folgende Übersicht kostenfreier und kostenpflichtiger Werkzeuge gibt Euch einen ersten Anhaltspunkt. Selbstverständlich könnt Ihr auch mit alternativen Tools arbeiten, beispielsweise mit einem ausgeschnittenen Papiermodell samt Papier-Browser, oder einem Whiteboard, das Ihr abfotografiert bzw. speichert, wenn es ein interaktives Whiteboard ist.

  • Axure (Windows/Mac, 589 US-$)
  • Balsamiq (Windows/Mac/Linux, 79 US-$)
  • Cacoo (webbasiert, ab 4,95 Euro/Monat)
  • Google Docs (webbasiert, kostenlos)
  • Pencil (Firefox-AddOn, kostenlos)
  • Pidoco (webbasiert, ab 9 US-$/Monat)

Eine gute und aktuelle Übersicht mit zahlreichen Testberichten von Wireframing-Tools liefert die Webseite von Jakub Linowski.

Kommentare

Dorothea Schäfer
am 01.12.2011 - 08:38

Vor allem helfen Wireframes, die eigenen Gedanken zu strukturieren. Ob Stichwortliste oder Text für das Konzept, nichts ist anschaulicher als eine visuelle Skizze der Website. Mögliche Lücken im Konzept werden sichtbar, angebliche Probleme lösen sich in Luft auf.

(Ich freue mich schon auf euren lesenswerten Beiträge. Vielen Dank für eure Mühen und eine gemütliche Adventszeit euch allen!)

Permanenter Link

Claus Arndt
am 01.12.2011 - 09:11

Aus Kundensicht kann ich nur bestätigen: Wireframes sind absolut hilfreich bei Relaunch-Projekten. Gerade bei komplexen Websites werden in einer sehr frühen Phase nicht nur übersichtliche Strukturen geschaffen, es können auch frühzeitig Fehler (Denkfehler, Planungsfehler, Umsetzungfehler) auf Seiten aller Projektbeteiligten erkannt und ausgeräumt werden.

Der erste, schwarz-weiße Blick in die Zukunft lässt einen deutich sorgenfreier dem ersten Designentwurf entgegenfiebern, ohne jedoch die positive Spannung beim Warten auf die "schicke" Version zu verringern. Allein das schont die Nerven des Kunden erheblich... ;-)

Auch von mir die besten Wünschen für die Adventszeit
Claus Arndt

Permanenter Link

nik
am 01.12.2011 - 16:38

Ehrlich gesagt gefällt mir das Wireframe besser als das fertige Produkt :)

Permanenter Link

Christian
am 03.12.2011 - 21:03

Vielen Dank für das erste Türchen.

Ein großer Vorteil von Wireframes ist aus meiner Sicht, dass der Kunde sich nicht in graphischen Details verrennt, sondern ganz auf das Layout konzentriert.

Vielen dank für die Liste mit den Tools. Bisher arbeite ich mit Cacoo, werde aber auf jende Fall mal Pidoco testen.

Permanenter Link

Björn
am 05.12.2011 - 15:43

Ein großer Vorteil von Wireframes ist aus meiner Sicht, dass der Kunde sich nicht in graphischen Details verrennt, sondern ganz auf das Layout konzentriert.

Stimmt. Wobei man da aufpassen muss. Es ist ein schmaler Grad zwischen Wireframes und Layout. Es muss immer deutlich sein, dass nicht über Layout gesprochen wird. Je nach Zielgruppe (des Meetings) sollte dann der Detailgrad runtergeschraubt werden. Bei Axure kann man z.B. den Grad der "Sketchyness" einstellen.

Permanenter Link

Die Kommentare sind geschlossen.