Publicado en
July 1, 2020

Keys to a consistent UI design on your website

Carlos Alberto Piana
UI-UX Designer

When we designed a website, we tend to think that every user is able to understand the action that is expected of them. But most of the time, quite the opposite happens and can lead to confusion or frustration. As Steve Krug (usability expert) rightly says, we have to differentiate between how we think that users use a website and the way in which they actually do it. It's a fact, users generally don't read pages in order. There are three psychological factors to consider if we want to design websites that are consistent and effective in achieving previously set objectives.

Design consistency is the set of elements that are part of the user interface (UI). And the fact that the user recognizes each element of the interface at a general level and the actions to be performed are predictable, are traits of a good, consistent design and, therefore, a pleasant one. user experience.

The objective is simple, it has to be created thinking like the user, making it easy for them to interact with the product. In order to provide a coherent design and UI elements, it must first be taken into account three factors that determine how a user generally uses a website:

1. We don't read the pages, we do a visual scan

Getting consistent data from the user in general when visiting a website is risky. What is clear is a common fact of this century; we are in a hurry. For years, motivated by the excess of information and its accessibility today, we have been training ourselves little by little, to pay attention only to that information that seems useful and relevant to us. We have unconsciously learned that we don't have to read everything and the worst thing is that we have discovered that we are good at looking for what really interests us.

2. There are no optimal decisions, only satisfying decisions.

When designing web pages, a common mistake is to think that once the user arrives at the website and scans it, he takes his time to weigh the different options it offers and, with that, to make a decision. Returning to the concept of scarcity of time and being realistic, most of the time the user does not value all the options provided by the web. It tends to select the first option that supposes that it can lead to what you are looking for or expecting, giving more room to the possibility of frustration, confusion and/or rejection on the part of the user. It should be noted that normally the consequence of having clicked by mistake is easily solved by going back, a recurring action for those sites where the design is so inconsistent, that it is preferable to click instead of trying too hard to understand the information provided.

3. We have ceased to be curious to become well-behaved

One of the aspects to consider when designing consistently is the usability, since it offers us the degree of ignorance on the part of the user when interacting with a website. Sometimes we don't mind making the wrong click, since we're familiar with the “Back” button to go back or we know for sure that by clicking on the site's logo, we'll return to the Home page. Other times, the surprise factor will appear when you have clicked on something totally inappropriate, generating unexpected experiences. For this, it is vital to ask ourselves, Is it important to understand the user? And the answer is clearly yes, quite a lot. Although the user can get by with clicks, we must recognize that many clicks end up being ineffective in the face of the action we expect them to perform, increasing the margin of error, frustration and abandonment.

Experiencia de usuario y diseño web consistente

Making the information understandable gives more consistency to the general design of the site, since the probability that the user will find what they are looking for is greater, it gives more possibilities for the user to understand together what they want to transmit the site, we can even take them to sites or perform actions that they did not expect, surprising them positively and making them feel more secure and convinced that they know how to use the website.

Once we have internalized these three factors with which we as general users can feel identified, it's time to ask ourselves...

What can we do to ensure that our website transmits a pleasant experience with a consistent design??

1. User Research

Get to know your user. The question is identify how you think and interact with the product to solve unmet needs or reduce frustrations generated. By detecting what they need and what they like, we define objectives to be achieved, we adapt the design according to the needs, resulting in interfaces that improve the user experience.

2. Establish consistent design patterns

One of the keys to good design is minimize as much as possible the actions that the user has to perform to achieve the objective. Patterns help us to standardize the elements before the user's eyes, thus generating consistency and familiarity with what they are interacting with and letting them know what they need to do.

For this reason, it is important to establish a hierarchy of the design, taking into account the order and priority of each element with which the user interacts. By element we refer to any element related to the brand, be it logo, color or typography, together with other more visual elements such as components, grids, buttons, etc.

These elements end up creating a design system - design system - that collects every pattern applicable to design, thus transmitting what you want to communicate, without losing focus on improving the user experience.

3. contends

Content is also one of the keys to achieving a consistent design. Content plays a crucial role in UI design, it's not just about the text itself, but how it's visually presented, how things are listed or named or the amount of content are some factors to consider. If the content is clear, legible and understandable, we will bridge the gap of confusion and frustration on the part of the user. The objective is to communicate with consistency and coherence.

 

How can we help you?

If you need more information, do not hesitate to contact us.

Publicado en
This is some text inside of a div block.

Heading

No items found.
This is some text inside of a div block.
This is some text inside of a div block.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Block quote

Ordered list

  1. Item 1
  2. Item 2
  3. Item 3

Unordered list

  • Item A
  • Item B
  • Item C

Text link

Bold text

Emphasis

Superscript

Subscript

Servicios

Cómo podemos ayudarte

Consulta los servicios con los que te ayudaremos a conseguir tus objetivos digitales.

servicios

Otros artículos

Proyectos de interés