{"id":73539,"date":"2023-01-26T14:59:14","date_gmt":"2023-01-26T11:59:14","guid":{"rendered":"https:\/\/www.creatopy.com\/blog\/?p=73539"},"modified":"2023-07-24T14:15:23","modified_gmt":"2023-07-24T11:15:23","slug":"frustrating-design-patterns-in-e-commerce","status":"publish","type":"post","link":"https:\/\/creatopydevelopmentblog.kinsta.cloud\/blog\/frustrating-design-patterns-in-e-commerce\/","title":{"rendered":"Frustrating Design Patterns in E-commerce: How to Fix Them and Improve User Experience"},"content":{"rendered":"

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.<\/span><\/p>\n

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.<\/span><\/p>\n

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.\u00a0<\/span><\/p>\n

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).<\/span><\/p>\n

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 <\/span>here on demand<\/span><\/a>.\u00a0<\/span><\/p>\n

Now, let’s get into it.<\/span><\/b><\/p>\n

1. Carousels<\/a><\/strong>
\n2. Hamburger menus<\/a><\/strong>
\n3. Infinite scroll<\/a><\/strong>
\n4. Frozen filters<\/a><\/strong>
\n5. Wrapping up<\/a><\/strong>
\n6. Q&A<\/a><\/strong><\/p>\n

<\/a>1. Carousels<\/h2>\n

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.<\/span><\/p>\n

Inefficient uses of carousels<\/b><\/p>\n

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.\u00a0<\/span><\/p>\n

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%.<\/span><\/p>\n

The dots underneath the carousel indicated progress but provided no context of what should come next.\u00a0<\/span><\/p>\n

\"University<\/p>\n

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.<\/span><\/p>\n

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.<\/span><\/p>\n

As you can see, carousels can work on landing pages depending on where and how they are used.<\/span><\/p>\n

\"Sabah<\/p>\n

Another example of using carousels inefficiently is in this e-commerce website below.<\/span><\/p>\n

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.<\/span><\/p>\n

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.<\/span><\/p>\n

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.<\/span><\/p>\n

\"You<\/p>\n

The same frustration appears in another example from the Van Gogh museum website. At the bottom right, it says <\/span>scroll for more<\/span><\/i>, but the action is not happening vertically as you would expect, but horizontally.<\/span><\/p>\n

\"Van<\/p>\n

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.<\/span><\/p>\n

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.<\/span><\/p>\n

How to make people navigate through more slides of the carousel?<\/b><\/p>\n