Designing Website Interfaces

The single overarching principle of user-interface design is that a good interface is self-explanatory, irrespective of type. Naturally, there are different types of Web interface designs and this is not surprising, given that a user interface is a representation of the functions offered by an application and there are different types of Web applications. In addition to this, target audience affects interface design, since different categories of users perceive things differently, have different preferences, and react differently to the same things. For example, Figure 24.2 shows two Web designs with the same basic layout but different styles to suit different target audiences. The one on the left (the less serious) is generally more suitable for children than the one on the right, which is more suited to adults. They are different in various ways, such as in color and shape. For children’s designs, colors are usually more vivid and shapes are rounder and more playful, while for adults, colors are typically more subdued, shapes are more squarish, and layout is busier. Even then, there is no such thing as an interface that is suitable for all in any specific audience category, particularly when children are concerned, as different age groups prefer different types of interface designs.

Similarly, Figure 24.3 shows two designs that are different because of the difference in application goals. The one on the left is more suitable for a news media website than the one on the right, which is more suitable for a personal website, or some alternative style website. The former is busier and more formal while the latter is more spacey and casual.

Irrespective of differences in higher-level features or characteristics, most Web pages, at least professional ones, can be said to comprise four main parts: header, footer, content area, and navigation. This has already been implied earlier in Chapters 2 and 19-21. The header is the graphic strip across the top of the page, the footer is the one that goes across the bottom, the content area is the space in-between, and navigation design is varied. Figure 24.4 shows the typical design components of a Web page. Within this design concept, there are myriads of variations. For example, links are embedded in content and various elements are placed in different areas.

However, Web design can still be broadly categorized as comprising mainly navigation and content parts. An effective Web page design is therefore best achieved by addressing each area specifically, using the various design principles discussed so far to accomplish a design that is well organized, uses space economically, and communicates clearly at a level that matches users’ capabilities.

1. Designing Website Navigation

There are various approaches to designing navigation in Web applications, but the mostly used is persistent navigation, which has its roots in GUI (graphical user interface) design where menus are displayed permanently and appear on every screen. One of the main advantages of this is that it creates consistency, which makes it easy for users to master an interface quickly. It enables recognizability, predictability, efficiency, and user empowerment. It enables recognizability, because things always look the same and users know where to find them; predictability, because things always work the same way and users know what to expect when they initiate an action; efficiency, because there is no wasting time constantly learning new features; and user empowerment, because users know they can rely on their past knowledge to plan a set of steps to achieve a goal. It gives the sense that they know what they are doing.

Like menus in traditional desktop GUI designs, navigation elements in Web design are distributed around the top, bottom, left, and right areas. Studies have shown that none of these positions holds any significant usability advantages over the others, as long as navigation components are clearly visible and consistently located. A combination of top, bottom, and left side is common in Web design, depending on the number of functions that need to be represented.

The exact types of navigation elements used in an application generally depend on the structure of the application and the functionalities it offers. For example, as illustrated in Figure 24.5, a Web application that has four pages and requires user-interaction to navigate them might have two elements to go to the next or previous page, if it has a linear structure, or four elements, each for taking users to the corresponding page, if it has a network structure. For a hierarchical structure, the home page might have three elements for going to each of the other pages, each of which would have an element to go back to the home page. A hierarchical structure, of course, can be made to behave like a network if all navigation elements are persistent, in that users can navigate to any page from any other page.

In more complex Web applications than the examples, such as Google’s on-line word processor, navigation may not only be to other pages, but may also involve opening new dialogue windows on top of the main window.

The more pages or functionalities (options) an application offers, the more the number of navigation elements required in its interface. Where there are lots of elements, it is seldom practical to display all of them at once without compromising the usability of an interface, so, dividing them into groups is usually necessary. However, this can also result in a structure that contains too many menu levels that can make finding contents or functions confusing or frustrating. Generally, any structure that goes beyond the second level requires extra-careful planning from the beginning to reduce number of levels, if possible. In other words, the design on the left in Figure 24.6 is likely to be easier to use than the one on the right.

This means that a balance is important between having too many navigation elements on a page and a structure that is too deep. A balance might involve, for example, embedding a linear structure in a hierarchical structure. The fact that different navigation structures are best suited for different situations also helps toward reaching a balance. A linear navigation structure, for example, is adequate for presenting simple content or training materials and more suitable for children. In contrast, more complex content and more matured users benefit better from hierarchical or network structures, because these structures provide more options and flexibility.

As mentioned earlier, a combination of top, left, and bottom placement is the most common way of locating the menus for a website’s navigation. When menus are located at the top area, they are usually placed in and/or closely under the header, and when located at the bottom, they are usually placed in the footer. Figure 24.7 shows an example of a permanent navigation design, identifying some standard navigation elements that are commonly included, such as application ID, links to all sections, a “you are here” indicator, utilities options, and a search facility.

Website ID: This identifies the website and is typically in the form of a logo or name, or both, and placed at the top left area of the page/header in cultures that read from left to right, so that it is one of the first things users see. For a target audience that reads from right to left, placement would naturally be top right. Appearance should be different from the rest of the page, so that it can easily attract users’ attention. When a logo is used and it does not indicate the name of the website, this should be provided clearly (typically in bold) below or on either side. Figure 24.8 shows some examples of the variations used. It is useful and standard practice to also make website ID a link to the home page, so that clicking it while on any other page takes users there.
Links to sections: These are features that provide access to the sections available on a site and sometimes referred to as menus. They can be in a variety of forms; they can be buttons or hyperlinks and placed across the top of the page or vertically on the left or right side. A common convention when located in the top area is the use of tabs metaphor, such as shown earlier in Figure 24.5. Guidelines on the design of tabs are discussed later in the chapter. A link can lead directly to content or to further links, which can be presented, for example, through a mega drop-down menu, also described shortly. One of the links to sections (typically the first) should be to the home page, so that, in essence, every page has a link to the home page. For consistency, each link should also match exactly the name (title) on the page it leads to and the name should stand out clearly, be accurately descriptive of the page content, and positioned so that it is clear that it applies to the content of the page. Making a page name stand out can be achieved via font style (typically bold), font size, or color. Figure 24.9 shows some examples. Although the positions of the names are centralized in the examples, placing a name at the top-left or top-right of a page can also be effective.
Utilities options: These include essential facilities and information that are not part of the main content, such as Shopping Cart, Your Account, About Us, Contact Us, and Help. The types of utilities provided depend on type of application. They may be placed anywhere, but are typically placed at the top of the page to the right. Ideally, four to five should be displayed at once to ensure no item is difficult to find. Where there is not enough space to display all available utilities, the most frequently used can be displayed and others grouped under one option.
Search facility: This feature provides means of searching the content of a site and is particularly essential where there is a lot of content and compensates for the tendency for complex navigation structures and content to lose users. It is placed near the top of the page, so that it is easy to see, and should be in the form of type-in text box, not a link to another page or a dialogue window, because users usually require immediate action. Also, a text box is what users are likely to look for when they want to do a search. The text box should be wide enough to contain a few words without scrolling, as scrolling makes it difficult for users to verify their input. It should also have at least an associated button for activating the search. The simple convention is a box, button, and the word “Search” The word “Go” is also commonly used on the button. Figure 24.10 shows some variations.

The use of fancy or unfamiliar words, such as “Find” and “Keyword Search” can be confusing, as they might make users wonder whether or not they represent the same as a normal search function. If a search of both a site and the Web is offered, any instructions to distinguish them should be short and straight to the point, such as shown in Figure 24.11.

To let users search only a specific section for a term, the search function can also include the scope option. Because of the tendency for users to miss the option, it is good practice to set default search scope to “All,” as shown in Figure 24.11, so that the search is treated as normal. If scope option is offered, the section searched by a user should be stated clearly at the top of the result page. Advice should also be offered on the page on how to reduce scope when a search returns too many results. There seems no evidence that an advanced search feature is usually needed, since most users are unable to use it; but, if it is offered, it should be on a separate page, with a link to the page placed near the normal search function, such as “more” and “tips,” as shown in Figure 24.12.

“You are here” indicator: This feature is not strictly a component of navigation; rather, it is a piece of information to help users determine where they are within the hierarchy of a site. One way to make it perform this
function effectively is through highlighting the currently selected page in the navigation area, as well as ensuring that the item’s description matches the name of the corresponding page, as shown earlier in Figure 24.6 with “Widescreen TVs” page. Highlighting can be achieved through different text or background color, text styling, such as bold text, and special characters (e.g., an arrow). Breadcrumbs, also known as breadcrumb trail, are a variation of “You are here” indicator and implemented in various ways. Like a “You are here” indicator, for breadcrumbs to be effective, they need to stand out, but without being overwhelming, since they only serve a secondary function. The last item of the trail (i.e., the current page) should stand out from the rest of the items in the trail. This can be achieved by using different font style (typically bold), different color, or negative contrast. Combining highlighting with smaller but legible font size can further ensure that a breadcrumb trail does not compete with primary navigation mechanism or content. Six different conventions are shown in Figure 24.13. As well as the types of separators (“>“ and “I”) used in the example, other characters, such as “/” and are commonly used.

The individual items on a breadcrumb trail, except the last (i.e., active) one, should be active hyperlinks to the corresponding pages and look clickable; for example, they could be underlined or in a different color, typically blue. This provides additional means for users to navigate back. Again, the description of each item should match the name of the page to which it refers. To make the breadcrumb trail easy to find, it should be placed in the top area of the page, after the header and the menus, but before content. It can also be useful to place the phrase “You are here” at the beginning to help people who are not familiar with breadcrumbs understand its function.

1.1. Tabs Metaphor

Tabs in user interface are a metaphor of real-world tabs or index cards system and can be effective for both organizing and navigating content.

This is because they help users to quickly see the mix of content (sections) offered by a website and their positions within the content structure. Figure 24.6, earlier, shows an example of tabs in use. Like with any other interface component, for tabs to work well they need to be designed and used correctly. The following are some longstanding guidelines by the Nielsen Norman Group. While as much artistic freedom as required can be expressed, the principles should be followed to ensure good user experience.

A Tab should contain only one type of information; so, tabs are best suited for when content can be broken up into distinct logical chunks that can fit under a tab each. This ensures both better usability and user experience than when users have to switch back and forth between tabs for related types of information.
There should be only one row of tabs, as multiple rows make users jump from row to row, making them forget which tabs they have already visited. If there are too many tabs to fit in one row, then the simplification of design or the use of another navigation method should be considered. Also, the single row of tabs should be placed at the top where users expect them and can easily see them, not on the sides or at the bottom where they can be easily missed. Although it is not taboo to have tabs inside tabs; this can be difficult to implement in a way that does not confuse users.
Tabs should look like the clickable versions of real-world tabs, and the currently selected tab should appear different and “pushed out” and be infront of the other tabs to make it easy to identify it as the selected one. This can usually be achieved by ensuring that the tab and its content area together represent one continuous space (i.e., connected) and the space is in a contrasting color to other tabs, as illustrated in Figure 24.14. If every tab is given a different color, the selected tab should have some characteristics that help to clearly distinguish it and its content area from the other tabs. This could be, for example, in the form of thicker boundaries and/or bold text for the tab label.
The unselected tabs should be clearly visible and accessible and appear to be behind the selected tab.
The scope of the content area of a tab should also be clearly defined so that users know what falls under the tab.
Each tab should carry a short descriptive label (between one and two words) that is not in all caps (to ensure legibility) and follows a capitalization convention, such as capitalizing only the first letter of a sentence, or using headline- style capitalization, in which the first letter of every word (except articles and prepositions) is capitalized. The labels of the unselected tabs should always be clearly visible to keep users mindful of other options available.

1.2. Drop-Down Menus

In complex Web applications, there are usually many functions and therefore many options to present to the user. The way this presentation is done effectively is through drop-down menus. This is a menu that drops from the menu bar, or navigation bar (navbar), when the user activates a menu by, for example, pointing at it, clicking it, or touching it. Once activated, the menu remains open until further action is taken by the user. Such action could be the user choosing a menu item or clicking outside the
menu. A drop-down menu is different from a pull-down menu, which is pulled down from the menu bar and remains that way until released. It is also different from a pop-up menu, which is displayed when the user operates, for example, the right mouse-button.

In order to ensure drop-down menus are easy to use, good organization is important and this is achieved by logically grouping related options under one menu and ordering them, using criteria like frequency of use, importance, sequence of use, relationship with other listed options, and/or alphabetical order. If the options under a menu can be further grouped, this should be done to reduce the length of the menu-items list. Every menu and sub-menu (sub-group) should be given a name that adequately describes what it offers.

How menu items are ordered and laid out in a drop-down menu also affects how easily users can work with them. The items are traditionally displayed vertically in a single column, and left-aligned (i.e., for left to right reading). This makes each new line start at the same vertical point and allows the user’s eyes to move straight down the menu, thereby aiding scanning. According to the NN/g, to further facilitate scanning, menu items should also start with the most information-carrying words to quickly inform users as they scan. Starting items with the same words should be avoided, as this means users are forced to look beyond the first word to distinguish between the options.

Combining vertical and horizontal arrangements can also be effective. It makes the menu more compact and also shows more items at a glance, thereby reducing reliance on short-term memory when users are comparing the items. As well as this, it allows for the use of icons, which can aid faster recognition of the functions of menu items. An example of the approach is the “Ribbon” design introduced with Microsoft Word 2007. In Web design, the “ribbon” design is generally known as mega drop-down menu. Figure 24.15 shows a smallish example.

To ensure that a drop-down menu behaves in a way that aids usability, response time when the cursor points to a menu should not be too slow or too fast. If it is too slow it will feel like users are not in control, and if it is too fast, there may be too much flickering when the mouse is moved across the navbar, which can affect some users adversely. The general guideline is that it should start displaying after the cursor has hovered over its label for about 0.5 seconds and finish displaying within 0.1 seconds of starting. It should then remain displayed for as long as the cursor remains on it and starts to close about 0.5 seconds after the cursor has moved outside it or its label (or the navbar).

1.3. Site Map

A site map is a form of table of contents and is typically most useful when a site is very large, or when content pages, such as archive pages, are not properly linked to each other. Since the primary reason people would refer to it is because they are lost and cannot find what they are looking for on the navigation, it should add something extra. This can be either in the form of a different navigation design or information that is capable of helping users. Its goal should be to provide the overview of the structure of a site at a glance, showing sections and sub-sections. It should be static and simple, with compact layout of links, and not be too long, so as to ensure that it does not discourage users. The recommended length is about two and half pages. Figures 24.16 and 24.17 show examples implemented reasonably well in different styles. Every item is a link, which when clicked takes users to the corresponding page. Other features that can be useful in a site map, if they can be added, include a “You are here” indicator and a distinction between visited and unvisited links. There are various tools available on the Web for generating site maps.

Another way a site map is used is for providing search engines information about the organization of the content of a site. Web crawlers, such as Googlebot and Bingbot, which browse the Web for the purpose of indexing it, read this file to more intelligently gather information about a site. A site map file can provide useful metadata about the pages and contents it contains. The metadata provided about a page could, for example, be the last time it was updated, frequency of update, and its relative importance to other pages. The metadata provided about specific types of content, such as image, video, and audio, could be type, license, and subject matter for an image, and include playing time and ageappropriateness rating for video.

1.4. Footers

The footer of a Web page is like a supplement to the header and almost always has the same width to ensure uniformity. The underlying design is also similar to that of the header, particularly in color scheme, in order to maintain the site’s design theme. It could, for example, carry a scaled-down version of the website ID. This is to maintain consistency and also distinguish it from the content area and attract users’ attention. It can be very basic or contain a lot of information, including links to further information. Its purpose is to inform users and what is included in it to achieve this depends largely on the nature and content of website. For example, for a site that stores content primarily in sections and sub-sections, the footer may be in the form of just a site map with links to the sections and sub-sections, while for a site that sells something, it may be in the form of links to information to remind users of promotional items and its business policy. The following are some standard inclusions: date of the last update, copyright notice and links to copyright policy, terms and conditions of use, privacy policy (if customer information is gathered), contact us, delivery and return policy, FAQs and answers to them, text version of site (if available), the Webmaster’s e-mail, and the site map. A call to action is also a common element placed in footer. This could, for example, be a call to join you on social media or sign up for something, such as a newsletter. Figure 24.18 shows a basic footer design.

2. Designing Content Area

The content area of a Web page is the space left to display content after the spaces for header, footer, and menus have been carved out. Its successful design requires effective presentation of all the elements that make up content, such as text information, images, illustrations, video, and animation. When treated and combined correctly, the impact of these elements can make a page design graphically interesting and motivating, as well as supportive of comprehension. The main goals of content design typically include grouping and clearly defining content pieces, prioritizing, directing users’ attention, and engaging them. Some of the principles for achieving these goals are discussed here, including how to write effectively for the Web.

2.1. Homepage Content

The homepage of a website should be different from the other pages, but only slightly, since consistency in look and feel is essential between all pages to ensure unity. The distinction is necessary to enable users to easily recognize the page when they are there and can be achieved through either designing the content area differently from those of other pages (typically in terms of layout) or placing a unique and noticeable feature in the header that only appears when the homepage is displayed. One way the content area can be made different is by displaying images of products’ examples or promotions, or news flash, depending on type of site. Any image or item used in the homepage in this way should have a link that leads directly to details about the product or item, rather than a page of category to which the product or item belongs. This is important because when people click a link to an item they expect to be taken to a page that gives them information about that exact item. The NN/g’s website provides comprehensive lists of over a hundred usability guidelines for designing effective homepages that are worth looking through.

2.2. Content Display Size

Designing content size to suit screen display area is important, because when content is too large for display area, a design tends to look “un- unified” and unprofessional, because some parts are inevitably cut off. Not just this, users may be forced to scroll horizontally, which can be especially irritating and confusing, particularly as vertical scrolling may also be involved. Naturally, it may also mean that images cannot be viewed in their entirety at a glance, which can place extra demands on short-term memory and compromise user experience. Figure 24.19, for example, shows two screenshots of the same 640 x 480 px image displayed at different screen resolutions, making the image too big for the display in one. The one on the left, which is at 1024 x 768, requires both vertical scrolling, while the one on the right, which is at 1920 x 1080, requires no scrolling. Incidentally, online tools are available on the Web for checking how a page will be displayed in different screen resolutions.

What the demonstration in Figure 24.19 shows is that, although the space available for content is determined primarily by the amount left over after the header, footer, and menus have been taken care of, other factors like screen resolution also play important roles. Screen size, browser size, and printing width are also among these, all of which depend on the requirements of the target audience. This means that there is no single correct content size that suits all situations; hence responsive Web design, which was discussed in Chapter 21, and as noted there, if you want to rank high in Google, is recommended, because it is considered to satisfy user experience across multiple devices.

If you choose to develop a non-responsive website, then the general recommendation is to optimize a page for the current most widely used screen resolution as a compromise. World usage percentages for different resolutions can be found on the Web. On the other hand, if you know your audience well enough, you might optimize for them first, and then for others. When a page is optimized for a screen size, all important information is visible without scrolling and legible, irrespective of column width, and all page elements are displayed as intended. Of course, because different operating systems and browsers use different amount of space to display their native components, such as taskbar and browser chrome, pages optimized for specific size or sizes should also be tried on different systems. Browser chrome is the term used for the graphical framework and elements that frame the display area of a browser window and includes borders, title bar, menu bar, status bar, toolbar, and address bar.

In addition to display problems, pages that are too wide also do not print very well. For example, the right margin is usually cut off, or if the browser’s “fit to page” function is used, pages may not be legible, due to excessive reduction in font size. This means that pages that are likely to be printed, such as those containing large textual content, should be checked with at least international paper size standard (ISO 216).

2.3. Content Length

A Web page can be as short or as long as required. While a short page has the advantage of making all the contents of a page available instantly without further action by users, it is not always possible to break up a long page into shorter logical ones that fit into a page each. Also, long pages can be the easiest and quickest way to present most contents that occupy more than one screen-full. For example, instead of creating multiple pages, only one is created, and this is more straightforward to do and easier to maintain. Furthermore, only one download is required by users. One long page is also easier to print than many short ones, making long pages useful for presenting information intended for printing for off-line reading. Whereas scrolling used to be a source of usability problem, it has since become an accepted and expected method of interaction, no doubt largely because the mouse scrolling wheel and touch-screen swiping action have made the action much easier to perform. The following are some usability guidelines to consider when using long pages:

There is really no one page length that suits all, as different types of websites call for different treatments and users tolerate different page lengths, depending on context. Some types of websites need be no more than three or so pages. Websites for which this is suited include those that present specific and predetermined amount of information. In contrast, a page that is presenting the result of a search or comments made by various users about the same topic can be as long as necessary and may even incorporate infinite scrolling technique, in which content is loaded continuously as the user scrolls down. Research shows that, generally, users are happy with a long page if it contains related information, such as a list of a type of product they are looking to buy. The implication of this is that the length of a page is usually best determined by the relevance of the information being presented on it. However, even when its use is suitable, infinite scrolling should be used with caution, because it can harm user experience when a page seems to go on forever.
In some types of long pages, some kind of within-page navigation aid should be provided that can take users back to the start of the page. Examples of these types of pages include alphabetized lists, FAQs, and a page that has a table of contents at the start of it that leads to sections of the page. The navigation aid could be, for example, in the form of a “jump to the top” button or a link at the bottom-corner of the screen (e.g., bottom-right in left-to-right writing mode), where it is less likely to cause too much distraction. How this can be implemented and necessary design considerations can be found in Section 4.5.3 of Chapter 4.

Pages that are too long can take too long to download as well as overwhelm RAM limitations, in some cases, resulting in the browser crashing, particularly when there are a lot of graphics. If there are a lot of graphics, it is reasonable to consider providing links to the images instead of displaying them. Alternatively, thumbnails could be used.
The most important content should be placed at the beginning of a page, particularly if it is a homepage, so that it is “above the fold” (i.e., visible in the browser before the need to scroll; so, the “fold” is the bottom boundary of the initial screen of a page). This is important because studies (e.g., the NN/g) have suggested that many users rarely pay much attention to content beyond the initial screen-full. Another advantage of placing useful and relevant information above the fold, according to “information scent theory,” is that it is likely to encourage users to scroll past the initial screen-full, with the hope that the information “below the fold” will be just as useful. Information scent is described as the degree to which it is possible for users to predict what will be found if they follow a path on a website. It is part of information foraging theory that relates the behavior of users when interacting with a system to that of animals hunting for food.

2.4. Line Length

Line length refers to the total number of characters per line. The general recommendation is between 45-75 characters, including white space, with the ideal being 66. Although up to 90 is considered acceptable, it is discouraged where deep comprehension is essential and should only be used for discontinuous text, such as bibliographies and footnotes. When line length is too long, it makes reading difficult. This is because human eyes can generally only span comfortably about 3 inches long of text at normal distance. Beyond this length, people have to use more of the muscles of the eyes and/or the neck to enable them to read an entire line and move to the beginning of the next. In addition to this, it makes it easy to get lost when seeking the beginning of the next line. As a result, the longer the length of text, the slower the rates of reading, comprehension, and retention. Lines that are too short can be equally difficult to read, particularly if they are so short that every other line is hyphenated. A length of 40-50 characters is recommended for columns in multi-column layouts.

2.5. Content Layout

Effective content layout requires attention to two main goals; one is to position elements such that the gestalt effect discussed in Chapter 23 is fostered, and the other is to position them such that important elements are not overlooked by users. As already discussed in Chapter 23, aesthetics- related element placement can be achieved using grid systems, such as golden ratio and rule of thirds. This means that only how to position contents to improve their chances of being noticed is discussed here. About this, various theories suggest that when people scan the content of a Web page, they tend to do so in particular ways. Although these theories do not offer exactly same observation of how people read a page, there are useful similarities in terms of how they describe human reading habits. Understanding these habits informs on where to place the most important elements on a page to improve their chances of being noticed. Some common theories are the Gutenberg rule, the z-pattern, and the F-shaped pattern; and although they do not suit every Web page design goal, they provide a useful starting point.

2.5.1. Gutenberg Rule

Gutenberg rule originated from printing, but is it also commonly adapted to screen content layout. The rule essentially divides a page into four quadrants, illustrated in the left image in Figure 24.20. The top-left is known as the primary optical area, top- right as the strong fallow area, bottom-left as the weak fallow area, and bottom-right as the terminal area.

According to the Gutenberg rule, when Western readers scan a page containing heavy textual content or evenly distributed and homogeneous content (i.e., content that does guide eye movement in anyway), they tend to start reading from the primary optical area, then move across to the right and down in a series of short sweeping movements until the terminal area is reached. Each sweeping movement is along what is termed axis of orientation, formed by a horizontal line created, for example, by aligned elements or lines of text, or by explicit segments like paragraphs. This reading behavior of going from top-left to bottom-right is attributed to what is termed reading gravity. It is considered that reading gravity virtually pulls the eyes from top-left to bottom-right of a layout. In addition to this basic reading behavior, it is believed that once the eyes have reached the terminal area, they then move upward to focus on the strong fallow area, after which they then generally either focus or not focus on the weak fallow area. The word “fallow,” incidentally, describes inactivity, so, the word in this context means that the “fallow areas” do not see a lot of reading activity. In cultures that read from right to left, naturally, the reverse of the behavior described is likely to be the case.

What the Gutenberg rule roughly translates into is that when viewing a page the greatest attention is often paid to Area 1, followed by Area 4, then Area 2, and possibly Area 3. A typical application of this to content layout is to place elements in these areas according to their importance. For example, most important elements (e.g., heading and high-value information paragraph) are placed in the top-left area, the next important elements in the bottom-right area, the next important in the top-right area, and the least important in the left-bottom area. Naturally, since the eyes pass through the middle on their top-left to bottom-right journey, any element placed in the middle is likely to receive some attention and also reinforces the pull of the reading gravity. A common practice is to place elements that call for action from users (e.g., download buttons, links, and relatively important images) in the bottom-right area. Of course, where a page does not contain heavy textual or evenly distributed and homogeneous content, the Gutenberg rule is unlikely to apply. In such cases, the characteristics of the elements of the design (e.g., weight and color) plus the layout and composition of the elements are more likely to direct the movement of the eyes. For example, if elements in the bottom-left area are visually emphasized they will probably attract more attention than elements placed in other areas.

However, it is worth noting that as of time of writing there seems no strong empirical evidence to support the usefulness of the Gutenberg rule in Web page layout, although a website (optimisation- mavericks, blogspot.co.uk) claims to have done tests whose findings do. They found that when the position of a product was rotated round the four quadrants defined by the rule, it received most attention in Area 1, followed by 2, 3, and 4. They also found that Area 2 is effective for placing call-to- action elements.

2.5.2. z-Pattern

The z-pattern theory suggests that when readers scan the content of a page, their eyes move from left to right across the top of the page, then diagonally to bottom-left, and then to bottom-right, following a path that describes a z- pattern, as illustrated in the left image in Figure 24.21.

Although like the Gutenberg rule there seems no empirical data to verify the effectiveness of the z-pattern theory, it is a relatively common belief. Its implication for content layout is that important elements should be located along the z-path. A typical application is to place elements that users are intended to notice, or might want to see, first (e.g., logo, menu, and sign-on) across the top of the page; then the next important elements (e.g., image) in the middle, where they should catch users’ attention as the eyes travel diagonally down to the bottom-left area, where some useful but not urgent information might be located; and then more information is located along the bottom (such as links to further information); and then at the bottom- right area, elements that call for users’ action (e.g., download button) are placed. The right image in the figure shows an example application. Note that the example is actually the template for the Google page, which is not saying that the z-pattern is used. Indeed, it is not readily possible to determine which rule, if any, has been used for a layout until the level of importance the elements are supposed to have is known.

2.5.3. F-Shaped Pattern

The F-shaped pattern, according to Jakob Nielsen of the NN/g, describes the rough and general pattern followed by Western readers when reading Web pages. This is illustrated in Figure 24.22 and suggests that people tend to first read in a horizontal movement across the top of the page to the right, then move down a bit and do a shorter second left-right horizontal scan, after which, finally, the left side is scanned, sometimes fairly slowly, in a top-bottom vertical movement.

The essence of the patterns produced in Figure 24.22 is illustrated on the left in Figure 24.23. Applying the observation to content layout means that the higher-up information is on a page, and the more it is to the left, the more is the likelihood that it will be read. This naturally means that the most important information should be located in this area. For example, in the case of textual content, important information should be presented in the first one or two paragraphs and the start of sub-heads, paragraphs, and lists should contain information-carrying words that you want users to notice. Judging the design layout shown on the right in Figure 24.23 based on this principle, for example, means that the designer deems the heading area most important and intends it to be read first, after which the next important areas are read accordingly. Worth noting is that the general area covered by the F-shaped pattern also resembles the scanning pattern some other studies refer to as the golden triangle area.

2.6. Managing Content Amount

Generally, the less content there is on the screen at one time (i.e., the more white space there is), the easier it is to organize the screen and achieve a good design. According to research, users typically only read 20-28% of the words on a Web page. What this implies is that only about a third of display needs to be filled. However, the amount of content presented on a Web page cannot be determined by this fact alone, as it also depends on other factors, such as type of site, aim of site, and the target users. This means that there is no one-size-fits-all solution. Often, the best solution is a compromise that suits the purpose of a wide range of users. A standard guideline is to keep introductory text short and simply state the purpose of the content of a page. If introduction is too long, users are likely to skip it, even if part of it provides useful information. If a long introduction is necessary to convey the true essence of the content, a link may be provided to a longer version. This principle of disclosing only limited information until more is required is known as progressive disclosure and it is the foundation of various content management techniques, including text collapsing, accordion, and carousels.

2.6.1. Collapsing Text Technique

The collapsing text technique enables some of the text to be hidden until requested by users, typically via clicking or touching. Figure 24.24 illustrates the use of a hyperlink in Windows help information system, which when clicked expands into more text. As is evident from the example, the text in the design is easier to read and the design is more visually appealing with minimal amount of text. Another way the text can be displayed when the link is clicked is in a pop-up window. The technique is typically implemented in Web design using JavaScript.

2.6.2. Accordion Menus

An accordion menu describes a vertical stack of headers, each of which when clicked expands to reveal the associated content or retracts to hide it. Figure 24.25 shows an example. The top illustration shows stack before any header is clicked and the bottom one after “Header 3” has been clicked.

Notice the change in the arrow direction and the bar color after the header has been clicked.

Accordions can be used to shorten pages and so prevent or minimize scrolling as well as make a page neater by reducing the amount of text displayed at once. They can also be used instead of within-page links, but this should be avoided, if possible, as studies have found that users tend to be confused when they click a link and it does not take them to a new page. There are also issues with the accordion technique itself. For example, having to click the headers to read their contents instead of just having all the contents at once to scan through can easily begin to feel like too much work. Furthermore, they only provide access to a bit of information at a time and, so, it can be hard, for example, to compare the content of one header with that of another, because users are likely to forget what they have read in one by the time they open the other, due to the limitation of short-term memory. Naturally, they require extra attention in order to make them accessible to those who do not interact with Web pages in the conventional ways. Printing the contents of pages that use accordions can also be tedious, in that the content of every header has to be printed separately. This means that if they are used, and a page is likely to be printed, a link should be provided to a separate file containing a full-length version.

2.6.3. Carousels

A carousel GUI essentially allows different pieces of content to occupy the same space at different times, typically in a cyclical manner, either through user-interaction or animation, so that after the last piece of content is displayed, the display starts again from the first. Usually, movement can be in left or right direction, or up or down, but not necessarily, as carousel designs vary widely. Manual navigation can be linear or nonlinear. Figure 24.26 shows some of the wide range of design concepts commonly used.

A carousel can be placed anywhere on a page. However, it is typically placed near the top of the home page, especially when used to present, for example, important information that a company wants users to see, such as the company’s brand or mission, promotions, and services provided. If it is for the purpose of simply presenting content, such as a gallery of images or videos, then it can be placed wherever is relevant.

While carousels are useful for saving screen space, they do have drawbacks that should be considered before use. For example, research shows that users tend to ignore them for various reasons, such as because they mistake them for adverts, or simply find them frustrating to interact with, since they automatically rotate before users can read and digest their content. To make things worse, it can be difficult to figure out how to stop them. This essentially takes control away from the user and can cause bad user experience. Also, animated carousels can be annoying, since, like any animation, they persistently attract attention and can be continually distracting. Although static carousels do not have these drawbacks, users can miss the point that they are a collection of images and not know to look past the currently displayed frame, if there is no clear suggestion to do this.

An altogether different alternative to carousels that is less likely to be ignored is a static hero image (or hero graphic), which is basically a large image banner at, or near, the top of the home page. The recommendation is that a hero image should be designed to attract attention (e.g., via bold and complementary colors and font) and communicate clearly, using multiple media types, typically image and text, to provide the same information. Providing the same information via multiple channels can help improve the chances of quicker understanding. However, users can also ignore hero images, therefore it is recommended that important information presented in a carousel or hero image is also provided somewhere else.

FIGURE 24.26 Examples of carousel designs.

Guidelines for Designing Carousels

In order for the full benefit of carousels to be realized and for them not to cause usability or user experience problems, they have to be designed properly. The following are some guidelines:

Limit the number of frames/slides to five or fewer, as users are unlikely to look at more than this, or remember what they have seen after five frames, due to the limitations of short-term memory. Of course, if there is a good enough indicator to help users determine what they have or have not seen, such as numbering or changing the appearance of what has already been seen, then this restriction may not be necessary.
All navigational aids need to be clearly visible and their function obvious in order for a carousel interface to be easy to use. Basically, there should be a feature that informs of the position of the currently displayed item in the carousel and, ideally, also serves the role of nonlinear navigational aid. If this is not possible, the feature could just display the position of the current item and the total number of items, such as “2 of 20” and 2/20.
If carousel is auto-forward (i.e., animated), the common behavior is for it to stop when the cursor enters the display area. Also, when users click on a navigational aid, this should be seen to indicate that they want to navigate the carousel manually and so the carousel should pause. It should continue to do so until the cursor is no longer in the navigation area, since users are likely to want to keep the cursor in the area while navigating the slides and spending variable times reading each one. They are unlikely to prefer clicking an aid to navigate to a specific slide and then moving the cursor to the display area each time to pause the carousel to allow them to read the slide’s content.
Make text and images crisp-looking to improve the chances that users will pay attention to them.
Keep information on each slide concise to give users fewer reasons not to read it.

2.7. Writing Content for the Web

Text is a very important component of content delivery, so, presenting it effectively can enhance content communication in many ways. Doing this, in turn, is influenced by many factors, including the extent to which it is scannable, style of writing, and use of correct grammar and spelling. These factors are discussed here.

2.7.1. Designing Scannable Text

According to studies by Nielsen Norman Group (NN/g), most Web users scan pages, picking out words and sentences here and there, rather than read it word by word. Given such findings, it is reasonable to design a page in a way that aids scanning in order to facilitate the reading of content. Text can be made more scannable in various ways, including the following:

Text can be broken up and section headings used. Section headings should be short, meaningful, and bold in style. Bulleted or numbered lists can also be used, with the length of each list-item kept short. Each list-item should start with keywords, if possible. Where list-items are too short to be meaningful, more initial information can be provided by using title-summary combination for list items. Furthermore, the title, which should typically be bold, can be a link to more detailed information. Figure 24.27 shows this being used to good effects. Tables can also be used instead of lists.

The summaries of articles should be provided instead of the full articles. Users are more likely to cover more topics when summaries are provided than when a full article is provided first in which they are not interested. In other words, if they are not interested in the first summary, they are likely to go to the next one, and so on, whereas if they are not interested in the first full article, they are likely to abandon all available articles.

Important words can be highlighted, using, for example, variation in font style (e.g., bold) or color, as the eyes tend to stop on things that stand out.
Inverted pyramid style can be used, as in journalism, in which content starts with conclusion before going into more details. In Web page terms, this translates into placing important facts near the top of a page so that users can find them quickly. Multiple theories and studies suggest this is a good idea.
Fewer words can be used than in printing without over-cutting or oversimplifying content. Alternatively, content that cannot be made concise without compromising the intended message can be provided in a way that is easy to print. Indeed, it is good practice to assume that users will print anything that is more than half a page.
Number of ideas per paragraph can be limited to one, so that users can know just by reading the start of a paragraph whether or
not the paragraph is of interest and whether or not to skip it.
Paragraph should be left-aligned (or right-aligned for right-to-left writing mode) to facilitate reading, as justification causes irregular word spacing (spacing between words) that make reading difficult. See Chapter 14.
Grouping together of related information can be used. This can be done, for example, by grouping under different headings;
grouping by visual style (e.g., font style and color); or using clearly defined areas or nesting. Figure 24.28 shows some illustrations.

2.7.2. Style of Writing

Whether or not a style of writing is effective and helps readability depends on many factors, such as grammar, punctuation, the choice of words, spelling, and the length and structure of sentences. The following are some guidelines:

Sentence structure: Sentences should be simple and easy to understand. The first two words, in particular, should be right, as eye-tracking research suggests that these are often what users see when scanning textual content. This means that using important keywords at the beginning of sentences, summaries, and in page titles are highly important design considerations. As well as making text highly scannable, using keywords helps SEO (Search Engine Optimization) effectiveness. Keywords can also help in the achievement of a high GYM rating. This is rating with Google, Yahoo, and Microsoft search listings. Sentences should also be short, as some users, particularly older adults, can have problems connecting with long complex text.
Using active and passive voices: Where possible, active voice (i.e., “Actor does X to Object”) should be used instead of passive voice (i.e., “Object has X done to it by Actor”). The reason for this is that active voice requires less thinking than passive voice to understand.

Passive sentences that do not state the actor, such as, “Council taxes must be paid quarterly,” can be even more difficult to understand. A better structure is “Tenants must pay council taxes quarterly.” However, passive voice, too, has a role in some elements of content, such as titles, headings, summaries, bulleted lists, captions, blurbs, link text, and lead sentences. This is because it lets you start these elements with the most important words, which are often all users see when scanning Web pages. Another advantage of doing this is that it helps SEO effectiveness.

Using positive and negative statements: Positive statements (e g., “Do X”) should be used instead of negative statements (e.g., “Avoid X”) or double negative (e.g., “Avoid not doing X”). If you must use “avoid,” then the user should also be advised on what to do instead. Choice of words: Speaking users’ language helps the successful communication of a message and ensures, for example, that a Web page is found easily. This involves using words that are familiar and precise. Familiar words, for example, are what users are likely to use for search queries on the Web; and precise words improve the chances of a Web page being found. For example, someone searching for websites that sell affordable travel tickets is likely to use a phrase like “cheap travel tickets” than “competitively priced tickets.” Similarly, most users are likely to use, for example, “deaf users” instead of a politically correct terminology like “audibly challenged users.” If made-up words must be used, they should be supplemented with familiar words.
Variants of language: Users notice the variant of language a website uses, such as whether a variant of English is British or American. They do this through things like spelling, terminology, slang, and currency. The recommendation is to use the language variant for where a website is based and use it consistently. For example, if a website is based in Britain, then British English should be used. Using American English, for example, might give the wrong impression. If nothing else, it might reduce credibility, as users might think that the site intends to deceive them. On the other hand, people do not mind dealing with a foreign site if the site can accommodate it, so, using local variant may not necessarily be automatically disadvantageous.
Writing numbers, in general: The ways numbers are presented on Web pages are different from when presented in printed text. Some guidelines derived from various studies are presented here. Because important pieces of information need to stand out, often among a lot of words, the general guideline is that all numbers should be written in numerals, not words, even when a number is the first in a sentence or after a bullet point. Exceptions include when writing them in words reduces confusion or provides extra meaning.
- Writing big numbers: Numerals should be used for numbers up to one billion, as too many zeros can be difficult to interpret. For example, “3,000,000” is better than “three million,” while “three trillion” is better than “3,000,000,000,000.” Alternatively, a combination of numerals and words can be used that involves using numerals for the significant digits and words for the magnitude (e.g., “25 billion” is better than “twenty-five billion” or “25,000,000,000”). In order to further help reading and understanding, commas should be placed after every three digits from the right, if there are over three digits, as in “there are 34,859 lines.” o Writing numbers in specific facts: Numerals should be used for representing exact data (e.g., 3,924 items, 8.625, 0.25, 1/2 in, 1/2 a pint), as this communicates more credibility and typically suggests that someone knows what they are talking about. Where numbers do not represent specific facts or data, or are rounded, words should be used (e.g., “about half an inch” instead of “about 1/2 an inch,” “thousands of people” instead of “1000s of people,” “about 200 million people” instead of “about 200,000,000 people,” and “tens of thousands” instead of “10s of thousands”). If users are unlikely to be familiar with a term, such as “trillion,” it should be explained. Also, abbreviations for measurement units, such as those typically used in relation to computers, should be explained. For example, you might explain that “TB” means “terabyte” and that “1 TB” is equal to 1 trillion bytes.
- Writing Numbers with units and nouns: A number should be joined to a unit of measure with a hyphen when the unit describes a noun (e.g., “a 6-foot tree,” “9-year-old children,” and “a 24-stone English man”). Abbreviations of units of measure should be singular (e.g., 2 cm, 2 kg, 2 min, instead of 2 cms, 2 kgs, 2 mins, respectively).
- Writing adjacent numbers: When two numbers are next to each other, such as in “5 11-year-olds,” to improve comprehension, one of them (typically the shorter) should be spelled (e.g., “five 11-year-olds” or “5 eleven- year- olds” or “5 eleven-year-old children”).
Writing microcontent: Microcontent can be described as a short text that conveys what page content is about and includes page titles, headlines, and e-mail subject lines. To be effective, it should be in plain language and contain no puns, boastful subjective claims (such as “best ever”), or teasers that must be clicked in order to find out what content is about, as this can irritate users and even compromise credibility. Articles, such as “a” and “the,” should not be used at the beginning of Web page titles (or e-mail subjects) in order to prevent a page from being listed, for example, under “T” or “A” with other pages that start with “The” or “A,” which could be numerous. However, headings used within a page can begin with articles. It is also good practice to start microcontent with high- information-carrying words, such as the name of the company, person, or topic an article is about, in order to provide useful information. Basically, a headline should make sense alone. Finally, all page titles should not start with the same word, as this will make it difficult to differentiate between them when listed together. If necessary, common start-words should be moved to the end of the line, as shown in the box below.

2.7.3. Writing for International A udience

If a website intends to deal with users from all over the world or multiple countries, their characteristics should be supported by paying special attention to certain elements of content, such as presentation of measurements, dates, names, and addresses. Ideally, special sites should be created for various languages. However, this can add more cost than can be justified in terms of benefits. A less costly approach is to create just one site and test it on users from the relevant countries, although this too is relatively costly. A more typical approach is to simply aim to design a site that will be usable by as many international users as possible. Ways in which this can be achieved include supporting variable spellings and formats for names if the site requires information from users. For example, in some countries, people use only one name, so, making name fields mandatory when users only have one name may cause confusion.

The site should also support different formats of representing a postal address. For example, users should be able to place house number before or after street name, and postal codes or ZIP codes of variable lengths should be supported, as should variable formats of phone numbers. In addition, website s contact phone numbers should be in numbers rather than in letters, as not all countries include letters on their phone keypads. In particular, because different character sets are used in languages around the world, the site should support a multilingual character encoding system like Unicode (discussed in Chapter 3), so that characters are displayed correctly.

Other commonly used elements in websites that vary between countries are dates and units of measurement. Because some countries start dates with day and others, month, users can confuse the two. For example, 4/6 may be interpreted as “4th of June” or “April 6th.” To avoid this, the name of month should be spelt out when displaying a date. Also, instead of asking users to type in dates, drop-down lists or a date picker (such as shown in Chapter 5) should be provided. Where measurements are involved, the various units used around the world should be supported. For example, dimensions should be supported in both metric (centimeters) and imperial (inches) systems and temperature in Celsius and Fahrenheit. If a site sells products that conform to varying world standards, such as electrical or media products, the standards supported should be made clear. For example, the voltage a device is designed to operate with (e.g., 110 or 220 volts) should be clearly specified.

2.7.4. Writing Links

The way hyperlinks are written and styled is important to how easy they are to use and user experience. The following guidelines can help in writing and styling them effectively:

Number of links: This should be kept to minimum on a page, as too many can cause distraction, particularly as users tend to want to click them. If there are many supplementary resources, only important ones should be linked to from within main text. The rest should be placed at the bottom where they can be seen but do not cause distraction. If a link is to an external site, the content should be displayed in a new window, so as to ensure users do not lose the current site, as this can cause confusion and frustration. In particular, there should not be multiple links to the same destination, as it is likely that users will not realize that they actually lead to the same destination and end up wasting time trying them out, all of which can result in navigational disorientation.
Link color: Different colors should be used for visited and unvisited links, as not knowing which links have already been visited can get users going around in a virtual circle. By default, modern Web browsers generally display unvisited links in blue and visited in purple. This convention should be maintained to prevent giving users the extra burden of remembering a different color scheme.
Link text: When a link is used within a main text, the text used for the link, which is known as link text, should be descriptive and fit seamlessly into the meaning of the rest of the sentence. Rather than craft a sentence around a link, the sentence should be created as normal and then the link placed on the word or words that best describe the content to which users will be linked. This is illustrated in the following box.
Link titles: A description of where a link will lead should be provided when it is not obvious through link text or surrounding text, as this helps users to make better navigation decisions. A link title is the text that pops up when the cursor hovers over a hypertext link. The types of information a link title should contain include the name of the section in the current site (or the name of the site) to which the link leads, the kind of information that will be found at the end of the link, and any other useful information. A link title should not be too long (about 60 characters), and because different platforms and browsers display them differently, it is useful to try them out on different types.

2.7.5. Writing FA Qs

For most websites that deal with customers, especially the general public, the FAQs feature is inevitable and a very valuable one for both the sites and the users. For the websites, it saves them from repeatedly addressing the same questions, thereby freeing them to more productively use their time. For the users, it provides quick, on-the-spot solutions to their concerns about which they would have had to e-mail or use other means of communication. FAQs would typically start life based on guessing questions that people are likely to ask and providing answers to them. Imagining being in the user’s position can help with this. The initial effort can then be added to, based on the questions that users actually ask. Like any other content page, the FAQs page needs to be designed properly in ways that foster usability, good user experience, and accessibility. Many of the various design and writing guidelines already noted, such as proper structuring, the use of correct spelling and grammar, and conciseness, also apply to an FAQ page as appropriate. The following are more specific guidelines:

Organization: If many, FAQs should be grouped into categories, if possible.

A table of contents or menu can even be provided to make navigation easier. Most frequently viewed FAQs can also be placed in its own category.

Search function: For a very long FAQs page, a search function for the page that is different from the search function for the entire website may also be useful, as it can make the page easier to use. If this is included, it should be titled appropriately so as not to confuse users. An example title is “Search FAQs page” Of course, where a page is too long and can be broken up logically into separate pages, then doing so should be considered. If this is not practical, then a link back to the top of the page, where there should be some sort of table of contents or menu, is an acceptable alternative. Refer to “Content length” earlier for how to deal with FAQs page that is too long.
Collapsible content: Where space is limited, a common approach is to use collapsible content technique that works in a similar way as the accordion menu discussed earlier under “Managing content amount.” In essence, the questions alone are displayed, and when a question is clicked, the answer expands out underneath it. If this approach is used, having an option (such as in the form of a checkbox) to show all answers should be provided for the benefit of users who might prefer, for example, to minimize the number of clicks.
Media: If the answer to a question is better explained through the use of other media object types, such as image, video, or animation, then they should be used.
Readability: Distinguish between questions and answers, such as making questions bold or using different colors. Placing “Question,” “Q,” “Answer,” or “A” in front of questions or answers, even in bold, should be avoided, as it requires users to repeatedly look at the beginning of the text to check if they are reading a question or an answer.
Position: The FAQs link should be located where it can easily be seen, typically in the header or footer.
Answer quality: Answers should be direct, concise, and honest. This is just as important for credibility as various other factors.

Source: Sklar David (2016), HTML: A Gentle Introduction to the Web’s Most Popular Language, O’Reilly Media; 1st edition.