[Script Info] Title: [Events] Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text Dialogue: 0,0:00:00.86,0:00:04.74,Default,,0000,0000,0000,,I’d like to talk [about] an amazing creature: people. Dialogue: 0,0:00:04.74,0:00:07.76,Default,,0000,0000,0000,,In life, people are often seeking information. Dialogue: 0,0:00:07.76,0:00:12.95,Default,,0000,0000,0000,,That led to psychologist George Miller to describe people as “informovores”. Dialogue: 0,0:00:12.95,0:00:19.79,Default,,0000,0000,0000,,Informovores try to find and devour information, much like foragers seek and devour food. Dialogue: 0,0:00:19.79,0:00:25.40,Default,,0000,0000,0000,,And both informovores and foragers are trying figure out how to get lots of it quickly. Dialogue: 0,0:00:25.40,0:00:30.80,Default,,0000,0000,0000,,Pete Pirolli, a research scientist at PARC — and his colleagues — has spent more than a decade Dialogue: 0,0:00:30.80,0:00:35.31,Default,,0000,0000,0000,,trying to figure out what features of information resources help or hinder Dialogue: 0,0:00:35.31,0:00:39.03,Default,,0000,0000,0000,,people’s ability to find out what they want. Dialogue: 0,0:00:39.03,0:00:43.11,Default,,0000,0000,0000,,One of the major attributes that informovores use to guide their searching Dialogue: 0,0:00:43.11,0:00:49.10,Default,,0000,0000,0000,,is what we call the “scent” of information: Dialogue: 0,0:00:49.10,0:00:52.95,Default,,0000,0000,0000,,As we browse the web, we’re using cues of the pages that we look at Dialogue: 0,0:00:52.95,0:00:57.34,Default,,0000,0000,0000,,to try and figure out whether we can get to the information we want from where we are, Dialogue: 0,0:00:57.34,0:00:59.87,Default,,0000,0000,0000,,whether it’s trustworthy, whether it’s solving a problem. Dialogue: 0,0:00:59.87,0:01:05.80,Default,,0000,0000,0000,,And we’re also looking at these cues to figure out what options are available to us. Dialogue: 0,0:01:05.80,0:01:10.70,Default,,0000,0000,0000,,If you have a web page and you’d like to know whether the “scent” on the page is poor Dialogue: 0,0:01:10.70,0:01:15.52,Default,,0000,0000,0000,,for the people that come to that page or site, there are several telltale signs: Dialogue: 0,0:01:15.52,0:01:21.35,Default,,0000,0000,0000,,If you watch people use your site, you can see them flail around when they get to a particular page; Dialogue: 0,0:01:21.35,0:01:24.14,Default,,0000,0000,0000,,they don’t know where to go. Dialogue: 0,0:01:24.14,0:01:26.39,Default,,0000,0000,0000,,Another technique — and one that Jared Spool and colleagues Dialogue: 0,0:01:26.39,0:01:31.15,Default,,0000,0000,0000,,have used successfully in user interface engineering — is to look at people’s confidence Dialogue: 0,0:01:31.15,0:01:37.22,Default,,0000,0000,0000,,as to whether they are on the right track, right before and right after they click a link. Dialogue: 0,0:01:37.22,0:01:43.52,Default,,0000,0000,0000,,Before tells you whether the link that you’re looking at is a good one — whether it has high “scent”. Dialogue: 0,0:01:43.52,0:01:47.32,Default,,0000,0000,0000,,And people’s confidence after tells you whether the page that you land on Dialogue: 0,0:01:47.32,0:01:52.31,Default,,0000,0000,0000,,beacons the information that you’re trying to get to. Dialogue: 0,0:01:52.31,0:01:55.42,Default,,0000,0000,0000,,Another great way to tell when people are having trouble Dialogue: 0,0:01:55.42,0:02:00.51,Default,,0000,0000,0000,,with the scent of information in how to follow the trail is the use of the Back button. Dialogue: 0,0:02:00.51,0:02:05.32,Default,,0000,0000,0000,,Lots of use of the Back button — major problems for your navigation. Dialogue: 0,0:02:05.32,0:02:12.33,Default,,0000,0000,0000,,Here’s an example of a menu bar of a web page that I think exhibits particularly low scent. Dialogue: 0,0:02:12.33,0:02:17.64,Default,,0000,0000,0000,,This is the menu bar for the Stanford Federal Credit Union — a bank. Dialogue: 0,0:02:17.64,0:02:19.86,Default,,0000,0000,0000,,To give you a feel of what it looks like [interactively], Dialogue: 0,0:02:19.86,0:02:24.79,Default,,0000,0000,0000,,if you mouse over any of these navigational elements, you’ll get a second level of navigation. Dialogue: 0,0:02:24.79,0:02:30.60,Default,,0000,0000,0000,,However, even with that second layer, this page exhibits many of the scent problems Dialogue: 0,0:02:30.60,0:02:33.68,Default,,0000,0000,0000,,that I think are common for low-scent pages. Dialogue: 0,0:02:33.68,0:02:37.29,Default,,0000,0000,0000,,For starters, the categories aren’t written in terms Dialogue: 0,0:02:37.29,0:02:41.36,Default,,0000,0000,0000,,that I think most of the people that come to the site are familiar with. Dialogue: 0,0:02:41.36,0:02:48.31,Default,,0000,0000,0000,,It’s hard to figure out what’s behind “LoanClick” or “Transact”. Dialogue: 0,0:02:48.31,0:02:51.03,Default,,0000,0000,0000,,This is my bank, and often when I go to the site, Dialogue: 0,0:02:51.03,0:02:59.31,Default,,0000,0000,0000,,I’ve to try several different options before I figure out which one has the particular page I’m looking for. Dialogue: 0,0:02:59.31,0:03:04.67,Default,,0000,0000,0000,,Also, the navigational links on this page are short — there’s only a couple of words. Dialogue: 0,0:03:04.67,0:03:15.01,Default,,0000,0000,0000,,And this combination of jargon by the designers as opposed to user-centred terms and the brevity of the links Dialogue: 0,0:03:15.01,0:03:20.20,Default,,0000,0000,0000,,makes it very difficult to see behind those links. Dialogue: 0,0:03:20.20,0:03:26.32,Default,,0000,0000,0000,,Also, as we see, a lot of the cues that would help me figure out what’s behind “Transact” Dialogue: 0,0:03:26.32,0:03:33.74,Default,,0000,0000,0000,,or “LoanClick” or “Account View”, those are hidden in a secondary layer of navigation. Dialogue: 0,0:03:33.74,0:03:40.47,Default,,0000,0000,0000,,You [of] course can mouse over one at a time and get to them, but it’s relatively slow. Dialogue: 0,0:03:40.47,0:03:46.66,Default,,0000,0000,0000,,And finally, the designers of the site presumably offered icons for each of the menu elements Dialogue: 0,0:03:46.66,0:03:51.99,Default,,0000,0000,0000,,with the intuition that icons make things better — they provide a picture and pictures are good, right? Dialogue: 0,0:03:51.99,0:03:57.06,Default,,0000,0000,0000,,But these icons don’t provide much additional information. Dialogue: 0,0:03:57.06,0:04:03.12,Default,,0000,0000,0000,,While good icons can often improve the usability of a site, generic icons rarely help. Dialogue: 0,0:04:03.12,0:04:10.34,Default,,0000,0000,0000,,Another example of generic icons are the web page icons that you see along the left-hand side of this page here, Dialogue: 0,0:04:10.34,0:04:14.84,Default,,0000,0000,0000,,which is the web site for the HCI class online. Dialogue: 0,0:04:14.84,0:04:21.26,Default,,0000,0000,0000,,The generic globe [icon] doesn’t tell me much about the link, so it doesn’t add any information; Dialogue: 0,0:04:21.26,0:04:29.75,Default,,0000,0000,0000,,those pixels could be better put to use with a more specific icon, or with additional words. Dialogue: 0,0:04:29.75,0:04:34.38,Default,,0000,0000,0000,,Icons do help when they facilitate repeat recognition — Dialogue: 0,0:04:34.38,0:04:38.71,Default,,0000,0000,0000,,If either the first time I come to it, it shows me something that I expect; Dialogue: 0,0:04:38.71,0:04:43.22,Default,,0000,0000,0000,,or if it’s a good reminder for when I return. Dialogue: 0,0:04:43.22,0:04:48.36,Default,,0000,0000,0000,,Icons are also really helpful when you know what something looks like, but not what it’s called — Dialogue: 0,0:04:48.36,0:04:51.38,Default,,0000,0000,0000,,and that could be because it’s a language you’re not familiar with, Dialogue: 0,0:04:51.38,0:05:00.68,Default,,0000,0000,0000,,or it could be because there are multiple different terms, and you may not understand which one is being used in this case. Dialogue: 0,0:05:00.68,0:05:04.06,Default,,0000,0000,0000,,And good icons can also help with redundant coding, Dialogue: 0,0:05:04.06,0:05:09.08,Default,,0000,0000,0000,,because if you can recognize either the picture or the word that goes with the icon, Dialogue: 0,0:05:09.08,0:05:12.66,Default,,0000,0000,0000,,then you’re in business and you can get going, Dialogue: 0,0:05:12.66,0:05:15.14,Default,,0000,0000,0000,,and they can teach you about each other — Dialogue: 0,0:05:15.14,0:05:19.66,Default,,0000,0000,0000,,so I’ll learn what the word means from the “Permit” picture that I might be familiar with, Dialogue: 0,0:05:19.66,0:05:26.42,Default,,0000,0000,0000,,or vice-versa — if I’m familiar with the word, I can learn what the picture is. Dialogue: 0,0:05:26.42,0:05:29.58,Default,,0000,0000,0000,,So how can we improve the scent of links? Dialogue: 0,0:05:29.58,0:05:33.98,Default,,0000,0000,0000,,One of the most effective strategies for improving the scent of your web site Dialogue: 0,0:05:33.98,0:05:37.76,Default,,0000,0000,0000,,is to lengthen the links that you have on the site — Dialogue: 0,0:05:37.76,0:05:44.22,Default,,0000,0000,0000,,As opposed having one short word, add a longer explanation. Dialogue: 0,0:05:44.22,0:05:52.08,Default,,0000,0000,0000,,And when you do this, add specific, recognizable terms — what Jared Spool calls “trigger words” — Dialogue: 0,0:05:52.08,0:06:00.83,Default,,0000,0000,0000,,and not stuff that’s funny, or clever, or is the terminology favoured by the design team but not the users. Dialogue: 0,0:06:00.83,0:06:07.23,Default,,0000,0000,0000,,Long, specific links titles — like 7 or 8 words — not only can help improve the scent of the website, Dialogue: 0,0:06:07.23,0:06:10.01,Default,,0000,0000,0000,,it can help improve the accessibility, Dialogue: 0,0:06:10.01,0:06:13.44,Default,,0000,0000,0000,,because many of your users who’re accessing your site through a screen reader Dialogue: 0,0:06:13.44,0:06:20.64,Default,,0000,0000,0000,,will really value the specificity of those links to be able to understand what’s going on. Dialogue: 0,0:06:20.64,0:06:28.44,Default,,0000,0000,0000,,One example of that is that when the HCI course began, we had a link that I think was called “Grading Policy.” Dialogue: 0,0:06:28.44,0:06:36.00,Default,,0000,0000,0000,,Few people realized that behind that link was where we explained the different tracks of the course: Dialogue: 0,0:06:36.00,0:06:41.87,Default,,0000,0000,0000,,And for good reason: the word “track” was nowhere in the link. Dialogue: 0,0:06:41.87,0:06:45.20,Default,,0000,0000,0000,,After a week of confusion on the forum, we realized this Dialogue: 0,0:06:45.20,0:06:49.05,Default,,0000,0000,0000,,and we’re able to redesign the link to be longer and more specific, Dialogue: 0,0:06:49.05,0:06:54.33,Default,,0000,0000,0000,,and includes multiple different trigger words that might bring people to that page. Dialogue: 0,0:06:57.22,0:07:00.99,Default,,0000,0000,0000,,Another example from the [intranet] HCI class that I teach at Stanford Dialogue: 0,0:07:00.99,0:07:09.74,Default,,0000,0000,0000,,is we had a video where the link had a really short “here” as the only word in the link. Dialogue: 0,0:07:09.74,0:07:15.09,Default,,0000,0000,0000,,After somebody emailed me asking where the video was — and I knew it was on that page — Dialogue: 0,0:07:15.09,0:07:20.11,Default,,0000,0000,0000,,I realized that I could redesign that link, to expand it out to be multiple words; Dialogue: 0,0:07:20.11,0:07:26.76,Default,,0000,0000,0000,,and since redesigning that link to be longer, nobody’s emailed me saying they had any trouble. Dialogue: 0,0:07:26.76,0:07:32.76,Default,,0000,0000,0000,,One of the biggest impediments to improving the scent of navigational elements on a site Dialogue: 0,0:07:32.76,0:07:36.45,Default,,0000,0000,0000,,is that we have a really good general-purpose impulse Dialogue: 0,0:07:36.45,0:07:41.19,Default,,0000,0000,0000,,to try and not put too much cruft on things and make it too long. Dialogue: 0,0:07:41.19,0:07:44.57,Default,,0000,0000,0000,,However, with navigation, often more is better, Dialogue: 0,0:07:44.57,0:07:52.28,Default,,0000,0000,0000,,and a great strategy for effective navigation is what’s called “speaking block navigation.” Dialogue: 0,0:07:52.28,0:07:54.97,Default,,0000,0000,0000,,And this set of examples, collected by Smashing Magazine, Dialogue: 0,0:07:54.97,0:07:59.19,Default,,0000,0000,0000,,provides a good intuition as to what speaking block navigation is. Dialogue: 0,0:07:59.19,0:08:03.81,Default,,0000,0000,0000,,By adding multiple different words — perhaps subheadings that are underneath the structure, Dialogue: 0,0:08:03.81,0:08:07.84,Default,,0000,0000,0000,,or an explanation of what the main word or catchphrase is — Dialogue: 0,0:08:07.84,0:08:14.52,Default,,0000,0000,0000,,that can help users get to the place that they want to go. Dialogue: 0,0:08:14.52,0:08:21.20,Default,,0000,0000,0000,,When you provide links or content on a page, does it matter where on the page you put them? Dialogue: 0,0:08:21.20,0:08:22.76,Default,,0000,0000,0000,,Absolutely! Dialogue: 0,0:08:22.76,0:08:27.43,Default,,0000,0000,0000,,And one way that you can see this is with a number of eye-tracking studies Dialogue: 0,0:08:27.43,0:08:30.03,Default,,0000,0000,0000,,that have been done over the last decade or so. Dialogue: 0,0:08:30.03,0:08:36.86,Default,,0000,0000,0000,,This one is compliments of Ed Cutrell from his research group at Microsoft. Dialogue: 0,0:08:36.86,0:08:43.25,Default,,0000,0000,0000,,And what you can see here is that the places on a page where a user looks most Dialogue: 0,0:08:43.25,0:08:47.36,Default,,0000,0000,0000,,are visualized here in red as a “hot spot,” Dialogue: 0,0:08:47.36,0:08:53.49,Default,,0000,0000,0000,,and places where people look less frequently are in blue colours. Dialogue: 0,0:08:53.49,0:08:55.63,Default,,0000,0000,0000,,The distribution of gaze is remarkable: Dialogue: 0,0:08:55.63,0:09:03.38,Default,,0000,0000,0000,,A huge fraction of people’s time is spent looking at a relatively small portion of the real estate on the screen, Dialogue: 0,0:09:03.38,0:09:09.48,Default,,0000,0000,0000,,and these are habits that we build up and carry across to multiple different websites. Dialogue: 0,0:09:09.48,0:09:14.31,Default,,0000,0000,0000,,Very cleverly, we’d built up a sense of where the good stuff often is, Dialogue: 0,0:09:14.31,0:09:18.86,Default,,0000,0000,0000,,and we ignore where the bad stuff often is. Dialogue: 0,0:09:18.86,0:09:25.33,Default,,0000,0000,0000,,And you can then use this to design for “glanceability.” Dialogue: 0,0:09:25.33,0:09:32.18,Default,,0000,0000,0000,,The Poynter Institute has produced this diagram which shows where, in general, people mostly look, Dialogue: 0,0:09:32.18,0:09:35.10,Default,,0000,0000,0000,,and these results are for English-language web pages — Dialogue: 0,0:09:35.10,0:09:40.90,Default,,0000,0000,0000,,presumably they generalize to most pages that have a left-to-right reading order. Dialogue: 0,0:09:40.90,0:09:46.31,Default,,0000,0000,0000,,A lot of the key stuff is in the top-left — that’s the red area. Dialogue: 0,0:09:46.31,0:09:51.08,Default,,0000,0000,0000,,Then there’s a secondary ring around that. Dialogue: 0,0:09:51.08,0:09:57.79,Default,,0000,0000,0000,,And finally, below the fold and off to the far right is where the lowest priority stuff is. Dialogue: 0,0:09:57.79,0:10:02.51,Default,,0000,0000,0000,,Now these priority areas are obviously going to be genre-dependant Dialogue: 0,0:10:02.51,0:10:05.38,Default,,0000,0000,0000,,and based on an individual user’s expectations; Dialogue: 0,0:10:05.38,0:10:14.82,Default,,0000,0000,0000,,but, as a good heuristic, “top left, more important; as you get lower or further to the right, less important.” Dialogue: 0,0:10:14.82,0:10:22.77,Default,,0000,0000,0000,,So, in short, our prime real estate is above the fold, and it’s in places where people expect to find stuff. Dialogue: 0,0:10:22.77,0:10:26.45,Default,,0000,0000,0000,,So this is going to be where other pages put similar content: Dialogue: 0,0:10:26.45,0:10:29.35,Default,,0000,0000,0000,,If you have pages that your users are familiar with, Dialogue: 0,0:10:29.35,0:10:35.95,Default,,0000,0000,0000,,following the location on screen where they have their navigational elements or prime real estate Dialogue: 0,0:10:35.95,0:10:41.56,Default,,0000,0000,0000,,will help people get used to your site as well. Dialogue: 0,0:10:41.56,0:10:45.82,Default,,0000,0000,0000,,And definitely don’t put the navigational stuff where people expect to see ads, Dialogue: 0,0:10:45.82,0:10:54.20,Default,,0000,0000,0000,,because, by now, many people mostly ignore whatever locations they think is going to be advertising. Dialogue: 0,0:10:54.20,0:10:56.67,Default,,0000,0000,0000,,While your prime real estate is above the fold, Dialogue: 0,0:10:56.67,0:11:03.92,Default,,0000,0000,0000,,people are more than happy to scroll if they think that they’re going to see something that’s worthwhile. Dialogue: 0,0:11:03.92,0:11:07.98,Default,,0000,0000,0000,,Often, when there’s valuable information below the fold that people don’t see, Dialogue: 0,0:11:07.98,0:11:11.34,Default,,0000,0000,0000,,it’s because the stuff above the fold didn’t look very good; Dialogue: 0,0:11:11.34,0:11:14.69,Default,,0000,0000,0000,,People assume you’re putting your best stuff there. Dialogue: 0,0:11:14.69,0:11:20.77,Default,,0000,0000,0000,,So, if that’s your best stuff, whatever is got to be below that, that can’t be so good. Dialogue: 0,0:11:20.77,0:11:26.27,Default,,0000,0000,0000,,But if you have lots of great content up top, people will infer that there’s even more further down. Dialogue: 0,0:11:26.27,0:11:33.27,Default,,0000,0000,0000,,And many of the most popular sites on the web see users scroll pretty significantly. Dialogue: 0,0:11:33.27,0:11:38.53,Default,,0000,0000,0000,,Usability expert Jakob Nielsen conducted a study of how people read online, Dialogue: 0,0:11:38.53,0:11:45.72,Default,,0000,0000,0000,,and I can share with you the summary of his results: “They don’t.” Dialogue: 0,0:11:45.72,0:11:50.30,Default,,0000,0000,0000,,Of course there are times where we sit down and read a lengthy article online — Dialogue: 0,0:11:50.30,0:11:52.69,Default,,0000,0000,0000,,that’s not exactly what we’re talking about here. Dialogue: 0,0:11:52.69,0:11:57.03,Default,,0000,0000,0000,,We’re talking about general-purpose web browsing, when we’re fishing around for information, Dialogue: 0,0:11:57.03,0:12:04.47,Default,,0000,0000,0000,,and in these cases, it’s extremely rare to find that people will spend a significant amount of time on one site. Dialogue: 0,0:12:04.47,0:12:08.64,Default,,0000,0000,0000,,Often what you’ll see is that people have a number of tabs open simultaneously, Dialogue: 0,0:12:08.64,0:12:12.49,Default,,0000,0000,0000,,and they’re even doing totally unrelated tasks simultaneously: Dialogue: 0,0:12:12.49,0:12:14.52,Default,,0000,0000,0000,,So they may search for a while. Dialogue: 0,0:12:14.52,0:12:18.23,Default,,0000,0000,0000,,After a minute or two, email gets exciting; go to that. Dialogue: 0,0:12:18.23,0:12:26.49,Default,,0000,0000,0000,,Come back, look across multiple different sites at once, and all of this time they’re trying to find relevant information. Dialogue: 0,0:12:26.49,0:12:32.38,Default,,0000,0000,0000,,So what this means is that the successful sites are the ones that support this interlaced browsing Dialogue: 0,0:12:32.38,0:12:40.74,Default,,0000,0000,0000,,as effectively as is possible by bubbling up the most important stuff. Dialogue: 0,0:12:40.74,0:12:44.40,Default,,0000,0000,0000,,And Jakob Nielsen was able to demonstrate the effects of taking this into account Dialogue: 0,0:12:44.40,0:12:49.76,Default,,0000,0000,0000,,by changing the writing strategy and then measuring the impact on usability. Dialogue: 0,0:12:49.76,0:12:56.60,Default,,0000,0000,0000,,Jakob Nielsen tried three separate techniques to improve the usability of these websites — Dialogue: 0,0:12:56.60,0:12:59.47,Default,,0000,0000,0000,,making the text more concise; Dialogue: 0,0:12:59.47,0:13:05.95,Default,,0000,0000,0000,,making it more scannable by using subheadings, bulleted lists, and short paragraphs; Dialogue: 0,0:13:05.95,0:13:11.49,Default,,0000,0000,0000,,and using more objective language as opposed to what Nielsen calls “marketese.” Dialogue: 0,0:13:11.49,0:13:17.36,Default,,0000,0000,0000,,And what he found was that the effects on the user experience were really significant. Dialogue: 0,0:13:17.36,0:13:22.62,Default,,0000,0000,0000,,The good news is that all of these strategies are really straightforward. Dialogue: 0,0:13:22.62,0:13:26.18,Default,,0000,0000,0000,,And if you’d like to learn more about improving the navigation of websites, Dialogue: 0,0:13:26.18,0:13:31.51,Default,,0000,0000,0000,,I highly recommend these three resources shown here.