Wireframes are usually created to understand the layout, interface, navigation and functionality within the product and how they are stitched together. They are low-fidelity work products; this means they lack graphics, color, and other elements of visual design, for most part.
Why Should You Test Wireframes?
Frank Lloyd Wright, once quoted, “You can use an eraser on the drafting table or a sledgehammer on the construction site.” Wireframing is one of the most valuable tools for usability testing, early in the cycle. A lot of problems can be fished out, early on, even if users can play around with skeletal wireframes. Early information in turn helps teams fix gaps early on, allowing them to build better products.
How To Test Wireframes?
Testing wireframes is an age-old concept, employed by very few organizations. Before the explosion of startups, people often chucked everything in SDLC to create a working product that can bring money quickly. However, with concepts like Kanban, Lean and other methodologies, having a minimal viable product with good UX design became an obvious ask. This is where some teams, started getting their wireframes tested. There are three ways of testing wireframes:
1. User Testing
In this method, uses are invited to test interactive/non-interactive wireframes and their feedback is captured either by asking them a series of questions about the wireframes or designing a few tasks they can execute and provide feedback.
2. Remote User Testing
This method is similar to user testing method, except that this is not done face to face with users, but using video conferencing and other online collaboration tools.
3. Expert Review
This method employs a subject matter expert to review/test wireframes and provide detailed analysis.
Wireframing Tools
Wireframes can be hand drawn sketches on paper/whiteboard or they can be produced by using wireframing software – some of which are free.
Axure
Axure is a desktop app that runs on Windows and Mac. It has powerful features not just to create low-fidelity wireframes, but also highly interactive mockups.
Balsamiq
Balsamiq is a traditional wireframing tool with a focus on “rough sketches” that are close to hand drawn drawings.
The Pencil Project
Pencil is free and easy to learn with creating simple sketches
There are many other tools in the market. One has to pick a tool that suits their context. In recent times, Axure has become a go to tool for creating ‘walking wireframes’ that are dynamic by design and mock real functionality, interactions and navigation, all in a single place. Axure goes a step ahead in creating high-fidelity wireframes / mockups depending on the target platform – be it web, or mobile.
Advantages / Disadvantages of Wireframing
Advantages
- Communicate innovative design ideas quickly
- Facilitate early feedback mechanism to clients
- Provides an opportunity to fix critical bugs/problems in wireframes early in SDLC
- Easy to make changes to wireframes, as compared to making them on a live product
Disadvantages
- Wireframes is limited to the power of the tool used
- Interactions within wireframes may not be self-explanatory at all times
- Poor collaboration during wireframing stage with corresponding scrum teams can destroy the benefits of creating wireframes in the first place
Design First, Then Prototype Approach
In the olden days, wireframes or other prototypes were conceptualized first. Then design ideas would come into play on what design elements needed to be added to the product. Some tools would have existing limitations hence limiting the implementation of unique design ideas. Today, better designs are more engaging, playing a key role, in areas like, preventing user abandonment and so forth. Having said that, it is important to backtrack and Design First and later figure out how to create wireframes or prototypes as per the design.
The next entry in this two part article will touch upon expert review method of testing wireframes and how it benefits teams.
