Navigation

10 Tips to Create a More Usable Web

Usability, Web Design | Jun 4, 2009

Whether it’s your portfolio, a blog, a marketing web site, or a collection of games, we all want to attract visitors to our website and to ensure that they have a pleasant experience.

Usability measures the level of a user’s experience and can be characterized by how easily a given task can be completed; whether it’s done with prior knowledge, or by having the user learn a new way to interact. I think Jakob Nielson probably explained it best when he said:

“Usability is a quality attribute that assesses how easy user interfaces are to use. The word “usability” also refers to methods for improving ease–of–use during the design process.”

In this article I hope to give you some form of a usability checklist, covering topics from form design to simple navigation tips that you can apply to any Web project.

 

1. Creating active navigation

Letting the user know what section of the site they’re in, or what category they’re navigating through can be give a huge usability boost to any site. Active navigation is one of those usability concepts that are almost automatic at this point. And we all have our own way of creating it.

The ideal situation for creating active navigation is to do it server-side, because it massively cuts down on the amount of HTML and CSS needed. If generating an active state server-side isn’t an option, manipulating your body element to style each navigation element directly is also a fine choice.

As a third option, you can easily create active navigation with JavaScript.

Your active navigation state should always be different from your hover state.

active and hover navigation example

 

2. Clickable labels & buttons

When you take the time to mark up a form properly a user can click a label to activate the associated form element and there’s a really easy way to show it off. This is a great piece of functionality built right into HTML. Unfortunately, very few users know about this natural gem of user interface.

Letting the user know a label is clickable only takes a line or two of CSS (depending on how you write it) to change the cursor from the default text insert to a more clickable and friendly pointer.

form label with hover effect

 

By now everyone’s well aware that submit buttons are clickable. I’ve always thought it was weird that this – obviously clickable – element doesn’t use the same cursor as a link. So I like to apply this bit of CSS to buttons as well:

label, button, input[type="submit"]{cursor:pointer;}

 

3. Linking your logo

Not linking a logo to your site’s home page is one of the more frustrating things I’ve come across on the Web. I can’t understand why someone wouldn’t so this. It’s so easy, and by now, it’s safe to say, users expect it.

Linking your logo is so common nowadays that many sites are finding that having a link labeled “Home” isn’t useful anymore, as users are just clicking the logo to navigate to the home page.

Sites such as Facebook, track user clicks by adding the “ref” parameter to each navigational element. Below is an example of how Facebook links their logo:

facebook

 

 

4. Increasing the hit area on a link

About a year ago, Ryan Singer from 37Signals wrote an article about how they padded link targets for better mousing in Basecamp. This is another small usability trick that you can use by simply adding some padding around links to make the clickable area larger.

This is a great addition to any site and it can help prevent misclicking on a link, which can often be a little frustrating. It also helps a lot in mobile Web design, where users click with their fingers and really need that extra large hit area on a link.

iphone

 

5. Adding focus to form fields

Applying focus to a form field is a growing trend in UI design. It lets the user know that what they just did caused something to happen (did that make sense?). It’s a quick and easy way to pass useful, unobtrusive information onto the user. Saying something like: “Hey! You just clicked here.” Can be very useful.

a focused form element

 

6. Providing a useful 404 page

Making the user feel comfortable is very important and displaying a big Apache error message on the screen isn’t the best way to accomplish that. A useful 404 page can go a long way and it doesn’t have to contain the numbers “4” or “0”, as they aren’t very helpful to anyone other than the developer. Besides this, no one really needs to know the error code for anything that happens behind the scenes. Users just want a site to work the way they expect it to.

On the off chance a user does find themself on a “Page not found”, it’s much more helpful to lead them somewhere where they might be able to locate the information they’re looking for, by providing some apologetic text, a search box, or suggest some possible destinations. But try not to put the blame on the user for landing on a wrong URL.

Blogussion wrote a great article about creating an informative 404 page that lists some very good tips and even some code for those WordPress users among us.

404 error

 

7. Using language to create a casual environment

Writing on the Web is a big topic right now. It’s like we’re going down some giant checklist dealing with issues: HTML, CSS, progressive enhancement, accessibility, writing for the Web, and the all encompassing “Web standards”.

We’re hearing a lot about writing on the Web and it seems to keep changing. From the days of Steve Krug telling us to cut our content in half to using bulleted lists wherever possible.

Now we’re all supposed to write like we’re talking to a friend and it all goes back to making the user feel like they’re in a comfortable environment. When you keep the copy on your site casual, it makes a user feel less stressed, so even when they do encounter something confusing they can still feel a sense of relaxation and informality as they search for their answer.

couch

 

8. Applying line height for readability

Line height is one of the things that can be directly inherited from physical media, such as books and newspapers. These sources have been around for hundreds of years and have had plenty of time to master readability and line height. So the next time you’re stuck on this, don’t be afraid to crack open a textbook and check it out.

This is an aspect of Web design that can be easily overlooked and easily abused. I usually start off with a line height of about 1.4em and adjust it from there, based on the design and content.

example of line height

 

9. Utilizing white space to group elements

Grouping items together is one of the easiest ways to show association. You can do it with images, borders, or just plain old white space. Using white space to group elements creates natural associations between related elements that, even when read at a glance, can be easily picked up by the user.

As the eye scans a page, a user will naturally read the headings first. This happens a lot with top 10 lists (::ahem::). Hopefully, the content is interesting enough to grab some attention and entice the user to read a little more closely. You push users in the right direction by designing your content in a way so that things that are related actually look like they’re related.

whitespace

 

10. Being accessible

By being accessible, I don’t mean Section 508 and ADA compliance. Accessibility, in this case, means being there for your users when they have a problem (responsiveness).

If usability is all about trying to make sure your users don’t get frustrated and leave, responsiveness is your last line of defense against losing that user to one of the millions of competitors who are a short click away.

Ultimately, you can do all the testing that you want and follow all of the usability advice that you can get your hands on, but everybody is different. Users will get confused and lost and eventually need some help. The amount of time you leave a user confused can be the difference between someone who will come back and someone who won’t.

When talking about accessibility, many people default to a conversation about the visually impaired, but accessibility extends far beyond that. For example, you have to make your web site accessible to users with bandwidth restrictions (dial-up connections, cell service, slow networks) and older browsers (some companies won’t let employees upgrade browsers).

If we do our best to make our sites as accessible as possible and respond quickly to questions we can create an overall experience that will leave the user constantly wanting more.

Customer service matters… even on a blog.


Written exclusively for WDD by Tim Wright, web designer/developer and blogger. You can find more of his writing at CSSKarma or follow Tim on Twitter.

Do you follow all these principles on your websites? How can we create a better and more usable web? We’d love to hear your comments…


Share this post
Comments (no login required)
  • http://designwithcrackers.blogspot.com/ Thiago Cavalcanti

    And the eleventh is:

    Make sure your JavaScript is unobtrusive and don’t use it when there’s a more fool-proof way of accomplishing what you want!

    Active navigation through JS is a very bad idea, other than that, this article is wonderful, congratulations!

    • Michael

      What do you mean with unobtrusive?

      and about the article,

      And navigation through JS?? I don’t understand that, why you would like to use that. You can do it easily differently. And somebody can have javascript disabled and than it would work. It is better to generate that serverside and if you dont use a server side program to just add it in html.

      The rest of the article is wonderful. Specially i like the 6th point Providing a useful 404 page. This is very important and it looks very unprofessional to see an error or just an ugly page. And this is so easy to make as well. Just adding a 404.html will do in most cases. Also love the increase the hit area on the link trick and adding focus on form fields.

      Maybe an other good tip. Add good error messages on the form fields with a good description so the user wont get frustrated and knows exactly what to do. And if there is an error occurred don’t reload the page with empty form fields.

      Maybe another tip will be, add ajax to your forms so it wont reload the page every time. And make sure that you will reload the page when the user has disabled javascript.

  • http://www.myhtmlworld.com Sunil

    Useful article

  • http://lars-hilse.de/ Lars Hilse

    Definitely some good tips – sorry to see that hardly any of those ever get incorporated. Not even in bigger, corporate web presentations which could easily afford it.

  • http://www.webdesignbooth.com Dicky

    Great tips! These are the things that we always neglect when designing templates.

  • http://www.rsstudioat.blogspot.com ryan s

    “This happens a lot with top 10 lists (::ahem::).”

    haha. That explains it then! Anyway great article again. I’ll incorporate some of these in my web projects. Thanks!

  • http://www.borat-bruno.com Bruno

    Helpful things.. Gonna try some of them

  • http://www.sportlogoday.com Igor

    Good tips. Thanks Tim and Walter!

  • Spence

    There’s some good ideas here, but I really think that for some of these, you really need to go to school to learn design. Otherwise you’ll apply something like step 9 everywhere, but there are so many other possibilities for grouping and creating hierarchy.

  • http://briancray.com Brian Cray

    Usability FTW! Good tips, and one blog entry certainly can’t cover them all :)

  • http://www.crearedesign.co.uk Adam

    Most of those tips are already in our web standards including recently the 404 page. I normally put a list of the main pages on the website along with text saying: “you may be looking for one of these pages”

  • http://designerdwelling.co.cc/ Caleb Stewart

    Very useful, along with all of your posts!

    These should be a tremendous help for the launch of my new website.

    Once again, thanks!

  • http://p163.sg/blog Dinu

    Also I would add: have a working search function on the site

    @Lars Agree with you. it’s amazing how the big corporates get even the simplest things wrong. There’s not that much of a cost in implementing this list. Should be basic stuff for any competent developer.

  • http://www.raymondselda.com/ Raymond Selda

    Nice and simple tips here. This could be my preliminary usability checklist. Thank you for this.

  • Brian Sanders

    Great article! I’ll be passing it around the office, Thanks Tim!

  • http://www.codesignweb.com Mike Gensel

    Nice article with some very useful information. I would also like to add that outside links should be made to open a new window/tab instead of in the current window. I browse so many blogs that mention sites that I would like to take a quick look at then return but I click on it and am removed from the article that I was trying to read. Personally it’s very agitating. (hint to webdesignerdepot.com…. lol).

    • http://jason.karns.name Jason Karns

      I disagree entirely with this outside link suggestion. Your browser has the ability to open links in new windows/tabs per the user’s preference. Forcing *ALL* users to get links in a new tab is ludicrous. Leave them all set to open in the current window. Let the user decide how they open. (Most browsers: simply middle-click to get a new tab.)

      • Ksenia Smith

        I agree with Mike. It depends on a site, but blogs definitely need that by default. When I’m reading my friends’ post ribbon, I don’t want to navigate away from that page. And right-clicking to drop-down “open in… etc.” menu each time is very annoying.

  • Mike Diego

    Great list. I still can’t believe it when I click on a site logo and it does not link to the home page. Very frustrating.

  • http://www.SelectCeremony.com/barmitzvah Bar Mitzvah Photographer

    Good Stuff.

  • http://graphicleftovers.com/recent/ Daniel Errante

    I agree with Thiago – You should design your site without any javascript first, then add javascript as a bonus. A lot of users still browse with javascript turned off (I don’t know why), so relying on javascript for navigation or other accessibility is a no no.

    • http://www.csskarma.com Tim Wright

      That’s why it’s option #3 ;)

  • http://www.5starweddingdirectory.com/community 5starweddings

    Very useful especially the line height issues. I see many sites not using the tips mentioned.

    Thanks

  • http://lessfussdesign.com Andy

    Some good tips here. My only issue would be on Point 2 – clickable labels & buttons. The pointer cursor denotes links and actions that will take the user off somewhere or alter state (i.e. with javascript slideshows, carousels etc.), and I’m not convinced it’s appropriate for field labels, as all that’s happening is that focus is going to the field. 5 though (adding focus to fields) is a really useful usability enhancement that can be achieved with a small amount of CSS.

    And how nice it is to see someone recognising that accessibility is more than the needs of the disabled or visually impaired and – more importantly – goes beyond the checkbox lists of Section 508 or WCAG.

  • http://purplenerdz.com Victoria

    Very useful article. some of these I didn’t even know about. I am new though so there’s my excuse. Definitely going to bookmark on Delicious.

    Thanx

  • http://www.armeda.com Dre

    On point 3, if you don’t have an obvious way of telling a user that your logo is linked to home (like you do here at WDD), it is still good to have a regular home link. I do both, link the logo and offer a home link on my main nav and footer nav.

    Cheers,
    Dre

  • http://diegoripley.com Diego Ripley

    Haha, I definitely need to work on my 404 page, it’s not useful at all.

    http://diegoripley.com/misc/images/404.png

  • http://labs.dariux.com Dario Gutierrez

    Definitely good tips. I’am agree with Diego my 404 page is a mess!

  • Vanderson

    Good job

  • http://j-town.co.il Charlie Kalech

    Nic collection of hints – thanks!

    Use this from Google to make a more useful 404 page

    http://googlewebmastercentral.blogspot.com/2008/08/make-your-404-pages-more-useful.html

  • http://www.csskarma.com Tim Wright

    Thanks for all the feedback everyone, I really appreciate the comments!

  • http://farinspace.com Dimas

    Great tips.

    I think looking to the desktop for user usability tips is key, always try to NOT reinvent UI concepts, keeping things simple and straightforward helps users quickly grasp and use your sites.

    Additionally, I think is always good to not “fight against the river, but go with the flow” … and by that I mean: the web is a medium that takes on all kinds of shapes and sizes, your designs/structures should never be too restrictive but should flow. Text/content is king, let it flow freely.

  • http://sergibosch.com sergi

    “increase the hit area” — love it! great idea.

  • http://www.quizzpot.com Crysfel

    Thanks for the tips!! very important and useful

  • http://warren.morgans.cc/blog Warren

    Some good tips and info in there, ways to make a site and the functionality within it much more user friendly and aware. For us, we found that (No 3) was not a big thing for users, certainly in the tech world we know to click the logo, but for a University with Future (potential) and Current Students our research showed most didn’t recognise that the logo was a place to click to return home.
    In our situation we have a range of sub-sites and sub-webs hosted on various platforms and places, if all users worked this way it would be great to go back to our main site/page through the logo but only 20% of our surveyed users tried it. The solution is to ensure other methods are also available, a Home button in the task based navigation is often a preferred one.
    Thanks for some good tips.

  • http://www.thecssgallerylist.com Klayemore

    Point 1 makes sense, but using Javascript to handle hover effects is terrible. This can be done much easier and cleaner with CSS.

  • http://www.kliky.net Ed @ Kliky

    3. Linking your logo

    My how far we’ve come! Thanks for the reminder (or heads up) for those who don’t do follow this practice.

  • http://www.normansblog.de Norman

    yeah good old line-height, used alot in our company. its better than using display:block +height all the time.

    anyway, good points especially the one about the 404 page, which should always include a search form in my opinion.

  • http://www.greennet.com.au Ben

    Great read, dissapointing to know that “linking your logo” and “click able labels” aren’t standard practice these days.

  • http://www.visual-blade.com Daquan Wright

    Wonderful and insightful article, usability is a bit topic, especially if you value your user base. Change little details here and there, eventually you’ll get there. Great tips basic or not, overall.

  • http://www.creativetomato.com Hasanah

    Thanks! This is enlightening. I’ve already forwarded this article to the rest of my office. Will definitely come back here the next time a web design job comes in. ;)

  • http://19fdesign.com zoel

    prefect! ;-) nice share , I think colors and typography site is too! ;-)

  • http://www.webmasterdubai.com Farooq

    really nice article good tips.

  • http://www.csskarma.com Tim Wright

    Hey, I’m really glad so many people are finding the article so useful!

    In response to the the JavaScript navigational comments:
    It’s not the best solution (that’s why I ranked it number 3), but if all your other options have been exhausted, it’s better than nothing.

    On a related note, if you can do your active navigation server-side you can also add in some accessibility with a title attribute of “you are here”. Just another little usability/accessibility add on for your site :)

  • http://www.atlanticbt.com Eileen Allen

    Great article. But one small omission. It’s important to understanding the client variable. We need to design not for what the client wants, but what they need. Usability and site goals go hand in hand.

  • VertigoSFX

    This is a great article. Lots of stuff in there that can help me out as a designer in training (I guess we’re all always in training, but i’m still not up to speed on all the behind the scenes programming aspects).

    Will definitely delicious this one.

  • http://www.webair.it/siti-web-bologna.html Realizzazione Siti Web Bologna

    Very interesting the 9 Utilizing white space to group elements. Usually the padding can helps to do it…

  • http://www.trmez.com Osama Pro

    Very interesting . Thank you .
    Sometimes we need to change our site and do some tips..

  • http://nonsofar Viggo Andersen

    Thanks, very helpful, also for a n00b that just started outling his project. ^^

  • http://www.metropoliscreative.com Howard Davidson

    Good points! Further to the discussion, see: Avoid Website Embarrassment –
    http://www.metropoliscreative.com/2009/06/avoid-website-embarrasment.html and add your comments!

  • http://www.branditsolutions.com enterprise resource planning

    The benefit of a search engine friendly website is it has a greater chance of getting sales. Good website structure makes people spends more time on your site and the more vital it turn out to be useful in their mind, the better chances that they will purchase your product or services. The endeavor of every website ought to earn good volume of traffic and will convert visitors into potential traders is a good quality ecommerce website design,a touch of enterprise resource planning and continual application development.

  • Upender

    good article

  • http://jim.com Jim

    Definately, a useful article

  • http://www.juanuuu.com.ar Juanu

    Great! :D

  • http://www.oxidizzy.com oxidizzy

    Helpful things.. thanks so much!!!

  • http://www.dostuffright.com Beau

    Great tips! Especially number 4. I thought you might be interested in a recent study which analyzed many of the elements of some of the most popular websites around. I’m sure they know what they’re doing when it comes to usability!

  • http://thesocalledme.net Jenny

    Hey, just stopping by from stumble. Great post. :) I’ll be back to read more of your updates. You seem to have a very interesting bloggy.

  • http://www.cheapwebhostingseller.com Hosting boy

    Inspiring tips about web creation.

  • http://ccpmultimedia.com Connor Crosby

    This is very helpful, thank you very much! I am just getting started and redesigning my site soon so this can be helpful when making my new site! THANKS SO MUCH!

  • http://www.vsemvsem.net/ Vis

    prefect! nice share , I think colors and typography site is too!

  • http://www.jsxtech.com Jaspal Singh

    Great article, Thanks for sharing.

  • http://www.ontariohighwaytrafficticket.com traffic ticket

    Excellent work. I like the form focus view one.

    Thanks for the tips!

  • http://mazyoyo.co.cc mengembalikanjatidiribangsa

    Great tips! Thanks for sharing.

  • http://www.accretewebsolutions.ca/ S Emerson

    Clickable labels & buttons – bet not many people know that.

    Linking your logo – Yes, some designs don’t do that, which is annoying when they don’t have a Home link available. Think having both a clickable logo and a Home link is better for usability.

    Increasing the hit area on a link – Excellent point!

    Adding focus to form fields – Like to add: include default instruction in the input box. It can disappear on focus.

    Providing a useful 404 page – Yes this is important! It’s amazing how many sites the designer forgot to do a custom 404 page at all.

  • http://www.nazukadesigncenter.com nazuka

    nice tips, thx a lot…

  • http://www.traffiq.com/planning media planning

    These are all great tips, but don’t forget to advertise your website too.

  • http://beben-koben.blogspot.com/ BEBEN

    thanks for the tips….and frindliness owner a web that a important too. ^_^

  • mohammed

    great post, thx very much i’m about to start developping a new website and i have to say that this was really helpful thx again.

  • http://bowdenweb.com/ J.Albert

    nice post! i would have to add to #1 that it can be done entirely with css, via :link, :active, :hover and :visited. and even :visited:hover!
    but nicely done!

  • http://twitter.com/_kidmann Mucio R Kidmann

    Simple care and paying attention to details produces high quality results.
    great!

  • http://www.testing-web-sites.co.uk Tom Batey

    All good advice – simple and straightforward stuff but unfortunately not followed often enough.

  • http://www.mentescirakoglu.com mentes

    I really like it thanks for sharing

  • Jeetendra

    active navigation with JavaScript is a bad idea. better to use css hover and css selected class the the select menu. Else a good article.

  • http://theweddingvine.com theweddingvine

    Great advice here – we see lots of issues with websites that are easily fixable. We’ll point our wedding suppliers here if they need useful advice :-)

  • http://www.kaplang.com/blog Kaplang

    great post with some really useful tips, thank you

  • http://toweb.ro toweb

    Focus to form field I consider one important tip, but not so sure about the white space to group elements.

    Thanks for the post!

  • http://car-insurance-estimate-1.com car insurance estimator

    Again great post, I will certainly use your tip about the 404 page.

    Thanks

  • http://www.lytecube.com/lyterad Girish

    Excellent tips, I see so much content and graphic based sites being created unaware of even half of these tips. I think you should do a follow up of this article with the latest web 2 or 3.0 sites that are cropping up.

  • http://www.webdesignerideas.com Web Design Ideas

    Really great post. A lot of useful points that you regularly see overlooked in a lot of web designs. Stylesheet switchers is another useful technique to add to allow users to customise pages to suit their own particular needs.

  • Jason Morton

    This was a good post.

  • http://chrisjamero.carbonmade.com Chris J.

    I commissioned a website before and my very first. I did do #1 and #5 and most of it I concentrated on visual. This is very informative and very helpful I’ll be keeping mind on these tips.

  • http://www.winnipegreflections.com rickzwebz

    Nice list. To many designers are either too lazy to use them or don’t know any better. The more we learn the better our web pages will be. Thanks

  • http://www.tiesandcufflinkstore.com Ties

    Thanks for the insight, a few things I’d never considered before.

  • Ges

    Great tips!, i just have one question in number 9, i get the point but in the image you have there the text is justified, (i am not a designer that’s why im asking), isnt better to have it aligned to the left?, just like the image in number 8?, I read something about how justify text is overused, i dont mean to critic just want to clear that out.

    Again good post.