May 7, 2018 at 14:47Common mistakes that UX developers make
- Transfer
I am a UX consultant for one of Mendix ’s partners , and I often have to work with small, self-organized teams that create great applications to solve internal problems. My task is to improve UX in these applications.
The best moments in my work are when I am completely taken aback by the originality and creativity of problem-solving approaches and I find myself forced to explain why some seemingly logical practices actually turn out to be a bad idea.
All the solutions that I propose here are not the only correct ones, in each case there are exceptions; do not consider everything written below as a direct guide to action, but as a starting point for further discussion.
Of all the bad practices in UX, this is the most popular.
First you have a modest application with a compact interface, then you add a couple more functions and do not have time to look back - there are already solid buttons on the screen. There is nothing to be ashamed of, everyone has had such a thing.
When I see such solutions, I immediately think of a folding Swiss knife with all the blades extended at once, although in reality only one corkscrew is used from them.
Too many things.
When the user has all the options, it may seem that this creates a good overview. However, the problem here is that our brain is capable of covering at best 9 options for action, and even if, frankly, 95% of these buttons will be needed by the user only occasionally.
Proximity
Another problem is that the buttons should be located as close as possible to the information with which they interact. The more there are, the more this visual closeness is lost.
Users are ready to scroll
The opinion that no one likes to scroll through, usually arises as a side effect in a situation where the necessary context is not provided at the right time and the developer tries to solve this problem by pushing as much information as possible onto one screen to make it clearer.
“But our analytics show that only 10% of users reach the end of a one-page site” - it seems to be convincing evidence that 90% of the audience absolutely does not want to scroll.
However, the problem here is not scrolling, the problem is the amount of information. The fact that you move most of it to the top of the page does not mean that users will read and understand everything that is there - rather, that they will get tired and leave faster.
Miller's Law on the Laws of UX
Law of Proximity on the Laws of UX
So, you decided to clean the main screen and removed all the buttons in the drop-down menu.
The secret in balance
Imagine that your interface is physical space. If you hide the page in a closed cabinet, you will have to pull out the drawers until you find what you are looking for. A similar process occurs with UX in the digital environment.
If everything is arranged logically in boxes and the cabinet is in a convenient place, this may work. On the other hand, if you keep everything for the garden in the barn (it seems to be reasonable), is it worth sending barbecue accessories there too? Or is it better to keep them in the kitchen? Or both there and there?
Here, balance is crucial. The answer to the question of where the barbecue accessories should lie - in the kitchen or in the barn - is determined by how often you will use them.
If you have five buttons, perhaps they should not be removed in the drop-down menu, but if there are six of them, this is another story.
If you consistently adhere to the chosen design system and brand style, in the eyes of users all the pages will seem the same. Soon they will feel that they have lost their way in this labyrinth of pages and they don’t remember whether they got here earlier or this is some other screen with a similar set of states.
Imagine: Friday, the end of the day, you have attention deficit disorder, you are distracted from viewing the feed in social networks to questions from colleagues, from questions from colleagues to private messages and still trying to work. The last thing you think about is which link you just clicked on and what stage of the process you are at.
Design all pages specifically for such a user.
Another example of how developers are trying to get the most out of the available space on the screen.
The basic rule of web typography is no more than nine words per line. As soon as the line is finished, the eyes should immediately find the beginning of the next; if the line is too long, it will take effort.
“But so much space is wasted!” The original of this article is available on the Medium website. Have you ever paid attention to how much space “disappears” from them? In fact, this “loss” is nothing but an investment. If you are ready to give up so much empty space for text, it means something important is in it. And if not, then he is not needed at all.
Read more: “ Typographic approach to the design of letters ” from 1910
To save space, you add a popup window. When you click on one of its buttons, another window appears on the screen.
But what happens if I ...
The problem is that the user’s model of the process is collapsing in the mind, including its current position in it. What will happen if he clicks on the second window - he will be transferred to the first? Will he return to the main screen?
Therefore, you must either turn the first window into a full screen, or display an error message in the form of text embedded in it.
Cards are now in trend and, accordingly, only one card in a card can be better than one card. Breathtakingly.
Visual hierarchy is a popular topic among UX experts. We are talking about such an arrangement of elements on the page, which clearly shows the user how important each of them is. Gradually, for this purpose, developed a special physical representation - cards.
In their prototype, a deck of cards, all cards are the same size. They are placed in a certain order - on top, under or next to others, to indicate certain states or relationships.
When you put one card into another, users lose their understanding of what can be done with them at all. They subconsciously begin to question the relationships between other elements of the interface, and all logic collapses.
The solution here is simple! Do not put cards into each other, but place them side by side, close to each other or with a slight overlap (like cards on a table in a casino).
Which is better - display fields in the form of a long list? Or maybe break the process into several steps? Or make three columns of fields so that everything fits on one screen?
The main problem is not the number of fields or pages, but how many fields are displayed on the screen at a time. As with buttons, this number should be kept to a minimum while maintaining context and ease of use.
Limit yourself to one column. The
best practice is to always line up input fields in one column. Then the user's gaze will be able to easily move from bottom to top, marking each new section.
Is there a narrative?
Sometimes the information requested in the fields refers to the trip that the user is facing (for example, onboarding), it happens that it has serious consequences (for example, entering data on tax payments). In such cases, it's time to spread the fields across multiple pages. This gives the user a visual break to take a break, and you get the opportunity to explain in more detail what they are doing and why it is so cool or so important.
Drop-down menus
If no more than five options are offered for selection, please do not remove them from the drop-down list. I understand that it’s so elegant and all that, but it’s just not worth the extra effort on the part of the user. Attaching radio buttons to them is a much more convenient approach.
Read more:
“ How to make the shape better"From the UX Collective
" One or more pages in forms? »From Stackoverflow
Some elements on the page serve to orient the user and show his current location, while others should be designed as standard and simple as possible.
The most common example is the Accept and Cancel buttons and disputes about which one to put to the right and which to the left. The general rule is as follows: the button for the action that takes the user to the next stage of the process should be green, located on the right and have a signature explaining why it is needed (“Accept”, “Continue”, “Order”).
The situation is complicated with the so-called destructive actions. For example, how should the buttons on the screen be marked for those who want to cancel the subscription - “Unsubscribe” and simply “Unsubscribe”? Similar cases are considered in the article “ Writing Text for Destructive Actions ” by UX Collective.
The best moments in my work are when I am completely taken aback by the originality and creativity of problem-solving approaches and I find myself forced to explain why some seemingly logical practices actually turn out to be a bad idea.
All the solutions that I propose here are not the only correct ones, in each case there are exceptions; do not consider everything written below as a direct guide to action, but as a starting point for further discussion.
All on one screen
Of all the bad practices in UX, this is the most popular.
First you have a modest application with a compact interface, then you add a couple more functions and do not have time to look back - there are already solid buttons on the screen. There is nothing to be ashamed of, everyone has had such a thing.
Arguments in favor:
Less clicks
But immediately everything is visible, good review
Users do not like to scroll
When I see such solutions, I immediately think of a folding Swiss knife with all the blades extended at once, although in reality only one corkscrew is used from them.
Too many things.
When the user has all the options, it may seem that this creates a good overview. However, the problem here is that our brain is capable of covering at best 9 options for action, and even if, frankly, 95% of these buttons will be needed by the user only occasionally.
Proximity
Another problem is that the buttons should be located as close as possible to the information with which they interact. The more there are, the more this visual closeness is lost.
Users are ready to scroll
The opinion that no one likes to scroll through, usually arises as a side effect in a situation where the necessary context is not provided at the right time and the developer tries to solve this problem by pushing as much information as possible onto one screen to make it clearer.
“But our analytics show that only 10% of users reach the end of a one-page site” - it seems to be convincing evidence that 90% of the audience absolutely does not want to scroll.
However, the problem here is not scrolling, the problem is the amount of information. The fact that you move most of it to the top of the page does not mean that users will read and understand everything that is there - rather, that they will get tired and leave faster.
Miller's Law on the Laws of UX
Law of Proximity on the Laws of UX
Drop down menus
So, you decided to clean the main screen and removed all the buttons in the drop-down menu.
Arguments in favor:
More focus
No piling up, it is easier to find what you need
The secret in balance
Imagine that your interface is physical space. If you hide the page in a closed cabinet, you will have to pull out the drawers until you find what you are looking for. A similar process occurs with UX in the digital environment.
If everything is arranged logically in boxes and the cabinet is in a convenient place, this may work. On the other hand, if you keep everything for the garden in the barn (it seems to be reasonable), is it worth sending barbecue accessories there too? Or is it better to keep them in the kitchen? Or both there and there?
Here, balance is crucial. The answer to the question of where the barbecue accessories should lie - in the kitchen or in the barn - is determined by how often you will use them.
If you have five buttons, perhaps they should not be removed in the drop-down menu, but if there are six of them, this is another story.
Where I am?
If you consistently adhere to the chosen design system and brand style, in the eyes of users all the pages will seem the same. Soon they will feel that they have lost their way in this labyrinth of pages and they don’t remember whether they got here earlier or this is some other screen with a similar set of states.
Arguments in favor:
Consistency in visual style
System-based design
Efficient use of screen space
Imagine: Friday, the end of the day, you have attention deficit disorder, you are distracted from viewing the feed in social networks to questions from colleagues, from questions from colleagues to private messages and still trying to work. The last thing you think about is which link you just clicked on and what stage of the process you are at.
Design all pages specifically for such a user.
- Each page should have a clear title or title.
- If the user leaves the main page more than one step further, enter breadcrumbs
- If a process is carried out in several steps, show their entire sequence on the screen.
Long lines, small text.
Another example of how developers are trying to get the most out of the available space on the screen.
Arguments in favor:
Users do not like to scroll.
Effective use of space on the screen
The basic rule of web typography is no more than nine words per line. As soon as the line is finished, the eyes should immediately find the beginning of the next; if the line is too long, it will take effort.
“But so much space is wasted!” The original of this article is available on the Medium website. Have you ever paid attention to how much space “disappears” from them? In fact, this “loss” is nothing but an investment. If you are ready to give up so much empty space for text, it means something important is in it. And if not, then he is not needed at all.
Read more: “ Typographic approach to the design of letters ” from 1910
One popup in another
To save space, you add a popup window. When you click on one of its buttons, another window appears on the screen.
Arguments in favor:
Better context
But what happens if I ...
The problem is that the user’s model of the process is collapsing in the mind, including its current position in it. What will happen if he clicks on the second window - he will be transferred to the first? Will he return to the main screen?
Therefore, you must either turn the first window into a full screen, or display an error message in the form of text embedded in it.
Card in card
Cards are now in trend and, accordingly, only one card in a card can be better than one card. Breathtakingly.
Arguments in favor:
Cards are needed to create a visual hierarchy
Visual hierarchy is a popular topic among UX experts. We are talking about such an arrangement of elements on the page, which clearly shows the user how important each of them is. Gradually, for this purpose, developed a special physical representation - cards.
In their prototype, a deck of cards, all cards are the same size. They are placed in a certain order - on top, under or next to others, to indicate certain states or relationships.
When you put one card into another, users lose their understanding of what can be done with them at all. They subconsciously begin to question the relationships between other elements of the interface, and all logic collapses.
The solution here is simple! Do not put cards into each other, but place them side by side, close to each other or with a slight overlap (like cards on a table in a casino).
Form fields and what to do with them
Which is better - display fields in the form of a long list? Or maybe break the process into several steps? Or make three columns of fields so that everything fits on one screen?
Arguments in favor:
Users do not like to scroll
The main problem is not the number of fields or pages, but how many fields are displayed on the screen at a time. As with buttons, this number should be kept to a minimum while maintaining context and ease of use.
Limit yourself to one column. The
best practice is to always line up input fields in one column. Then the user's gaze will be able to easily move from bottom to top, marking each new section.
Is there a narrative?
Sometimes the information requested in the fields refers to the trip that the user is facing (for example, onboarding), it happens that it has serious consequences (for example, entering data on tax payments). In such cases, it's time to spread the fields across multiple pages. This gives the user a visual break to take a break, and you get the opportunity to explain in more detail what they are doing and why it is so cool or so important.
Drop-down menus
If no more than five options are offered for selection, please do not remove them from the drop-down list. I understand that it’s so elegant and all that, but it’s just not worth the extra effort on the part of the user. Attaching radio buttons to them is a much more convenient approach.
Read more:
“ How to make the shape better"From the UX Collective
" One or more pages in forms? »From Stackoverflow
Why is this button needed?
Some elements on the page serve to orient the user and show his current location, while others should be designed as standard and simple as possible.
Arguments in favor:
But Apple / Google does it!
The most common example is the Accept and Cancel buttons and disputes about which one to put to the right and which to the left. The general rule is as follows: the button for the action that takes the user to the next stage of the process should be green, located on the right and have a signature explaining why it is needed (“Accept”, “Continue”, “Order”).
The situation is complicated with the so-called destructive actions. For example, how should the buttons on the screen be marked for those who want to cancel the subscription - “Unsubscribe” and simply “Unsubscribe”? Similar cases are considered in the article “ Writing Text for Destructive Actions ” by UX Collective.