Wireframe Testing Tutorial: Learn How to Test Wireframes

Not long ago, we took on some new apprentices and held a training session to gain understanding about software testing methodologies. Looking at their keen expressions and their receptivity (in a professional context), I opted to alter my standard training routine.

Rather than delve into software testing as I ordinarily do, I initiated the briefing by posing a question to these fresh minds – ‘Can anyone provide a definition for wireframe?‘

Hearing silence in return, we chose to explore this topic. And thus, our deep dive into Wireframe/Prototype Testing was underway 🙂

 

So, what precisely is a wireframe? Allow me to clarify with some straightforward analogies:

1. When an interior designer embarks on a project, they don’t just arbitrarily place furniture and ornaments. Instead, they begin by drafting a plan on paper (or on design software), discuss it with the client, make necessary changes and then execute it in the most practical way possible.
2. Medical professionals utilize x-rays to gauge the seriousness of injuries. X-rays grant information about bones and joints, effectively creating a framework of our body.
3. A tailor constructs a paper mockup (a kind of prototype), makes adjustments as required and utilizes it as a reference for precise measurements before proceeding with actual piece they are tailoring.

I trust these instances offer enough clarity to comprehend the notion of wireframes.

Wireframes function as prototypes:

Their functionality is confined, indicating they might include empty HTML pages with non-operational components or static screenshots that visually symbolize a page/function/element of the application. They may not encompass colors, graphics or additional visual design components present in the eventual product.

Wireframes assist in laying down a robust framework for developing an application or a website by giving a depiction of the page design, comprehensive interface, navigation, and utilities.

Here are a few exemplars of wireframes:

Why are wireframes created by software enterprises?

Software businesses embrace wireframes for the same motives that tailors, interior designers, and doctors implement prototypes – to circumvent errors, eliminate approximation, and seek client consent before finalizing everything. Wireframes aid in identifying issues early on and provide a glimpse of how the software will look upon completion.

Why is Wireframe Testing Important?:

So, why should we bother to test something that serves merely as an outline and will not be seen by the user in its current format? In other words, why focus on the intermediary when it is nothing more than a mock-up?

The reason is uncomplicated – to avoid flaws. This is the fundamental objective of QA teams (Quality Assurance = Defect Avoidance + Problem Discovery).

How Wireframe Testing Can be Beneficial:

#1) Identifying Omitted Requirements:

For instance, suppose the requirements state that a login page should carry 2 input fields for login ID and password and 3 buttons for OK, Cancel, and Reset. By reviewing the wireframe illustrated below, the absence of the Reset button can be swiftly highlighted, enabling incorporation in the application during the early stages.

#2) Identifying Extra Requirements:

A contrasting scenario could be where the requirement specifies a login page with 2 input fields for login ID and password, and 2 buttons for OK and Cancel. By scrutinizing the depicted wireframe, we can readily identify the inclusion of an extra Reset button and can verify whether it is genuinely required.

#3) Usability:

Wireframes offer a superior option for testing the usability of a product or application before its development.

Here is a wireframe outlining a form:

At first glance, it appears fine.

Now try viewing it from the perspective of an end user who will complete the form. Do you believe that modifications could be made to enhance user-friendliness of the form? I certainly think so.

• Offer a calendar symbol and limit users to selecting dates from the calendar. This would prove beneficial as users won’t have to be concerned about date format and can merely choose a date from the calendar, which is a highly popular choice for most users.
• Include tooltips describing each field’s implication.
• Show the page name as a title to support user comprehension of the wireframe and make correlations with the fields.
• Mark required fields with an asterisk (*) or supply a note stating “All fields are mandatory”.
• Rename the first field to “Campaign Name” rather than just “Name” to avoid ambiguity.

#4) Preliminary Functional Testing:

As illustrated in the example above, the wireframe sheds light on the potential functionality. This might lead to further exploration and improved understanding of application.

• As an example: What if a user wishes to add multiple booking IDs? Will the application rewrite the previous entry, or does it allow multiple inputs? How will it deal with this scenario?

As the instances above demonstrate, testing wireframes aids in identifying obstacles early on through static wireframes, which prevents issues from appearing in the final application. This is enormously advantageous as defects found early in the development cycle costs less to correct compared to those detected at later stages.

Wireframing Tools:

There is an array of tools accessible in the market, but the choice should depend on the explicit context. While paid tools like Axure, Power Mockup, Simulify, and Balsamiq are widespread, there also exist some helpful free wireframing tools:

1. Cacoo: Cacoo is an intuitive online sketching tool that enables users to develop a variety of diagrams such as site maps, wireframes, UML, and network charts.

2. MockupBuilder: MockupBuilder assists users in quickly visualizing their concepts. It is a FREE web application fuelled by Silverlight.

3. Pencil Project: Pencil Project is a free and straightforward tool to learn. It can function as a Firefox add-on or as an independent application.

When does Wireframe Testing take place?:

• Prior to product development: This kind of testing facilitates identifying gaps or overlooked requirements, designing flaws, and usability issues. It centers on defect prevention.
• After development: Wireframes can serve as references to validate the application. This stage emphasizes defect identification.

When executing usability testing for wireframes, it is typically done manually, and actual users are frequently involved. Users may be asked a set of questions to comprehend their experience or gather feedback. Interactive wireframes can also be given to record their input.

Subject matter experts may occasionally be engaged to perform comprehensive wireframe analysis.

Services such as UserTesting can be extremely useful, as they allow users to evaluate wireframes and generate results along with the below feedback aspects:

• A video capturing each user’s screen during wireframe testing.
• An audio recording of the user describing how they completed the tasks.
• Valuable input on how to refine the website or application.

Test Results:

The outcomes of wireframe testing provide crucial insights into design, navigation, user-friendliness, comprehensive workflow, and functionalities. After wireframe testing, the wireframes become more lucid and practical to implement.

Conclusion:

In summarization, wireframe testing operates as a proactive measure and can be exceptionally beneficial for identifying design and usability errors during the pre-development phase.

I conclude this topic here, hopeful that readers will spur me on to compose another post by posing questions and providing feedback.

About the author: This article is composed by Bhumika, a fellow member of the STH team with more than a decade of experience in software testing.

As always, happy testing 🙂