Develop

How does one prototype a web application?

Prepare · Evaluate · Evolve

A. Prepare

1. Know the theory. Know why paper prototypes are effective. Read Jakob Nielsen's excellent instructions on conducting a Discount Usability Test.
2. Print an empty browser screen, in landscape. Enlarge the print to an A3 size, so it easily accommodates a A4 page.
3. Create a paper prototype for each screen. Each screen is a landscape A4 sheet with sticky pads.
4. Divide the tasks among 2 IT specialists:
   1. The first one plays the role of 'webserver', puts down a new page after every click.
   2. The second one plays the role of interviewer. He records all the user's comments, without debate.
5. Prepare a number of assignments (3 - 5) for the tester.
   • Make the assignments realistic, a good representation of daily tasks. Use the high frequency functions preferably, the functions that make up 80% of the daily tasks.
   • Make it easy for the user to focus completely on the user interface. Supply all required information for the assignments, including sample values. For example: Assign a day off to employee J.H. blok on Tuesday 4 December. Generate a duty roster for january 2002.

Prepare . Evaluate · Evolve

B. Evaluate

1. Explain the purpose of the session: testing the design. Stress it explicitly that you are not testing the individual.
2. Encourage the user to think out loud, to comment on the design without holding anything back. Explicitly ask the user to mention everything that seems difficult, anything that raises a question in his mind.
3. Ask the test person to do the assignments one by one, preferably in a set order.

   The interviewer records all the comments, without any filtering. This will make the user feel that his comments are important. All this writing can't be in vain. It is a stimulus to give even more comments.

4. Thank the user for his valuable input and say goodbye.

However, within a minute or two they have completely forgotten that they are clicking sheets of paper. They click from page to page and start complaining when the server doesn't put down a new page fast enough. Could it get more real?

Prepare · Evaluate · Evolve

C. Evolve

1. Afterwards the two IT specialists discuss the comments.
2. Improve the design. Shift sticky pads to change the screen layout. Replace unclear widgets. Split or combine screens.
3. Repeat the session with more users. Problems experienced earlier should be solved. Bigger problems make way for smaller ones.

Till next week,
Nut