low-angle photograph of high-rise buildings

100 Things You Should Know About People: #28 — Things that are close together seem to belong together

by

Posted

Do you want a quick and easy way to make any web page easier to use and more intuitive? If you want people to realize that two things “belong” together, then put them near each other (close proximity), and put other things a little further away. Sounds simple, right?  Many usability and user experience principles are complicated and may take significant time and energy to accomplish. This is one of the easier ones!

Let’s take a look at some web sites for examples:

In the image below of the Crutchfield page, there is a gray arrow that ends up being very close to the text on the left that says, “connect with a true audiovideo specialist”. Because that arrow is so close to the text (and actually appears to “point” to the text), the text and pictures “belong” together and become connected (as they should).

picture of Crutchfield web site

At the Global Giving website, the amount of space between text and pictures that are supposed to “go together” is about the same as the amount of space between items. This makes it less clear what text goes with what picture.

Picture of Global Giving website

In the MSNBC website the spacing between headers and photos are all even. It is not clear at a glance what headline goes with what photo.

Picture of MSNBC website

And in this last example, the picture is very close to the headline that says, “Obama takes responsibility for airline security” that you think the photo goes with that headline. But it doesn’t.

Picture of LA Times home page

Take-aways –

  • If you want items, whether, pictures, photos, headings, or text, to be seen as belonging together, then put them in close proximity.
  • Before you use lines and boxes to separate or group items together, try experimenting with the amount of space first, then decide whether you still need lines or boxes. Sometimes all you need is to change the spacing and then the line or box may not be necessary, thereby reducing the “visual noise” of the page.
  • Put more space between items that don’t go together and less space between items that do. This sounds like common sense, but you will see that many web page layouts ignore this idea.

Do you have any good or bad examples to share of the proximity principle?

——————————————————————-

Did you find this post interesting? If you did, please consider doing one or more of the following:

add your comment
subscribe to the blog via RSS or email
sign up for the Brain Lady newsletter
share this post

Comments

3 responses to “100 Things You Should Know About People: #28 — Things that are close together seem to belong together”

  1. Leon Avatar

    Thanks for the examples. An obvious one would be headers; the bottom margin should be less than the top, which ties the heading to the following content.

    Andy Rutledge has written some excellent stuff on these ‘basic’ principles:

    http://www.andyrutledge.com/gestalt-principles-3.php
    .-= Leon´s last blog ..An aside really isn’t a sidebar =-.

  2. Lana Williams Avatar

    Thank you for the hints! I’m writing a research paper on visual design and create my own web-site, so it might be helpful.

  3. Akula Shashi Avatar
    Akula Shashi

    Hi Susan, after reading your post I think it will always “Depends” on the situation. I am talking in reference to the Losangeles Times screenshot may be they trying to show the most cirtical information above the “fold”. and Crutchfield page “Meet a few Crutchfield Advisor’s” Widget is not space properly, I see all uneven space between both ends of this group. I am just trying to say what i am thinking and seeing.

    thanks
    shashi

Leave a Reply to Lana Williams Cancel reply

Your email address will not be published. Required fields are marked *