Every website must know how to capture the attention of users, providing the information they are looking for in a simple and effective way. This is why user experience and user interface are fundamental.
Each website is a world with precise rules. If it is true that the UX Designer deals with all the research and analysis of the experience deriving from the concrete use of the digital product, the UI designer is the professional who creates the connection bridge that allows the human being to relate to it. The interface designer then translates the experience into web page / app layout , suitable for being consulted by users and in line with the marketing objective defined with the stakeholders.
Precisely for this reason there is no good user experience without a good user interface .
Convey value? A matter of design… but not only
We must also not forget that when it comes to design one of the most important aspects is the perceived value of what is done and that, even if the research and design part is fundamental, often the visual part is the one that is appreciated the most. by non-experts.
To best convey this value to the end user, the website interface is precisely the most suitable tool. As?
Making sure that the interface can perform its tasks :
- reveal to the user only the relevant parts for the purpose of the objective
- hide the complexity of the internal workings of the system
- be easy to learn, comfortable to use
- make the user feel comfortable
There are rules that designers should keep as a checklist to follow in order to get the job done right. The following is intended to be a list of 12 essential points, a how to to design intuitive interfaces and simplify the users’ task.
1. Think and draw responsive
Between September 2016 and March 2017, the number of users accessing the internet via mobile devices exceeds the number of people who surf from desktop only (25% vs 24%, comscore.com survey ). Not contemplating the possibility of optimizing content for mobile is therefore being professionally anachronistic. What we must not forget is to design the website not only for the desktop, but for each device that has its own methods of use and gestures.
2. Simplify website navigation by logically grouping elements
Grouping related items is a key way to increase usability . Related or similarly meaningful objects should be placed in close proximity to each other to respect logic and generate less cognitive friction . Taking a long time to search for features is often frustrating.
3. Direct handling
When viewing lists of data we usually want to allow the user to perform an action with the items in the list. By clicking on an element it can be manipulated (modified, deleted, renamed, etc.). Another example of direct manipulation would be: clicking on an element (for example a text field with an address), which turns into an editable field.
The advantages are:
- Fast, incremental and reversible operations;
- Ease of learning and memorization;
- Possibility of exploring the system;
- More importance to recognition than to remember;
- Immediate feedback of the actions performed;
- Minimization of errors.
4. Principle of consistency in interface design
The call to action of the website must be clear , precise and recognizable , those that have the same function must have the same style within the same site.
You must always design the ‘states’ of the buttons, for example the states of “hover” (when the mouse passes over the object) and “active” (on click).
The text contained within the website must be as clear and speaking as possible with respect to the interaction. Links within the text must also be recognizable from the rest of the paragraph with a different underline or color.
5. Forms should have only necessary information
Humans are lazy, especially for filling out fields on a form. Each unnecessarily repeated field , or evaluated as superfluous, increases the possibility that the user decides not to register .
Remember that not all users type at the same speed, some find it particularly difficult or slow, and filling out a mobile form is even more challenging. So ask yourself if each field is really necessary. Furthermore, never forget to indicate the obligation with an asterisk, this will avoid unnecessary re-insertions after generating an error for a field not filled in correctly.
6. Explain the options
In every dropdown menu you use, a set of actions are hidden within, which require effort to be discovered. If these options are at the heart of the path to getting useful information or taking important actions, then you might want to consider making them explicit . Try using dropdowns only for complex menus or absolutely predictable choice options, such as a calendar or geo-references.
7. Visual website hierarchy
A good visual hierarchy separates primary elements from secondary elements. It is the result of alignments, proximity, colors, tones, text indentation, font size, element size, padding, spacing, etc.
When the visual language respects the hierarchy and is applied correctly, we will have greater readability of the information and the user’s attention will be focused on what the designer or content manager has decided to emphasize, the time spent on the page will probably be higher and more user-captured information.
The visual hierarchy is also so important to give the right weight to fundamental information: perhaps a huge mistake like that of the Oscars ceremony could have been avoided 😉
8. Form follow function
The icons and all the other patterns the user is used to, such as sliders, pagination, mouseover effects, calls to action, arrows that warn us that there is a submenu and clear labels, facilitate the use of the site . The imperative is: don’t make your user think, but make everything easier for him.
9. Web font
Reading on a monitor is more difficult than reading on paper: the text is not stable for page refreshes and is backlit. Also given the posture we assume in front of a screen, the eye needs a visual anchor to read more comfortably, which is why justified paragraphs <text-align: justify;> should always be avoided .
The body of the text is also fundamental to ensure good readability, which should never be below 12px: consider that the minimum limit for which legibility is compromised even for those who have no vision problems is 9px.
The font you choose will be the tone of voice of the site. Therefore, its choice should not be evaluated only from an aesthetic point of view. but also from a functional point of view. Choose fonts with good readability and fonts that are born to be web. Fonts because they will have a better randerization.
I summarize the aspects to consider:
- readability comes first (better choose fonts born for the web)
- font size: greater than 12px
- the font must
- contain all characters you need (check all accented letters)
- be freely usable or purchasable
- be of good quality and have both uppercase and block letters
- handle kerning correctly (letter-spacing)
- be available in different formats (for cross-browser compatibility it is good to provide the font not only in TTF format, but also EOT, WOFF and SVG)
Vector images are created from lines and curves (vectors). They have the particularity of always resulting in high quality even at different resolutions, without losing definition .
Bitmap images, on the other hand, are created from pixels placed within an area. When you resize a bitmap , the image may be “grainy” losing quality. This is because the pixels that compose them are fixed on a grid of fixed dimensions. For this the icons should always be loaded as vector files. This will allow you to have a single icon that can be larger for mobile and tablet, given the retina screens, without losing definition.
Micro interactions are small, but fundamental design details, actions that help the user experience interact with the site or app. Micro interactions, when designed and used well, can:
- Increase the relationship between users and product
- Improve the perception of a company / project
- Create natural and immediate interactions
- Maintain the focus on empathy in design
- Making our life easier
12. Error handling
The last but not least!
The designer, as already mentioned, must analyze what users usually do, creating digital products that use common patterns and ensure that the interface created has elements that are easy to access, understand and use to facilitate the actions of the users themselves and minimize the mistakes . Each action must be reversible and leave the user the certainty of being able to modify and repair any of his errors.
Now all you have to do is use the design to guide people into interfaces that are as simple and intuitive as possible .
Remember that the user experience depends largely on you, because he himself comes into contact with the design that is contained, but also form… and these two aspects contribute together to the success of a project; finally you will help the company to differentiate itself on the web.