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.
- Clicking on the logo should take you to the home page;
- Your logo/site title should be positioned in the top left of the page;
- Duplicate your main navigational links in the page footer with links to additional, but less prominent pages;
- Keep your navigation positioning consistent from page to page;
- Don’t open links in a new tab/window, except PDF’s and embedded documents;
- Highlight your current location in your navigation bar;
- Use reasonable sized fonts (12px or larger);
- Make sure font sizes are flexible (Use em’s or %, not px);
- Sans-serif fonts are easier to read at small sizes;
- Serif fonts are easier to read at large sizes;
- Center your layout on the screen;
- Use a page width appropriate for your audience (Older people use lower resolutions, tech saavy people use higher resolutions);
- Use whitespace to logically group related items on the page;
- Use font sizes, colors and styles to prioritize content;
- Use 1.4 or 1.5em line height;
- Use line lengths of 45 – 60 characters, the same as a paperback book;
- Link to related content within the context of your page content;
- Make sure your links change color/style when visited;
- Always underline links, except some navigational cases;
- Do not make important parts of the website look like an advertisement;
- Use pull quotes to highlight important content in a lengthy article;
- Text should be concise and scannable;
- Use dark gray text instead of black text on a white background;
- Break long pages into multiple pages;
- Do not use all uppercase words, word shape helps word recognition;
- Divide text into sections and use sub headlines to make content more easily scanned;
- Keep a consistent layout, colors and typography throughout the whole site;
- Print friendly automatically with print stylesheets;
- Use buttons to submit forms (Some images which look like buttons are ok);
- Don’t disguise or over-style inputs;
- Don’t redesign standard UI elements, like scrollbars (this means you, flash people!);
- Use breadcrumb navigation for hierarchical content;
- Search results page should reiterate the phrase you searched for;
- Do call your homepage “home” – not “welcome,” “front page,” “your company name” or anything else;
- Use short and easy to read URL’s;
- Give links to other content on your site related to their current page;
- Optimize images for fast downloading;
- Publish new content regularly, don’t “set it and forget it;”
- Test in all browsers and OS’s, and different versions – IE, Firefox, Safari, Opera and Chrome;
- Listen to your users and let them dictate changes (user centered design);
- Avoid using jargon in page copy unless absolutely necessary;
- Keep forms short, only ask for what you absolutely need;
- Encourage conversation around your content. Comments, forums, etc…;
- Include a text only sitemap;
- Use the title attribute on links to add more context;
- Never use “click here” as the text on a link;
- Write in a inverted pyramid style;
- Create friendly 404 pages which help people find content;
- Create incentive to come back later;
- Connect information via hyperlinks, don’t force navigational channels;
Subscribe to our
{ 4 trackbacks }
{ 45 comments… read them below or add one }
Awesome dude :+D Thanks a lot!
Once again, right on the mark!
#46 Cannot be overstated!
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.
Thanks for this great info. The main thing is we have to use common sense while designing and this should be point 51.
Thanks for the nice tips, these are really helpful.
#41 rocks! No need to impress, just deliver an easy to use website! Can’t agree more!
thanks for the good tips
Very nice list…
@3drockz
nice!!!.. great tips..
straight to point!! thanks for sharing..
Very useful and acurate list. Thanks for sharing this.
ChrYStophe
Apostrophes indicate possession, not plurality. PDFs and OSs, not PDF’s and OS’s.
another one, if your site has a video do not auto play on page load
#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?
No automatic start of music when a web page loads! That’s a big pet peeve of mine.
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!
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
Awesome list
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
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.
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
Only thing I disagree with is the one about breaking long pages into multiple ones. Scrolling down is a lot easier than switching pages.
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
great tips
“#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.
I can’t read your gray text, please make it black, especially on a white background.
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
….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.
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????
@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.
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.
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.
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.
@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.
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.
@colin Thanks for the clarification. I’m not a big pt guy myself, but the benefits are the same.
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.
“24. Break long pages into multiple pages;”
Absolutely not! This is terrible advice.
@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.
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.
Will – Yeah. Good point, I’ll take a look at our font sizes. Thanks!
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
Awesome information found on this article. If only i had the mental aptitude to follow through on all of your pointers.
Amen Brother if only website owners would listen there would be less crap
amazing post
The logoclick to homepage sould always be used indeed!