0:00:00.856,0:00:04.735
I’d like to talk [about] an amazing creature: people.

0:00:04.735,0:00:07.758
In life, people are often seeking information.

0:00:07.758,0:00:12.954
That led to psychologist George Miller to describe people as “informovores”.

0:00:12.954,0:00:19.787
Informovores try to find and devour information, much like foragers seek and devour food.

0:00:19.787,0:00:25.397
And both informovores and foragers are trying figure out how to get lots of it quickly.

0:00:25.397,0:00:30.795
Pete Pirolli, a research scientist at PARC — and his colleagues — has spent more than a decade

0:00:30.795,0:00:35.307
trying to figure out what features of information resources help or hinder

0:00:35.307,0:00:39.032
people’s ability to find out what they want.

0:00:39.032,0:00:43.108
One of the major attributes that informovores use to guide their searching

0:00:43.108,0:00:49.097
is what we call the “scent” of information:

0:00:49.097,0:00:52.953
As we browse the web, we’re using cues of the pages that we look at

0:00:52.953,0:00:57.340
to try and figure out whether we can get to the information we want from where we are,

0:00:57.340,0:00:59.871
whether it’s trustworthy, whether it’s solving a problem.

0:00:59.871,0:01:05.798
And we’re also looking at these cues to figure out what options are available to us.

0:01:05.798,0:01:10.705
If you have a web page and you’d like to know whether the “scent” on the page is poor

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

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

0:01:21.346,0:01:24.136
they don’t know where to go.

0:01:24.136,0:01:26.387
Another technique — and one that Jared Spool and colleagues

0:01:26.387,0:01:31.149
have used successfully in user interface engineering — is to look at people’s confidence

0:01:31.149,0:01:37.225
as to whether they are on the right track, right before and right after they click a link.

0:01:37.225,0:01:43.525
Before tells you whether the link that you’re looking at is a good one — whether it has high “scent”.

0:01:43.525,0:01:47.315
And people’s confidence after tells you whether the page that you land on

0:01:47.315,0:01:52.307
beacons the information that you’re trying to get to.

0:01:52.307,0:01:55.417
Another great way to tell when people are having trouble

0:01:55.417,0:02:00.514
with the scent of information in how to follow the trail is the use of the Back button.

0:02:00.514,0:02:05.319
Lots of use of the Back button — major problems for your navigation.

0:02:05.319,0:02:12.333
Here’s an example of a menu bar of a web page that I think exhibits particularly low scent.

0:02:12.333,0:02:17.638
This is the menu bar for the Stanford Federal Credit Union — a bank.

0:02:17.638,0:02:19.863
To give you a feel of what it looks like [interactively],

0:02:19.863,0:02:24.794
if you mouse over any of these navigational elements, you’ll get a second level of navigation.

0:02:24.794,0:02:30.600
However, even with that second layer, this page exhibits many of the scent problems

0:02:30.600,0:02:33.675
that I think are common for low-scent pages.

0:02:33.675,0:02:37.291
For starters, the categories aren’t written in terms

0:02:37.291,0:02:41.362
that I think most of the people that come to the site are familiar with.

0:02:41.362,0:02:48.311
It’s hard to figure out what’s behind “LoanClick” or “Transact”.

0:02:48.311,0:02:51.029
This is my bank, and often when I go to the site,

0:02:51.029,0:02:59.309
I’ve to try several different options before I figure out which one has the particular page I’m looking for.

0:02:59.309,0:03:04.670
Also, the navigational links on this page are short — there’s only a couple of words.

0:03:04.670,0:03:15.009
And this combination of jargon by the designers as opposed to user-centred terms and the brevity of the links

0:03:15.009,0:03:20.200
makes it very difficult to see behind those links.

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

0:03:26.325,0:03:33.736
or “LoanClick” or “Account View”, those are hidden in a secondary layer of navigation.

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

0:03:40.472,0:03:46.663
And finally, the designers of the site presumably offered icons for each of the menu elements

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

0:03:51.994,0:03:57.064
But these icons don’t provide much additional information.

0:03:57.064,0:04:03.121
While good icons can often improve the usability of a site, generic icons rarely help.

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

0:04:10.340,0:04:14.837
which is the web site for the HCI class online.

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

0:04:21.263,0:04:29.747
those pixels could be better put to use with a more specific icon, or with additional words.

0:04:29.747,0:04:34.379
Icons do help when they facilitate repeat recognition —

0:04:34.379,0:04:38.714
If either the first time I come to it, it shows me something that I expect;

0:04:38.714,0:04:43.221
or if it’s a good reminder for when I return.

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

0:04:48.362,0:04:51.379
and that could be because it’s a language you’re not familiar with,

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

0:05:00.683,0:05:04.062
And good icons can also help with redundant coding,

0:05:04.062,0:05:09.085
because if you can recognize either the picture or the word that goes with the icon,

0:05:09.085,0:05:12.665
then you’re in business and you can get going,

0:05:12.665,0:05:15.137
and they can teach you about each other —

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

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

0:05:26.421,0:05:29.584
So how can we improve the scent of links?

0:05:29.584,0:05:33.982
One of the most effective strategies for improving the scent of your web site

0:05:33.982,0:05:37.757
is to lengthen the links that you have on the site —

0:05:37.757,0:05:44.218
As opposed having one short word, add a longer explanation.

0:05:44.218,0:05:52.081
And when you do this, add specific, recognizable terms — what Jared Spool calls “trigger words” —

0:05:52.081,0:06:00.832
and not stuff that’s funny, or clever, or is the terminology favoured by the design team but not the users.

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

0:06:07.229,0:06:10.006
it can help improve the accessibility,

0:06:10.006,0:06:13.443
because many of your users who’re accessing your site through a screen reader

0:06:13.443,0:06:20.644
will really value the specificity of those links to be able to understand what’s going on.

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

0:06:28.437,0:06:36.000
Few people realized that behind that link was where we explained the different tracks of the course:

0:06:36.000,0:06:41.868
And for good reason: the word “track” was nowhere in the link.

0:06:41.868,0:06:45.196
After a week of confusion on the forum, we realized this

0:06:45.196,0:06:49.046
and we’re able to redesign the link to be longer and more specific,

0:06:49.046,0:06:54.331
and includes multiple different trigger words that might bring people to that page.

0:06:57.223,0:07:00.991
Another example from the [intranet] HCI class that I teach at Stanford

0:07:00.991,0:07:09.744
is we had a video where the link had a really short “here” as the only word in the link.

0:07:09.744,0:07:15.086
After somebody emailed me asking where the video was — and I knew it was on that page —

0:07:15.086,0:07:20.107
I realized that I could redesign that link, to expand it out to be multiple words;

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

0:07:26.761,0:07:32.762
One of the biggest impediments to improving the scent of navigational elements on a site

0:07:32.762,0:07:36.448
is that we have a really good general-purpose impulse

0:07:36.448,0:07:41.186
to try and not put too much cruft on things and make it too long.

0:07:41.186,0:07:44.569
However, with navigation, often more is better,

0:07:44.569,0:07:52.276
and a great strategy for effective navigation is what’s called “speaking block navigation.”

0:07:52.276,0:07:54.973
And this set of examples, collected by Smashing Magazine,

0:07:54.973,0:07:59.193
provides a good intuition as to what speaking block navigation is.

0:07:59.193,0:08:03.811
By adding multiple different words — perhaps subheadings that are underneath the structure,

0:08:03.811,0:08:07.843
or an explanation of what the main word or catchphrase is —

0:08:07.843,0:08:14.515
that can help users get to the place that they want to go.

0:08:14.515,0:08:21.196
When you provide links or content on a page, does it matter where on the page you put them?

0:08:21.196,0:08:22.757
Absolutely!

0:08:22.757,0:08:27.428
And one way that you can see this is with a number of eye-tracking studies

0:08:27.428,0:08:30.032
that have been done over the last decade or so.

0:08:30.032,0:08:36.855
This one is compliments of Ed Cutrell from his research group at Microsoft.

0:08:36.855,0:08:43.246
And what you can see here is that the places on a page where a user looks most

0:08:43.246,0:08:47.363
are visualized here in red as a “hot spot,”

0:08:47.363,0:08:53.490
and places where people look less frequently are in blue colours.

0:08:53.490,0:08:55.634
The distribution of gaze is remarkable:

0:08:55.634,0:09:03.377
A huge fraction of people’s time is spent looking at a relatively small portion of the real estate on the screen,

0:09:03.377,0:09:09.481
and these are habits that we build up and carry across to multiple different websites.

0:09:09.481,0:09:14.314
Very cleverly, we’d built up a sense of where the good stuff often is,

0:09:14.314,0:09:18.856
and we ignore where the bad stuff often is.

0:09:18.856,0:09:25.329
And you can then use this to design for “glanceability.”

0:09:25.329,0:09:32.178
The Poynter Institute has produced this diagram which shows where, in general, people mostly look,

0:09:32.178,0:09:35.097
and these results are for English-language web pages —

0:09:35.097,0:09:40.898
presumably they generalize to most pages that have a left-to-right reading order.

0:09:40.898,0:09:46.312
A lot of the key stuff is in the top-left — that’s the red area.

0:09:46.312,0:09:51.085
Then there’s a secondary ring around that.

0:09:51.085,0:09:57.787
And finally, below the fold and off to the far right is where the lowest priority stuff is.

0:09:57.787,0:10:02.507
Now these priority areas are obviously going to be genre-dependant

0:10:02.507,0:10:05.375
and based on an individual user’s expectations;

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

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

0:10:22.770,0:10:26.453
So this is going to be where other pages put similar content:

0:10:26.453,0:10:29.354
If you have pages that your users are familiar with,

0:10:29.354,0:10:35.948
following the location on screen where they have their navigational elements or prime real estate

0:10:35.948,0:10:41.562
will help people get used to your site as well.

0:10:41.562,0:10:45.816
And definitely don’t put the navigational stuff where people expect to see ads,

0:10:45.816,0:10:54.203
because, by now, many people mostly ignore whatever locations they think is going to be advertising.

0:10:54.203,0:10:56.674
While your prime real estate is above the fold,

0:10:56.674,0:11:03.923
people are more than happy to scroll if they think that they’re going to see something that’s worthwhile.

0:11:03.923,0:11:07.983
Often, when there’s valuable information below the fold that people don’t see,

0:11:07.983,0:11:11.336
it’s because the stuff above the fold didn’t look very good;

0:11:11.336,0:11:14.690
People assume you’re putting your best stuff there.

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

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

0:11:26.274,0:11:33.271
And many of the most popular sites on the web see users scroll pretty significantly.

0:11:33.271,0:11:38.532
Usability expert Jakob Nielsen conducted a study of how people read online,

0:11:38.532,0:11:45.719
and I can share with you the summary of his results: “They don’t.”

0:11:45.719,0:11:50.298
Of course there are times where we sit down and read a lengthy article online —

0:11:50.298,0:11:52.694
that’s not exactly what we’re talking about here.

0:11:52.694,0:11:57.032
We’re talking about general-purpose web browsing, when we’re fishing around for information,

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

0:12:04.473,0:12:08.643
Often what you’ll see is that people have a number of tabs open simultaneously,

0:12:08.643,0:12:12.489
and they’re even doing totally unrelated tasks simultaneously:

0:12:12.489,0:12:14.515
So they may search for a while.

0:12:14.515,0:12:18.232
After a minute or two, email gets exciting; go to that.

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

0:12:26.486,0:12:32.382
So what this means is that the successful sites are the ones that support this interlaced browsing

0:12:32.382,0:12:40.742
as effectively as is possible by bubbling up the most important stuff.

0:12:40.742,0:12:44.403
And Jakob Nielsen was able to demonstrate the effects of taking this into account

0:12:44.403,0:12:49.756
by changing the writing strategy and then measuring the impact on usability.

0:12:49.756,0:12:56.604
Jakob Nielsen tried three separate techniques to improve the usability of these websites —

0:12:56.604,0:12:59.469
making the text more concise;

0:12:59.469,0:13:05.952
making it more scannable by using subheadings, bulleted lists, and short paragraphs;

0:13:05.952,0:13:11.494
and using more objective language as opposed to what Nielsen calls “marketese.”

0:13:11.494,0:13:17.356
And what he found was that the effects on the user experience were really significant.

0:13:17.356,0:13:22.619
The good news is that all of these strategies are really straightforward.

0:13:22.619,0:13:26.178
And if you’d like to learn more about improving the navigation of websites,

0:13:26.178,0:13:31.506
I highly recommend these three resources shown here.