Wireframeerstellung – Erstellung von nutzergerechten
Funktionslayouts

Was sind Wireframes und wann sollten sie erstellt werden?

Der Begriff Wireframe bezeichnet alternativ zum Ausdruck „mock-up“ einen sehr frühen konzeptuellen Prototyp einer Website oder eines Software-Frontends. Bezogen auf eine Website sind dies zentrale Elemente wie beispielsweise die Navigation, Inhaltsbereiche und Bildflächen, deren Positionierung grob skizziert wird (=Layout).

Die Erstellung von Wireframes eignet sich besonders in der frühen Entwicklungs-/ Konzeptionsphase, da man sehr schnell eine große Anzahl unterschiedlicher Konzepte entwickeln kann, um im Anschluss das beste Konzept auszuwählen – beispielsweise im Rahmen von Fokusgruppen oder Tests von Papier-Prototypen (Paper Prototyping).

Die Entwicklung eines Wireframes benötigt nur den Bruchteil der Zeit im Vergleich zu einem traditionellem 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 Wireframes: Hierbei handelt es sich um schematische Darstellungen einzelner Seitenvorlagen (auf Papier oder z. B. mithilfe von MS Visio oder PowerPoint). Dabei werden lediglich die grundlegenden Elemente der Seite skizziert.
• dynamische Wireframes: Diese bestehen aus mehreren Seiten, die als funktioneller Prototyp interaktiv miteinander verknüpft sind. So ist eine Navigation von einer zur anderen Seite möglich. Dynamische Wireframes werden häufig durch einen beiliegenden Navigationsbaum oder ein Flussdiagramm bzw. Struktogramm ergänzt, welche beide die Struktur abstrahieren und leichter verständlich machen.

Bei der Erstellung von Wireframes reicht es grundsätzlich aus, grafische Komponenten nur sehr rudimentär abzubilden, da es bei einem Wireframe – sei es nun statisch oder dynamisch – in erster Linie um die Konzeption und nicht um das Design („die Schminke“) geht.

Mögliche Fragestellungen:

• Wie kann ich in einer relativ kurzen Zeitspanne mehrere alternative Konzepte erarbeiten und testen?
• Welche alternativen Konzepte sind für meine Website / Anwendung denkbar?
• Wie setze ich die Erkenntnisse über meine Nutzer / Anwender in einem nutzerzentrierten Konzept um?
• Wie gestaltet man die Interaktionssequenzen zentraler Handlungsprozesse (z. B. Suche, Kontaktaufnahme, Bestellung, Newsletter-Abo, Buchung, Einstellen von Inhalten) "logisch" bzw. intuitiv?
• Wie gestalte ich meine Website / Anwendung so, dass sie effizient, effektiv und zufriedenstellend von den Nutzern bedient werden kann?
• Wie entwerfe ich ein Konzept, dass konform ist mit gängigen Usability-Heuristiken und ISO-Richtlinien?
• Welche bestehenden Lösungen und Interaktionsprinzipien können zur Konzeption meiner Website / Anwendung heran gezogen werden?

Und viele andere mehr…

Im Rahmen eines Kick-Offs legen wir gemeinsam mit Ihnen die zentralen Fragestellungen und Ziele zur Konzeption der Funktionslayouts fest.

In welcher Projektphase einsetzbar?

• Konzeption / Entwicklung
  Anhand von Wireframes lassen sich sehr schnell eine große Anzahl von unterschiedlichen Konzepten entwickeln, um sie Anschluss – beispielsweise im Rahmen von Fokusgruppen, iterativen Nutzertests im Lab (Usability-Test im Labor bzw. Rapid Prototyping) oder Tests von Papier-Prototypen (Paper Prototyping) – zu testen.

Wie werden Wireframes erstellt?

Aus Basis vorhandener Nutzerstrukturdaten (soziodemografische Daten - ergänzt um Intentionen, Anforderungen und Erwartungen sowie Web-Analytics/User-Tracking-Daten – falls vorhanden) erstellen unsere Usability-Experten und Interaktionsdesigner alternative Konzepte für Ihre Website bzw. Anwendungen.

Hierbei können Sie zwischen der Erstellung von statischen oder dem Anfertigen von klickbaren, dynamischen Seiten wählen. Hierzu arbeiten wir mit verschiedenen Tools, wie z. B. MS Visio, PowerPoint, Axure RX Pro und Adobe Dreamweaver CS3 – abhängig von Ihren Anforderungen und Wünschen.

Die Entwicklung der benutzerfreundlichen Layouts basiert dabei auf der Erfahrung unserer Experten im Bereich Usability, auf Basis bestehender Heuristiken und Guidelines sowie der Erkenntnisse aus zahlreichen Nutzertests.

Der entscheidende Faktor bei der Konzeption ist jedoch, dass wir den Fokus auf die Anforderungen und Erwartungen der Nutzer legen, die im Vorfeld durch u. a. eine Onsite-Befragung, Panel-Befragung, einen Usability-Test im Labor oder einer Fokusgruppe erhoben wurden und z. B. als Personas, Anforderungskataloge und Use Cases vorliegen.

Unser Anspruch ist es, auf Basis dieser Daten alternative Konzepte zu erarbeiten, die allesamt benutzerfreundlich sind und die Zielsetzungen der Nutzer berücksichtigen.

Stärken der Methode:

• Nutzerzentriertes Design: Aufgrund der sorgfältigen Berücksichtigung erhobener Nutzerdaten wird gewährleistet, dass die entwickelten Konzepte den Anforderungen und Erwartungen sowie Zielsetzungen der Nutzer entsprechen und auf Ihre Zielgruppe – Status quo oder angestrebte Zielgruppe abgestimmt sind.
• Berücksichtigung von Heuristiken und Richtlinien: Neben der Beachtung der Nutzerdaten bringen unsere Usability-Experten und Interaktions-Designer ihr Experten- und Branchenwissen in Bezug auf Usability-Guidelines und Best-Practices (Wettbewerbsanalyse) ein.
• Teure Fehlentwicklungen vermeiden: Durch die recht kurze Entwicklungszeit von Wireframes lassen sich mehrere konzeptionelle Varianten erstellen und miteinander vergleichen bzw. gegeneinander testen. Erst wenn das Konzept finalisiert bzw. ausgiebig getestet wurde, wird mit dem detaillierten Interface-Design begonnen.
• Bessere Kommunikation im Entwicklerteam: Durch die kurzen Entwicklungszyklen kann schneller und einfacher auf Ihre Bedürfnisse oder Wünsche reagiert werden. Es ist durchaus möglich, dass sich während des Projektes Anforderungen ändern. Zeitraubende Fehlentwicklungen können so reduziert werden.
• Zeitersparnis: Die Entwicklung eines Wireframes benötigt nur den Bruchteil der Zeit im Vergleich zu einem traditionellem Layout / Design. Es ist dadurch möglich, mehrere Verfeinerungsschleifen in derselben Zeit durchzuführen oder mehrere Alternativen zu erstellen.
  Die Umsetzung eines fertigen Wireframes zu einem Layout benötigt viel weniger Zeit, da die Positionierung, Größe und Form vieler Elemente schon bestimmt wurde. Auch hier wird die Effektivität erhöht und die Fehlplanung vermindert.

Wer sollte Wireframes erstellen?

Die bloße Erstellung der Wireframes erfolgt ausschließlich ohne direkte Nutzerbeteiligung - jedoch finden die bereits erhobenen bzw. vorliegenden Nutzerdaten eine sorgfältige Berücksichtigung. Eine mögliche anschließende Evaluation durch Vertreter Ihrer Zielgruppe(n) schließt sich dadurch selbstverständlich nicht aus. Je nach Umfang der zu erstellenden Konzepte für Ihre Website / Anwendung wirken mehrere Usability-Experten bzw. Interaktions-Designer mit langjähriger Erfahrung in Ihrer Branche an der Konzeption mit.

Wie lange dauert die Erstellung alternativer Wireframes?

Der Aufwand richtet sich ausschließlich nach dem Umfang der zu konzipierenden Website bzw. Anwendung und der erwünschten Anzahl an Screens für zentrale Seiten bzw. Use Cases. Wireframes für weniger komplexe Websites oder Anwendungen können ab ca. 1 bis 1,5 Wochen geliefert werden.

Welchen Input müssen Sie leisten?

Optimalerweise existieren bereits umfangreiche Daten über Ihre Zielgrupp(e), z. B. in Form von Personas, einem Anforderungskatalog, Web-Analytics-Daten und/ oder Use Cases, anhand dessen wir die Wireframes konzipieren können.

Falls Bedarf besteht, unterstützen wir Sie gerne jedoch auch bereits bei der Erhebung von Endnutzerdaten. Hierbei greifen wir auf unsere umfangreiche Projekterfahrung im Bereich Anforderungs- und Nutzerstrukturanalyse zurück.

Es ist zudem möglich erste Ideen im Rahmen eines gemeinsamen Konzept- bzw. Innovationsworkshops zu erarbeiten.

Was erhalten Sie von uns?

Sie erhalten von uns je nach Wunsch die statischen bzw. dynamischen Wireframes inkl. einer allgemein verständlichen Dokumentation einzelner Elemente bzw. Funktionsbereiche.

Auf Wunsch präsentieren wir die durch uns erstellten Konzepte im Rahmen eines moderierten Workshops.

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