Wireframeerstellung

Wenn wir von Wireframes sprechen, dann meinen wir eine reduzierten Darstellung einer Website oder anderen interaktiven Anwendung. Meist in Zusammenhang mit einer Neukonzeption oder Überarbeitung wird diese Form eingesetzt, um schnell und günstig mehrere Varianten zu erstellen. Diese unterschiedlichen Konzepte werden dann herangezogen, um erste Entscheidungen zu treffen, u.a. auch unter Einbeziehung der späteren Nutzer/Kunden.

Wichtige Elemente der Website oder interaktiven Anwendung sind bereits enthalten und ihre Position ist festgelegt, jedoch ist das spätere Design hier noch völlig ausgeklammert. Das Gesamtlayout der Seite steht im Vordergrund. Auch lassen sich erste Klickwege, interaktive Strecken erstellen, um diese gemeinsam mit dem Nutzer zu reflektieren auf ihre Logik und Verständlichkeit.

Beispiel: Reduzierte Funktionslayouts einer Einstiegsseite für Endress+Hauser, Positionen von Logo, Navigation und Bildelementen sind erkennbar. Links entsteht eine Aufteilung der Seite in verschiedene Content-Bereich (was soll auf dieser Seite zu sehen sein), rechts wird bereits mit Fülltext sowie Überschriften und Links gearbeitet, um ein Gefühl für das Textvolumen zu bekommen bzw. das Bild-Text-Verhältnis.

Mit wenig Aufwand und Entwicklungskosten lassen diese reduzierten Wireframes bereits Feedbackschleifen mit Nutzern zu. Idealerweise sind zu diesem Zeitpunkt die korrekten Texte eingebunden und können auf ihre Verständlichkeit und Abläufe auf ihre Logik hin überprüft werden. Diese Vorgehensweise benötigt nur den Bruchteil der Zeit im Vergleich zu einem finalen Layout/Design. Es ist dadurch möglich, mehrere Verfeinerungsschleifen in derselben Zeit durchzuführen oder mehrere konzeptionell unterschiedliche Varianten durchzuplanen.

Grundsätzlich gilt es dabei zwei Arten von Wireframes zu unterscheiden:

  • statische vs. dynamisch Wireframes: Entweder werden nur einzelne Seiten umgesetzt und dort die grundlegenden Elemente der Seite skizziert, oder diese werden interaktiv miteinander verknüpft, so dass Prozesse durchgespielt werden können.
  • Low vs. High Fidelity Wireframes: Der Ausarbeitungsgrad kann je nach Zeitpunkt oder Bedarf stark variieren – von der reinen Anordnung von Kästchen, die die Inhaltsbereiche symbolisieren bis hin zu sehr detailreichen Layouts, denen lediglich noch das spätere Design fehlt.

Beispiel: Detailreiche Wireframes für eine Trefferliste bei der Suche nach einem Buch und ein Formular zur Erfassung von Fahrzeugdaten. Die spätere Seite ist hier schon sehr gut vorstellbar. Mit dieser Form bietet sich an, einen ersten Usability-Test mit Nutzern durchzuführen, um wertvollen Feedback schon in dieser Phase einzuholen.

Im Rahmen eines Kick-Offs nehmen wir Ihre Anforderungen auf sowie die bisherigen internen Überlegungen. Dann legen wir gemeinsam mit Ihnen die zentralen Fragestellungen für die Konzeption der Funktionslayouts fest und entscheiden, welche Vorgehensweise effizient und zielführend ist.

Die Erstellung der Wireframes übernehmen erfahrene Consultants, die mit Ihnen in mindestens 2 Iterationsschleifen die Ausarbeitung übernehmen – so haben Sie schnell die ersten Entwürfe in der Hand z.B. auch für die Kommunikation bei Ihnen intern im Team.

Ihr Nutzen:

Wireframes in einem frühen Entwicklungsstadium sind eine tolle Möglichkeit, um günstig mehrere Varianten zu erstellen und einem Realitätscheck zu unterziehen – bestenfalls unter Einbeziehung der zukünftigen Nutzer. So vermeiden Sie teure Fehlentwicklungen und bewegen sich step-by-step in Richtung eines benutzerfreundlichen neuen Konzeptes für Ihre Anwendung.

Wir berücksichtigen selbstverständlich Heuristiken und Richtlinien der Usability und User Experience. Unsere Experten bringen ihr Fachwissen aus verschiedenen Branchen und Projekten ein.

Fallstudie Wireframe-Erstellung

Kundenstimme

„Der internationale Relaunch war ein großes Stück Arbeit für uns! Gerade am Anfang hat es uns sehr geholfen, durch einfache Wireframes wichtige Entscheidungen zu treffen – auch im höheren Management! eResult hat uns in dem gesamten Prozess begleitet, so dass wir gemeinsam neue Stufen der Verfeinerung vorgenommen haben – Mitarbeiter von uns gemeinsam mit den Konzeptions-Experten. Unsere Kunden haben wir punktuell mit ins Boot geholt und Entwürfe in Fokusgruppen diskutiert. Mit dem finalen Ergebnis sind wir sehr zufrieden und wissen nun, dass diese systematische Vorgehensweise richtig war!“

Eugen Chiorean

Endress+Hauser

Ausgewählte Referenzen - Wireframerstellung

Haben Sie noch weitere Fragen? Dann sprechen Sie uns an! Wir beraten Sie gern.

Anja Weitemeyer
+49 40 36166-7982