Welcome back, everybody. In this video, we'll talk about interaction design patterns. Well, first, what is a design pattern? A design pattern is a piece of practical wisdom of best practice for a designer. It is concrete, effective solution for a common design problem. Now, the origin of design patterns actually is not in user interfaces, it's not in software engineering or computer science, but rather in architecture. In the 1960s, Christopher Alexander, and colleagues, wrote a book called A Pattern Language. And he and his colleagues were interested in, as architects, how could you design spaces to achieve certain social goals, let's say. So, for example, if you wanted to create public spaces that would encourage people to get together, to sit with each other, to talk, and so on. How could you go about designing those spaces to encourage that? Now, that idea has been adopted to some extent within architecture, but probably to a much greater extent in software engineering. So some of you, if you're in computer science, you may be familiar with software engineering patterns. Now, a very common example is that of an iterator. I think I've given here the Wikipedia definition of an iterator, namely, an iterator is a way to provide access to the elements of an aggregate object sequentially without exposing its Its underlying representation. So that is an idea, a pattern of programming, and it is implemented under different names, in different ways, in different programming languages. Now, similarly, there are interaction design patterns. Now, we've actually got into the topic of this video. An interaction design pattern is a piece of design knowledge, tailored for a particular design problem or situation. An interaction design patterns capture both structure and behavior, so you can think of these as chunks of interaction design, if you have a certain type of problem, use this chunk as a good way to solve it. And I've given a few references here. There is a book called Designing Interfaces, Patterns for Effective Interaction Design by Jennifer Tidwell. There's an accompanying website. Another website, ui-patterns.com is a good resource. And then, although I don't think it's being updated anymore, Yahoo has a pretty nice site on some design patterns. What I'm going to do next is, give you a couple examples of patterns that capture pretty well known, pretty familiar ways of interacting. So two patterns, the Two Panel Selector, the One Window Drilldown, both of these were taking from the designing interfaces site. Both of them address the same design problem, and it should sound pretty familiar. It says, you will use these, if you have a list of items to show, and each item has interesting content associated with it. So think of, you've got a whole bunch of email messages in your inbox, and the interesting content for an email message is the text of the email message. Or you've got a list of articles, let's say perhaps search results, and each one has the contents of the article. Or you've got a list of images, and the interesting content is the image. Those are the kinds of things that you might have to display. And this is when both the Two-Panel Selector and the One-Window Drilldown are relevant. Now, you might already be thinking, but when should use one or the other? And really, it's the context that differentiates the two. How much screen space do you have available? And I'm going to give you an example of each of these and you'll see why you might prefer to use one or the other. So here we have, simply, the Windows File Explorer, I think this is from Windows 7. And on one side, on the left side, you see a list of folders or directories. And on the right side you see the contents of one of the directories. So the rich sort of set of items is my whole directory structure, and the item itself is the contents of one of those directories. And of course, you can recurse. I might actually go down the hierarchy of folders. Nonetheless, this is an example of the two panel selector. Now, on the other hand, Google Calendar, even on the web, shows instead use of the one window drill down. So here is a weekly view of my calendar with all my appointments, and if I zoom in with one of those, I'm actually going to see the details for the appointment. So one window at a time, and I drilled down to see the details of our particular appointment. Now, Google could have chosen pretty easily, since that was web based, to do a two panel selector, they did not. On the other hand, I'll also show you my inbox in Android. So, this is a list of all my emails messages in my inbox and, of course, if I click on one of those, I will then see the contents of, in this case not just that message, but the whole thread associated with that conversation. So, again, one window drilling down into the details. Now, we saw the two panels selected, the one window drilled down, those where two different design patterns, both of which could attack the same problem, and they're differentiated by, typically, how much screen space you have available. Now another pattern that's we pretty well known, and I took this from Yahoo's collection of patterns. is that of bread crumbs. The idea of breadcrumbs is that you can show, typically across the top of a page, a hierarchy of pages, and so you know you're oriented as to where you are in a site. And note, this is not just how you got there, the sequence of lengths by which you got there, for that you can use the browser's back button to go backwards. This is actually the hierarchy of the site, so another pattern. So if you want people to have a notion of where they are in a site, to stay oriented, to know where they can go back up in the site organization, use breadcrumbs. Now, patterns, these design patterns are not the whole story for design, you should use them, they'll make sense for you, and many of these looks so familiar you might think to yourself, well, I already knew that. But remember, what these are is a good way to capture these pieces of design wisdom, so that anyone can make use of them and know that this is a good solution. However, you still need lower level, more fundamental principles of good design. We've talked about these in some earlier courses, visibility, feedback, mapping, constraints, effective use of color In your interface. Good layout, good organization, consistency, and so on. You still want to use these principles as well. And any effective implementation of the pattern will make good use of these principles. So you could imagine implementing, let's say, one window drilldown, but used bad colors, bad choice of funds, poor visibility and so on. So you still, that would be a bad implementation, a bad design. So a good implementation of the pattern will make good use of fundamental design principles. The other point I want to leave you with is, that different platforms, like Android or iOS, have their own similar constructs. They may call them patterns, they may call them design guidelines or principles, but they, too, capture platform specific guidelines for good design. And that will be the subject, actually, of a later video. So that's it for our video on interaction design patterns. That's it for now, and we to see you again later.
