WEBVTT 00:00:00.856 --> 00:00:04.735 I’d like to talk [about] an amazing creature: people. 00:00:04.735 --> 00:00:07.758 In life, people are often seeking information. 00:00:07.758 --> 00:00:12.954 That led to psychologist George Miller to describe people as “informovores”. 00:00:12.954 --> 00:00:19.787 Informovores try to find and devour information, much like foragers seek and devour food. 00:00:19.787 --> 00:00:25.397 And both informovores and foragers are trying figure out how to get lots of it quickly. 00:00:25.397 --> 00:00:30.795 Pete Pirolli, a research scientist at PARC — and his colleagues — has spent more than a decade 00:00:30.795 --> 00:00:35.307 trying to figure out what features of information resources help or hinder 00:00:35.307 --> 00:00:39.032 people’s ability to find out what they want. 00:00:39.032 --> 00:00:43.108 One of the major attributes that informovores use to guide their searching 00:00:43.108 --> 00:00:49.097 is what we call the “scent” of information: 00:00:49.097 --> 00:00:52.953 As we browse the web, we’re using cues of the pages that we look at 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, 00:00:57.340 --> 00:00:59.871 whether it’s trustworthy, whether it’s solving a problem. 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. 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 00:01:10.705 --> 00:01:15.518 for the people that come to that page or site, there are several telltale signs: 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; 00:01:21.346 --> 00:01:24.136 they don’t know where to go. 00:01:24.136 --> 00:01:26.387 Another technique — and one that Jared Spool and colleagues 00:01:26.387 --> 00:01:31.149 have used successfully in user interface engineering — is to look at people’s confidence 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. 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”. 00:01:43.525 --> 00:01:47.315 And people’s confidence after tells you whether the page that you land on 00:01:47.315 --> 00:01:52.307 beacons the information that you’re trying to get to. 00:01:52.307 --> 00:01:55.417 Another great way to tell when people are having trouble 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. 00:02:00.514 --> 00:02:05.319 Lots of use of the Back button — major problems for your navigation. 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. 00:02:12.333 --> 00:02:17.638 This is the menu bar for the Stanford Federal Credit Union — a bank. 00:02:17.638 --> 00:02:19.863 To give you a feel of what it looks like [interactively], 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. 00:02:24.794 --> 00:02:30.600 However, even with that second layer, this page exhibits many of the scent problems 00:02:30.600 --> 00:02:33.675 that I think are common for low-scent pages. 00:02:33.675 --> 00:02:37.291 For starters, the categories aren’t written in terms 00:02:37.291 --> 00:02:41.362 that I think most of the people that come to the site are familiar with. 00:02:41.362 --> 00:02:48.311 It’s hard to figure out what’s behind “LoanClick” or “Transact”. 00:02:48.311 --> 00:02:51.029 This is my bank, and often when I go to the site, 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. 00:02:59.309 --> 00:03:04.670 Also, the navigational links on this page are short — there’s only a couple of words. 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 00:03:15.009 --> 00:03:20.200 makes it very difficult to see behind those links. 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” 00:03:26.325 --> 00:03:33.736 or “LoanClick” or “Account View”, those are hidden in a secondary layer of navigation. 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. 00:03:40.472 --> 00:03:46.663 And finally, the designers of the site presumably offered icons for each of the menu elements 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? 00:03:51.994 --> 00:03:57.064 But these icons don’t provide much additional information. 00:03:57.064 --> 00:04:03.121 While good icons can often improve the usability of a site, generic icons rarely help. 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, 00:04:10.340 --> 00:04:14.837 which is the web site for the HCI class online. 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; 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. 00:04:29.747 --> 00:04:34.379 Icons do help when they facilitate repeat recognition — 00:04:34.379 --> 00:04:38.714 If either the first time I come to it, it shows me something that I expect; 00:04:38.714 --> 00:04:43.221 or if it’s a good reminder for when I return. 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 — 00:04:48.362 --> 00:04:51.379 and that could be because it’s a language you’re not familiar with, 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. 00:05:00.683 --> 00:05:04.062 And good icons can also help with redundant coding, 00:05:04.062 --> 00:05:09.085 because if you can recognize either the picture or the word that goes with the icon, 00:05:09.085 --> 00:05:12.665 then you’re in business and you can get going, 00:05:12.665 --> 00:05:15.137 and they can teach you about each other — 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, 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. 00:05:26.421 --> 00:05:29.584 So how can we improve the scent of links? 00:05:29.584 --> 00:05:33.982 One of the most effective strategies for improving the scent of your web site 00:05:33.982 --> 00:05:37.757 is to lengthen the links that you have on the site — 00:05:37.757 --> 00:05:44.218 As opposed having one short word, add a longer explanation. 00:05:44.218 --> 00:05:52.081 And when you do this, add specific, recognizable terms — what Jared Spool calls “trigger words” — 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. 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, 00:06:07.229 --> 00:06:10.006 it can help improve the accessibility, 00:06:10.006 --> 00:06:13.443 because many of your users who’re accessing your site through a screen reader 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. 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.” 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: 00:06:36.000 --> 00:06:41.868 And for good reason: the word “track” was nowhere in the link. 00:06:41.868 --> 00:06:45.196 After a week of confusion on the forum, we realized this 00:06:45.196 --> 00:06:49.046 and we’re able to redesign the link to be longer and more specific, 00:06:49.046 --> 00:06:54.331 and includes multiple different trigger words that might bring people to that page. 00:06:57.223 --> 00:07:00.991 Another example from the [intranet] HCI class that I teach at Stanford 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. 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 — 00:07:15.086 --> 00:07:20.107 I realized that I could redesign that link, to expand it out to be multiple words; 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. 00:07:26.761 --> 00:07:32.762 One of the biggest impediments to improving the scent of navigational elements on a site 00:07:32.762 --> 00:07:36.448 is that we have a really good general-purpose impulse 00:07:36.448 --> 00:07:41.186 to try and not put too much cruft on things and make it too long. 00:07:41.186 --> 00:07:44.569 However, with navigation, often more is better, 00:07:44.569 --> 00:07:52.276 and a great strategy for effective navigation is what’s called “speaking block navigation.” 00:07:52.276 --> 00:07:54.973 And this set of examples, collected by Smashing Magazine, 00:07:54.973 --> 00:07:59.193 provides a good intuition as to what speaking block navigation is. 00:07:59.193 --> 00:08:03.811 By adding multiple different words — perhaps subheadings that are underneath the structure, 00:08:03.811 --> 00:08:07.843 or an explanation of what the main word or catchphrase is — 00:08:07.843 --> 00:08:14.515 that can help users get to the place that they want to go. 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? 00:08:21.196 --> 00:08:22.757 Absolutely! 00:08:22.757 --> 00:08:27.428 And one way that you can see this is with a number of eye-tracking studies 00:08:27.428 --> 00:08:30.032 that have been done over the last decade or so. 00:08:30.032 --> 00:08:36.855 This one is compliments of Ed Cutrell from his research group at Microsoft. 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 00:08:43.246 --> 00:08:47.363 are visualized here in red as a “hot spot,” 00:08:47.363 --> 00:08:53.490 and places where people look less frequently are in blue colours. 00:08:53.490 --> 00:08:55.634 The distribution of gaze is remarkable: 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, 00:09:03.377 --> 00:09:09.481 and these are habits that we build up and carry across to multiple different websites. 00:09:09.481 --> 00:09:14.314 Very cleverly, we’d built up a sense of where the good stuff often is, 00:09:14.314 --> 00:09:18.856 and we ignore where the bad stuff often is. 00:09:18.856 --> 00:09:25.329 And you can then use this to design for “glanceability.” 00:09:25.329 --> 00:09:32.178 The Poynter Institute has produced this diagram which shows where, in general, people mostly look, 00:09:32.178 --> 00:09:35.097 and these results are for English-language web pages — 00:09:35.097 --> 00:09:40.898 presumably they generalize to most pages that have a left-to-right reading order. 00:09:40.898 --> 00:09:46.312 A lot of the key stuff is in the top-left — that’s the red area. 00:09:46.312 --> 00:09:51.085 Then there’s a secondary ring around that. 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. 00:09:57.787 --> 00:10:02.507 Now these priority areas are obviously going to be genre-dependant 00:10:02.507 --> 00:10:05.375 and based on an individual user’s expectations; 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.” 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. 00:10:22.770 --> 00:10:26.453 So this is going to be where other pages put similar content: 00:10:26.453 --> 00:10:29.354 If you have pages that your users are familiar with, 00:10:29.354 --> 00:10:35.948 following the location on screen where they have their navigational elements or prime real estate 00:10:35.948 --> 00:10:41.562 will help people get used to your site as well. 00:10:41.562 --> 00:10:45.816 And definitely don’t put the navigational stuff where people expect to see ads, 00:10:45.816 --> 00:10:54.203 because, by now, many people mostly ignore whatever locations they think is going to be advertising. 00:10:54.203 --> 00:10:56.674 While your prime real estate is above the fold, 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. 00:11:03.923 --> 00:11:07.983 Often, when there’s valuable information below the fold that people don’t see, 00:11:07.983 --> 00:11:11.336 it’s because the stuff above the fold didn’t look very good; 00:11:11.336 --> 00:11:14.690 People assume you’re putting your best stuff there. 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. 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. 00:11:26.274 --> 00:11:33.271 And many of the most popular sites on the web see users scroll pretty significantly. 00:11:33.271 --> 00:11:38.532 Usability expert Jakob Nielsen conducted a study of how people read online, 00:11:38.532 --> 00:11:45.719 and I can share with you the summary of his results: “They don’t.” 00:11:45.719 --> 00:11:50.298 Of course there are times where we sit down and read a lengthy article online — 00:11:50.298 --> 00:11:52.694 that’s not exactly what we’re talking about here. 00:11:52.694 --> 00:11:57.032 We’re talking about general-purpose web browsing, when we’re fishing around for information, 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. 00:12:04.473 --> 00:12:08.643 Often what you’ll see is that people have a number of tabs open simultaneously, 00:12:08.643 --> 00:12:12.489 and they’re even doing totally unrelated tasks simultaneously: 00:12:12.489 --> 00:12:14.515 So they may search for a while. 00:12:14.515 --> 00:12:18.232 After a minute or two, email gets exciting; go to that. 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. 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 00:12:32.382 --> 00:12:40.742 as effectively as is possible by bubbling up the most important stuff. 00:12:40.742 --> 00:12:44.403 And Jakob Nielsen was able to demonstrate the effects of taking this into account 00:12:44.403 --> 00:12:49.756 by changing the writing strategy and then measuring the impact on usability. 00:12:49.756 --> 00:12:56.604 Jakob Nielsen tried three separate techniques to improve the usability of these websites — 00:12:56.604 --> 00:12:59.469 making the text more concise; 00:12:59.469 --> 00:13:05.952 making it more scannable by using subheadings, bulleted lists, and short paragraphs; 00:13:05.952 --> 00:13:11.494 and using more objective language as opposed to what Nielsen calls “marketese.” 00:13:11.494 --> 00:13:17.356 And what he found was that the effects on the user experience were really significant. 00:13:17.356 --> 00:13:22.619 The good news is that all of these strategies are really straightforward. 00:13:22.619 --> 00:13:26.178 And if you’d like to learn more about improving the navigation of websites, 00:13:26.178 --> 00:13:31.506 I highly recommend these three resources shown here.