Case Study: How does Gmail use Grouping?

Let's see how Gmail uses various visual elements to help with grouping crucial elements. First of all, let's look at the whole Gmail window.  And you notice here, instantly there's large areas of different background color. So some sections of the screen have a white background,  but there are two big areas of gray background. One is the search box at the top. But the other is the message area.

So obviously within Gmail, why are you using Gmail? It's about email messages. And so the email messages as an area have been given a strong color coding in order that your eye  instantly knows that's separate from all of the other things around it. So that's one major difference. And background color's being used to give that functional separation  between the messages and the rest of the functionality of the page.  What I'm going to do now is I'll zoom into the left-hand side

where you have a number of elements. Some of it's about folders and tags; some of it's about messaging. So let's look at that left-hand side. So let's zoom into it. Here the page has got various elements. It's got buttons to compose new messages, but also it's got a list of folders or tags, depending on how you think about them. And also icons and names that have to do with starting a meeting and joining a meeting. Then below that about hangouts. Crucially, for these, it's spacing. These are functional groups,

but they're very clearly delineated partly through space.  Interestingly enough, I think maybe if that word "meet" had been a long word, they might have needed to add additional space in order to help it separate. It might be sufficient that it doesn't have an icon. But certainly it's fairly clear that there are functional differences.  However, partly that's done by spacing and by things that are similar,

that look similar. You can clearly see they follow each other. But in addition, I'd like to point out that the light gray lines, in addition, using lines both to separate those functional groups on the left-hand side, but also between each mail message, because they go all the way along in a table. And that's a common story. In one sense, those lines are unnecessary. You can see where one group ends – functional group ends – and the next starts. You can, because mostly the mail messages have a long enough subject line. 

You don't have a big gap. You can see the line of the mail message. But the gray line just helps. And particularly for any sort of perceptual problems or if you're just acting quickly and stressed, anything that can just help you. They've been done very light[ly], so they're not making a lot of visual intrusion. They're not noisy, but they also can help you along the way.  So here's a good example of ways you can be subtle 

about the use of grouping elements, but also very clear.