Niehaus Wireframes and the Art of User Interface Design

This article is based on Matthias Henrici's blog post on the subject of Niehaus Wireframes

Wireframes, in essence, haven't changed much aesthetically since the days of paper prototyping in the mid 80s. Naturally the user interface designs (User Interface Design, Interface Design) of software and websites have evolved over time but wireframes thereof have essentially maintained their easily reproducible blueprint like nature. Wireframes have always, after all, been visual guides used to depict layout, navigation, and other user interface design elements. The major innovations, in the context of wireframe creation, have tended to reflect the way computers and the internet have transformed the way we work (and play) as a species.

Where the main wireframing tools were paper and pen, hence the term paper prototyping, wireframing software allowed user interface designers to create UI designs on their computer. By going digital certain wireframe software enabled true GUI prototyping functionality that allowed UI designers to create interactive clickable wireframes that could be used as user experience prototypes of a website or application. Online wireframe tools would even take this a step further by working through browsers for even further convenience and ease of use. In the end despite all the innovations in wireframe software the major decision left to user interface designers was whether to have their wireframes in a higher or lower fidelity.

In an effort to imbue wireframes with a higher return on investment, Sandra Niehaus presented a new wireframe concept that has become known as the Niehaus wireframe technique. According to her, Niehaus wireframes address the three fundamental weaknesses of wireframes: focus, relevance, and conversion optimization. Niehaus wireframes have a conversion strategy built into them that goes beyond mere structure. To achieve this the creation of Niehaus wireframes (Niehaus wireframe, Wireframe) is divided into the following three stages:

Stage 1: Pareto Wireframe

A guiding principle when creating Niehaus wireframes is the 80/20 principle (also known as the Pareto principle) whereby applying just 20% of all possible solutions is enough to achieve 80% of the conversion potential of a user interface design. At this stage of wireframing it is helpful to create target audience profiles in order to determine what needs to be prioritized in the user interface design. These profiles would then be used to create a Pareto wireframe. This is a special take on the wireframe whereby the various parts of a user interface design are assigned value creation scores that determine relevant UI design elements to focus on.

Stage 2: Niehaus Wireframe

This is the stage where Niehaus wireframes earn their bread and butter. Niehaus wireframes focus the spotlight on essential and relevant elements in a user interface design. With standard wireframes everything tends to be on equal footing. Worse still, the really important elements might even appear less prominently, such as a relatively small button in a full page. In order to create distinctions Niehaus wireframes use four levels (usually) of gray to denote the value of an element in a user interface design. The darker the color the more important an element is. Light gray would be used for must-have elements such as main navigation, site ID/ logo etc. Mid-gray would denote tertiary focus and dark gray would be for secondary focus. Elements with a secondary focus should either lead to the primary focus or in the very least provide a justifiable contribution. Black would be used for primary focus and a direct Call to Action. With each increasing level the amount of elements declines to leave the tip of the pyramid as the primary focus. A typical example would be 60% of elements being light gray, 30% mid-gray, 8% dark gray, and 2% black. These figures are not absolutes and they depend on variables such as the type of page, target audience, and the context of the website.

Stage 3: Storyboard Wireframe

This stage of the creation of Niehaus wireframes is the synthesis of the first two stages into the more standard wireframes. After the conversion strategy has been set a user interface design needs to be tested for usability. The storyboard wireframes, in this case, feature real content enriched with details to get a better grasp of whether the conversion strategy is well implemented. With these high fidelity wireframes conceptual weaknesses are eradicated in a last round of user interface design.

By following these steps user interface designers are forced into optimizing their UI designs for conversion. Essentially the best thing about Niehaus wireframes is the fact that they allow you to incorporate a conversion strategy into the wireframing process. Also the subtlety of color coding UI design elements streamlines communication and collaboration.

=================

About The Author:

=================


Pidoco.com – Interface Design, Niehaus Wireframe, Wireframe, Wireframes, Wireframe Software, Interface Design Software, User Interface Design, Online Wireframe Tool, Wireframe Tool, Interface Prototyping, Clickable Wireframes, Usability Testing and Digital Paper Prototyping. User centered design for improved UI Design.