7 Ways Your Website Breaks The Law of Proximity

  • April 23rd 2014
  • by Marvin Russell
7 Ways Your Website Breaks The Law of Proximity

Humans have an innate desire to want to group objects we see in the world together. This makes the information far easier to process and understand. Therefore, when website content is visually grouped for us, it becomes much easier to process and understand. The Law of Proximity (one of Gestalt Laws of Grouping) states that humans perceive objects that are closer together as related objects. The reasoning is that the human brain would rather process fewer sets of objects rather than a much larger number of individual objects. Therefore, abiding by the Law of Proximity on your website will allow your visitors to more easily process and understand your information. This will most certainly leads to a better user experience, more conversions, and more sales.

The Real World Example

Let’s look at your phone number. Why do we show your phone number in three groups (312-265-0192), rather than one long number (3122650192). The Law of proximity has a lot to do with it. By creating three groups of numbers our brain can process the information much easier than one large group. The same can be said for many other numbers used in your life, such as your social security number or your EIN number.

Web Design Law of Proximity

7 Ways Your Site Breaks The Law of Proximity:

1. Headings

I can’t stand when sub-headings on blog posts are right in the middle of the space above and below the content. It’s so confusing and throws me off every time I see it.

I do a lot of research online, and something I occasionally search for are the best WordPress themes for different industries. The most common search results are blog posts that list the best WordPress themes. Many of these blog posts have the same problems. The subtitle of the theme and the “Free Demo” button is spaced exactly between the above and below content and I end up clicking on the wrong demo all the time. I’d say it happens about 50% of the time.

download (1)

The solution is to add larger top margins on your headings and smaller bottom margins. In fact, your should triple the space on top of your headings compared to the space below them. In other words, if you have 5 pixels of space below your headings, then have 15 pixels of space above them. Problem solved.

headings

2. Line Height

Line-height is the amount of space between each line of text in your content. There is nothing more frustrating than trying to read content online that has too little line-height. According to the Law of Proximity, because your lines of text are so close together it makes it harder for humans to read and process.

The solution is to add more space between the lines of text in the content of your website. You can easily do that in your CSS by adding line-height to all of your text. For all of my body content, I take the font size and add 11 to get the proper line-height. So, if my font size is 14px, my line height would be 25px. That formula only works for body text.

Line Height

3. Letter Spacing

Must like line-height, letter spacing can make text hard to process and hard to read. Text with to much letter spacing spreads the letters out in words making it more difficult for us humans to process, and therefore, breaks the Law of Proximity.

The solution is to add letter spacing to the text styles in your CSS. I most commonly see this problem in headings that use thin fonts. So, don’t be afraid to add letter spacing of -1px or -2px.

letter-spacing

4. E-commerce Forms

The checkout process is becoming a science. With the amount of money lost due to high drop-off rates at checkout, every detail counts. By better grouping things during the checkout process, you make it much easier for you visitors to process the information you are asking of them. This of course will lead to lower drop-off rates and more sales.

The solution is to group required information together in the checkout process using white spacing and section headers. See below how Godaddy Groups the required checkout information so the process seems easier to the user.

checkout

5. Content

There is nothing worse than seeing a sea of text that goes on and on down the page, while trying to learn more about a company, service or product. Your visitors will see long paragraphs of text as one giant object and skip right over them.

A solution to this is using the zig-zag effect. The zig-zag effect allows your visitors to more easily process and understand the information small groups of information as they scroll down and scan the page.

Incorrect content

 

Correct

6. Images

According to the laws of visual hierarchy, the images on your site are the first things that your visitors will see. So it’s important to group images closely to their related content, making it easier for visitors to understand and process the image and related content easier.

The solution is to either A.) space related images closer to content, or B.) try to always wrap content around images. See my example below.

incorrect-pic

correct-pic

7. White space

For some reason, clients and some “web designers” got it in their head that white space is bad. White space is good, very good. It helps separate objects into groups, making it easier for your visitors to process. A common problem I see is too little white space between groups, creating confusion in the eyes of the user.

The solution is to add enough white space where it become apparent that there are two or more groups, rather than one.

Correct

incorrect-whitespace

Conclusion

Web design is a science. You can’t master it in a week. It takes years of experience to get good at it. But don’t just study web design, study age old marketing principles and see how you can apply them to web design.

  • alma.jackson.1994

    I currently get paid around 6-8 thousand dollars /every month for freelancing at home. Anyone prepared to work easy computer-based task for 2-5 h each day from your house and get valuable benefit for doing it… Then this invitation is for you… http://fave.co/2bocRGL

  • marilyn.smith

    Get 90 dollars each day for working on the net from your home for few h each day… Get paid regularly every week… All you need is a laptop, internet connection, as well as some free time… http://korta.nu/NDe

  • mary.riddle.91

    Get $90 /day for working online from comfort of your own home for few hours a day… Get paid regularly on a weekly basis… All what is required is a pc, connection to the web, as well as a little free-time… http://ow.ly/n1nP303oO1A

  • lawson.miriam

    Acquire $90 /daily for working an online job from your own home for few h each day… Get paid once a week… Everything you need is a pc, connection to the internet, and a little spare time… http://ow.ly/n1nP303oO1A

  • susan.skinner.93

    1 yr have passed since I finally left my last job and I never felt this good… I started doing work over internet, for a company I discovered online, for a few hours each day, and I earn much more than i did on my office job… Pay-check i got for last month was for 9k dollars… Great thing about it is that now i have more free time with my family…
    http://korta.nu/MDe

  • henrietta_reed

    one year ago I finally resigned from my old work and I never felt this good… I started working over internet, over a site I stumbled upon over internet, few hrs a day, and my income now is much bigger then it was on my office work… My last month paycheck was for 9 thousand dollars… Superb thing about it is the more time i got with my family… http://korta.nu/MDe

  • april.clay.91

    One year ago I finally resigned from my office job and I am so happy now… I started freelancing on-line, over a site I found over internet, for several hrs each day, and I profit now much more than i did on my old job… Last pay-check i got was for Nine thousand dollars… Great thing about this is the more free time i got with my kids… http://secure38.com

  • lottie.warford

    One year ago I resigned from my last work and I never felt this good… I started doing a job at home, over a site I stumbled upon over internet, few hrs every day, and I profit now much more than i did on my old work… My last month paycheck was for 9000 dollars… Superb thing about it is the more time i got for my loved ones…
    http://chilp.it/8d93f4b