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.
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.
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.
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.
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.
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.
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.
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.
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:
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.