A good Web site helps three groups: users, owners, and builders. This lesson and the next are about users.
What makes a Web site good for users? Remember that “good” means “helping people with their goals.”
We need to understand:
Let’s talk about how this works on CarlysSchool.Com.
Carly’s School is a human obedience school in Rochester, Michigan, USA. Carly offers beginner to advanced courses. Beginner courses focus on the basics, like teaching your human to let you inside when you bark. Humans learn tricks in advanced courses. Like the Dance of the Tangled Leash.
Carly’s School has just one location, in downtown Rochester. Customers are local, most from within a few miles.
What do people want to do with Carly’s site? Let’s break users into two types, depending on why they visit CarlysSchool.Com.
The first group are the DIYers (DIY = do it yourself). They don’t want Carly to do the training. DIYers want to train their humans themselves.
The second group are the potential customers. They are people who live near Carly’s School, and are looking for a class for their humans.
Imagine you’re a DIYer. What would make Carly’s site good for you?
(Log in to enter your solution to this exercise.)
Carly decides not to help the DIYers on CarlysSchool.Com. This is a business decision on her part. She decides the site should only help potential customers.
The potential customers have one main task: to decide whether to sign up for a class. They’ll use CarlysSchool.Com to get the information they need to make that decision.
What information do they want? Carly talks to potential customers all the time. Their most common questions are:
Carly decides that CarlysSchool.Com should help users answer all of these questions, except for the first one. She doesn’t want to advertise the competition.
So users want an answer to the first question, but Carly doesn’t want to answer it.
Right. Each question she won’t answer reduces the value of the site to the users. But that’s Carly’s call.
Carly also has decided not to do any online course registration, at least not yet. Maybe in the future. To register for a course, people need to call the store, or visit in person.
So, these are users’ goals. How do they meet their goals?
Users get answers:
There are other ways customers get information, like word-of-mouth, and traditional print advertising. But let’s focus on Web things.
Someone might do a Google search, like this:
Figure 1. Google search
The closer Carly’s School is to the top of the rankings, the better. Getting a site to the top is called search engine optimization (SEO).
Suppose someone does the search in Figure 1, and clicks on the link to CarlysSchool.Com. The user has now left Googleland, and is on Carly’s site, seeing the Web pages that Carly owns. The user can find information in two ways:
Browsing means looking around the site, clicking from page to page. Webers used to think that people would not browse a site, or at least not much. They had rules like, “No information should be more than three clicks from the home page.”
But research found that people will browse. They’ll click, click, click – if they’re following the “scent of information.”
It’s like a dog following a rabbit. If the scent trail is strong, the dog will follow it. S/he won’t get distracted, even if the trail crosses other trails. But if the scent isn’t clear – if the dog isn’t sure which way to go next – the dog might get distracted by something else.
Figure 2. Scent trail
It’s the same with a site. Users visit page after page. If they think they’re getting closer to the information they want, they’ll keep going. But if they’re not sure what to do next to get closer to the information, they might give up, and go to another site.
So a good Web site is browsable. It lays down information trails users can follow. We’ll talk about how to make a site browsable in a moment.
When most people hit a site, they start browsing. But some start searching. I’m not talking about Google, but about the site’s own search function. For example, CoreDogs has a search box on every page:
Figure 3. Search box on a site
This is an internal search engine. Google is an external search engine.
Where are we?
Let’s talk about how CarlysSchool.Com can help users find information.
Information architecture is about how information is arranged on a site. This means:
Let’s take the first one. Carly has listed the questions that customers have. Answers to those questions should be on the site.
It’s important to get this right. The whole reason Carly wants a Web site is for customers to get their questions answered. If they like what they see, they might give Carly some business.
Information is grouped together on pages. But it can be grouped in different ways. For example, say there are three courses. Carly wants to answer the following questions about each course:
You could make a page for each course, answering all these questions.
Similar pages are often grouped into sections of a site. Carly’s site might have a section called “Courses.” The individual course pages would be in that section. There would be a front page for the section, giving links to the individual courses.
Here’s how the section could be organized:
Figure 4. Information architecture
The “course section” is not a physical thing. It’s just a set of pages that are presented to the user as if they belong together.
To summarize, information architecture is about what information is on the site, and how it is grouped into sections and pages.
“Supporting” means “making it easy.” We want to help users find information by browsing through the site’s architecture. We need to give them the scent of information, so they know where to click next to get closer to the answer they want.
So how can we make browsing easier?
Menus help people quickly learn what is on a site, and jump to relevant pages.
CoreDogs has a menu of tabs at the top of every page:
Figure 5. Tabs
Each tab corresponds to a section of the site.
The tree menu on the right of each page shows the structure of the lesson’s section:
Figure 6. Tree menu
The current page is highlighted.
Carly might put a menu at the left of each page. It would have buttons for the major pages and sections of the site. Here’s a simple menu:
Figure 7. Vertical nav bar
This is often called a vertical navigation bar, or nav bar for short. You’ll learn to make nav bars later.
A page is scannable if you can quickly run your eye over it, and pick out important information.
Headings make pages scannable. Scroll up and down this page, and the section headings will stand out. They use different font sizes and colors from the rest of the text.
Make sure it’s clear which heading goes with which text. Compare these two page fragments.
Figure 8. Grouping
The eye uses whitespace to decide what headings belong with what text. That’s easier in the second fragment.
Another way to make text scannable is to use emphasis. Like the word “emphasis” in this paragraph. The word stands out as you scan the text.
To summarize, making pages scannable helps users browse them quickly.
Readability is very important. Users can’t find information they can’t read!
There are two aspects to this: the look of text, and the writing.
Look is about font face, color, size, etc. This is bad:
Figure 9. The look of text
The colors make the text hard to look at.
Writing matters as well. Obviously there should be no spelling errors. But there are other guidelines, too.
Grammar is important. But I’ll drop rules that reduce readability. For example, I’ll end sentences with prepositions.
We’ll talk more about text later.
Help users browse Web sites by making pages predictable. This helps people direct their attention to the right place.
Figure 10. A link
When a link points to a page outside the current site, CoreDogs adds an icon, like this:
Figure 11. An external link
Use signals to helps users know where they are in the site. CoreDogs uses menu highlighting and breadcrumbs.
Tabs are on the top of each CoreDogs page. Each section of the site has a tab:
Figure 5 (again). Tabs
One of the tabs in Figure 5 is highlighted. That’s the section of the site the current page is in.
The tree menu on the right highlights the current lesson:
Figure 6 (again). Tree menu
Breadcrumbs show the path to the current page:
Figure 12. Breadcrumbs
Let’s talk about searching.
CarlysSchool.Com should have a search box, like the one on CoreDogs:
Figure 3 (again). Search box on a site
The user types something in…
Figure 13. Searching
... and gets some search results:
Figure 14. Search results
The results show each page where the search term “breadcrumbs” was found. The page you’re looking at now is listed.
Searching can get complicated. For example, suppose I type “programming” into the CoreDogs search box:
Figure 15. A search
Here’s one of the results:
Figure 16. A search result
But wait a minute. The word “programming” isn’t in the result. In fact, it’s nowhere on the Writing a JS program page. So why is it in the search results?
The CoreDogs search engine can handle stems. “Program” is the stem of the word “programming,” so CoreDogs returns pages with “program” in it. The Writing a JS program page contains the word “program.”
One reason for Google’s success is that it handles stems, misspellings, synonyms, abbreviations, and other things. For example, if you search for “cascading style sheet,” Google will return pages that have the abbreviation “CSS,” even if they don’t have the term “cascading style sheet” at all. This happens so naturally that you usually don’t even notice how smart Google search is.
And of course, autocomplete gives some interesting facts:
Figure 17. Google autocomplete for “dogs are”
Let’s look at how people use WanderingDog.Com, an ecommerce site.