Web 2.0 Blog

As a web developer I use the Internet a lot as you might expect and I also have to fill out a lot of forms. Form building should be a University course on its own, but I’d like to relay some guidelines for button usability as a lot of people are making some basic mistakes.

1. Appearance

If you’re going to be using an actual button on your site for any purpose, make it actually look like one and it will greatly improve your chances of the user clicking on it. It all goes back to the basics of affordances. A chair affords sitting, a ladder affords climbing and a button affords pressing (or clicking). Therefore make it look 3D and get some colour in there to make it stand out - this will also prevent users from accidentally clicking on it. The button used in the example below looks real and tempting to click onto.

2. Terminology

All buttons should have words on them and it should communicate to the user in a simple way what is going to happen when it is clicked upon. If the button sends an email it should perhaps read ’send’, or if it is going to complete an online shopping transaction it might read ‘confirm purchase’. Also don’t use too much text, it should be three or four words maximum. The user should be able to safely predict what will happen when the button is pressed based on what it says. In the example below, using the word ’search’ to submit a callback form is very misleading and inappropriate.

Futhermore, don’t use negative words such as ‘no’ or ‘decline’ to proceed, as often users will just skim the text and click ‘yes’ as that would appear to be the button used to get though the process. The example below is an example of how this can mislead users and cause errors.

3. Feedback

As with many interactive elements on a webpage, giving feedback to the user lets them know they’re doing something to the object by manipulating it in some way. With buttons you can use rollovers and animations to alter the appearance of the button object when it is hovered over or pressed and this gives instant feedback to the user that something is happening.

4. Positioning & Visibility

Particularly important with forms, the button that will submit the information that the user has entered should be placed at the end of the form as this is the natural progression. Also, ensure that the button is contained within the form field and not outside, else the user may think it is a separate entity on the page. For example on Box.com, although the button is clearly visible it is not within the ‘boxed-off’ area of the form.

5. Damage Limitation

Clicking buttons can often have effects that cannot be reversed. It is useful to have message to confirm an action after the button has been clicked in case it was clicked by accident and if this isn’t appropriate then back buttons should be made available. Also, try not to position buttons that have opposite effects too close to each other and definitely don’t make them look to similar if they are. On eBay, you’re given a ‘last chance’ before you bid as you may have clicked it by accident. In this example I like the way it gives a very foolproof description about what will happen after clicking the button - you know you’ve reached the end of the process.

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.