1
00:00:00,856 --> 00:00:04,735
I’d like to talk [about] an amazing creature: people.

2
00:00:04,735 --> 00:00:07,758
In life, people are often seeking information.

3
00:00:07,758 --> 00:00:12,954
That led to psychologist George Miller to describe people as “informovores”.

4
00:00:12,954 --> 00:00:19,787
Informovores try to find and devour information, much like foragers seek and devour food.

5
00:00:19,787 --> 00:00:25,397
And both informovores and foragers are trying figure out how to get lots of it quickly.

6
00:00:25,397 --> 00:00:30,795
Pete Pirolli, a research scientist at PARC — and his colleagues — has spent more than a decade

7
00:00:30,795 --> 00:00:35,307
trying to figure out what features of information resources help or hinder

8
00:00:35,307 --> 00:00:39,032
people’s ability to find out what they want.

9
00:00:39,032 --> 00:00:43,108
One of the major attributes that informovores use to guide their searching

10
00:00:43,108 --> 00:00:49,097
is what we call the “scent” of information:

11
00:00:49,097 --> 00:00:52,953
As we browse the web, we’re using cues of the pages that we look at

12
00:00:52,953 --> 00:00:57,340
to try and figure out whether we can get to the information we want from where we are,

13
00:00:57,340 --> 00:00:59,871
whether it’s trustworthy, whether it’s solving a problem.

14
00:00:59,871 --> 00:01:05,798
And we’re also looking at these cues to figure out what options are available to us.

15
00:01:05,798 --> 00:01:10,705
If you have a web page and you’d like to know whether the “scent” on the page is poor

16
00:01:10,705 --> 00:01:15,518
for the people that come to that page or site, there are several telltale signs:

17
00:01:15,518 --> 00:01:21,346
If you watch people use your site, you can see them flail around when they get to a particular page;

18
00:01:21,346 --> 00:01:24,136
they don’t know where to go.

19
00:01:24,136 --> 00:01:26,387
Another technique — and one that Jared Spool and colleagues

20
00:01:26,387 --> 00:01:31,149
have used successfully in user interface engineering — is to look at people’s confidence

21
00:01:31,149 --> 00:01:37,225
as to whether they are on the right track, right before and right after they click a link.

22
00:01:37,225 --> 00:01:43,525
Before tells you whether the link that you’re looking at is a good one — whether it has high “scent”.

23
00:01:43,525 --> 00:01:47,315
And people’s confidence after tells you whether the page that you land on

24
00:01:47,315 --> 00:01:52,307
beacons the information that you’re trying to get to.

25
00:01:52,307 --> 00:01:55,417
Another great way to tell when people are having trouble

26
00:01:55,417 --> 00:02:00,514
with the scent of information in how to follow the trail is the use of the Back button.

27
00:02:00,514 --> 00:02:05,319
Lots of use of the Back button — major problems for your navigation.

28
00:02:05,319 --> 00:02:12,333
Here’s an example of a menu bar of a web page that I think exhibits particularly low scent.

29
00:02:12,333 --> 00:02:17,638
This is the menu bar for the Stanford Federal Credit Union — a bank.

30
00:02:17,638 --> 00:02:19,863
To give you a feel of what it looks like [interactively],

31
00:02:19,863 --> 00:02:24,794
if you mouse over any of these navigational elements, you’ll get a second level of navigation.

32
00:02:24,794 --> 00:02:30,600
However, even with that second layer, this page exhibits many of the scent problems

33
00:02:30,600 --> 00:02:33,675
that I think are common for low-scent pages.

34
00:02:33,675 --> 00:02:37,291
For starters, the categories aren’t written in terms

35
00:02:37,291 --> 00:02:41,362
that I think most of the people that come to the site are familiar with.

36
00:02:41,362 --> 00:02:48,311
It’s hard to figure out what’s behind “LoanClick” or “Transact”.

37
00:02:48,311 --> 00:02:51,029
This is my bank, and often when I go to the site,

38
00:02:51,029 --> 00:02:59,309
I’ve to try several different options before I figure out which one has the particular page I’m looking for.

39
00:02:59,309 --> 00:03:04,670
Also, the navigational links on this page are short — there’s only a couple of words.

40
00:03:04,670 --> 00:03:15,009
And this combination of jargon by the designers as opposed to user-centred terms and the brevity of the links

41
00:03:15,009 --> 00:03:20,200
makes it very difficult to see behind those links.

42
00:03:20,200 --> 00:03:26,325
Also, as we see, a lot of the cues that would help me figure out what’s behind “Transact”

43
00:03:26,325 --> 00:03:33,736
or “LoanClick” or “Account View”, those are hidden in a secondary layer of navigation.

44
00:03:33,736 --> 00:03:40,472
You [of] course can mouse over one at a time and get to them, but it’s relatively slow.

45
00:03:40,472 --> 00:03:46,663
And finally, the designers of the site presumably offered icons for each of the menu elements

46
00:03:46,663 --> 00:03:51,994
with the intuition that icons make things better — they provide a picture and pictures are good, right?

47
00:03:51,994 --> 00:03:57,064
But these icons don’t provide much additional information.

48
00:03:57,064 --> 00:04:03,121
While good icons can often improve the usability of a site, generic icons rarely help.

49
00:04:03,121 --> 00: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,

50
00:04:10,340 --> 00:04:14,837
which is the web site for the HCI class online.

51
00:04:14,837 --> 00:04:21,263
The generic globe [icon] doesn’t tell me much about the link, so it doesn’t add any information;

52
00:04:21,263 --> 00:04:29,747
those pixels could be better put to use with a more specific icon, or with additional words.

53
00:04:29,747 --> 00:04:34,379
Icons do help when they facilitate repeat recognition —

54
00:04:34,379 --> 00:04:38,714
If either the first time I come to it, it shows me something that I expect;

55
00:04:38,714 --> 00:04:43,221
or if it’s a good reminder for when I return.

56
00:04:43,221 --> 00:04:48,362
Icons are also really helpful when you know what something looks like, but not what it’s called —

57
00:04:48,362 --> 00:04:51,379
and that could be because it’s a language you’re not familiar with,

58
00:04:51,379 --> 00: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.

59
00:05:00,683 --> 00:05:04,062
And good icons can also help with redundant coding,

60
00:05:04,062 --> 00:05:09,085
because if you can recognize either the picture or the word that goes with the icon,

61
00:05:09,085 --> 00:05:12,665
then you’re in business and you can get going,

62
00:05:12,665 --> 00:05:15,137
and they can teach you about each other —

63
00:05:15,137 --> 00:05:19,655
so I’ll learn what the word means from the “Permit” picture that I might be familiar with,

64
00:05:19,655 --> 00:05:26,421
or vice-versa — if I’m familiar with the word, I can learn what the picture is.

65
00:05:26,421 --> 00:05:29,584
So how can we improve the scent of links?

66
00:05:29,584 --> 00:05:33,982
One of the most effective strategies for improving the scent of your web site

67
00:05:33,982 --> 00:05:37,757
is to lengthen the links that you have on the site —

68
00:05:37,757 --> 00:05:44,218
As opposed having one short word, add a longer explanation.

69
00:05:44,218 --> 00:05:52,081
And when you do this, add specific, recognizable terms — what Jared Spool calls “trigger words” —

70
00:05:52,081 --> 00:06:00,832
and not stuff that’s funny, or clever, or is the terminology favoured by the design team but not the users.

71
00:06:00,832 --> 00:06:07,229
Long, specific links titles — like 7 or 8 words — not only can help improve the scent of the website,

72
00:06:07,229 --> 00:06:10,006
it can help improve the accessibility,

73
00:06:10,006 --> 00:06:13,443
because many of your users who’re accessing your site through a screen reader

74
00:06:13,443 --> 00:06:20,644
will really value the specificity of those links to be able to understand what’s going on.

75
00:06:20,644 --> 00: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.”

76
00:06:28,437 --> 00:06:36,000
Few people realized that behind that link was where we explained the different tracks of the course:

77
00:06:36,000 --> 00:06:41,868
And for good reason: the word “track” was nowhere in the link.

78
00:06:41,868 --> 00:06:45,196
After a week of confusion on the forum, we realized this

79
00:06:45,196 --> 00:06:49,046
and we’re able to redesign the link to be longer and more specific,

80
00:06:49,046 --> 00:06:54,331
and includes multiple different trigger words that might bring people to that page.

81
00:06:57,223 --> 00:07:00,991
Another example from the [intranet] HCI class that I teach at Stanford

82
00:07:00,991 --> 00:07:09,744
is we had a video where the link had a really short “here” as the only word in the link.

83
00:07:09,744 --> 00:07:15,086
After somebody emailed me asking where the video was — and I knew it was on that page —

84
00:07:15,086 --> 00:07:20,107
I realized that I could redesign that link, to expand it out to be multiple words;

85
00:07:20,107 --> 00:07:26,761
and since redesigning that link to be longer, nobody’s emailed me saying they had any trouble.

86
00:07:26,761 --> 00:07:32,762
One of the biggest impediments to improving the scent of navigational elements on a site

87
00:07:32,762 --> 00:07:36,448
is that we have a really good general-purpose impulse

88
00:07:36,448 --> 00:07:41,186
to try and not put too much cruft on things and make it too long.

89
00:07:41,186 --> 00:07:44,569
However, with navigation, often more is better,

90
00:07:44,569 --> 00:07:52,276
and a great strategy for effective navigation is what’s called “speaking block navigation.”

91
00:07:52,276 --> 00:07:54,973
And this set of examples, collected by Smashing Magazine,

92
00:07:54,973 --> 00:07:59,193
provides a good intuition as to what speaking block navigation is.

93
00:07:59,193 --> 00:08:03,811
By adding multiple different words — perhaps subheadings that are underneath the structure,

94
00:08:03,811 --> 00:08:07,843
or an explanation of what the main word or catchphrase is —

95
00:08:07,843 --> 00:08:14,515
that can help users get to the place that they want to go.

96
00:08:14,515 --> 00:08:21,196
When you provide links or content on a page, does it matter where on the page you put them?

97
00:08:21,196 --> 00:08:22,757
Absolutely!

98
00:08:22,757 --> 00:08:27,428
And one way that you can see this is with a number of eye-tracking studies

99
00:08:27,428 --> 00:08:30,032
that have been done over the last decade or so.

100
00:08:30,032 --> 00:08:36,855
This one is compliments of Ed Cutrell from his research group at Microsoft.

101
00:08:36,855 --> 00:08:43,246
And what you can see here is that the places on a page where a user looks most

102
00:08:43,246 --> 00:08:47,363
are visualized here in red as a “hot spot,”

103
00:08:47,363 --> 00:08:53,490
and places where people look less frequently are in blue colours.

104
00:08:53,490 --> 00:08:55,634
The distribution of gaze is remarkable:

105
00:08:55,634 --> 00: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,

106
00:09:03,377 --> 00:09:09,481
and these are habits that we build up and carry across to multiple different websites.

107
00:09:09,481 --> 00:09:14,314
Very cleverly, we’d built up a sense of where the good stuff often is,

108
00:09:14,314 --> 00:09:18,856
and we ignore where the bad stuff often is.

109
00:09:18,856 --> 00:09:25,329
And you can then use this to design for “glanceability.”

110
00:09:25,329 --> 00:09:32,178
The Poynter Institute has produced this diagram which shows where, in general, people mostly look,

111
00:09:32,178 --> 00:09:35,097
and these results are for English-language web pages —

112
00:09:35,097 --> 00:09:40,898
presumably they generalize to most pages that have a left-to-right reading order.

113
00:09:40,898 --> 00:09:46,312
A lot of the key stuff is in the top-left — that’s the red area.

114
00:09:46,312 --> 00:09:51,085
Then there’s a secondary ring around that.

115
00:09:51,085 --> 00:09:57,787
And finally, below the fold and off to the far right is where the lowest priority stuff is.

116
00:09:57,787 --> 00:10:02,507
Now these priority areas are obviously going to be genre-dependant

117
00:10:02,507 --> 00:10:05,375
and based on an individual user’s expectations;

118
00:10:05,375 --> 00:10:14,820
but, as a good heuristic, “top left, more important; as you get lower or further to the right, less important.”

119
00:10:14,820 --> 00: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.

120
00:10:22,770 --> 00:10:26,453
So this is going to be where other pages put similar content:

121
00:10:26,453 --> 00:10:29,354
If you have pages that your users are familiar with,

122
00:10:29,354 --> 00:10:35,948
following the location on screen where they have their navigational elements or prime real estate

123
00:10:35,948 --> 00:10:41,562
will help people get used to your site as well.

124
00:10:41,562 --> 00:10:45,816
And definitely don’t put the navigational stuff where people expect to see ads,

125
00:10:45,816 --> 00:10:54,203
because, by now, many people mostly ignore whatever locations they think is going to be advertising.

126
00:10:54,203 --> 00:10:56,674
While your prime real estate is above the fold,

127
00:10:56,674 --> 00:11:03,923
people are more than happy to scroll if they think that they’re going to see something that’s worthwhile.

128
00:11:03,923 --> 00:11:07,983
Often, when there’s valuable information below the fold that people don’t see,

129
00:11:07,983 --> 00:11:11,336
it’s because the stuff above the fold didn’t look very good;

130
00:11:11,336 --> 00:11:14,690
People assume you’re putting your best stuff there.

131
00:11:14,690 --> 00:11:20,766
So, if that’s your best stuff, whatever is got to be below that, that can’t be so good.

132
00:11:20,766 --> 00:11:26,274
But if you have lots of great content up top, people will infer that there’s even more further down.

133
00:11:26,274 --> 00:11:33,271
And many of the most popular sites on the web see users scroll pretty significantly.

134
00:11:33,271 --> 00:11:38,532
Usability expert Jakob Nielsen conducted a study of how people read online,

135
00:11:38,532 --> 00:11:45,719
and I can share with you the summary of his results: “They don’t.”

136
00:11:45,719 --> 00:11:50,298
Of course there are times where we sit down and read a lengthy article online —

137
00:11:50,298 --> 00:11:52,694
that’s not exactly what we’re talking about here.

138
00:11:52,694 --> 00:11:57,032
We’re talking about general-purpose web browsing, when we’re fishing around for information,

139
00:11:57,032 --> 00: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.

140
00:12:04,473 --> 00:12:08,643
Often what you’ll see is that people have a number of tabs open simultaneously,

141
00:12:08,643 --> 00:12:12,489
and they’re even doing totally unrelated tasks simultaneously:

142
00:12:12,489 --> 00:12:14,515
So they may search for a while.

143
00:12:14,515 --> 00:12:18,232
After a minute or two, email gets exciting; go to that.

144
00:12:18,232 --> 00:12:26,486
Come back, look across multiple different sites at once, and all of this time they’re trying to find relevant information.

145
00:12:26,486 --> 00:12:32,382
So what this means is that the successful sites are the ones that support this interlaced browsing

146
00:12:32,382 --> 00:12:40,742
as effectively as is possible by bubbling up the most important stuff.

147
00:12:40,742 --> 00:12:44,403
And Jakob Nielsen was able to demonstrate the effects of taking this into account

148
00:12:44,403 --> 00:12:49,756
by changing the writing strategy and then measuring the impact on usability.

149
00:12:49,756 --> 00:12:56,604
Jakob Nielsen tried three separate techniques to improve the usability of these websites —

150
00:12:56,604 --> 00:12:59,469
making the text more concise;

151
00:12:59,469 --> 00:13:05,952
making it more scannable by using subheadings, bulleted lists, and short paragraphs;

152
00:13:05,952 --> 00:13:11,494
and using more objective language as opposed to what Nielsen calls “marketese.”

153
00:13:11,494 --> 00:13:17,356
And what he found was that the effects on the user experience were really significant.

154
00:13:17,356 --> 00:13:22,619
The good news is that all of these strategies are really straightforward.

155
00:13:22,619 --> 00:13:26,178
And if you’d like to learn more about improving the navigation of websites,

156
00:13:26,178 --> 00:13:31,506
I highly recommend these three resources shown here.