Top 10 User Frustrations on Web
What are the most frustrating things that you face on the web today? Vitaly Friedman of Smashing Magazine did a great job summarizing all key user frustrations in 2020.
In this article, I want to overview my list of the ten most critical frustrations and share practical tips on how to overcome them:
1. Small-sized text
Despite the recent popularity of video format, most information on the web is still in written form. That’s why Good readability and legibility are essential for good user experience. Here are a few practical tips for you to follow when working with text:
- Font size should be minimum 16px. 16px for body text is a good place to start but remember that the bigger the screen size, the larger the text.
- Aim for line-height to be 1.5em or 1.6em for optimal readability.
- Always view your designs on an actual device.
2. Tiny click targets
The smaller the interactive elements (links, buttons, and other UI controls), the more mistakes the user will make when interacting with your website. Do not play ‘hunt a button’ game with your visitors.
Here are a few good tips:
- Touch targets should be finger-friendly. The average size of the touch target should be 9mm x 9mm. Material Design states that touch targets should be at least 48 x 48 px.
- Add good padding surrounding touch targets. Microsoft guidelines recommend 10mm paddings between touch targets.
3. Unexpected content shifts
You are about to click on the link. You hover a cursor over the link & click it, and you suddenly realize that you’re doing a wrong thing. Instead of the link you meant to click, you click on the ad. Familiar, right? Content shift typically happens as a result of dynamically loading content. Since this operation is asynchronous, the dynamic content is plopped into the page and shifts existing content. To fix this problem, you can measure the height of the dynamic content and hardcode it as a min-height for the container in the CSS.
4. Data loss on errors
You spend 10 minutes filling data in a web form and finally click the ‘Submit’ button. The web page reloads, and you see the same web form but without your data. The only new thing on this page is a message colored in red that says “Error.” Your level of frustration maximizes. One of the most important rules of interactive design is simple:
User data is sacred.
Always prevent data loss. Use localStorage andsessionStorageto store key-value pairs and pre-fill the data that the user already provided into relevant fields even when the user accidentally click refreshes the page.
5. Not working “Back” button
User control and freedom is one of Jakob Nielsen’s 10 usability heuristic of user interface design. It says: Users need a clearly marked “emergency exit” to leave the unwanted action without having to go through an extended process. And the Back button in a browser is this emergency exit. If you are afraid that users will lose their data by clicking the Back button, it’s better to warn users about that by displaying a message “Your work will be lost"on the Back button click.
6. Scroll hijacking
Scroll hijacking is when web designers manipulate the scrollbar to behave differently on their website. Typically scroll hijacking help to show specific animated effects. But Crisp illustrations and fine animations do not always make a great web experience. When you use scroll hijacking, you take control from site visitors, and this hurts usability. No matter how fast users will scroll, the content will seem to live its own life. If you still want to use scroll hijacking, at least use a proper layout. Tumblr found a very nice balanced approach — even though the service uses scroll hijacking on the home page, the content on this page is designed in the form of individual slides and users feel like they are switching the slides as they scroll.
7. Sign up walls
Sign up walls is a mandatory request to create an account to use a service. Sign up walls prevent users from exploring the service.
All software, including websites, should be designed with a principle Try before you buy Users should try something, form their impression, and decide whether they want to use a service. For example, in the context of news websites, it’s possible to offer a limited number of articles that users can read without creating an account and ask them to create an account only when they engaged.
8. Autoplay video with sound
When users arrive at a page, they don’t expect to hear audio content that begins playing without their consent. When websites autoplay videos with sound, many users will leave the website immediately. Those who will stay will have to devote extra effort to figure out how to turn the audio off or pause the video, rather than focusing on their goals. Its fine to use auto-play videos, but ensure that it’s muted by default. Set the audio to OFF by default with the option to turn it ON.
9. Permission to send in-browser push notifications
When used properly, push notifications are a great mobile app tool. They notify users with timely and relevant updates. But the same pattern doesn’t work for the majority of websites. When a website requests permission to send notifications, visitors are not interested in this kind of information in most cases. Plus, such requests draw attention to themselves and distract users from interacting with a site’s content. So if you decide that you still need to send in-browser push notifications, ensure that you have a clear benefit that you can offer to your users.
10. Permission to store cookies
GDPR (General Data Protection Regulation) is a legal framework that sets guidelines for collecting and processing personal information from individuals who live in the European Union. It mandates that EU visitors should be given a number of data disclosures. Cookies are the primary tool that store personal details that allow site owners to track your online activity; that’s why GDPR requires cookie compliance. Some websites show a modal window that asks visitors to accept cookies usage right on the start. They block visitors until they accept the rules or leave a website. Other websites use a more polite solution — they show an overlay with how cookies are used and give users the freedom of choice whether they want to allow only necessary cookies or all cookies.
Thank you for reading! I hope this article was useful for you, good luck and have a nice day!