What is user interface design, how it differs from user experience design? and what principles should be taken in account when approaching to design a system, an app or a product?

In short, user interface, which is also called UI, is a term from the development and design worlds that refers to the visibility of the interface – starting with color choice, typography, button design, images and all the visual elements that the user sees and deals with.

User interface plays an important role in the processes that the user goes through while using the system. Both new and experienced users will prefer a coherent system, with an appealing and interesting design. The better initial experience of using the system, the greater the chance that those users will return and use the system or product once again. By maintaining several principles while designing the interface we can contribute to simple navigation, creating a better interaction with the system and turning the users into loyal customers.

Adapting the product to the everyday life world

Interface design should appeal to the users with common words, phrases, icons and concepts, so they could easily find their way around the product, and quickly understand what each word or icon represents. A nice example of that is the technological progress of the graphic interface in computers in the 20th century – If at first the computer monitor was limited to text commands only, after the change, small images of folders, files and a hand cursor were displayed on the screen. All these signifiers were visual symbols that were adapted to the user language from the real world and helped them understand what actions could be performed by each object.

Reducing cognitive load

Using identified buttons and icons helps to reduce cognitive load from the user. Objects and icons that are familiar from other products in everyday life, allowing the users to scan, identify and process the content quickly before they have even read the text that accompanies them. Reducing the amount of text and visuals decrease the cognitive load, and also the time it takes users to perform a cognitive action such as reading and understanding. If the system contains less identified icons, adding text describing the action can contribute to the users. Moreover, it is important the objects displayed in the system will be designed with an “affordance” – the visibility of the object implies the way it is used and invites the user to perform the requested action.

Maintaining consistency

Consistency in user interface design is intended to prevent confusion and contribute to performing actions in an easy and quick way. Consistency can be reflected in internal patterns in the system, in instance, using one color for all the links on the screen, or using one symbol for the same concept, like home page button throughout the system. Also, consistency refers to conventions in other systems and websites – in an online purchase process, for example, in which the steps are clear and repeated in different systems, change and inconsistency may make it difficult for users to perform simple actions in this case.

Flexibility and efficiency

By adjusting certain actions in the system, we can optimize the experience of using the product. For instance, when users want to save or delete an item in the list, they can choose whether to perform it in the classic way – opening the menu and clicking on save or delete, or perform these actions through ” accelerators” – swiping on the item from the list and choosing the wanted action. Accelerators are an example of interaction design, which is part of the field of UI design. Unlike UX, interaction design is mostly based on a visual experience that allows the users to perform actions in an intuitive and simple way, while receiving interesting visual and animated feedback.

Updating users of changes

Another function of UI is to provide feedback to the user at any given moment. Feedbacks give users a sense of trust and confidence in the system, indicating what stage they are in the process, how long the action they are performing will take, and what the next action is.

Preventing errors and exit ways out of actions

UI design plays an important role in preventing errors and allowing canceling unwanted actions. Occasionally, users choose actions by mistake, and need a clear and prominent button that allows them to get out of the situation they reached. A system that supports cancellation and recovery of operations, can prevent users from making mistakes that would result in the loss of information, an unwanted purchase, or an interruption of the entire process. It is important to provide users an exit way at any point, to prevent them from performing actions they don’t need. Sensitive or critical actions in the system, such as deleting many files, making an additional purchase for a subscription or sending messages to a large number of recipients, should be accompanied by a message or alert showing the users the conditions of the action they are about to perform. Careful and clear design can prevent these errors.

Problem solution

If an error did occur, design has a responsibility to help the user “recover” from the situation, express the problem in simple and precise words and offer a solution. This is what 404 page is for. Many websites these days display this error page in a creative and light way, and usually combine illustrations and clever microcopy. Using these elements presents the problem in a more pleasant way and makes it easier for users to return to the process.

Minimalistic and esthetic design

Finally, Beyond the functional aspect that affects the ease of use of the product, design can evoke different emotions in users. According to the article “The role of emotional design in creating a meaningful user experience” published by Tel Aviv University, esthetic design that evokes positive emotions, encourages the users to experience a sense of competence and belief in their abilities to perform the task, which leads to higher involvement during the interaction with the system. During the process of design, we must strive for the most convenient and simple interaction for the users. With the help of a few simple design principles, we can focus the users and highlight the main elements of the system:

  • Hierarchy – A clear hierarchy in the form of prominent colors, different sizes of texts and font weights, shapes and icons of different sizes indicates the importance of the element within the overall design and attracts the attention of the users.
  • Emphasis – Refers to the importance of the elements in the design, and in what order they should appear. This principle means that the most important information we need to present in the design must be the first thing users will notice.
  • Uniformity – Refers to the way in which all the elements used in the design work together and communicate a clear message. Uniformity gives a more organized appearance and a coherent experience.
  • Repetition – It is a great tool to reinforce an idea that we want to convey through the design. This principle allows a uniform appearance that contributes to users predicting in advance how the various elements will behave throughout the system, and also, facilitates the experience of navigating and using it.
  • Proportion – Refers to the way certain design elements are displayed next to other elements. Here again, larger elements will look important and stand out compared to small elements.
  • White space – Can also be called “negative space”, refers to the area of ​​design that does not include design elements. However, the white space is actually a very important design element, allowing breathing space for the existing design elements and easily distinguishing them from one another.
  • Movement – Also called “the wandering eye” and its purpose is to interact with the user and lead his gaze from one element to another. Humans are used to scanning familiar patterns – faces (mainly eyes) and texts. Accordingly, images will capture more attention than other abstract elements. In addition, the eye is also drawn to strong contrasts, such as a red element on a green background. The reading order of the language in which we design, also affects the placement and arrangement of the elements. For example, when designing for the Hebrew language it is better to place the important elements from right to left.
  • Diversity – This principle is used to create visual interest for the user, and can be created with different elements such as color, typography, images, shapes and more. A monotonous design can cause habituation of the users to the object, till the point of losing interest and ignoring it, which may lead to making mistakes during use. However, it is important to maintain the balance between the diversity and uniformity, so that the system maintains coherence and at the same time creates interest in the eyes of the users.

After we described what user interface design is, and listed the principles that must be taken in account, it remains to ask what is the difference between UI and UX? In fact, these two concepts go hand in hand, and together they create a complete experience. As much as user interface design is responsible for the visibility of the system, the website or the app, so user experience design is responsible for the functionality of them.

An excellent example for using UX/UI in physical products, and the difference between those concepts, are the Heinz ketchup bottles. The design of the glass bottle may seem more elegant and tasteful compared to the squeezable bottle, but its functionality is lacking, when the consumer has to make an effort to remove the rest of the product from the bottom of the bottle. The squeezable bottle answers this problem thanks to its ability to stand even when it is upside down and also, thanks to the plastic material that makes it squeezable and more comfortable to use. At the same time, the brand maintains the visual visibility between the bottles by using the same colors, fonts and design of the familiar label of the product. Likewise in the digital world, a great and beautiful UI is not worth much when the UX is problematic and unusable, and the same also vice versa.

UX/UI design takes the system or website a few steps forward – from something technical and functional to a complete experience that will make users develop real feelings towards it.