Jan 30

50 Tips To A User Friendly Website

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

96 Comments »

  1. Awesome dude :+D Thanks a lot!

    January 31, 2009

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

    February 4, 2009

  3. 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. 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. Thanks for the nice tips, these are really helpful.

    February 16, 2009

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

    March 6, 2009

  7. thanks for the good tips

    March 16, 2009

  8. Very nice list…

    @3drockz

    April 5, 2009

  9. nice!!!.. great tips..

    straight to point!! thanks for sharing..

    April 5, 2009

  10. Very useful and acurate list. Thanks for sharing this.

    ChrYStophe

    April 10, 2009

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

    April 10, 2009

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

    May 8, 2009

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

    May 8, 2009

  14. #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. No automatic start of music when a web page loads! That’s a big pet peeve of mine.

    May 9, 2009

  16. 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. 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. Awesome list :)

    June 6, 2009

  19. 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. 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. 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. [...] 50 Tips To A User Friendly Website – Designing Interactive [...]

    June 13, 2009

  23. 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. 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. great tips

    July 24, 2009

  26. “#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. I can’t read your gray text, please make it black, especially on a white background.

    August 2, 2009

  28. 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. ….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. 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. @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. 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. 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. 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. @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. 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. @colin Thanks for the clarification. I’m not a big pt guy myself, but the benefits are the same.

    October 21, 2009

  38. 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. “24. Break long pages into multiple pages;”

    Absolutely not! This is terrible advice.

    November 15, 2009

  40. @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. 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. Will – Yeah. Good point, I’ll take a look at our font sizes. Thanks!

    November 24, 2009

  43. 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. [...] 29 November 2009 · Leave a Comment http://www.designinginteractive.com/design/50-tips-to-a-user-friendly-website/ [...]

    November 29, 2009

  45. [...] 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. 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. Amen Brother if only website owners would listen there would be less crap

    December 20, 2009

  48. amazing post

    January 12, 2010

  49. The logoclick to homepage sould always be used indeed!

    January 15, 2010

  50. [...] [...]

    April 22, 2010

  51. [...] 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. nice tutorial! :)

    July 6, 2010

  54. Great tutorial

    September 1, 2010

  55. I agree with everything you said!
    I have only been doing websites and webdesign for 5 years so it is good to see the things I do confirmed in your list.
    :)

    October 2, 2010

  56. Grat article having good information. I was not aware about hat fact, whenever i got the website io start the keyword analysis and all. I think ii need to check fisrt tht website should be user firesndly after that i have to start the SEO.

    October 20, 2010

  57. [...] http://www.designinginteractive.com/design/50-tips-to-a-user-friendly-website/ — A must read list by Josh Walsh to help you design and maintain a better website for your users [...]

    November 22, 2010

  58. 50 Tips To A User Friendly Website…

    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 v…

    January 20, 2011

  59. Great list. One question i have is what does it mean to write in a inverted pyramid style?

    February 1, 2011

  60. Thanks for this wonderful list! I wanted to share with you how I am going to use it (and attribute it correctly :) ) I teach professional masters occupational therapy students who are required to create an online learning resource.

    All these principles apply are essential! I called my checklist “Has your resource got good NAILS?

    Navigation – Appeal – Info – Links – Style

    Navigation
    •Connect information via hyperlinks, don’t force navigational channels;
    •Keep your navigation positioning consistent from page to page;
    •Optimize images for fast downloading;

    Appeal
    •Use a page width appropriate for your audience (Older people use lower resolutions, tech savvy people use higher resolutions);
    •Divide text into sections and use sub headlines to make content more easily scanned;
    •Keep a consistent layout, colours and typography throughout the whole site;
    •Listen to your users and let them dictate changes (user-centred design);
    •Do not make important parts of the website look like an advertisement;
    •Use pull quotes to highlight important content in a lengthy article;
    •Use whitespace to logically group related items on the page;
    •Break long pages into multiple pages;
    •Create incentive to come back later;

    Information
    •Do call your homepage “home” – not “welcome,” “front page,” “your company name” or anything else;
    •Avoid using jargon in page copy unless absolutely necessary;
    •Text should be concise, scannable, and relevant;

    Links
    •Duplicate your main navigational links in the page footer with links to additional, but less prominent pages;
    •Don’t open links in a new tab/window, except PDF’s and embedded documents;
    •Give links to other content on your site related to their current page;
    •Link to related content within the context of your page content;
    •Always underline links, except some navigational cases;
    •Make sure your links change colour/style when visited;
    •Use the title attribute on links to add more context;
    •Never use “click here” as the text on a link;
    •Use short and easy to read URL’s;

    Style
    •Use line lengths of 45 – 60 characters, the same as a paperback book;
    •Do not use all uppercase words, word shape helps word recognition;
    •Use dark gray text instead of black text on a white background;
    •Make sure font sizes are flexible (Use em’s or %, not px);
    •Use font sizes, colours and styles to prioritize content;
    •Sans-serif fonts are easier to read at small sizes;
    •Use reasonable sized fonts (12px or larger);
    •Serif fonts are easier to read at large sizes;
    •Write in a inverted pyramid style;

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

    March 7, 2011

  61. great tips…! thanks…!

    but still i could add a few:

    -don’t use sounds or autoplay background music, in case that’s necessary include friendly buttons to control that

    -try to keep multimedia content simple and try not to use third party plugins

    March 20, 2011

  62. is my website user friendly tell me faults ?

    entertainlanka.blogspot.com

    March 24, 2011

  63. Thank you very much. can i share this post in digg ?

    April 2, 2011

  64. Great list of tips. 32, 44, 46 are very important!

    May 6, 2011

  65. I must admit, those click here links are annoying, sometimes you cant see them. And they dont look good on blogs aswell.

    May 13, 2011

  66. A few professionals, including Jakob Nielsen, have mentioned now that “click here” is a no-no. Yet the feedback I’ve had from a lot of customers is that those words are a well-known trigger leading people on to follow a link. “Click here” is an easily understood, pro-forma instruction that people recognise. I can confirm this from stats of websites I’ve designed where replacing a more technically correct link text with “click here” has resulted in nearly a doubling of traffic over that link. So these lists of “rules” aren’t always right, and it’s vital that you do your own market research before designing any website.

    May 16, 2011

  67. very useful and informative.
    Thanks for posting.

    Ramin

    May 17, 2011

  68. Thanks for the nice tips

    June 4, 2011

  69. Wonderful tips, keep it up

    June 13, 2011

  70. THANK YOU!… Now if only this person would add some more to cover flash sites that end up entirely worthless as well. It’s unbelievable how many utterly horrible websites are out there that are actually designed for multi-million dollar companies even. Ug.

    July 1, 2011

  71. Stumbled upon this site. Definitely enriching.

    July 20, 2011

  72. [...] tasarlarken dikkat etmeniz gerekenleri 50 madde içinde tavsiye niteliğinde yazılmıştır. Kaynak sayfasından elimden geldiğince – yanlışlıklar olabilir –  Türkçe’ye çevirdim sizlerde [...]

    August 3, 2011

  73. what is the meaning of user friendly key focus

    August 25, 2011

  74. Thanks so much for your generosity in sharing these tips. I am a 57 year old grandma learning how to maintain /create a better website. I will take your suggestions to heart.

    August 25, 2011

  75. Great tips, for experienced designers its all common knowledge but no one said everyone is an experienced designer and this is great for beginners.

    August 30, 2011

  76. [...] 50 tips for building a perfect websites. [...]

    September 4, 2011

  77. #51 Have a reason for everything on the page.

    DO break a page if there is a substantial shift in focus or theme. A page about Shakespeare should not run on into biographies of his contemporaries. Look at page breaks as being akin to chapter breaks in a book.

    DO NOT break a page of text simply because some arbitrary length has been reached. There is nothing ‘magical’ about 500 words unless your audience consists entirely of juveniles with ADD.

    DO break a page heavily laden with graphics to boost loading time.

    Do not ask me to wait more than about 10 seconds for a Flash page to load without giving me a darned good reason to hang around. And no, a spinning graphic is not sufficiently amusing to keep me placated.

    #52 Don’t post a web site at all unless you have something worthwhile and at least marginally original to say. << scalpers make my trigger finger itchy

    I blog and often use the –more– tag to allow several topics to be scanned before the reader decides which one of five to pursue further. Good move or not?

    September 12, 2011

  78. Good checklist. Shared amoung developers.

    September 20, 2011

  79. [...] 50 Tips To A User Friendly Website | Designing Interactive. Share this:TwitterFacebookLinkedInEmailPrintDiggRedditStumbleUponLike this:LikeBe the first to [...]

    September 29, 2011

  80. Think outside the box. This guy might as well be a communist design is about exploration and freedom not cookie cutter layouts. If we all wanted the same thing we wouldn’t have any web designers. It would just be the same thing duplicated which does not allow for any type of difference to allow you to set your web site or client’s site apart from the rest. And, yes, I read the whole fifty deliriously absurd tips for a user friendly cookie cutter website. They are inside a box like a nine to five job at Walmart.

    October 19, 2011

  81. This is like a dumb asses guide to the galaxy. I had to say it, sorry. If you retort my comments or reject them, I do not care. Because the author might as well have told you how to make a Word Document readable.

    October 19, 2011

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

    October 31, 2011

  83. I’m wondering what would be the definition for “user friendly”. I noticed that people use it so easily but practically implementing it without a good definition seems to be a big pain IMO.

    –lee

    November 4, 2011

  84. Your post are just excellent and full of useful suggestions!
    I’m gonna try to put in practice some of your advices and then I’ll let you know!

    November 25, 2011

  85. Thanks for sharing these helpful tips. Looking forward for more web design tips. Keep up!

    November 27, 2011

  86. Wow. very nice tips here! :) Thankyou for the post.

    December 2, 2011

  87. So interesting post. Some of the points and tips are so amazing, the points such as:

    “40.Listen to your users and let them dictate changes (user centered design);”

    December 6, 2011

  88. Most of tips you provided are industry standard tips being widely used by most of the web designers and developers.

    December 13, 2011

  89. I have to agree that most of the tips given are standard and of basic understanding but there are a few unique ones, a good blog for newbies to the area.
    Thanks for sharing

    December 15, 2011

  90. Very Best and Helpful Website for Designers …

    December 30, 2011

  91. [...] 50 Tips To A User Friendly Website - 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. [...]

    January 7, 2012

  92. Very useful tips for a web designer.
    Thanks for sharing..

    January 17, 2012

  93. great list of ideas. thanks for posting!!!

    January 20, 2012

  94. great list of ideas. Without a doubt, you are exactly right. As with all design, there is a time and a place to break every rule.thanks for posting

    January 31, 2012

  95. Thanks for the nice tips,

    February 1, 2012

  96. also make sure that the non www version is always redirected to the www version of the website.

    February 2, 2012


Search