Site users

Where are we?

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:

• The goals users have.
• The actions they take to reach their goals.
• How Web sites support those actions.

Let’s talk about how this works on CarlysSchool.Com.

This lesson’s goals

Learn:

• There are common questions users are trying to answer when they visit a Web site.
• Information architecture is working out what information should be on a site, and how it should be grouped into pages and sections.
• People browse through a site to find information. When users click from page to page, they are often following the “scent of information.”
• Browsing is easier when there are menus, scannable pages, readable pages, predictable pages, and “You are here” signs.
• People also use a site’s search function to find information.

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.

Users’ goals

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.

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:

• What obedience schools are in the area?
• What courses does Carly’s School offer?
• What benefits do the courses offer?
• What do the courses cost?
• Where are the courses taught? When are they offered?
• Is my human ready for a course?
• Can I talk to someone about the courses? Who?
• How long has Carly’s School been in business?
• Does Carly know what she’s doing?
• How do I sign up?

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.

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’ actions

Users get answers:

• With a search engine.
• By looking through CarlysSchool.Com.

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
• Searching – not in Google, but in Carly’s site

Browsing CarlysSchool.Com

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.

Searching CarlysSchool.Com

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.

How CarlysSchool.Com can help users

Where are we?

• People have questions, like what Carly’s School charges for courses.
• They use search engines to get to CarlysSchool.Com.
• When they get there, they browse and search within the site.

Let’s talk about how CarlysSchool.Com can help users find information.

Information architecture

Information architecture is about how information is arranged on a site. This means:

• Putting the right information on the site.
• Grouping it into pages.
• Grouping pages into sections of the site.

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:

• What does the course teach humans to do?
• How will this benefit the humans’ dog?
• What does the course cost?
• What is the course schedule?

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 browsing

“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

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 lessons 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.

Scannable pages

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.

Readable pages

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.

• Use lists. Like this one.
• Use simple words.
• Use short sentences and paragraphs.
• Use active voice.
• Be informal, where appropriate.

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.

Predictable pages

Help users browse Web sites by making pages predictable. This helps people direct their attention to the right place.

• Consistent layout. For example, every CoreDogs page has a menu on the right.
• Consistent fonts and colors. For example, all major headings should be the same size and color.
• Make links look like links. Use underlining, and color:

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

“You are here” signs

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 8 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 summarize.

• A good site helps people reach their goals.
• Users of CarlysSchool.Com have questions, like what classes are offered.
• Users browse and search Web sites for answers.
• You can support browsing by making sites scannable, readable, and predictable, and adding “You are here” signs.

Let’s talk about searching.

Supporting 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”

Summary

• There are common questions users are trying to answer when they visit a Web site.
• Information architecture is about working out what information should be on a site, and how it should be grouped into pages and sections.
• When users click from page to page, they are often following the scent of information.
• People also use a site’s search function.
• Browsing is easier when there are menus, scannable pages, readable pages, predictable pages, and “You are here” signs.

What now?

Let’s look at how people use WanderingDog.Com, an ecommerce site.