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 (as well as UX research) on your website to highlight the problems and suggest fixes and solutions to elevate the user experience of your website.
What makes a good website user experience (best practices)?
Following is a quick website user experience checklist for designers and developers to follow:
- User-focused design: A good user experience website puts the user first. UX designers should always prioritise the user’s needs and preferences when designing a website. They must ensure that the site structure is easy to navigate, the CTA buttons are easy to find and the content (both text and visuals) is provided in a simple yet effective layout.
- Intuitive navigation: Website visitors should be able to find the information they need easily, without having to go back and forth multiple times. A good website user experience offers intuitive navigation, clear and concise labeling, and easy-to-locate CTAs to help users find what they are looking for.
- Fast loading speeds: A good website user experience ensures the design elements of the webpages are optimised for them to load quickly, allowing users to access the content they need without waiting for too long.
- Clear and concise content: Most users don’t like to spend hours reading through lengthy paragraphs. In fact, since a majority of website visitors are on their mobile devices, they prefer to quickly scan through the content to find what’s important/valuable to them. A good user experience website uses clear, concise content that is easy to access, read and understand.
- Mobile responsiveness: With more users accessing websites on their smartphones, it’s important for websites to be optimised for all screen sizes. Thus, it is important to ensure that your website is responsive, being able to adjust to the user’s screen size and device orientation.
- Accessibility: A good website user experience should be accessible to all users, including those with disabilities. Website designers should recognise and implement best practices for accessibility, such as providing alternative text for images, using high-contrast colors, and ensuring that the website can be navigated using a keyboard and not just a mouse.
Read: The Importance of Accessibility in UX Design - Consistent branding: A good user experience website should include consistent branding all through the website. This means using the same font styles, colours, contrasts, and design elements across all pages, creating a cohesive and professional look.
Feedback and interactivity: Users should be able to interact with the website and provide feedback freely. This can include features such as comment sections, contact forms, and social media integration.
Top 11 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 to leave 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 to identify 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 are 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.
9. Slow website loading speed
Extensively long load times can be a big turn-off and can frustrate users and make them abandon the website or, worse, move to a competitor site.
Tips & Recommendations:
- Conduct web page loading speed test to identify which page is slow or fast
- Optimise website speed by reducing the size of images and videos, compressing files, and minimising the number of HTTP requests.
- Utilise a content delivery network (CDN) that can improve loading times by caching content closer to the user’s location.
10. Poor navigation
Poor website navigation can lead to confusion, frustration, and even abandonment. Affecting the users being unable to intuitively find or access the information they wanted.
Tips & Recommendations:
- Use a clear and consistent navigation structure,
- Group related content together, and use intuitive labeling for buttons and links. Provide a search bar to help users quickly find the content they are looking for.
11. Mobile responsiveness
Smartphones have been part of our lifestyle, it’s essential to ensure that the website is optimised for mobile screens. Various pain points may include small text that is difficult to read, buttons that are too small to tap accurately, and alignment issues of images and text on the mobile screen. Additionally, there could also be issues with slow loading times due to the website not being optimised for mobile devices.
Tips & Recommendations:
- Designers can use responsive design techniques, such as using larger font sizes, spacing elements appropriately for all types of screen sizes, and optimising images for mobile devices.
Reach us at Netizen Experience for UX web development services.
