The User Interface Design Basics You Need To Know

User interface design is much more than assembling your user interface in order. It focuses on anticipating what actions users might need to perform and ensuring that the interface has elements that are easy to access, understand, and use to facilitate those actions. It can add value, simplify, illuminate, clarify, dignify, modify, and dramatize your interface in order to amuse and persuade your user.

The User Interface Design Basics You Need To Know

Choosing Interface Elements

It has been observed that users are becoming familiar with interface elements acting in a particular way, so it is better to be predictable and consistent with your choices and their layout. By doing this you will make sure that your objectives of satisfaction, efficiency, and task completion are effectively achieved.

The Interface Elements Can Consist of the Following:

  1. Informational components: modal windows, tool-tips, progress bar, icons, message boxes, notifications
  2. Input controls: date field, buttons, check-boxes, text fields, radio buttons, list boxes, drop-down lists, toggles
  3. Containers: accordion
  4.  Navigational components: icons, breadcrumb, search field, tags, slider, pagination

Sometimes using multiple elements for displaying your content is a more appropriate option. In such cases, it is imperative that you should consider different trade-offs.

Principles of User Interface Design

There are total of six principles that can properly describe the basic fundamentals of UI design. These principles are important for improving the quality of user interface.

1. The simplicity principle: The design you are implementing should make it simple to complete common and simple tasks. For this it is important that you should communicate with the user in their own language, and provide shortcuts that are meaningfully related to longer procedures.

2. The structure principle: The primary objective of a design is to purposefully organize the interface. The design should be based upon consistent, clear models that are recognizable and apparent to all the users. It should separate all the unrelated things and put all the related things together. The design must make similar things resemble one another and properly differentiate between dissimilar things. In short, the structure principle deals with the overall architecture of the user interface.

3. The visibility principle: It is important that your design should not distract the users with redundant or extraneous information while it allows them to view all the materials and options needed to complete a given task. An appropriate design will not confuse the users with unneeded information or overwhelm them with unnecessary alternatives.

4. The tolerance principle: Flexibility and tolerance are two qualities that your design must have. Your design should allow redoing and undoing so that the cost of misuse and mistakes are reduced and kept at minimum. However, it should also tolerate different sequences and inputs, and should be able to prevent errors by interpreting all the actions appropriately.

5. The feedback principle: It is important that your user interface design must inform the users of all the exceptions or errors, of interpretations or actions that are pertinent to the action user wants to perform. All this information should be provided in unambiguous, concise, and clear language familiar to users.

6. The reuse principle: The design you are implementing should emphasize on reusing external and internal behaviors and components. This will allow it to maintain purposeful consistency instead of an arbitrary consistency. Also, it will reduce the need for the user to remember or rethink when they are operating the user interface.

Best Practices for Designing an Interface

Everything starts from understanding the mindset of your users. This includes understanding their objectives, tendencies, preferences, and skills. After you have developed a proper understanding of your user, you should consider the following things when designing your interface:

1. Consistency

Maintaining consistency all across your user interface is the most important thing. For example, if double-clicking an item produces some effect in one list, then double-clicking another item in any other list should also produce a similar sort of effect. The wordings in messages and labels should always be same.

The color scheme you are going to use should be consistent throughout the interface. The placement of buttons should also be consistent on all your windows. You must realize that proper consistency in your interface will make sure that users will be able to build a precise mental model of the way it will work. This will also help you in reducing the support and training cost per user.

2. Proper navigation

If you design an interface in which it is difficult for the users to navigate from one screen to another, then it will lead them to frustration and eventually they would give up. Therefore, in order to make your interface sensible to users, you should make sure that the navigation between the screens corresponds the flow of work that the user is trying to complete.

It is important to understand that different users work in different ways, therefore the system you design must be supportive to variable approaches that users might take. To ensure that you have fully understood the flow of your user interface, you should develop a user interface flow diagram.

3. Effective wording

The text you will show on the screen is the primary source of information for your users. Therefore, using poorly worded statements will make sure that users will consider your interface as sub-standard. To make your text easy to understand you should use full words and sentences, instead of codes and abbreviations.

Always use positive words to create a message in a way that implies user is in control. This will provide users a valuable insight into how they can use the interface properly. Also, you should make sure that the messages are displayed at a consistent place and are worded consistently.

4. Using colors

It is possible that some of your users may be colorblind. Therefore, wherever you use colors to create a distinction between actions, you must also provide a secondary indicator, so that all users are able to notice it. Always use colors in a consistent way so that the feel and look are common throughout.

To make your screens easily readable it is better if you follow the contrast rule. I means using light-colored backgrounds for dark-colored texts, and dark-colored backgrounds for light-colored texts. However, the problem is that there are not enough appealing contrasts to choose from.


Although the functionality you are trying to provide to your users is an important factor, the way in which you will provide it is equally important. Technology has reduced time, space and patience among users. You may find that a user interface that is difficult to be used, won’t be used. The better functionality or technical superiority of your creation simply won’t matter. Therefore, you should never underestimate the value of user interface design.

Jessica Miller
Jessica is the Lead Author & Editor of UsabilityLab Blog. Jessica writes for the UsabilityLab blog to create a source for news and discussion about some of the issues, challenges, news, and ideas relating to usability.
Jessica Miller on sabtwitterJessica Miller on sablinkedinJessica Miller on sabgoogleJessica Miller on sabfacebook