Grouping

by Zack on May 20, 2009

grouping_logo

Most software is about manipulating data. You manipulate a document in Word, an image in Photoshop, and the Internet in a web browser. Looking at all of that data in one place is too much so you must organize and group. Grouping information together helps users make connections and makes the data easier to follow.

linkedin

Grouping is most commonly thought of with input-base UI like forms and wizards. The signup form for LinkedIn groups fields with their labels using spacing and personal data with professional data using a horizontal rule. Putting these fields together helps users parse the form more easily. Filling out this form would become tedious without a separation of the data.

Grouping isn’t limited to forms and wizards. An Event Apart makes the groups on their website explicit with a dotted grid. The grouping makes it easy to follow each category of information. It guides your eye.

aneventapart

Information grouping is an amazingly powerful tool. It makes your data more manageable and that makes people more likely to read it.

Group with space

There are many mechanisms for grouping, but spacing is the richest and most powerful. It is also the hardest to use. Groups with spacing are a little subtle. You notice them more on a subconscious level. Let’s look at an example.

blogheader

This example is from the menu bar of a blog I designed recently. I wanted to show that home takes you somewhere different. I could have decorated the text by making it larger, bold, or adding a background, but that would make it stand out too much. I’m not trying to draw attention to it, just let users know it is different. Grouping the navigation items closer together and keeping the home link further apart creates the right message.

Group deliberately

In design a bad plan is better than no plan at all and grouping is no exception. Make sure every element is either part of a group or has a good reason for rebelling. Do it with a purpose.

Leave a Comment

Your Comment

Your Comment Preview

Previous post:

Next post: