What Is a Design Pattern?4:30 with Nick Pettit
A problem that repeats itself in a pattern can be solved with the same design solutions.
- UI Patterns - UI Patterns is one of the most comprehensive resources for both UI patterns and behavioral patterns.
- Balsamiq Mockups - Balsamiq Mockups is the drawing tool used in these lessons. If you'd like to follow along using the same tool, download and install it. However, any other drawing tool (including pencil and paper) will work fine.
- Project Files - This is the Balsamiq Mockup file that was created during these lessons (as it appears at the end of the course). It's not necessary to download it, it's just here for your review.
[MUSIC] 0:00 Hi, I'm Nick. 0:09 When browsing the web or using a mobile device, 0:10 often you'll see the same controls and user interfaces over and over again. 0:13 When you're looking at search results, 0:19 there might be millions of results, far too many to show on one page. 0:21 So at the bottom of the page, there are some arrows and page numbers that you 0:25 can use to navigate to different pages and see the rest of the results. 0:30 This is called pagination, and it's also present when looking at listings for 0:35 online auctions, or when browsing posts on a blog. 0:40 Pagination comes up over and 0:45 over again because all of the examples I mentioned have the same problem. 0:46 There's too much information to display reasonably on one giant scrolling page. 0:52 If you did, you might overload the computer's memory. 0:58 The page might take too long to load. 1:01 Or the user would have a hard time scrolling through it all and 1:04 they could lose their spot. 1:07 So the information is split into multiple pages, and 1:09 those pages are linked together by a series of page numbers and arrows. 1:13 The reason you see this over and 1:18 over again is because the same problem occurs over and over again. 1:20 It's a problem that repeats itself in a pattern, and so 1:26 it can be solved with the same design solution. 1:29 A design pattern is a reusable solution to a common problem. 1:33 Pagination is just one example of a design pattern, and 1:38 there are many others that we'll learn about. 1:42 You may have heard the term design pattern used in other contexts. 1:45 For example, programmers use the term design pattern to describe 1:50 reusable solutions to common coding problems. 1:54 In the case of user experiences, 1:58 one could argue that there's more than one type of design pattern. 2:00 For the purposes of this course, we'll use two types of design patterns, 2:05 user interface patterns, or UI patterns for short, and persuasive patterns. 2:10 Let's take a look at UI patterns first. 2:16 UI patterns are cases where the user needs to read or input information, 2:19 and they would be better served if the information and the available 2:25 interactions had a conceptual relationship to the visual design. 2:30 Just like pages in a book, pagination is a UI pattern because it's a visual 2:35 metaphor that can be used to communicate how the information is organized. 2:40 Other examples of UI patterns are tabs, shopping carts, and calendar pickers. 2:45 These pieces form a grammar that can be used to help us understand 2:51 how we're manipulating the bits and bytes inside of the computer. 2:56 The second type of design pattern is called a persuasive pattern. 3:01 This is a little less visual because in many cases, 3:06 it's meant to silently guide the user toward a designed behavior. 3:10 For example, when you are looking at an item on Amazon.com, 3:16 they'll sometimes tell you that there is only a few more of the item left in stock. 3:21 Or they'll tell you the item is on sale. 3:26 Or they'll tell you that if you order the item within the next few hours, 3:30 you'll receive it by a certain date. 3:35 All three of these are examples of scarcity, 3:37 which is a subset of persuasive patterns that push you to perform 3:41 an action because there's limited time or limited choices. 3:46 Another example of a persuasive pattern is called sequencing. 3:51 When you're done shopping on Amazon and you go to check out, you're taken through 3:55 a process one step at a time where you type in your address, your billing 4:00 information, choose a shipping option, and then confirm your information. 4:05 Breaking down each part of the checkout process into a different page 4:10 makes the overall task of purchasing the item a bit more manageable and 4:14 easy to understand. 4:18 Just like UI patterns, there are many more persuasive patterns 4:20 intended to drive behavior, and we'll take a look at them later in this course. 4:24
You need to sign up for Treehouse in order to download course files.Sign up