In this article, we’ll look at the top pain points that users commonly face on websites. More importantly, we’ll look at how to fix these problems in order to provide a better user experience.
Please make use of our tips and recommendations to make improvements to your website, and if you would like to fully enhance your user experience or conduct user testing or user research, please contact Netizen Experience at support@netizenexperience.com
Our UX specialists are also able to do an audit on your website to highlight the problems and suggest fixes and solutions to elevate the user experience of your website.
Now, let’s look at the top pain points that users face and how to fix them.
Top 8 User Pain Points & Fixes for Better User Experience
1. Small-Sized Text
The idea of video format and the use of animation on websites have been gaining popularity for the last few years. However, despite video content’s growing popularity, websites and information online is still largely in written form.
Small-sized text is a huge pain point because good readability and legibility is essential for good user experience, users should be able to read everything with ease.
Tips & Recommendations:
- The body text should be at least 16 px and above, the minimum is 16 px so that the text is legible at a viewing distance without needing to zoom in. Do note that the bigger the screen size is, the larger the text needs to be for better readability.
- The line-height should be either 1.5em or 1.6em for optimal readability. The spacing helps the user to easily distinguish the lines they are reading and helps to improve readability.
- Always test and view your designs by looking at them from an actual device.
2. Tiny Click Targeting
This is a common pain point for web design. Oftentimes, the website design for desktop doesn’t translate properly for mobile use, human fingers are not as small as a cursor.
The smaller the interactive elements are, the more likely that users will miss it. This could lead to mistakes being made as users navigate through the website, the users end up feeling frustrated with the negative user experience.
The smaller the interactive elements (links, buttons, and other UI controls), the larger the likelihood of making mistakes. Don’t make it hard for users to complete an action by making the buttons so small they have to look high and low for it. Make your interactive elements obvious so users don’t have to play hide and seek with the buttons.
Tips & Recommendations:
- Remember that interactive elements and touch targets need to be finger-friendly to cater for mobile web design.
- The average size for the touch target should be 9×9 mm. Google’s material design suggests a minimum of 48 x 48 px.
- Have a padding around each touch target and don’t put two buttons too close to each other. Microsoft recommends 10mm between each touch target to cater to stubby fingers.
3. Unexpected Content Shifts
Imagine that you have found what you are looking for on a page, and you’re ready to click on to proceed. But as you click, an ad suddenly pops up and you’ve clicked on it. It redirects you to the ad’s sales page, a completely different page and you’re having to find your way back again.
This is an unexpected content shift, and this pain point is a common occurrence that disrupts the user experience. In fact, this pain point is so important to user experience that Google has decided to factor this into their algorithm to calculate user experience in their search engine ranking. We highly recommend reading this article to prepare your website for the change ahead: Google Search Engine Will Rank Your User Experience in 2021
Content shift is typically a result of dynamically loading content, where the dynamic content is dropped on the page and so shifts the existing content around.
Tips & Recommendations:
- Style fonts properly. Improper font styling can lead to a flash of invisible text (FOIT) or flash of unstyled text (FOUT) that may cause the layout to shift
- Specify dimensions/size attributes for all your images, banner ads, embeds, video elements. Doing this ensures that the browsers can allocate a suitable amount of space in the document whilst the elements are loading.
- Avoid using any content that’s injected dynamically
- Don’t insert content above existing content, the only exception is if it’s in response to a user interaction
4. Data Loss from Errors
Imagine that as a user, you’ve spent time filling up your data on a web form, your name, shipping address, billing address, contact details and you click ‘Submit’ to proceed. The page reloads and you’re shown an empty web form with an error message. In order to try again, you have to fill in your details again. Imagine the frustrations and added effort that users have to go through just to proceed and complete their journey.
One of the important rules for interactive design for a webpage is: User data is sacred.
Data loss from errors is a user pain point we still see a lot of these days, despite the fact that there are ways to prevent this from happening.
Tips & Recommendations:
- Always do everything you can to prevent data loss.
- Make use of localStorage and sessionStorage in the programming to store key-value pairs and to pre-fill the data that user has already filled. This should work even if the user accidentally refreshes the page.
5. No ‘Back’ Button
According to Jakob Nielsen’s 10 Usability Heuristics for User Interface Design, user control and freedom is an important usability heuristic. It describes how users can often perform actions mistakenly and that they need a clearly marked exit.
Users need a clearly marked exit in order to leave the unwanted action without having to go through an extended process. When we make it easy for users to undo an action or to exit back, it provides a sense of freedom and control to users, the confidence to go back and to avoid feeling stuck and frustrated.
A back button is that emergency exit. Users need to know that they have the ability to get out if they get to a point where they don’t want to proceed further, providing them with a pleasant user experience.
Tips & Recommendations:
- Ensure each page has a back button that is easily accessible to users
- If you’re concerned about losing data if the user chooses to click on the back button, prompt users by asking them “Are you sure you want to go back? All changes will be lost” and allowing them to choose ‘yes’ or ‘no’ to proceed.
6. Scroll Hijacking
Scroll hijacking (or scrolljacking) is when a website manipulates the scroll bar to behave in a way that is different from how a user is used to. Typically, this feature will be used for showing specific animated effects.
However, we need to recognise that creative illustrations and artsy animations don’t necessarily result in a good user experience. When you use scroll hijacking, you are actually stripping control from the user, and that hurts usability. Frankly, most people are just trying to get somewhere as quick as they can online, so they’ll be scrolling fast through the fluff, but no matter how fast they scroll the website will seem to take on a life of its own, frustrating users trying to get to their destination.
Tips & Recommendations:
- Allow users to freely scroll at their own pace and speed
- If you are insistent on using scroll hijacking, use a proper layout. Tumblr has found a good, balanced approach. Though they use scroll hijacking on their home page the content is laid out in a way that presents like a series of slides and users feel like they are changing slides as they scroll.
7. Sign-up Walls
A sign-up wall, as you could imagine, is a compulsory requirement for users to sign up to a service before being able to use it. Sign up walls completely stonewall the user’s ability to explore the service and the website.
This pain point is a common problem that users encounter, we see something interesting and we click through and scroll. But then something like this pops up:
The user is now unable to proceed further without having to sign up.
All software, including websites, should be designed with the principle of “Try before you buy”. Users should be able to try something out, test it and form an opinion about it before committing. In the context of a news site, it’s very easy to limit the number of articles a user can access before the subscription page comes up, then they are engaged and they want more.
Tips & Recommendations:
- Allow users to explore freely, the sign-up feature shouldn’t be a stonewall to block users but an added service for users to enhance their user experience. For example, by signing up they get to enjoy additional features or save their progress.
- If your service is a premium service that requires users to pay, consider allowing users to have a free trial before committing.
8. Autoplay video WITH SOUND
Simply put, users don’t expect to hear audio playing without their consent. In fact, this pain point is so prominent that many users would prefer leaving the website immediately when there’s a video that autoplay with the sound on. Users who are patient enough will need to go through the effort in identifying the source and to turn off the audio or video in order to focus and proceed with their user journey.
In the end, the user’s time and effort is wasted on this instead of focusing on their journey. Moreover, not all users are in a situation where they can play video with sound, for example if they are on public transport, which would cause disturbance to others.
Tips & Recommendations:
- Mute videos by default and allow users the option to unmute the video.
