UX Design Guide
When we face a UX Design project it may seem a bit overwhelming thinking about every little detail that must be taken into account. This is why we decided to write down a compilation of the key elements which we must make sure that are done effectively when we face this kind of challenge.
Of course, each project is different, and has its own specific requirements. Also, every decision that is made regarding design must be backed up by research, with its respective iterations, that have to validate the decision that was made. Nevertheless, this list is a good starting point so we can make sure that we had everything taken into account.
UX Design is divided into four fields that we must work:
- Information Architecture
- Interaction Design
- Visual Design
- Typography
At the same time, within each of these four categories we could unfold some other key elements, which we will talk about in a moment.
Information Architecture
Information Architecture is in charge of the structure and tagging of the content so that users can easily find the information that they are looking for.
These are the main elements that we must take into account:
- Navigation must be consistent. Users have to be able to find their bearings and navigate around the digital product. To appropriately test information architecture we can use techniques such as tree testing or cardsorting.
- Information architecture should have the possibility to grow without problems. Redesigning information architecture is complex, so when we are building it we need to make sure that there is a possibility to add more categories or functionalities into the digital product.
Interaction Design
Interaction Design (IxD) is the branch of UX which studies, plans and applies the interaction elements between users and the product, and its objective is to achieve a pleasant experience.
These are some of the most important elements that we have to check and make sure they have been dealt with correctly:
- Repetitive or very frequent actions can be done effortlessly. We have to analyse the product flows and make sure we can design a way of easing these tasks. For example, if we must log in, we can ease the process by automatically adding the information that was already given.
- Possible user mistakes must have an easy solution. The best way of fixing a user problem (4xx problem) is that they, directly, are not produced. Designing for mistakes consists in creating intelligent confirmations, warnings or prevention signs, adding restrictions, giving the possibility to undo previous actions and showing the result before the action.
- Accessing the help menu should not stop the progress of the user. In the case a user needs help to complete an action, we have to make sure we provide a solution (through an FAQ list, for example), trying to avoid that the workflow is interrupted by accessing help.
- Onboarding process should be easy for new users. Onboarding experience is the first impression that the user gets from our product, so it is key to hold them and for them wanting to repeat.
- There should be a workflow progress indicator with several steps. The product progress flow should be verified to make sure that we include an indicator of the progress, which reduces the abandonment rate.
Visual Design
Visual Design is in charge of how one sees and how one feels navigating through a digital product. Also, it works other aspects like the state of mind, level of entertainment or pleasure the product may result in the user.
This is a quick guide for the main elements we should take into consideration:
- Two or three main colours are used. This rule does not always apply, but as a general rule products should just have a set of one or two primary colours, since combining more than two can be complicated and result in visual noise.
- Colour is not only used to transmit hierarchy or functionality. Accessibility is a really important characteristic in digital products, so we need to make sure that there are other elements that ease understanding and accessibility of the product.
- Visual hierarchy helps the user to carry out the required actions. Users trust patterns they already know, so it is essential that, by creating a visual hierarchy, we help the user identify which elements are more important or what actions they can carry out.
- Primary actions should be visually different from secondary actions. While designing actions we must differentiate them by the use of colours, size, position or any other element that could help identify their easy identification.
- Interactive elements should work properly. For example, if a line of text is underlined and in blue, it’s a pattern which identifies it as a link. We must meet the expectations the user has and avoid creating unnecessary frictions.
- Sending the form is confirmed in a visually different way. In case our digital product does have an option of sending a form, we must create a confirmation message which allows the user to make sure that it was sent correctly.
- Alert messages are consistent and visually different. Alert messages should be designed in a way that users can easily identify them and at the same time does not increase the cognitive load.
- There is a loading page which indicates users their petition is being processed. If we want to keep the users engaged while they are waiting, we must inform them of what is happening at every moment and try to reduce their frustration.
Typography
The typography choice we make is really important, since it can completely modify the way a product feels. One of the UI trends we will see during 2022 is the use of new typographies.
These are some key aspects that we should bear in mind:
- We should not use more than two different font families. Just as the colour rule, this is not a rule that should be strictly followed, but using just one or two typographies is what is usually recommended, since it will ease understanding of the product.
- Fonts should be in a readable size. It is very important that we make sure that the font size is legible on every device.
- Using capital letters only when necessary (tags, headings or acronyms). Capital letters can produce visual noise and increase the cognitive load for users, so we should only use them when strictly necessary.
- Font size and weight differentiates between each kind of content. By making a clear distinction between headings, subheadings and paragraphs we can reduce the cognitive load of consuming the content, and it improves readability and comprehension.
As we said at the beginning, every project is different, but this quick guide could be a nice starting point.
This article is a translation of the one which was published in our corporate website:
