|
Webpage Usability Guide
This page contains information on how to make a webpage that is easy to use. This should conform to Jacob Nielsen's usability guide available at: http://www.useit.com
Text
- Text size is important on a page. Choice of font is also important.
Small text can be hard to read, and big
text uses too much screen space.
- CAPITALS CAN BE ANNOYING! It makes the impression that you are shouting
at the user.
- Underlining text makes it appear like a hyperlink and will
confuse the user.
- Italic text should be used rarely. Some people find italic
text harder to read.
- Don't use graphics in place of images. The size of the image to download
will increase dramatically the time to view the page the user will lose
interest.
Colours
- Make sure the colour scheme of a page makes the text stand out from
the background. Hence, have a good contrast.
- Use a light coloured background and a darker
coloured text.
- People with vision problems may not be able to distinguish different
colour on screen, such as red and blue.
Background
- If you are using a plain coloured background, make it light.
- Images can be used on backgrounds. Patterns can be used but make sure
the edges of the patterns match up when tessellated.
- Don't use animated GIF files for a background as it makes the text
look like it is moving.
- When Shockwave and Flash are used, make sure you can skip the animation
or have another way to display the same information.
Images
- Make sure images are small and compressed. Windows bitmaps (BMP) are
uncompressed and unsuitable for web downloads.
- Use JPEG (Joint Photographics Expert Group) images for pictures and
GIF (Graphics Interchange Format) for icons, bullet points or small
animations.
- If possible, use an image on a page, or pages repeatedly. Once downloaded
to the users computer it can be used again and again.
- The ALT tab should be used for people who are visually impaired or
for users who don't have the ability to display images on their browser.
- Shockwave and Flash files take time to download, so use if you do
use them, make the files small.
Links and Navigation
- Links should be shown by using the address of a page or by simply
writing what the link will do, i.e.: Download, Close, Home etc
- Links should be visually separated to distinguish one from another.
Use a "¦" symbol (vertical line) or enclose the link in square
brackets "[..]" etc
- Use graphic links along with text links so that users who don't have
graphics enabled on their browser can still access the pages.
- If a site is big, then use a site map so that users can find their
way around more easily.
Tables
- Tables are a feature that graphical browsers will have less problems
with than a text based browser. Therefore use tables rarely or provide
users with another way to view the same information.
- Tables don't require much time to download so are useful as an alternative
for frames.
Frames
- Frames should be used rarely
- Make the names of your frames sensible, e.g. side, navigation, top,
main etc
- Many old browsers can't view frames so include a link to a none frames
version of your site if you do have frames.
- Frames use a lot of screen space on smaller monitors, e.g., 14",
15"
- Frames are made up of individual pages joined together using a main
page. To download all these pages will take time and will frustrate
the user.
User Interaction
- Don't have scrolling text that is also a link to another page. Users
with disabilities will find it hard to click on the moving target.
- Use the tab index on a webpage (using the TABINDEX attribute), but
we aware that tab index is only available on browsers from Microsoft
Internet Explorer 4 upward.
Cascading Style Sheets
- Cascading style sheets can be useful when you have many similar pages
that you wish to have the same look and feel to them.
- CSS will hold the values of page colours, styles and background images
in a single separate file
- Some browsers don't support Cascading Style Sheets.
Ideas on this page can be found on: http://www.rnib.org/digital/hints.htm
|
