UNIVERSAL USABILITY IN PRACTICE

General

• Keep the presentation small but avoid clutter.
• Organize the content effectively and logically.
• Don't use features that consume a lot of spaces. If it is strictly necessary, design to utilize the space efficiently.
  • Don't use images;
  • Don't use frames;
  • Don't use tables.
• Write less text.
  • See Be Succinct! (Writing for the Web) by Jakob Nielsen, March 15 1997.
    • Be succinct
    • Don't require users to read long continuous blocks of text
    • Use hypertext to split up long information into multiple pages
• Be aware how graphics are displayed.
• Test your pages:
  • There are emulators for Palm OS (www.palmos.com/dev/tech/tools/emulator/) and WebTV (http://developer.webtv.net/design/tools/viewer/Default.htm).

Layout

• Keep the pages small.
  • It is difficult for users to find their place in a lengthy section of text using the scroll bar. Maintain a balance between page depth (level of nested pages) and the length of individual pages. For small screen, a deeper hierarchy is better than longer pages in general.
  • If the design is used by only one particular device, make each page small enough to fit on a single screen to eliminate scrolling.
• Organize the contents in structure to assist users to search for the pages.
  • Example: Try to split long documents into pieces and create indexes for them. If splitting the document is undesirable, try using named anchors to mark sections and maintain links to them in a table of contents. For large or complicated data, you might choose to employ multiple indexes.
• Only show essential items. You have to look at your site and decide what is the most important. Web pages that are viewed on small screen are usually used as a reference and should be short and to the point.
• Don't use multi-column. It usually requires user to do horizontal scrolling.
• If the design must use columns anyway and the users need horizontal scrolling, repeat any navigation structure such that they need don't need to scroll back for the navigation aid.

Images

• Don't assume each image can be displayed. Some devices or users with small screen just ignore image.
• Don't assume the detail of the image can be shown.
• Don't assume the browser will resize image.
  • Even the device support resizing image, information may be lost.
• Don't use images as beauty aid. Avoid graphics that do not help the navigation or readability.
• Avoid using images unless: 1. it is strictly necessary; 2. or the screen size and the resolution are enough to convey the detail and the information of the image.
• If your application must use detail images, tailor them for small screen with low resolution. Try to provide several copies with different sizes and resolution for the same images. Some transfer protocols are able to fetch the most suitable one.
• Keep the image simple and give the user some indication of its function.
• Don't include text inside image. 
  • The characters will be very difficult to read on the small screen.
  • The text information will be lost when the image is discarded.
• Search for convenient way to convey the same information without using an image, e.g. ALT tag in HTML.
• Always provide an alternate text with each image. Keep in mind that you are trying to convey the message of the image, not describe it.
  • Example: Putting "Yellow button" as an alternate text for a yellow button is not as effective as using a "*" instead.
  • See Use of Alternate Text in Images by A.J. Flavell.
• Reserve use of Image Maps for the absolutely necessary cases (e.g., for selecting a location on a map). Make navigation bars and other sets of buttons into discrete images.

   

Navigation

• The main pages should be simple and other extra material should be put in additional pages.
• Site structure should be simple, clear and concise.
• Use forms to ask users what they want to see.
  • Small screen with low resolution has limited space for display, so it's crucial that you limit your content to what users actually want to see. For example, financial sites use forms to have users setup watch lists of stocks they want to track. Weather sites use forms to have users enter the city and country they want the forecast for.
  • Because of the reduced text readability and the problems with understanding the structure, the user cannot easily go to the part of a page that covers a given topic of interest. Thus, the "find" feature provided by forms will be very handy within page navigation aid.
• If the site structure is complex, provides navigation support for easily understanding of larger structures.
  • For example, index of table contents.
• Use Anchor links within a page.
  • They are very useful because they reduce the need for scrolling.
• Split your information into a rich hypertext space with a larger number of smaller nodes.