The value in discovering defects as early as possible in any software development process is difficult to overstate. This is especially true when applied to the user experience of a web site or end-user application. Too often, an app’s UX carries flaws from a design that gelled too early and which became difficult to modify as the code stabilized. Applying the best practices of wireframe prototyping can avoid the high cost of removing functional and UI defects in the latest stages of development or after deployment.
It costs far less, for example, to verify the usability of a new home using CAD and VR walk-throughs than having to apply saws and sledge hammers to correct issues during the actual construction. Wireframe testing essentially supplies such walk-throughs for software. They provide a tangible point of contact with a site or app’s design that hundreds of pages of text-only requirements and design documents have difficulty imparting.
The Elements of a Wireframe
Wireframes run the gamut from simple block diagrams to paper mockups to mostly functional, live UIs. Each of these approaches have their pros and cons and are mixed to suit the purpose at hand. Each method shares similar characteristics to facilitate design defect discovery:
- The visual arrangement of the page or interface
- The workflow of navigating the interface for various tasks
- Users’ interpretations, expectations and how they actually get things done on the site or app.
In order to obtain the greatest value from user tests performed on wireframes, it is typical to minimize certain aspects such as colour or fancy, dynamic graphics that could be distracting.
Wireframe Value throughout the Development Lifecycle
Wireframes are most often used at the beginning of a new software project even before requirements reach a steady state. Visual mockups based on a detailed reproduction of the requirements as they are being developed often reveal gaps, such as missing buttons, fields or functions. These also turn up awkward UI flows that have unnecessary steps or lead users into procedural dead-ends.
Several iterations of requirements editing and mockup revisions can shake out bugs before the first line of code is written. At this point, a wireframe may be complete enough that it continues providing value as a validation reference during subsequent code development. A wireframe also provides an excellent basis from which the testing team can develop their test plans.
Wireframe development may continue in parallel through updates corresponding to any additional design changes, new functionality or bug fixes. Since wireframe prototypes are specifically designed for efficient UX testing, changing them to match the state of the app/site under development incurs far less overhead than does changing the code itself.
Naturally, the implementation and upkeep of a wireframe from the requirements stage to post-production allows for real UX testing to proceed early and often. This aspect is especially important in environments practicing agile methodologies and continuous delivery processes. They are often the best representation for obtaining client feedback as well, since they are highly portable, easily shareable and lack the runtime overhead and distractions of partially implemented code.
Tips for Getting the Most Value from Wireframe UX Testing
When used internally to shake out design and requirements pre-coding, the design and implementation of a wireframe is less critical than when it is used in sessions with representative end users. However, since the latter usage of a well-maintained wireframe is one of its primary values, it pays to apply best practices from the beginning of wireframe development:
- Do not let the complexity of a prototyping tool impede delivery of early tests. Even Visio block diagrams or paper cutout representations provide significant value in providing visual representations of functional and UI design.
- Balance the fidelity of the wireframe to the actual design or code against the effort to produce the prototype and how important it is to simulate detailed functionality or provide UI guidance via dynamic graphics and colour.
- Develop a written guide to the discussion you will have with the test subjects. The guide should include an explanation of what a prototype is, its limitations and how they work before actual tests begin. You should consider running through a short example of an app or site mockup before using the real one under test.
- Encourage test subjects to voice the actions they are performing, reactions to the UI or any impressions they have as they perform testing tasks.
- If only one person is conducting the UX test, it is highly recommended to video tape the test in order to relieve the facilitator from the distraction of taking notes.
Wireframe prototype testing is a low-overhead, effective alternative to text-only design and requirements functional verification. This technique is equally beneficial when applied to the UX testing of software applications or web sites and as a tool for gaining client feedback. Developing a gradually increasing alignment to the interface and functional detail of the actual site or code enables the wireframe to deliver value during the entire software lifecycle.