‘ 

EXHIBIT 8

Case 6:20-cv-00245-ADA Document 65-8 Filed 12/14/21 Page 1 of 31
Chapter 2

You Need a Plan: Preparing for Content 

Attempting to build anything without a plan will surely lead to lots of backtracking, 

lost time, and headaches. Not only can a plan keep you on track, it can also 

allow you communicate your ideas to others and provide an excellent reference 

when it comes time to make design decisions. When we build a Web site, we 

need to think through the organization, navigation, personality, and limitations of 

our site. Ironing out these issues before jumping into the production stage can 

save us time and ensure that we end up with a site that “speaks” our audience’s 

language. 

Case 6:20-cv-00245-ADA Document 65-8 Filed 12/14/21 Page 2 of 31
Chapter 2 

2 

Organizing Your Site 

From libraries, to books, to sentences, we make sense of our 

surroundings through organization. We organize our houses 

into rooms and our cities into neighborhoods. No matter how 

full our homes get, or how big our cities grow, we can still find 

what we need in them, because they are organized in a manner 

we can understand. It would be quite difficult to find your way 

in a city that sometimes used numerical addresses, occasional 

color-coding, and an irregular system based on building height. 

The lack of a clear, consistent organization system would leave 

most people lost and confused. 

But even in a city with a very perplexing organization system, 

we might still be able to find our way around using spatial 

clues. (“I remember passing by the red building earlier. If I turn 

right at this corner, I might get to where I am going.”) Online, 

our audience has no such “last resort” to get them where they 

need to be. Though we refer to groups of Web pages as “sites,” 

there are no physical landmarks to fall back on for guidance1. 

Worse still, Web users have few clues to tell them “where” a 

clicked hyperlink may take them. Links could lead to a 

different site, further down the page (in the case of inline 

links), or they could open a new Web browser window 

(quickly becoming a common practice with today’s Web 

advertising) or begin downloading a large file. Given these 

possibilities and the lack of spatial cues on the Web, it is 

especially important that our organizational systems be well 

thought out and meaningful. They need to accurately outline 

the content of our sites in a manner appropriate to our 

audience. 

The manner in which your site is organized allows your 

audience to understand what they can expect to find within. It 

also provides them with an overall awareness of the big 

picture: your site’s main message. Upon encountering a site 

with organizational categories such as fish, dogs, cats, birds, 

and so on, you might easily guess you were at a pet store. The 

organization of the site helps to communicate the purpose of 

the site: “I am a pet store with ... available for your pets.” 

Though this may seem like an obvious point, there are many 

Web sites where the message is not clear and may leave you 

wondering if you are at a boutique or a bakery. 

1 A number of authors have discussed the lack of any real “space” on the 

Web, including Colleen Bushell (1995), Peter Morville & Louis Rosenfeld 

(1998), Patrick Lynch & Sarah Horton (1999), and Steve Krug (2000). 

Space-less 

Unlike books and cities, 

the Web lacks any 

“real” physical 

structure. As a result, 

Web users are often 

landmark-less and 

unable to understand 

“where” they are within 

a site. 

Case 6:20-cv-00245-ADA Document 65-8 Filed 12/14/21 Page 3 of 31
Chapter 2 

3 

A well-organized site not only “tells” your audience what they 

can find within, it tells them where they can find it. When we 

have categories and alphabetical listings to help us, it’s much 

easier to find a CD at the local music store. Imagine trying to 

locate a Charlie Hunter disk in a store where all the CDs just 

lie in random piles on the floor. I have actually encountered 

several LP stores that use this method, and unless you enjoy 

sifting through piles of dusty vinyl looking for a gem (and you 

have the time), you are better off at the CD store. Though the 

LPs are theoretically “organized” (into piles on the floor), you 

have no way of predicting where a particular disk might be. 

Only after you look through a pile can you say, “I guess it’s not 

in there.” The organized store, on the other hand, allows you to 

find the right information in a predictable manner. Charlie 

Hunter would be in the jazz section, under H. With 

organization, knowing where to look is easy. Without 

organization, even a site with great presentation and interaction 

will ultimately confuse your audience. 

Sort your information 

The simplest form of organization is also the most frequently 

used: the sorting of similar objects into categories or 

sequences. It is the simplest because, often times, objects 

“want” to be together. Forks, spoons, and knives, together at 

dinnertime, invite grouping. They often share the same size, 

texture, color, and, most importantly, function. As a result, in 

most homes, these utensils share a drawer in the kitchen. It 

would be strange to have the forks and knives in one drawer, 

and the spoons on the third shelf from the bottom of the vanity 

in the downstairs bathroom. Not only do the objects themselves 

imply that they are of the same category, but most people 

expect them to be. Few guests would think to look in the 

downstairs bathroom for the spoons. More than likely, they 

will look in the drawer with the forks and knives, perhaps 

check a few more kitchen drawers, and finally assume that you 

have no spoons. You can expect the same behavior from your 

Web visitors. They will look in the categories where they 

expect to find the information they need. And if they can’t find 

it, they will assume it doesn’t exist. When organizing our Web 

sites, we need to make sure that our categories and what we put 

in them make sense for our audience and our content. We need 

to “tell” our audience what they can expect within each 

category. 

Most categorization moves from general to specific. (House 

wares > Kitchen utensils>Forks>Dessert Fork) 

When you don’t 

want organization 

At the old vinyl shops, 

where records sit in 

massive piles on the 

floor, it can be a 

rewarding experience 

to spend time sifting 

through the LPs. 

Occasionally, you will 

come across something 

you didn’t know existed 

or would have never 

thought to look for. The 

lack of organization, in 

this case, works to your 

benefit, allowing you to 

discover and explore. 

For certain Web sites, it 

might be a good idea to 

mimic this type of 

experience. 

Some e-commerce 

stores do it in the form 

of “recommendations:” 

putting a list of items 

related only by your 

interests on a page 

customized for you, 

and allowing you to 

browse through them. 

These are far from the 

“flea market model” of 

sifting through heaps of 

items for something 

that catches your eye. 

But these days, few 

people have the time 

required for flea market 

shopping, precisely 

because it can be a 

very engaging 

experience. 

Case 6:20-cv-00245-ADA Document 65-8 Filed 12/14/21 Page 4 of 31
Chapter 2 

4 

This allows us to transfer our knowledge of top-level 

categories to those below them and thereby increase our 

understanding. If we know kitchen utensils belong in the 

kitchen and we know a fork is a kitchen utensil, then we know 

forks belong in the kitchen.

Though this is a deliberately simple example, the same basic 

model remains intact for more complex information and is 

especially helpful when you encounter items with which you 

are not familiar. (Ahhh, I see, GoLive is a Web design software 

product. I know this because I followed the path: 

Products>Software>Web design>GoLive.) Higher level 

categories can provide valuable clues about objects and their 

function, and they can also give users a sense of where they are 

in an organized structure and, more importantly, why. 

Organizing information from general to specific also carries the 

benefits of progressive disclosure. Information is much easier 

to absorb when it comes in smaller, related “doses.” This is 

especially important online where our screens are limited in 

size and reading large amounts of text is not favored by most 

people. (Instead, a common solution is to print large portions of 

text.) Progressive disclosure provides you with the portion of 

information you want when you’re ready for it. For example, 

when reading about a software product online, you first want 

the overview. Once you understand the intent of the software, 

you can get to the specifics of how to use it to get your work 

done (see sidebar below). Therefore, it makes sense that the 

technical specifications reside in a subcategory of the software 

product. By reinforcing the relationships between information, 

we can provide clear routes our audience can follow to get the 

information they need without forcing them to sift through 

irrelevant material. But, in order for our audience to be able to 

follow these paths, they must be logical and well labeled.

Categories: What 

have they done for 

you lately? 

>Make finding 

information easier and 

faster 

>Divide information 

into smaller, easier to 

“digest” portions. 

>Emphasize the 

similarities between 

information. 

>Point out the 

differences between 

information. 

>Provide “paths” to 

information. 

Now I want..

Dividing information into meaningful portions allows you 

to get the answers you need without having to analyze 

large quantities of extraneous material. Once you 

understand the basics about Acrobat (it is a program for 

creating PDF files), you can follow the links to the right 

to learn more about the product. Are you interested in 

reviews, customer stories, training, or news? The 

division of Adobe’s information about Acrobat not only 

lets you make the right choice, it also provides you with 

an understanding of what is available. 

Case 6:20-cv-00245-ADA Document 65-8 Filed 12/14/21 Page 5 of 31
Chapter 2 

5 

Accommodate your audience 

When deciding on category labels, keep your audience’s 

expectations in mind. Are they familiar with the terms you’re 

using as labels? Do they associate the terms you use with the 

content under each category? Try to avoid labels that cause 

your audience to ponder what they might find within each 

subsection of your site ―unless you actually want your labels 

to be a bit mysterious to encourage the exploration of content 

your audience otherwise might never see. (More on this in 

Chapter 6.) Your audience and their goals should determine the 

method of categorization you use. 

Look at those labels 

Labels can be based on topics, user tasks, a site-wide metaphor, 

specific audiences, or a linear sequence2. Take a look at 

differences in these labels from three different job-search sites. 

The labels in this portion of Monster.com are based on user 

tasks emphasized by the use of verbs: post, start, and search. 

 

The HotJobs.com site labels these portions of their organization 

for specific audiences: new users, job seekers, and employers. 

This portion of the Headhunter.net site 

is organized by topics: resources, news, 

events, and so on. 

2 Peter Morville and Louis Rosenfeld outline these types of organization in 

their book: Information Architecture for the World Wide Web. 

Everybody’s doing 

it 

When you spend some 

time on the Web, you 

will find that the most 

self-explanatory labels 

for content are the 

ones pretty much every 

site uses. Labels such 

as “Jobs,” “Products,” 

“Support,” “Store,” and 

“About Us” show up on 

almost every business 

site. Though this is 

good for consistency 

(see sidebar page 13), 

you may begin to ask 

yourself, “How can I 

keep my company 

unique and still have 

clear labels?” The 

answer lies in visual 

presentation and 

Chapter 5. 

Case 6:20-cv-00245-ADA Document 65-8 Filed 12/14/21 Page 6 of 31
Chapter 2 

6 

Division isn’t always boring 

Often times, the way we organize our sites can make them 

unique or inviting. In the Bob Marley fan site outlined below, the 

basic content consisted of photographs, sound clips, videos, 

concert setlists, and biographical information. A simple and easily 

understandable organization structure might have been Photos, 

Videos, Sounds, Setlists, and Biography. Such an organization (on 

the left) makes it very clear what a visitor might expect to find in 

the site. However, the site exists for entertainment purposes and 

focuses on the life of Bob Marley, not on different types of media 

(photos, videos, sounds). Therefore, the organization system 

below might be more appropriate. 

The site is divided into three categories: In Concert, In the 

Studio, and In the Flesh. Each section contains a mixture of 

photos, sounds, and videos from one of these aspects of Bob 

Marley’s life. As you explore the site, you catch glimpses of how 

Bob spent his time, and where. The experience is much more 

immersive and might be enhanced even further by introducing 

linear narratives within each subsection (though this might be 

detrimental to specific searching). Another alternative is using a 

chronological organization system, which mirrors the course of 

Bob’s life more accurately (facing page). 

Case 6:20-cv-00245-ADA Document 65-8 Filed 12/14/21 Page 7 of 31
Chapter 2 

7 

It is also valuable to note the manner in which your audience is 

most likely to seek out information. Most often, your Web 

visitors will switch from searching for specific content to 

casual browsing of your site. They might come in looking for 

an exact make and model of bicycle and eventually end up 

reading user reviews of tires. Or conversely, they might come 

to browse through your product reviews and end up looking for 

a specific bike mentioned in an article. Your organization 

system needs to support both types of activity. This is where 

the user profiles and scenarios we discussed in the last chapter 

can really come in handy. When you have an initial 

organization system put together, try waking through it as one 

of your “fictional” users. Does it make sense from this 

particular user’s viewpoint? Can they find what they need? Is it 

easy for them to switch from casual browsing to specific 

searches? 

Case 6:20-cv-00245-ADA Document 65-8 Filed 12/14/21 Page 8 of 31
Chapter 2 

8 

Another possibility you need to consider is that visitors to your 

site might not know exactly what they are looking for, which is 

where progressive disclosure and logical categories fit in. By 

starting in a very general area, uncertain users can gradually 

dig deeper into your content until they find something to their 

liking. 

When you understand your audience and their goals, you will 

have a good idea of how they expect information to be 

organized. To this end, you might even consider letting them 

organize it for you. Getting a member of your target audience 

or simply an outsider (a friend, a neighbor) to comment on how 

you have decided to organize your content is frequently an eyeWalkthroughs 

When you have an initial organization for your site in mind, try it out 

on one of your user scenarios (Chapter 1). Remember to account for 

different users and goals, as well as the occasional mistake. Not 

everyone will understand your organization immediately. 

In this subsection of a site organization, two possible paths for 

accessing the online student application form are laid out. 

Case 6:20-cv-00245-ADA Document 65-8 Filed 12/14/21 Page 9 of 31
Chapter 2 

9 

opener. Often, we become so well versed in the content of our 

sites that we begin to see connections that most people do not 

instinctively make. Or worse still, we miss the obvious 

relationships because we are too focused on the little details. A 

simple way to get input from others is to ask them to do a card 

sort of your content. Ask your test subject to group a set of 

index cards (one for each part of your content) into categories 

that make sense to them. Then ask them to prioritize the groups 

by importance. You might just be surprised by the results. 

Testing several people (see sidebar) in this way will give you 

invaluable insight on how your audience expects your content 

to be organized. After all, we are doing all this for them.

Visualize it: Schematics 

When you walk away from the organization process, remember 

to take home a reminder of the decisions you made. Preparing a 

visual representation of at least the most important portions of 

your organization will help you see the “big picture” and help 

you explain your plan to others. Frequently, this visual 

representation takes the form of a tree diagram. In a tree 

diagram, each successive level of categorization follows below 

its “parent” and most often corresponds to a mouse-click. (It 

would usually take three mouse clicks to get to the fourth row 

of the tree diagram). By looking at a tree diagram, you can 

usually tell whether a site’s organization is balanced: not too 

shallow or deep. According to the Patrick Lynch and Sarah 

Horton, authors of the Web Style Guide: Basic Design 

Principles for Creating Web sites (1999, Yale University 

Press), sites with a shallow organization system consist of long 

menu listings, and can often confuse users with too many 

unrelated options. Sites that are too deep obscure content below 

multiple levels of short menu listings. Neither is a good depth 

to be swimming in. Most experts suggest presenting no more 

than seven options at any given menu level. Less is better, but 

there may be a few times when more is appropriate. 

This is a test. . . 

There is no substitute 

for input from a target 

audience member or an 

outsider. Whether 

you’re developing the 

organization, labels, or 

visual presentation of 

your Web site, do some 

user testing to make 

sure that you are on 

the right track. There is 

often no need for 

elaborate or expensive 

testing schedules; 

simply getting opinions 

from potential users or 

“outsiders” is often 

enough to catch 

usability problems. 

Testing often and early 

will save you time and 

trouble in the long run. 

This book does not 

cover usability testing 

in depth; however, 

Steve Krug and Jacob 

Nielsen have published 

great material on 

“quick and easy” user 

testing that I 

recommend reading if 

you want more 

information. 

Case 6:20-cv-00245-ADA Document 65-8 Filed 12/14/21 Page 10 of 31
Chapter 2 

10 

Navigating Your Content 

Having a great organization won’t help much if you’re the only 

one who knows about it. You need to “tell” your audience how 

your site is structured so that they can easily get to the things 

that interest them: You need to supply them with navigation. 

The navigation elements of a Web site provide your audience 

with an understanding of your organization and give them a 

sense of where they are within the site structure. Navigation 

elements include, but are not limited to search boxes, 

horizontal and vertical menus, indexes, tables of contents, site 

maps, directories, charts, hypertext links, and anchor links. 

These elements can be global (pertaining to the whole site) or 

local (pertaining to a subsection or individual page of the site). 

Most sites do not just pick one navigation element and go with 

it. Rather, they use a combination of several elements in order 

Seeing Trees 

This sample tree diagram outlines the basic structure for the Department of Computer Science at the 

University of Illinois at Urbana-Champaign (UIUC) Web site. Cross-linking is indicated through dashed 

lines only when the link is crucial to the organization. Otherwise, the majority of hypertext cross-links 

and external links are not shown. This keeps the focus on the main organizational issues. Also note that 

the lines of the diagram are deliberately light in color. The emphasis in tree diagrams should be on the 

categories and their labels, not on the boxes around them. 

Case 6:20-cv-00245-ADA Document 65-8 Filed 12/14/21 Page 11 of 31
Chapter 2 

11 

to accommodate different user preferences. This book, for 

example, can be searched through the table of contents, page 

numbers, the index, and more. Regardless of which navigation 

elements you choose to use on your site, they all serve the 

same purpose: orientating your audience. 

When users feel “lost” on the Web, it’s because the navigation 

isn’t doing its job. Navigation should let your audience know 

where they are, how they got there, and where they can go 

next. Any useful system for finding your way around, whether 

in a Web site or a city, should allow you to backtrack, plot your 

next move, and understand your position. Well-made maps, 

written directions, and signage systems all make this possible. 

Through visual and verbal clues, these navigation tools provide 

us with clear messages that guide and direct us to our 

destinations. The best way to avoid having users that “can’t 

find what they’re looking for” is to have an approachable 

navigation system that “tells” your audience how to get around 

your site. We’ll spend some time looking at how visual 

communication principles can assist in making this possible in 

Chapter 6. But for now, we’ll just look at some of the key 

attributes of navigation systems and the planning we can do to 

ensure that we’re on the right track. 

Getting around the site 

Usually, the main navigation system is your site’s organization 

progressively revealed in visual form. I say progressively, 

because each level of information in our schematics most often 

translates to one set of navigation menu options. And while the 

first level of navigation should show up on every page in our 

site, putting the entire organization on each page is likely to 

add lots of clutter and just confuse our audience. As a result, 

we frequently reveal each level of organization only when a 

user selects its “parent” category. 

Case 6:20-cv-00245-ADA Document 65-8 Filed 12/14/21 Page 12 of 31
Chapter 2 

12 

The first level is included on all the pages within our site in 

order to provide our audience with a sense of place and 

security. Your audience will be confident that they can get 

through your site if they know they can count on a set of 

consistent links to be there when they need them. In the real 

world, you’re probably more likely to venture into unknown 

terrain if you have a good map with you. You worry less about 

getting lost and trust your choice of paths more. A consistent

and well-designed navigation system can provide your 

audience with the same confidence and trust when they venture 

onto your Web site. Retaining consistency within a navigation 

system means keeping the location, order, amount, and relative 

visual characteristics the same throughout the site. A 

continually moving navigation system with disappearing 

options is a surefire way to diminish user confidence. Imagine 

a map where roads disappear only to show up in a new 

Presenting Levels 

Usually, each level of your organization translates to one set of navigation 

menu options on your Web site. 

Here, we see the first three levels of organization as navigation menu 

options on the NCSA site. 

Case 6:20-cv-00245-ADA Document 65-8 Filed 12/14/21 Page 13 of 31
Chapter 2 

13 

location. How much would you trust such a map to get you 

home? 

 Through consistency, we “tell” our audience that they are 

within one site. We also provide them with a dependable 

means for getting to any of our top-level categories. This 

allows them to backtrack easily and try another path. Other 

navigation items that should consistently remain on each page 

of the site are a link to the home page, a site identifier (often 

putting in double time as a link to the home page), global 

navigation tools (a search box or a link to the site map), global 

utilities (e-commerce or intranet tools), and contact information 

(most sites also include privacy information). 

Consistent navigation 

Navigation elements that should be present on “all” your site’s 

pages are: 

 Home page link 

 Site identification 

 Top level navigation links 

 Site-wide navigation tools 

 Site-wide utilities 

 Contact information 

Remember that the Web lacks any real “physical space.” The 

consistent navigation elements we provide are often the only 

“you are here” indicators that users get. Therefore, we can’t 

forget to include them on all our pages. This becomes 

especially important when someone follows a hypertext link to 

your site. They bypass the home page and come straight into a 

random portion of your site structure. How do they know what 

site they are in? Where in the site are they? What does this new 

site have to offer them? The consistent navigation elements on 

your page should put their minds at ease. 

 

Whereas top-level navigation elements orient our audience on a 

site-wide level, the lower level navigation menus provide 

direction and awareness within the sub-categories of our site. 

(A good analogy is using a map of the United States to get you 

to Chicago and then using a map of the city to get around 

town.) Within each subsection of our sites, the “subnavigation” 

elements need to follow the same rules of consistency as our 

top-level navigation. It might help to think of subcategories as 

3 Bernard Michael L.. (2001). Developing Schemas for the Location of 

Common Web Objects. Proceedings of the 45th Annual Meeting of the 

Human Factors and Ergonomics Society (pp. 1161-1165). Santa Monica, 

CA: HFES. 

Site to Site 

Keep in mind that you 

not only need to keep 

your site consistent 

with itself, you also 

need to consider the 

rest of the Web. Users 

transfer their 

knowledge of the Web 

from one site to the 

other. If every site on 

the Web puts their 

search box in the upper 

right hand corner and 

you put yours in the 

lower left, the majority 

of your audience will be 

looking in the upper 

right. For an interesting 

study on where Web 

users “expect” to find 

site elements, read 

Developing Schemas 

for the Location of 

Common Web Objects

by Michael Bernard 

(2001) 3.

Case 6:20-cv-00245-ADA Document 65-8 Filed 12/14/21 Page 14 of 31
Chapter 2 

14 

being “framed” by the larger site. (See sidebar below.) This is 

all well and good, but once we enter the third, fourth, or even 

fifth level of our organization, this “framing” can add up to a 

lot of navigation elements and create confusion rather than 

alleviate it. 

Case 6:20-cv-00245-ADA Document 65-8 Filed 12/14/21 Page 15 of 31
Chapter 2 

15 

Too much versus too little 

Like maps, signage, and directions, most Web navigation 

systems consist of words, images, and colors (though motion 

Framing your navigation 

Top-level navigation elements include the site identifier, your first level 

organizational categories, contact information, and any global utilities 

(such as search). These elements pertain to the entire site and should be 

repeated on every page to provide consistency and security. Within a toplevel category, the second-level of navigation elements should appear on 

all pages in a consistent and reliable manner. Once a user enters a thirdlevel category, the top, second, and third level navigation elements are 

presented on each page, and so on. This “framing” provides users with an 

understanding of the structure of your site, and where they are within that 

structure. However, it can begin to add up to lots of navigation and little 

room for content. 

An example of an efficient 

navigation system that 

provides awareness 

without overwhelming the 

content can be found on 

Apple’s site (right). Note 

the use of the “you are 

here” indicators in both the 

top and second level 

navigation menus. 

Apple’s global navigation 

elements also remain 

consistent at the bottom of 

each page. 

The Chicago Symphony 

Orchestra’s site uses a 

vertical navigation system, 

but the consistent 

navigation elements 

remain the same: site 

identification, contact 

information, global 

navigation tools (including 

e-commerce tools), and 

top-level navigation links. 

Case 6:20-cv-00245-ADA Document 65-8 Filed 12/14/21 Page 16 of 31
Chapter 2 

16 

and sound are also used to provide clues for moving around a 

site). Through combinations of these basic ingredients, we 

provide our audience with an understanding of the scope and 

structure of our sites. Because the content of our site is made of 

the same elements (text, images, color), we always need to 

remember that the navigation elements of the site are simply 

there to help. They should not overwhelm the page, nor should 

they distract from the content. If we have relevant and clear 

navigation (quality), we don’t need lots of it (quantity). Yet, it 

is quite common to encounter large Web sites that get overrun 

by navigation. Menu systems, search boxes, related links, and 

advertising links can add up quickly and seemingly “take over” 

a page. Too many navigation elements not only take away 

valuable space, but also add clutter and noise. 

Your audience did not come to your site for the navigation. 

They came for the content. But they can’t find the content 

without navigation! True, but here is a way out of this catch22: balance. We need to find the appropriate balance between 

too much and too little. Too much navigation, and our audience 

is overwhelmed; too little, and they are lost. Finding the right 

balance involves thinking twice about the role of each 

navigation element and its importance to our audience. It also 

means finding the appropriate visual balance between usable 

navigation systems and navigation that detracts from the 

content. One obvious solution is to simply make navigation 

look like navigation. Well, what does navigation look like? It 

seems different on every site. As the Web has matured, certain 

“standards” have emerged. One of the most common is that 

navigation usually sits at the top, bottom, or left side of a page. 

Therefore, even the placement of elements on our pages can 

clue users in to their function as navigation. Another way is to 

use background colors to simulate “buttons.” But I’m getting 

ahead of myself. Chapter 6 will cover the visual aspects of 

navigation design in more depth. 

Case 6:20-cv-00245-ADA Document 65-8 Filed 12/14/21 Page 17 of 31
Chapter 2 

17 

Another popular solution is to use “space-saving” navigation 

elements to strike an adequate navigation/content balance. 

Cascading menus, dynamic user-controlled menus, drop-down 

menus, and breadcrumbs are just a few “space-saving” 

elements common today. (See sidebar above.) Each of these 

solutions has its share of benefits and drawbacks, which you 

need to be aware of before committing your site to one. 

Probably the biggest disadvantage to most drop-down, 

dynamic, or cascading menus is that they require user action to 

“tell” you what they have to offer. A user must roll over the 

appropriate menu item in a cascading menu or click to activate 

a drop-down menu. This can be a particular disadvantage when 

you’re trying to provide your audience with an understanding 

of your site’s contents or when you’re trying to draw them into 

certain areas. Breadcrumbs, on the other hand, while providing 

an account of the path a user followed, do little to provide an 

awareness of the rest of the site (See sidebar below). If you do 

decide to use one or more of these “space-savers,” do some 

quick user testing to make sure that they’re an appropriate 

solution for your particular audience. 

Space Savers 

Navigation menus that require 

user action before they reveal 

their contents are a common 

method of saving space and 

reducing navigational clutter. The 

ILIR site to the left uses cascading 

menus that disclose the next level 

of navigation links when a user 

mouses over them. 

Breadcrumbs are an increasingly 

common method of providing 

situational awareness. They show 

the path from the home page to 

your current location. 

Case 6:20-cv-00245-ADA Document 65-8 Filed 12/14/21 Page 18 of 31
Chapter 2 

18 

People are different 

People find their way around in various ways. Some prefer 

written directions in the form of step-by-step instructions; some 

use particular landmarks to guide them, and others prefer the 

use of maps. Studies have been done to determine which of 

these methods has the best effectiveness to effort ratio. For 

example, having a “mental map” in mind when traversing a 

city provides you with knowledge of all the streets and their 

positions. Though finding your way might be quite easy, a lot 

of mental effort is required. Remembering all the streets and 

their relative position to each other is quite a chore. On the 

other hand, memorizing a set of directions is relatively easy. 

But if you get lost, those directions are not nearly as useful as 

having a map. The truth is that different ways of getting around 

are most effective at different times. This is why books have a 

Drop down the breadcrumbs 

Though breadcrumbs are useful for showing you your position within a Web space, 

they provide little understanding of the scope of the entire site and offer no navigation 

choices beyond backtracking and returning home. Steve Krug, author of Don’t Make Me 

Think: A Common Sense Approach to Web Usability (2000, New Riders), compares 

breadcrumbs to written directions: “The directions can be useful, but you can learn 

more from [a] map.” In the example above, from the LukeW.com site, breadcrumbs 

are combined with drop-down menus to not only provide users with an understanding 

of their current position, but also an awareness of all the possible paths they didn’t 

take. In the current site implementation, only the portfolio samples use the drop-down 

method. (If users are interested in one Web design example, it is likely they might 

want to see more. This navigation features allows them to see the other available 

samples.) However, the technique could easily be expanded to the entire breadcrumb 

path (below) to provide a sense of context and scale (where am I, within how much?). 

When opened, the drop-down menu provides you with a sense of context: where you 

are and where you can go. 

Case 6:20-cv-00245-ADA Document 65-8 Filed 12/14/21 Page 19 of 31
Chapter 2 

19 

table of contents, an index, and page numbers4. You can even 

flip through the book to look for a particular image or 

paragraph you need to find. People are also different. Some 

prefer to use the index, while others can scan the table of 

contents to determine where they need to go. 

A friend that has been to your house several times does not 

need the detailed directions that an out-of-town cousin might. 

Your friend might just need to be reminded of your street 

name, whereas your cousin might not even know how to get 

into town. The same types of situations are likely to occur on 

your Web site. Repeat visitors, first-time visitors, visitors that 

have a solid understanding of your organization, visitors that 

vaguely remember how they got to a particular part of your site 

before, and more all come to your site. To accommodate these 

differences in users and their objectives, we need to have 

navigation systems that allow for flexibility and that present 

information in several ways: breadcrumbs to show the path a 

visitor has taken through the site, search boxes for specific 

content retrieval, site maps for the big picture, and more. We 

can even set up landmarks (or “webmarks”) that can help our 

audience recall where the content they wish to revisit was. 

Unique images positioned in a consistent manner on pages or 

the color-coding of various sections of the site can serve as 

webmarks that can jog our audience’s memory and let them 

know they’re in the right place or getting close to it.

4 Colleen Bushell has published a paper titled Design Requirements for 

Hypermedia (ZED.2, Virginia Commonwealth University, Summer 1995) in 

which the navigation concepts and uses of traditional information structures 

(books, maps) are examined to derive guidelines for designing informative 

hypermedia. One such guideline details the benefits of “showing several 

different representations of the information space.” 

Case 6:20-cv-00245-ADA Document 65-8 Filed 12/14/21 Page 20 of 31
Chapter 2 

20 

Though multiple navigation elements can add the flexibility 

needed to accommodate the different searching and browsing 

patterns of your audience, always be aware of the delicate 

balance between too much and too little navigation. Testing a 

few navigation mockups is good way to make sure that you’re 

on the right track. 

Visualize it: navigation mockups 

As with any part of the planning process, it’s desirable to create 

a few visual documents to evaluate possible navigation systems 

for your site. These navigation mockups are usually black-andwhite sketches of where the navigation elements might be 

positioned, how they might be labeled, and how they might 

behave. It’s much easier to make functional decisions when the 

color, typefaces, and design of navigation elements do not get 

in the way. Using simple black-and-white block diagrams 

solicits functional feedback rather than personal opinions on 

design. 

It is a good idea to create a mockup of an interior page of your 

site and test it on a member of your target audience (or any 

outsider you can get a hold of). Show your test subject the page 

and ask questions like “Where do you think you are in this 

site?” and “How might you have gotten there?” You might 

even inquire what sort of information the user would like next, 

and how they anticipate being able to find it. Often, navigation 

5 One of the most effective urban navigation studies was conducted by the 

French psychologist, Pailhous. He found that Paris cab drivers found their 

way by a very limited number of routes, related to basic points. (Plan Your 

Route, Victor Selwyn, 1987, David & Charles) 

Look honey, a webmark 

Studies of cab drivers in Paris have shown that few have a 

“maplike” understanding of the city. Instead, they rely on 

navigating to and from prominent landmarks (or basic 

point)5. Because the Web lacks any physical space, 

simulating this type of behavior is difficult. However, we can 

use unique images (positioned consistently) and color-coding 

to give sections of our Web sites their own unique 

“webmarks”. Though webmarks probably won’t help you 

navigate a site the way a landmark might help you navigate a 

city, they can serve as visual cues to jog your memory and 

let you know you’re on the right track when you try to find 

content you have located before (a common and frequently 

frustrating activity). In the example to the left, icons adorn 

each of the second level sections of NCSA’s (~100,000 page) 

Web site and provide a visual cue to let users know what 

section they are in. 

Case 6:20-cv-00245-ADA Document 65-8 Filed 12/14/21 Page 21 of 31
Chapter 2 

21 

mockups are only presented to the client for approval. But 

getting some outside input early on in the design process will 

save you some costly redesigns later on. 

Finding Your Personality 

So far the majority of planning we have done has been for the 

organization and interaction of our site. But it can also help to 

plan some basic aspects of our presentation as well. In 

particular, we want to get some initial ideas for the personality

of our site. The personality of your site determines how it 

speaks to your audience. Is it screaming, “Get excited about 

football!” or does it calmly say, “Don’t worry, I know getting a 

home loan is difficult, so I’m going to make it as easy as 

possible for you.” Each of these sites has a different “voice.” 

The voice is reflective of the main message of your site and is 

“spoken” in a manner appropriate to your audience. 

Sample navigation mockup 

Case 6:20-cv-00245-ADA Document 65-8 Filed 12/14/21 Page 22 of 31
Chapter 2 

22 

Though the personality of your site is most quickly 

communicated through the visual presentation (I will discuss 

this in depth in Chapter 5), it is also evident in the organization, 

the content, and even the manner in which your text is written. 

Every aspect of your site, from navigation to color choices, 

contributes to the site’s personality. When all the elements of 

your site work together to reinforce a common personality, we 

refer to that as a unified Web experience. A unified Web 

experience connects the interaction, organization and 

presentation of your site into a cohesive whole. This 

emphasizes the sense of being in “one place” and establishes a 

dialog with your audience. “We’re going to make shopping for 

diamonds fun.” “We have the technical expertise to solve even 

your toughest problems.” But the most important role of your 

site’s personality is to communicate the big picture of your site. 

Who are you, and what do can you do for me? How are you 

different (better) than the competition? Given all the things 

today’s Web sites need to do (offer services, provide 

information, e-commerce, and so on), it is very easy to get 

wrapped up in the details and lose sight of the big picture. 

Describe yourself 

Make sure that the personality you choose for your site is selfdescriptive. That is, it tells your audience who you are and 

what makes you unique. Thinking in terms of real-world 

examples can help a lot. Rooms, buildings, cities, cars, people, 

Diamonds Anyone? 

Though both these sites sell diamonds, they do it in two distinct ways. The personality of each site 

is evident in not only its visual presentation, but also in the organization and interaction. Read the 

category labels and notice the different manners in which you pick out a diamond ring on each 

site. 

Case 6:20-cv-00245-ADA Document 65-8 Filed 12/14/21 Page 23 of 31
Chapter 2 

23 

clothes, furniture, and so on all have distinct traits that make 

them special. Pay attention to your surroundings and take note 

of the things that bring your site to mind or that seem to 

“reflect” or could “speak for” your site. More often than not, 

there is no one item that perfectly embodies your site’s 

message in a manner appropriate to your audience, but a 

combination of several items might just do the trick. For 

example, if your site’s specialty is Italian cooking, try to 

visualize the elements that give an Italian restaurant tucked 

away in a comfortable nook of Little Italy its charisma. Is it the 

old-world sepia photographs, the poor lighting, the sturdy 

tables of heavy oak, or the exuberant staff (with accents and 

all)? Or perhaps an upscale place with tuxedoed staff and a 

world-class wine cellar is more appropriate, or a family 

atmosphere with lively music and lots of “flair”? Though all 

three of these establishments may offer fine cooking, they all 

have different personalities. Which one is right for you depends 

on your audience and the message of your client. 

As the Web becomes more and more crowded, the importance 

of personality increases. With millions of sites to choose from, 

standing out in this “cyber-crowd” is not an easy task. Many 

sites have gone to extreme measures to be different. Sites use 

unique and catchy names like “Yahoo!” and Monster.com and 

air Super Bowl commercials with memorable images or 

outrageous situations. But spending millions of dollars on 

strange TV spots and using “wacky” nomenclature are not 

guaranteed to provide a devoted audience. Having a different 

voice from the competition lets your site be noticed and 

remembered, but doesn’t help to build relationships with your 

audience. Rather a unified Web experience with a consistent 

and appropriate personality does. Try thinking of your favorite 

sites. What makes them stand out? Why do you keep coming 

back to them? How do they “speak” to you? 

Visualize it: sample combinations 

When planning your site, keep a record of the images, text, or 

objects that reflect several possible appropriate personalities 

and tones for your site. This process can be formalized by 

creating sample combinations. Sample combinations are 

created by taking photographs, cutting snippets out of 

magazines, or grabbing screen images, and combining what 

you find into a single document. These documents allow you to 

communicate your ideas to others (including your client) and 

get reactions from your intended audience. Is this an 

appropriate tone for the information we are presenting? What 

Case 6:20-cv-00245-ADA Document 65-8 Filed 12/14/21 Page 24 of 31
Chapter 2 

24 

do these images bring to mind? Excitement? Calm? Sample 

combinations are an effective means for visualizing some 

initial ideas for the personality of your site and can jumpstart 

the visual design process by presenting an appropriate “flavor” 

for the site. 

Remembering Your Limitations

The Web is intended to be accessible to the entire world. 

Achieving such an extraordinary goal ultimately requires a lot 

of compromise on the part of Web consumers and providers. In 

order to reach a worldwide audience, the Web has many 

restrictions and constraints. These restrictions often arise from 

the assortment of different technologies that make the Web run, 

but they also come from the various cultures accessing the Web 

from around the world. 

Think technically 

Thousands of technical variations on the side of Web 

consumers can lead to striking differences in our Web site’s 

presentation and interaction. Not all Web access is the same, 

and as a result, you cannot count on your site looking and 

working in the same way it does on your machine at home. 

Different versions of Web browsers, operating systems, 

Internet connections, hardware, and more contribute to an 

enormous amount of variables. It is impossible to design for 

every specific hardware and software combination your 

audience might be using. Instead, designers need to come up 

with designs that are flexible and support “graceful 

Sampling your site’s flavor 

Sample combinations, like the one to the 

left, can help articulate some initial ideas for 

your Web site’s personality. Though this 

example uses images from magazines, 

pretty much anything is fair game: photos, 

sounds, a writing style, and more. The 

medium or the subjects (in this example, 

mostly physical objects) of your sample 

combinations are not relevant. Instead the 

style (in this case a retro/streamline look) 

that they personify is. 

Case 6:20-cv-00245-ADA Document 65-8 Filed 12/14/21 Page 25 of 31
Chapter 2 

25 

degradation.”6 When users visit a site with the most up-to-date 

technology, they get a design that takes advantage of the latest 

features in presentation and interaction. However, when users 

visit the site with older technology that cannot support 

advanced features, the site still works, minus a few bells and 

whistles. In other words, the site loses some niceties (of 

presentation and interaction), but remains usable: It degrades 

gracefully. To use our language analogy, some words are lost 

from our vocabulary, but enough basic ones remain to get our 

message across. While it may be true that a certain word was 

the optimal way to express ourselves, we still have a few others 

that are “good enough.” When we decide just how our sites 

will vary (and degrade), we need to keep several factors in 

mind: monitors, computers, browsers, plug-ins, and Internet 

connections. 

Monitors can vary in many different ways. There are variations 

in the overall display area of monitors: fifteen inches or a 

twenty-two inch wide screen format? On each one of those 

monitors we have resolution differences: 640 by 480 pixels or 

1024 by 768? 256 colors or millions? Also each monitor has its 

own settings for brightness and contrast, likely to be set to each 

individual user’s preferences. And that’s not to mention the 

6 I am not sure who coined the term “graceful degradation,” but Jeffery Veen 

presents the theory behind it quite well in his book The Art and Science of 

Web Design (2000, New Riders). 

Grace of degradation 

Microsoft Internet Explorer 5.0 on the Macintosh 

Netscape Navigator 6.0 on the Macintosh 

Microsoft Internet Explorer 5.0 on Windows 

Netscape Navigator 4.07 on Windows 

Netscape Navigator 4.7 on the Macintosh 

Not all Web browsers display the 

same code in the same ways. 

Most notably, older browsers do 

not support many style features. 

The example on the left shows 

how the navigation for LukeW.com 

appears on several different 

browsers (with different style 

sheet support) and platforms. 

Note that despite differences in 

font size and drop-down menu 

presentation, the navigation 

retains its functionality across 

multiple browsers and platforms. 

Though the presentation is far 

from ideal in the bottom-most 

setup (the drop down becomes 

visually dominant: remember 

navigation should be unobtrusive), 

a user can still get to the content 

they need. 

Case 6:20-cv-00245-ADA Document 65-8 Filed 12/14/21 Page 26 of 31
Chapter 2 

26 

gamma differences between operating systems that make 

Windows machines seem substantially darker than the display 

on a Macintosh. One thing this tells us is that very subtle 

variations in color might not get noticed by everyone in our 

audience. Therefore, important visual cues should not rely on 

minute color distinctions. Similarly, the differences in screen 

resolution tell us that we cannot count on everyone in our 

audience having 800 pixels of vertical space available for our 

Web site. Instead, we need to create layouts that communicate 

clearly with a variable amount of pixel height and width. 

Differences in operating systems can alter more than just the 

screen gamma. Typefaces, interface elements, and text sizes 

are all subject to change as well. We need to be aware of how 

the fonts we have chosen for our layouts appear on different 

machines. Comparable differences result from different Web 

browsers. Text-sizes and interface elements appear differently 

in even the two most popular browsers: Microsoft Internet 

Explorer and Netscape Navigator. Each of these browsers has 

multiple versions, some of which support most presentation 

and interaction features and others that do not. (As an extreme 

example, Netscape 2.0 does not even support frames.) In 

addition, users can adjust settings within each browser such as 

background color, image display, test sizes, and more. 

Scared yet? Don’t be. It isn’t too difficult to account for the 

many factors of the Web. The first step is admitting that they 

exist. Many designers fool themselves into believing everyone 

on the Web sees their sites the same way that they do. Once 

you accept the fact that things will change from user to user, 

you can begin designing in a manner that supports graceful 

degradation. (More on this in Part 3.) But we’re still not out of 

the woods yet. Designing for everybody does not just mean 

designing for different computers; it means designing for 

different people. And when the world is your audience, trust 

me, there are differences. 

Think globally 

Because the Web is World Wide, it provides the opportunity to 

communicate with people of all nations and cultures. While a 

global audience can be an asset, it is also a responsibility. 

Edward Hall, in his book The Hidden Language, said, “Culture 

is communication.” What he meant is that many factors beyond 

speech need to be considered when communicating crossculturally. Space, time, intonation, and more mean different 

Case 6:20-cv-00245-ADA Document 65-8 Filed 12/14/21 Page 27 of 31
Chapter 2 

27 

things to different people, and one must always be aware of the 

implications. When we communicate online, we need to 

especially be aware of how our colors, and symbols are 

perceived and interpreted. For example, in the United States, an 

owl is often associated with wisdom, whereas in Central 

American and Celtic cultures, it is a symbol of misfortune. 

(Apple Computer, 1992) In Eastern Asia, white is the funerary 

color of choice, while in the United States, we wear black. 

These types of distinctions also apply to everyday objects, 

mannerisms, behaviors, and more. If you’re planning on 

reaching a global market or want to focus on a particular 

country or region, it is a good idea to understand the cultural 

implications of your designs. Make sure you understand what 

your site is “saying,” especially when it speaks to a foreign 

audience.

List it: product requirements 

Yes, it’s time to add another document to our growing Web 

project folder. When deciding on the global and technical 

limitations your site needs to accommodate, it is a good idea to 

list the criteria you need to meet in a product requirements 

document. A product requirements document is nothing more 

than a listing of the constraints your audience is likely to bring 

to your site. Do some of them still use 256-color monitors? Are 

most of them accessing the Web through low-speed modems? 

A product requirements document continually reminds you of 

the limitations of your audience and outlines technical 

platforms on which your site should be tested. Some Web sites 

cater to visitors with high-speed “broadband” connections and 

offer services that users with slow modem dial-ups cannot 

easily use. These sites can make use of page elements that take 

longer to download, such as extensive video or sound files. 

Other sites target a Web-savvy audience that prides itself on 

having the latest Web technology. These sites tend to use 

features that older browsers cannot display. In both these 

situations, the audience has determined what level of 

constraints the site must adhere to. When you design your sites, 

make sure that you are meeting the constraints of your 

audience not your personal computer.

Scheduling Your Progress 

Even though it is now common to think of projects with tight 

deadlines as happening in “Internet time,” a Web project could 

very well move sluggishly if you do not plan ahead. Just about 

every Web site project I have been involved with has slowed 

Case 6:20-cv-00245-ADA Document 65-8 Filed 12/14/21 Page 28 of 31
Chapter 2 

28 

down at the same stage: content delivery. Even site redesigns, 

where the majority of content already exists, slow down when 

content needs to be updated or created anew. This can quickly 

turn Internet time into waiting time. 

But just like the wait at your doctor’s office, this wait is for 

your own good. Perhaps you have heard the expression, “On 

the Web, content is king.” Most visitors to your Web site are 

coming for just that: content. (Currently there is a big trend 

toward offering services online, but that is what Chapter 8 is 

about.) They need specific information, or they want to get a 

basic sense of what is happening or new. Therefore, it is 

extremely important to meet your audience’s expectations and 

deliver fresh and informative content. You need that content, 

no matter how long the wait. We have all encountered Web 

sites that seem more like “ghost sites.” Someone put them up 

and then seemingly walked away. (If you look closely, you 

might even see cobwebs forming on the pages.) These 

abandoned sites are a testament to the challenges involved with 

gathering and maintaining quality content. 

Content originates from various sources. In a corporation, each 

department might be responsible for a different portion. 

Getting all these departments to coordinate their efforts in a 

timely manner is a challenge. Also, each department is likely to 

be busy with its day-to-day chores, so delivering the content 

for a Web update often gets put on the back burner. That being 

said, the importance of good Web content is currently 

recognized by most organizations. These organizations have 

taken steps to ensure that content on their Web site is timely 

and up to date. Some have introduced a full-time employee that 

works with each department to get their information into a 

Web-ready format, a position that requires someone skilled at 

writing in the nonlinear style of the Web. While this is a great 

asset, it is often not enough. 

Not only do the sources of content vary, the content itself 

varies. Product photos, employee bios, technical white papers, 

and more make up the content of an average business site. 

Generating these diverse items involves different timelines and 

production schedules. Photo shoots and interviews might be 

necessary, not to mention copy-editing and technical 

illustrations. Regardless of the type of site you’re building, you 

need to consider the fact that content is going to come in 

different shapes and sizes and at different times. 

Case 6:20-cv-00245-ADA Document 65-8 Filed 12/14/21 Page 29 of 31
Chapter 2 

29 

At this point, you might be saying, “My client already has all 

the content they want to put online ready.” While it might be 

true that a good amount of content may already exist in one 

form or another, it can still be a time-consuming task to get this 

information into a “Web-ready” format: one that is reflective of 

the site organization you have set up. Length, wording, and 

relevance are just some of the factors you need to consider. 

Also, there is Web-specific content, which often needs to be 

created from scratch. Given all the challenges of content 

delivery, you would be well advised to think through the 

process ahead of time.

Visualize it: content delivery schedule 

To avoid delays and keep everyone involved with a Web 

project informed, you need to develop a content delivery 

schedule. A content delivery schedule is usually a listing of the 

site organization with entries for who is responsible for each 

portion of the content’s completion and when. Remember to 

include concrete and realistic deadlines. (Nothing gets things 

moving like the presence of an imminent deadline.) A clear 

understanding (between content generators and the Web 

production team) of when things are due will ensure that no 

one is playing the role of “bottleneck” and holding up your 

launch date. 

Content Delivery 

This very simple content delivery schedule lists each Web page (for the Computer Science 

Department Web site we saw earlier), the person responsible for creating that particular page’s 

content and a due date. 

Case 6:20-cv-00245-ADA Document 65-8 Filed 12/14/21 Page 30 of 31
Chapter 2 

30 

Spreading it Out 

This partial content diagram for 

the LukeW.com site serves as an 

organization schematic and a 

progress diagram. The green, 

yellow, and red dots indicate the 

status of content, and the red 

triangles contain notes related to 

how the content will be 

generated. The cells with blue 

background colors indicate 

folders, the yellow background 

colors detail future content, and a 

gray background indicates content 

that is no longer a part of the 

site. Though this spreadsheet is a 

specific solution to a particular 

site, the kinds of data presented 

are more than likely the same 

information you will need in your 

content-delivery diagrams. 

Case 6:20-cv-00245-ADA Document 65-8 Filed 12/14/21 Page 31 of 31