Niehaus-Wireframe-Technik: Die neue Methoden zur Konversionsoptimierung

Bereits auf der Conversion Conference 2010   im kalifornischen San José stellte die Designerin Sandra Niehaus im Mai 2010 ein spannendes Wireframe-Konzept vor, das inzwischen verschiedene Konversionsoptimierer im Zuge von Relaunches oder der Neukonzeption von Shops bereits erfolgreich einsetzen. Zu Ehren der Erfinderin wird die Art des Wireframings von vielen Konversions-Spezialisten auch Niehaus-Wireframe genannt.

Die Designerin zeigte damals auf, dass normale Wireframes zum Zwecke der Orientierung der Ordnungssysteme einer Website, zur Vermittlung der Basisprinzipien und Strukturierung des Contents nützlich sind, aber in dieser Form dennoch gewaltige Schwachstellen beinhalten. Die Schwachstellen heißen: Fokus, Relevanz und Konversion. Sie regte an, dass das Wireframe über das strukturelle Maß hinaus auch eine konversionsstrategische Komponente bekommt.

Das Wireframe als konversionsstrategische Komponente

Aufzuteilen ist diese strategische Komponente in:

• Zielgruppenrelevanz und Pareto-Prinzip   (80:20-Regel)
  
• Objektrelevanz (Wahrnehmungspsychologie)
  
• Inhaltliche und strukturelle Ordnung
  

Speziell im Punkt Objektrelevanz schlug sie vor, alle Elemente nach Wichtigkeit in Graustufen einzuteilen und jedem Seiten-Element dann eine dieser Graustufen zuzuweisen. Das wichtigste Element bekäme dann den stärksten Grauwert und alle anderen entsprechend geringere Werte. Heraus käme dann - so Niehaus - ein Wireframe bestehend aus unterschiedlich grauen Flächen, die man dann gemäß ihrer Relevanz bereits im Vorfeld eines Relaunches oder einer Neukonzeption eines Shops besser strukturieren könnte.

Das Besondere am Niehaus-Wireframe zeigt sich dann, wenn man sich bestimmte Regeln setzt, wie z.B. die Begrenzung des Einsatzes von Call-to-Actions auf maximal zwei CTA's. In diesem Moment wird man sowohl als Gestalter und Konzeptioner, aber vor allem auch als Stratege gezwungen, über Zielgruppen-Clusterung, Darstellungsqualität und Produktvielfalt stärker nachzudenken, man wird gezwungen relevant zu sein.

Die kleine Schwäche der Niehaus-Wireframes - nämlich sich recht unspezifisch mit dem zukünftigen Content zu beschäftigen - zwingt allerdings auch in der Folge, mit einem weiteren Wireframing die Lücken zu füllen. Und logischerweise macht es vor der Generierung der Niehaus-Wireframes Sinn, noch einmal die Zielgruppen intensiver zu beleuchten, denn die Relevanz ist grundsätzlich von Kundenerwartungen und Fokussierungen abhängig.

In der Folge wurde dann auch der Vorschlag gemacht, das Wireframing prinzipiell dreistufig anzulegen:

1. Stufe: Erstellung eines Zielgruppen-Pareto-Wireframes
   
2. Stufe: Erstellung eines Relevanz-Niehaus-Wireframes
   
3. Stufe: Übertragung der Wireframes in ein finales Storyboard-Wireframe
   

1. Stufe: Pareto-Wireframe anlegen

Das Pareto-Prinzip (oder auch 80-zu-20 Regel) beschreibt das Prinzip, dass der Einsatz von 20 Prozent aller Lösungen ausreicht, um 80 Prozent der Ergebnisse zu erreichen. Was bedeutet das für die Wireframes?

Basis der Idee sind die Verwendung bestehender Zielgruppendefinitionen, die aus vorangegangenen Untersuchungen, aus bekannten Schemata wie zum Beispiel Sinus-Milieus, aus Prognosen oder gar explorativen Typologien eingesetzt werden, um in kleineren Workshop-Einheiten Tools, Bedienhilfen, Navi-Elemente, Basis-Elemente und den gesamten Content-Bedarf für jedes Systemtemplate grob zu formulieren und zu beschreiben.

Ohne jegliche Gewichtung könnten das Hunderte von Elementen oder Objekten werden, d.h. sie bedürfen einer späteren Priorisierung nach dem Pareto-Prinzip. Um zu einer Priorisierung zu gelangen, werden in einem nächsten Schritt den unterschiedlichen, skizzierten Zielgruppen Wertschöpfungspotenziale zugewiesen (Grafik 2) und in einem dritten Schritt werden allen Personas die entsprechenden Relevanzwerte (Grafik 3) zugeordnet.

Ein Beispiel: 100 Prozent der Fläche einer Startseite können nicht mit Tools, Objekten und Elementen zugekleistert werden, oder wenn man 100 beliebige Elemente hätte, dürfte man sie nicht mit genau einem Prozent Flächenbedarf auf die Seite bringen. Es braucht also zunächst die Einführung einer Art Fünf-Prozent-Hürde für den Einzug ins Tool-Parlament.

Wenn unterschiedlichen Personas unterschiedliche Relevanzwerte zugeordnet werden können, so vererben sie diese Relevanz auch auf die unterschiedlichen Tools. Auch dadurch ändert sich ihre Gewichtung. Es gibt natürlich Pflichtelemente, die unabhängig vom Relevanzwert eingesetzt werden müssen. Dazu gehört zum Beispiel der Impressum-Link oder auch bestimmte SEO-Elemente, ohne deren Existenz eine Seite nicht funktionieren könnte. SEO-Tools sind aber nicht zwangsläufig relevant für den Nutzer.

Im Ergebnis fallen dann bereits an dieser Stelle schon alle unnützen und für die Kern-Zielgruppen nicht relevanten Tools weg. Das kann aber auch bedeuten, dass das bislang vom Marketing so heiß geliebte Social Media Plugin oder der Werbebanner ins Nirwana verbannt werden, wenn sich möglicherweise herausstellt, dass nur ein geringer Teil der Zielgruppen diese Tools benötigt. Auf dem großen Marktplatz der Aufmerksamkeiten ist nun mal nicht genug Raum für jedes Experiment.

2. Stufe: Niehaus-Wireframes anlegen

Die Niehaus-Wireframes sollen zunächst den Blick der Konzeptioner auf die wesentlichen Elemente lenken. Ohne dieses geniale System werden unwichtige Elemente schnell zu wichtigen mutieren, Dinge die Above-the-Fold nichts zu suchen haben, sprießen wie Pilze aus dem Boden. Wie sagt es Tim Ash so schön: "Your website is a growing field and sooner or later it's overgrown!".

In den Niehaus-Wireframes setzt man idealerweise vier Graustufen ein. Dabei steht jede Graustufe für einen unterschiedlichen Aufmerksamkeitswert, der im Besucher ausgelöst wird:

• Hellgrau: Alle Must-have-Elemente wie Logo, Meta-Navigation, wichtiger Content aber zum Teil auch Hauptnavigation.
  
• Mittelgrau: Tertiär-Fokus. Dazu können Hauptnavigation, Kontaktebene, Eingabefelder, Trust-Signals, etc. gehören.
  
• Dunkelgrau: Diese Flächen stellen den Sekundär-Fokus dar. Dieser Grauwert wird an alle Elemente vergeben, die entweder zum Primär-Fokus führen sollen oder aber einen anderen wichtigen Beitrag liefern, der diesen Aufmerksamkeitswert berechtigt.
  
• Schwarz: Primär-Fokus. Die direkte Call-to-Action-Button. (CTA)

Mit jeder Graustufen-Tiefe sollte die Menge oder Größe beziehungsweise der Flächenbedarf der Elemente abnehmen, zum Beispiel so:

• 60 Prozent (Hellgrau)
  
• 30 Prozent (Mittelgrau)
  
• 8 Prozent (Dunkelgrau)
  
• 2 Prozent (schwarz)

Aber Achtung! Die Aufteilung hängt ganz von den vorherigen ZG-Analysen und den Seiten-Typen ab. Bei einer Landingpage kann das Verhältnis anders liegen.

Es wird außerdem entschieden, ob ein Element below the fold oder above the fold positioniert wird - also oberhalb oder unterhalb des unteren Browser-Rands.
Das wirklich Spannende an den Niehaus-Wireframes ist, dass sie fast schon eine Eyetracking-Simulation ermöglichen. In Abbildung 4 sieht man, dass bei einem Eyetracking-Test durchaus alle Elemente gemäß ihrer Wichtigkeit fokussiert würden.

3. Stufe: Storyboard-Wireframe anlegen

Das Storyboard-Wireframe ist eigentlich das klassische Wireframe. Es stellt bereits einen detaillierten und sorgfältig ausgeführten Prototypen der eigentlichen Website dar. Hier wird der strategische Part der vorherigen Erkenntnisse mit dem echten Content getestet und mit Details versehen.

Professionell ausgeführt, werden hier noch einmal konzeptionelle Schwächen ausgemerzt:

• Übersetzungprobleme, z.B. die üblicherweise deutlich längeren Wortgebilde der französischen Sprache, können getestet werden. Das gilt natürlich auch für alle Sprachen mit nicht-lateinischen Buchstaben.
  
• Nicht vorhandener oder zu mächtiger Content kann erweitert oder reduziert werden.
  
• Seltene System- oder Nutzer-Dialoge wie z.B. B2B-Partner-Formulare können final durchgearbeitet und optimiert werden.
  

Die Lücke zwischen Zielgruppen-Bedürfnissen und Gewichtungen füllen

Das Wireframe-Konzept füllt die Lücke zwischen Zielgruppen-Bedürfnissen und Gewichtungen, den daraus abzuleitenden Hypothesen und der realen Umsetzung. Speziell die Niehaus-Wireframes helfen, den User-Fokus stets im Auge zu behalten und sich nicht in der Vielfalt von Tools und Möglichkeiten zu verrennen. Das Wireframekonzept ist ideal für Neukonzeption, eigenständige Landinpages und Relaunches.

---

iBusiness-Autor Matthias Henrici lehrt seit sieben Jahren als Dozent für Usability und Motivatorik an deutschen Hochschulen und arbeitet als Senior-Berater bei der Web Arts AG   in Bad Homburg.