What is Wireframe Testing? How to Perform, Example

In this tutorial, we explain the concept of wireframe testing in detail for the benefit of our readers. Let’s get started. 

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 what a wireframe is? ’

The answer was a pause and thus, we decided to discuss it. And that’s how it started – Wireframe/Prototype Testing 🙂

Wireframe Testing Tutorial

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 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 wireframes.

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 giving a glimpse of the software as it would appear when finished.

Importance of wireframe testing

So, why 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 still a dummy?

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

Wireframe testing can help with the following

#1) Identifying missing requirements

Let us say if the requirements state that on the 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 the usability of product/application before it is developed.

Here is the wireframe for one of the forms:

At first glance, it seems ok.

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

• Provide a calendar symbol and restrict the user to select the date from the calendar. This would be helpful to the user as he would not have to be confused about which date format he should follow and selecting the date from the 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 a * sign or a note saying “All fields are required” should be visible.
• Label of the 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 a 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 the 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 for, 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.

Wireframe testing for usability 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 user testing 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 on how to improve your website.

Output for testing

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

Conclusion

To summarize, wireframe 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 the hope that readers will tempt me to write another post on this by asking questions and providing feedback.

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

Feel free to contact us if you have any feedback, doubts or questions. We would love to hear from you. Happy testing!