Why your site sucks
April 4th, 2008
I was thinking today about certain things that make me cringe when I go to sites, and decided to put this rough draft of a list together. You can use it as a checklist of what not to do, or if you care to add to it, feel free within the comments section.
Design
- Splash Page
- If your site has a page before your home page that does nothing but have a logo, or “enter” button, drop it now. This is no longer 1999.
- Favicon
- You know that slick little icon you see on this site up in the address bar? Well that is called a favicon, and you should create on for your site right now. It is an easy way for users to identify your site from others within their bookmarks, or favorites. It is also free real estate to promote your service even further, so why not take advantage of it?
- Confusing Layout
- If your layout appears confusing at all, like for instance if you have 3-columns each of the same width, all the same text, color, etc. the user will not have a clue where to look. It is important to set yourself up with a nice clean visual hierarchy from the get-go to make life easier for the user.
- Overused Layout or Theme
- “Hey, I’ve seen this exact design before” should never be the first words out from potential clients, unless of course thy just forgot about your site, and are just now remembering it. If you are a casual blogger, a default theme is fine, but not if you are trying to sell something!
- You just have too many damn:
- Fonts
- Scripts
- Images
- Colors
- Animations
- I have no idea what that says…
- So your text contrast is off, fix it, pale yellow on white does not work. Red on Gray is giving me a stroke. Clean it up!
- “It’s too small” another thing no one likes to hear…especially when it comes to the size…of…..your……TEXT
- Line-Height, give them lines some breath’n room son.
Development
- Invalid Markup
- Clean up your code. Do yourself a favor and validate ALL of your pages, and make sure you are using a doctype
- Improper use, or lack there of heading tags
- You know, H1, H2, H3…Right. Use them.
- “Div & Classitis”
- Nested divs, that go beyond a wrapper or two, are a bad idea, and clutter your code. Also, contrary to popular belief, classes will not always solve all your problems. Don’t make unnecessary amounts of classes to correct style problems another selector could fix without the bloated markup addition.
UI
- Tons of forms
- Don’t try and rival the CIA’s database by asking for my mother’s maiden name to read your newsletter.
- Inconsistent Navigation
- If on your home page your main nav is on the top, guess what? We expect it to be there throughout the rest of the site.
- Too many items
- You have too many damn items in your main nav if you have more than 6. Limit them, so we can focus on the more important items, and then drill down from there.
- Too many menus in general
- Having nested lists for a sidebar navigation is fine, but what I am referring to is when you have a main nav at the top, then a sub nav on the left, and another mixed nav to the right with more sub levels. If you need multiple menus, please offer the user a breadcrumb trail.
- No call to action
- Great site, but what do you want me to do now…Give your users a jump start to success! If your purpose is to get more blog readers, why not point them in that direction, either verbatim, or with a nifty link.
Accessibility
- Full Flash Pages
- Awesome. I do not have Flash 9.2.3.1.4.qm-4 so all I get to see is a black page! Not so well thought out. Oh, and Flash sucks, so use that as a guideline (that was not entirely true, but use your best judgement).
- Poorly used images
- If you are using images anywhere in your site, make sure you have an alt attribute explaining the image. Also, if you are using images to replace headings, or other text, make sure you have the markup to begin with before you use a replacement method of choice.
- Popups, popdowns, popovers
- Nothing with the word “pop” in the traditional sense of the word (think back again to 1999). This might be a good time to use JavaScript to it’s full potential by traversing the DOM to show or hide stuff. Another option could be AJAX, then you earn bragging rights as well.
- Links open in new window
- No thank you. You better have a damn good reason for this. How dare you tell me I need a new browser to view a link?
- Poor use of title tag
- Take a look down at your “toolbar” for Windows users, and you should see the title text for whatever tab, or page you have opened. The title tag is your friend.
- It just plain old doesn’t work
- Turn JS off and if your site doesn’t work 100, go back to the drawing board, because you are losing a client, fan, or commenter with each passing moment.
- Is that a link?
- If I have to guess what a link is, you have failed as a designer. Style your links as traditionally as possible, ie; blue-ish (not always necessary), and underlined.
- No selected states for menus
- Do yourself and your users the favor of giving at least your main navigation “current” or “selected” states as another form of place identification.
- Where is the search button?
- Whoever said it isn’t cool anymore to have search buttons. Not all users know enough to hit ‘enter’ when through with their query input. Oh, and another thing, don’t give the user instructions on how to use the form. If it isn’t clear from looking at it, you have failed.
So this is by no means a completed list, so please feel free to add to it!
Oh, and if you liked it, why not head over and Digg it?
- Posted at 2:39 pm in resources
-
Leave a comment
Haha, I can relate to this sometimes. Especially when I visit those horrendous MySpace pages. XD
Keep bloggin’. Also nice site design.
ha, absolutely, absolutely.
At work our intranet clients use a CMS that has in my opinion, too extensive of a WYSIWYG, which allows font changes, colors, the whole 9 yards. I take the time to make full style guides for them to follow, and once they get their hands on it looks like a complete mess when I go back to check on them.
Anyway, thanks for the comment, and compliment! Have a nice weekend.
What a list. Great compilation of all the design don’ts. I struggle a bit with divitis at times
i think open in new window is quite effective, I use it for any link that leaves the current site. Otherwise people will go the new link have a looksie and then want to get back to your site, have to click back heaps of times. That as well as PDF’s as they are slow and annoying to load and its easier just to be able to close the tab/window then press back and wait for it to load.
@ mooty
Thanks for stopping in, and glad you liked the list, for the most part anyway!
I think that as far as links go, anytime you present one, you should be prepared to have your user leave your site, or at least leave the current page. Providing a title can help users determine if they want to navigate away.
For PDF’s I would offer a Adobe icon of some sort so they can kind of get prepared for it. The same goes for other types of documents.
Well opening in Tabs is much better, but that is user controlled. I see the goal, but it’s like that old saying “If you love someone, set them free”.
[…] Designs wrote a good blog post, entitled “Why Your Site Sucks”, essentially, a checklist of what not to do. A few examples: “Hey, I’ve see this exact design […]
cheers matt ta for your thoughts, the pdf icon helps, i guess as most people start using ie7 and less use ie6 the open in new window would suit you more as it would open in tabs.
i use firefox personally and open almost everything in a new tab, sometimes i find myself with 70 tabs open by the time i close the browser down hehe.
i don’t really browse in ie6 so I don’t know how annoying it would be having to open lots of links in new windows.
keep the articles comin man.
” * Don’t try and rival the CIA’s database by asking for my mother’s maiden name to read your newsletter.
”
Gotta love that one, hehe.
I think your points are very good, however I don’t think it is knowing about those that is the problem, but actually consciously going through the list when designing and evaluating a website, and then making the right choices. But hey, you can only cover that much with one article, and your list is pretty well
k.
@ mo0ty
At my job, it is basically a Microsoft shop, and almost all workstations have only IE6 on them. Our team if pretty much the only ones with other browsers for testing Extranet and Internet sites, but we still have to design for IE6, daily…heh
@ kontur
Glad you enjoyed that one. And, you are right, it is very different to read something, than to actually apply it.
Thanks for stopping in!
Yes, it’s not 1999! I hate it when people keep insisting on splash pages lol. Nice styling on the comments form, btw.
Wow- you should back up your information related smarm with a little proof reading-
“Hey, I’ve see this exact design before”
@ Suffian
Thanks for stopping in! Glad you like the styling.
@ Will
Right, sorry I had a typo, enjoy your day sir.
Nice article, some good guidelines here!
The other thing about making sure you have a search button is if someone visits your site from a mobile phone, they generally aren’t able to hit enter in the search box to trigger the form being submitted.
I ran into this issue on my mates site when I was trying to search for something specific. Ended up using google to search his site because they provide a search button!
First, great blog layout, and an informative article!
Second, correct the spelling of “address” in the comments form (where it currently says “Your email adress”)
Finally, imho, “How dare you tell me I need a new browser to view a link?” is taking it a bit too far. A new browser window (or tab in Firefox) for external links is slick. Helps keep the focus on the main site.
Cheers
@ Caius
Very good point about the mobile phone users. I would hope though that people would be providing a mobile specific stylesheet.
@ Ashutosh
Wow, I have been slacking on grammar lately.
Also, to clear up the part about “open in new window”, I was not referring to “new tabs”, that is of course if users are using a tab capable browser. In IE6, it is very annoying to have an entirely new window open for all your links. But thank you for bringing up the tab part, I will probably make an edit to that.
Thanks for stopping in.
I’ll going to send this post to all the “designers” that i know, thanks
I’ll add to the list:
navigation and slogan take up half the page.
Excellent and bravo! BTW, may I add one more? Base type size that is too small and makes you strain your eyes… oops, you might want to check that on your blog site.
Anyhow, great article!
@ Lynn
I suppose I could increase it a bit. Thank you for the notation, and glad you liked the rest of the article!
This is great but you know what? Herein lies the reason that all of us new designers are so much in need!!!
[…] Why Your Site Sucks is another good list of things you might fix on your website. […]
Good tips. Links opening in new windows is my biggest pet peeve, don’t force a user preference on others.
http://www.sitepoint.com/article/beware-opening-links-new-window
I just want to say that it’s really annoying to see people nitpick at your site when you are obviously very knowledgeable and have great design sense. Plus, your only response to that sort of feedback is ever so polite. Good job, man.
funny, i just had this links open in new window discussion at work. As a user I prefer links to open in a new window, I hate it when it doesn’t and leads me of the page.
My colleague however said the reverse thing, so I checked with everyone in the office and it came out that 80 percent of the office prefered links to be opened in a new window, that was very interesting information.
I think it depends on the target group how they like to use the site…for example teenagers use the internet differently than lets say the group between 30-40. It leaves me to thinking which one I will end up using on my site.