Web 2.0 Blog

Similarity in accessibility design is concerned with how a user perceives objects in a group that are alike, are related in context. For example, the diagram below would be perceived as alternating columns of circles and squares, rather than rows of alternating squares and circles:

The same laws can be applied to web design. When creating interfaces for websites, the use of similarity can make individual elements on a page more accessible by grouping them based on their sharing of the same features.

For example, the website Blogotion separates its content with similarity. The links across the top sharing a blue container are clearly grouped and are reminiscent of a navigational structure. Down the right hand side, rounded squares full of colour and large text are designed to attract the readers attention before anything else and would be initially perceived as not part of the main content, but other areas of interest. Their design is also not dissimilar to how web ads are displayed.

Speaking of which, the ads on the left hand side also share a similar format, particularly the conventional ’tile+URL+description’ formulae which Google ads have become well known for.

Furthermore, the main content of this website’s homepage is arranged in the middle of the page and uses small icons which are all slightly different to highlight characteristics of each category. This is also an attempt to differentiate the list from the Google Ads, as it would look very similar without.

In a likewise manner, the grouping of similar links in this site’s navigation makes it easy to differentiate links that will take us to more in-depth content, and basic web pages that are not content-driven. The website Sigmapi Systems groups industry sectors into blue boxes with icons to illustrate the industry, while the more standard web pages are linked with white boxes and no icon. This clear division of web navigation makes it easier to distinguish what pages are considered more important to the user.

These are two simple examples of how similarity can be effective in web design but there are many more examples which have varying levels of usefulness. Please leave a comment if you have anything to say on this matter.

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.