| What is web usability & why is it important? | | | | * Use CSS and not images to create fancy |
| Web usability is about making your website in such a | | | | navigation items |
| way that your site users can find what they're | | | | * Read this article about how to speed up the |
| looking for quickly and efficiently. A usable website | | | | download time of your web pages at |
| can reap huge benefits on to your website and your | | | | Information should be easy to retrieve |
| business. | | | | We read web pages in a different manner to the |
| * Every £1 invested in improving your | | | | way we read printed matter. We generally don't read |
| website's usability returns £10 to £100 | | | | pages word-for-word - instead we scan. When we |
| (source: IBM) | | | | scan web pages certain items stand out: |
| * A web usability redesign can increase the sales | | | | * Headings |
| conversion rate by 100% (source: Jakob Nielson) | | | | * Link text |
| Your website has to be easy to navigate | | | | * Bold text |
| Users have gradually become accustomed to | | | | * Bulleted lists |
| particular layouts and phrases on the Internet, for | | | | Did you notice that images were left out of that list? |
| example: | | | | Contrary to the way in which we read printed |
| * Organisation logo is in the top-left corner and links | | | | matter, we see text before we see images on the |
| back to the homepage | | | | Internet. For optimal website usability don't place |
| * The term 'About us' is used for organisation | | | | important information in images as it might go |
| information | | | | unnoticed. |
| * Navigation is in the same place on each page and | | | | Restrictions must not be placed on users |
| adjacent to the content | | | | Don't prevent your users from navigating through the |
| * Anything flashing or placed above the top logo is | | | | Internet in the way that they want to. For example: |
| often an advertisement | | | | 1. Every time a link is opened in a new window the |
| * The term 'Shopping cart' is used for items you | | | | back button is disabled. Approximately 60% of Web |
| might wish to purchase | | | | users employ the back button as their primary means |
| There are numerous other conventions like these | | | | of navigation (source: Usability Interface). If you do |
| that enhance your website's usability - can you think | | | | this then you're preventing 60% of your users from |
| of some more? | | | | using their primary navigation - now that can't be |
| Don't underestimate the importance of these | | | | good for usability. |
| conventions - as the Internet matures we're getting | | | | 2. Don't use frames to lay out your website. Frames |
| more and more used to things being a certain way. | | | | can cause a number of usability problems, namely: |
| Break these conventions and you may be left with | | | | * Disabling the back button (see above) |
| nothing but a website with poor usability and a | | | | * Bookmarking not possible |
| handful of dissatisfied site visitors. | | | | * Impossible to e-mail the link to someone else |
| Pages must download quickly | | | | * Problems with printing |
| Usability studies have shown that 8.6 seconds is the | | | | * Users feel trapped if external links open in the |
| maximum time web users will wait for a page to | | | | same window |
| download (source: Andrew B. King - Speed Up Your | | | | * Search engine optimisation issues |
| Site). As of March 2004 just 25% of UK web users | | | | There are lots of other ways that websites can |
| had broadband (source: UK National Statistics) so it's | | | | place restrictions on its users, ultimately damaging |
| essential for optimal usability that your website | | | | their usability - can you think of any more? Just think |
| downloads quickly. | | | | back to the last time a website really infuriated you - |
| To speed up the download time of your website we | | | | what annoying thing did it do to make you feel that |
| recommend you do three things: | | | | way? |
| * Use CSS and not tables to lay out your web page | | | | |