Expand your prototyping knowledge

Why you should wireframe your interface

Wireframes are without doubts the key to an efficient interface. They have been used to envision and define websites and apps before developing them. From sketchy drawings to high-fidelity functional prototypes, a wireframe can be used for many purposes, before and even during development. Here we’ll see how you can significantly improve your user interface by using wireframes and/or prototypes.

Defining personas
Once you’ve got an idea of your website, you need to think about the kinds of people that will potentially use it. These user profiles are called personas. Once you’ve done this, you can start thinking about your web interface, always taking into account human interactions and your personas’ behaviors.

Wireframing your user interface
Once you’ve got a better grasp of the personas, you can start sketching your website on paper. This step tends to be more for clients than final users as wireframes help define specifications and ultimately are used for the client validation and approval.

Prototyping your user interface
It’s important to prototype the user interface with the main interactions being functional, at the very least. The server side doesn’t need to be prototyped, however, with the arrival of the web 2.0, RIA and dynamic websites, data requests are essential to an interface. Justinmind actually allows you to create the interface, simulate data and dynamic behaviors.

Carrying out user tests
Once the HTML prototype has been completed, it’s essential to share it to gather feedback on what should be changed or not kept as is. This not only helps you to improve the interface but will also help you to gather requirements to include in your specification documents. Along with the prototype, it is also important to include diagrams and navigation flows that will help stakeholders and users to understand the information architecture of your website or application. Justinmind’s  HTML prototype even allows you to integrate analytic tools to track clicks and views, such as (Google Analytics, CrazyEgg or ClickTale, etc.).

Whether you want to build a brand new interface or simply improve user experience of your website, the above processes are key to efficient usability. Defining your interface is by far the most important concept, as the development and success of your app depend on it.

Xavier Renom

About the Author

How to define, validate and review applications before starting to code are his thing. He is interested in everything related to web, mobile and desktop apps and how to prototype and simulate them before development starts. After hours he’s flexing his math muscles.

Comments are closed.