Data Patterns6:23 with Nick Pettit
In addition to text, images, and videos, websites often contain sets of data. Providing the user with tools for organizing this data can help them find what they're looking for much faster.
- 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.
In addition to text, images, and videos, websites often contain sets of data. 0:00 While it could be argued that any type of media is just data, 0:06 I'm specifically referring to the type of data that might be displayed in a table 0:10 with columns and rows. 0:15 Let's take a look. 0:17 We're going to start with a table of data that contains some Treehouse 0:19 course titles, their topic, and their skill level. 0:23 However, it doesn't really matter what the data happens to be 0:28 as long as it has columns and rows like this table. 0:32 If you want to copy this table, 0:36 feel free to download the files associated with this video. 0:38 Alternatively, you can come up with your own data. 0:42 And if you're following along with Balsamiq, 0:46 I'm using the Data Grid asset to create this table. 0:49 So if you just type in data grid up here, 0:54 you can drag out a table similar to this one. 0:57 The table we're working with here is small, but imagine if this had 300 rows. 1:01 What are some ways that we might be able to find the things that we're seeking? 1:07 One way to help a user organize tabular data 1:11 is to use a pattern called sorting, or sort by column. 1:15 I'm going to add that and then explain it. 1:20 So I'm going to double click on this table, 1:23 and in front of each table header, I'm going to add and 1:28 up arrow and then the letter v for a down arrow. 1:34 And in front of topic, I will add just a v. 1:39 And then for skill level, I'll have the up arrow and the letter v. 1:45 And when I click away from here, it will add these arrows in the table header. 1:51 Sort by column typically comes in the form of these small arrows 1:59 in each table header cell that point up or down. 2:03 When the user clicks on one of the table headers, 2:08 the table sort will change to ascending or descending. 2:10 In this case, the table is already sorted alphabetically by topics, so 2:15 we can have an arrow pointing downward in the Topic column. 2:20 Next, it would be nice if the table were easier to scan. 2:26 As it stands, all the rows look pretty similar, so we can improve this by adding 2:29 alternating row colors, which is also sometimes called row striping. 2:35 This is a case where UX, UI, and visual design overlap quite a bit. 2:40 But regardless of what colors are chosen, differentiating the rows using 2:45 a contrast of color or value helps improve readability in UX. 2:50 Adding this row striping tends to make some lines and borders redundant, 2:56 so we can remove those to reduce visual friction even further. 3:01 So let's click on this table, and for 3:07 the Row Style, there are two colors in the inspector here, so 3:10 I will change one of them to this different colored gray. 3:14 And that row striping looks nice, but again, 3:19 a lot of those lines are kind of redundant now. 3:23 So let's get rid of the border around the edges of the table. 3:26 And let's just get rid of all of the lines because the change in 3:32 value makes its own line right there. 3:37 This is looking good, but again, if this table contained hundreds of rows, 3:41 it might be annoying to scroll through them all, even if you can sort by column. 3:46 To cut the actual size of the table down and look at a subset of the data, 3:50 we can use a pattern called table filtering. 3:55 I'll add this and then explain it. 3:59 So in the upper right here, I'm going to type filter, and 4:02 there is an icon for filtering. 4:06 That's a little bit large. 4:10 I'll change that to be medium. 4:12 And then let's go to Forms here and grab the ComboBox. 4:14 And this we'll change to say Topic, so 4:20 we're sorting the Topic column, or rather, filtering it. 4:24 And then we'll copy and paste that and 4:31 change this to say Skill Level. 4:35 And then finally, I want another element in Balsamiq here called a Menu, 4:40 so I'm going to click that. 4:46 And that is way more stuff than we need, so 4:49 I'm just gonna size that down and I'll get rid of all of this. 4:54 And I just want this skill level to say Beginner, 4:59 Intermediate and Advanced. 5:05 That way it looks like we're kind of clicking on this ComboBox and 5:12 revealing the options that are in this column. 5:16 So here we've added a few drop-down menus with the names of the column headers and 5:20 an icon that depicts a large number of things 5:26 becoming a smaller number of things at the bottom, almost like a funnel. 5:30 Then in each drop-down menu, we have each possible item from that column. 5:35 When a user selects one of these items, 5:41 the table will hide everything else that doesn't match. 5:44 This pattern works well when there is a limited number of possible items in 5:47 a column, such as the case with topics or skills. 5:51 However, if there's a large number of items, or if every row is unique, 5:56 like in the case of the Name column, then a filter doesn't really make sense 6:02 because it would just be the exact same list as the entire column. 6:07 As was the case with other types of patterns, 6:13 there are many more data patterns, and I recommend you check out 6:15 the resources included with the notes associated with these videos. 6:18
You need to sign up for Treehouse in order to download course files.Sign up