Lecture 8.2: Reading and Navigating (13:31)

I’d like to talk [about] an amazing creature: people.

In life, people are often seeking information.

That led to psychologist George Miller to describe people as “informovores”.

Informovores try to find and devour information, much like foragers seek and devour food.

And both informovores and foragers are trying figure out how to get lots of it quickly.

Pete Pirolli, a research scientist at PARC — and his colleagues — has spent more than a decade

trying to figure out what features of information resources help or hinder

people’s ability to find out what they want.

One of the major attributes that informovores use to guide their searching

is what we call the “scent” of information:

As we browse the web, we’re using cues of the pages that we look at

to try and figure out whether we can get to the information we want from where we are,

whether it’s trustworthy, whether it’s solving a problem.

And we’re also looking at these cues to figure out what options are available to us.

If you have a web page and you’d like to know whether the “scent” on the page is poor

for the people that come to that page or site, there are several telltale signs:

If you watch people use your site, you can see them flail around when they get to a particular page;

they don’t know where to go.

Another technique — and one that Jared Spool and colleagues

have used successfully in user interface engineering — is to look at people’s confidence

as to whether they are on the right track, right before and right after they click a link.

Before tells you whether the link that you’re looking at is a good one — whether it has high “scent”.

And people’s confidence after tells you whether the page that you land on

beacons the information that you’re trying to get to.

Another great way to tell when people are having trouble

with the scent of information in how to follow the trail is the use of the Back button.

Lots of use of the Back button — major problems for your navigation.

Here’s an example of a menu bar of a web page that I think exhibits particularly low scent.

This is the menu bar for the Stanford Federal Credit Union — a bank.

To give you a feel of what it looks like [interactively],

if you mouse over any of these navigational elements, you’ll get a second level of navigation.

However, even with that second layer, this page exhibits many of the scent problems

that I think are common for low-scent pages.

For starters, the categories aren’t written in terms

that I think most of the people that come to the site are familiar with.

It’s hard to figure out what’s behind “LoanClick” or “Transact”.

This is my bank, and often when I go to the site,

I’ve to try several different options before I figure out which one has the particular page I’m looking for.

Also, the navigational links on this page are short — there’s only a couple of words.

And this combination of jargon by the designers as opposed to user-centred terms and the brevity of the links

makes it very difficult to see behind those links.

Also, as we see, a lot of the cues that would help me figure out what’s behind “Transact”

or “LoanClick” or “Account View”, those are hidden in a secondary layer of navigation.

You [of] course can mouse over one at a time and get to them, but it’s relatively slow.

And finally, the designers of the site presumably offered icons for each of the menu elements

with the intuition that icons make things better — they provide a picture and pictures are good, right?

But these icons don’t provide much additional information.

While good icons can often improve the usability of a site, generic icons rarely help.

Another example of generic icons are the web page icons that you see along the left-hand side of this page here,

which is the web site for the HCI class online.

The generic globe [icon] doesn’t tell me much about the link, so it doesn’t add any information;

those pixels could be better put to use with a more specific icon, or with additional words.

Icons do help when they facilitate repeat recognition —

If either the first time I come to it, it shows me something that I expect;

or if it’s a good reminder for when I return.

Icons are also really helpful when you know what something looks like, but not what it’s called —

and that could be because it’s a language you’re not familiar with,

or it could be because there are multiple different terms, and you may not understand which one is being used in this case.

And good icons can also help with redundant coding,

because if you can recognize either the picture or the word that goes with the icon,

then you’re in business and you can get going,

and they can teach you about each other —

so I’ll learn what the word means from the “Permit” picture that I might be familiar with,

or vice-versa — if I’m familiar with the word, I can learn what the picture is.

So how can we improve the scent of links?

One of the most effective strategies for improving the scent of your web site

is to lengthen the links that you have on the site —

As opposed having one short word, add a longer explanation.

And when you do this, add specific, recognizable terms — what Jared Spool calls “trigger words” —

and not stuff that’s funny, or clever, or is the terminology favoured by the design team but not the users.

Long, specific links titles — like 7 or 8 words — not only can help improve the scent of the website,

it can help improve the accessibility,

because many of your users who’re accessing your site through a screen reader

will really value the specificity of those links to be able to understand what’s going on.

One example of that is that when the HCI course began, we had a link that I think was called “Grading Policy.”

Few people realized that behind that link was where we explained the different tracks of the course:

And for good reason: the word “track” was nowhere in the link.

After a week of confusion on the forum, we realized this

and we’re able to redesign the link to be longer and more specific,

and includes multiple different trigger words that might bring people to that page.

Another example from the [intranet] HCI class that I teach at Stanford

is we had a video where the link had a really short “here” as the only word in the link.

After somebody emailed me asking where the video was — and I knew it was on that page —

I realized that I could redesign that link, to expand it out to be multiple words;

and since redesigning that link to be longer, nobody’s emailed me saying they had any trouble.

One of the biggest impediments to improving the scent of navigational elements on a site

is that we have a really good general-purpose impulse

to try and not put too much cruft on things and make it too long.

However, with navigation, often more is better,

and a great strategy for effective navigation is what’s called “speaking block navigation.”

And this set of examples, collected by Smashing Magazine,

provides a good intuition as to what speaking block navigation is.

By adding multiple different words — perhaps subheadings that are underneath the structure,

or an explanation of what the main word or catchphrase is —

that can help users get to the place that they want to go.

When you provide links or content on a page, does it matter where on the page you put them?

Absolutely!

And one way that you can see this is with a number of eye-tracking studies

that have been done over the last decade or so.

This one is compliments of Ed Cutrell from his research group at Microsoft.

And what you can see here is that the places on a page where a user looks most

are visualized here in red as a “hot spot,”

and places where people look less frequently are in blue colours.

The distribution of gaze is remarkable:

A huge fraction of people’s time is spent looking at a relatively small portion of the real estate on the screen,

and these are habits that we build up and carry across to multiple different websites.

Very cleverly, we’d built up a sense of where the good stuff often is,

and we ignore where the bad stuff often is.

And you can then use this to design for “glanceability.”

The Poynter Institute has produced this diagram which shows where, in general, people mostly look,

and these results are for English-language web pages —

presumably they generalize to most pages that have a left-to-right reading order.

A lot of the key stuff is in the top-left — that’s the red area.

Then there’s a secondary ring around that.

And finally, below the fold and off to the far right is where the lowest priority stuff is.

Now these priority areas are obviously going to be genre-dependant

and based on an individual user’s expectations;

but, as a good heuristic, “top left, more important; as you get lower or further to the right, less important.”

So, in short, our prime real estate is above the fold, and it’s in places where people expect to find stuff.

So this is going to be where other pages put similar content:

If you have pages that your users are familiar with,

following the location on screen where they have their navigational elements or prime real estate

will help people get used to your site as well.

And definitely don’t put the navigational stuff where people expect to see ads,

because, by now, many people mostly ignore whatever locations they think is going to be advertising.

While your prime real estate is above the fold,

people are more than happy to scroll if they think that they’re going to see something that’s worthwhile.

Often, when there’s valuable information below the fold that people don’t see,

it’s because the stuff above the fold didn’t look very good;

People assume you’re putting your best stuff there.

So, if that’s your best stuff, whatever is got to be below that, that can’t be so good.

But if you have lots of great content up top, people will infer that there’s even more further down.

And many of the most popular sites on the web see users scroll pretty significantly.

Usability expert Jakob Nielsen conducted a study of how people read online,

and I can share with you the summary of his results: “They don’t.”

Of course there are times where we sit down and read a lengthy article online —

that’s not exactly what we’re talking about here.

We’re talking about general-purpose web browsing, when we’re fishing around for information,

and in these cases, it’s extremely rare to find that people will spend a significant amount of time on one site.

Often what you’ll see is that people have a number of tabs open simultaneously,

and they’re even doing totally unrelated tasks simultaneously:

So they may search for a while.

After a minute or two, email gets exciting; go to that.

Come back, look across multiple different sites at once, and all of this time they’re trying to find relevant information.

So what this means is that the successful sites are the ones that support this interlaced browsing

as effectively as is possible by bubbling up the most important stuff.

And Jakob Nielsen was able to demonstrate the effects of taking this into account

by changing the writing strategy and then measuring the impact on usability.

Jakob Nielsen tried three separate techniques to improve the usability of these websites —

making the text more concise;

making it more scannable by using subheadings, bulleted lists, and short paragraphs;

and using more objective language as opposed to what Nielsen calls “marketese.”

And what he found was that the effects on the user experience were really significant.

The good news is that all of these strategies are really straightforward.

And if you’d like to learn more about improving the navigation of websites,

I highly recommend these three resources shown here.