Knowledge work is characterized by a massive amount of information. For the knowledge worker, whether it's a business consultant or a home decorator or anybody who is trying to acquire a new body of information. You have way more knowledge out there. A lot more facts and things that you can do than there is time. You can't explore it all exhaustively, and that's even more true every year as the amount of information that's available and generated gets larger. And a lot of the problems that we're trying to solve are, in a sense, wicked problems, that as you learn about what you're trying to solve, you change the problem that you wanna do a little bit. If you think about it from somebody arranging furniture, as you learn about what fits and what doesn't, and what's possible, and what's fabricated, and what you could do yourself, and what's easy, and what's hard, you change the shape of the problem a little bit. Similarly for the business consultant. As you learn about all the information that's out there, you might change the questions that you're asking. In fact, this insight is a lot of what this specialization is about. That design is about problem finding at least as much as it is about problem solving. What we're gonna explore in this video here, is user interface techniques that can help manage that information overload, help you sort through that information quickly, find what's relevant, and get a sense of the space. The key to all of this is an idea from the great cognitive scientist, Herb Simon's view of what's called satisficing. Let's say there's a bunch of different solutions out there. It's kind of an over simplification. Some are better than others, some are good, some are bad. I'm going to draw this in 2D. Real informational challenges are much more high dimensional. So this one we're gonna call that a bad solution. This a local optima, this is pretty good, and the best solution overall is up here. It's the peak of that. Now, if you just get to wander around from a local vantage point it can be hard to know how well you're doing. And if you had to exhaustively search the entire earth to figure out that this was your global optima, well that could take more time than you're willing to spend. If you wanted to find an outdoor heater for a deck, there's a lot of them made in the world. Do you want to search through every single one and create all the alternatives and trade offs to find the optimal by whatever that means for you? Takes too long. So what people do instead, what Herb figured out, is that we satisfice, that you poke around, poke around, poke around, poke around, and when you find a solution that's good enough, you say that's good enough and we're done. And so you're simultaneously bounding. We say it's not very good. It's below here. That's unacceptable. But if it's above here, this is good enough. This is a very computational view of human decision making in action, and in the real world, the objective function here, which I'm drawing as one axis, is often multiple different axes. So for our heater, we might have questions like, how expensive is it? How good looking is it? How easy to ship is it? How much space will it take up? How much power will it use? What's its environmental footprint? How easy is it to operate? You can ask things like can I make it myself? If I spend ten bucks on an old dishwasher bin, maybe that's something I could use as a fire pit, or I could buy something and that might be more expensive, or I could get a used one off Craigslist, so many opportunities. You can't explore them all, you satisfice. And because the amount of information is so large, when I'm wandering around this space, I'm exploring it. Time is limited, so the time that I spend exploring is time that I can't spend, in this case, sitting on the deck enjoying the heater. So there's a tension between the amount of time that you have available to wander around and explore the space with the time that you'd have to utilize the information you find. As any designer knows, if you pick a bad idea and spend all your time implementing, yYou've spent all your time exploiting but you didn't explore to find something worth doing. On the other hand if you're a start up, and you spend all of your time exploring things that you could do and none of your runway exploiting a particular choice, well that's got it's own set of problems. And so in real knowledge work you have to balance the time that you spend exploring with the time that you spend exploiting. The power of user interface design is that we can augment human intellect. What this means, with respect to our information foragers here, is that we can change the rate at which people can explore and intuit the space. Metaphorically, without the power of computation, you have to be like the ant and walk around at ground level. What computing can do is it can give you an airplane that you can use to survey the land from a higher level, and get a sense of what the space looks like. Recently, I was curious about when during the year the tide is highest at sunset. It's fun to go down to the beach when the tide is high. What day during the year has the highest tide at sunset? So I turned to a tide table that I use regularly and it lists the tides for each day. If you want to know for a particular day this works pretty well. But for a information task like when over the year is the tide highest at sunset, that's actually really hard to get out of this representation. You need to scroll through every line individually and take a look at where it is relative to the sunset and interpolate. It's difficult. This is a classic example of a textual representation of data. Now to be sure, they will show you the graphical representation for an individual day at a time. But to aggregate that over the years is a lot more difficult. A few weeks later, I saw this calendar lying on my friend Rich's desk. He's a contractor and also a surfer, and so both the calendar and the tides figure pretty prominently in his life. What I like about this calendar is that it illustrates the power of visualization to enable people to ask and answer questions that might not have been ones that the designers themselves ever thought of. So for example, for my, when is the tide highest at sunset, that's not an exact computation that you can do here. But what it lets you do is, I can eyeball by knowing that, that six o'clock time is approximately sunset. I can skim pretty quickly in two minutes, you can pick out a few days where the tide is particularly high at sunset, and go from there. Visualizations are an airplane that lets you survey the space quickly, and be able to have particularly salient elements pop out. Sometimes even pre-attentively. Then you can go down and look at these in more detail. Here's a nice example of a visualization for weather where the temperatures are shown relative to the particular locations that they're at. Here's an example of restaurant reviews that are anchored on map data and here we can see is that you can ask questions either by neighborhood or by other features, and by integrating these two representations you get a lot more power then you would out of either one alone. So what the tide lines chart did is it made it possible to zoom out, to raise our field of view. Our next example for helping the information creatures that we are understand things better, is called breadcrumbs. Now, we've talked about knowledge workers being informavores. We eat information like foragers search for food and the bread crumbs technique continues this analogy. You may have heard about Hansel and Gretel who went for a hike in the woods, and as they hiked they left bits of bread behind them so that they could return and follow the trail that they came in on. User interfaces can have breadcrumbs also. What we see along the top row of this Amazon system here, we've searched for guidebooks in California, is that it shows us the categories that we're in. So we get the travel books and the particular region and then it dives all the way down. What's nice about these bread crumbs is that if I get to a particular guide book that I like, I can click on the bread crumb at the top and pop back up a level and find what are other guide books for this region, what are different kinds of books about California or even pop back up further still. I'm really partial to examples as being important for lots of kinds of creative knowledge work. And so a user interface that let's you go from a particular example to a class and other instances of that same class, I think, is really powerful. So if visualizations and bread crumbs help us zoom out, let's look a little bit at how you might zoom in. So you found a travel guide. You're gonna visit California. You know when the tide is gonna be high at sunset. Well, you might be out in the afternoon before that and you're gonna need a sun hat. So you hop on eBay and you type hat into eBay, and there's 8,000,063 of them. Or actually on this particular day, 2,313,000 of them. You don't want to scroll through all 2,313,000 on your own. So we're gonna turn to a user interface technique called facets to help make this easier. So if we click on men's hat, one thing that eBay does is there are different attributes that hats have. They can be of a different style. They can be of a different color. They can be of a different brand. What I like about this user interface is that the selection techniques for each of the different facet styles is dependent on the content that it's expressing. So with color, for example, we get to pick all sorts of different colors, including muti-color. And those are shown with swatches. So pretty quickly, kind of pre-attentively, you could find the color that you like and click on that. And just like with bread crumbs, you can go back and forth quickly. So I can click blue hats and if what I get is not what I like, I can pop back out and go back in somewhere else. I'm getting a sense of the space. With style, there may be a limited number of styles, so it's gonna list them all, and I can check the ones that I like. Now, with brand, there appear to be lots of different brands of hat, too many to just put in a drop down list. So here what we get is the ability to type in a brand that we might be looking for, and the list will interactively filter or validate based on that brand. So here we've seen that there are several ways to do a select one from many user interface, and that the particular widgets that we're gonna use are gonna depend both on the content, a color is something that we might express differently than things that are better shown texturally. And also that the widgets we're gonna choose are gonna depend on the number. Here's another font I like, the Brackets text editor, and one thing that I like using, color for verification, is that if I type a Hex code into brackets, it will show me the color that, that represents. This is nice to fix bugs. If you think you typed in something and it comes back and it's not what you expected, well that's a nice interactive feature right there. Color, obviously, has a natural color for being able to be the thing that you click on. I wanted to give you just one more example of how you can have a facet selection technique other than just text. This is an example that comes from Amazon, where if you want to select different screw head types. You want a pan head screw, or a truss head screw, or a flat head screw. You can click on little different icons, and in fact, in many cases where you're trying to drill down through facets, then they use an example of that category, so if you're not entirely sure what a fedora hat is or a Panama hat is or a baseball hat. Well we can show you an example of one of those and that helps give you a preview of what's down that category. From the vantage point of our wandering ant on this hill, those previews are powerful because it gives you a sense of if you were to hike over here, you will see things like this. The preview can't tell you all the fedoras that eBay has available at any point in time, but it can give you a sense of what you might find. The facets that we've seen so far are single axis. You look at the color separately from the style, separately form the brand, separately from the size. This website, Hitmonk, combines several of these, maybe pessimistically, into what they call an agony index. And so here we see the search results, the sorting, happening based on a combination of factors including travel time, and how nice the plane is, and a few other things. Here's another user interface. This is from ITA for selecting flights. And what this website shows me the cheapest price for any given day. What I like about this is that sometimes you might need to travel on a particular day, other times you might be more flexible. By having a user interface gives you a preview, a lay of the land, you can see quickly what days are likely to be candidates, and you can compare the days that are inexpensive to fly against the days in your head that might work or be reasonable for your schedule. Also, many of the facets that we've looked at so far are operated discreetly. Time is one that it makes a lot of sense to operate quasi-continuously. Here's a slider in the Google flights view that let's you slide what hours are appropriate to search for the take off time or landing time for your flight. And just like you can search for time continuously with the slider, you can do the same thing with price. What I like about this ITA system is we can see how, maybe a little hard to see in the screenshot, but this price slider has ticks for particular locations where there are actually prices. This is a really cool overview of the design space because you can see there are often these gaps. And so I can learn things like, there are a lot of flights in this price range, or length range, or anything else that you can represent on an axis, and there's a lot here, and there's nothing in between. Being able to see where things aren't is often as valuable as being able to see where things are. When you have all of these ways of slicing and dicing, you can end up with an empty set pretty quickly and that's rarely useful. If you're looking for a screw, or a heater, or a flight, or a car, or a sun hat, you want to eventually be able to get to something. You probably don't want eBay to come back and say, no, there are no large, blue sun hats. What you might want it to say is, well, there's no large, blue ones, but there are small, blue ones and large, red ones. Here's a screenshot from the Volkswagen site, where pretty quickly if you fiddle with parameters, you just get to nothing. This would probably make a lot more sense if they directly showed you the close matches of things that almost fit without having to go through an extra click to be able to see those. These near misses are an important part of the search space. If I have a flight and I told it, well I'm looking for flights that take off between 9 am and 6 pm, if there's a really good direct flight that took off at 8:59, I kind of want the system to tell me that. Or if I told it, I'm looking for flights that are up to $500. If there is a flight here that was a good direct flight and it was $501, I might want it to tell me that also. I, of course, wouldn't want either of these to get bought automatically because that might be truly out of range, but, it's nice to know if there's something close. So, in this video what we've seen is a number of techniques for being able to help informavores get a sense of the landscape of what's out there. Being able to get previews of what things might be good, what's behind the corners, and what I wanted to close with is there's tremendous possibility, looking forward, in user interfaces showing us what could be possible, what doesn't exist yet, but might. Photoshop, for many years, had a user interface technique called variations. It's unfortunately not in the current version but I used it for a very long time. It's really great. What it would do is it would show you, if you were to modify the picture that you're editing, in this way, you add more red. It looks like this. Or you add more orange and it looks like this. Or you make it darker and it looks like this, or brighter, and it looks like this. And it's a great way of interacting, because you can say, that one, that one, that one, go, go, go. And by being able to see one step in the future, you can make edit's more quicker than trying to guess the parameters, add 1.3 of red or 30% of saturation or something like. And one thing that's fun about collaborating with Instagram on this specialization is that Instagram does this really well. That we show you the picture you took, I just took this of our conference area in Design Lab, and it showed me a set of filters for what things could be like if I did apply that. I'm never gonna remember, heck, or even know, exactly what the Nashville filter would do unless you show me a preview. And so user interfaces that get you one step ahead are a great way to help the knowledge worker that has to deal with too much information or think about what's creatively possible, get one step ahead themselves.
