WEBVTT 00:00:03.120 --> 00:00:07.600 Let's see how Gmail uses various visual elements 00:00:07.600 --> 00:00:10.781 to help with grouping crucial elements. 00:00:14.373 --> 00:00:17.200 First of all, let's look at the whole Gmail window.  00:00:17.200 --> 00:00:23.280 And you notice here, instantly there's large areas of different background color. 00:00:23.280 --> 00:00:26.880 So some sections of the screen have a white background,  00:00:26.880 --> 00:00:29.840 but there are two big areas of gray background. 00:00:29.840 --> 00:00:34.080 One is the search box at the top. But the other is the message area. 00:00:34.080 --> 00:00:37.440 So obviously within Gmail, why are you using Gmail? 00:00:37.440 --> 00:00:41.360 It's about email messages. And so the email messages as an area 00:00:41.360 --> 00:00:46.080 have been given a strong color coding in order that your eye  00:00:46.080 --> 00:00:50.677 instantly knows that's separate from all of the other things around it. 00:00:50.677 --> 00:00:55.360 So that's one major difference. And background color's being used to give that functional separation  00:00:55.360 --> 00:00:59.218 between the messages and the rest of the functionality of the page.  00:00:59.520 --> 00:01:02.320 What I'm going to do now is I'll zoom into the left-hand side 00:01:02.320 --> 00:01:07.136 where you have a number of elements. Some of it's about folders and tags; some of it's about messaging. 00:01:07.136 --> 00:01:11.164 So let's look at that left-hand side. So let's zoom into it. 00:01:11.327 --> 00:01:17.280 Here the page has got various elements. It's got buttons to compose new messages, but also it's got 00:01:17.280 --> 00:01:21.600 a list of folders or tags, depending on how you think about them. 00:01:21.600 --> 00:01:25.440 And also icons and names that have to do with 00:01:25.440 --> 00:01:29.496 starting a meeting and joining a meeting. Then below that about hangouts. 00:01:30.320 --> 00:01:34.000 Crucially, for these, it's spacing. These are functional groups, 00:01:34.000 --> 00:01:38.209 but they're very clearly delineated partly through space.  00:01:39.360 --> 00:01:42.880 Interestingly enough, I think maybe if that word "meet" 00:01:42.880 --> 00:01:46.000 had been a long word, they might have needed to add 00:01:46.000 --> 00:01:49.200 additional space in order to help it separate. 00:01:49.200 --> 00:01:51.760 It might be sufficient that it doesn't have an icon. 00:01:51.760 --> 00:01:55.650 But certainly it's fairly clear that there are functional differences.  00:01:56.160 --> 00:02:00.160 However, partly that's done by spacing and by things that are similar, 00:02:00.160 --> 00:02:03.474 that look similar. You can clearly see they follow each other. 00:02:03.474 --> 00:02:08.180 But in addition, I'd like to point out that the light gray lines, in addition, 00:02:08.180 --> 00:02:12.960 using lines both to separate those functional groups on the left-hand side, 00:02:12.960 --> 00:02:18.760 but also between each mail message, because they go all the way along in a table. 00:02:19.053 --> 00:02:25.206 And that's a common story. In one sense, those lines are unnecessary. 00:02:25.206 --> 00:02:29.360 You can see where one group ends – functional group ends – and the next starts. 00:02:29.360 --> 00:02:34.400 You can, because mostly the mail messages have a long enough subject line.  00:02:34.400 --> 00:02:38.160 You don't have a big gap. You can see the line of the mail message. 00:02:38.160 --> 00:02:41.440 But the gray line just helps. And particularly for 00:02:41.440 --> 00:02:46.640 any sort of perceptual problems or if you're just acting quickly 00:02:46.640 --> 00:02:49.518 and stressed, anything that can just help you. 00:02:49.518 --> 00:02:53.520 They've been done very light[ly], so they're not making a lot of visual intrusion. 00:02:53.520 --> 00:02:58.080 They're not noisy, but they also can help you along the way.  00:02:58.080 --> 00:03:02.160 So here's a good example of ways you can be subtle  00:03:02.160 --> 00:03:06.800 about the use of grouping elements, but also very clear.