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 that highlights many 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 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 can be used to resize a window to the size you want, but take it from me; it is extremely annoying from a user's point of view. 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) 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 design. Your website needs to open immediately on your home page and deliver your message within a few seconds; after that, it's 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 viewers 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 is there an 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, they are not indexed properly by search engines (although this is getting better), and it's the wrong tool for the job. Macromedia / Adobe, the makers of Flash, don't have an all-Flash website. Why not? 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 irritated and see your competitors.

6. Let web designers design websites.

So you're a print designer, and you do that very well, but that does not automatically mean you can design websites. The Internet (or any digital media) is a completely different ball game regarding design. Sure, we have the same constraints regarding page size/screen size, but that is where the similarity ends. When designing for the web, there are many more factors to consider and 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, words, colours and so on. When you design a website, chances are 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 applies to geeks who think they can export a document in HTML format from MS Word.

7. Content is King.

It should have been golden rule number one. If you do not have a sufficient copy or any real text on your homepage (not in an image) or your whole site, 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 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 on all the major browsers (Microsoft Internet Explorer 6 & 7, Firefox) and lesser but still popular browsers like Opera, Safari and Chrome. There is enough information about how to write cross-browser sites, and there is no excuse unless 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 on your site. A user can go through your homepage or land on the product page, navigation, 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 what you are 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 for the job. It has an install base and a lean interface, and it doesn't require users to download and install software to view it. Much of the video software available (Quicktime, RealMedia, etc...) places system tray icons, launch helpers, and pop-ups 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, 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, you must 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, 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, when whole paragraphs are written with no capital letters, even after a full stop. This may seem trendy at the time, but it 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 you use the correct grammar (e.g. you're vs your), and 'I' 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.

Using a software package for your website is 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 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 allows you to export images in the lowest file size while 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 like Yahoo! Smush.It optimises images for the web.

16. Use the correct image format.

There are three main file formats on the web: JPEG (.jpg, .jpeg), GIF (.gif), and PNG (you guessed it .png!). Each has 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 with more compression.

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 text when 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. PNGs have smaller file sizes than GIFs.

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 same colours 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 it in a new window or tab, that's their choice. Don't force it upon them.

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

What is all that about? I already know the day and time, 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 hits they count are search engine spiders, making them useless as a stats tool. Avoid, especially on professional websites. The only exception is if you are running a 1990s 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 you should; you should also use the correct technology for the job. 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. posting back to the server to check if a username exists). Still, AJAX is the wrong choice if the data or content never changes or changes infrequently.

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

My tips (and pet peeves) are 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.