Wireframes – Should They Really Be Tested? And If So, How?

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 :)

 

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:

wireframe example 2

wireframe example 1

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/prototype 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).

Importance of wireframe testing

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.

She is a project lead, carrying 10+ years of software testing experience.

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

wireframe testing 2

#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:

wireframe testing 3

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.
  1. MockupBuilder: MockupBuilder helps the user to quickly get his ideas on screen. It is a FREE Silverlight powered web app.
  1. 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 Prototype 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 :)




17 comments ↓

#1 udhaya

Very nice article. simple and clear.

#2 Philippe Lebacq

Hi
Nice article.
I’m using Balsamiq for prototyping. Similar to pencil but it offers a cloud version, which makes it handy for decentralised teams.
The inter-active PDFs it generates are highly appreciated by stakeholders during requirements reviews, and developers can also have better view on required navigation in the application to be developed.
I never thought including it in my testing material as I was seeing prototyping in tools for reviews rather than testing itself, but for sure it helps early finding of quality issues. Philippe.

#3 kshahid

Wire frames are cheap and low cost way of showing clients what their end product may look like.
During my training days I learnt that you can create a simple paper prototype for initial sketches and I came across some very creative paper designs for wire framing.

#4 Apadma

Great job, simple to understand

#5 Md Rahman

I personally liked this Topic, most important for SDLC process. But in reality,we don’t follow much. That’s why , we found so many bugs at the process.
Thanks Bijay for your easy Examples.
Best of Luck for Wireframe Testing.

#6 Ria

awesome!as always keep feeding us some good info.I am a huge fan of this website.

#7 Ria

Awesome! As always keep feeding us some good info.I am a huge fan of this website.

#8 Mohammed Ali

Very helpful to understand wireframes.

#9 Bhumika Mehta

Readers,

Glad to know that the post was well received and thanks a lot for your continuous readership with us.


Bhumika

#10 aruna

Nice article… thank you for providing very good understanding about Wireframe testing

Aruna

#11 Rony

Great article! I really enjoyed it. Very much helpful. Thank you so much.

#12 Mohammed

I like the artecal ,

#13 Mohammed

I like the article, Easy language, Many pic

keep going

#14 Bala

Good article..helpful for knowledge sharing….

#15 Bhaveshwar patil

very good article….very useful….

#16 Deepak Shah

Nice article Bhumika, I hardly have any knowledge of IT and as change of career I am planning to go for software testing. Very well explained.

#17 Hrishikesh dESHMUKH

Nice Article ….keep writing many more …Thanks

Leave a Comment