Web Design
NAVIGATION
Navigating a poorly designed website can be a disorienting and frustrating experience. This section describes some techniques that you can apply to help users find what they are searching for, understand where they have been, and ascertain where they might go
Fleming (1998, p. 13) lists ten qualities that she has observed in sites with successful navigation systems. While they do not constitute a formula, the qualities 'help us to understand the principles behind our design choices'. According to Fleming, navigation that works should:
be easily learned; • remain consistent; • provide feedback; • appear in context; • offer alternatives; • require an economy of action and time; • provide clear visual messages; • use clear and understandable labels; • be appropriate to the site's purpose; and • support users' goals and behaviours.
Organisation scheme
The easiest organisation schemes to design and maintain are ones that divide information into well-defined and mutually exclusive sections. Rosenfeld, Morville and Arango (2015, pp. 105-108) provide some examples of exact organisation schemes
• Alphabetical organisation schemes, such as those used in dictionaries and encyclopedias, organise information alphabetically.
• Chronological organisation schemes, such as those used in diaries and televisions guides, organise information by time or date.
• Geographical organisation schemes, such as those used in weather forecasts, organise information by location.
Although exact organisation schemes are easy to design, they are not necessarily the easiest to use. It is often more appropriate to group content items according to other shared characteristics. For example, a corporate telephone directory organised by department may be more useful to customers than one that is organised alphabetically by last name only. Rosenfeld, Morville and Arango (2015, pp. 108-114) provide some examples of organisation schemes that are more ambiguous⎯but perhaps more useful⎯than the exact organisation schemes listed earlier.
Topical organisation schemes, such as those used in textbooks, organise information by topic.
• Task-oriented organisation schemes, such as those used in the menu bars of software applications, organise information by processes, functions and tasks.
• Audience-specific organisation schemes organise information according to the interests of particular audiences. For example, a university website might organise its content according to the interests of potential students, current students and staff.
• Metaphor-driven organisation schemes organise information by relating it to familiar metaphors. For example, the Windows and Macintosh operating systems help users to operate their computer through a desktop metaphor comprised of files, folders and a trash can or recycle bin
Site Structure
Closely related to the topic of organising information is the structure of a website. Just as regular arrangements of streets can help travellers navigate through a city, so regular arrangements of links can help users find their way around a website. Four common navigational structures are described below and illustrated in Figure 9-2:
Linear structure A linear structure provides a single logical path through its contents. The user is encouraged to move from one page to the next in a predetermined sequence. Navigation in a linear structure usually relies upon links that take the user to the next page or the previous page in the sequence. Linear structures are ideal for presenting short stories, step-by-step instructions and other information that has a sequential format.
Hierarchical structure In a hierarchical (or tree) structure every page except the starting point (the root) has a parent. Each page also has one or more children unless it is an end point (a leaf). It should be possible to follow a path from the root to any other page in the structure. Users generally find it easy to remain oriented in a hierarchical structure, knowing they can move up for more general information or down for more specific information.
Web structure A web structure has no rules about the manner in which its pages are linked together. Web structures encourage browsing and permit a richer network of relationships than linear or hierarchical structures. While the freedom offered by web structures may seem appealing, they are difficult to create, maintain and navigate. The irregular arrangement of pages can be very disorienting and frustrating for users who have a specific goal in mind.
Combination structure A combination structure is one that combines two or more of the previously mentioned structures. For example, the structure of a website may be basically hierarchical, but within the hierarchy there may be linear segments. Combination structures are useful when the information doesn't naturally fit a simpler structure.
The home page and interior pages
Let's consider some of the navigation issues that need to be considered when designing the home page and the interior pages. The home page is the place where most visitors start exploring a site, and as such, it performs some important functions. Nielsen (2000, pp. 166−168) identifies some of those functions:
For the first-time visitor, answering the question "What does this site do?" may be the most important function of the home page, but for most other users, the most important function of a home page is to serve as the entry point to the site's navigation scheme. Often this will take the form of a list of the top levels of a hierarchical directory, but depending on the information architecture, different forms of top-level entry aides may make sense
TIPS:
One straightforward way of quickly informing users about the purpose and identity of a site is by prominently displaying its name or logo (see Figure 9-3). Also the design of the home page⎯the use of visual language⎯should give the first-time visitor some clue as to the nature of the site.
In a hierarchically structured site the home page is the top-level page or root⎯the page without a parent. It usually provides an overview of the site's content with links to all of the main sections. Often this orientation device will take the form of a navigation bar or a table of contents
As the flagship of the site, the home page often has a slightly different design to the remaining pages, but they generally all share the same style. Visual consistency is an important consideration in interface design. Navigation is more efficient if users don't have to spend time familiarising themselves with a new layout every time they move to a new page. You can build similarity between pages with consistent choices of visual components such as colours and fonts, and consistent placement of repeating page elements such as headings and navigation controls.
Remember that not all users will enter a site through its home page. People who arrive via a search engine or an external link could enter from any page at all. A descriptive title or signature graphic near the top of each page can help to orient users who find themselves in this situation. Similarly, identification information near the bottom of each page⎯such as contact details, the document's date of last revision or copyright information⎯can act as a signature for the document.
Every page in a website should provide a link to the home page so that users can immediately return to a familiar location if they become disoriented. Often this link takes the form of the site logo or an explicit navigation control labelled 'home'. Hierarchical sites can extend this idea by providing links to all of the main sections of the site on every page. Try to avoid creating 'dead-end' pages where clicking the browser's Back button is the only way out
Links
Links are one of the most important elements of a website. Without links there is no navigation. The links in a website may be categorised as either those that define the structure of the site, or those that serve as cross-references to related information. Structural links are established early in a site's design phase, but cross-references aren't added until all of the content is in place.
Structural links
Typical examples of structural links are the links that make up a navigation bar. In its simplest form, a navigation bar is a collection of text links to the main sections of a site. Alternatively a navigation bar may be implemented as a collection of linked images or as an image map, which will be explained later in this section.
TIPS
If you use icons (small images) as the links within a navigation bar, it is advisable to complement them with text labels. Very few icons have universally recognised meanings. For example, an icon that is readily recognised as a mailbox in one culture, could be surprisingly unfamiliar to people from other cultures. Ambiguous icons are more confusing than helpful.
Navigation bars are usually either horizontal or vertical. The number of links in the bar sometimes determines its orientation. If a navigation bar has a large number of links, a horizontal orientation might be impractical. Users should be able to see all navigation options simultaneously without having to scroll the page.
Placing a horizontal navigation bar at the top of a page makes the links immediately accessible as soon as the page loads (see Figure 9-4). The downside of using a horizontal navigation bar at the top of the page is that it quickly scrolls out of view. Some designers place a second horizontal navigation bar at the bottom of each page for this reason
Labelling
Labels are an important cue for helping users to understand a site's structure and navigation system. We typically find labels used in two different ways within a website: as links to chunks of information, and as headings that identify chunks of information. For example, an icon labelled 'What's New' might serve as a link to a page entitled 'What's New'
TIPS:
A good label is one that communicates an idea clearly without occupying too much screen space. Here are some guidelines for effective labelling:
• Speak the user's language. Successful labels match the thinking and language of a site's visitors, not its designers or owners. Take special care to avoid jargon and organisation terminology. • Don't be too terse. If the meaning of a label is ambiguous, consider supplementing its first appearance with a brief description. • Add text labels to icons. Although icons are commonly used as navigation controls, their meanings are generally open to more than one interpretation. • Apply labels consistently. Using the label 'Main' on one page and 'Home' on another will hinder the familiarity that users need when navigating a site. • Match link labels to headings. Ensure that labels on navigation controls match the headings on the pages they link to. • Give pages meaningful titles. Titles are often used as the main references to pages in browser history lists and bookmark lists
Writing for the Web
Basic principles of clear writing are just as applicable to web documents as they are to other types of documents. Some of the best advice I can give you for improving your writing is to read William Strunk and E.B. White's (1979) famous manual, The Elements of Style. Although this book has been around for decades, its advice is just as relevant today as it ever was. Here are some examples of Strunk and White's principles of composition.
Use the active voice rather than the passive voice. Passive: The ball was hit by Pat. Active: Pat hit the ball. Passive: The race was finished by most of the competitors. Active: Most of the competitors finished the race.
Present statements in a positive form rather than in a negative form. Negative: She did not often arrive on time. Positive: She usually arrived late. Negative: He was not unaware of the problem. Positive: He was aware of the problem
Use language that is definite, specific and concrete rather than general, vague or abstract. Original: A period of unfavourable weather set in. Improved: It rained every day for a week. Original: You will be transferred to alternative accommodation. Improved: You will be moved to another office.
Omit needless words from your writing. Original: She called his attention to the fact that the client was waiting. Improved: She reminded him that the client was waiting. Original: The results will be available in the near future. Improved: The results will be available soon
Write for usability
When people view web pages they tend to scan the text for interesting details rather than read it word for word. Nielsen (2000, pp. 100-125) encourages web designers to adjust their writing style to accommodate this behaviour. Here are some of his guidelines.
• Present your ideas with fewer words than you would in a printed document. • Keep pages short. When faced with a lengthy page of text, consider reorganising the material into sub-topics and splitting it over multiple pages. • Use short paragraphs. Don't expect users to read long continuous blocks of text. • Use headings and sub-headings to help users retrieve information quickly. • Use ordered and unordered lists to present related items rather than bury them in a block of continuous text. • Present important information close to the top of a page or at the beginning of a paragraph. • Avoid using sentences that are too complex in structure or too dense with content. • Proofread your writing carefully because errors in spelling, punctuation and grammar undermine the credibility of a document. If possible, ask someone else to check your work. Other people can often detect errors that the writer fails to see
Write for personality
Morris (2000) offers some suggestions for using language to create personality and present a certain voice. He believes that words used in e-mail messages and websites need to be more conversational, more tailored and more honest than other forms of written communication.
TIPS
Morris (2000, pp. 84-88) provides a checklist of questions for assessing whether a website's use of language effective or not. The checklist is not based on academic research, but it does provide some food for thought. Here are some of the questions:
Style: Does it get to the point or does it waste your time? Does it suit the purpose of the site? Is it fresh and new or is it written in a flat corporate voice?
• Personality and impact: Does it have personality (but not too much)? Does it strike a chord with you? Do the words make you want to stay?
• Reality: Does it feel real and truthful or is it full of hype and hot air? Do you believe it?
• One way or two: Does it open up a two-way conversation? Does it make you want to get in contact? Do the experiences of users inform the site?
• Voice: Does it sound as though a real human wrote it? Would you spend time with that person? Does it sound like the same organisation you dealt with by phone, in person or in writing?
Meta tags
The <meta> tag is often used to provide a brief site description and keywords, which search engines may use to improve the accuracy of search results. The identifiers used for this purpose are description and keywords. For example, a document that promotes Queensland as a holiday destination might contain the following <meta> tags.
<meta name="description" content="Everything you need to know about holidaying in Queensland"> <meta name="keywords" content="Queensland, vacation, holiday, tourism">
Publishing a website
Once you have designed and built a website, there is still more to be done before it can be viewed by others. You need to register a domain name, arrange web hosting, publish your files to the server, and submit your domain to search engines.
Registering a domain name
When you register a domain name, it becomes associated with the web hosting space that you designate for the registration period. Domain names can be registered through competing, commercial organisations known as registrars. A list of auDA-accredited registrars can be found on the auDA website (http://www.auda.org.au). Service offerings, application procedures, registration periods and charges vary from registrar to registrar, so it is worth shopping around. Some registrars use resellers to provide customer sales and services. For more specific details about domain name registration, visit any of the auDAaccredited registrars (https://www.auda.org.au/industry-information/registrars) listed on the auDA website.