20 Best Website Design Tips for Improving User Experience (UX)

A collection of 20 website design tips for better websites resulting in a higher conversion ratio and increased customer satisfaction.

Josiah Cole  has written an excellent article on things not to do when writing a website . It's a great article, which highlights a lot of good points about web design. As a web designer, I am always careful not to break these rules, and as a surfer, I am aware of how annoying these can be if broken. I have elaborated on a few of Josiah's tips, and a few of my own to present this guide to better web design. Sitepoint also has an excellent article on how to create a horrible e-commerce site  which is an interesting read.

1. Do not resize the user's browser window, ever.

It may look good to you and it can be used to resize a window to the size you want, but take it from me that from a user's point of view, it is extremely annoying. You see this technique mostly with Spam sites and when "designers" design websites. That is, someone in the photo/video/art industry who "also makes websites" (see #6 for more on that), but in reality, has no idea how to make a successful e-commerce website.

2. Ban Flash introductions.

If your website requires the visitor to load your home page, and then "launch" your real website in a pop-up, it's time to reconsider your website design. Your website needs to open immediately on your home page and deliver your message within a couple of seconds, after that it's pretty hard to keep people along for the show, regardless of the fancy Flash animations.

3. Don't ask the High bandwidth or low bandwidth question

Does your website ask the viewer which version they'd like, high bandwidth or low, HTML or Flash? Related to the previous rule it's an extra hurdle for the user before they even get to your homepage. Secondly, why have the issue at all? Heavy use of graphics infers a poor design. If the site is designed properly it should not require high bandwidth, thus requiring no options.

4. Don't write websites in Flash!

Why build an all-Flash website? They take ages to load, there not indexed properly by search engines (although this is getting better) and quite simply it's the wrong tool for the job. Even Macromedia / Adobe, the makers of Flash don't have an all-Flash website. Why not? Because Flash is a tool for creating animations, banners and little flashy things, NOT websites.

5. Do not try to reinvent the navigation.

Users expect things in a common and expected place. Navigation should be on the top, the left or the right. Do not try to reinvent the way people interact with websites while trying to sell your product or service. Your customers will get confused and then irritated, and then they go see your competitor.

6. Let web designers design websites.

So you're a print designer and you do that very well, but that does not automatically mean that you can design websites. The Internet (or any digital media) is a completely different ball game when it comes to design. Sure we both have the same constraints when it comes to page size/screen size, but that is where the similarity ends. When designing for the web there are a lot more factors to consider and a great many more limitations. Put it this way. You design a leaflet and send it to print. Chances are good that everyone who sees that leaflet will see the same design, the same words, the same colours and so on. When you design a website chances are very good that no two people will see the same screen. Different monitors will change the colours, different browsers render graphics/layout differently, screen sizes change real estate, accessibility settings change fonts and the list goes on. Let the web designers design the websites - It's what they do. This also goes for general geeks who think they can export a document in HTML format from MS Word.

7. Content is King.

Should have been golden rule number one. If you do not have sufficient copy, or any real text on your homepage (not in an image), or on your whole site in general, hire a good copywriter and fire your webmaster NOW. Content is King, repeat after me CONTENT IS KING. Search engines do not index graphics and Flash and they cannot read text on images. Search engines only index text and PDF documents. See my SEO tips for guidelines on writing good text.

8. Ensure your site is cross-browser-friendly.

Your website should work in all the major browsers (Microsoft Internet Explorer 6 & 7, Firefox) as well as the lesser, but still popular browsers like Opera, Safari and Chrome. There is enough information about how to write cross-browser sites that there is no excuse, unless, of course, your web designer doesn't know what they are doing, or is just lazy.

9. No Music!

I hate it when sites start playing music at me. I didn't ask for it, I don't like it and it's taking up my bandwidth. Worst still I can't find the stop button, but guess what? I can find the back button...

10. Do you lead the user through a pre-determined path?

The web is about modular content; it's not an "experience" or a "wonder tour of magical enchantment". Your product should be able to be found within 2-3 clicks from the homepage and there is no single entry page to your site. A user can go through your homepage, or they may land on the product page, navigation, a static page or anything else on your site. Regardless of the page, they land on your visitor must be able to locate whatever they were after or your selling.

11. Deliver your video in an embedded player in Flash.

You may have already gathered that I do not like Flash, but in this case, Flash is the tool to use for the job. It has the install base, and the lean interface and it doesn't require users to download and install software to view. Much of the video software available (Quicktime, RealMedia etc...) places system tray icons, launch helpers and pop up every time you insert a CD or DVD. Flash is cross-platform and cross-browser compatible, something none of the other providers can say, not even Microsoft. If you don't believe me just look at how popular YouTube is.

12. Use clear and simple navigation.

If the user has to mouse over your graphic or small image to know what it is, or where it will take them then you need to reconsider your designs. At least you are filling in the alt and title tags properly so users without images can still browse your site...

Better still just use text. CSS can be used to make it look good, so do you need text on images for navigation and links?

13. Use correct grammar and punctuation.

More and more sites are using dropped case copy, that's when whole paragraphs are written with no capital letters, even after a full stop. This may seem to be trendy at the time, but is very difficult for a guest to read and in a few years when it's no longer trendy; you'll have to change it again anyway. What is with the sudden trend for lowercase anyway?

Also, please make sure that you use the correct grammar (e.g. you're vs your), and 'I' on its own is always capitalised. Punctuate properly as well. Did your copywriter learn English at school or are you trying to look illiterate?

14. Don't use the default theme.

If you are using a software package for your website, that's fine, as long as you customise the layout and theme. If your new osCommerce shop has the best products on the market, but your shop looks like it's just out of the box, what kind of impression does that give? A lazy one. It will also make your shop look the same as all the other lazy shop owners. The same applies to any "off the shelf" packages. By all means, use them, but get a custom design or a different design other than the one in the package.

15. Optimise your images.

Related to the above points about bandwidth, every image used on your site should be optimised for the web, and it should be resized appropriately. If you are showing small thumbnail images, use a separate small low-resolution image which links to the larger version. Don't force the user to download all the high-resolution images on one page. Photoshop has an option to "Save for Web" which you can use to export images in the lowest file size while still retaining quality. This will also strip out any unneeded information such as colour spaces, colour profiles, Meta information and tags. You can also use free online services, such as Yahoo! Smush.It , optimises images for the web.

16. Use the correct image format.

There are three main file formats in use on the web - JPEG (.jpg, .jpeg), GIF (.gif) and PNG (you guessed it .png!). Each of them has its advantages and disadvantages and should be used for a particular purpose.

JPEG should be used for photographs and anything that requires "true" colour. JPEG can have the smallest file size, but the quality will be reduced the more compression you apply.

PNG and GIF do not suffer from compression quality loss, but their file size is much greater. GIF and PNG8 only support 256 colours, while PNG24 supports 16 million. PNG and GIF should be limited to small icons/graphics/buttons or when text is involved (text gets messy in jpegs). GIF supports transparency and animation, while PNG only supports transparency in non-Microsoft browsers. PNG also has problems with colour matching, so if you need to match a colour in the image with an HTML CSS colour use a gif. PNG have smaller file sizes than GIF.

17. Select a colour scheme and stick to it.

If your company has a logo or preferred colours on its stationery that's a good start, you can use those colours in your web design. If not, there are plenty of tips on choosing a colour scheme.

Once you have your colour scheme, stick to it. Keep the colours the same on all your pages, don't chop and change between pages.

18. External Links.

Do not pop up external links in a new window. If your site is good enough to come back to they will. If a user wishes to open in a new window or tab then that's their choice to make. Don't force it upon them.

19. Today is Monday 20th October, it is 7:34 pm, and you are visitor number 00005.

What is all that about? I already know what the day and time are and I don't care that I'm the 5th visitor to your site. Why do people think hit counters are a great idea? Most of the hits they count are search engine spiders anyway which makes them useless as a stats tool. Avoid, especially on professional websites. The only exception is if you are running a 1990's retro look website.

20. Just because you can.

Just because a particular technology is new, or you just discovered it, or it's the "flavour of the month" does not make it suitable to put on a business website. Just because you can does not mean that you should. You should also use the correct technology for the job at hand. For example, AJAX is great for displaying rapidly updating data (i.e. stock markets, exchange rates and so on) and useful for submitting small forms and validation (i.e. post back to the server to check if a username exists) but if the data or content never changes, or changes infrequently then AJAX is the wrong choice.

Also a few other general pointers about good web design: No blinking text, no Frontpage, no pop-ups (even requested), no scrolling text, and no font downloads and no Flash intros.

These are just my personal tips (and pet peeves) for better web design and usability. There is no right or wrong way to create websites; it's all up to you at the end of the day.