At Userlytics, we test lots of different user interfaces: from public homepages and e-commerce sites to private, members-only portals. And those tests span a host of different platforms and screen sizes.
While all of these sites serve different purposes and often different audiences: they all have one thing in common. They’ve all made some mistakes that negatively affect the user experience. And they’re not that hard to spot, if you take the time to look for them.
5. Too Many Calls to Action
This is a really common issue we see on a lot of sites. Several competing buttons, headings or menus that all shout to the user “click me!”
Often during testing, this shows itself almost immediately: users are confused, unsure where to click or, more commonly, miss what designers and business stakeholders consider completely obvious.
Here’s an example from Bank of America:
Does the company want you to sign in? Or choose a new credit card? Or “enroll now” in online access? Or learn more about bill pay? Or see the Chihuly exhibit?
Presenting too many competing choices to users can feel overwhelming, and studies have shown when given too many options, users typically choose none.
How to Fix It
Decide the one goal you want the page to accomplish, and push users toward that destination. If we were to consult Bank of America, I would remove the bottom buttons and focus on one task: helping customers choose the best credit card, if that’s the business’s main goal.
Alternately, you can work to improve the experience for all users by conducting a survey to discover why they visit your site, what they’re looking for, and how you can better provide it for them.
4. Mobile Menu Overload, or the Hamburger and Kebab Problem
Listen, mobile navigation is tough. Especially when you’re trying to distill a complex site down to a cohesive and comprehensive experience on a screen 1/10th the size of a laptop.
The trap many companies fall into is trying to squeeze the entire desktop experience onto a phone screen. And ask anybody who’s used a Kong product, you can only squeeze so many peanut butter treats in there before it can’t take anymore.
A similar phenomenon is called the “Mystery Meat of Mobile Navigation” which was an idea adapted by Luke Wrobleski. If you’ve spent any amount of time on mobile websites, no doubt you’ve seen this:
Two menus, one hamburger and one kebab. And the user is left with no idea what to expect from either of them. This sort of ambiguity hurts discoverability, and forces your users to hunt around for the option they’re looking for.
How to Fix It
In both examples, the overly complex navigation isn’t just a hinderance to the user experience, it’s completely unnecessary. And it shows a lack of user testing. A short, unmoderated study to test the effectiveness of the navigation would immediately show the issues.
Product teams should return to the meeting table and ask themselves what their mobile site is trying to accomplish. Do they want customers to learn about the company’s products? Or buy something? Or get information about something they’re deciding whether to buy right now in a store?
Context matters – especially on mobile. Consider more what users need or want to do on your mobile site, and less on what you want them to do.
In this case, less is definitely more. And it brings us to our next common UX mistake.
3. Putting Mobile Last
And that brings us to the bigger issue. Most web professionals have been building for desktops and laptops far longer than mobile devices. So it’s easy to target larger screen sizes first. But it’s a big mistake to put so much focus on the desktop experience, at the expense of the mobile experience.
This is especially true if your website caters to the general public. Etsy is a good example of a well-thought out mobile experience.
When you visit Etsy’s mobile site, it’s clear a lot of thought went into distilling the larger desktop experience into a mobile site.
- Search, which is a critical feature on mobile, is front and center
- It’s also clear that is the intended call to action for the page, with no competing calls
- The “sign in” button is large and bright
- Etsy uses clear headings and iconography to make finding categories easy
And most importantly, the mobile site removes or tucks away everything that’s not important to the mobile experience. They run an ecommerce site without a single menu on the home page!
How to Fix Your Site
If you’re planning to build a new site, or rebuild your current one, I highly suggest you develop the mobile site in tandem with your desktop one. Make clear which features are shared between platforms, and which are separate. Most importantly, perform user testing on your mobile design concepts to determine what your users really want, and where you may have some stumbling blocks.
2. Overly Complex Registration Process
There’s a reason so many sites use social sign-in to onboard users: it’s easy, and for all users — it beats filling out an enormous form.
Online forms come in all shapes and sizes, but the worst ones have one thing in common: they’re too long and confusing
Have you tried using your site’s registration or order forms? Did you want to abandon the process midway through? If you said yes, so did your customers.
How To Fix It
We can’t always get around the need for certain information (like a physical address, full name, or other personal details) … but you can get a bit more creative about how you collect it.
All account creation processes should begin with just a few pieces of information (the less the better)
- Account or username
- Email address (if different)
- Desired password
- Captcha (only if necessary)
That’s it. You can ask for a full name if you want, but I would suggest a first name is more than sufficient. A simple form is an easy foot in the door.
If you require more information, like an address or other personal information, give users a couple of options as to how and when they’ll fill that out. Offer a link reminder or button to “complete your profile” or request the information when necessary, such as during the finalizing of an order. That way, the request seems natural and helpful, instead of annoying or intrusive.
1. Low Findability or Discoverability
Finally, this last UX mistake is fairly common and it causes users a tremendous amount of frustration.
In Don Norman’s book The Design of Everyday Things, he boils good designs down to two essential ingredients: Discoverability and Understanding.
- Discoverability: Is it possible to even figure out what actions are possible and where and how to perform them?
- Understanding: What does it all mean? How is the product supposed to be used? What do all the different controls and settings mean?
One of the most common impediments to discoverability and understanding are poorly labeled menus, buttons or other interactive elements.
- If something looks like a button, we expect it to be clickable. If it’s not, it causes confusion.
- Don’t use a horizontal caret () to highlight an element that opens vertically, and vice versa.
- Label menus in a way that provide clues to what they contain. Words like “Tools” or “General” are too vague to imply what they contain, and worse – if they’re labeled in a way that suggests one thing (“Help”) but provides something else (“How to Volunteer”) or they use standard icons to reference non-standard things (such as a ‘silhouette user’ icon that includes only a settings link, for example) — users will lose trust in your site completely.
How To Fix It
Beyond following the rules above, visit other websites to see how they use common elements. And always steer toward an already-established paradigm instead of creating something new, unless its for a good design reason.
And again here, user testing is crucial to finding these sorts of problems. Preparing a simple script and having users walk through common tasks on your site will immediately highlight issues. And it’s best to perform this testing early and often through the ideation and development phases.
Honorable Mention: CarouselsThe clever website shouldiuseacarousel.com puts it better than I ever could. You should avoid using a carousel at all costs:
The ugly truth is: carousels are ineffective and often ignored. Numerous studies, done by Userlytics and others, show time and time again users ignore all but the first slide, often don’t notice the carousel change, or miss calls to action entirely.
How To Fix It
First, don’t use a carousel. Second, if you want a large hero image with a call to action, simply include an image and a sharp, clear button near the top of your page. It will provide more flexibility than a carousel and won’t be ignored.
