Die Niehaus Wireframe-Technik – Methoden zur Konversionsoptimierung von Neuprojekten

Bereits auf der ConversionConference im kalifornischen San Jose stellte die Designerin Sandra Niehaus (Co-Autorin des Buches: "WebDesign for ROI") im Mai 2010 ein spannendes Wireframe-Konzept vor, dass 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 CR-Spezialisten auch „Niehaus-Wireframe“ genannt.


Sandra-Niehaus
Sandra Niehaus

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 heissen: Fokus, Relevanz und Konversion.
Sie regte an, dass das Wireframe über das strukturelle Maß hinaus auch eine konversionsstrategische Komponente bekommt.

Aufzuteilen ist diese strategische Komponente in:

  • Zielgruppenrelevanz und Pareto-Prinzip
  • Objektrelevanz (Wahrnehmungspsychologie)
  • Inhaltliche- und strukturelle Ordnung

Speziell im Punkt Objektrelvanz 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 max. 2 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 Erstellung 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:

Übersicht

  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) Pareto-Wireframe
Das Pareto-Prinzip (oder auch 80-zu-20 Regel) beschreibt das Prinzip, dass der Einsatz von 20% aller möglichen Lösungen ausreicht um 80% der Möglichkeiten 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 z.B. Sinus-Milieus, aus Prognosen oder gar explorativen Typologien eingesetzt werden um in kleineren Workshop-Einheiten Tools, Bedienhilfen, Navi-Elementen, Basis-Elemente und den gesamten Content-Bedarf für jedes Systemtemplate grob zu formulieren und zu beschreiben.


Personas
Grafik 1 – Explorative Personas


Ohne jegliche Gewichtung könnten das hunderte von Elementen oder Objekte werden, d.h. sie bedürfen einer späteren Priorisierung nach dem Pareto-Prinzip. Um zu einer Prioriserung 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.


WertschoepfungGrafik 2 – Wertschöpfung


pareto
Grafik 3 – Pareto-Wireframe



Ein Beispiel: 100% der Fläche einer Startseite kann nicht mit Tools, Objekten und Elementen zugekleistert werden, oder wenn man 100 beliebige Elemente hätte, dürfte man sie nicht mit genau 1% Flächenbedarf auf die Seite gebracht werden. Es braucht also zunächst die Einführung einer Art „5%-Hürde“ für den Einzug ins „Tool-Parlament“ und wenn unterschiedlichen Personas unterschiedliche Relevanzwerte zugeordnet werden können, so vererben sie diese Relevanz auch auf die unterschiedlichen Tools, auch dadurch ändert sich ihren Gewichtung. Es gibt natürlich “Pflichtelemente”, die unabhängig vom Relevanzwert eingesetzt werdeen müssen, dazu gehört z.B. 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 Nirvana 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) Niehaus-Wireframes
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, spriessen 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 User „ausgelöst“ wird:

  • Hellgrau: Alle must-have Elemente wie Logo, Meta-Navigation, wichtiger Content aber z.T. 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 alle Elementen 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 CTA

Legende
Grafik 4 – Legende


Mit jeder Graustufen-Tiefe sollte die Menge oder Größe, bzw. Flächenbedarf der „Elemente abnehmen, z.B. so:
60% (Hellgrau) , 30% (Mittelgrau), 8% (Dunkelgrau), 2% (schwarz). Aber Achtung! Das hängt ganz von den vorherigen ZG-Analysen und den Seiten-Typen ab. Bei einer Landingpage (siehe Grafik 5) kann das Verhältnis anders liegen.

Es wird ausserdem entschieden ob ein Element “below the fold” oder “above the fold” positioniert wird.
Das wirklich spannende an den Niehaus-Wireframes ist, dass es fast schon eine Eyetracking-Simulation ermöglicht. In Abbildung 4 sieht man, dass bei einem Eytracking-test durchaus alle Elemente gemäss ihrer Wichtigkeit fokussiert würden.
niehaus_wireframeGrafik 5 – Niehaus-Wireframe am Beispiel einer Landingpage von Frontlineshop.de. Dem Produkt-Bild wird hier ein deutlich größerer Sekundär-Fokus zugewiesen.





3) Storyboard-Wireframe
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 verprobt und mit Details versehen.

boxfresh Grafik 6 – klassisches Wireframe als Beispiel. Es gibt hier natürlich eine Fülle von weiteren möglichen Varianten, die wir an dieser Stelle nicht alle aufzeigen können

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 verprobt 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 User-Dialoge wie z.B. B2B Partner-Formulare können final durchgearbeitet und optimiert werden

boxfreshfinalGrafik 7 – finale Fassung Frontlineshop-Landingapges


Fazit: Das vorgestellte 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.

Der Blog-Beitrag findet sich auch auf dem Blog von
Closed-Loop-Marketing.