Welcome back, everybody. In the next few lectures, we're going to be covering a set of generally useful design principles and patterns. Now those of you who've taken one of the earlier courses in this specialization will remember, we've talked about some other design principles early on, specifically from the design of everyday things, where we talked about things like visibility, feedback, mappings, constraints. Over the next few lectures though, we're going to focus on some principles that are more narrowly directed to graphical user interfaces, specifically their layout, their organization and the flow of interaction through these interfaces. Again, the goal is to define pleasing and usable interfaces. But these principles alone are no substitute for user research. They're another way to create good interfaces. So what I want to do next is just go through a few examples to give you a flavor of the kinds of issues you'll learn to pay attention to over these next few lectures. And the way I think of it is I'm going to help you go from a point where you can say, look, I know it when I see it. That is, I can tell this looks good, I can tell this looks bad, to saying, I know why it looks good or bad. I'll always do it this way, and I'lll never do it that way. I'll avoid these problems, I'll put in these good things. So let's start looking at a few examples. So I'm going to show you mostly some images from some well known websites. Here's an image from Amazon.com. And when I look at this, without even paying close attention to the content, one thing I notice right away is a clean layout. Things are organized well. Things are grouped in a way that makes sense. Things that belong together are close together. There's a separation between different chunks of information. Things are aligned nicely. A restrained use of colors, there's not anything sort of screaming out at me. So, a bunch of those properties, alignment, organization, use of colors, is quite good here. Here's another image from Amazon.com. I think all the same observations that I made before apply. One additional point I would make is there's sort of a natural flow for my eyes to follow and for my task to follow. On the left side of this screen there's a picture of a phone. In the middle there's information, detailed information about the phone. And on the right side there's actually information about purchasing the phone. So you can think of this as supporting me in a very common type of decision process. I might look and see, well, what is the device? What does it look like? I can get some information about it. And then if I'm interested in it, I can click to actually begin the process of purchasing it. And so, it make sense because information, this layout make sense because information, we're used to dealing with the information flowing from left to right and from top down. Now of course, that's not a universal of biological life that information has to flow from left to right and top down. And just to remind you of that, here's the site for, the Groupon site for Israel. And here the information flows from right to left. So on the right, we see information about the product. And on the left side, we actually see a button that lets you begin the process of buying it. And this helps us remember that some properties that we think of as universal actually are cultural specific. Not just things like which direction writing goes in. But things like what images or what icons would you use to represent a concept like sending a message or disposing, throwing away a document? What colors would you use to indicate a warning, and so on. These are all things that have cultural specific meanings and we'll make sure that we cover those in some more detail. Here's a site for Delta.com the airline. Couple things to point out. Again, always good organization, good layout, nice use of colors, nice use of images as a background. And then the other thing I wanted to point out is when I went to this website, the interaction object for booking a trip is open by default. And that actually eases my task because they have sort of modeled that the most common people will do if they come to this site is to book a trip. And so that particular option is made very easy. So my interaction flow is going to be easier. Here's a couple images from some Android apps by Google, the Google Drive and the Google Calendar app. And the things that I notice when I look at this is there's consistent use of fonts. And although it's kind of hard to tell in this screen shot because these windows were a little bit different size, all the Google apps use consistent icons where it makes sense. Icon sizes are consistent. Where they're laid out are consistent. Different interface elements, if they're present will be in the same place. And so there's lots of things that make it easy for me to transfer knowledge from one application to another. Now here's another Android app that I use. It's the Nova Launcher app. And we touched on this theme before but I thought that this was really an effective use of putting together related information, and then using separation to separate different chunks of information, a good use of that. Now I'm going to go and have us look at a few designs that aren't quite as good. This actually is a site for a Siamese cat breeder, very good breeder, perhaps not such a good web developer. I look at this, the use of colors, not so good. And furthermore, there's a bunch of text over in sort of the lower mid-right part of the screen. It's centered. Typically, centering text doesn't work as well as aligning it left. Here's an extremely busy e-commerce site. And there's lots of things that if you look at this you'll say hey, I don't think is so good. Inconsistent use of colors and fonts. Grouping is very strange. Alignment is very strange. Pictures are all over. So, a lot of things going on here that make it hard to process. And a sort of similar site, I look at this site, I see Information is very dense. There's no separation. I can't really tell what's going on. So again, the layout, the organization is not conducive to ease of use. So that gave you a flavor of what you'll learn over the next few lectures. You will learn a set of graphical and interaction design principles. And by following them, you will be able to create attractive and useable designs. And I want to emphasize, what that means is you'll create designs that look good, that people probably would find easy to use. But what you will not do by following these principles alone is create designs that people want to use, that meet actual needs. To do that, you need user research. We'll also be covering interaction patterns, which are sort of higher level groupings of layout and of interaction flow that embody good patterns of how people want to use systems. And many of these principles and patterns are embodied in platform specific guidelines and tool kits like those that come from Apple or Google. And so we'll be covering some of those as well. Well that's it for our overview for our introduction to design principles and patterns. That's it until next time.
