Web prototyping and interaction design
Creating a prototype of your new website or app allows you to get early feedback from customers and stakeholders.
Prototype of a sports iPhone app using Axure
Prototyping lets you try out new ideas and test alternative approaches before you spend a lot of money or time. It is a great way to check that your idea or product works.
What is web prototyping?
A prototype is a mock up of your website or application. In a prototype you create just enough screens to enable you to show off the most important functions and the key elements in the interaction design. A prototype should give you a good idea of how the final product will work.
What is interaction design?
Interaction design is the planning and visualisation of how someone will interact or use your website or application. The aim is to enable the user to complete their task easily and confidently.
Interaction design focuses on breaking down each task into simple steps, and then providing the simplest and most elegant path i.e. what sequence of screens, buttons, fields, content will be required to enable the user to complete the task.
What tools do you use to create prototypes?
We usually use the tool Axure to create prototypes. It’s very quick and fairly easy to master. The great thing is that it allows you to create an online prototype or a written specification document at anytime. This allows us to create screens, then try them out immediately onscreen as a clickable prototype. And when we’ve finished, we can generate the written specification for the client.
A prototype doesn’t have to include finished artwork or graphic design. We often create prototypes that are basically just wire frames – outline drawings of each screen without any graphic design. It all depends on how much time you have and what the budget is.
What are the steps in creating a web prototype?
Mind maps are a great way of outlining the requirements for your product
Before we begin creating a prototype we need to understand the requirements:
- What’s the purpose and scope of the product? (you can’t design unless you know what you are trying to achieve)
- Who is the audience and what are the key tasks? (what do users want to achieve and what functionality is required)
We can then create the prototype. Our usual process is to:
- Start by creating a wire frame of the home or start page (this really helps focus attention on the user and helps ensure that we aren’t trying to overload them with too many choices)
- Then create wire frames for each function (these map out how the user will interact with the website at each step in order to complete the task)
- Check back against the requirements documents to make sure everything has been covered
- Test the prototype then refine; test, then refine and so on.
How do you test a prototype?
We start with impromptu testing with members of the project team. This will help quickly identify anything we might have missed or any obvious mistakes.
We then move on to more formal testing with internal and/or external audience. The testing involves:
- Preparation – create a test guide that ensures participants interact with the most important features of the product
- Recruiting – make sure to recruit people to have no knowledge of the project; this way they come to the testing without preconceptions
- Moderation – always be there in person to run the test; you need to observe what happens and identify where participants have issues
- Reporting – create a succinct and evidence-based report, that analyses participant attitudes and responses, and identifies issues to be rectified.
The feedback we get through testing enables us to (more) confidently complete the interaction design for the project as a whole. It enables us to refine and in some cases redefine the project.
Some recent web prototype projects
In the twelve months Briarbird has worked on a wide variety of web and app prototyping projects including:
- Online shopping list website – interaction design, prototyping and testing
- Sports team training phone app – interaction design and prototyping
- Services and facility index – interaction design, prototyping and testing
- University course search – interaction design, prototyping and testing
Can we help you with web prototyping?
Contact us – we’re happy to chat through your project and see if we can be of help.
