During the web site developing process one of the most important points is to avoid misunderstanding between audience’s priorities and needs and the developer hypotheses about them. Even more important is to provide the ability for improvement user experience during website creation process. Niehaus method was proposed a few years ago for the solving these tasks.
In 2010 Sandra Niehaus at the Conversion Conference in San Jose described main ideas of the concept, which after that was widely used in the different conversion processes during website design or relaunch. In honor of that, it was named after it creator and now is well now in the designer circles as “Niehaus wireframe method”
Classical types of the wireframes are widely used for the communicating basic design principles, content structure and website system organization. These types don’t say anything about conversion optimization, relevance and focus. Sandra Niehaus had proposed to make the wireframe main aim the optimization of the conversion strategy.
This conversion strategy can be divided into:
- Target audience relevance (based on Pareto principle)
- Object relevance (perceptual psychological concepts)
- Structure and content organization
Providing the ideas of the relevance representation in wireframe Niehaus suggested to give all the elements different shades of gray. The most important element of the web page must be given the darkest shade of gray. Others element must be filled with the lighter ones accordingly to their importance. Using this method obtained wireframe would consist of different gray elements and would be easier for using in structure optimization during design or relaunch of the web site.
Value of the Niehaus wireframe using is felt more straightly if someone sets the rules for web pages. For example, only two calls-to-action per page. In this case, the wireframe creator is not only working on the concept or on design, but he also must think a lot about the target audience, product variety and representation quality. This technique is forcing to be as relevant as only possible.
In spite of all that the Niehaus technique still has weak points. For example, in this method we don’t work with future content. This gap should be filled by additional wireframing. Also, it means that before using the Niehaus technique one need study and understand the target audience as the relevance is based on the knowing customer expectation.
Basing on all these wireframe process could be divided to three phases:
Phase 1: Pareto wireframe (working with the target audience)
Phase 2: Niehaus wireframe (working with relevance)
Phase 3: Final storyboard wireframe
1) Wire frame based on Pareto principle
This principle is also known as 80/20 rule and it is saying that using 20% of all possible ideas are enough to obtain 80% of the potential.
How could it be used in wireframe creation area? First of all we need to define target audience. This could be done based on the previous studies such as exploratory typologies, forecast or Sinus milieus. This information should be used for describing smaller units of the web site like navigation, tools, user aids, basic elements and content requirements.
Personas exploration
Next we need to prioritize all these elements by using Pareto principle. In order to obtain prioritization criteria, various audiences are given value creation potentials. In the next step using that data all personas are assigned some relevance values.
Value creation
Pareto wireframe
For example, you shouldn’t fill 100 % of the start page with elements, objects and tools. Another one example, if you have 100 elements, they shouldn’t be assigned exactly 1% of the page space. In the last case some “5% barrier” must be for receiving a place in “tool senate”.
Prioritization of tools is done in next way: various types of the personas have different relevance value that is transferred to appropriative tools. In spite of this process, it is important to remember to include must-be elements in the web page (link to the imprint, SEO element etc.). These elements are important for proper page function.
At this point, we already removed elements that were not relevant to the core of the target audience. For example, some ad banner or social media plug-in could be turn off as they were preferred only by little part of the core audience. In the web page you haven’t enough space to include all the elements that any user wants to see there.
2) Wireframes created in Nieahaus technique
The main aim in this technique is to focus designer attention on the essential elements. If someone does not use prioritization in the wireframe creation process, not important things mutate and could even be located above the fold, where they mustn't be.
Best of all is to use four gray shades in the Niehaus wireframe technique. Any of these shades represent the level of the user attention that must be catch by this area.
Level 1. Light gray. Mark by it all must-have elements: meta-navigation, logo, main navigation etc.
Level 2. Mid-gray. These areas obtain tertiary focus. For contact information, trust signals, some input fields.
Level 3. Dark gray. Secondary focus. Include all elements that lead to the call-to-action or any other that have important motivation influence.
Level 4. Black. Primary focus. Call-to-action area.
Wireframe legend
The darker one is element the less area of the web page it should cover. For example, 55% of the page contains light gray elements, 25% mid-gray one, 15 % dark gray and 5% black. But this is not must-use rule! This distribution must be built on the previous target audience study, and it is influenced by the type of the web page that we have created. Below you could find the example of the wireframe for a landing page done in the Niehaus technique. On that example ratio of the various areas is different. One another important point is the position of the element. Should it be below or above the fold?
There is one more exciting thing in using Niehaus technique. Wireframe created this way helps to provide early eye tracking simulation.
Niehaus wireframe, that is done for existing online shop landing page. In this case, product image cover most of the area.
You could immediately use this wireframe. It is available in Mockup Builder Gallery for FREE!
3) Final storyboard wireframe
This wireframe type is one of the most widely used and it is known as “classical” one. Essentially it is well detailed prototype of the future web site. All strategic ideas that were found in the previous processes are now filled with content and details.
Classical wireframe. Here is only one of the possible wireframes that could be done using ideas that was found out in the previous parts.
Classical wireframe. Here is only one of the possible wireframes that could be done using ideas that was found out in the previous parts.
If this phase is done professional, a few weak points are eliminated on this stage. For example:
- Content that is overpowering or non-existent can be reduced or expanded
- Translation problem could be tested. Typically content in languages with non-Latin letters or texts in German have longer word structure.
- User dialog and other systems that are used rarely could be worked over and tested.
As we see Niehaus technique helps to fill the gap between target audience needs, hypothesis about prioritization and implementation them on the practice. It also helps designers to keep all this in focus and not to be included in variety of different tools and alternatives. This concept is good to use during landing page creation, discussing new concepts and relaunching web sites.
Create your wireframe right NOW!