Print Article
BookMark Article
10 newest articles RSS
Wireframe As A Planning, Communication & Usability Testing Instrument
Author : Martin Metz
Submitted : 2011-11-22 Word Count : 654 Popularity: Not Rated
Tags: interface design, wireframes, user interface design, UI design, interface design software, interface design tool, wireframe software, wireframe tool, interface prototyping, paper prototyping, ui prototyping
The Internet is full of discussion on which tools are best for wireframing, whether low or high-fidelity wireframes should be used, what a good wireframe is like and what it should contain, how a wireframe should be created and so on. A good question that popped into my head, when I was new to wireframing, is why exactly should I create a wireframe before proceeding to website development? In this article I will look into a few main reasons, why I believe, any web developer should start his or her project with a wireframe.
Wireframe as a planning instrument
As I sit down to work on my project I feel that I have a clear idea of what it should look like, and creating a wireframe seems like a waste of valuable time. But this is a mistake that many impatient beginner web developers are prone to. It is quite evident that before embarking on a project like, for instance, writing an article it is helpful to jot down a brief plan for it. In web development a structured approach is even more significant than in writing. A wireframe, therefore, serves as a plan or outline for the future website. A wireframe can be altered easily as new ideas come along. Imagine, after a wireframe was created that the client decides to place certain elements on the website for which there simply is not enough space. At the first stage of development, before all ideas have been finalized, it is important to be flexible, which is a wireframe's main advantage. Just move all the elements of the wireframe around and the user interface now fits new demands!
Wireframe as a communication instrument
A wireframe gives an opportunity to communicate ideas efficiently, especially with the people who are not necessarily familiar with web design and development, like some clients. A wireframe gives clients a chance to imagine what the website will be like. If you simply name the features and elements instead, clients might not be able to understand you. A wireframe ensures that whatever ideas a web developer has match up with those of clients. A wireframe can also mean to clients that the web developer put some time and effort into his work, and the project may get launched faster.
The other advantage is that having a wireframe enhances communication within a team, should the project involve a number of people. Having a visual representation of the future product helps brainstorm, criticize and alter it, and generally creates better understanding of what each team member has to get done.
Wireframe as a usability testing instrument
Lastly, but not least importantly, a wireframe is an important tool for iterative design, that is, it allows to test, analyze and improve the product at an early stage of development. A wireframe ensures that the end product will be functional and have a user-friendly user interface without much cost or time expenditures involved. Web developers have a chance to test the website's usability by getting feedback on the wireframe from other people. Having the expectations of the clients met is vital, but it is also a good idea to test the functionality of the website by independent users, who are not in any way connected with the product and can give their unbiased opinion. Some wireframing tools provide an option for inviting independent users for wireframe usability testing. In my view, this is a great opportunity for a web developer to discover the flaws he or she might not see and will have to address at a later time.
If you still believe that wireframing is only for those who have time to kill on their hands, remember a good old saying: a stitch in time saves nine. Investing some time and effort in creating a wireframe at the beginning of your work will surely pay off later!
Author's Resource Box
Pidoco.com – Interface Design, Wireframe, <a href="https://pidoco.com/en/features/wireframes" target="_blank" title="Wireframe, Wireframes">Wireframes</a>, Wireframe Software, Interface Design Software, Online Wireframe Tool, Wireframe Tool, Interface Prototyping, Clickable Wireframes, Usability Testing and Digital Paper Prototyping. User centered design for improved <a href="https://pidoco.com/en" target="_blank" title="UI Design, User Interface Design">UI Design</a>.