Tricks to make your site easier to use

There are lots of little tricks you can use to make your sites easy to use. Problem is that they are so obvious, you don’t think of them. This article is an attempt to share some of the ideas that I did think of. I’m sure I missed some; feel free to add your own tricks in the comments.

You rarely think of sites as “easy to use”; they just work. You enter them, click here and there, and don’t think much about how the navigation works or what to do. That’s the feeling we should go for.

Separate the interaction layer

A very simple way of making it easier for your users is clearly marking what can be interacted with. Are users expected to click on those small arrows of yours? Are the only links to your content through your headers? Then you better make sure those arrows or headers come across as clickable.

The fastest way to convey that something is clickable is using blue underlined text. Why? Because that’s what most sites use (see Google, Amazon, eBay). It’s what we have grown up with and it just works. Designers tend to dislike blue underlined links and have started to use other colors and skip the underlines. Jakob Nielsen, the notorious usability expert, writes about what you should think of in his article about the visual style of links. It’s a good reminder.

You don’t have to stop with just the links though. Are your images clickable? Then make sure they connect with your links somehow. If you pick orange as your link color, make something around or in the images use that color too. Make your form fields use the same color. When someone enters your site it should be possible to quickly get an idea of what to do: “I can either click a link in the menu, search for a phrase, or click this thumbnail”. Don’t make people confused by mixing in orange on the static parts of your site.

With some cleverness I’m sure this idea can be expanded to work even without being dependent on color. A small figure? A border? Use your imagination, and be sure to tell me about it.

Split up your content

You know those portal sites? There’s one big reason they don’t work. There’s too much content cramped into a too small area. A portal is rarely about something specific, it’s about everything that they can possibly fit in. Whatever content you are looking for you will have to search hard for it. Do you use the portal parts of Yahoo or MSN? Didn’t think so.

There has been a long discussion recently about how badly designed pages work better. Like Andy Rutledge I mostly disagree but I can understand how bad design works for ad-driven sites. Is the point of your pages to make people click ads? Then make them confused, make them think your navigation is the ads, I’m sure it drives your revenue up. If the point of your site is the content on it, stay away from being a portal.

The simplest way of avoiding the portal-look is splitting up your content. Do you have info on both crocodiles and stock numbers? Don’t put them on the same page. Make sure only the people interested in stocks get the stock info. Anyone else will just see them as “something I am not looking for”. If you have lots of info from diverse fields, perhaps a directory is a better bet?

Use for form elements

Bad form elements are one of the most annoying things on the web. Worst are those tiny little checkboxes you need to check to specify if you like to get spammed or not. They are simply too small. There is an easy solution though, that everyone should be aware of: the label element. What it does is associate some text with the checkbox. The browsers use this information by making a click on the text check the box. Note: this also works for radio buttons. Here’s the markup you need:


HTML:



CSS: [Update: This does not work in Safari, might confuse people.]
label { cursor: pointer; }

There’s a lot more to learn about how to make your forms usable and accessible. Just head over to the Web standards project’s Accessible forms tutorial (don’t miss the intermediate one either).

Make it interesting

You have a few seconds to get you visitor hooked to your site. In that time the user needs to understand he’s on the right track. “Ah, this site seems to be about web development” is what I want my users to feel when they enter Friendly Bit. Therefore almost all my pages have a little info box that tells the visitors just that. To just put this info on your front page isn’t enough, search engines or other external links can make them enter deeper into your site. Please put this little info-box somewhere on all of your sites. It’s one of the best ways for me to see I’m where I want to be.

To actually get your content interesting you need to work on your writing. My best tip is to follow the points Liz Strauss summed up nicely in her post about what a reader wants.

Read through your text over and over again, out loud if you need to. Pay attention to typography, don’t make your paragraphs too long and use headers extensively.

Conclusion

These are just some of the tricks I find myself using on my sites. I’m sure this site does not follow all of them perfectly but that doesn’t stop me from telling you about them, does it? Pick and choose as you like, but try to reach make you visitors feel that “it just works”-feeling.

Do you have any tricks you can share?

15 responses to “Tricks to make your site easier to use

  1. I am happy to see your tip about using labels, and the CSS: label { cursor: pointer; } seems like a nice idea, until you realize that it will make ALL of your labels appear clickable, which is not desirable. Remember, labels should be used for all form fields (text boxes and areas, select lists) in order to aid the disabled, as explained in the webstandards article.

  2. @sherzy: Why not make the labels of the other form elements clickable too? Clicking on a text element’s label focuses the textbox. How is that bad?

  3. Emil: That is a good point, and on my own site I may implement it. Unfortunately the designers and information architects where I work do not agree – they feel that it would confuse the user to have text and select list label appear clickable.

  4. @sherzy: Interesting. Well I guess it doesn’t matter much as long as they use the <label> tags anyway. Perhaps classing the checkboxes and radiobuttons instead? You wouldn’t want people to miss the nice feature.

    To add the cursor to only the other elements in newer browsers you can use:
    input[type="checkbox"]+label { cursor: pointer }
    …to affect only the checkboxes (Similar code for radio buttons). But of course IE (not even IE7) will support that.

  5. Hi
    I just thought I would point out that, rather ironically, you used the wrong ‘to’ in the last paragraph of the section about writing well :P. It should be replaced with ‘too’.

  6. IE7 does support that selector, although you can probably make it a bit simpler:
    input + label {...}
    …since you normally only use the label after the input for check boxes and radio buttons anyway (unless you wrap the form control inside the label).

    If you’re using <label> elements and they aren’t clickable then you’re using them incorrectly, and they will not aid assistive technologies.

    Oh, and by the way, I wouldn’t recommend changing the cursor for labels. It is the responsibility of the browser to make labels appear clickable, and changing the cursor might be confusing or annoying.

  7. When I use clickable labels for checkboxes and radio buttons (which I always do, by the way) I always put the input-element inside the label. In that way, you don’t have to use the “for” -attribute for the label to be connected to the input-element. And it also makes positioning easier as you can position the label with the checkbox or radio button inside it.
    <label><input type="checkbox"> Click me!</label>

  8. @zcorpan: Ah, good to hear about IE7. Seems better than I expected.

    If you read what sherzy said you’ll see that we only wanted to change the cursor for checkboxes and radio buttons. That was the point.

    I believe changing cursor is a good idea, it’s making it easier for the user to see that they don’t have to click that tiny checkbox. The browsers don’t support it so we have to do it ourselves.

  9. Changing the cursor to pointer for label elements sounds like a good idea at first, but there are browsers (like Safari) that do not make label elements clickable. I find it very confusing to see the cursor change to a pointer when nothing happens if I click.

    Martin: There is better browser support for the for + id attributes than for wrapping form controls in label elements. Explicitly associating form elements with their labels is also what is recommended by WCAG.

  10. @Roger Johansson: I had no idea Safari didn’t support that, I guess it should get a nice little javascript to do it instead? Good comment.

  11. @Roger Johansson: Oops, for some reason I thought that browsers supporting labels would support labels wrapping the input-element, but i was wrong: Internet Explorer (of course) don’t. However, adding the for-attribute to the wrapping label fixes this in IE.

    I do not have access to a screenreader to test the support for this method, all I have is the Fangs-plugin to Firefox, which displays all three methods (label with for, wrapping label and wrapping label with for) the same way.

    If anyone would like to try it out in a screenreader you can use this small test case

  12. label { cursor: pointer; }

    why not cursor: help and add a title attribute to the label tag

  13. While we’re being picky… Last sentence of the last paragraph of “Split up your content”. Directory is speelt rong.

    Good article though!

Comments are closed.