As a web designer, it is difficult for me to use the web without analysing almost every page I see. Web design is my passion so I can’t avoid it. It’s one of the best ways to learn what has been done well so when I see poor use of design on the web and think about the average user, it annoys me to notice that some aspects of websites, or even complete sites, are poorly designed.
Here are seven of the most common mistakes made in web design and why you need to avoid them at all costs in order to make sure you are on the right track to producing the best work you possibly can.
1. Unnecessary Use of Flash
First of all, Flash is great when used well. For example, the current state and popularity of online video streaming with sites like YouTube wouldn’t exist in the way it does without it.
The problem is that beyond this the disadvantages of using Flash far far outweighs the benefits in almost all cases. Being a browser plugin, it has a reputation of slowing down computers by using excessive CPU. Flash 10.1 however will support GPU usage to take the strain off the CPU. Which is nice.
Sometimes you’ll see Flash being used for navigation when it just isn’t necessary at all. Remember, by doing this you are making it less accessible to use. Avoid this like the plague as there are many great options using js libraries such as jQuery.
Jacob Nielsen’s article from way back in 2000, titled Flash: 99% Bad, still has many relevant points as to why Flash is unnecessary most of the time, especially the section titled ‘Breaks Web Fundamentals‘.
2. Poor Search Results
When using the search function of a website it is safe to assume that someone is actually looking for something and if it exists, poor search results may well prevent them from finding what they want.
One way of improving this is to make use of the power of the most popular search engine with the use of Google’s Custom Search Engine. With this solution, your results will be formatted in the same familiar way that they are on Google’s own pages so users will know what to expect.
3. Bad Images
There are two types of poor images when it comes to web design. The first is using images which are uninteresting or irrelevant especially with the internet being such a visual medium. Good images can convey so much meaning and get a message across very effectively. As the well known phrase goes, ‘a picture is worth a thousand words’ which is especially true when it comes to web design.
The second is quality of images which relates to heavy compression, blurry images, resized images and images that are stretched or squashed altering their aspect ratio. Any of the above is unacceptable in this day and age.
4. Irrelevant URL Structure
It is common for content management systems by default to use a dynamic URL usually consisting of seemingly random characters and numbers such as www.exampleurl.com/?p=52 Do you have a clue what the content of that page is? Certainly not from the URL and neither will search engines. Even if a potential visitor does see this in a result on a search engine then they’ll be less likely to follow through due it’s cryptic appearance.
Beyond that is the use of short URLs commonly seen on Twitter. Popular Twitter clients such as Tweetie are able to show the actual URL before sending you off there. When people use that option, it is generally to see what the URL is that they will be taken to and by containing a description of the page in the URL, it is possible to have a good idea of where their click is taking them.
5. Lack of a Clear Message
By not having a clear message on your site or a site you’ve designed, you run the risk of confusing any potential new customers or visitors. The longer they take trying to work out what it is the site is actually for, the more chance they will leave and try and find what they are looking for elsewhere.
A simple way of helping resolve this is to have a simple tagline, no more that 8-10 words long, located in the header. That way if someone lands on a page that isn’t the homepage, they can see the message and be clear of what the site is about without heading to the homepage or the about page.
6. Not Understanding What the Client Needs
The most important thing to get right before you get started is to make sure that you understand your client and what service or product they offer. This doesn’t only apply to freelancers or web designers who work in a design agency where they deal with multiple different clients but also those who work in-house. Think of your employers as your client as they, much like a traditional client, pay your for your service.
Making sure you have an understanding of what the client needs will reduce frustrations further down the road. Most of the time there will be changes out of you’re control that can’t be avoided but by getting your head around what is required early on will reduce any confusion as much as you possibly can.
7. Ignoring Important Browsers
The average web user doesn’t know that there are differences in the way that browsers render pages, they only see the internet as one. If they come across a site that is broken in their browser then they aren’t going to know to switch to another browser to see if it works there, they’ll just move on to another site. Most users don’t even know what a browser is anyway.
Tweet
There are tons of mistakes that people make on the web. I don’t understand why anyone would actually want to use Flash for navigation. They do know that Flash is a browser add-on, and not a default feature, right?
great tips , thank you very much.
Great List.
As you said #6 is definitely the most important point to solve before you can do anything else.
If you don’t know what your client really needs everything else will be in vain.
Paddy
GREAT article. Its the obvious but you have to point it out for sure.
DISAGREE with flash. If you want to build RIA then you can make it fast and nice in flash or struggle in HTMl. Then you have to consider many browser which interpret HTML different … horror.
my 5 cent
Albert
Sorry Albert, you’re simply wrong in this case. If you’re struggling to get sites looking good across different browsers with HTML and CSS, then you’re not trying hard enough.
The advantages of HTML over full Flash sites are too many to list in full here but the main ones are usability, accessibility and SEO benefits.
Good points. Browser inconsistencies is the most important think to think about when coding.
Agree with Tom Kenny
I agree with Tom. There are many disadvantages of full flash website if we compare it with HTML/CSS website. Use jQuery if you are using flash in small sections/parts of the website which is SEO friendly. I feel like that time has gone when people look for flash websites. According to my experience, from 100 clients… 90 clients has asked me this question “Would my site appear in google search result page?”
The choice is always yours but always choose the thing which work for long term.
@Albert
Gmail, google maps and facebook are all html/javascript, no flash, and they have some of the snapiest interfaces around.
If most of your clients are referrals then why not use a full flash website? I know that Google claims it can search for embedded flash copy, but it obviously isn’t as effective as html. The browser that causes all these problems is Internet Exploder, get rid of it and wala! the internet is fixed. I agree that if your customers are searching for you online then flash isn’t your best option. It’s unfortunate that flash isn’t the standard right now, the internet would be a much more engaging world.
Tom, HTML does not have too many advantages to list over Flash. The article is misleading when it comes to Flash. Flash does many things well..not just video. It is important to use it appropriately. If it does not enhance the user experience, you can probably do without.
Your accessibility and SEO argument is not a very strong one anymore. Thanks to Google, Flash is becoming more and more search engine friendly. Making a flash site accessible is not a Flash flaw, but a developer flaw. Extra time needs to be taken to make flash content accessible.
Great tips. Poor image quality and irrelevant urls really bother me, especially now that I’m using Twitter and preview shorturls.
Disagree with that last one. I think it’s time to drop IE6 support, unless a client specifically asks for it. And if they do, charge ‘em for it.
1. Unnecessary Use of Flash – You didn’t do enough research on the subject to post what you have. You can build full Flash sites that are SEO compatible using SWFAddress, they can also meet usability and accessibility standards. On the navigation issue, Flash shouldn’t be your first choice but sometimes the designer has something in mind that can only be done in Flash. I would have liked to read something along the lines of…”avoid missing out on SEO, usability and accessibility by building your Flash site with a framework like GAIA or SOMA” (gaiaflashframework.com, http://www.soundstep.com/somaprotest/ ). This would have been more informative and suggestive for this article since you provided a suggestion for the rest of your 7 points.
Just wanted to mention that while yes, Flash is an addon… to find someone without a Flash installed is comparable to finding a Ferrari parked on the street in the hood. It happens but… very rarely with exception to iPhone browsers but we should be using mobile versions of sites to target those anyhow.
How do did you arrive at these being the top 7?
Your comments about flash are out of date – reffering to a nine year old document proves that.
Accessibility and seo are possible with flash, it’s articles like this that keep that myth alive
To date I have not created any web content in flash (other than stuff for my own amusement). Yes it can look nice but I always groan when I see a pure / heavy flash site.
Looking good is not the most important aspect! As in most cases, the beauty will only be skin deep and the frustration of using the site will become the main thing people remember.
I disagree with at least the phrase “browser inconsistencies” as a web design mistake. Maybe a better phrase would “not browser testing” or “not taking older browsers into consideration”. Pixel-perfect consistency across browsers is simply not a reasonable goal.
The whole idea of Progressive Enhancement in web design is the intentional creation of browser inconsistencies. In my own work, I use certain CSS3 properties to add flourishes in certain browsers, while they degrade gracefully in older browsers (IE6, I’m looking at you).
Now, obviously, you want functionality and usability to be there for users who have less-able browsers. And I know that’s more of the point that you’re driving at with browser inconsistency.
However, we are working in a time when the browsers cover a wide range of capability levels, and there is nothing wrong with intelligently pushing those boundaries. Even if it results in a different experience for some users, and not others.
Considering the points given, I think the main problem of some designers is the inability to properly determine when to use Flash.
Flash is great when it coincides with your target market as well as the site purpose, but it can be disastrous in the hands of someone who just wants to “show off”.
Great article. Reminds me of that awful flash menu that you tweeted about earlier.
“The advantages of HTML over full Flash sites are too many to list in full here but the main ones are usability, accessibility and SEO benefits.”
Seems like a highly biased opinion coming from the AUTHOR of the article. Clearly you favor HTML.
I agree that HTML has the upper hand with SEO benefits. Regarding usability and accessibility … well that is just nonsense. For every benefit that you can list for HTML over Flash … I can list one for Flash over HTML.
This isn’t a Flash vs. HTML article. It is an article about wise decision making whether it be some Flash, no Flash or all Flash.
Very naive and outdated advice! Can’t believe you posted a link to an article from 2000 (five years before Youtube! & only two years after Google!!) in relation to Flash. Five versions of Flash and FlashPlayer have been released since then, and many advancements have happened, including Actionscript2, Actionscript3 and Flex! There is no excuse to “break web fundamentals” with Flash anymore. I do agree however that there is a time and a place for Flash. But todays Flash is a different beast.
I disagree about flash, and Nielsen is not God. He’s wrong in a lot of things.
Also… Whats all this talk about Flash not being SEO friendly? Flash is just as seachable by Google as any HTML page these days. Update your information!
Flash can certainly be used well and can produce amazing rich interactive experiences. No one is saying don’t use Flash, the rule is: use Flash appropriately. Having a ‘flashy’ Flash navigation bar for no other reason than you think it looks cool is not an appropriate design decision, unless your audience consists only of people who think exactly like you. Along with the disadvantages of Flash already mentioned it is impossible to bookmark pages within Flash sites (think of the typical photographer’s Flash website). There are some ‘workarounds’ that are inconsistent in functionality but 99% of Flash sites don’t even bother. Bookmarking, more than ever in these days of social networking, is an essential outlet for your work/message.
There are a lot of places where Flash is just great but more and more it’s not as a full site, it’s to add media/interaction to a page. Sites that a few years ago would typically be full Flash sites (think gaming, nightclubs, cars, etc) are now using HTML as a base and only adding Flash where appropriate. Even ‘classic’ Flash developers “Fantasy Interactive” now sport an all-HTML site powered by a javascript library.
Good tips. They are common sense but someone need to put it down in writing.
Flash is always a debatable issue. I hate landing on sites using flash just for the purpose of visual effect, which most times are annoying and not bandwidth nor CPU friendly. If designers wants to use flash, it should be done wisely.
The only time I ever design in flash in if a client specifically requests it. I find it bloated and I actually avoid sites that are heavy on flash or are completely in flash. The comment about everyone having flash might be true at homes but I also work for an IT consulting company and many business’s avoid installing the flash plugin to not have to deal with how terrible adobe writes their software and about how incompatible many versions of flash appear to run on the web. Maybe its adobe’s fault, maybe it’s the individual developer’s fault but almost all of the bad experiences reported to me on the web come from flash.
@Albert WHY would you ever build a menu in flash? Such a pain to update and bad for SEO. If you can make a simple nav work in all browsers, you need to learn some better HTML.
Great tips thank you, I swear i have made a few of these mistakes in my time but have learnt!
I agree with the sparing use of flash. It should be an enhancement, not a building block for a site. Yes, flash can be indexed in search engines but only text and links are affected. I’m sure it will advance in the future but for now, I am totally against flash sites.
It’s always the people who don’t know how to use flash that thinks it’s inferior.
@Tom Kenny:
and you can develop with it ‘easy’ since GWT and YUI. Other tools/frameworks are missing OOA, refactoring and 1000 other goodies. Sorry but developing pure HTML is spaggeti code (I do not know jQuery, so maybe I’am wrong).
I know html since years
Doing animations with HTML is tricky and you have to have fear if it works on all browsers … then new browsers. It is simply because W3 standard is not supported well. Additionally you have to cut your code and put it partly in css and javascript files …
Since 5 months I play with adobe flex 4 … believe me it is different world. You can do nice things, do it fast, user friendly and PROGRAMMER friendly as well. It is a very good language for medium and large projects. It is also FREE with good IDE.
Regards
Albert
@Amber
) when peoples mix flash menu with html content.
menu is not all and I see no purpose (and hate it too
I was against flash becuase it was slow … in the past. Now internet is fast and it is time to review knowledge and user needs -> users wants RIA and the best framework for it (in my opinion) is flex.
cheers
A
I definitely disagree about #4, “Irrelevant URL structure”. A URL is not designed for humans to read: just as your postal address is for the postman, it doesn’t describe the colour of your house. If you want to add some meaning, that’s what the contents of the link is for.
These are so simple in theory but, my oh my, are they tough to follow once the project has begun.
I made this one of my three design links for the day on my daily “Design Thought of the Day” blog:
http://designthoughtfortheday.blogspot.com
Ted
I can not think of a good reason to use flash except for video streaming, gaming and data visualization (i.e charts, graphs, … etc). Any other stuff can be done with alternatives…
Flash content are NOT SEO friendly and yes, I have done my homework. It’s true that it’s indexable by Google but not by other search engines, and even Google does not index them that good.
Flash content prevent the user from bookmarking a page in the website.
Flash content prevent the user from taking a good advantage of a very important feature which is the “Back” button in their browsers.
Flash content make it a nightmare for the developers to add or remove buttons from the navigation without missing up the whole interface.
I can go more, but I don’t think that this is a good place or time for that…
Best Regards,
Hassan
Very great observation I see a lot of bad url structure and poor search results on my website and it drives me crazy
About the “Irrelevant URL Structure”:
One thing I dislike when it comes to URL-rewiting is all the missplaced trailing slashes.
When I see a trailing slash in URLs, I expect a list of articles, kind of like in a folder. If all i get is a single document I see that as a broken promise. I would much rather see a link like “../articles/avoid-web-design-mistakes.html” which tells me that this is ONE article.
For SEO, It doesn’t seem to matter too much:
(Matt Cutts on stripping extensions from URLs: http://www.youtube.com/watch?v=dSG6C33GwsE )
Same here … I just hate Flash. I have no reason Y we should use flash instead of interactive JavaScript!!
We try to avoid flash as much as possible and to do much better using everything else
The last sentence “Most users don’t even know what a browser is anyway.” is so funny and so true!
An excellent post.
I see people’s sites everyday and the little mistakes really do add up to become a real problem.
Saying that, regarding your comment on flash, apparently Search Engines are soon being coded to be able to spider / index flash? I heard / read this on some website but not entirely sure where as I can’t find the article.
I used to use alot of flash but avoid it now due to the lack of optimisation opportunity.
This is actually the first I’ve heard of the Google Custom Search. I just tested it out and it is awesome! Thank you for the tip. I passed it along to the rest of the Management team at my office so we can incorporate it in to our blogs and other websites.
Great post! thanks for the tips
The most shocking part of this post was the amount of Flash fanboys in the comments. I felt like I stepped into a Time machine and went backward a bunch of years.
Flash might be useful for some things but building websites is NOT one of them
I think another main one has to be consistent menu layout. Customers love having the same menu there it gives them something to sub consciously remember how to use!
Interesting points, number 3 – i always find that websites with bad images can bring the whole site down. Its also very important that the images are well optimised for the web as well.
Awesome.. Great Collection.
The Mighty 7…
all points are fine… ‘flash’ point is outdated and as Flex developer i must say, there is lot of stuff html and javascript simply can’t do, or it’s too complicated to do… YEAH, to use flash only for navigation is non-sense and waste of time…
but as mentioned above, Flex 4 brings so many things you web-developers dont have clue about…. but your are mostly coding sites with static text, that simply do nothing, so it’s ok for you ‘to not to use flash’ and i just have to say, stick with HTML and pray for frameworks like JQuery
… but for those who look for enterprise, there is only flash/Flex or Java way, if you like it or not.
Also big mistake is bad markup, so it’s hard to make user css for site.
/personal nitpick
A website is supposed to be a functional tool that can promote a certain company, product or advocacy. The most effective way to do this is to remove unnecessary applications. I liked the suggestions that you made in your post. It’s true that some advanced techniques like flash and images are often misused by designers.
We avoided that particular mistake when we created our website through the help of a web development (toronto). We paid close attention to the details that will be included in the site. The web designer (toronto) made sure that the necessary links are in place. We would be incorporating your other suggestions when we make site changes in the future.
Very informative post. Thanks!