Some Common Usability Blunders You Should Avoid

In modern era, all designers and developers have realized the significant importance enjoyed by website usability. Usable websites always stands for great user experience which is the primary step lead towards happy visitors. Today, every designer and developer aimed to satisfy the visitors of website with great user-experience rather than making them frustrate.

As a professional web developer or web designer, it’s your right to advocate for visitor’s interest and requirements. Along with that, you have to protect your solid understanding of good user experience and communicate message effectively without misleading them. One should never mind what design and which functionality has been used in a website bt what matters a lot is the website usability. Visitors won’t go to a website if they don’t understand it.

A good usable website should always include a self-explanatory navigation, precise text-presentation, search functionality and thought-out website structure. Oftentimes, creating a good web portal become daunting but the real challenge is how to make a site usable. Unfortunately, most web designers give more priority to creativity rather than its usability. One should never forget that the ultimate motive of creating a web portal is to solve user’s need for which usability and great user-experience is paramount.

There are several usability rules and principles that has been usually ignored or misunderstood by developer and designers. In this post, we are going to discuss some major but common usability problems that have been faced by every website. Here, we have also recommended solutions to some usability nightmares best suited according to us.

Most Common Usability Blunders

Here are some of the most common usability nightmares and blunders you should be aware of while designing or developing a functional, enjoyable and usable website. Have a look to the Most Important Usability Check-Points:

Blunder # 1 : Clickable Area

In a web page, Hyperlinks are created with an objective to be clicked and therefore, hyperlinks should be highly usable so that they’re easy to click. Here is an example of a website – on Hacker News , a social news website where comment links are too small that it’s really difficult to even click them:
blunder

Below is an another example of related thing – Comment links but this time the size of clickable area to check comments links is too larger:

Newspond comments link

blunder (1)

You must be thinking why we need a larger clickable area for comment link? The reason is simple – a large clickable area allow user to easily hover the mouse cursor over the link. So, it’s good to make link look bigger or increase padding across link through CSS “padding” property. Simply copy and paste the below codes to do the same:

blunder (2)

Blunder # 2 : Pagination

Pagination is used in almost every web portal to simply split website content onto several web pages. Oftentimes, you can see pagination on websites with wide range of items such as products, pictures etc. Pagination is the best option for displaying website items properly because too many items on one page can make loading speed of a page bit slower.

An example of Pagination used in FeedMyApp displaying wide range of apps.

blunder (3)

In modern era, there are some websites where you can find different types of Pagination used to show content of web pages such as blog, articles. This type of splitting of one page content into several pages is considered a good option to increase page views.

An example of article published in Wired about Google’s Logo where it has been splited up into eight pages.

blunder (4)

But, don’t you think it’s an annoying way to display one page content into several pages just for the sake of money from ads. Such practices can result in lots of problems such as slow down of loading speed of website which ultimately results in communication barriers between website and visitors.

The second reason is all related to Search Engine Optimization (SEO). All the major Search Engines such as Google, Yahoo etc come to your web site to read the content published on particular web page to index it. If the single web page content splited to several pages then it gets diluted by making each page less sensible and reduce number of keywords as well. All this can negatively affect page ranking of particular article or blog in search engine results.

Blunder # 3 : Duplicate Web Page Titles

The web page title plays very significant important role in a web portal. Page titles are the pieces of text written between tags in <head> section of HTML code of a website. The page title appears at the top of web browser window and can be seen in the search engine results pages as well. In fact, page titles are most important piece of information generally used to calculate the degree of relevance of particular web page to a search term in search engines like Google. It also helps you to increase result ranks of particular query on different search engines.

A good page title meant only to communicate targeted set of visitors about what the page is all about so that users can quickly know whether they have landed at right web page or not. Sometimes, most people reuse same generic title for example — website’s name across the entire website which is absolutely wrong. One should never over stuff page titles with excessive keywords but include a couple of keywords that describes web page content.

Here’s an example of a good page title of WebGranth page title in Google Chrome :

blunder (5)

Here we have the article title and website name. By keeping website name at the last we are putting more emphasis on web page content rather than website branding. The HTML code will look like below in markup of the web page:

blunder (6)

This is an example of WebGranth Google search result in Mozilla Firefox:

blunder (7)

Blunder # 4 : Difficult to Scan Content

Usable website does not mean to have a good design only but need to be good copy. Here, the term “Copy” has been used to describe website content. By this, we are not underestimating importance of good website design. A user-friendly design play great role in helping visitors to focus their attention on the different things that make sense of information. However, every user still read text and this brings copy into real picture.

Quest of more information results to very frantic browsing behavior and people tend to jump from one piece of information to another piece of information from website to website. In such a hurry, people prefer to read content that captures their interest. The pattern will look like this:

blunder (8)

Here, all the red circles are indicating different important areas that catch visitors’ interest the most and numbers meant for the order. There are certain pointers that need to be considered to get above described results:

 

  • Higher-contrast colors, large fonts, icons are some of the things that can attract attention of visitors.
  • Informative but concise Descriptive heading help users to understand about content quickly. Avoid mysterious or vague headings because they can annoy visitors.
  • Stick to bite-sized pieces of website content rather than long paragraphs because people prefer to read content which is meaningful and concise.

Blunder # 5 : Search Box Missing

Search box is the most essential part of a web portal that allows people to search for information they are looking for quickly. Oftentimes, visitors tend to jump to a search box as soon as they land on a website. Such search-dominant users are least interested in website’s navigation structure. In modern times, you will find quick search box in every web site whether it’s an online shop or blog.

Simply select any search engine among Google, Yahoo, Bing and plug in a search box in your web portal for a quick search. Below set of codes are for using Google as search engine:

blunder (9)

And here are the codes to add Yahoo as a search engine for quick search:

blunder (10)

Remember to change vale of “Hidden” field with your website domain name to add search in your web portal.

Blunder # 6 : Long Registration Web Forms

Most visitors take registration web forms as a barrier. The reason is simple – registration forms require effort to fill them up with right information. One nee to invest both time and efforts to get himself register with a web portal. This brings sign-up form into real picture. Short sign up forms perfectly solve the purpose of a registration system. In these types of forms, user needs to simply fill a user name or email address, and a password. It’s good to keep the web form short and simple.

This is an example of long ReadOz sign up form in which most of the fields are optional. Such web forms directly frustrate and annoy visitors.

blunder (11)

Here is perfect example of Tumblr shortest sign-up forms which include three fields – email address, password and the website URL.

blunder (12)

Major Usability Breakdowns

Here, you are going to see some major usability nightmares to be avoided by every developer and designer when working with a web portal. Say no to the below discussed usability breakdowns to make your web portal more functional and usable. Take a look :

Hidden “Log in” link:

Take this example of Backpack – , 37signal’s most usable organizational and project management tools explaining all important information about tool related to its functionality and how to use it. Unfortunately, when you sign up then you need to explore it for few couples of minutes to find out how to get started with the tool.

backpackit

Remember that log-in links should never be hidden and so, increase the font size of “Log in”-link so that it is visible enough. Make the font size of log-in link bit bigger to help new registered users to find their way easily and quickly.

Biggest dead end:

Now-a-days, developers and designers are using several interesting approaches to showcase new web-service to the targeted set of visitors. Scriblink is one of the best example where you will see a pop-up and a Java-applet used to welcome its visitors. Here, a visitor is forced to fill some input to get started with surfing to the website. It’s really unfair. Unfortunately, nothing will be going to help you neither clicking on “cancel” nor other available options like OK, full screen mode, question mark. Nothing help you!

scriblink

 

Drop-down Menus for Navigation:

Over the internet, you may find hundreds of thousands of web sites using Drop-Down menus for navigation purpose. But, the fact is that these drop-down menus always make users’ nervous. The reason is simple — person need to be more focused towards using mouse precisely to click particular section in drop-down menu. Below are two perfect usability nightmare examples.

blunder (15)

Brita.net

Brita net

 

Pop-ups:

At present, you can see every modern web browser like Firefox, Safari, Opera and Internet Explorer using popup-blocker strictly to prevent pop-ups, ad blocks and other website content displayed as an advertisement. So, the idea to using pop-ups for content presentation is not going to work anymore.

Impossible Story

impossiblestory

 

Further Resource

10 Usability Nightmares You Should Be Aware Of
http://www.smashingmagazine.com/2007/09/27/10-usability-nightmares-you-should-be-aware-of/

Top 10 Usability Blunders of the Big Players
http://articles.sitepoint.com/article/usability-blunders-big-players

9 Common Usability Mistakes In Web Design
http://www.smashingmagazine.com/2009/02/18/9-common-usability-blunders/

Steven Bowen

Steven Bowen is an ardent team member of No-refresh - Web to Print Design Tool Provider Company bestowed with professionalism in to develop fully-functional solutions. Having adroitness in this arena, he has served an array of blogs that are basically based on the technology advancement & improve the end users’ information level.