Ruben D’Oliveira• Source: 1stwebdesigner.com
In 20 Reasons Why Your Website Design Sucks part 1, I’ve started with a short introduction about why clients should be just clients, and why some self-proclaimed web designers shouldn’t be “designing” at all. We then explored important concepts which you need to know before you start designing and planning a website. A thorough knowledge of concepts like balance, white-space, and overflow make the difference between a good and a bad design.
Like the previous article, we’re focusing on another 10 mistakes that can transform your website design into an unpleasant place to be. However, this time I won’t show you extremely bad layouts that make you laugh, we are now on the next level and will focus on bigger mistakes that good designers make.
11) Distracting Animations
A boring design does not bring light to your visitor’s eyes, however, having too much animation on your website brings plenty of downsides to your business. Distracting the user from the purpose of their visit ensures he doesn’t get the message and doesn’t return. If you plan to use animations on your website, make sure they are appropriate for the product you are selling or displaying. After that, make sure it is correctly balanced with your content, so in order to do that, you need to ask yourself three questions:
- What is the first thing you look at when you visit that specific page (animation or content)?
- How long it takes to view the entire animation?
- Can you read text easily while the animation is playing?
The answer to the first question will probably be the animation, if it’s not you have passed the test and your animation is not disturbing your visits. If the animation is the first thing you see, it means it has a bigger visual impact than your content, and you need to answer the second question. If the answer to the second question is “looping” or “too much”, you have a problem and the answer to the third question will be “no”.
So the rule is simple – the user can’t be distracted while he’s reading, so make sure your animation ends quickly or has a small visual impact.
12) Cross-Browsing
In a perfect world, there would be no IE, people would use the same web browser everyday, and web developers wouldn’t have headaches while coding their websites. However, in the real world, there are hundreds of web browsers and each one renders a website differently.
“Cross-browser refers to the ability for a website, web application, HTML construct or client-side script to support all the web browsers.”
When you start building your website, you simply can’t forget that it will render differently in Firefox than in Chrome or Internet Explorer. So in order to get consistent results on most popular browsers, you need to write clean code and follow the W3C standards.
13) Confusing navigation
Navigation should help the user to navigate your website. If it fails in that purpose, there is no point in calling it navigation. One thing I really hate about it is the need to search for a website’s navigation or the need to figure out how a navigation system works. If you don’t tell the user how to proceed to the next page, he leaves. Your navigation should be consistent, easy to find, and intuitive.
Another thing you should always try to do is to use text instead of symbols. Remember, never ask the user to think.
I actually like localwanderer.com’s design, however, there’s a problem with the navigation. The blue text on the right are buttons which can be tricky to identify as such. I had to move my cursor over those elements to figure out they had a little animation while the cursor is over them, telling me that those elements are indeed buttons. If you need to move your cursor over a button to confirm it’s in fact a button, it means your navigation is somehow confusing.
14) Bad use of themes
With the increasing popularity of market places, it’s possible to see more and more amazing themes with great design and functionality, and companies and individuals who buy them as soon as they see one they like. The problem appears when those themes are not suitable to the image of the company, or when they are incorrectly used. I have seen many companies turning great themes into ordinary designs. That amazing design doesn’t always fit that amazing brand, so be careful buying the best-seller theme on Theme Forest.
15) Labyrinth of information
Although this topic title may sound weird to you, it’s a really common mistake which I usually call the labyrinth effect, and in part, it’s also a problem related to usability. There are great websites out there with dramatic content problems. If the user has problems finding information, he will leave and won’t return.
Make sure your information is easily reachable. It is also extremely important to always provide your contact information on every page of your website, and to make sure the user can easily find it.
I really like bitbytebit’s design, but it clearly suffers from the labyrinth effect. Contact information is situated in the middle of the page, hidden among other information squares.
16) Image versus text
Typography is one of the most important elements in web design, and almost the only element that can be used both for aesthetics and text. However, its misuse can make your website bad for both the end-user and also for programmers and web designers. Make sure you choose a font that’s readable and suitable to your target audience, but you can’t also forget about the person who is in charge of the website maintenance. Using images to replace typography can be a huge mistake, especially in big projects or projects that won’t be updated by yourself.
17) Image Optimization
If your website takes too much time to load, you lose visits and probably profit. You already know that you simply can’t resize your image in Dreamweaver or Notepad, right? The image resolution will be smaller (or bigger) but the file size will be the same, so there is no point in resizing that way. You need to resize your image with image editing software like Photoshop or Fireworks. Resizing, however, is not enough – you also need to compress the image. Depending on the image, you should compress it as much as possible, until you start seeing image quality loss. You can compress it using JPEG, PNG or GIF format.
18) Clear Message
The crucial element of a website is the message that’s transmitted to the user which illustrates its purpose, telling the user what the website is all about. The message should be clear and immediately recognized by the user, as soon as he sees the site. One thing you should always have in mind is that the user simply doesn’t care about you or your website, they do care about fulfilling their desires and ambitions which is why they visit your site in the first place – to help the user with his mission.
The example above fails to transmit a clear message, or any message at all. I need to click on another button to figure out what the website is about. Remember, the user doesn’t care about you, so if they find another brand with a clear message they won’t think twice to exit your website.
19) No Updates
This doesn’t really make your website suck, but it definitely helps. No one cares about a website that is extremely outdated and whose posts are from 2008. Remember that content is more important than aesthetics, so it is very important to keep your website updated as much as possible. If you have a beautiful website with no useful content, the user will leave and won’t return.
20) Full Dedication
Having a website with 20% of inactive functionalities transmits lack of confidence to the end-user. Building a website requires full dedication and attention from your end. Most of us have an “update list” for each website, where we write that during the next week, the 404 Error Page, or the widget discussed during the first meeting needs to be online. After two weeks, you realize you didn’t have the time to do it, because you are now with three more projects in hand, and you also noticed that you have yet to finish some minor details in your online portfolio.
Organization is important, but without dedication it loses its value. When you finish a website, try to also finish every item on your “update list”.
Ruben D’Oliveira
