When you're designing it can be really tempting to think about what you're creating as it's own little island or universe of something that you're making. And it's really useful in lots of ways as part of the design process to at times take a clean slate approach. And think about things from scratch. But ultimately, when you do the design, no site is an island. And that's especially true on the web. It's really tempting to take the narcissistic view that people come to your site, they spend five or ten minutes there, they're fully involved when they're doing that. And that they're having an immersive experience. But in reality, people are often trying to see through your design to get to the information that they seek. And that's true whether it's to learn something, to buy something, or just have fun. And what this means is that on the web, especially, all designs are interconnected. And that the nexus for a lot of those connections is the search engine. And what we're gonna talk about in this video is how you can use the prominence of search as an interaction style to create better user experiences. We're gonna start with some theory and then we'll get to some practical examples. I'll talk about these principles in the context of the web. But a lot of what's going on here applies even beyond the web. It's just that the web is both an extremely prolific platform for designers these days. Nearly everybody's doing something with the web. And also it's, I think, the most salient example. Here's a simple example I was wondering about recently. What is the name of the Tom Waits song that opens the movie Down by Law? So if you do this search in Google, the first result that you'll come to is the IMDb home page. And this is great, you can see it's got the songs right there, you got the information you need, and you're done. Now what's notable about this interaction is that I had a mini task that I was curious about, and I was able to execute it using IMDb as a resource. But I never really interacted with any of the IMDb navigation stuff, I never went to the IMDb homepage, I didn't use any of the nav at the top. Maybe I get curious about that best movies ever made that's on the right and I click over there. But for the most part, IMDb is a pure stepping stone on my way to accomplishing the task. And the fact that I'm not thinking about this as an IMDb interaction but rather as an information query will change how I navigate and interact with the content. And in the modern world, even more commonly the user's likely to have dozens of tabs open, or they may be on a mobile device where three other things in the physical world are happening simultaneously. And that makes us even further away from this focused island experience. The real politic of design is that you take the user's intentional capacity, you draw out five seconds of that or so, realize there's seven other things happening, and what's yours is that tiny sliver of that five seconds. And I hate to be the bearer of bad news but it ain't much. One thing that IMDb did well is that they had the content that I needed. And they were right at the top of the search results page. How did they get there? This isn't a class about how search engines work but the underlying plumbing of search engines does have significant impact on the user experience. So I'd like to take a minute just to try and summarize what's under the hood in terms of the magic of Google. In the old days when dinosaurs roamed the Earth, search didn't work very well. If you searched for a phrase like Down by Law, there's lots of documents that have those terms in them, most of which have nothing to do with the movie. It's get better if you add Tom Waits in there, most things do. But still there's a lot of irrelevant material. The key insight that enabled web scale search to work well comes, in a lot of ways from a Cornell computer scientist, Jon Kleinberg. Jon's an applied mathematician, and an aficionado of the sociology literature. Let's say you imagine a town or a school or an organization. And you've got all these people in the town or school or organization. They're your nodes, and the connections between those people, family relationships, friendship relationships, work relationships, those are links or edges. And in a system like this, some people, like maybe the mayor, they're going to emerge as hubs. They're connected to lots of people. Other people might be well connected because they put in effort into it or have valuable knowledge, and what Jon reasoned was that the Internet is kind of like that town. By this I mean, on the Internet, the Internet of documents, we also have hubs and nodes and links. Here, the nodes are the documents. The links are the hyperlinks and connections between them. The hyperlink structure of the web is what provides many of the information cues that allow search to work. And just like if you wanted to get something done in a town and you saw that the mayor was the hub, the mayor might be a good person to ask. When we're searching for information on the web we want to find those hub nodes and use those as the preferred document. In the mid 90s Sergey Brin and Larry Page were PhD students in computer science. They were inspired by Jon's insight that document networks shared many properties with interpersonal networks. On the web, these connections are the hyperlinks. So Larry and Sergey designed an algorithm called PageRank to find documents that both contained our search results, Down by Law, Tom Waits, and were well connected, like IMDb is. The PageRank algorithm formed the original basis for Google Search. And web search these days, from any of those search engines is now light years beyond the papers from the mid-90s and the basic PageRank algorithm. But the basic insight that social proof helps us understand what makes good documents is a powerful part of how web search still works. Okay, let's get back to design. Right now, we've got two insights so far. The first is that users often get to the content they want by algorithms being able to leverage the social proof of the web. And the second related to that, is what content users get to depends on how that content is connected and labeled. So if you have good content, it's actually a usability imperative to connect it and label it well. Many of you have probably heard of search engine optimization or SEO. And often, people talk about it in somewhat disparaging terms or reluctant terms. If you have garbage that you're trying to maliciously route people to, yeah, it's a dirty trick and cheating. But if you have good content that you're helping route people to, that's good usability. So how can you help people find what they're looking for? First and foremost, in a search driven world, it's especially imperative to speak the user's language. You may have a clever name for something, but that clever name is unlikely to end up high on the search results list. People end up at the content that has the terms that users search for. And if you have the answer, that should be you. Say there's two different terms that can be used to describe something. Like, we have an object. Is this vessel here for stuff? Is this a bin or is this a basket? Which one would you pick? It's a trick question because the SEO answer is both, that if I go online, this would be called a bin basket or something like that. You search around eBay, you see this strategy all the time. And when done well this improves usability you say bin, I say basket, we both find what we need. Speaking the users' language and naming things with the terms that are common, is key to being able to get users to your site. This is true for academic articles just as with selling containers. The second way that search matters for designers is once people get to your site, and the way that they use search to navigate around the content that's there. And I think that search is actually a great example of a fundamental axis in designing systems. That we can think about systems as being more reactive to user input or more proactive in offering up opportunities. In a reactive user interface, think a classical graphical user interface or a search engine from 10 or 15 years ago, nothing happens until the user invokes an action. So this page of Google search results, I typed in a query, we got the results. Increasingly, search engine are trying to reduce the number of clicks that it takes to be able to get to information. So here's an example searching for interaction design, where Google actually uses what they call a one box to foreground the most popular content right upfront. This works great for getting the weather for the day, or other quick information asks, currency conversions, time, things like that. So what we see is that the big advantage of a reactive user interface, I interact with my GUI, I ask for something, it happens. It's very predictable and it's very steerable. If I want something different, I do something different. Value proposition is clear, no surprises. The problem is that sometimes you don't know what to ask for. Also it's kinda lame to ask for the same thing every time. If you walk into a coffee shop and get a cup of coffee every day, at some point when you walk in, the person sees you walk in the door, they might start making your coffee. Or they may ask you a question, coffee and a bagel? Or they might tell you about a special that they have that day, which you might not have thought to ask about. These are benefits of a proactive user interface. When I go to Google Scholar and I'm logged in, at the bottom of the page it shows me, proactively, articles that have been recently published that relate to my field of work. This is great because it's discreet, if I've got a task, there's nobody blocking me, I can type right into that big giant search bar and I'm off and running. On the other hand if something grabs me in the lower part of the screen there, an article looks interesting, that's great, because it leads me to something that I might not otherwise have found. Recommender systems are a classic and valuable example of this. My task is find a good movie. And of course you can't quite type good movie in to Google and get back what you want. By contrast, a well built recommender system, this is a screen shot from Movie Lands, which is a non-profit research project. What we see here are movies that are based on how I've rated movies that I've watched. And it shows me things that it thinks I might like. So this proactivity in the case of recommenders can work extremely well. Another proactive example is having things for popular or trending content. Another example of proactive search is things that are timely, like a World Cup win. And one of the most powerful ones to come out relatively recently has been instant expansion, as people type. Instant search queries are interesting as a user interface example, because they are really good for experts. It saves them keystrokes. They're also really good for novices. It guides you to the space of possibilities. When lots of people search for something that is interesting when it pops up to you, sex scandals, for example. Even if they're not real, it reinforces in that instant search expansion. And that's an example where a mirage is created, that's not real at all. And so that's an example where this can break down. But on the good days it works really well. Here's two more movie examples, this is Movieland's will break out its auto-completion suggestions categorically which I think is a really nice user interface. And Netflix on a mobile device actually will update the thumbnails of what it shows you as you type each key stroke. As the designer, what's more interesting about all of this and you've seen this in some of the examples already, is that search and navigation go together. Users are never quite fully just in search mode or quite fully in nav mode. And so when you design an interactive experience, you wanna have people be able to move fluidly between search and nav. And from another site through yours, and depending on your goals, maybe off onto somewhere else. I came across to a really interesting example of this when I was putting together this video. I'd loved for years Jakob Nielsen's Alertbox column about usability. He and his team do a great job of writing extremely clear practical prose. So I was gonna show you an example from that. So I typed in what I thought was the URL. Turned out I made two errors there. The first is I misspelled it, and Google gently corrected me there, for which I'm thankful. And the second one is that USE-IT is now folded into the larger Nielsen Norman group site. No problem. Second result here is the articles. What the alert box is now a part of. So I clicked there and started looking through different articles. I just skimmed page by page. And when I got to page six I found one of their really great search articles. So clicked on that, and then on the left-hand side of the page, if I want to see other search articles, moving from a search mode to a read mode to a what else is out there mode. And now I open up that accordion on the left, and I can see that search is one of the available topics. So I can click on that topic and now all of their articles about search. And I found this to just be an extremely useful interaction, where the site and the search engine worked well together to support search, the nav and the content reading. Here's another example I like. I was buying a hole saw. You can see as I start typing it gives me examples. I was able to click on the completion hole saw, and see what they had. And in particular, I could further filter, and we'll talk about this more in the next video, to just the things that were in store. And then one thing that I really like about this user interface is that it actually showed me which aisle and bay the hole saw was in. I think a lot of the interesting stuff right now is things that blends the physical and digital world in all sorts of ways. Often what ends up in the news is the high tech stuff, you know the glasses that you wear, or something like that. But often, what's the most useful, is the really low tech things. If I'd like to be able to do this project today, I'm gonna drive to the nearby Home Depot, I'll get the hole saw, and we will be off and running. And so I had an interaction that went from digital to physical really smoothly by a pretty darn simple user interface. Since this whole video has been about the power of search, I wanted to give a caveat that we shouldn't always assume search mastery. That many users really struggle with search and this is not just true for people who are good searchers in general, but don't know the knowledge of a domain. Often I'm looking for a something, and I don't know much about what folks in that domain call it, and it takes a while to learn the terms. People just struggle with search in general even as pervasive as it is. They don't know the search space, they have difficulty with the keyword selection and it's hard to know the difference between terms. And what we saw, in part to mitigate the difficulty of knowing what to search for, what to call it and all that, is that proactivity, when done well, can really help here. It can guide novices. It can speed experts' actions. It can convey the categories, as we saw in several of our screenshot examples, and it can encourage serendipity, like in Google Scholar, for things we wouldn't have thought of checking out. But, proactive interfaces, can be frustrating when they seem capricious. How would I ever get to that again? Why did that appear there? And it risks pollution, you got too much junk in the user interface. And I'm distracted. So, in the next video, we're gonna pick up with interaction techniques that help people slice and dice and filter and navigate when they're doing these rich information foraging tasks. Until then, happy designing.
