Nowadays, websites look incredible, but we still see some frustrating design patterns on the internet. Having to agree to terms twice, even though one checkbox would have been enough, or scrolling to infinity and beyond without reaching any footer are just two examples of wrongdoings.
Luckily, all these patterns can be fixed with the help of design because, unlike other forms of self-expression or art, design is support to solve a problem.
For this webinar, we invited Vitaly Friedman, co-founder and editor-in-chief of Smashing Magazine, who has spent the last few years solving complex UX, front-end, and performance problems.
Vitaly has accepted our invitation to come and tell us how to make better user interfaces and give people a higher sense of control when they visit our website(s).
Below you will find the webinar in a written format, but for those of you who are audio-visual learners, you can access the recording here on demand.
Now, let’s get into it.
1. Carousels
2. Hamburger menus
3. Infinite scroll
4. Frozen filters
5. Wrapping up
6. Q&A
1. Carousels
Let’s talk about the first frequently encountered design issue: carousels. There are no wrong UI components when designing carousels, but keeping the context in mind is important.
Inefficient uses of carousels
Take the University of Notre Dame’s website as an example: the homepage used to have a carousel that was not needed and ended up being removed. As you can see in the screenshot below, underneath the carousel, there were clickable dots and arrows to move between slides.
If you look at the website’s data, you will find that 82% of the visitors saw the first image of the slide, while the other image positions were viewed by only 2-3%.
The dots underneath the carousel indicated progress but provided no context of what should come next.
To create better carousels, you can take the example from Turkish news websites. Instead of using dots underneath the carousel, they use numbers that provide a bit of reference for the slides.
Of course, on mobile, there will still be a lot of dots, but not always and not everywhere. Displaying the slide numbers vertically, either on the left or the right side of the carousel, is a mobile-friendly way to switch from dots to numbers.
As you can see, carousels can work on landing pages depending on where and how they are used.
Another example of using carousels inefficiently is in this e-commerce website below.
It has a bar on the side, suggesting it’s a carousel. But where would you click if you were to navigate it? On the numbers, on the black dot, or randomly on the line? There are many different options.
Well, the surprise is that none of these work. What you need to do is to swipe to the right or left. Not at all intuitive.
When you have a mismatch between the orientation of your slider and the actual movement that you should be expecting, it creates a frustrating experience.
The same frustration appears in another example from the Van Gogh museum website. At the bottom right, it says scroll for more, but the action is not happening vertically as you would expect, but horizontally.
Carousels should be used for very specific purposes, such as product pages. Let’s say you want to highlight different hotel features, as people will be curious to find out what the rooms, restaurant, and other facilities are like before booking.
If you have around forty slides in the carousel, you can expect a decay in viewing incremental carousel slides. What does this mean? The first and last slides get more attention as people usually look at the images from left to right or the other way around, but the middle gets less attention.
How to make people navigate through more slides of the carousel?
- Add labels
You could remove the dots and replace them with a slider or, even better, add labels. This offers more of a tab experience instead of a carousel one.
Putting on the slider bar what people should expect when they click through the carousel gives them a sense of control.
- Add a pause button
If you want an auto-advancing carousel, you must have a pause button; otherwise, people will start ignoring it.
There is usually a 5-7 seconds delay between slides, but if the carousel changes too quickly, people will just scroll down and ignore it.
- Use hallo previews
You can use hallo previews if you don’t want to use labels.
On creativedenmark.com, they have a hover that highlights what the preview will show you, and the labels appear and disappear if you hover your mouse cursor over them.
- Show thumbnails
Another thing you can do to increase the slide view is to use thumbnails of what people should expect to see.
If you offer more context, users will be more excited to click through the carousel.
An alternative to small thumbnails of the images from the slides is using representative icons like Phillips did on its website.
What’s important to remember when creating carousels is that if people care about something, they will click through.
How to organize a carousel?
Adding arrows is essential. It tells people how the carousel functions, and this is highly important. But the question is, how do you organize arrows, especially on mobile?
There are many options for using arrows, so how do you know which performs better for your website? And what does it mean to perform better?
When referring to carousels, performing better means people are highly engaged in navigating through the slides, making fewer accidental clicks on the wrong things, and returning.
For people to be engaged, they need to clearly understand what they have in front of them, meaning nothing should obscure the content they want to consume.
Coming back to the arrows, there are two issues you need to avoid.
One issue appears when you break up the arrows apart, as people will click on the wrong places.
If they accidentally click on the slide’s image, they will be taken to a particular website page. Then they will have to return, go to the carousel’s first image, and swipe if they want to see more.
Each time this happens, they will have to refocus and recalibrate their finger in order to navigate and not make a mistake again.
The second design issue is when the arrows are grouped in the top right corner. When clicking on the arrow, users will cover the page with their fingers and then have to move them to see the content, having to repeat the steps to continue navigating.
The grouped arrows are great if you place them underneath the carousel.
It gives people the ability to control the action better, similar to a TV remote where the up and down, left and right, are close to each other, not far apart. Like this, people move back and forth faster and easier.
A great example is Ritual.com. On the desktop version, the arrows are on the top right, but on mobile, they are grouped together at the bottom of the carousel.
2. Hamburger Menus
Another frustrating design pattern is hamburgers. Not the ones you can eat but those that help you choose your journey on a website.
So, where does the frustration come from?
Take the coffee shop website down below as an example. There are four kinds of menus you can open. They are all called menus, and not all contain what you would expect.
When the hamburger menu is opened, you see many items appearing with many arrows, which overwhelms the user.
Another example of an inefficient hamburger menu can be seen on Vodafone’s website below.
After opening the hamburger menu, you see accordions with different arrows. The arrow pointing to the right takes you to a page, and the one pointing to the bottom opens another accordion.
If you click on a downward-facing arrow, another list shows up with different icons pointing up, right, and down.
This causes massive frustration for users because it’s difficult to understand what you see here and what you should do.
There was no need for that many arrows. They could have made the links look like links to bring more clarity.
Another example is the LCFC football club’s website which has the following navigation on mobile. When you open up the hamburger menu, it shows some sections, and when you click on one of them, you see a vertical split. It displays multiple levels of navigation at the same time.
You can apply the split screen in many different ways, for example, for filtering.
An ecommerce website of a retailer in India has a filter that does the same thing. You have the hamburger menu opening in a vertical section and splitting the menu in two. It’s better than any other filtering experience that you might have because it’s also very compact.
You can see the same on the Financial Times website. You select one of the sections you want to see more about from the menu, and within that section, you have some regions containing some values. They construct your filtering experience.
If you want to add filtering features to your websites, you can use the space better by splitting things this way.
How to make the hamburger menus better?
- Use the billboard pattern
Prioritize what matters and deprioritize what does not matter. This requires you to understand what people care about most and highlight those things.
The billboard pattern also improves the discoverability of essential items such as campaigns or products.
But how do you do that?
Look at this example below of the Korean postal office website. On the first phone screen, they highlighted some tiles with things that are important to people for easier access. Once you start navigating with the hamburger menu, you get these regular things with accordions showing up.
The main idea is they highlight important things, and the homepage resembles a dashboard. This can also be applied to e-commerce.
The website of the major German retailer Otto doesn’t show you everything. Instead, it shows you the most important things, prompting you to choose one. After you make your pick, you get into deeper levels of architecture.
You can find the billboard pattern on many different websites because it’s really helpful to visitors.
- Use a navigation query
A navigation query makes people access relevant information faster.
Marcin Ignac tweeted that “Search is the biggest scam in UI now. It rarely works. How do you find out things that are not in your top 10 results of mini snippets? We need more explorative interfaces taking advantage of context and association.”
There is a lot of truth to this. We just need to know the context and associations in our context.
For example, on Commonbond.co, you can select what you want to do on the site. You have this little preview where you pick from different options. Afterward, it will take you to the page you were looking for. It’s like an information system where you ask a few questions and drive users to a specific page of interest.
Another example is Duesseldorf’s website, where you can insert what you want to do in the city and where, and it tells you what you want to know incredibly fast.
The navigation query helps with the time to relevance. You can reach the specific page you need in less than 10 seconds.
How can you apply this to e-commerce websites?
If you look at AO, a retail website from Germany, you can see a carousel and a “what do you want to do here” section on the homepage. There, you can select what device you want to buy, what type, what price range, and so on. After giving all these answers, you get relevant results in less than 10 seconds without filtering, searching, or sorting.
- Use breadcrumbs
Another essential thing that is usually forgotten is breadcrumbs. Breadcrumbs are tricky because they don’t necessarily represent the path the user has taken; they represent the informational architecture of the site. Still, in the context of navigation, this can be really helpful.
Why? Because they can help you navigate much faster.
Looking at this website, which belongs to an insurance company in Germany, you can see a little dropdown on the top. When you click on it, you see neighbors of this page, so this is kind of a replacement for cyber navigation. We commonly receive it as a separate thing: we have the main navigation, breadcrumbs, and maybe a sidebar.
This is a good replacement for cyber navigation if you cannot have a sidebar for one reason or the other, but, most importantly, you can also replace your entire mega menu as well.
If you go to the Federal Statistical Office of Switzerland website, they use breadcrumbs but don’t have mega dropdowns. Instead, everything is using this dynamic dropdown kind of thing.
The same goes for this other website in Switzerland, where they sell tickets. Everything is a breadcrumb; you don’t even need big mega dropdowns. Looks and works very well on mobile too.
3. Infinite Scroll
The infinite scroll is that pattern where you scroll, and scroll, and scroll, and if you’re lucky, you will reach the footer or… not. If you happen to be on a sales page, good luck! You might never see the footer again.
Usually, people are not fans of the infinite scroll because it’s difficult to manage, and they have trouble spotting what’s new on the page. Because of this, most of the time, they simply abandon pages with this design pattern.
How can you improve infinite scroll?
- Add a “Load more” button
Instead of endlessly scrolling down, you can load some items and then get to the point where you change from infinite loading to a “Load more” button. Then add more items if the button is clicked on.
- Add an incentive
Improve the infinite scroll by adding an incentive when users reach the “load more” button, like the possibility of winning a gift card if they insert their email address.
You can also state that you include in the email a link to continue scrolling later from where they’ve left off. This also allows users to switch between devices and not have to start the search all over again later.
Marketing teams also like this idea because it helps them grow their email lists.
- Write the number of products seen
Another way to break the infinite scroll is to write the number of products seen out of the total and add a suggestion to open these items on a separate page. You can also add a “Continue here later” button, allowing users to return to where they left off the search.
Use the white space between the already-seen items and the following items to let people process what they saw, and offer them the freedom to decide what they want to do next.
- Make a sticky footer
How can you make a sticky footer? Take this food delivery service website from Malaysia, where you can open the footer on the bottom right of the page by clicking on the “City, Language, and more” button.
- Add more control
People need to have a sense of control, which is hard to obtain using infinite scroll. However, you can follow the example from Thomann.de, an e-commerce retailer for guitars.
At the end of the product listing, there is a message saying you have reached the bottom of the page. Next, you can load more items by selecting how many products you want to see per page. Alternatively, you can continue with the pagination.
This way, you have complete control of how many products you see and always see the footer.
- Combine infinite scroll with pagination
Another option is to combine infinite scroll and pagination. On Pepper.pl, an e-commerce retailer from Poland, the URL changes as you scroll, and you also get a layer at the bottom of the page, allowing you to jump to the header, the footer, or go through pages.
If you want to jump to a particular page, you can also do this from that bottom layer.
How can you make the infinite scroll even more relevant?
You could add some labels next to the pagination to hint at what users should expect there, similar to carousels.
People could sort by ratings, locations, alphabet, or pricing. Whichever the options, labels give them a clue of what they should expect to see on the following pages.
Another method to provide more context is adding a bar with labels to the infinite scroll. This gives people a very confident awareness of where they want to go.
If you go for the infinite scroll, why not allow people to bookmark multiple locations, helping them to navigate more comfortably. They can jump between them very quickly and get to those products that interest them.
4. Frozen Filters
Frozen filters are becoming one of the major pain points that users actually have.
This comes from websites like sears.com. The entire UI freezes whenever you click one of the filters in the left sidebar. You cannot do anything until it comes back to life.
Moreover, people usually want to select more than one filtering option. Unfortunately, some filters only register one input at a time, causing the previous selection to become lost.
How to get filtering right?
One positive example comes from the Stockholm University website, where they decoupled filters from search results.
You can choose as many filters as you want without freezing or refreshing. On the right, they show you the results, which you can filter even filter by searching for keywords.
Another example is from Galaxus.ch. You have the filtering options on top, and you can add as many filters as you want, while in the background, nothing changes.
It’s only when you click on the show button and apply the filter that you actually see things changing and get the results.
On mobile, we also have a lot of filtering issues.
Take a look at the Walgreens website. You see the filtering options; whenever you click on an attribute, the UI freezes, and only after it takes you to the result. If you want to search by more than one attribute, you just have to click on the filter again and repeat the process.
You will have to do this over and over again for each attribute.
In the second example, while you filter, you see a blur appear on the background, which changes each time you select an attribute.
And then, of course, there’s the Crutchfield website, where the filtering takes up the entire screen. But when you click on any filters, a loading animation appears on the screen, suggesting the website is processing your action. When you see this every time, it gets annoying.
How to improve filtering?
- Take up the entire screen
It’s better for filtering to cover the full mobile screen. If you need to slide in and slide out, you can do this with filters, although accordions are a better alternative to filters because they are faster.
The most important thing is nothing is freezing here, no frustration whatsoever.
- Split the screen
Take the example from Mint, a fashion retail website from India. The filtering splits the screen in two, allowing people to navigate between filters easily.
- Use autocomplete
Another quite common filtering example is when you start typing and get autocomplete options with vertical arrows next to them.
There is a difference between clicking on the keywords and the arrows.
Clicking on the keywords will take you to your search’s results, but if you click on the vertical arrows, the text you’ve written will be replaced with the keywords mentioned in the autocomplete.
To make this work, you can add little tips underneath the search bar to help people construct their search results. Keep in mind to suggest things that are going to show results.
5. Wrapping Up
People appreciate things that work as expected, and there are many things you can do to remove frustration from the web.
Vitaly Friedman has been doing UI for more than 15 years, and what people want when they navigate through web pages has remained the same.
Take a look at the image below to see what design patterns contribute to an enjoyable user experience.
If you want to learn more about how you can improve your interface design, you can go to Smart interface design patterns. You will find many interesting things over there, including everything Vitaly talked about in the webinar and more.
6. Q&A
Question: When you design a landing page, first comes the copy and then the design?
Answer: For me, yes. I take a significant amount of time to look at things like error messages and labels. Most of the time, my job is to maximize clarity and minimize errors. That usually means trying to ensure that the labels I am using are clear and that we have a high success rate. We usually have two primary metrics when we’re designing. One is when we try to identify the main tasks that people do. The other is when we try to understand how successful people are in completing those tasks and how much time they need to complete them.
Other matrices are how often people make mistakes or errors, and if they do encounter errors, how quickly they recover from those errors.
We are not talking only about the checkout process but also better search, tracking what people search on the website, the top 100 searches. And then, based on that, you can discuss it with content curators and see what people get as a result. And we measure if what people get is relevant.
The time to relevance is also important. If you get in 10 seconds a very relevant selection of items based on your interests, that’s very powerful.
Question: Which solution to a design problem are you most proud of?
Answer: Figuring out the infinite scroll issue has been quite difficult. There are many issues, including accessibility and announcing new content properly. Technically speaking, infinite scroll is quite complicated to manage. But it has its benefits as well. In many cases where I worked on e-commerce projects with infinite scroll issues, it really increased the discoverability. The problem is you don’t want to overwhelm people and give them control over how much they will see.
They need to be able to reach the footer and bookmark a location or things like that. It’s a tricky implementation and also tricky design. This is a sophisticated thing to keep in mind.
Final Thoughts
We hope this webinar helped you learn more about frustrating design patterns, how to avoid them, and what you can do to improve your ecommerce experiences.
If you want to know what other examples Vitaly offered and discover the other questions and answers in this webinar, watch it here on demand.
See you next time on our webinar with Jacob Cass about How To Create Zero-Click Ads That Convert.