Nowadays it is no longer enough to make a unique web page, with a great design, with a high-quality content or that is simply responsive. Users increasingly spend less time “fighting” with a web page or an app, so we must make them feel comfortable from the first moment they interact with our application. But how? Usually, all the responsibility of the user experience falls, as it may seem normal, on the designer or UX expert. In my opinion, this is one of the big mistakes that makes getting a web page with great experience very difficult to achieve. This, above all, happens in smaller teams where many members of the same company intervene generating content, creating new sections, writing blog entries, uploading images, etc.
For this reason, it is advisable that all the people involved in the creation and subsequent management of the website have a basic knowledge of UX. Knowing some tips will be very useful in your day to day to maintain good user experience. This article is aimed precisely at that professional profile that, in some way, can (unknowingly) compromise at some point the user experience of a page and that could be avoided with 10 simple tips. I’m going to explain them to you!
1. Get to know Maslow’s pyramid
In the 1950s, the humanist psychologist Abraham Maslow developed a theory in which human needs were shaped in a pyramid. This pyramid, which bears his surname, consisted of five levels that, starting from the base, would be in this order: physiology, safety, affiliation, recognition, and self-realization. Starting from this idea, Aaron Walter, in his book Designing for emotion, extrapolates the Maslow pyramid to the UX field in a pyramid of four levels that correspond to the emotions that a user experiences during the use of an application, which in the case of this article would be for a web page. When you do not have much experience in the field of UX, keep in mind this pyramid can help us prioritize what actions we must take to improve our page.
2. Keep in mind the laws of Gestalt
The psychologist Max Wertheimer established the laws of Gestalt in his study of Gestalt psychology, in which he analyzes the perception of forms. From this work by Wertheimer, we can extrapolate these very useful rules for the UX that I learned in the book User Experience Design (UX) by Juan Manuel Carraro and Yanina Duarte.
3. It uses the color well
When I think about the color that is applied to a web page, I see two objectives that these have to fulfill: So, we must find that balance in that, without losing brand identity, we must use the minimum of colors possible so that there is no ruthless battle between them, since this will only make each color lose individual importance. Keep in mind that not using more colors our website will be more striking or attractive to the human eye.
Use as few colors as possible
It is basic to make an austere selection of colors in which we determine one that draws special attention within the palette. The use of two colors would be the ideal solution. If, for example, you use a black and an orange, you can use this second only to style buttons and/or links and, thus, get these elements highlighted. Three or even four colors could be within the optimum if done correctly. If we use more colors and it is not done correctly, we can get a website that is difficult to interpret and that the really important elements do not stand out from the rest.
Use color to highlight the important
It is considered a good practice to use the same color and style for the links of a web page. In this way, the user can identify which elements are links quickly, since they all meet the same standard.
We must have this law always present, although on paper it seems a very correct rule; the certain thing is that in a few occasions it can be respected completely. A clear example that this law can not always be used is when the web design prevents us, for example, that the menu links can maintain that color in a corporate header. On the other hand, sometimes we want the button of a call-to-action (CTA) to stand out, in addition to the rest of the content of the page, with that of the links. That’s why reserving color for this kind of elements is a good resource. As always, we must be aware that the more this color is used, the less it will stand out where it is used. My advice is that you do not abuse it!
Combine colors harmonically
When a selection of colors is made, we can not do it arbitrarily, since for our blog or web page to be pleasing to the eye they have to combine. In addition, we must bear in mind that, in turn, those who have to stand out from the rest have to achieve their objective. This task may not be easy without some basic notions in design and color treatment, but luckily there are a lot of web pages that help us create color palettes for free. Here I give you a list of the best known: White spaces are a very powerful resource when it comes to guiding the user’s eyes and helping him to detect groups of elements easily. There is a very simple rule that will help us to space our elements correctly: the more common the elements have, the more together they must be among them. With a very simple example, we will understand it without problems. According to this norm, the space that exists between the header, the sidebar, the content area and the footer of a blog would be, for example, 90 px.
The space between the sidebar widgets should be less than 90 px, such as 60 px. In this way, creating less space between these elements, we already group the sidebar visually (Gestalt’s proximity law). To continue with the example, the spaces of the interior elements of each widget should also be less than 60 px to visually group each widget separately.
5. Simplify and dose
When we land on a web page, it is common to find a series of stimuli that, if they are abusive, can make the action that we intend to do much more difficult, such as reading a blog article. Do you think the same?
Doses the stimuli do not saturate
It is clear that we need users to subscribe, to download content and to provide us with their data in order to have a good record base, but if we abuse stimuli we can create rejection by making the main task difficult, which is to read the content. If we facilitate reading, and the content is of quality, we will awaken the user’s interest. Possibly, to remind you at that moment that you can subscribe can be more successful than if we launched a pop-up upon entering the post.
Do not forget the role of each page
As I commented in the previous point, the goal of a user to access a post is to read it, to enter a contact page is to send us a message or know where we are physically, and so with each of the pages of our website . It is very important to remember this point (obviously it seems) since we often forget the objective we intend to achieve when designing the content and its structure.
Try not to frustrate the user
Avascular with pop-ups at inappropriate times hinders the user’s goal (such as reading an article) by trying to impose certain actions that interest us (such as clicking on a CTA). That is why we have to try to use common sense to achieve an adequate balance with the interest of both. And is that a bad experience or saturation of actions can mean a rejection of the user to our website, so we may lose a future customer or lead. Avoid it!
6. Add an intelligence layer
When we talk about adding intelligence, we refer to using the information we have to try to show, in the right place and at the right time, relevant information for each user. Here are some simple examples:
Avoid showing a subscription form if the user is already subscribed
A good example of how to add an intelligence layer in the way we interact with the user is to avoid showing a subscription form to a user who is already subscribed. With the space that we gain, we can show you different information focused on a more loyal user.
Dosage and be patient in the collection of information
Do not try to collect all the information you want from a user in a single form if that means you have to fill one with more than 5 fields. Be patient and resourceful to be requested information in a more stepped way and … avoid asking again for the information you already have!
Segment your users to show them more effective messages
Thanks to the cookies of the browsers we can recognize a user when he is on our website. This makes it possible for us to better focus the messages and actions that we intend to do based on the segment of our database that is found. For example, a user who visits us for the second time will not be the same as a user who has visited us for several months, is subscribed to the blog and has also downloaded some content, providing us with information such as age or profession. Instead of focusing the strategies in a generic way, try to aim more accurately.
7. Use clear and direct language
The texts on our website, such as titles, descriptions, form labels, buttons … all have their importance in usability. Doing an adequate job with these will greatly improve the user experience. Do you want to know how?
Use a direct and close language
I recognize that I am a fan of the concept “less is more”, and the text of the website is not exempt from this rule. Make sure that the texts on your site are strictly necessary, that they are direct texts and that they give clear information to the user. That is, do not walk around the bush or waste your time reading empty content texts.
Work the copy, all the copy
When we refer to the fact that we have to work on all the texts on the page, we do not only refer to the contents of a post or the description of the company on a corporate page. We refer to “everything”: from the titles of the widgets of the sidebar to the texts of each item of the navigation menu, the texts of a subscription element to the blog, etc. All texts are key to guide and help our users know at all times where they are and that the actions they are doing do not lead to unexpected results. Have all the control!
Pay attention to the elements that require an action
To elements such as form buttons, call-to-action or a simple link, sometimes, they are not given the importance they deserve. It is common to see a ” Send ” in both a comment form and a form that triggers a download of a file when obviously both perform completely different actions. It would be more appropriate a ” Send comment” and ” Download file ” respectively since with the text of each button we will be indicating to the user what each element is for. These elements are usually the ones ignored when in fact they can be very important to improve the experience of our page. Attention, then, to detail!
8. Accessibility or how to make your website usable for all
Work navigation dictated
This will help users with vision problems to work on your page without problems. Working with dictated navigation means that each element contains a clear and direct description of what it is. So, it works the properties “alt” of the images and “title” of the links in an appropriate way.
Make sure you can navigate with the keyboard
The order in which the elements of the page are organized in the code is fundamental so that keyboard navigation is linear and jumps from one element to another with logic. Also, highlighting when an element is “in focus” helps, even more, to know what element we are in.
Check that your page experience is not compromised by expanding the text size
An option that is not usually thought but that many users use is to expand the text, and is something that virtually all browsers allow. That is why we must ensure that the structure of our page is not compromised when viewed with different sizes and fonts.
9. Think of the user and not Google
The algorithm of Google aims to reward pages that have good usability and quality content. Therefore, if we strive to offer good user experience and take for granted that the content we offer is of quality, we do not have to worry about Google. On the contrary, if we strive to position well and Google does not penalize us, it is easy to neglect the user or not to take care of all the details that we have been seeing in this article.
10. Test and analyze
In the world of the user experience, there is no absolute law. What may work in one site may not work in another, simply because the type of user or the percentage of devices that are accessed are different and, thus, a host of exceptions and etceteras. That is why taking into account some basic rules such as those specified in this article is perfect to have a starting point. But from here we do not have to settle, we have to know our users and try to constantly improve the experience.
The importance of A / B testing
A powerful tool the sea of effective to improve any element of our page is the A / B tests. These allow us to test changes in elements of our blog that will be shown randomly to 50% of users and then see if they really improve or not the results. For example, we can show a subscription pop-up to half of the users as soon as we access the blog and the other half we will show it once they have read half of the article, in this way we can know with data which of the two options is best.
But we will make a mistake if we only stop here. What happens if we show it to you when you have finished the article? What if we show it right when we get to the blog and in case it closes the pop-up we show it again halfway through the article? As you can see, the ways in which we can try to improve the user experience are practically unlimited, so testing, analyzing and re-testing must be a continuous work in our blog.
From more theoretical and basic concepts to more concrete actions, I have tried to include ten tips that anyone can apply on their website. In the end, we are all users of websites and applications, and we are grateful when we arrive at a site where our trip has been taken care of by its page, so, why not get the same for our users? I hope the article has been useful for you and you have gained more awareness of what you can do to improve the usability of your website. As you see, it’s in your hand! Remember to use the comments for any questions or comments you want to make in relation to this topic. I will be happy to answer you. Until next time!