Wireframe Testing Tutorial: Learn How to Test Wireframes

New trainees came on board and we had a training class to learn software testing concepts. After seeing those enthusiastic faces with their almost blank-slate minds (professionally), I decided to take a detour to my routine training.

After a brief introduction, instead of talking about software testing like I normally do, I threw a question at the fresh minds – ‘Can anyone explain me what a wireframe is? ’

The answer was a pause and thus, we decided to discuss it. And that is how it started – Wireframe/Prototype Testing :)

 

So, what is a wireframe? Let me explain it with some simple analogies:

1. The interior decorator does not start putting in the furniture and decorating the house randomly. He puts on his plan on paper (or design software), discusses it with the customer, tries and modifies the plan in a best practical way and then implements it.
2. To understand how severely a body part is injured, doctors look at an x-ray. X-ray is basically a skeleton of our body and gives correct information about the bones and joints.
3. A tailor prepares the paper cloth (a kind of prototype again), does whatever modifications are required and uses it as base measurement until everything is accurate and he is confident to go ahead with the actual piece he/she is sewing.

I think those examples were enough for anyone to understand the concept of wireframe.

Wireframes are prototypes of sorts:

They are limited in nature, which means they could contain empty HTML pages with no elements working or static screenshots that are representative of a page/function/element of the application and might lack colour, graphics and other elements of the actual visual design.

To build a solid application/website, a solid framework is needed and wireframes help in providing the framework by giving a depiction of the page layout, overall interface, navigation and functionalities.

Here are some examples of wireframes:

Why do software companies build wireframes?

For the exact same reason the Tailor/interior designer/Doctor decides to try things out first- to avoid mistakes, eliminate guessing, take customer approval before setting everything in stone. It helps in identifying problems early on and to give a glimpse of the software as it would appear when finished.

Importance of wireframes testing:

So, why to test something which is a skeleton and which will not be seen by the user the way it is now? In other words – Why bother with the intermediary when it is a dummy yet?

Simply – to aid in defect prevention – which is the overall agenda of QA teams (Quality assurance = Defect prevention + Defect identification).

Wireframes testing can help in the following:

#1) Identifying missing requirements:

Let us say if the requirements state that in a login page there should be 2 input fields, login ID and password respectively and the 3 buttons, OK-Cancel- Reset. If the wireframe is as follows, we can easily find the missing Reset button early on and incorporate it into the application.

#2) Identifying extra requirements:

The reverse of the above situation can be that the requirement states that in a login page there should be 2 input fields, login ID and password respectively and the 2 buttons, OK & Cancel. If the wireframe is as follows, we can easily find that it has an extra Reset button and seek confirmation on whether or not it is really required.

#3) Usability:

Wireframes are one of the best options to test usability of product/application before it is developed.

Here is the wireframe for one of the forms:

At a first glance, it seems ok.

Now think as an end user, the user who is going to fill up information in the form. Do you think, there is a way, this form can be more user-friendly? Well, I certainly think so.

• Provide calendar symbol and restrict user to select date from calendar. This would be helpful to user as he will not have to be confused about which date format he should follow and selecting date from calendar would be something, every user would prefer.
• A tooltip explaining what every field means would be great.
• Page name as title is required to understand the wireframe and co-relate the fields.
• Required fields should be marked with * sign or a note saying “All fields are required” should be visible.
• Label of first field should be “Campaign Name”, rather than “Name” only, to avoid confusion for users.

#4) Early Functional Testing:

In the above example itself, from the diagram we can possibly guess the way the functionality might work. If not, it will at least lead to further digging up and a better comprehension of the application.

• For example: What if user wants to add multiple booking IDs? Will the application overwrite the previous entry or will it allow multiple entries? How will it handle and manage it?

As can be seen from the above examples, testing wireframes really helps early identification of problems through a static wireframe and prevent the defects from seeping into the actual application. This is very beneficial as we know that defects identified early on in the development process are cheaper to fix than the ones found later.

Tools for wireframing:

There are many tools available in market but one should use the tool as per the context suitability. While most of the tools like Axure, Power mockup, Simulify, Balsamiq etc are paid, there are some useful free wireframing tools too:

1. Cacoo: Cacoo is a user friendly online drawing tool that allows the user to create a variety of diagrams such as site maps, wireframes, UML and network charts.

2. MockupBuilder: MockupBuilder helps the user to quickly get his ideas on screen. It is a FREE Silverlight powered web app.

3. Pencil Project: Pencil Project is free and easy to learn. It can run as a Firefox add-on or on its own.

When can (or does) Wireframes testing occur:

• Before product development: This can help identify gaps or missing requirements, design errors, usability issues etc.- Defect prevention
• Post development: In this case, the wireframes can be used as references to validate the application. – Defect identification.

In case of Wireframe testing for usability it is usually done manually and most of the time real-time users are involved. They are asked either a series of questions to understand their experience or feedback or are provided with interactive wireframes to capture the feedback.

To have detailed analysis of wireframes, sometimes subject matter experts are also involved.

Services such as usertesting can be very helpful, where one can post a link of wireframes and after testing of wireframes, the results are generated along with the following feedback points:

• A video of each user’s screen testing your wireframe.
• Audio of the user talking through how he completes the tasks.
• Valuable feedback about how to improve your website.

Output of testing:

Results of wireframes testing are very helpful in terms of understanding design, navigation, user friendliness, overall work flow and functionalities. Basically, after wireframes testing, the wireframes get clearer and implementable.

Conclusion:

To summarize, wireframes testing works as a proactive action and can be very helpful in finding usability and design loopholes in the application pre-development phase.

With this, I am wrapping up the topic, in a hope that readers will tempt me to write another post on this by asking questions and providing feedback.

About the author: This article is written by STH team member Bhumika. She is a project lead, carrying 10+ years of software testing experience.

Happy testing, as usual :)