Web Design Pitfalls
I’ve been carrying a bit from the Globe and Mail for a number of months now. The bit is a summary of Jakob Nielsen’s 2005 reader survey on poor website design. Here is a summary of the summary (with my commentary).
- Legibility – Avoid small fonts, fonts that cannot be resized and low contrast between the text and background colours. Resizing of fonts is going to be a big issue/challenge for web design in the coming years. As boomers age, there is going to be a massive number of people whose eye sight is starting to worsen. If they cannot read your content clearly, they are going to get it from another outlet. Unfortunately, a lot of web design is based around ‘text — of size x — goes here, image goes here’. If size is really x * 5, your time making a your page pretty has been wasted.
- Odd Links – Make links obvious, using coloured, underlined text. Differentiate between visited and unvisited links. This method is the de facto standard of displaying links. Yes, you can tweak your page to display without underlines, and with the same colour as the text, but why? If presentation is really an issue, change the text colour to something that complements your existing colour palette, but leave the underline.
- Flash – “Most people equate animated content with useless content.” Blame it on the bubble, but this is so true. Not only is there this perception, but then there is the issue of having the right version of the right plug-in which can be a nightmare unto itself. Also, how many people see a flash splash page or something load and immediately look for the ‘skip intro’ link. I do every time — unless of course I am going to the site for the flash splash; some web development companies have very pretty splashes
- Content not web friendly – copy should be short, scannable and to the point, not just marketing fluff. But if you insist on having the marketing fluff at least include a boilerplate or such at the beginning that allows you to skip fluff if you want but still derive value from it.
- Bad site search – Invest in better software if your searches do not meet your user’s needs. I am pretty sure it costs very little, if anything to integrate Google or Yahoo into your website, so the investment is likely just going to be time to make sure that all pages are spiderable and correctly added to the index. Now, this strategy doesn’t really apply to intranet type scenarios where haveing all your corporate secrets in the main index would not be a good thing, but thats where products like the Google Search Appliance come in. Oh, and they look really nice too.
- Browser incompatibility – Firefox, Opera, Safari, blah, blah, blah. From a test perspective this can be a big issue as it is yet another permutation to the massive matrix of combinations you should test. Here is my formula. Take the current browser market shares for the top couple and use that as a base weighting for testing. From there, skew the percentages based upon your target market. For example, if you are a site that caters to open source or linux, you will want to up your Firefox percentages. Similarly Mac sites will want more Safari coverage. Oh for the simple days between Browser Wars I and Browser Wars II.
- Cumbersome forms – Try not to use forms, but if you must, make them as minimal as possible. Personally I think the end of forms as a means of collecting data is towards the end of it’s useful life. One of the first things we taught our daughter about the internet is to always lie when they as for information. Not only is this safer, it also insulates from spam/data harvesting. If you cannot trust the information that you get from a form, the form is useless and should be removed. If you must have a form though, use the tabindex attribute for the input tag to bounce you through only the mandatory tags. I’m lazy. I don’t want to have to navigate through 100 demographics fields that I’m not going to fill in. Nor do I want to move my hand all the way over to my mouse to skip by them all.
- No contact information – Giving a physical address for your organization gives it an instant boost in credibility. If you have a domain, whois will give you the business contact information which has an address. If you have a phone number, Google or any number of other reverse phone lookups will give you the address. If my mom knows how to do this, I’m guessing a large majority of the internet population does, or will soon. Even if you don’t put up an address because you are working out of your livingroom or parent’s basement, call it Suite 200 or something. The added benefit of this is that when you do move into a new proper office you can announce it with great fanfare and turn it into a mini marketing event.
- Frozen layouts – Pages should resize according to how they are being displayed be it bigger or smaller screen real estate or printing on A4 vs. 8.5×11 paper. Here is the perfect example. HP’s main web site. Regardless of how you adjust your browser size, the content will always be the same size and tucked up in the top left corner. As the average monitor size increases, so too will the average screen resolution. Make your page dynamic, or at least dynamic enough to not fill the screen which emptiness.
- Inadequate photo enlargements – Let users see close-ups of your product. This is of course starting to be thwarted by browsers resizing images to fit their window size automagically for you. So even if you provide a monstrously sized close-up of your product, the user might still have to hover the mouse over the bottom right of the image, weight for the ‘I really did want a large picture, thank-you’ button and click it.
I have been inadvertently following a list very similar to this any time someone asks me to test their website. Good to know I wasn’t too off base on this.