Download Web Usability

Stephen Kimani
Definition
 Navigation
 Supporting Web Usability
 ISO Guidance on WWW User Interfaces



Web usability is the application of usability in those domains where web browsing,
and web search, or web navigation in general, can be considered as the general
paradigm for constructing interactive web-based applications.
In order to achieve web usability, the website development process should ideally
adopt the user-centered design methodology.


Navigation is primarily concerned with finding out about, and moving through, an
environment.
Design of navigation in information spaces:
1. Signage
2. Maps and guides
3. Environmental cues and social navigation
1. Signage
 Good, clear and unambiguous signposting of spaces is critical in the design of
spaces.
 There are three primary types of signs that designers can use:
◦ informational signs
◦ directional signs
◦ warning and reassurance signs
1. Signage

Informational signs: they provide information on objects, people and activities.
◦ E.g. 1:
◦ E.g. 2: labels - these are used for internal and external web links, headings and subheadings, titles, and
related areas.
1. Signage

Directional signs: They provide route and survey information - often through sign
hierarchies, with one type of sign providing general directions being followed by
another that provides local directions.
◦ E.g. 1:
◦ E.g. 2: labels - It is common to have a navigation bar across the top of a site which points to the main, toplevel categories. Within each of these there are subcategories (eg as a menu on the left-hand side or as a
drop-down).
◦ E.g. 3: site maps - Useful since they
display the structure and content headers
of the various categories.
1. Signage

Warning and reassurance signs: They provide feedback or information on actual or
potential actions within the environment.
◦ E.g. 1:
◦ E.g. 2: “You are here” sign, or by having current page highlighted.
◦ E.g.3: using breadcrumbs – a common way of showing people where they are and how they could find their
way back
2. Maps and guides
 Maps can be used to provide navigational information.

When maps are supplemented with additional detail about objects in the
environment, they become guides.
3. Environmental cues and social navigation





Even in a well-designed
environment, people will often
turn to other people for
information on navigation rather
than use more formalized
information artefacts.
Information from other people is
usually personalized and adapted
to suit the individual’s needs.
Sometimes we use a wide range
of cues in order to manage our
activities e.g. by observing the
behaviour of other people, our
friends, etc.
This is often supported using
online social media features such
as forums, blogs, chats, etc.
We sometimes rely on other types
of environmental cues e.g.
assuming that the reception is at
the front of the building,
restrooms are located at the back
of a restaurant, etc.
1. Site Structure and Content
 Structure information so that it is meaningful to the user. A structure which
makes sense to the user will often differ from the structure used internally by the
data provider. Different user groups may need different interfaces.
 Determine what information content the user needs at what level of detail.
 Use terminology familiar to the user.
 Consider how users read content – they rarely read web pages word by word they tend to scan pages to find the information they want.
◦
◦
◦
◦
Make content scannable e.g. bullets, highlighting keywords, headings, short sections
Start with a brief introduction/summary
Avoid unnecessary content
Etc
2. Support Navigation: Help users find their way
 Meet user expectations by following conventions established by other major sites.
 When appropriate use a familiar metaphor.
 Show users where they are and where they can go.
 Use a consistent page layout.
 Use self-explanatory text links.
 Minimize the number of clicks needed to reach final content.
 Users do not mind scrolling pages if necessary, but beware of pages that appear
complete on a small screen while hiding important buttons or links just off the
bottom.
 On each page, provide a link to home.
 On larger sites consider providing a search facility.
 Provide a simple interface to the search engine and check that it finds relevant results
and in an easily understood manner.
 Include navigational buttons at both the top and bottom of the page.
 Use URLs which are meaningful (preferably in lower case), short and simple to type.
 Use page titles which are meaningful in bookmarks and search engine results.
 Avoid dead ends – plan that any page could be the first page for users reaching the
site from a search engine.
2. Support Navigation: Tell users what to expect
 Explain what each link contains – so that users can find the right link first time.
e.g. use link titles/labels.
 List the contents of each part of the site as a list of links to the final information,
divided into meaningfully titled groups.
 Provide a site map or overview so as to make users know the scope of the site.
 Distinguish between a contents list for a page, links to other pages, and links to
other sites.
 Any changes to the default link colours and style make it more difficult for users
to find the links.
 Give sizes of files that can be downloaded.
2. Support Navigation: Highlight important links
 The wording of links embedded in text should help users scan the contents of a
page, and highlight/give prominence to links to key pages.
 To keep users on your site, differentiate between on-site and off-site links.
3. Page Design: Design an effective home page
 This should establish the site identity and give a clear overview of the content.
 The important information should fit on one screen, as some users will not
bother to scroll the home page.
3. Page Design: Design for efficiency
 Minimize the download time.
◦
◦
◦


Use small images.
Use a small number of colours to reduce the size of graphics.
etc
Use the ALT tag to describe graphics, as many users do not wait for graphics to
load.
Use interlaced images – pixels are loaded randomly.
3. Page Design: Make text easy to read and use
 Avoid the use of flashing or animation, as they can be distracting.
 Avoid patterned backgrounds, as these make text difficult to read.
 Where possible use tables instead of frames – frames can interfere with printing
and Bookmarking.
3. Page Design: Support different browser environments
 Test that your pages format correctly using the required browsers and platforms.
 Do not resize the text (except with headings) as all other methods produce
unacceptable results on some browsers.
 Check that pages containing reference information or large amounts of text print
correctly on the required browsers, platforms and paper sizes.
 Note that for text-only browsers/text-only settings:
◦
◦
Some users turn off graphics to increase speed, and the visually impaired use text only browsers.
Use a logical hierarchy of headings, avoid frames and use ALT tags which describe the function of
images.
ISO 9241-151:2008 Guidance on World Wide Web user interfaces
 This standard provides guidance on the human-centred design of software Web
user interfaces with the aim of increasing usability.
 The standard covers five areas:
1. High-level design decisions and design strategy: These include deciding on the
purpose of the site and how this is communicated to users; who the intended
users are and what they are trying to get from the site (their goals).
2. Content design: This includes the conceptual model underlying the site; how it is
organized and how issues such as privacy and personalization are addressed.
3. Navigation: This includes how the content can be organized to help users
navigate the site easily; and also how search is organized.
4. Content presentation: This includes how pages and links should be designed to
help users achieve their information goals.
5. General design aspects: This includes issues such as internationalization, how to
provide usable help and building in error-tolerance (what download times are
acceptable).

Question: Find out whether the standard also handles:
◦
◦
Mobile Web user interfaces and/or smart user interfaces.
Non-conventional designs such as aesthetic and affective design.
 Thank
you
 Questions