Is Your Web Design Usability Turning Off Your Visitors?

When it comes to web design, most people think in terms of good looks. However, I must say that it’s a completely wrong way of seeing the whole design process. Although websites that are pleasing to the eye is desirable, you must also incorporate SEO and usability into the design process.

Who Is This Guide For and What Is In It For You?

This guide is supposed to help both web designers and people who are looking to hire designers to build their website. You will learn how to make your website more usable and thereby increase your conversion rates.

I assume that you already know (if you are a web designer) to implement the required technologies (PHP, HTML, CSS, ASP.NET or whatever that is you are working with) as this guide does not deal with teaching you any of those technologies.

22 Tips to Design Websites with Usability in Mind

Below you will find several ideas on how to include proper usability in your web design.

Tip #1: Follow the KISS Principle

KISS is an acronym for the design principle articulated by Kelly Johnson, Keep it simple, Stupid! The idea is really simple. Make your web design simple so that users can focus on what YOU want them to do and not distract them with too many options.

Google home page

Simple Google Home Page

yahoo complicated home page

Complicated Yahoo Home Page

One of the reasons Google succeeded is because they kept their home page really simple. When people went to Google, what they did was search. Compared to Google, Yahoo home page is really cluttered and as you now know, Yahoo has lost the search engine war to Google.

Tip #2: Put On the Users Thinking Cap

The biggest mistake most web designers make is simply assuming things. Here is what happened to me once.

I designed a WordPress website for my local real estate business. After one month, I got feedback from several of my users about the issues they face while using the site. To my surprise, the #1 concern most people had was that they did not know how to go to the home page once they landed on one of the inner pages.

I was literally shocked. I mean, didn’t you know that clicking on the logo takes you to the home page? The surprising answer was “no”!!! I have been using the internet for over 10 years and I am very comfortable with all the usual website navigation methods.

Little did I know, or try to understand that, not everyone is familiar with the method of going to the home page via clicking on the logo. So I had to include a “home” button in the navigation to fix this.

When we create websites, we naturally assume that the end user who actually uses the site is familiar with doing things the way we do it. So next time you design a website or get a website design done, make sure that you throw out all the assumptions you have and think like a user.

Tip #3: Capture the Readers Attention in Less Than 5 Seconds

You have less than 5 seconds to capture you reader’s attention. No I did not make up that number (Although I have rounded it off to the nearest whole number). It’s a well-accepted fact that users have very small attention lifespan and if you are in a mood to study a research paper, head over to this study.

The idea is that your web design must convey your message very quickly to your readers. Else they are going to bounce away from your page to where ever they came from. After all, the browser back button is still the third most important activity users indulge in according to the study previously quoted.

Tip #4: Above the Fold Content Must be Your Rock Star Content

As I mentioned in the previous tip that users have very little attention lifespan, it is probably best to give your best to your readers the moment they land on your site.

above the fold

Amazon.com- Example of Above the Fold Content Done Right

“Above the fold” refers to the area on the computer screen that can be viewed without having to scroll down. It’s a subjective term as “above the fold” content can vary depending upon the screen size of the user. Still, you can take into account an average screen size of 13 inches since most laptops come with a 13 inch or more screen.

You need to make sure that your call to action (subscribe to your newsletter, watch a demo video, buy your product, browse product features, hire you or whatever it is that you want the user to do), must be “above the fold”. This makes it easier for your readers to spot your offer and take action accordingly.

Tip #5: Your Most Important Content Must be On the Left of The Page

amazon left navigation

Amazon Navigation Towards the Left

Assuming that your website is in a language that reads from left to right, you must have your most important section towards the left. Studies show that users spend around 69% of the time viewing content on the left side and the remaining on the right side.

This makes perfect sense for including the important navigation on the left or your call to action on the left of your web page which is “above the fold”. A perfect example of this would be the amazon website.

Tip #6: Make Use of a Search Bar on Your Site

If you have a very large website where there are hundreds or thousands of pages, it is generally a good idea to include a search option for your website. The primary reason why this is so effective is that it’s almost impossible to include all the hundreds or thousands of pages in the navigation.

advanced search

Advanced Search As Seen on Digital Point Forum

If you run an extremely large site like a forum with millions of pages or an ecommerce site, it’s a good to provide an advanced search where users can filter the search results based on their requirements.

Zappos search filter

Zappos Search Filter

Think Zappos search function. You can easily sort your search result based on a lot of factors. This improves the usability of the site and improves customer satisfaction by a huge margin.

If you have little content or pages, it’s actually a bad idea to provide a search bar. When people use the search bar and cannot find the required details, they might think that you might not offer what they want; while in actual scenario the case may not be true.

Tip #7: Responsive Web Design is The Future

Now, don’t get alarmed by the term responsive web design. It’s just a fancy term for saying that your website must adjust itself to the various screen sizes. Earlier in this article, I mentioned the concept of above the fold and using 14 inches as a guideline size. Here is where it gets messed up.

With a responsive web design, your website will automatically adjust itself to the viewing area. Say if you resize your browser window or you view the website from your iPhone, the site automatically resizes to fit in the screen.

This may mean that certain sections will be pushed down further below the screen to accommodate the changes. As an example, try viewing ConversionChamp through a mobile phone or try resizing this browser window. You will notice that the sidebar gets pushed down and the content is given more importance. This very site is an example of responsive web design.

With more people accessing the World Wide Web from mobile devices you really need to consider the mobile device viewing experience if you are serious about this business.

Tip #8: Make Content Scannable

I doubt anyone reading this article is going to read each and every word of it. In fact I doubt if most people might even read 50% of the content on this page. My articles are extremely long since they cover each subject in-depth.

Since not many people have the time to read articles that are very long, you need to help those people grasp content in a more efficient manner. The best way is to

  1. Use sub headings that are meaningful (I have made several sub headings in this how to design a website article)
  2. Bold important points or keywords
  3. Make use of italics to show important data
  4. If that is not enough, use underlines on key concepts and ideas

Tip #9: Do Not Rely Solely on Your Logo and Tagline

While it’s important that you have a good logo and a tag line that matches your sites intentions, your website must not be solely dependent on those two aspects of your site design. Derek from Social triggers has an interesting article on header removal test.

Tip #10: Use Images Where It Matters (Hint: More is Not Necessarily Good)

People are naturally attracted to images more than text. When it comes to web design and usability, using the right images, in the right context can improve the conversion rate dramatically.

Those being said, make sure that you use relevant images. If you have a product to sell, include the product images or screenshots rather than an image smiling customer support lady you got from one of those stock photography sites or [dangerously] from Google Image Search.

Using images also helps in providing more engaging content. Who would like to read very long articles without any visual element to keep things interesting? I know I would be bored to death if it was just plain text over and over again.

You can also use images to guide people’s attention. Take a look at one of the landing page Chemistry.com used previously.

chemistry landing page

Landing Page Which Chemistry.com Had For a Very Long Time

The lady in the image is looking at exactly where these guys want us to concentrate on and that’s what we tend to do after looking at the image.

Tip #11: Design Your Website Considering Your Audience in Mind

The funniest thing about designing a website is that you never know which design is good and which is not unless you have some test data. However, you can minimize your chances of failure by doing some market research before launching your site.

Take a look at your competitor’s website. How are most of the websites designed? Do you see a common trend? The idea is not to copy your competitor. Rather, you would need to bring in the element of familiarity to your web users.

If you have an ecommerce website, people expect you to have a shopping cart, multiple payment options, a way to save the shopping cart or make a wish list, and so on. Although you can design in a different way, the basic features must be present.

When it comes to features in a web site, familiarity breeds contempt is so very wrong. However, if your website looks similar to another website or multiple other web sites (common when using free templates found on the internet) it can be a bit of a problem. You even stand a chance of being sued for that.

Tip #12: Give a Starting Point for Your First Time Users

start here navigation

Start Here Inside Navigation On ZenHabits.net

It’s generally a good idea to provide a starting point for users who are new to your website. If your site does not have a lot of content, this is not necessary.

However if you blog and have hundreds of articles, it is definitely a good choice to point first time users to a page where you have resources laid out in an organized fashion.

Tip #13: Use a Single Home Page

If you are going to design a website for a fortune 500 company, chances are you will encounter a lot of sub companies or divisions that would require an entire website for it. In such cases, you should refer to the parent company page as the home page. If you are mentioning “home page” on each micro site you manage, it will cause confusion to the users.

Let’s assume that you have a company that produces 10 different products and you have 1 micro site for each of those products. If you refer to “home page” on each of those micro site pages, users are going to be confused whether it will take them to the micro site home page or the main company home page.

To avoid this confusion, refer to the main company page as “home page” and the name the microsite home page with a suitable name such as “<insert product name here> home page”.

Tip #14: Include Relevant Pages to Your Website and Make Them Easily Accessible

Some of the pages that almost all websites need to have (depending on what type of business they run) are

  1. About Page (Talk about your company, what it does, who all are behind the company, mission statement, vision statement and so on)
  2. Contact Page (Include contact forms, mail in address, map locations using Google maps, contact phone numbers)
  3. Privacy Policy and Disclaimer Page (Take help from your legal department on this one. If you don’t have a legal department, ensure that you put in what data is collected from people who visit your site and how it is used)
  4. Product/Service Page (Include a list of product or services you offer. Make it compelling and content rich)
  5. FAQ/Knowledgebase Page (Useful to save a lot of time answering user questions that are asked over and over again)
  6. Careers Page (If you actively recruit people to your company)
  7. Investor Relations Page (If you have investors for your company, you need to provide information for them here)
  8. Press Room Page (Use press releases? Then this is a must have)
  9. Sitemap Page (Useful for both search engines and users)
  10. Case Studies/ Portfolio Page (Extremely useful to showcase your expertise and woo customers to try out your product or service)

If you are a small business, you probably won’t have investor relations page or a press room page. Make sure that all the important pages are linked to from your global navigation and the lesser important pages linked to from your website footer.

Tip #15: Speak Your Customers Language

You can either choose to talk the language your users use and make them feel comfortable on your site, or, you can choose to appear smart by using “jargons” and “marketing lingos” and confuse your users. Which would you want to do? (Hint: Make users comfortable)

Tip #16: Optimize Content for Your Users

Would it be too much to ask you to make sure that you proofread the content before it’s posted live on your website? It seems such a simple job, yet most small business owners or web designers fail to do this properly. If you have obvious typos on your website (especially on the home page or sales pages), it’s going to make you look silly.

Additional Web Design Usability Tips

  • You do not use too much capitalization or exclamations if it is a business related website as it is considered unprofessional
  • Use examples or case studies to illustrate your point rather than saying how your technology is “cutting edge” or you are a “green company”
  • Make link color of visited and non-visited links different to help improve navigation
  • Make the navigation bar obvious and ensure that it contains links to all the relevant categories or main pages of your site
  • Provide a shopping cart icon and list of items in the shopping cart at all times if you run an ecommerce site
  • Make the text at least 14PX in size. 16 PX is even better. Smaller fonts reduce readability level especially if your audience is 40+ people
  • Use Google search bar moderately. If you use them on your site, don’t let users search the entire web from within your site. Choose option to display search results from within your site only

Tip #17: Remove Clutter

This Tip follows the first Tip I mentioned; using the KISS principle. It really helps improve usability of your website if you can remove all those unwanted and obstructive banner ads, pop ups, AdSense advertisements and so on.

If your major revenue model is not advertisement, you’d be better off without displaying them on your website.

Managing clutter is not limited to taking down advertisements. It can also mean removing low quality articles and replacing them with high quality information, improving the site design, cropping and resizing images to fit in the screen area and so on.

Tip #18: Lower the Barrier for Entry to Your Website

A lot of websites these days have welcome pages, splash pages or annoying advertisements as the landing page. No matter which page we try to view on these sites, we are always greeted with one or the other such pages (especially advertising).

You seriously don’t need to welcome someone to your site. You also don’t need to show them a company intro screen or flash pages before getting to the main site (exception do adult sites where they need to show a disclaimer page before entering the site).

Tip #19: Communicate Important Information with Users

If your site is down for maintenance or you have taken down the site for some reason, ensure that you host a page where you explain the problem and ask the users to come back at a later date. If possible, mention the date in which the site will be functional again.

While doing this, one thing you need to make sure is that do not make false promises. I remember going to a website and they had a countdown timer showing that the site would be live in 2 days. I visited after 3 days, and still it was showing one day. I noticed this trend for about a month. The web design company failed to keep the promise and kept resetting the timer. Wouldn’t it be better if they just removed the countdown altogether?

Tip #20: Collect Minimum Details from Users
long online form
It’s not uncommon to use forms on website to collect information from users. It’s advisable that you should collect as less information as possible for users. The less amount of information you ask, the higher the chance of getting users to give them to you. If you are collecting emails, include a No-SPAM policy.

As you can see, I collect email address on ConversionChamp.com. I do not ask for your name or phone number or any information that I can use to identify you in any way. I also have a NO-SPAM policy which means greater user confidence.

Tip #21: Don’t Experiment With Expected Features

The last thing you want to do is experiment with features and design elements on which people have established perceptions. Don’t try fancy navigation where you want users to hover over the navigation just to figure out what it has.

You also want to provide confirmation (success or failure) when people complete a particular action on your site. If someone fills up a form and it is a success, make sure that a message saying that submission was success is displayed instead of simply resetting the form.

Tip #22: Run Usability Tests and Refine Your Design based on Feedback

You can read all the design advice in the world and not make a single improvement unless you test the stuff. You should continuously test your web design and make improvements based on the data collected.

Here are a few sites that help test your web design by recording actual user feedback.

  1. Feedback Army
  2. Usability Hub
  3. User Testing

Is your website design turning off visitors or do you ace in your usability test? Let me know in the comments.

Download the beginners guide to content marketing absolutely free

Recommended by content marketing experts like Marcus Sheridan, Steve Scott, AJ Kumar and more...

Your data will be 100% private & secure

Comments

  1. says

    Adarsh,

    Excellent article… Don’t Experiment With Expected Features – makes one think… I also agree with this idea as I get so bugged when people change things…. It is best to leave a link as blue, leave the navigation bar (preferably on the left)… life is so easy and our eyeballs tend to focus on these areas..

    • Adarsh Thampy says

      Thank you for your comment Latha.

      It’s OK to change minor things (you need to do a lot of this when you are doing a split test or an A/B test). However, making major changes so that it completely confuses the user is not desirable

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>