Web 2.0 Blog

Gestalt Law of Proximity in Web Design

Including Gestalt laws of user psychology can go a long way towards ensuring that your website caters for your user’s usability needs as they navigate through it. Psychologists have determined that the brain acts in a certain way when perceiving objects on a computer screen, and knowing this can help ensure your site is more concerned about the user’s needs than your own.

In the next few days I’ll go through each gestalt law; Proximity, Similarity, Continuity and Closure, one by one to show how they can be advantageous to website design. I’ll start with proximity.

Proximity

This law refers to the observation that objects appearing close together in space or time are perceived to be together. So basically the rule should be to group related items together so that related items are seen as one cohesive group rather than a bunch of unrelated elements. The dots below should demonstrate the point.The dots in the group on the left would be considered a ‘group’ rather than being individual dots that happen to be near. The ones on the right would be considered as three lines of horizontal dots due to the larger gap between rows than the columns. We can apply this process to web design.

In the case of navigation, proximity can be used to very subtlety, but effectively, distinguish different parts of the navigation. For example, Technorati separates parts of its navigation by splitting the row of links into two groups. The group on the left allows you to search through different blog topics, whereas the group on the left allows you to browse more content-driven topics. The administration and technical sections are kept seperate altogether from the main navigation as they wouldn’t be perceived as being part of the same ‘group’.

Another website I was impressed with is Hitflip.co.uk. This is a technique I have noticed a lot of news sites do also. There’s a column of boxed areas down the left side of the page, all with headings related to different product areas. Those categories are further categorized within each box. You know exactly what type of product you’ll find when you click on these links and they’re available from the homepage. Excellent use of proximity and usability, although the fact that the user must scroll down the page to reach them reduces the impact slightly, I feel.

Sticking with Hitflip, proximity comes into play again on the site footer. The screen shot below firstly shows a ‘greyed-out’ area which usefully separates it from the main content. Despite all the links inside this grey box being ‘boxed-off’ together, we don’t interpret them to all have the same meaning, simply due to how they are arranged. Nor do we see the links as individual elements, as we can clearly see there are five columns all offering administrative and support topics of different types. The footer links are then cleverly categorized into five groups and are placed under simple headings offering varying methods of user service.

These are just a few example of proximity on the Internet offering more usable website design. If you have any other examples or comments on the ones I’ve shown, please leave a comment and let me know.