Testing wireframes is an exciting topic. Read on and learn about testing wireframes, its methods and its importance.
What is a Wireframe
A wireframe is a visual representation of a user interface, stripped of any visual design or branding elements. It is used by UX Designers to define the hierarchy of items on a screen and communicate what the details on that page should be based on user needs.
A website wireframe is also commonly called a page schematic or screen blueprint. This is a visual guide that represents the skeletal framework of a website. Wireframes are created to arrange elements to accomplish a particular goal best.
Uses of Wireframing
To Identify Missing Requirements
If the requirements state, for instance, that in a login page there should be two input fields, login ID and password respectively and the three buttons like OK, Cancel, and Reset. If this is so, we can easily find the missing Reset button early on and incorporate it into the application.
Identifying Extra Requirements
The reverse of the above situation can be that the requirement states that in a login page there should be two input fields, login ID and password respectively. And only two buttons, OK and Cancel. If this is so, then we can easily find that it has an extra Reset button and seek confirmation on whether or not it is required.
For Usability
Wireframes are one of the best options to test the usability of product/application before it is developed.
For Early Functional Testing
In the above example itself, we can say that this way, the functionality might work. If not, it will at least lead to further digging up and a better comprehension of the application.
Wireframing Tools for Free
- Cacoo: Cacoo is a free, user-friendly online drawing tool. It allows the user to create a variety of diagrams such as site maps, wireframes, UML, and network charts.
- MockupBuilder: MockupBuilder is a free web application powered by Silverlight. It helps the user to get his ideas on the screen quickly.
- Pencil Project: Pencil Project is free and easy to learn. It can run as a Firefox add-on or on its own.
Benefits of Wireframing
- Early feedback to iterate upon
- Validating your ideas
- Save time in the development stage
- Identify critical issues in navigation and functionality
- Cost-saving
- Explore multiple, possible experiences
- Identify which experiences to develop further
Steps on How to Test Wireframes
#1: Designing the wireframe
Before anything else, you must create a wireframe first. Maybe you are a design maverick, and you are going to design the wireframe directly. You need your design down, regardless of what style you use — using a grid will give you a sense of proportion.
Do not forget that whipping up a wireframe will take just a few clicks. The drag and drop widgets and likewise the custom widget libraries can get your wireframe skeleton ready to test in only a few hours.
#2: Planning and choosing your user testing methodologies
When you have designed your wireframe, whether on paper or digitally, it is time to consider which methods you want to use when user testing. You also need to plan your user testing session.
You will also need to give your participants tasks and goals to complete. Sticking to a single job during a user testing session is recommended. This is to maintain focus.
#3: Setting up the Session for Testing
There is now a need for meetings so you can set up a testing session. The venue of the meeting must be free from distractions so you can focus properly on the tasks to be discussed ad planned.
You will need participants for your user testing session. At this early stage, your participants could be colleagues or people from other departments in the office.
there will be no need for going to the lengths of finding a big pool of people either. 2 to 3 users should suffice, especially for a wireframe.
#4: Iterating from your findings
After you have completed your wireframe testing sessions, you will want to analyze the course and results so that you can iterate on findings and carry out further testing sessions or decide if the session itself needs to be tweaked to accommodate unplanned tangents.
In Conclusion
Wireframe act as the bare bones of your product before you make any big design decisions. That is all. Nothing more, nothing less.