< Articles

Conversion, Web Design, Web Usability

The Niehaus Wireframe Technique – Methods to Conversion-Optimize New Projects

When developing website projects there is often a disconnect between the target audience’s needs and priorities, the hypotheses to be deduced from them, actual implementation, and the crucial question of whether it is possible to specifically plan ahead for conversion, or merely improve it later. The Niehaus wireframe concept presented here provides a possible answer to these disparities.

[Note: this is a translated guest post written by Matthias Henrici, a usability expert and senior consultant for Web Arts AG. See the original German-language version here >]

In May, 2010 at the Conversion Conference in San Jose, California, designer Sandra Niehaus (co-author of the book “Web Design for ROI”) presented an exciting wireframe concept that has since been used successfully by various conversion optimization practitioners in the course of website relaunch or design. In honor of the inventor, this type of wireframing has been termed a “Niehaus wireframe” by many CRO specialists.

In her presentation, Niehaus pointed out that although normal wireframes are useful for the purpose of orientating the organization systems of a website and for communicating the basic principles and structure of the content, they nevertheless have tremendous weak points. The weak points are: focus, relevance and conversion optimization. Sandra suggested that wireframes be given a conversion strategy component beyond that of mere structure.

This conversion strategy component can be divided into:

  • Target audience relevance (Pareto principle)
  • Object relevance (perceptual psychology)
  • Organization of content and structure

Specifically regarding object relevance, Niehaus proposed grading page elements in order of importance and then assigning specific shades of gray to each. The most important element would be given the darkest shade of gray and all the others correspondingly lighter shades. According to Niehaus the result would then be a wireframe consisting of various gray areas that could be better structured according to their relevance in the run-up to a website relaunch or design.

The special quality of a Niehaus wireframe becomes particularly apparent if one sets certain rules, such as restricting the use of calls-to-action to a maximum of two. At this moment one is acting not only as a designer and concept creator, but above all as a strategist compelled to think more about target audience clustering, the quality of representation, and product variety; one is forced to be relevant.

A minor weakness of the Niehaus wireframe, namely that it does not really deal specifically with future content, forces you as a result to fill the gaps with additional wireframing. Logically, it makes sense to look more closely at the target audiences before creating the Niehaus wireframe because relevance basically depends on what customers expect and focus on.

As a result the proposal was made to create the wireframing in three stages as a matter of principle:

Übersicht

Stage 1: Create a Pareto wireframe (target audience)

Stage 2: Create a Niehaus wireframe (relevance)

Stage 3: Combine into a final storyboard wireframe

1) Pareto wireframe

The Pareto principle (also known as the 80/20 rule) describes the principle whereby the application of 20% of all possible solutions is sufficient to achieve 80% of the potential.

What does that mean in terms of wireframes? The idea is based on the use of existing target audience definitions, which are taken from prior studies such as Sinus milieus, forecasts, or even exploratory typologies in order to roughly formulate and describe in smaller “working” units the basic elements, tools, user aids, navigation, and content requirements for each system template.

Personas

Figure 1: Exploratory personas

Without any priority weighting, this could become hundreds of elements or objects; they need to be prioritized according to the Pareto principle. In order to achieve prioritization, in the second step the various target audiences are assigned value creation potentials (Figure 2) and in the third step all the personas are allocated the corresponding relevance values (Figure 3).

Wertschoepfung
Figure 2: Value creation


pareto
Figure 3: Pareto wireframe

Here is an example: you should not clutter up 100% of the area of a start page with tools, objects and elements; or, if you have 100 arbitrary elements, they should not each be assigned exactly 1% of the space on the page. It is firstly necessary to introduce a kind of “5% hurdle” to obtain a place in the “tool parliament”.

So, if the various personas are assigned relevance values, they then pass on this relevance to the various tools and thus the prioritization of the tools changes. There are, of course, mandatory elements which must be included irrespective of relevance value, such as the link to the imprint or certain SEO elements, without which the page could not function. SEO tools are not, however, necessarily relevant for the user.

Already at this point, the result removes unnecessary tools that are not relevant for the core target audience. This can mean, for example, that the social media plug-in or ad banner much loved by the Marketing department could be banished if it turns out that only a small percentage of the target audiences actually uses them. In the marketplace of attention, there is not sufficient space to carry out every experiment.

2) Niehaus wireframes

The Niehaus wireframes are initially intended to focus the attention of the designer on the essential elements. Without this ingenious system, unimportant elements quickly mutate into important ones and things that should not be above the fold shoot out of the ground like mushrooms. As Tim Ash so aptly said: “Your website is a growing field, and sooner or later it’s overgrown!”

Ideally, it is good to use four levels of gray in Niehaus wireframes. Each level denotes a different attention value that is “triggered” in the user:

  • Light gray: All must-have elements such as the logo, meta-navigation, possibly some important content and the main navigation
  • Mid-gray: Tertiary focus. These can include main navigation, contact info, input fields, trust signals, etc.
  • Dark gray: These areas represent the secondary focus. This grayscale is assigned to all elements that are either meant to lead to the primary focus or that provide another important contribution justifying this attention value
  • Black: Primary focus. The direct CTA (call-to-action)

Legende
Figure 4: Legend

With each gray level the quantity, size, or space assigned to the elements declines, for example:  60% of the page becomes light gray, 30% becomes mid-gray, 8% dark gray, 2% black. But be careful! This depends entirely on the previous target audience analyses and the page type. In the case of a landing page, for example (see figure 5) the ratio may be different. It must also be decided whether an element should be positioned above or below the fold.

The really exciting thing about the Niehaus wireframe is that it could facilitate an early eye tracking simulation. Figure 4 shows that in an eye-tracking test all the elements are indeed focused on according to their importance.


niehaus_wireframe

Figure 5: Niehaus wireframe, taking a Frontlineshop.de landing page as an example. The product image is assigned a significantly larger secondary focus.

Storyboard wireframe

The storyboard wireframe is actually the “classic” wireframe. It already represents a detailed and carefully executed prototype of the actual website. Here the strategic part of the previous findings is tested with real content and enriched with details.

boxfresh

Figure 6: An example of a classic wireframe. Of course there is an abundance of other possible alternatives here, but we cannot demonstrate them all at this point.

When executed professionally, conceptual weaknesses are again eliminated at this point:

  • Translation issues, for example the typically much longer word structure of the French language can be tested; of course this also applies to all languages with non-Latin letters
  • Content which is non-existent or overpowering can be expanded or reduced
  • Rare system or user dialogs such as B2B partner forms can be worked over and optimized for the last time

boxfreshfinal

Figure 7: Final version

Conclusion: The wireframe concept presented here fills the gap between target audience requirements and prioritization, the hypotheses to be deduced from them, and actual implementation. The Niehaus wireframe helps designers keep track of the user focus and not get carried away by the variety of tools and alternatives. The wireframe concept is ideal for new conceptions, independent landing pages and relaunches.

About the author:

By the early nineties Matthias Henrici (46) was already developing value-creating multimedia projects for German and international companies. For ten years he has taught usability as a lecturer at German universities, and also works as Senior Consultant and Neuromarketing Specialist at Web Arts AG in Bad Homburg. In addition, he is an independent author, for example for the HighText publishing house. His current clients include DKV, Hotel.de, Bertelsmann, Amadeus International, Springer-Verlag, Brita Wasserfilter, Runnerspoint, SAGE and Apetito.

Matthias Henrici is married and has two children.