Product Files

Wireframes – Structural Designs For Better UX

Introduction


Imagine expending hundreds of man hours coding and building a website or software application only to find out that it needs a massive re-work. To eliminate such wastage, project teams use various research tools early on in the development process like hand sketches, wireframes, mockups or interactive prototypes. For the sake of this article, we’ll concentrate on wireframes.

What are wireframes?

Hand drawn website layouts. doodle style designA wireframe is a design artifact that functions as an early-stage representation of the product being built. It forms the structural plan or skeletal diagram for a more advanced stage of project development and is often presented in grayscale. For instance, in the case of a website design project, it would consist of boxes denoting text, images and other interactive elements.

The reason we use wireframes is to gauge user behavior before proceeding to coding. Designers want users to find the webpage or application intuitive.

Going a little deeper

Wireframes provide a visual understanding of what the user can expect in the final version. It may display placeholders in lieu of actual design elements. The level of detail included remains at the discretion of the project team and is usually dependent on their level of certainty. Wireframes solicit valuable feedback that helps the project team move ahead with confidence.

It tests user interactions, navigation flow, and layout adjustments so that the ultimate experience delivered is seamless and productive.

Wireframes may begin with a simple paper and pencil, or on a whiteboard. These allow for quick changes when needed. They may even be linked showing paths between pages in the user journey. With more validated learnings you may proceed to digitally rendering the wireframe. In addition, wireframes can be made static or clickable. Using software applications, designers are able to facilitate quick creation, deployment and analysis.

The choice of whether to use hand sketches or digital applications rests on the level of confidence the design team has, the type of project being undertaken and the amount of resources available.

Applications to build wireframes

A variety of tools are available to economically build and test wireframes. Not all of them demand a high degree of skill. Applications like Axure, Cacoo, Marvelapp, Balsamiq etc. accommodate for non-technical proficiency and offer additional features like team collaboration, commenting, revisions, sharing, documenting and even integration with other productivity applications.

Advantages 

1) Economical

2) Easy and quick to build, alter and reassess.

3) Provides learnings very early on and quickly

Disadvantages

1) Lack of contextual influence – color/typography/imagery/setting

2) Can be distracting particularly with too much text, links or empty placeholders.

3) Not visually appealing to users.

Conclusion

Wireframes are not the only tools that project teams rely upon to test user experience early on. Other tools with higher fidelity include mock-ups and prototypes. But, to get things started with a few quick tests and early feedback, wireframes are a good choice.

Higher fidelity tools include Mockups and Interactive Prototypes.

Leave a Reply

Your email address will not be published. Required fields are marked *