Prototyping Interfaces

Nikolai Angelov — Thu, 11 Jan 2007 21:05:00 GMT

My job is to create application interfaces. Nowadays it's very fashionable to call this job Interaction designer. Interaction designers create the way people interact with applications and devices. They make interaction prototypes and then, together with developers, are involved in the product implementation, while graphic designers are those who make nice looking screens from the prototypes.

What is a prototype?

A prototype is a simulation of an application's functionality and screen layouts made through easy-to-use tools such as linked rough html pages, Photoshop/Fireworks, Visio, Power Point, or just paper sketches. Prototypes are used as a product specification for developers and graphic designers. They are very useful for usability testing in the early stages of the project. Prototypes are usually black-and-white and terrible looking, but supposed to be rapidly created and easily changed.

I use several types of prototypes for my work at telerik.
You can see some examples from Sitefinity 3.0, a web application I'm involved in.

HTML prototypes
The basic functionality is demonstrated by many linked html pages or simple java script. The major benefit of the html prototype is that it provides a mock version of the real task and screen flow. It's very convenient for early user tests and its html code can be directly implemented.

Paper prototypes
Paper prototypes are like hand sketches which simulate the use of some real widgets by office supplies such as sticky notes and colored paper. It seems a little bit crazy, but paper prototypes are very useful for trying out different ideas for the screen flow and test them quite early with users. You can change the prototype promptly if the tests are bad. I will discuss paper prototyping in another post later on.

Screens drawn by Fireworks/Photoshop
Graphic designers work out those prototypes trying to invent colors, fonts, layout proportions, images. They are less appropriate for interaction design than html and paper prototypes because you can leave out the screen flow and work on details only. I do use them for designing layout details in late project stages, sometimes in the beginning too, but I don't rely on them only.

Prototyping in practice

The most important thing for a good interaction design is working together with developers because in the development stage a number of changes could be introduced which were practically unnoticeable in the prototyping stage. Thus, joining the functionality, graphic design and animation behavior can lead to a different result from one you imagined at the very beginning. After all, the most realistic prototype is the product itself.

Nikolay Angelov's blog

Prototyping Interfaces

What is a prototype?

Prototyping in practice