Jan 30

50 Tips To A User Friendly Website

Posted by: Josh Walsh in Design.

Post Thumbnail

Here is a list of 50 things that I keep in mind on every website that I build.  Some of these are secrets I have acquired from the best designers in the world, and some of them are standard every day practices.  Either way, these tips will improve your visitors experience on your website.

  1. Clicking on the logo should take you to the home page;
  2. Your logo/site title should be positioned in the top left of the page;
  3. Duplicate your main navigational links in the page footer with links to additional, but less prominent pages;
  4. Keep your navigation positioning consistent from page to page;
  5. Don’t open links in a new tab/window, except PDF’s and embedded documents;
  6. Highlight your current location in your navigation bar;
  7. Use reasonable sized fonts (12px or larger);
  8. Make sure font sizes are flexible (Use em’s or %, not px);
  9. Sans-serif fonts are easier to read at small sizes;
  10. Serif fonts are easier to read at large sizes;
  11. Center your layout on the screen;
  12. Use a page width appropriate for your audience (Older people use lower resolutions, tech saavy people use higher resolutions);
  13. Use whitespace to logically group related items on the page;
  14. Use font sizes, colors and styles to prioritize content;
  15. Use 1.4 or 1.5em line height;
  16. Use line lengths of 45 – 60 characters, the same as a paperback book;
  17. Link to related content within the context of your page content;
  18. Make sure your links change color/style when visited;
  19. Always underline links, except some navigational cases;
  20. Do not make important parts of the website look like an advertisement;
  21. Use pull quotes to highlight important content in a lengthy article;
  22. Text should be concise and scannable;
  23. Use dark gray text instead of black text on a white background;
  24. Break long pages into multiple pages;
  25. Do not use all uppercase words, word shape helps word recognition;
  26. Divide text into sections and use sub headlines to make content more easily scanned;
  27. Keep a consistent layout, colors and typography throughout the whole site;
  28. Print friendly automatically with print stylesheets;
  29. Use buttons to submit forms (Some images which look like buttons are ok);
  30. Don’t disguise or over-style inputs;
  31. Don’t redesign standard UI elements, like scrollbars (this means you, flash people!);
  32. Use breadcrumb navigation for hierarchical content;
  33. Search results page should reiterate the phrase you searched for;
  34. Do call your homepage “home” – not “welcome,” “front page,” “your company name” or anything else;
  35. Use short and easy to read URL’s;
  36. Give links to other content on your site related to their current page;
  37. Optimize images for fast downloading;
  38. Publish new content regularly, don’t “set it and forget it;”
  39. Test in all browsers and OS’s, and different versions – IE, Firefox, Safari, Opera and Chrome;
  40. Listen to your users and let them dictate changes (user centered design);
  41. Avoid using jargon in page copy unless absolutely necessary;
  42. Keep forms short, only ask for what you absolutely need;
  43. Encourage conversation around your content.  Comments, forums, etc…;
  44. Include a text only sitemap;
  45. Use the title attribute on links to add more context;
  46. Never use “click here” as the text on a link;
  47. Write in a inverted pyramid style;
  48. Create friendly 404 pages which help people find content;
  49. Create incentive to come back later;
  50. Connect information via hyperlinks, don’t force navigational channels;

About Josh Walsh

Josh Walsh is a Managing Partner at Designing Interactive. He's also an award winning designer, author and speaker on the topics of User Experience Design, User Interface Design and Usability Research. You can follow him on twitter at: @joshwalsh

53 Comments »

  1. Phuein

    Awesome dude :+D Thanks a lot!

    January 31, 2009

  2. Danny@Rodes.Net

    Once again, right on the mark!
    #46 Cannot be overstated!

    February 4, 2009

  3. Craig Minch

    51. Don’t make absolute rules because something will come along that changes the game completely.

    I could nitpick a handful of these with “what-if” scenarios, like serif fonts on old, non font-smoothing pcs, or make a case for logos not to be in the top left. However this is certainly a solid, insightful and comprehensive list for the great majority of the web to follow.

    Good job guys.

    February 5, 2009

  4. Sabuj Kundu aka manchumahara

    Thanks for this great info. The main thing is we have to use common sense while designing and this should be point 51.

    February 15, 2009

  5. Rakibul Islam

    Thanks for the nice tips, these are really helpful.

    February 16, 2009

  6. Ray @campusfork.com

    #41 rocks! No need to impress, just deliver an easy to use website! Can’t agree more!

    March 6, 2009

  7. Meysam Zabet

    thanks for the good tips

    March 16, 2009

  8. Navdeep

    Very nice list…

    @3drockz

    April 5, 2009

  9. Fazai38

    nice!!!.. great tips..

    straight to point!! thanks for sharing..

    April 5, 2009

  10. ChrYStophe

    Very useful and acurate list. Thanks for sharing this.

    ChrYStophe

    April 10, 2009

  11. Ysance Code » [Web] Les règles ergonomiques des sites Web

    [...] http://www.designinginteractive.com/usability/50-tips-to-a-user-friendly-website/ [...]

    April 10, 2009

  12. Kal

    Apostrophes indicate possession, not plurality. PDFs and OSs, not PDF’s and OS’s.

    May 8, 2009

  13. kasper

    another one, if your site has a video do not auto play on page load

    May 8, 2009

  14. King Ranter

    #34 Do call your homepage “home” – not “welcome,” “front page,” “your company name” or anything else;

    That sort of sounds like a typo, should that be “Do not call” or was that extra “Do” at the beginning just extra encouragement?

    May 9, 2009

  15. Bonnie Domeny

    No automatic start of music when a web page loads! That’s a big pet peeve of mine.

    May 9, 2009

  16. sredd

    For those of us over 40, black text on white background is much easier to read than gray text!

    I’d like to add one other thing… never make me have to scroll sideways. A lot of photography and design websites use this. Scrolling up and down can be done using the keyboard, sideways requires the mouse. When I see this, I leave the website and never return!

    May 10, 2009

  17. SilverFirefly

    Actually lists like that puts me off because then I start thinking that all websites are going to look similar. It doesn’t exactly encourage a lot of designers to be innovative, except for a handful, maybe. But some of the points are basic common sense.

    @sredd I’m sure that if you’re over 40 (unless you have severe eyesight issues), using #1f1f1f for example instead of #000 against a white or an off-white background is not going to make reading difficult. I am 27 years old and I am as blind as a bat without my glasses and I have no trouble at all reading with various shades of grey text against a white or off-white background. I don’t have any special requirements either and my browser’s styling/text settings are set at default. Hopefully that proves my point.

    In any case, you still have the choice of setting your own stylesheet within the browser to over-ride the website’s stylesheet (available in modern browsers).

    Nothing wrong with having to scroll sideways. That’s if you’re not suffering with some sort of RSI or you’re not plain lazy. It’s a design-y thing. I think when used well, it’s cool. BTW I use the mouse for all scrolling whether it be horizontal or vertical. /shrug

    May 25, 2009

  18. Therese

    Awesome list :)

    June 6, 2009

  19. Mike

    Quite an interesting article, it is a shame you didn’t say like why it’s a good idea to do certain things.

    Either way RT’ed

    June 8, 2009

  20. Andrew Johns

    I mostly agree with this list, though the line length issue is still debated today. See http://www.viget.com/advance/the-line-length-misconception/ for example.

    However, I think SilverFirefly misses the point of this list slightly on the scrolling left to right issue added by Sredd. While it indeed can be quite cool, you do lose usability, because many people use their mouse scroll wheel to navigate through page content, and not every use has a tilting scroll wheel to move left to right as easily? That’s what this article is aiming for, ease of use.

    June 8, 2009

  21. Andrew Johns

    and I agree with Mike, also. It would be nice to have a little explanation for each point, though I suspect that would a) not be so easy on some of the points, with arguments for and against, and b) quickly increase the length of content, meaning the article would have to be split out into multiple pages or parts, as per tip #24 :)

    June 8, 2009

  22. Daily Links 06/13/2009 « EduEyeView

    [...] 50 Tips To A User Friendly Website – Designing Interactive [...]

    June 13, 2009

  23. Bukator

    Only thing I disagree with is the one about breaking long pages into multiple ones. Scrolling down is a lot easier than switching pages.

    June 13, 2009

  24. west158

    i’m a web designer, and most of these things that are on here ive done are wrong… wow… i thought i was coding right…

    nice tips / ty

    June 24, 2009

  25. jo

    great tips

    July 24, 2009

  26. mumu

    “#24 Break long pages into multiple pages;”

    No, no, no, please no. There is absolutely no good reason to do this. It is the most annoying thing about so called professional websites.

    When I come across this I generally assume it’s done to increase page impressions and therefore increase advertising potential. So I don’t click page two.

    July 26, 2009

  27. tyco

    I can’t read your gray text, please make it black, especially on a white background.

    August 2, 2009

  28. Dave

    I will have to try and apply these ideas. Anyone know how to add a comment link button on wordpress? Currently I do the ‘Click here’ to comment schpeal (look at one of my blogs).

    Thanks for the post
    Dave
    LifeExcursion

    August 16, 2009

  29. The Baldchemist

    ….and don’t forget to use as many awesomes, ultimate experiences, uniques, OMGs and of course the ubiquitous “like”.
    The goldenest rule of all is to not follow the rules. The message fails to be effective if it is formulaic, and ads creatives pride themselves on trying to break with tradition as much as and as often as possible if, unlike the boys and girls at The Baldchemist, they can get away with it.

    August 18, 2009

  30. BCB

    interestingly… you can’t click on the logo at the top of the page to go to the home page. Isn’t that rule #1????

    September 30, 2009

  31. Josh Walsh

    @BCB – We’re all guilty of breaking these rules in some way or another. I’m certainly included in that.

    However, in this case I think you are mistaken. The logo is indeed clickable.

    September 30, 2009

  32. BCB

    Most humble apologies… must have been a browser glitch… it was definitely not working when I wrote that yesterday, but as you say… it does work.

    My bad. Good list, btw.

    October 1, 2009

  33. Paul Olyslager

    A list everyone should print out and put next to the screen! But before you use this list, think it over because every website is different… See this list as a great guideline! Thanks.

    October 14, 2009

  34. Mj

    These tips should definitely be considered “guidelines” not “rules”. When creating a website, the purpose of the website should be the #1 thing that drives all design decisions. I disagree with #31 (and a few others) since the purpose of many flash websites is to make an impression/to look really really cool. Having a chunky scroll bar sitting in the middle of a slick design is going to draw attention away from what is really important. If a custom designed scroll bar is done correctly, it should melt into the design and be easy to use anyway. Any scrollbar on the far right of the page should of course be untouched (common sense).
    I think there may be exceptions to many of these tips, such as #11. Depending on the design of the site, sometimes a left-aligned layout is necessary. It all depends!
    I agree with Sabuj Kundu aka manchumahara.

    Most of these tips are great though! And just because there may be exceptions to some of them, that doesn’t mean we should ignore them. I think these tips should be followed unless there is a good reason to deviate – ie the website’s purpose. For example, I have only seen one website EVER that had a cursor image other than the default that wasn’t annoying and that actually improved the user experience. Very hard to do. Also, some of these tips (like #27) should be a no-brainer.

    Using these tips as a starting point is a great idea, but I don’t think that every website should follow them. The web is a canvas waiting for creativity and innovation – I think websites will become more and more varied in the future. People who hate change will definitely hate the internet of the future. You will see more and more sites wanting you to scroll sideways (sorry sredd). Designers will keep finding new ways to convey information. Certain websites (government websites, college sites, etc) should do everything possible to stick to the norm, but other websites (such as movie sites, photography sites, big name sites like Nike) need to keep up with design trends in order to keep their edge. That’s just how it goes.

    October 14, 2009

  35. Josh Walsh

    @MJ – Without a doubt, you are exactly right. As with all design, there is a time and a place to break every rule.

    One of my favorite examples is NYtimes.com. They have a logo at the top of the page, centered, not clickable. It works because they are mimicking the design paradigm of a newspaper. It’s clearly ok for them to break the rule in this case.

    October 16, 2009

  36. Colin McCormick

    An interesting list. Nothing new here, but it’s nice to see them all in the one place in a list like this. The only thing stopping me from retweeting this is that some people who haven’t read why these rules are important may be left asking why they should follow some of these rules.

    A small point about #8. You say that we should use em or % instead of px. This is obviously true, but you make no mention of pt, which in my experience, is used far more than px by inexperienced web designers/developers who are used to using pt’s in wordproccessors etc. So maybe you should reword that to say: use em or % instead of pt or px.

    October 21, 2009

  37. Josh Walsh

    @colin Thanks for the clarification. I’m not a big pt guy myself, but the benefits are the same.

    October 21, 2009

  38. The Baldchemist

    Hello and thank you for the very useful guidelines. Some are common sense but as common sense ain’t common anymore it’s good to see that you have recognised the need.

    If i may be so cheeky and just point out a little use of “an”, “a” and “ah”. I know English has some very stupid rules but; Write in a inverted pyramid style; should read …in AN inverted pyramid style.
    Thanks once again. I’ll keep an eye out for future articles.

    November 4, 2009

  39. dfphokoq

    “24. Break long pages into multiple pages;”

    Absolutely not! This is terrible advice.

    November 15, 2009

  40. Josh Walsh

    @dfphokoq – I’ve heard some compelling arguments on both sides of this, and seen evidence proving both sides competent as well. Why do you think this is a bad idea? I’m interested.

    November 15, 2009

  41. Will Reinhardt

    One good reason to not break a long page into several pages is that it can severely hinder a conversion, if that is the site’s intent. It’s not limited to eCommerce either, a conversion can be a newsletter registration, or a simple “I would like more information” form. Long pages that are truly giving lots of great information are seen as more trust-worthy.

    It’s also worth mentioning that #7 says to use at least a 12px font for legibility, yet the entire list uses a 11px font that I had difficulty reading.

    November 24, 2009

  42. Josh Walsh

    Will – Yeah. Good point, I’ll take a look at our font sizes. Thanks!

    November 24, 2009

  43. Aery

    Hi Josh,

    I must say, this list should be made standard for all UI projects.

    Josh, I need a favor from you. I have designed my blog gtricks.com, keeping in mind these points (except few like keeping logo in top-left position, coz then header was empty) but I need some professional to review it.

    Josh, since you are UI guru, I am just asking you to give 2 minutes to my blog and say few words about UI and functionality.

    I will be very thankful to you.

    Regards,
    Aery

    November 25, 2009

  44. 50 tips to a user friendly site « Andy’s Nutbook– Random (a)musings

    [...] 29 November 2009 · Leave a Comment http://www.designinginteractive.com/design/50-tips-to-a-user-friendly-website/ [...]

    November 29, 2009

  45. AGH Solicitors – Web Site Evaluation « bna296

    [...] is good at interacting with visitors and it allows the users to surf the website efficiently.  The website is designed with the site visitors in mind as it is focused on visitor’s expectations.  The use of images is [...]

    December 4, 2009

  46. 113Tidbits

    Awesome information found on this article. If only i had the mental aptitude to follow through on all of your pointers.

    December 14, 2009

  47. FitrightINC

    Amen Brother if only website owners would listen there would be less crap

    December 20, 2009

  48. persiantarah

    amazing post

    January 12, 2010

  49. Itsashirt T shirts

    The logoclick to homepage sould always be used indeed!

    January 15, 2010

  50. 50 Tips To A User Friendly Website

    [...] [...]

    April 22, 2010

  51. Infor of Assignment Three « Silongchen's Blog

    [...] http://www.designinginteractive.com/design/50-tips-to-a-user-friendly-website/ [...]

    May 26, 2010

  52. طراحی وب سایت

    very useful,
    if you agree I translate this article to persian

    June 12, 2010

  53. Web Design

    nice tutorial! :)

    July 6, 2010

Search

Related Posts

Popular Posts

Topics