Below we’ve list down 5 things that you should avoid at all cost when designing a website!
Despite the recent popularity of video format, written information still the go to format for important information on the web. This is the reason why in order to enhance user experience, a web developer should improve their site readability and legibility. You can follow these few practical tips when working with text.
- Set the font size to 16px. 16px is the minimum size for body text. You can go bigger is you working for bigger screen. 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.
- Before you wrap the text up. Always do a preview on an actual device.
Tiny click targets
Nothing frustrates users more than unclickable/touchable buttons. Users also will make more mistakes when you provide them with smaller interactive elements, such as buttons, link and other UI controls. Do not play ‘hunt a button’ game with your visitors. It will surely make an unpleasant experience.
Here are a few good tips you can implement:
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.
Unexpected content shifts
Content shift typically happens as a result of dynamically loading content. Dynamic content popped into the screen and shifts down or up the existing content because the operation is asynchronous. One of many ways you can solve this problem is by measure the height of the dynamic content and hardcode it as a min-height for the container in the CSS.
Not working “Back” button
In Jakob Nielsen’s 10 usability heuristic of user interface design, user control and freedom is one of them. When facing an unwanted action, users need a clearly marked “emergency exit” without having to go through an extended process. And the Back button in a browser is emergency exit they desire. The most common issue when clicking back button is user will lose all the data they’ve filled. To avoid that you can warn them by displaying a message “Your work will be lost” on the Back button click.
Autoplay video with sound
Users don’t expect to hear audio content when they arrive at a page, especially the one that begins playing without their consent. Many users will bounce when websites autoplay videos with sound. 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.