Hey folks, welcome to the first of the videos on design principles. In this video we're going to be focusing on layout. In this video and in the next couple of videos associated with design principles we're going to be solving one high level core problem. And that core problem is once you've figured out, which pictures you need in a given a user interface panel, what information you need, which buttons in which other UI elements. How do you visualize those things in that panel, right? So you have your blank slates here. How do you take the pictures, informations, buttons, and other elements you know you need, and put them here in optimal way? What's the layout? Where to get the colors you use? And these types of things. So in all of these videos, we'll be teaching you rules of thumbs not great laws of user interfaces. This means that in some cases, especially with regard to what you find in user research, right? Remember that Dr. Turvien in the last video, and this is critically important to mention that all these principles are subservient to user research. If your user research says you need something else, you throw the principles out the window. But even absent that, these are all rules of thumb. There are exceptions to these rules. Even that don't relate to user research on a specific project. Another thing about all these principles is that we're just teaching you the tip of the iceberg. Layout for instance is something you could take probably a whole semester course on certainly color you could and so on and so forth. Cultural factors my goodness, you can do an entire PhD on those. So we're just going to teach you the tip of the iceberg, what we're going to try to teach you, one of the most valuable tips of the iceberg, right? So that when you're watching videos for ten to 15 minutes you get a lot of the value, get a good understanding of at least the gist of some of the challenges and some of the opportunities in each of these principles. Okay, so we're going to be focusing in this video on two layout principles in particular. One related to logical flow and the other associated with position. Now with logical flow, the idea is pretty simple. Assuming you're designing for people who are familiar with or from western culture. So we'll talk about cultural stuff in a couple of videos. Assuming your user population is that, you want to as Dr. Turvien was sort of introducing in the last video, lay out your user face element such that when people engage in the tasks in a given screen, their engaging those tasks from top to bottom and from left to right. So the first step in the task should be at the top left, and the later step should be further down to the bottom and further to the right. So I want to walk couple of examples, this is sort of more of explicated version of what Dr. Turvien was talking about in the introductory video. Let's say you want to go and buy this nice cellphone from Amazon, right? The first step is to search for the cellphone right at the top left. That's where the search box is. Amazon has many designers who are very familiar with these principles. The next is, okay, yeah, this is the picture of the cell phone I wanted. The cell phone looks good. Next I can read a little bit more information say the price of cell phone and then finally I can buy, right? So this is definitely, this screen can definitely form to this layer of principle. Start to the top of the task, top left and by the end of the task here at the bottom line. One thing that's fun about teaching user interface design is that very often when you're making slides, you just sort of zoom out a bit of your focus and you say, hey, you know what, PowerPoint is either conforming or not conforming to the idea that I'm trying to teach. In this case, PowerPoint definitely conforms, right? So when you're editing your slide deck, you first select the slide, and then you edit the slide, right? So the navigation is here, then the edits are here. And in in fact the top of the slide deck is at the very top right and the bottom is at the bottom. And so on and so forth, so this is also a good example, good work Microsoft. Another one comes from other group plans slack channel, which is a bunch of fun specially or group plans slack the particular channel that is fun. To me there's other research channels are totally more long term fun. This one is always search and fun the random one. But in slack where you pick the channel on the left, right? And then you can read what's been going on, right, step two, and then you can respond. So, left moving to the right in the next step. We're still at the top and then we're moving to the bottom. So again, good logical flow here. Just to give you a sense of how important following logical flow is, I taught an example from a search engine results pages, in this case those from Google would be helpful. In Google, right, we spend a lot of time looking at the top of the screen of the search results and much less time looking at the bottom of the screen and we actually noticed empirically. You can see here these black bars, this is the amount of eye focused in an eye tracking system that people spend looking at each result. And you can see here pretty clearly, right, that first result gets lots of attention. By the time you're at the bottom of the screen, you get very little. And this is I think representative of other user interfaces as well, right? And people are going to start at the top, and they are going to end at the bottom and ideally stuff is completely unnecessary or stuff that just extra information it's going to go all the way to the bottom. Think about those amazon.com pages, what is at the very bottom? The least important reviews, these types of things. Okay, logical flow I think can also be well understood by developing some counter examples. So I sort of hacked up an alternative slack interface here so you can see how this wouldn't work. Imagine if the responding to the message, the third step in the typical task on slack is at the top, you're selecting channels on the right and then your messages up here at the bottom. It's just awkward. Same deal here if I rearrange the Amazon page. Before I even know what I'm looking at, in this case, Bruce Springsteen's biography and how much it costs, Amazon's asking me to buy. This is not the order that the task logically flows in, right? So I'm having to go basically bottom up in this case, which is not familiar to western eyes, right? This is going to cause a great deal of confusion. Okay, so that's all I am going to say about logical flow. There is a lot more we could talk about but those three minutes, I probably got you about 80% of the value and it's a lot of value. And if you're familiar with trying to fuss where to put certain buttons, where to put certain user interface elements having the sort of top to bottom, left to right template can really help remove a great deal of uncertainty. Our second topic here will remove further uncertainty. And in particular, so we're talking about positioning principles here. And positioning principles are secondary, although not less important, to the logical flow of layout principles we just talked about. First thing you consider is the logical flow and then within user interface elements. So for instance, within all that information in the center of the Amazon page, right. Where the price was, description and this type of things, that's when some of these positioning principles we're going to talk about applies. There's a surprising number of cases where there really is no logical task flow, but there is a step one, step two, step three. For instance, when you're encouraging the user to explore information. And in those cases these positioning principals should take priority right there. The predominant principals you think about when laying out user interface elements. And so they sort of take away the focus from logical flow when there is no logical flow. Okay, the good news about out of positioning principles I'm going to talk about is that almost all of them, or the basic, the core ideas can all be understood by looking at maps. And so let's take a look at this world map in particular, I'm going to point out a couple of things. One, I we have the country of China here, right? And we have the country of Japan. This two countries are relatively near each other and in the context of the entire world their culture are somewhat similar, their physical geography in fact is somewhat similar, their languages are somewhat similar and so on and so forth, right? Their close by and somewhat similar. Let's pick two other countries at a random here. Let's do Kazakhstan and Kyrgyzstan, these two countries are also quite similar in the global context, they're also right near each other. United States and Canada, very similar thing, right? A lot of Sub-Saharan Africa, similar properties and so on and so forth. So the key idea here is nearby things, are more similar than things at the further away. We also see this at a much smaller scale, right, or much more local scale and within certain themes. So this is a map of election results in the United States, presidential elections from 2012. You can see that there are regional patterns here, right? California and Oregon are close together and they also have similar voting patterns. In North-East, all close together, similar voting patterns. Minnesota, Illinois, Wisconsin, Iowa close together, similar voting patterns. The Southeast same type of deal. Again, the same pattern here, right? Things that are closer together are more related more similar than things that are further apart. And in fact if we zoom in to a scale yet more local here with the same process presidential election result from 2012 you can see even more regional patterns, right? So within the California the cost very close together, more similar voting patterns. And then this whole region here close together, right, similar voting patterns. Okay, what I'm actually, there's a whole ton of examples that are all come down to this. Not sure if any of you have heard of what is known as the First Law of Geography but I love it. It's a fantastic rule of thumb. It's not actually a law, It's just a role of thumb, but it really does describe a lot of how our space is organised, right? And this first law of geography defined by Waldo Tobler in 1970, a very famous geographer. The First Law of Geography is as follows. Everything is related to everything else, but near things are more related than distant things. This is how space is structured it's how were used to, the physical world being, right? So I am in this editing studio now at the University of Minnesota. That means that in this room right, I'm going to expect a lot of editing equipment. Maybe in the next room there's going to be editing, even more editing equipment in a broader way. Things in this room, for instances a coffee mug over there, it says the University of Minnesota. I bet there a lot of other coffee mugs that says University of Minnesota as well. We expect things that are close to be similar to where we are, right? This is a fundamental principle of how we understand the space around us. So was is this mean for how we position element in users interfaces? Well, it's absolutely critical. Just as people expect things in the real world that are close to them to be similar to where they are, people expect user interface elements that are close together to be similar or related to one another, right? And this touch us back to the broader theme I was just talking about. When we design our user interfaces, we're very often applying rules that exist in the physical world that we've learned evolutionary and that we've learned growing up and we put those in our user interface. It matches expectations and it makes for a better user experience. So let's walk through some examples here. This is the Ribbon in the Windows version of Word. And what do you know, if you look at where these buttons are placed these are the types of things that you would probably didn't notice but if they were to change, right, the counterfactual you would definitely notice and I'll talk about that in a second. So bold, italics, underline, these are all underline for text what do you know. They are all right next to each other. Superscript, subscript are right next to each other. Text alignment right next to each other. And you can apply this to almost any button cluster in this ribbon, right? Imagine what would happen, this is that counterfactual here. Imagine what would happen if I took this bold and put it over here, and maybe the italics I'd put right here, right? What would happen is you would click on bold and then you say, okay, you know what? I want the next thing to be italics and you would immediately go to the bold because you're expecting italics to be similar to bold and they're by near bold. But you find, you would have to search for it all over the place and you'd finally find it here, right? This would be a violation of this principle of user interface positioning and it would create a much worst user interface in my view. You see this type of thing everywhere. [LAUGH] When putting together slides for this lecture in particular, almost every single program has good examples of people applying these principles correctly with some exceptions. So this is a Firefox preferences window that [LAUGH] I looked for. And you can see that they've successfully clustered things that are related, things that are similar next to each other. So these are things that are related to your history, these are things that are related to the location bar, and so on and so forth. Same as through for the settings in Mac OS. So you can see that keyboard, mouse, trackpad they're all next to each other. iCloud in which is their Cloud platform. The App Store are related thing to the to iCloud uses similar sign on, your Internet accounts, these are all right next to each other. I will critique this a little bit in that the vertical space is not well used as much as, I could for instance imagine more low level things down here and higher level things up here but that's not really done. There are also some I think some mistakes. So I would expect that for instance, what's a good example here. Security and Privacy might be near Parental Controls but they're far apart. So that's at least how I understand the relativeness between these settings. Because these two things are related here right, I would expect them to be near each other but their not. Now, I was looking for some examples of interfaces that don't do this all that well. And I think apple's music new interface falls into that category. This is their browse tab. So without going into details, it's a use case where applying the first law of geography and the user interface is particularly important, these people are essentially wandering around this information space. And if the information space is such that there's no real regional structure. You lose a lot of your ability to find things that you're interested in or find things close to things you're interested in and have sort of successful semi-serendipitous encounters. Without going into detail, there's actually a whole literature on that but take me for me word, this is a use case where applying the First Law of Geography in interface is particularly important. And what I have here is let's say I'm browsing for music, I want to listen to music. And all they have here is hot tracks, I don't really know what this means. Each of these songs isn't the, you can see there's some similarity between two songs that are placed next to each other, right? But not a lot as I am recalling, it's a pretty small screen here but there's a country song and a Drake song next to each other. This sort of doesn't allow me to find clusters or area's that I'm interested in so I can explore more, right? Okay, I do want to note that the first geography can be somewhat complex and that it is again a rule of thumb and not a loss, but there are cases. In the real world where things that are next to each other are very much not related. So consider for instance the US and Mexico border. Of course those two countries, are somehow related but certainly not as related as the United State and Canada. And actually within user interface design, we have a really good way of handling that. And that is to use visual indicators that separate groups of icons. And you can see this bar here is exactly one of those things. Now this is to color text, this is to align text, they're very different. They're roughly equidistant though, between the two text alignment buttons, right. But we know that we can't really trust our distance assessments here because of this bar, right. This bar essentially groups these, which are all pretty related to one another, right? These are all style text, right? And these are all sought of alignment ideas of paragraph and font. And what this bar does is effectively visually make it seem like this, they are far a part that these things are clustered together. But that bar right, it allows us to do that in sort of a functional way that fits in a user interface. So grouping is a very important consideration when considering this notion of the First Law of Geography in the positioning of user interface elements, right? I really like this sort of analogy, when you do groups in your brain, in your user's brain. They're going to see large distance between the groups, which is exactly what we want in many cases. I'll note here that there's a bit of theory that I want to talk about behind this first Law of Geography for user interface elements. I could expand on this in a great deal of detail. [LAUGH] As much as I'd like to I think it would perhaps bore you to death and we have other things to go into. But I do want to say a couple of things. One is this notion of the first law of geography applying in arbitrary contexts on computer screens, on smartphone screens, has actually been robustly tested by Dan Montello sort of Fibercom and their colleagues explicitly. And through their experience they've posited this notion of the First Law of Cognitive Geography and that's that people believe near things are more related than distant things. So we as user interface designers have to know that so we put things that are related more close together. Otherwise, it will cause a great deal of confusion. Now another thing I want to point out is this notion of putting related things close together in user interfaces is usually taught through the Gestalt psychology and in particular the Gestalt principle of proximity. What Gestalt psychology basically is, it's the notion that we as human beings try to make, try to gain a holistic understanding from individual smaller elements, right? We see a forest where there's a cluster of trees. What the Gestalt Principle Proximity says is that if we take this seemingly ungrouped series of dots, right? And we add a little space between each of these two column pairs, our brain says, I see three groups, right? This three groups are distinct and this two dots are more related than this two dots because they're in different groups, right? And so this is sort of a different way of understanding basically the same concept. Okay, so that's all I really want to say about position. You can see a couple of opportunities for further reading here. And I'll see you again in the next video on color and consistency.
