Web Usability Stephen Kimani

Roadmap Definition Navigation Supporting Web Usability ISO Guidance on WWW User Interfaces

Definition Web Usability 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 Web Usability Navigation is primarily concerned with finding out about, and moving through, an environment. Design of navigation in information spaces: Signage Maps and guides Environmental cues and social navigation

Navigation Web Usability 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

Navigation Web Usability 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.

Navigation Web Usability 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, top- level 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.

Navigation Web Usability 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

Navigation 2. Maps and guides Web Usability 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.

Navigation 3. Environmental cues and social navigation Web Usability 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. 3. Environmental cues and social navigation

Supporting Web Usability 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

Supporting Web Usability 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.

Supporting Web Usability 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.

Supporting Web Usability 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.

Supporting Web Usability 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.

Supporting Web Usability 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.

Supporting Web Usability 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.

Supporting Web Usability 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 Guidance on WWW User Interfaces Web Usability 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.

Web Usability Web Usability Thank you Questions