Better Usability Through Consistent Design
Web Page Mistakes

Using a consistent design throughout your website or blog adds to the usability of the site. It also adds accessibility and search engine optimization features. A site designed with the user in mind improves the overall experience when visiting the site which in turn results in:

1. Return visitors.

   A happy visitor is a returning customer (or reader if you have a blog).

2. Lower bounce rate.

   The visitors stay on the site longer and cruise around to other pages than the one they landed on via their search in the search engine (or however they got to your site in the first place).

3. Improved accessibility for everyone.

   You don’t have to have difficulties surfing the net to appreciate the usability features of also making a site accessible.

4. More incoming links (backlinks).

   One easy way to improve the on-site/on-page search engine optimization of your site is great usability. People will give you free natural incoming links:

   • Bookmark your site on social bookmarking sites.

     Although a lot of the social bookmarking sites use the nofollow attribute to stop the search engines following the outgoing link to your site it does drive traffic to your site which in turn can result in a bookmark on a site that does not use the nofollow attribute.

   • Spreading the word about your site on social networking sites.

     Some social networking sites also use the nofollow attribute in their links but like social bookmarking sites this can lead to traffic to your site and links on sites which do not use the nofollow attribute in their links.

   • Website/Blog Review or Mention.

     Someone may write a review or mention your site in one of their articles just because they found your site user friendly.

   • Word of Mouth Offline.

     The old word of mouth via offline conversations whether in casual conversation or at a networking event can result in any of the above online search engine optimization benefits.

Think big! The more usable your website or blog is, the more word will spread around about it.

So how do you improve the usability of your website or blog?

Design Conventions

There are established design conventions are in place. Why? Because they work. (smiles)

Part of your site being memorable is that it is different but if you want to buck design conventions will your visitors understand how to use your site easily?

Keep in mind that if you have optimized your site properly a visitor can enter your site on any page, usually the page that best fit their searched for phrase in their preferred search engine but not necessarily your home page. This is why consistancy between pages on the site is important. Typical elements should be on each page.

• Logo and tag line on each page.

  You might not have a tag line (you should though) but some kind of logo or typical head section of the page should be established and on each page. This identifies to the visitor who’s site they are visiting.

• Typical navigation.

  Depending on how large your site is you may need 2 navigation systems:

  1. The main navigation linking to the important pages within the site.
  2. The secondary navigation linking to categories or sections of the site.

  Location of the navigation should be consistent within the site. The usual locations are:

  • Across the top of the page. This can be used for your main navigation on larger sites or if you choose to use a dropdown menu the categories/sections could be included in the top navigation.
  • Down the left or right for the secondary navigation although if you have a smaller site one of these could be used as your main navigation location.
  • In the footer you can use this area to show links to things like policies, copyright notice, shipping information, return policies or your social networking profile links.

  The goal with your navigation system is to make it easy for the user to get to the section of the site they wish to get to easily and quickly.

• Search Function

  With larger sites particularly providing a search function adds usability to your site.

  The better placement of your search function the better. Two of the best places for a search function are:

  • In the head section (top) of the web page design preferrably on the right.
  • At the top of your side column.

Other things to include in your navigation to improve usability:

• An HTML site map.

  Lost visitors or those wanting a quick way to the information they want will look at your HTML site map (not to be confused with an XML Sitemap used for other things.)

• A custom 404 error page.

  Sometimes a user follows an incorrectly typed link to your site or within your site and sees a 404 error, meaning the page could not be found. You may have even removed the page or renamed it for some reason and forgot to use a 301 permanent redirect instruction in your .htaccess file. Providing a custom 404 error page helps the misguided user to a way to find what they arrived expecting to find.

Font

Keeping in mind that PCs and Macs have different sets of default fonts installed, pick a universal font (called font-family in your cascading stylesheet (CSS)) and use it consistantly through out the site and the same way. One obvious sign of a DIY (Do It Yourself) website is that the same font is not used throughout the site. This is a particular problem with content management systems and ecommerce software where the person editing the content uses the HTML editor as a word processor, forgetting there is a CSS file associated with the design or not understanding the styles will be applied once the page/changes are live on the site.

Font sizing (called font-size in your CSS file) is another area where inconsistancies occur. These are set in the CSS file associated with your design. If you don’t like set size, fix the style in the CSS file, not via the HTML editor you are using. You can also create additional styles in the stylesheet for special instances of highlighted text.

Graphics

On a website or blog there are usually 2 sets of graphics involved:

• Site Design Graphics

  Site design graphics give the overall feel of your site. If you are adding additional graphics (say buy now buttons or social connection buttons/icons) they need to fit the feel of the original design. Nothing screams “this site is maintained by someone other than the original person who designed the site” more than graphics that have a different style/feel being used after the original design was done. You can either hire the original designer to create additional graphics to match the original theme or search for someone that does the same style of graphics so they don’t stick out as “add-on” graphics.

  Keeping with the original colour scheme is also important. If the design was created by a professional graphics person a colour scheme was planned. If you built the site yourself use one of the colour scheme sites to find coordinating colours.

  Bottom line is: Everything should match to look professional whether you did it yourself or purchased the theme.

• Site Content Graphics

  Have you ever noticed how nice a site looks when all their product images are all the same size? Doesn’t it make the site look nice and tidy?

  Making all your content images look tidy can be a little time consuming and stressful for the DIY webmaster but it is worth it. The user “learns” how far to move the mouse to activate the zoom feature of the next image in a category page for example.

  For consistant site content images you are going to decide on the “standard” size you want to use for the entire site then resize/edit the images to be included in a graphics program, not by using coding. When you manipulate image sizes via coding the browser still downloads the original image as it was uploaded to the web server and just changes the dimensions visually in the page. Downloading large images slows down the rendering of your pages. The browser stops as the image is downloaded making it difficult for users to visit other pages on the site when you have a lot of images.

• Provide alternative text for images.

  Alternative text (alt text) appears when the user decides to surf the net with images turned off to save on their internet usage costs. Alternative text is also read out to those who are blind or have poor vision and use assistive technology to read web pages to them. The search engines notice your image alt text also.

  To be useful, the alt text should describe what is contained in the image.

Links

Links are the way people get around the web and move around within your site. Making your links easy to find and use leads to better usability, accessibility and internal linking (search engine optimization).

• Make your links findable.

  Convention says unclicked links (links the visitor hasn’t visited yet) should be underlined. You will notice on this blog our links are underlined and bolded so they stand out. By default, unstyled unvisited links will be blue and underlined. If yours are not then the defaults have to altered via the CSS file associated with your design. a:link is what you are looking for in the CSS file if you want to fix this.

  Visited links by default change to a purple colour. If yours don’t then the designer has changed the visited state of links using a:visited setting(s) in your stylesheet.

  Whether the default link colours go with your theme or not, make the linked text stand out. This would include not underlining text that is not a link. Very confusing for the visitor and annoying when clicking the text and it doesn’t take you anywhere.

• Make the linked text descriptive.

  Click here is the most useless, unusable, inaccessible and unsearch engine friendly thing people do on websites.

  Make the linked text descriptive. Link a phrase within a sentence so the reader understands why the text is linked through the surronding text. This not only makes the link user friendly, it adds accessiblity and search engine optimization to the link.

• Utilize the link title attribute.

  A link can have a title attribute within the coding of the link. Using the title attribute of your links adds usability, accessibility and search engine optimization to the link. When the user puts their mouse over the link a tip is displayed for those who can see the link, is read out to those who use assistive technology and is read by the search bots. All three know what to expect at the linked page.

Ultimately you want to make it easy to navigate around your website or blog.

Make the Content Scanable

People don’t read content from top to bottom on the web like they do when reading a book. When you read a magazine do you read every single article top to bottom? Not usually, you scan the article to see if you want to read the whole thing. Well, people on the web do the same thing. They scan the page looking for key information they are looking for.

• Add white space to breakup the content and define areas of the pages.

  Information all squished together is hard to read and comprehend. By including white space (empty spacing areas) to the content of your page it makes it easier to read and scan.

• Use headings and sub-headings to define areas of the page or sections of the content.

  Using headings and sub-headings help define the areas and sections of the page. It also creates some white space when the heading tags are formatted properly.

  There are 6 heading tags available (H1 through H6) within the HTML specification. Use them as intended and in the right heading hierarchy order. This adds accessibility and search engine optimization to the page as well as making the structure of the page clear to the visitor.

• Consistant Text Alignment

  It is really hard to read a page where the text on the page uses different alignment.

  Keep the text alignment of the page consistant, preferablly left aligned for easier reading. Centered and justified text is hard to read.

  A centered main heading would be ok but having a mash of centered headings and non centered headings makes it hard to figure out how the page is structured.

Better Usability for Better ROI

Provding better usability on your website or blog will improve your return on investment (ROI). The more happy visitors you have the more social proof you will get via social bookmarking, social networking sites and general word of mouth endorsements.

See your profits increase, newsletter signups grow, your readership grow or what ever goals you have set for the site be accomplished by reviewing and improving the usability of your site.

Copyright © 2005 - 2024 Web Page Mistakes. All rights reserved.

What's next?

Follow our new articles via RSS, follow us on Twitter and submit to your favourite social networking site:

This entry was last modified January 30, 2013 at 1:07 am and is filed under Usability . You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.