Blog: Fresh Tilled Ideas

Defining and Developing a Web Prototype Design: Part 2

Posted On: May 3rd 2008
By: Richard Banfield

From HTML/CSS to full prototype

Having created your template pages you can begin to build out the complete prototype. As for templates we start with the home page, a few primary pages and the registration or signup process (if there is one). If it’s a web application you are designing you’ll also want to design the critical functional areas e.g. dashboard, profile setup/edit and uploading files. Each project will be slightly different but you’ll notice patterns in all of them.

Building the web prototype

Try not to get too carried away with the details. If you are working with a copywriter then just add simple text fields, which can be updated later. I’m personally not a big fan of using lorem ipsum to fill in blank spaces. It tends to give the impression that you have to fill up all the empty spaces. Rather use actual text and have your copywriter update it either in parallel or after you are done with your designs.

The ideal place to be before your next review is to have the home page, registration pages, dashboard and your primary functional areas designed and linked together. Never show a client separate pages that have no relationship with each other if you can help it. By linking pages you can easily see what might need to be added or subtracted to enhance the user experience. In a recent case we were presented with an 8-page registration process. Using a prototype we were quickly able to reduce the steps to 2 pages.

Testing the user experience

Using this basic but more coherent prototype you can now begin with your first real test of the design. Keep the user testing simple by restricting it to 6 – 8 testers. All testers should be properly screened so that you are getting real potential customers/users to look through the site. Larger sample sizes are not necessarily better than testing a small selection of users. Once you reach 8 people you don’t significantly increase your confidence level (for the statistically minded).

Questions should be objective-orientated. By that we mean that, in general, questions should be considered from the point of view of achieving an objective. Give your users small goals, like “show me how you would buy the _____ item” or “please register for the _______ service”.

Testing is a whole other subject so I won’t go into it here. That’ll have to wait for another blog posting.

Building the actual site

Once your designs are approved you will be able to start building out the remaining pages. Because you have created a template in HTML/CSS this is a relatively simple design process. The hardest part of this step is making sure you are maintaining a solid user experience and not just adding pages for the sake of filling in the blanks.