YogeshChauhan.com

3 Common Usability Mistakes In Web Design

April 17, 2020

1. Very Small Clickable Areas

We all have seen tiny links and sometimes we can't even click on those links unless we zoom in. It happens because the links are with no padding around them and that makes really hard to click with your finger (if it's a touch screen interface). Can you imagine being an elderly person trying to click some tiny little link?!

In Quora App, this was the issue as well where you can't click on the "Add Question" button properly because of the tiny buttons. You have to click on the button for few times in order to click on it and in the app there was no option to zoom! So you can imagine the frustrations! They have resolves the issue in newer version of the app. I mean we can understand that in mobile, we have small area to play around with and we have to add many small buttons and links with the contents in that small area of mobile screen.

Add padding so the touch and click area are larger than the text!

2. Old Permalinks Pointing Nowhere

This is one of my favorites (I hate the experience when it happens) to talk about as I have been through this a lot on many websites from Google. A permalink is a link to a page that isn’t meant to change.

When you add your website to search engines like Google, they store it in their servers with permalinks and it stays there for a long time until and unless you request them to remove it. So if you move around that link on your website a bit that permalinks won't redirect users to the new pages. YOU have to do that yourself.

Let's consider a simple scenario in which you have contact page named as contact.html on your website and you have published everything successfully. Anyone can access that page from yourdomainname/contact.html. Now after a while you decide to name that page contact-us.html and you've updated everything and shared changes on social media as well hoping that everything will be alright. But you might see in your Google Analytics page that people are still lending on that old page and finding nothing at all so your bounce rate has been increased as well.

Since this is up to you how to fix it, you can actually fix it using .htaccess file. Just add redirect link saying that forward all contact.html requests to contact-us.html and you're all set. It is called 301 redirect.

For example,

    RewriteEngine on
    Redirect 301 /contact.html /contact-us.html

3. Long Registration Forms

Registration forms can be deal breaker for your website. It takes effort to fill them in, and if the form is long then the task itself is no fun. Users have to spend lots of time filling out the forms to register if the forms are long and then they have to remember password for one more website as well. That's the main reason most of the websites are now using options like "Sign Up using Google" or Microsoft or Facebook.

If you don't know how to integrate them into the website then one thing you can do is just shorten the length of the sign up form. Do not ask for the information you won't require. Users will avoid filling out anything if they think you're asking for information which is not even necessary.

If you have a blog and if you want to track users who makes comments, then just ask for their email address, username and password and in some cases profile pic. That should be enough information to sign up in your blog. I would still advise to go for options like "Sign Up using Google" as it makes the process a lot smoother than any form at all.

dreamhost

Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to uninstall Cocoapods from the Mac OS? #4 How to Use SQL MAX() Function with Dates? #5 How to add Read More Read Less Button using JavaScript? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

Apr 7 Solution for “Yarn build: Failed because of a stylelint error” Apr 7 Make sure your links have descriptive text Apr 7 How to add Laravel to WordPress using Sage theme (and install Tailwind CSS)? Apr 2 How to create a sidebar using pure CSS? Apr 1 How to switch dark and light themes using pure CSS? Apr 1 How to calculate elapsed time in JavaScript?

You might also like these

How to add a scroll back to top button using JavaScript and CSS?CSSLEFT JOIN in PostgresPostgresArray destructuring and Object destructuring in JavaScriptJavaScriptNATURAL JOIN in PostgresPostgresHow to Sort (Shuffle) an Array in Random Order in JavaScript?JavaScriptWhat is ECMAScript?JavaScript