Miłosz Michałowski-Żuk
Customer Experience Manager
One can’t stress enough how important user feedback and research is in developing good digital products. TLDR: it’s important to take the user’s perspective and input on every stage of the design process . But life is life, and there are times (and projects) where it’s impossible to perform research or to test our designs with the user.
The budget or the schedule may not accommodate research, testing or auditing, which requires at least 3 UX designers. Nevertheless, we can still improve the usability of a product. After being a UX designer for some time, I wanted to collect the most common UX mistakes found all over the web and mobile. I will explain how and why they can be fixed, in case you ever find them in your product. Let’s get to it!
Why should you fix it : You’re excluding between 12%-20% of potential customers.
How to fix it: To put it simply - just follow WCAG guidelines. Use Contrast while designing and Wave for published websites. Find more tools here .
There’s a long-running myth that making your website or app accessible is expensive and complex. But that’s not true – not always. You can make a few simple improvements that will increase the accessibility of your product. Why is it worth it?
Screenshot OleOle — large electronics retailer. Navigation has low contrast, making it hard to discern the labels.
Comparing OleOle on different displays – the same page will look different on different screens. Low contrast makes content illegible on lower or even medium quality screens like the MacBook Air or Lenovo.
That’s one of the many reasons why it’s a good rule of thumb to adhere to accessibility guidelines. Even if you’re not obliged to it, it just makes your product or service accessible to more potential customers — without leaving anyone behind.
If you know that your target group are young people with great eyesight, then you probably don’t need to be so strict about accessibility. But if you’re selling to a wider audience, then why would you exclude 12% of potential customers? Also, remember that most users don’t have professional or even prosumer displays with wide colour gamut or good colour reproduction.
Comparing OleOle on different displays – the same page will look different on different screens. Low contrast makes content illegible on lower or even medium quality screens like the MacBook Air or Lenovo.
That’s one of the many reasons why it’s a good rule of thumb to adhere to accessibility guidelines. Even if you’re not obliged to it, it just makes your product or service accessible to more potential customers — without leaving anyone behind.
If you know that your target group are young people with great eyesight, then you probably don’t need to be so strict about accessibility. But if you’re selling to a wider audience, then why would you exclude 12% of potential customers? Also, remember that most users don’t have professional or even prosumer displays with wide colour gamut or good colour reproduction.
Why should you fix it: As Google puts it, people don’t necessarily want to use your product/service. They want to have their needs fulfilled — and poor navigation is a good way to make them leave your site and go to your competitor.
How to fix it: A few key efforts - support key user jobs, prioritise consistency, design clear interactions (users have to know what is clickable, how hovering works), avoid deep navigation, design for mobile.
Fixing navigation may involve some effort, as it’s a result of mistakes done at an earlier stage - compromises between different stakeholders, interests, priorities, and so on. Nevertheless, navigation is a crucial element of the user’s experience with your product, hence it’s worth putting some work into it. Confusing navigation mechanism makes the user waste time on guessing, instead of getting the job (and your objective) done.
Screenshot Tesco shows inconsistent interactions: One label (“Groceries”) is expandable, while others work after a click. Also, it seems that two labels can be active at the same time — underscored “Promotions” and expanded “Groceries”.
Screenshot: Media Markt - yet again, inconsistent interactions: 3 different ways the menu works and presents the subpages. Accordion for product categories, indents for stores and inline for services. One could guess that this navigation is a result of lots of tensions and compromises. For example, you can find Stores both in the navigation as well as in the page header, a couple of pixels above. The main menu doesn’t stick to the top of the page while scrolling, thus I don’t see the point of repeating the same label and link in such close proximity.
Screenshot Orange - dynamic navigation. Contents of the “Help” section on the homepage vs same menu section seen on the “FAQ” page.
Why should you fix it: Recognition is better than recall, as Jakob Nielsen said. Using patterns and familiar (or at least consistent) layouts helps user learn. Ideally, they will learn the layout once, and then recognise it every time, which makes it easier and faster for them to scan and find what they’ve been looking for.
How to fix it: Rely on mental models, apply repeatable and consistent solutions and elements.
It’s a good rule to have a clear page structure that helps the user scan the content. For example, having a header atop every page helps user while navigating through the website or an app. Let’s use this major telecom’s website as an example. We’ll go to the 2nd level of navigation for Offers and Devices.
Navigating from Devices (“Urządzenia”) to Phones (“Telefony”) directs the user to a page with the following structure:
If the user goes from Offer (“Oferta) to Contract (“Abonament”) he/she encounters an entirely different layout:
Another pages have varying layouts and UI elements (more on that later). Some use tabs for further navigation, while others use graphics with labels (again: two variants). Their behaviour also differs: “Nasz Orange” opens a different website with completely different navigation.
That’s awfully confusing. It’s hard to navigate and hard to focus on content as each page requires “learning” the layout. The user can’t build one mental model of the website and use it for the rest: simply scan for what he’s looking for.
Why should you fix it: To put it simply, as cognitive load increases - user experience decreases and sales suffer. Give the user the content and features he/she needs at the moment. Not all features and all information at all times.
How to fix it: Reduce clutter, focus on what’s really important, guide user through the process — don’t throw everything at him/her.
Let’s compare two layouts. The first one is the view from Orange’s Offers page we’ve discussed in the previous section. We can assume that a user who gets to this page wants to learn about the offers to compare them and reach a decision. Does this page help him/her with that goal?
The large header and picture look and sound nice (surfing the web without limits!), but if you read the conspicuously small subheader You will learn that it comes only in a pricier plan (from 55 PLN/month). It feels more like an ad (with fine print) and a blocker on the user’s way to see the actual offers. In my opinion, it would be better to put that information next to the plans that have unlimited Internet — as a badge or another clear indicator. That information is most useful in the context of the offers to which it relates. It’s a lot of space wasted for one, limited benefit.
Before we get to compare offers, we also have to choose some parameters. The problem is that the process isn’t seamless – there’s a lot of text between steps, lots of distractions.
Let’s compare it to an identical process from another telecom. Play uses a very similar layout, but one that’s cleaner and easier to navigate. Furthermore, it lets the user get to the point quicker; calculate and compare the offers.
Why should you fix it: There’s a season for everything. The purpose is to help the user make a purchase. Showing them good deals on the home page? Great. Showing them great offers on every page? May end up being a disaster.
How to fix it: Follow a golden rule — simply give the user what they need, when and where they need it.
There’s an old saying in the marketing and media industry, which states: “content is king”. As user experience and product designers, we need to think in terms of business and user’s goals. It means that when designing experiences (layouts, copy etc.) we have to think in terms of the above-mentioned goals, but also in terms of the context:
At the end of the day, it boils down to a cliche: give the users what they need, when and where they need it.
Forgetting that golden rule can result in something like seen in the picture. The website is actively prohibiting the user from finding using the search feature, thus finding product (they want). Why? There already is a huge background ad for the new flagship phone — had the user been interested, they would have clicked on it. Since the user clicked on the search box, it lets us know that he or she couldn’t find what they were looking for via navigation or they already know exactly what product they are looking for.
Yet the website is making it impossible (or at very least hard) to use the search feature or dismiss the ad. The thing that many companies seem to forget is that the user doesn’t need to use your product. They can choose from your competitors — and throwing them hurdles and annoyances can make them close the browser tab and go elsewhere.
Ok, but what about business goals? Surely, the discussed website is a result of many compromises, maybe pressure from marketing, sales and the retailer’s partner. We don’t have to abandon the business goal or let our partners and stakeholders down.
Let’s find a better way to display the product/ad — better both for the partner and the end-user. Let’s think about the context again. I would argue that a better solution would be to show this ad/product when a user searched for a Samsung phone (and/or competition). Displaying the ad in the context of a list of phones would feel more natural and less pushy.
Why should you fix it: Banner blindness. Carousels are mostly ineffective, because people overlook them.
How to fix it: If you absolutely need a carousel — don’t make it look like an ad. It should be an integral part of the web design. Easy to read and act upon.
Carousels aren’t bad by default. It’s that they are poorly executed — most of the time. They usually are filled to the brim with lots of text and information that’s hard to read (scan).
In fact, many years of overloaded carousels had rendered them ineffective — eye-tracking studies by Nielsen Norman Group had proven that users mostly scroll down, ignoring carousels both on desktop and mobile. The reason is that users developed banner blindness — they had seen too many carousels that delivered ads instead of valuable content, thus their eyes and brains learned to ignore them.
Another major offence is that many websites use carousels to display content that has been designed for print, thus making the case even worse.
But not all is lost. You can still have a carousel. Just.... don’t make it look like a carousel. Get to the basics and ask yourself: why do you want a carousel? What is the carousel’s purpose on the page? It’s time to transform the carousel into an integral part of the page, like Amazon and especially — Śnieżka did.
Why should you fix it: Users should not have to wonder whether different elements and words mean the same thing.
How to fix it: It’s good to think outside the box, but it’s not worth reinventing the wheel every time. Use recognisable, standard elements and interactions that will help users on their journey.
The first carousel pagination above is impossible to interpret: which button is active, which is inactive, etc. Compare it to the pagination below, which is consistent and clear with regards to the state of each component:
When it comes to large scale, cross-platform systems and brands, it’s easy for chaos to seep in. If you don’t have good documentation, then you can end up with different people designing different variants of the same elements. Building a design system is a good way to keep your designs consistent (and easier to hand over to the development team).
You can take a known Design System like IBM’s Carbon as a blueprint, then analyse your product to see if there are any features that need additional components. What you do is you design your product from the ground up in an atomic design framework - you start with the simplest elements (buttons, fields, switches etc.), then build molecules, organisms, templates and finally pages. A design system provides consistency, speeds up design and development, decreases the number of errors and bugs in the code.
Why should you fix it: Buttons are probably the most recognisable and the most significant element of UI. They convey the call to actions and let users act. Badly designed buttons, without hierarchy or not, can do more harm than you think.
How to fix it: Again, a design system might be helpful. Basically, you should plan before you design anything. Make a list of components you will need – states and sizes. Create and use a design system across your organisation.
T-Mobile used a primary button for a rather secondary action: details of the product. It creates a lot of visual noise and distracts from the phones. The pictures are clickable, thus making the large “Details” button redundant.
Here we have another example of inconsistent button UI, where we have 3 variants of a primary button on 1 page. But what’s worse is that the most important CTA “Order” (“Zamawiam”) is the least pronounced.
The SGH mobile app, on the other hand, doesn’t differentiate between two actions. Which is unorthodox, since “Log in” (“Zaloguj”) is the primary action in terms of the user’s task.
In the case of the Panek car sharing app, though - there are a few other mistakes. Too many buttons, too densely packed, which makes it hard to tap them precisely on a mobile. The whole situation (layout) is completely unnecessary — there’s no reason to cram everything onto a small modal. It could’ve been presented on a full page with more comfortable spacing and padding.
Another case of 3 actions with no hierarchy without differentiation between:
On top of that, we have an example of a very bad button design that is grotesquely small with an awfully long CTA: “Buy a package. Pay only for kilometres”. Also, the timer looks like an enormous button itself.
Why should you fix it: Users often click something by mistake or to check something out to see what happens. Thus, they need a clearly marked "emergency exit" without having to go through an extended process or undo any progress they’ve made.
How to fix it: Support undo and redo. Let users freely navigate and move through the process in a way that’s natural for them and for the context of what they’re doing. As people, we often change our mind during one activity - we want to try a few things, we retreat after deciding on something.
This electronics retailer offers additional insurance for the devices you buy with them. As a side note: the two insurance options are identical, yet the layout makes you think they somehow differ in features. The only difference is the insurance period: 1 vs 2 years. But the way it’s presented forces the user to compare all the details that are… identical.
But the biggest offender lies in the interface: using radio buttons means that once the user selects either option, he/she cannot undo his action. It’s impossible to return to the initial state of not opting for any insurance. That’s just evil UX.
Designing and developing a product (service) isn’t an easy task. There are lots of moving parts involved: stakeholders, interests and technology. And until people are people — mistakes are bound to happen.
Nevertheless, we should strive to minimise them. The first step is to treat (user) experience as an integral part of modern business. It’s as essential for the success of a product as development. So the first thing to do is to treat UX mistakes or problems as bugs. They can equally make or break your product or service as a technical malfunction.
Perform a quality check before publishing any product. It’s best to do the tests with users, but if that’s not feasible, then the least you can do is a usability audit. Make sure your website or app carries your customers smoothly from start to finish. Otherwise, you may lose them to competitors.
In case you need any help once you’re at it - we can definitely give you a hand.
P.Nawrocki - Product Designer
M.Cieślukowski - Senior UX Researcher
Ł.Okoński - Head of Product Design
E.Waszkowski - Head of Strategy
