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

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

Tagged with: , ,
Posted in usability, vision, visual design
3 comments on “100 Things You Should Know About People: #28 — Things that are close together seem to belong together
  1. Leon says:

    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. 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 says:

    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

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

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Subscribe to the Newsletter

News & research on human behavior: Subscribe to the FREE Brain Lady newsletter.



Welcome to The Brain Lady Blog

I'm a Ph.D. psychologist and I write and videoblog about how to apply psychology and brain science research to understand how people think, work, and behave. For more information about me and about the Weinschenk Institute, check out the the Team W website.

Susan Weinschenk, Ph.D.
The "Brain Lady"

Connect

  • RSS Feed
  • Twitter
  • YouTube
  • Facebook
  • Google+

Subscribe To The Brain Lady’s YouTube Channel

Check out the NEW BrainSignal Youtube Channel

Archives

Categories

Contact Us

The Team W
Weinschenk Institute, LLC
625 N. 4th Avenue
Edgar, WI 54426
USA
info@theteamw.com

Susan
Email Susan
@thebrainlady
847.909.5946

Guthrie Weinschenk
Email Guthrie