Using Prototypes to Improve UI Design

When we design an application for desktop, Web, or mobile, an important consideration to make is the user experience (UX). To achieve better UX, we need to design the user interface (UI) very carefully. UI is not only the way we layout and paint the widgets of our application, but also includes the interaction design (IxD).

There are some principles to designing a good UI; we can find books and learn them. But in practice, especially on a big project, we will find it difficult to reach every aspect of a matter. The UI becomes complex and we just can't easily figure out which design is more user-friendly. So what to do? The straightforward solution may be asking our users. We make applications for them and care about their experience, so why not listen to them?

Collecting feedback from users is a good way to improve design. The problem is when and how to gather feedback. The earlier we do, the less costly any modifications will be. The alpha version may be the first version that users can try, but it is always too late for collecting feedback to change the design.

 Figure 1 Too late to get feedback

How to make the best of both worlds? It takes little time to create a prototype of the final application, deliver it to users and collect feedback from them. This can be done at very early phase so the cost to change the design will be quite low.

Static vs. Interactive Prototype

Prototypes can be static or interactive, and each type works differently. A static prototype usually contains several static figures. Each figure has the sketch of the application UI. Although the figures can have some comments, users can not understand them very well without Help files. So static prototype it is more suitable for face-to-face situations.  We can show users the figure and let them make their "operation", then we tell them the result. Users can give comments anytime and we can write the comments on the figure.

If we want to collect feedback from a large number of users, static prototype seems not so suitable; communication becomes difficult when there are more than 5 people in the room. If we have an interactive prototype, which can be run on each user's machine, users can really operate on it and give us their feedback.

We can create the runnable prototype with programming language, or with specialized tools.

Prototype Fidelity
According to the details included in the prototype, we can breakdown prototypes into three categories:

• high-fidelity (hi-fi) prototype
• medium-fidelity (mid-fi) prototype
• low-fidelity (lo-fi) prototype.

Here are some prototypes for a video downloader, with different fidelities:

Low Fidelity Prototype (Sketch)

Medium Fidelity Prototype (Clean Wireframe)


High Fidelity Prototype (Windows style)


Prototypes with lower fidelity can force the audience to concentrate on the solution itself, and encourage the suggestion to make big changes, so it is very useful to collect feedback from users at a very early phase. Prototypes with higher fidelity provide a GUI that is closer to the final result, so it can be used in design document and help developers to build the application. What's more, if a hi-fi prototype is interactive too; it can provide the user with a very real experience, so that we can do the usability testing on it.

Prototyping Tool
The most common tool for prototyping is paper-and-pencil,; it’s good for creating a sketch, and helps organize ideas. But paper prototypes are hard to store and manage. What's more, paper-and-pencil can not create a prototype with higher fidelity.

With the help of specialized tools, we can create better prototypes with less effort. Recently I’ve been evaluating a new tool named ForeUI; it is very interesting since it can switch the fidelity of prototypes, and it can create interactive prototypes too.



Switching the fidelity is a very good feature that allows using the same UI design for different purposes. I will write a detailed review for this tool later.

Summary
Collecting feedback from users is very important for UI design. It should be done with prototype at a very early phase. Specialized tools can help reduce the workload to create prototypes.