Thursday, December 4, 2008

Design Guy, Episode 35, Proximity and Alignment

Download Episode 35

Design Guy here, welcome to the show. This is the program that explores timeless principles of design and explains them simply.

Today, we'll bring an end to this exploration of the principles of perception, also known as the Gestalt rules by discussing Proximity and Alignment.

Now there's more to Gestalt than what we've covered in this series, but I trust this has given you a foothold on the topic. But let's get right to it.

Proximity

Proximity is something we understand intuitively. It requires no explanation when we see it. If we're at a party, we'll see certain kinds of people around us. Some will be standing by themselves with drinks in their hands, looking around. Others will congregate in groups of two or three or five or six, and we "get it." Those that are standing close together form a group. Even when they stop talking and interacting, we still see them as a group by virtue of their proximity.

Or think of high school. There were groups of jocks. Groups of freaks. There were loners. Maybe there were gangs when you went to school. And we perceive these persons, we comprehend these individual elements, if you will, based on their relationships and context. They are either separate and individual, or they're perceived as part of a group. And it's just like our compositions.

If we have a more or less even distribution of shapes or elements, they all tend to stand alone. They're not in proximity to anything in particular. But when we bring elements together as a cluster or collective or group, we view them as a new thing. Something bigger.

And this helps us comprehend our environment. Complicated clusters of elements get simplified in our minds as one thing. They are that group or cluster, and this frees our minds from having to deal with them as individual units to be inventoried in our brain individually. You can mentally batch process the whole lot of them.

This is important to understand in our designs. If we don't use proximity to our advantage, then our audience has to mentally sort through all that we put before them. On the other hand, when we put like things together, as a logical group, we've put convenient handles on them. Now all those things are glanceable. You can take them all in at once.

Some examples. Think of web pages. Often we see various tiers of navigation. One group of links relate to global navigation, links like "home" or "about us" or "contact us". Another set of links might be grouped according to related product categories, like at Amazon, where they group "movies, music, and games" as one link, as opposed to another labeled "apparel, shoes $ jewelry". It's this grouping that enable us to cope with all the information. It gives it logic and order and hierarchy. We can put convenient cognitive handles on a bunch of stuff at once.
There's many more examples that I'm sure you can come up with on your own because proximity is so intuitive. The trick is to think logically as you order groups of elements in your compositions. You're really using it as a strategy to streamline your audience's comprehension of what you've set before them.

And, finally, I want to touch on Alignment today. Although I'll probably go into it in more detail at a later date.

Alignment is simply the technique of organizing elements by lining them up. When we look at a page, we don't see visible lines, but we do notice that headline, and subhead, and bodycopy and related image are usually on the same vertical axis. At least this is usually the case. Or there are enough elements lined up on that invisible vertical line for us to sense their relatedness.

Or we may see shapes that organized according to a central axis. We might call them center justified. Or the left edges all line up. (This is also called ragged right). Or it's the right edges that all line up (and this is alternatively called ragged left.) The difference among these examples is edge alignment versus center alignment. And all of us have at least some experience with this in this because we've played with those justification buttons in programs like Microsoft Word.

Earlier still, we might have been the kid who always had the toys scattered randomly on the floor. It was hard to see the relationship among our hotwheels or star wars action figures as a result.

On the other hand, we might have been the kid who neatly lined up the toys on our shelves. Our Smurf figures looked orderly and related. They were aligned AND grouped in proximity to one another, and it probably made all the difference to Mom.

Well, that's it for today. This one ran a little longer than usual, but then I've been away for a little while, for which I apologize, so I thought I'd cover a just bit more.

Well, let me remind you that today's transcript may be found at designguyshow.blogspot.com. Music is by kcentricity.com. Well, I thank you again for tuning in and I hope you'll join us next time.

6 comments:

big_smile said...

Excellent podcast as usual! However, have you ever thought about doing the podcast in a video format? It would be a lot easier to explain some of the concepts if you had visual to illustrate your points.

Design Guy said...

Thank you for your kind words and for being a listener...

Yes, it can be a challenge to discuss visual things in an aural format.

While audio is a valid way to convey principles and analogies (I try to speak visually to conjure the image I have in mind), there are times when a screen-cast, video, or image would be helpful, because a picture is worth a thousand words. Once in a while, I've recommended Googling for images of a concept, like figure-ground.

Ultimately, my target audience is the "listening" crowd, people who (like myself) tend to want to take stuff to listen to on their player and learn while they're doing things. But I try "speak visually" to help this style of learning.

Anyway, great point which I'll give more thought to.

Age said...

Thank you Anthony. I'm an uneducated creative type; the kind who just sort of does it but doesn't know the technical terms etc.

I've been listening to your podcasts for the last few months and they've been really insightful.

I've downloaded all the past podcats that I've missed and am working my way through them nicely. :)

Thanks again!

Kris S said...

New listener here, same question as big_smile. Something to think about... If the content was a little longer say (20-30 min) with strong supporting visuals ie screen cast of principles in practice. I would most certainly be willing to part with a few bucks for each one. Check out peepcode.com, I buy all of his screencast. And would love to have something similar for design.

Design Guy said...

Kris,

That's a great idea. I've considered adopting a model like that or like Lynda.com, another screencast learning site.

I'll give it serious thought, thanks.

aaron e said...

I really love your podcast that one was excellent, audio and visual is very good you described it in such a wonderful tone. Lynda.com is a very good site to visit, I have downloaded a couple of episodes and I am really getting into your podcasts thanks.