STEP 2

left arrow
To Step 1
Home page >> Step 2 >> Usability
Usability

Website Usability

As I said before, Usability is one of my favorite subjects in web design. It can either make or break your site! This section aims at providing useful tips and techniques in order to make your site usable to your visitors.

Always remember that your visitors, without which your site has no reason of existence, are looking to achieve their goals. The number one goal as you've learned, is to communicate and retrieve information, therefore your site must properly and effectively facilitate communication. In other words, you should assist your visitor in finding the information quickly and effectively.

Usable web pages must answer the visitor's following questions:

  • Where am I at all times?
  • What can I do and what information can I get from the page I am viewing?
  • Where can I go to from the page I am viewing?
  • How can I retrieve the information I want easily and quickly?
  • How can I easily navigate the site?
  • What do I have to do to get somewhere?
  • Where will each link take me to?

Visitors scan your pages as opposed to reading them word-by-word

All website visitors are by nature impatient and don't think that they will be reading your pages word-by-word. They do that rarely! Instead they scan the page, picking out individual words and sentences. Roughly 80 percent of visitors always scan any new page they come across and 20 percent reads them word-by-word. They quickly scan the page until something rings a bell. That is why you must write your text in a "scannable" manner, using:

  • Bulleted text
  • Paragraphs with reduced word count
  • Highlighted text
  • Meaningful headings and sub-headings
  • High quality and catchy graphics

Navigation

The subject which addresses most of the questions mentioned in the previous paragraph regarding usable web pages is Navigation.

Your site can have multiple navigation panels, but one of them must be the main. The main navigation refers essentially to the fist level of your sitemap's tree structure and must be evident to the visitor by positioning it at the top section of the page. It can either be:

  • Horizontal or
  • Vertical

The advantage of the horizontal menu is that it saves you page space as opposed to the vertical one. The disadvantage though is that it fits limited items due to your page width restrictions, something that does not apply to the vertical one since the height of the page is flexible.

It is very practical when your visitor's mouse cursor hovers over a menu first level item and that item has second level sub-items, to expand the menu and present him the second level menu as well. This will save him clicks, thus reduce the time he achieves his goal.

horizontal navigation
Horizontal navigation example

vertical navigation
Vertical navigation example

Breadcrumbs

In order to answer to the visitor's question "Where am I at all times?" regarding your site more effectively, it is advisable to include at the top of all of your internal pages a breadcrumb trail with the internal path where the currently viewed page resides (just like Hansel and Gretel did in the fairytale). Each breadcrumb's node will be a hyperlink to the respective parent page. Use small fonts for your breadcrumb in order to make it discrete yet functional.

If you see the current's page top content part you will see its breadcrumb:

Home page >> Step 2 >> Usability

Hyperlinks

Hyperlinks are links that direct the visitor to another web page (either within the same site or exits the site and enters and new one). They are a very important element of navigation. Some tips on hyperlinks:

  • Hyperlinks can either be underlined or not. I prefer either. The important thing though is that it must become evident to the visitor that they are hyperlinks! This can happen by using a color for hyperlinks which is very different from the text color. I would also recommend changing the color when hovering over the link as well as change the underline status (remove underline if link is underlined and add underline if link has none). This will help the visitor identify links even easier plus it creates a cool effect.
  • Do not use underlined links (even on hovering over it) for your main menu, but when hovering over them, change the color of the fonts or the background of the selection box so that it becomes evident to the visitor that he is selecting that menu choice.
  • Use short but at the same time meaningful descriptions as titles for the hyperlinks.
  • Avoid using the phrase "Click here to..." in order to prompt your visitor to click on the hyperlink. By now people are used to the Web conventions and will figure out how to click on your link.
  • For links which will direct the visitor away from your site, I am advising you to open each time such hyperlink on a separate window. That way, the window containg your site will still remain open and your visitor can revisit your site easier.

Readability

Your pages must be always easily readable. Stick to what you have decided during the look-and-feel and character decisions you took and you will do fine!

Prefer using text as text rather than embed text into images. The advantages for that are too many to ignore:

  • Text is always searchable and indexable
  • Text allows your visitors to easily copy and paste the information they find
  • Text fits the accessibility requirements
  • Text loads much faster
  • Text in general has all the advantages which raw text has

Icons and Tooltips

In your design you might want to just have an image as a hyperlink to your destination without any text (for instance have a question mark corresponding to help, a magnifying glass instead of a search button, etc.). What will help your visitors in this case is if on mouseover they can view a short description either for the icon or for the functionality it represents. Just place your cursor over the step 2 icon below and you will see its description:

Step 2

Data validation

For cases where your visitor submits information to your site which has to be associated with a particular validation (i.e. username/password, date, email, phone number, mandatory fields, etc.), he must always be informed on a potential wrong data entry and at the same time he must be directed to the mistakes he made so that he can easily correct them.

Accessibility

Last, but definitely not least, paragraph regarding usability refers to the accessibility issue.

Web accessibility refers to the practice of making websites usable by people of all abilities and disabilities. When sites are correctly designed, developed and edited, all users can have equal access to information and functionality. The World Wide Web Consortium (W3C) is the body that draws up standards to guide the development of the web, and has published a very thorough set of resources on the subject through its Web Accessibility Initiative (WAI).

It is advisable to make your site as accessible as possible. One way to do that as we saw, is to prefer plain text rather than text embedded to images because your visitor will have the ability to increase the fonts of the page if he wishes to do so, whereas if the text is embedded on an image, its size in the HTML page is fixed. For further information on the subject we are advising you to go to the W3C Web Accessibility Initiative (WAI) page.

At this point, we conclude Step 2 having all our design blueprints and decisions so that we can proceed to the implementation phase (Step 3).

left arrow Back to the architecture