10 Questions Every Successful UI Designer Must Ask Themselves

We designers cannot assume that our mental models are equal to that of our users.

Research in HCI (human computer interaction) has led to principles and techniques that designers should use when designing UIs. Below summarizes these concepts into 10 questions you should ask yourself when designing UIs.

1) Are you following the user’s mental model?

What we think may not be what the user thinks. It is important to understand the users mental model of how they organize information and go about completing tasks.

For example, suppose you have the following navigation menu for a restaurant:

As a designer your three logical groupings are based on the following tasks:

  1. To find menus and information about food, click on the “Food” tab.
  2. To place an order for pickup, delivery, or catering, click on the “Orders” tab.
  3. To find locations and contact information, click on the “Locations and Menus” tab.

A user’s mental model’s however, might suggest a navigation that looks more like this:

Therefore as designers, we cannot assume that our mental models are equal to our user’s mental models.

Before you design your UI, first list out all the possible tasks that the user can accomplish. Then, ask your users how they would organize content, and complete tasks. It is important to have a clear understanding of how your user thinks they should interact with your UI because then you can adjust your design to work for them.

2) Can the user afford to perform tasks?

Affordances are tasks the user can afford to perform. For example, take a door handle. The handle signifies that you can afford to open a door. Affordances should be visible and not ambiguous to users.

Compare the following buttons

The buttons signify that the user can afford to click on them. The user can either go back presumably to a previous page, or proceed to the checkout. However, the affordance is not very clear, as the colors of the button may cast doubt to the user on whether they can click on it or not.

By adding color the affordance is much more clear to user. It is thus important not to just have elements that signify an affordance, but to make the affordance clear to the user.

3) Are tasks that the user shouldn’t be able to perform constrained?

Sometimes we have tasks that we don’t want the user to be able to perform unless certain prerequisites are satisfied.

The login button is grayed out until the user types in their credentials
The login button becomes unconstrained when the user types in their credentials

A login system captures this idea. A user should not be able to click on a login button until they type in their credentials. Constraints should therefore, help the users to not make errors, and keep users from becoming frustrated.

4) Does the user get consistent feedback?

A user should get some type of feedback as they perform tasks. Changes in color, sound, pop-up boxes, etc. are all examples of feedback.

In the previous example, the login button changes in color when the user enters their credentials. This gives the user feedback that they have performed the task correctly. A loading animation for example, tells the user that their request is being processed, therefore implying they have performed the task at hand correctly.

Suppose the user enters incorrect credentials. The user should receive some type of alert that the credentials they entered was wrong. If the user does not receive feedback, they will not know whether they are performing the task at hand correctly. Ensure to have as much feedback as needed for every task you expect your user to perform.

5) Is the design consistent and simple?

The saying less is more applies to UI design. Keep your design minimalistic and consistent.

Google’s homepage 2017

As you can see above, Google’s homepage has evolved from a messy design to a minimalistic, and intuitive homepage. Achieving minimalism is never easy, as it takes several iterations to get there.

6) Is the design error tolerant?

Always assume that your user is going to make mistakes. In addition to providing feedback and adding constraints, always allow for editing or reversing a users actions.

Users tend to delete files they don’t want. Systems typically will first move these files in the trash folder. That way, if the user realizes they do want that file, they can retrieve it. Confirmation boxes are used to make the user aware of a mistake they might make. Always assume that users will regret the tasks they complete, and have options to reverse these mistakes.

7) Is the design flexible for new and experienced users?

UI’s should be simple for all types of users. New users may need more explicit feedback while experienced users may want to use power shortcuts. Adapt your UI to fit the needs of all your user groups.

Microsoft Word for example, allows users to perform tasks using the menu options or using power short cuts such as command/control x, s, a, etc.

8) Can users reverse their actions if needed?

Having options to redo or undo actions are crucial for users. Users are not perfect, and having these reversal of actions allows for the user to be at ease and aid in error prevention.

Apple’s IOS keypad allows for users to reverse their typing actions

9) Have I gone through iterations of prototypes before my final design?

As designers, we like to begin coding and developing our final product immediately. This however, is a not a smart approach because it is easy to get caught up in perfection. Additionally, if you begin to code immediately, you may end up spending time on a design you don’t end up liking or using. Paper prototyping is a fun approach to prototyping. It allows you to easily sketch out your ideas, and additionally, be tested on your users.

Example of a paper prototype for a website design

10) Have I consistently been testing my design with my users?

Typically, 5 users will find 80% of the issues in your website. It is important as you change your design, to test your new designs on your user because sometimes old is gold.

The drastic UI change from Windows 7 to Windows 8 failed due to not enough testing and led users to feel angered (Photo Credit Wikipedia)

When Microsoft decided to change the UI of windows 7, it did not account for how users may react to the new UI. Windows 8, while minimalistic in appearance, was criticized by users as it was difficult to use and get used to from Windows 7. Had Microsoft done more testing with users, Windows 8 would have looked more like Windows 10 which combines the best of Windows 7 and 8.

As designers we tend to believe we are always right, but we are not the end-users. Our bias as designers can prevent us from finding fault in our designs, so it is always important to design with the users always in mind.