In my job as UX Consultant for a Mendix partner, I often come across self-organizing teams creating awesome internal applications. My job involves improving the UX within their applications. The best days are when I am completely blindsided by the ingenuity of the creative ways some problems are solved, forcing me to explain why some logical solutions are a bad idea. These solutions are not a “single truth”, there are always exceptions, don’t quote me on anything written here, but use it as inspiration to start the conversation. Here are some common UX mistakes that business developers make, along with my recommendations.
Everything On a Single Screen
This is the most commonly implemented UX bad practice. You start your app with a tight interface, add a couple of features and before you know it, you have a screen full of buttons. Don’t feel bad, we’ve all been there. The arguments for putting everything on a single screen are that it requires fewer clicks, you can see everything in an overview, and users hate scrolling.
Whenever I see this interface solution it reminds me of a Swiss army knife with all the tools unfolded, and the only one that is used is the bottle opener. Having all the options clumped together seems like it creates an overview, but the problem is that your brain can only understand nine options at best, and let’s be honest, the user probably doesn’t use 95 percent of the buttons that often.
Another problem is that buttons should be close to the data that they influence. Having more buttons means losing visual proximity.
The “users hate scrolling argument” is often a side effect of not having the right context at the right time, and solving it by cramming as much information in a single screen to help create context.
“But in our analytics, we see that only 10 percent of the users scroll to the bottom of our landing page.”
This seems like a safe bet to conclude that 90 percent of your audience hates scrolling. The problem is not the scrolling, its the amount of information. Having more information higher on the page doesn’t mean that users will absorb that information, it means they will burn out quicker and cause them to leave the page.
So you’ve cleaned up your screen and put all the buttons in drop downs. The arguments for drop-down buttons are that they create more focus and less clutter so it is easier to find what you need.
Balance is key. Think about your interface as a physical space, if you hide a page in a set of drawers, you need to open every drawer until you find what you are looking for. This is the same for digital UI. If your drawers are logical and are in the right place this works well. Having garden supplies in a drawer in your garden shed sounds smart, so should your BBQ supplies go in there too? Or in the kitchen? Or both?
A good balance goes a long way. How often you use your BBQ determines if it should go in the shed or kitchen. If you only have five buttons, they might not need to go in a drop down, but six buttons, that’s a different story.
Where am I? All the pages look the same.
You have a consistent design system and brand style, all pages feel the same. Soon, you feel like you are walking through a forest of pages, not knowing if you have seen this page before, or if this is a different page with similar states. The arguments for all pages looking the same are consistent visual style, it’s design system driven, and it’s an efficient use of screen real-estate.
It’s Friday afternoon, you are bouncing between social media, colleagues, some private messages and trying to do your work. The last thing on your mind is what link you just clicked and where you are in the flow or process. Create every screen for this user.
- Give pages clear headers or page names
- Implement breadcrumbs if you are more than one level deep
- If the flow has multiple steps, show those steps
Long Lines and Tiny Text
This is another example of wanting to get the most out of your screen. The arguments for long lines and tiny text are that users hate scrolling and it is a more efficient use of real estate.
The web typography rule of thumb is to have no more than nine words per line.When you are finished reading a line your eyes need to be able to find the next line. If the line is too long, it is hard for your eyes to do this.
“But look at all the real estate we are wasting!” Guess what? What you call waste is actually an investment, if you can afford to invest that much white space, it means that the text must be super important, if not, you should get rid of it anyway.
Also read: A Typographic Approach to Email by 1910
Pop-Up in a Pop-Up
To save space, you have a button with a notification. In the notification, there is a button that leads to another pop-up. The argument for pop-ups within pop-ups is that they are more context aware.
The problem with this is that users lose their mental model of where they are in the process. If they finish the second pop-up, will the go to the original pop-up or back to the original screen? Either the first pop-up should be a screen, or the second pop-up should be an inline error message.
Card in Card
Cards are trending at the moment, so what could be better than a single card? How about a card in another card. The argument for this is that cards are nested to create visual hierarchy. UX designers often talk about visual hierarchy, the way in which elements are organized on a screen portraying their importance to the user. Along the way, physical symbolism such as cards was introduced.
In a traditional card deck, cards are all equal sizes. Cards are placed on, under or next to other cards to communicate certain states or relationships. When you nest a card inside another card, the user’s mental model of what you can do with cards starts to break down. The user subconsciously starts to question relationships of other objects in the interface, and all logic is thrown out the window.
The solution is easy though! Don’t nest cards, but place them close to each other, next to each other, or within an outline (like laying cards down on a casino table).
Form fields, what do I do with them?
Should I have a long list of form inputs? Should I break it up into multiple steps? Or should I have three columns of form inputs so it all fits on a single screen? The main problem isn’t the number of pages or the number of forms, it is how many forms are visible on the screen at a single time. Like buttons, this should be reduced to the minimal amount possible that still gives context and ease of use.
The best practice is to always put input fields in a single column. The users can easily follow this flow and check off each section. Sometimes your input fields are about the journey the user is about to embark on (onboarding), or maybe they have important consequences (tax slips). This is the best time to break up your fields into multiple pages. This gives you some visual space to create breathing room and explain to the user what they are doing and why it’s amazing or important.
If there are only one to five items to choose from, please don’t put them in a drop down. I know it might look elegant and all, but it’s just not worth the user’s effort. Placing radio buttons is a friendlier approach.
What does this button do?
Certain elements on a page help you orient what page you’re on, other elements should be as consistent and as clear as possible. The most common examples of this are the Accept and Cancel buttons, and where you place them. The rule of thumb is that when you are moving forward in the flow, that button is green, on the right and has copy that explains what it does, such as “Accept,” “Proceed,” or “Order”.
This gets confusing with “destructive tasks” such as when you would like to cancel your subscription with words like “Cancel” and “Cancel Subscription”.
Also read: Writing microcopy for destructive actions by UX Collective
Recap: Quick rules of thumb
- No more than nine buttons
- Only use drop downs as a last resort
- Give every page a header
- When a page is more than one deep, give it breadcrumbs
- When in multiple steps, show the steps
- No more than nine words per line
- Never use pop-ups in a pop-up
- Never nest a card in a card
- Keep form fields in a single column
- Provide descriptive names for buttons
This blog was originally published here.