Prototyping in Human-Computer Interaction

Making an interface is a time consuming task. Hardly any framework makes it as easy as they promise. And sometimes you just need to prototype an idea to see if it really works. That's when different ways of prototyping come in handy. 😊

Users and their descriptions

Think of possible users, even non typical ones. What are they like? What do they want to do related to your application? A user description might be following: "Peter, 68 years old. Owns a smartphone but he gets confused in the menus easily. He needs a bigger font to see everything. He likes pizza." If you are building a food delivery application, this contains already some relevant information about the user, he has a food preference that should be easily accessible, definitely not through menus and in big enough font. Writing some user descriptions helps you better understand the needs of different users.

You should also take into account possible unwanted users.👿 For example: "Eric Evil, 14 years old. Has a smartphone and he gets bored easily. He likes to play tricks on people and one day it occurs to him how much fun it would be to order pizza to people on their own expense." A good interface should also make it more difficult for unwanted users to accomplish their goals.

Storyboarding

What is the storyline of the typical user? How does he use the interface, what are his goals and what kind of an interface is needed to help him achieve them. You can think this from the point of view of the user descriptions you came up with earlier. You can make a video, if you need to present your project or just draw some small comic strips to illustrate the user interaction sequence. The UI design doesn't need to be clear yet at this point. 🎞️

Paper prototypes

Paper, pencils and a pair of scissors is more than you need to get your prototypes up and running. Draw different views of the interface on paper and test them with real users. When a user clicks on a drawn button, you can put a paper popup on top of the actual interface, for example. Don't put too much time or effort because you will have to toss them and start from scratch at some point!

Mockups

Sometimes you might want to take your prototypes to the next level and make them interactive. This is where a tool like Balsamiq comes in handy. It lets you create interactive mockups that look like paper prototypes. This is good especially if you are working with clients. This is because the less ready the prototype looks, the more likely it is that they are willing to comment on it and have it changed. If you present a prototype that looks like a real interface, they might think that so much implementation has already been done, that making any changes would be costly and time consuming. They find it better to shut up, so to say. 😶

Wizard of Oz testing

Sometimes you would like to study user interaction with a prototype, but you can't because the technology is not there yet. One example is a speech interface for ordering food. You probably don't have a speech recognition system up and running, but you would like to see if the interface is easy to use. This can be done in such a way that there's a real human hiding somewhere in between the user and the machine. For example someone might listen to the user's spoken request and type an answer the system would give into a synthesizer that speaks it to the user. This way the user still feels that he is interacting with a machine.😊

Conclusion

In this post, we have taken a look at different ways of prototyping a user interface. All that's left for you to do is to start prototyping the interfaces of tomorrow. As always, thanks for reading. ☺️