The Golden Rule of Website Interface Design

Wed, Mar 4, 2009

Web Design / Usability

I sometimes find myself in the position of having to answer a question like “what is the main thing to remember about designing commercial websites?” It’s a great question. A business mentor I once had used to say that he always tried to take one thing away from every interaction he had; with people, with media, on the sportsfield, whatever. He figured that so long as he could focus on learning one thing every time he had the opportunity to, it wouldn’t be long before he knew a whole BUNCH of stuff (and anyway, he said his memory was terrible and he figured it was better to end up knowing something than trying fruitlessly to remember everything and ending up with a head full of nothing). So in honor of his memory, here is the one thing you MUST know about website interface design:

DON’T MAKE ME THINK.”

Now that’s not going to be hard to remember, is it? But just before you pack up, put away your browser, and go home all smug and self-satisfied, cheerfully sated by that delicious morsel of information, allow me to elaborate a little.

“Don’t Make Me Think” can make a strong case for being  the ultimate principle of website design, indeed for being the ultimate principle of design with regard to the creation of just about anything you actually want people to use. But what exactly does it mean?

Well, what it means is that when you look at something its purpose should be obvious. Clear. Unmistakably self-evident. You should be able to just “grok it” without having to consciously expend energy thinking.

And just how obvious? Well, obvious enough that your elderly grandmother who doesn’t know a mouse from a small furry mammal that eats cheese and hates cats can point to it and say “Oh, it’s a *WHATEVER THE THING IS*. Peachy.”

Now, seeing as we’re talking about website design, let’s look at some of the concrete, specific ways in which designers often fail to prevent us from thinking. And let’s try to profit from their mistakes.

Webpage is too busy.
Your webpage is lit up like a christmas tree in December, and your surfer has no idea where to start. A good strategy for dealing with this all-too-common visual clutter is to bury non-essential links a level or two down.

We don’t know what we can click on.
Important links that don’t look like links, buttons that don’t look like buttons, underlined text that isn’t linked, non-underlined text that is linked, linked images that don’t look link-y, the list is endless. You might say “So what? I put the mouse over it and BOOM it turns to a hand – it’s a link!”

The thing is, every time someone encounters something on your site that puts a question mark over their head they are being distracted from the task at hand–namely buying your product/service and making you money. Underlining link text  is a very popular web convention, and it’s worth adhering to for that reason alone, for all that CSS makes it easy to not do.

We’re not sure what the navigation is.
A common mistake is to make multiple links on a page that look like navigation, but are actually links to other sites, or non-navigational links within the site itself, or to duplicate navigation along the top and sides of the page. Don’t do it.

Things have clever/cute/technical/marketing-induced names.
Sometimes you can’t avoid these, but where you can’t avoid them it can’t hurt to use subtitles to make their meaning clear. On a related note, if there are article or post-type features on your website, try to use headlines that are clear and explanatory guides to the content in the articles, rather than trying to be clever and cute. Not only will you save your readers from having to think, it’s a good move for Search Engine Optimization reasons as well.

Confusing search options.
Most websites have a search feature. If your site has one, try not to force your user to make a lot of choices before being able to use it. I’m talking about things like “search type’ dropdowns, category selection, radio boxes, etc. If you want to have those kinds of search options available to your readers it’s a better idea to farm them out to an “advanced search” form. Just let Joe Average punch in a search term and click GO. Make some sensible (possibly contextual) assumptions about how he wants the query to be processed .

Having given you a few examples of what not to do, I’m now going to take a little time  to make the case for why you shouldn’t do them.

  • The competition is always just a single click away. Frustrate your users and they’ll head somewhere else.
  • Using a site that doesn’t force you to think about unimportant things feels effortless. Puzzling over things that don’t matter saps your energy, enthusiasm, and time.
  • People tend not to read web pages, they skim them. For them to work, they have to do their thing with minimal eye-time. The best way to do this is to create pages that are self-evident.

And one final point. Sometimes you aren’t going to be able to make something obvious, for any number of reasons which lie outside your control.  If you really can’t make something obvious or self evident, make it self-explanatory. A self-explanatory page will require your surfer to think a little–but only a little. Make sure the appearance of your web page elements, their carefully-chosen labels/names, your page layout and all associated text works together to make recognition swift and easy.

Well, that’s it for today. My next post will be on how to use your website to capture email addresses. See you later!

, , , , , , , , ,

29 Responses to “The Golden Rule of Website Interface Design”

  1. Thomas Petty Says:

    I love this book “Don’t Make Me Think”. I recommend that anyone who has anything to do with Web sites, read it. I just recommended it to my class on Thursday.

    One of the biggest mistakes people make is that what they want people isn’t obvious. It’s called “affordance”. If your button doesn’t look like a button, how are they going to figure it out? Lead them by the hand and make it easy for them to figure it out.

    Clever is fun, but if no one can figure it out, you’re losing money.

    Thanks for the article.

    Reply

  2. Melody Says:

    When I used to make sites I would follow the guidelines from webpagesthatsuck.com..lol which are very similar to these, what people don’t realize is that easily agitating a reader can cause a swift click of the right corner “x” box at a moments notice..

    Reply

  3. Mogul Says:

    Yeah Melody. With the web, the reader is always in charge. You should always have it in the back of your mind when designing that the reader is probably going to leave as soon as you stop giving her what she wants.

    Reply

  4. Michael Says:

    Hey thanks for the useful post. I read the book “Don’t Make Me Think” and I enjoyed it immensely! I love it when people post based on books I have read, it refreshes my memory and gets me psyched about it all over again!

    One of the things webmasters just don’t think about is making a user-friendly site, for us it’s always been how nice or clever it looks. How wrong we are sometimes!

    Hey thanks for a great post today admin, someone tweeted about the post on twitter and I will do the same :)

    Michael’s last blog post..Almost New Design | FBI

    Reply

  5. pacman flash Says:

    Great post, just wanted to know if you have any more information on this topic?

    Reply

  6. Web Design And Development Says:

    Nice post….thanks for sharing

    Reply

  7. web hosting reviews Says:

    I enjoyed reading your blog.
    Very good information.
    Nice post.

    Reply

  8. Top Webmaster Forum Says:

    I would love to write and say what a great job you did on this, as you have put a lot of work into it.

    Reply

  9. Top Webmaster Forums Says:

    LOVE your site, will visit again :) Submitted this post to Google News Reader.

    Reply

  10. KrisBelucci Says:

    Great post! Just wanted to let you know you have a new subscriber- me!

    Reply

  11. Pagerank Checker Says:

    Finally someone who can write a good blog ! . This is the kind of information that is useful to those want to increase their SERP’s. I loved your post and will be telling others about it. Subscribing to your RSS feed now. Thanks

    Reply

  12. Amelia Says:

    Great entry here. The “Don’t let me think” simply says it all when designing web interface. Your posts are all taken. Great job man!

    Reply

  13. Nseires Says:

    I get used to explaining to my clients that thay don’t need to put all of their company’s info on their website. This has been a very good informative input.

    Reply

  14. George Says:

    Very interesting… thanks.

    Reply

  15. Ho Chan Says:

    Your webpage is lit up like a christmas tree in December, and your surfer has no idea where to start. A good strategy for dealing with this all-too-common visual clutter is to bury non-essential links a level or two down.

    Love this! Haha! Avoid non-essential designs.

    Reply

  16. Dell Says:

    I find it too hard to visit websites with so much inputs on it. It lacks my interest.

    Reply

  17. Marichu Says:

    I agree with Dell. I leave right away once I found out website is busy.

    Reply

  18. Alma Says:

    Very useful post. I definitely agree with everything posted.

    Reply

  19. Sisterette Says:

    The don’t make me think statement says it all already! Get your design all in order and clean, from the design to coding. Make sure that it also works in all browsers.

    Reply

  20. Jai ho Says:

    Get it clean and user friendly. Fancy designs are considered plus points!

    Reply

  21. Ching Ya Says:

    Very well shared rules and I have to agree with most of them. As I always believed that first impression counts. To step in a site that’s easy to navigate and less complicated will be a big help. Sometimes simple is more. Stumbled!

    @wchingya
    Social/Blogging Tracker
    .-= Ching Ya´s last blog ..WCHINGYA.COM Is Now A Do Follow Blog (Free Images)! =-.

    Reply

  22. Anne Says:

    believe me I am trying my best to follow your tips everyday to develop my website
    We are currently working on new interface (new menu mainly), hope it will help. it is exciting to put yourself in users and make it as simple as possible!

    thanks for your post anyway! it is always good to remind it!

    Reply

  23. Surfacer Says:

    When website is too busy, I close it right away. It’s important for me to surf sites that are cluterred free.

    Reply

  24. James - Web Designer Philippines Says:

    “Don’t Make Me Think”

    This is a great way to summarized on how to make a user friendly web design interface. Great article!

    More power.

    James
    .-= James – Web Designer Philippines´s last blog ..Adobe Security Advisory for Illustrator CS4 and CS3 =-.

    Reply

  25. Heather Sanford Says:

    I got the book “Don’t Make Me Think” for one of my classes. It really shows how simplicity is the key. The book is easy to read and has great pictures and examples.

    Reply

  26. make cash fast Says:

    1. Make a bunch of accounts and just spam youtube. It has so many damn videos on it your spam probably won’t make a dent.

    Reply

  27. admin Says:

    How exciting for you.

    Reply

Leave a Reply