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

Web Site Bloopers
100 Things You Should Know About People: #27 -- We go below the "fold"
Posted in usability, vision, visual design Tagged with: , ,
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 *

*

Connect

  • RSS Feed for Posts
  • Facebook
  • Twitter
  • Instagram
  • YouTube
  • LinkedIn

Subscribe to The Brain Lady Newsletter

Get news and research on behavioral science, brain science, and design. The FREE newsletter is created by Susan Weinschenk, "The Brain Lady".

Listen To The HumanTech Podcast

Listen and/or subscribe to our HumanTech podcast.

Ask A Question

Please email info@theteamw.com if you have any questions or comments for us at the Team W. We will be happy to help you out!

Earn A UX Certificate

You can earn a User Experience Certificate online. Check out our UX Certificate "bundle".

Online Courses

The Team W has a full curriculum of online video courses, including courses that lead to a User Experience (UX) Certificate. Check out our courses and free reports at courses.theteamw.com.

Dr. Weinschenk’s Latest Book

Categories

Follow on Feedly

Contact Us

The Team W, Inc.
625 N. 4th Avenue
Edgar, WI 54426
USA
info@theteamw.com
847.909.5946

Susan Weinschenk
Email Susan
@thebrainlady

Guthrie Weinschenk
Email Guthrie