- Oliver Puente
- January 25, 2023
- 10:38 pm
Principles of UI design. Learn all the notions and rules that are at the core of the discipline of user interface design, also known as UI.
Table of Contents
What is user interface (UI)
The user interface is a connection, physical or logical, between the technology and the user. In other words, the user interface is the space where machines have interactions with humans.
The user interface (UI) is a very important part of the user experience (UX) because a user interface has the objective of making it easier, more efficient and pleasant for users to interact with a product.
What is UI design
UI design is the process by which we are going to visually create a user interface that is aligned with the user experience.
UI design is the process by which we are going to convert a basic interface into something digestible and usable through typography, color, image, icon, element, among other aspects of graphic design or visual design.
The goal of UI design
The goal of good user interface design is to simplify and minimize the effort a user has to make to achieve their goal more easily.
What is the priority of UI design
The priority of the UI design is to improve the visual experience of the users, to make a product more functional, reliable and friendly to use.
Why UI design is important
An aesthetically pleasing user interface is important because according to "The Aesthetic Usability Effect" a visually pleasing interface makes users perceive the final product as a more usable, attractive, and friendly product.
Also, Users are more tolerant of minor usability issues when they find a visually appealing interface.
The user interface (UI) is a critical part of any software product. When done right, users don't even notice it. When it's done wrong, users can't get past it to use a product efficiently.
UI Design Principles
The principles of UI design, or user interface design, are a series of good practices that facilitate the development of an effective user interface. The principles of UI design revolve around improving the user experience and making the interactions more pleasant and the final product much more attractive.
It is important to know that the principles of UI design are closely linked to UX (User Experience) design and the interactions between the user and the final product.
Product that can be software, website, application, web App, among others.
Therefore, we can call a “successful” user interface one that people want to interact with and consistently follow the principles of UI design.
Why learning the principles of UI design is important
A user interface that follows the principles of UI design is not only aesthetically pleasing, but also easy for people to use. This series of principles that you will see below will help you generate an effective user interface.
Next, I list the # principles of UI design
1. Put users in the center
The user is and always will be the center of the entire interface. Therefore, the entire process of research, ideation, conceptualization and development must revolve around the user and his needs.
The user interface should not be raised to satisfy only search engines, managers or marketing teams.
Interfaces must be developed with the user as the primary source of information and feedback.
For example, if you wanted to design a website for an optician or ophthalmologist, it would not make sense to use a very small font, since users with myopia would find it difficult to read it. If, on the other hand, we put the user at the center, we should use more legible and large fonts to make it easier for optician users to read.
Tips:
- Clearly define who is the user or "user person" of our product.
- Conduct research that revolves around the user and their needs.
- Carry out "testing" processes in the different stages of interface development.
- Promote a "User first" approach in the project.
2. Give users control (but not too much)
Users want to be in control of the interface and complete their goals in their own way. We typically see this in customizing colors, shortcuts, and choices. It is the job of the UI designer to generate that sense of control through a friendly interface. The user wants to feel in control and have the freedom to approach tasks her way.
However, providing too much control, through multiple options and decisions over technical or complex processes, will cause the user to feel overwhelmed by the product and no longer want to use it.
This refers to Hick's Law which explains that the time it takes to make a decision increases with the number and complexity of the options. Another way to explain it is through "the paradox of choice." Which shows that when users are faced with too much freedom, most of them stop enjoying the experience and resent the responsibility instead.
Giving the user too much control over the interface causes excessive cognitive effort that leads to rejection of the product. On the other hand, giving too little control decreases the satisfaction and confidence behind the usability of the product.
Tips:
- It allows users to control certain aspects of their experience with the product.
- The key is getting the right balance of control over the interface to the user.
- Demonstrates the states of an action or process in a visible way.
- Provide options that involve product customization.
- Make the more technical and advanced customization aspects of the product less visible.
- Avoid overwhelming the user with too many options that generate cognitive effort.
- It offers the option to undo actions in case the user regrets it.
People are happy to be led to success, so they don't need to worry about the complex or the small. They want to focus on homework, on having fun
3. Reduce cognitive load
Cognitive load is the amount of mental resources or mental effort that an individual has to expend to complete a task. The cognitive load drives the user to complete or abandon a tour. A website or application that generates a very high cognitive load ends up being abandoned by its users. This is because websites with very high cognitive loads force their users to memorize information, make complex decisions or start using the interface without any clear guidance on where to start.
The user interface should reduce the cognitive load through simplicity. It is the job of the UI/UX designer to reduce the cognitive load on users through clues with key information, simplified decisions, user guides, walkthroughs, and less technical language.
According to Miller's Law, the average person can only hold ±7 (plus or minus 2) items in their working memory. Therefore, if we do not want to overload the working memory of the users, we must simplify the experience and divide the information into small, more digestible blocks and easier decisions.
Tips:
- Provide visual cues that help the user NOT to memorize information
- Avoid making users make too many decisions on an ongoing basis
- Avoid making users have to re-enter information
4. Make user interfaces consistent
One of the most important principles in UI design is to keep interfaces consistent. This means maintaining a constant and consistent visual appearance and interactions.
It is important to maintain consistency in our interface because it prevents confusion for users and promotes familiarity with our product.
Maintaining a consistent user interface means that we must follow the brand's style, keeping the same colors, fonts, icons, screens, menus, interactions, buttons, and components under a series of clear brand guidelines. This is commonly called brand identity.
For example, if a dating app radically changes its navigation menu placement, colors, and typography from one screen to another, users would be disoriented, having become accustomed to the different elements, and might even think it was another app. .
Also, in accordance with the “Jakob Internet Users Act”. Experienced users spend most of their time on other sites. This means that users prefer your site to work in the same way as all the other sites they already know. So it makes sense to design for industry patterns and standards that users are used to.
For example, if we decide to put the "footer" of our website at the top and the navigation menu at the bottom, it is possible that this clashes with the past experiences that users have had on other websites and they do not understand the navigation of the same.
Tips:
- Maintain a consistent brand identity.
- Design the visual system and components of your interface in advance.
- Make the interface predictable by the user.
- Make elements have visual and behavioral consistency.
- Follow established industry standards and conventions (external consistency).
Users shouldn't have to wonder if different words, situations, or actions mean the same thing. Follow platform and industry conventions.
5. Make actions reversible
If we want users to interact more with our product, it is convenient to reduce their insecurity in making mistakes by making the actions reversible. Making an interaction or action reversible in an interface helps users be more willing to explore and experiment with the final product.
The most classic example of this comes from the Gmail platform, which has the option to undo the sending of an email within seconds of sending it. On the other hand, graphic design programs such as Adobe Illustrator and Adobe Photoshop have the option to undo the actions made by the user.
6. Make an interface easy to navigate
One of the most important principles of UI design is to facilitate navigation. Navigation is the ease with which a user can move through an interface. Users should never feel lost or intimidated by an interface with complex navigation; This is because good UI design allows users to know where they are, where they have been, and where they want to go.
It is the job of the designer to simplify the navigation so that it does not overwhelm or confuse the user. This can be achieved through clear iconography, familiar terminology, consistent structures, page titles, highlights of currently selected navigation options, and other visual aids that give users an immediate view of where they are on the interface.
In addition, users also need visual clues that allow them to easily predict an outcome. A user should never ask themselves when interacting with an interface "What is this button for?" because it reflects a lack of predictability and confusing navigation.
7. Provide timely feedback
When a user performs an action it is important that the interface gives him some type of response or feedback, this can be seen reflected in the change of color of a button just pressed, an animation or a simple message that says "Action X has been completed successfully” Another clear example of timely feedback is seen in the loading wheels that help the user to know that the interface is in the process of displaying an element and not that it is “hanging” or that the request has not been received by the user. user. This is an important UI design principle because it helps us make our interface more intuitive and useful for impatient users.
8. Demonstrate the status of the elements visually
Elements usually have 3 states, active, inactive and hover. These 3 states allow the user to receive timely feedback that the element is interactive, but more importantly, it tells them what is happening.
Demonstrating the state of elements visually involves creating overrides to elements of a user interface so that they clearly demonstrate actions and processes.
We typically see this in loading buttons or animations that show states such as "in progress" or "Completed" in this way, the user feels that the equipment or interface is working or that an element can be interacted with. Otherwise, the user may come to think that the "tool" has stopped working or that he has encountered something that was not interactive.
We can see quite a few examples of this in different user interfaces in real life. For example, an elevator has to demonstrate the state in which the user is located visually, so that, when pressing the button of a floor, a small monitor reveals an arrow accompanied by the number of the floor to indicate to the user that the machinery is ready. working and at what level it is exactly. If, for example, we were to remove their sophisticated screens from the elevators with the greatest stability and reduced movement on the market, users would be very nervous not knowing if the button itself is correct or if the elevator still works; Consequently, they would rely solely on their sense of balance to get an idea of where they are going.
Other advice related to the principles of UI design that we must take into account.
I share a series of extra tips that will help improve your user interface and are closely related to the principles of UI design.
Help users of different experience levels
Create shortcuts for advanced and tutorials or guides for newbies.
Relates things between the system and the real world
Use icons that relate to the actions, like a paper airplane for the send function.
Avoid unnecessary complexity
Reduce the number of options and use less technical language when necessary.
Make Design Accessible
Work with legible fonts and colors with reasonable contrast that meet accessibility standards.
Prevent the mistake as much as possible
Guide the user through a simple process that reduces having to repeat the same action or generate errors.
Prioritize recognizing over remembering
Give visual clues to statuses and key information instead of forcing the user to remember information such as passwords, usernames, or previous drafts.
REFERENCES
UI design principles: guidelines. (2021, 3 agosto). Justinmind. Recuperado 15 de diciembre de 2022, de https://www.justinmind.com/ui-design/principles
Guerra, V. (2021, 1 julio). User Interface (UI) Design | Insights & Inspiration | Adobe XD. Ideas. Recuperado 15 de diciembre de 2022, de https://xd.adobe.com/ideas/process/ui-design/
Adobe. (2021, 1 julio). The 4 Golden Rules of UI Design | Adobe XD. Ideas. Recuperado 15 de diciembre de 2022, de https://xd.adobe.com/ideas/process/ui-design/4-golden-rules-ui-design/
The Aesthetic-Usability Effect. (2017, 29 enero). Nielsen Norman Group. Recuperado 15 de diciembre de 2022, de https://www.nngroup.com/articles/aesthetic-usability-effect/
10 Usability Heuristics for User Interface Design. (2020, 15 noviembre). Nielsen Norman Group. Recuperado 15 de diciembre de 2022, de https://www.nngroup.com/articles/ten-usability-heuristics/
Maze. (2022, 20 octubre). The 6 Key Principles of UI Design. https://maze.co/collections/ux-ui-design/ui-design-principles/
Priya, B. P. (2021, 1 diciembre). What are the principles of user-interface design? tutorialspoint.com. https://www.tutorialspoint.com/what-are-the-principles-of-user-interface-design
Fleck, R. F. (2021, 6 diciembre). 10 Fundamental UI Design Principles You Need to Know | Dribbble. Dribble. Recuperado 15 de diciembre de 2022, de https://dribbble.com/resources/ui-design-principles
Kaushik, V. (2022, 6 abril). 7 Key Principles of UI Design – UX Planet. Medium. https://uxplanet.org/7-key-principles-of-ui-design-fbf05f5805f
UXPin. (s. f.). The Basic Principles of User Interface Design. uxpin.com. Recuperado 15 de diciembre de 2022, de https://www.uxpin.com/studio/blog/ui-design-principles/
Kaloyanov, N. (2022, 29 marzo). 10 Golden UI Design Principles and How To Use Them. htmlBurger Blog. https://htmlburger.com/blog/ui-design-principles/
Oliver Puente
Introducción al Diseño Web: Más que un simple gráfico
Diseño Web: La combinación de estética y funcionalidad El diseño web no es solo cuestión de crear algo visualmente atractivo;
Cómo Crear Landing Pages que Multiplican tus Ventas
Por qué las Landing Pages Son La Clave Para Multiplicar Tus Conversiones El mejor vendedor de toda tu vida. No
Lo que TODOS debería saber acerca del branding en Guatemala
Branding en Guatemala. Un acercamiento y guía sobre como posicionar una nueva marca en el mercado guatemalteco que atraiga a
How to Increase Your Conversion Rate Without Spending on Advertising
¿Cansad@ de invertir en publicidad y que no funcione? No te preocupes más, descubre en este artículo que es tasa
How to use Figma Auto Layout (Complete step-by-step guide)
El auto layout en Figma llegó para quedarse, y si quieres ser un diseñador UI/UX profesional, es necesario aprender cuándo
8 maneras infalibles de lidiar con la fatiga como diseñador gráfico
El cansancio o fatiga extrema cuando eres diseñador gráfico es una situación de lo peor. Pero como todo en la
