SpyreStudios

Web-Design and Development Magazine

18 Dos and Don’ts Of Usability On The Web

by 79 Comments

Are you a web designer or do you run a website? Good, because this article is for you. If you’re designing websites for a living or running your business online, there are 18 tips in this article that you should definitely read and remember.

You can have the best visual design skills on the planet, but if you build a website that works like crap and doesn’t allow the visitor to feel comfortable going from item to item and page to page, you are missing the very core of a good website design. So in today’s article I’m going to go over some of the dos and don’ts of usability on the web.

Do utilize a grid for your website structure

Do utilize a grid for your website structure

Before you get upset and start screaming that a grid is a box for creativity, I’m not saying to ensure your entire site is boxed in. What I do want you to understand though about a grid is that it helps structure your site and keep the eye flow going for your visitor, which is key. Once you’ve got the main structure down and it’s clean – create the funky stuff you do to go around it all and incorporate everything into a killer design, but don’t forget the grid.

Do Not forget your search form

Do Not forget your search form

A lot of people will go to your site and immediately look for a search box. It’s just instinctive I guess. So, if you don’t have one, guess what happens – they leave. They’re not going to feel comfortable on a site where they don’t feel in control. The ideal spot for a search bar is somewhere towards the top of the page on the right hand side as this is where users are used to it being displayed.

Do make your navigation easy to find & readable

Do make your navigation easy to find and readable

If you’re designing a site and your navigation is supposed to take your visitor from point A to point B, why the hell would you place it in a weird spot or use images that do not generally showcase the type of links they are (ie: a house for the home page is ok, but a circle with a lightning bolt inside of it for services isn’t). Try keeping the navigation easy to read, right at the top of the site so the visitor can easily navigate through your site.

Do Not make your “contact” link in your navigation bar a mailto: link

Do Not make your contact link in your navigation bar a mailto link

A lot of people (myself included) will hover over a link and see what the bottom of our browser screen says before we click on it, especially the contact link since some people think it’s a bright idea to link this directly to your email address, causing an email program to open up. This is not a good UX practice. Create a contact page, put your email address on it and also add a contact form – your user will thank you – and will actually email you more often.

Do utilize UX Apps as much as possible for web tests

Do utilize UX Apps as much as possible for web tests

Keeping track of the various forms of data from your website is something you should definitely get a grasp on if you haven’t already. Google analytics is perfect for seeing where your visitors are coming from, what pages they’re going to and how long they’re on your site. A UX app like Crazy Egg is perfect for learning where your visitors are clicking and seeing what parts of your site are getting the most attention. You can also use a site like Feedback Army to test how users see and use your site. Learning these types of stats for your site can ensure you’re utilizing space as well as possible and making sure that you’ve got the important stuff where it needs to be.

Do Not flood your website’s sidebar with tons of widgets

Do Not flood your websites sidebar with tons of widgets

O.K. We get that you’re running a blog and there are a million widgets you can use on it – but you don’t actually need to use them all. Think of it like a bedroom. If there’s clutter everywhere and it’s not clean, that special someone you brought home might not want to stay – so tidy up and keep things organized. Your readers don’t (in most cases) need to see your google friend’s, mybloglog friends, friendfeed friends and the various other social profiles you’re a part of, so leave them alone and stick to the things that matter most for the user experience on your site.

Do make sure that your website displays well on various browsers

Do make sure that your website displays well on various browsers

We all know that IE6 is dead and no one is complaining about that, but do not forget that there is still a lot of users on IE7, IE8, Opera, Safari, Firefox, Chrome, ect. Just because your website looks good on one or two of them doesn’t mean the visitor using another browser will like that your site isn’t displaying properly. Take a couple hours, dig into the code and make sure it all works across the various browsers.

Do Not make your visitor jump through hoops to fill out a form

Do Not make your visitor jump through hoops to fill out a form

Your contact form shouldn’t be a mile long and neither should a sign up form. Keep things simple. The chances that people will turn away when they’re faced with a 20 part sign up form is far greater than if they were staring at three simple questions (name, email, comments).

Do ensure your various pages are consistent in structure

Do ensure your various pages are consistent in structure

Unless you’re a design blog and you’re structuring/designing every one of your posts different like (insert names here), you need to remember that people want familiarity when they’re viewing your site. If they feel like they’re somewhere different when they load a new page up, they’re going to click the back button – and fast.

Do Not forget a print stylesheet for those who want to print your content

Do Not forget a print stylesheet for those who want to print your content

This is especially true for blogs/content sites. If your reader wants to print off content (trust me, many still do, especially older visitors), you shouldn’t require them to print off your entire design, plus all of the comments and advertisements across the page. That’s unnecessary clutter. If you look at the print preview on this post about why better blogging equals better business for freelancers, you’ll see a clean page, black and white, no images, no comments, no sidebar. The content is what matters for printing, so make sure it stands out.

Do make sure your content is easy to scan and follow along with

Do make sure your content is easy to scan and follow along with

In general, people have short attention spans. So, by utilizing section titles (h2, h3 or h4 tags) to split your article up, you allow the visitor to scan the article quickly and see if it’s something they’re looking to read and if they’ll be able to get anything out of it. When you’re writing your content, you should also be aware of the size of each paragraph as users will tend to get tired of scanning 20+ lines in a paragraph. Things are much easier to read when split up into 5-10 lines (at most).

Do Not cram more into a space than what can fit comfortably

Do Not cram more into a space than what can fit comfortably

Minimalism. We love it here at SpyreStudios and I know readers here do as well. That’s why this tip is so important to all of us – crowding things into a small space and not allowing the users eye to focus on the important stuff is counter productive. Yes, you’ve got a ton of information above the fold, but why would you worry about the fold so much? Paddy Donnelly already debunked the life below 600px, so allow your design and content to breath. Your users will thank you.

Do make sure to include breadcrumbs in your design

Do make sure to include breadcrumbs in your design

Breadcrumbs are useful in giving your visitor control over where they’re at and what they’re going to do next. If they’re on a sub page of your about page, your breadcrumbs will look something like this (Home > About > Sub Page Title). This tells the user exactly what page they’re on and how to go back various levels if they’d like to.

Do Not forget to utilize color and contrast to shift focus

Do Not forget to utilize color and contrast to shift focus

If you use a heading and then a sub heading for sections of your site, try various shades of color to allow the visitor to notice the important stuff first (ie: #464646 for the title and #c1c1c1 for the subtitle). These shifts in color and contrast will dictate what your user sees next, ultimately bringing them into a space where you want them to be (a sign up page, a contact form, a subscription page, ect).

Do check for broken links and images

Do check for broken links and images

Checking for broken links and images in your older articles is great because you may have visitors coming to your page from a search engine and if there are broken links, they’re going to assume one of two things: 1, you’re an old site that isn’t being updated anymore or 2. you’re not keeping up to date on the value of your site, so they’re going to go elsewhere. If you’re a wordpress user, there’s a plugin that is amazing for this: Broken Link Checker. You can also head over to iwebtool and use their free broken link checker (5 requests per hour is the limit).

Do Not neglect your footer and the power it has

Do Not neglect your footer and the power it has

So, you’re on a website and you scroll through everything and get to the bottom of the page only to find a bland, single line of text telling you that there’s a copyright on the site. Boring. Why not spruce your footer up a bit, add some extra content into it like popular articles, a search box, a newsletter subscription, ect. If you’d like to find some ideas on how to design a killer footer for your site, you should check out Footer Fetish, not to be confused with the other foot fetish.

Do use wireframing in your design process

Do use wireframing in your design process

Drawing out wireframes for your site on paper (or in simple box shapes in photoshop) can really help you visualize what’s the most important aspect of the page and how you can use it as a central focus point. By doing this, you’re also able to experiment with various layout options without having to break up a killer design you may have been creating already. For wireframe inspiration, I check out the I love Wireframes group on flickr – it’s full of amazing wireframe drawings.

Do Not write for search engines – write for your readers

Do Not write for search engines - write for your readers

Last, but not least is the tip that you should be writing for your readers, not search engines. Keyword stuffing may have worked in the past (and may still today), but if you have an actual reader come across your page, only to find the word “designer” 100X times in 3 paragraphs, what do you think the odds are that they’re going to hit their back button and never step (virtual) foot on your page again? Yeah, the odds of that happening are extremely high.

A tip I’ve heard before is to read your content out loud and if it doesn’t sound like a natural flowing conversation you’d normally have, rewrite it until it does. People will read your content and expect it to sound like something a real person would say, so make sure it does sound that way.

We’d love to hear your thoughts

Drop a comment and let us know what usability tips you’ve acquired over the time you’ve been a designer. We’d love to hear them.

Author: Mike Smith

Mike Smith writes a freelance blog on a regular basis and is also a blog designer at Guerrilla.

Comments

  1. Excellent post … I just have a couple of comments:

    Search: A search form is really only necessary for very large websites. Generally a 7 – 10 page web site does not need a search feature if the main site navigation is top-notch.

    Bread Crumbs: Again, a necessity for very large sites – but if you have a smaller website then this is negligible if the main site navigation is quality stuff.

  3. Excellent list that should be printed out (using a print stylesheet) and hung up in the offices of all aspiring web designers haha. A lot of the smaller tips are brushed over, but if you want to be really successful you shouldn’t brush over anything.

    In reply to Anne, I’d disagree. Maybe a 7 page website doesn’t need a search bar, but the site doesn’t need to be huge for it to be a necessity. I use search a lot, even on small websites. Usually I’m trying to find something I saw earlier, or saw on Twitter and never went to etc. and if I can’t find it with a quick scan of the front page and then a search, I usually move on.

  8. Great article and especially thanks for mentioning the sidebar situation.
    When i change my theme this week the first thing i will do is to leave the sidebar very simple

  9. Great post, a lot of good points in there. The last point about writing for the users is my favorite. Often times we get caught up in marketing a site but forget about who we are marketing it too. Unfortunately clients are victim to this as well. Many of them hear all of these buzz words like SEO and lose focus of the user base.

  10. Really great and helpful list.
    UX apps tip is the one I have to try.
    This list should be in hand during every future project.

  16. I can’t afree with you on the last “Do Not”.
    If you want to rank in the search engines and bring users to your website, you will need to write for search engines. It’s the way to do business these days.

  18. @Mike: Great piece!

    @Sol: I think the new Facebook features are drastically changing this reality. SEO is important, but shouldn’t be to the detriment of the user experience on your actual site. As sites like Facebook and Twitter become primary places to find links (often replacing Google), I think finding the right balance is going to be very important.

  19. Mike, great post, as usual. I especially appreciate the email link tip – this one goes unnoticed by lots of developers/designers but it’s a killer for me and many others, I’m sure.

  20. It’s great to make use of the footer, besides the one line of copyright text, but it’s equally annoying to the use to have a footer the size of the site itself – some sites tend to crowd in every bit of information they can into it and it can become a general eyesore.

  21. Very good list of do’s and don’ts. The only one I disagree with is the search form. I believe it should be mandatory on sites that have multiple pages, but other than that, I think it would be a waste for websites with few pages.

  22. Good points, however, the concept of boxing core web development principles into a set of 18 dos and don’ts is deceptive.

    This is based on the fact that the features and techniques described here are pretty much standard user expectations these days and, hence, creating sites that follow these standards techniques will result in a consistent structure/flow that users will expect from any good site.

    The problem is, however, not everyone can take these points on board and come up with a usable website. For example, have a search from – great, search is good and often missing. But then again – how does one make a usable search functionality? Very often you come across a search feature that is pretty useless because the it takes you 5 minutes to actually realize it is there.

    I wouldn’t blindly follow all the dos and dont’s outlined in this article apart from wireframing because I think that each website is unique and requires its own flow and structure to best serve its purpose. But if you are building WordPress blogs / templates – surely, without these dos and dont’s your website won’t feel like heaps of others.

    So perhaps saying that these points apply to usability on the Web as a whole might be a bit bold…

  23. Mike, you absolutely nailed it.

    It’s post like these that I print out and leave in the office. Whenever we get into debate at work about the usability of our ecommerce site, I bring up key points and use posts like these as reference.

    Even though my boss has years of running the business, I think he’s at the point that he’s skeptical of change but I’m slowly breaking down that barrier using great info like this.

    Thanks for sharing.

  26. Do Not write for search engines – write for your readers’
    Yeah, I think it’s very important, and I think Google should remove a lot of search link generated content to improve their search result quality.

  28. @Anne

    With regards to breadcrumbs, the issue is not so much about large site vs small site. Its more about whether the user gets the sense of location or not.

    In a small site that has, say 15 pages, but links to them using a drop-down menu, the user won’t know where they are. So, although the site is small, breadcrumbs are needed.

    Conversely, if a site is huge, but uses an left-hand accordion-style menu on the left that contains all of the sites pages, then breadcrumbs are not really needed.

  31. Good advice as always, and that’s why I’ll continue to visit the site :). DubLi seems to fulfill most of these criteria, far more so that Amazon.

  32. Generally a very good roundup, but I fundamentally disagree with your commandment “Do Not make your contact link in your navigation bar a mailto: link” – hyperlinked email addresses are totally standard, useful, and NOT hyperlinking them breaks user expectations.

    I agree wholeheartedly that it’s wise to include a contact form AS WELL, but you are suggesting this INSTEAD of hyperlinking the email address, which is what I am objecting to.

    I should add that one of the reasons why (in my experience) people often prefer direct email rather then using a web-based contact form is that (almost always) you don’t receive a copy of the enquiry you have submitted, so you have nothing to refer to or follow up with if you don’t receive a timely response. Therefore when I implement a contact form I always include a checkbox labelled “Send me a copy of this enquiry” (or similar wording) which is checked by default so that users will receive a copy for their own records unless they don’t want one.

  33. @Marcus Tucker: I have to agree with you about the ‘send me a copy’ checkbox on contact forms, that’s definitely good practice.

    On the other hand I really have to disagree about the ‘mailto:’ links. From a user’s perspective, I can’t stand it when I click a contact link and it opens up my Mail app, if I want to open my Mail app, I’ll open it, don’t do it for me. From a designer and website owner’s point of view, I hate spam, and spam bots seem to love mailto: links. Just my 2 cents :)

  34. Nice article!

    One thing though. You say that people should test for browser compatibility, and then say that IE6 is dead. Unfortunately about 8-15% s still using that browser, so it’s a pretty bad idea to no test for that. Compare that against that about 6% use safari & 2% opera

  36. This is an awesome list. I’ve covered most of the Do’s with my site, but there are however, a few don’ts I’m guilty of – not many though.

    Thanks for this post!

  40. You can do a whole presentation just using the each point and picture it comes with.

    >>Do Not neglect your footer and the power it has

    Gogo platforms… nice.

  41. Extremely good tips. I’ll definitely keep this in mind when working on my new site! Thanks for this!

  42. Nice article.

    I don’t use grid for web layout at all, it’s ok for me to create a layout without grids. But I see some complicated layout (for example magazine style) and feel it’s much easier with grid.

    Thanks for sharing.

  43. You might want to check your print media CSS that you brag about in your article. Print Preview this page in the latest firefox and it gives you 10 extra pages of mostly useless comments and footer links. It’s a horrendous waste of ink and paper.

    You’d be smart linking to smaller or reduced colour depth images (if any) for print as well. The ones you use take up half a page and serve no purpose.

    Pretty sound rules otherwise

  44. Great point about the email link! I remember sighing in exasperation everytime I clicked on one of those links!

  45. My advice. Do try to make your design as simple as possible while maintaining all necessary functions for obtaining goals.

  48. The plural of “Do” is “Dos,” not “Do’s”. Apostrophes either denote possession (John’s error) or a contraction of “is”. Nothing belongs to “do,” and the phrase doesn’t work if you say “do is.” There’s an apostrophe in “Don’t” because it’s a contraction of “Do not.”

    Sorry, but every time someone tweets another ’25 Do’s and Don’ts for the Web”, I edge just a little bit closer to going postal. Just sayin’.

  51. > “We all know that IE6 is dead”
    No, it isn’t. According to netmarketshare.com, IE6 is still used by a sixth of users. If your visitors use IE6, _do_ optimize your code for it. Don’t call your web page “usable” if it falls to pieces in “that browser”.

  52. Great article!

    I wouldn’t mind if I’d be able to print this page without the pictures.

  55. Great article! I’m definitely going to bookmark this to use some of the tips. I don’t think all of them will apply for my website though as it’s flash (wix.com) but I will definitely glean what I can. Thanks!

  57. Thanks for this, I’ve actually made a couple of these mistakes and going to go fix them now! In terms of the grid system it never really dawned on me to create an actual grid system like – do for graphics and print media but it makes sense. Excellent tips keep them coming.

  59. Hi All,
    If any one share the link or a document, where in it states that https site doesn’t support browser back forward button.
    Ideal scenario, when ever we hit back button in https the previous page should get expired.

    Thanks,
    Joydeep

  60. A great list of 18 usability tips that do make a huge difference! Thanks.
    Maybe another suggestion: Do design a 404 error page! And please include a search field into the page.

  61. This post was awesome. I knew I had a ton of work to do – my website is extremely plain – but didn’t realize so many little things counted for so much. Thanks!!!

  62. In general, these are practical tips on helping make your websites more user friendly and like many have already commented, breadcrumbs aren’t as necessary as the others.

  64. Style sheets are to be used and prevent repetition of attributes and inline styles. Like you should not have align=’center’ and style=’text-align:center’ for the same element any one is enough (don’t think it’s not needed. Remember 1 letter is 1 byte. That will really reduce the page’s weight)

  65. Actually, these password requirements for uppercase/lowercase/alphanumeric/specialchar variations are very annoying. Somebody (I think it was an IBM Researcher) stated, that “forcing users to think of secure passwords is just bad engineering” – and I think it is very true. But I agree on having tooltips for form elements is very helpful for users.

Leave a Reply

Your email address will not be published. Required fields are marked *

Please prove you're human *