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).
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.
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.
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.
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
Leave a Reply to Lana Williams Cancel reply