30 common mistakes in web design | Bypeople

30 common mistakes in web design

The lightning speed which technology is evolving at is changing our habits in many ways, from how we communicate and socialize to how we shop and earn a living. More and more businesses are beginning to base their operations on the web and soon will be the day when every company will function almost exclusively on the web. There is a need for UX designers and company owners to grasp on new ideas on how to satisfy a new digital breed of customers. With almost 10 years behind the e-commerce boom, there is plenty of data and tons of experiences for new entrepreneurs to learn from in order to develop successful strategies. This list is made upon many of the things we have learned through trial and error, taking many punches in the process. Hope you add to this list your own experiences so we can find together what exactly makes a client tick.

Icon by Iconshock.

1. Cluttered layout

A prospective client will instantly bail out from a site that overwhelmingly features a thousand colors and shapes  just for the sake of Photoshop effect coolness. Showing too many things at once will just ruin your opportunity to attract your visitors attention. Your site’s main task is to make your services and products perfectly clear to your potential customers. Let them instantly know what’s everything about…what to expect… make every link and every photo easily accessible and recognizable. Nobody wants to pay for something that’s terribly difficult to figure out. Perhaps you’ve heard there is something taught on design school called margins and grids. USE THEM!

bermudatriangle-iconshock

  • You can’t find a more appropriate example, The Bermuda triangle website. There are no words to describe this mess. You can’t figure out what exactly the site is about, and the links don’t provide any clue about where are there pointing to. Can you find any alignment pattern whatsoever?1. What happened here?
    2. What is this image for?
    3. Is this put here for advertisement or just for fun?

miro-case-study

  • The Miro site is the complete opposite of clutter. Clear typography, enough space around to breathe and straightforward hierarchy makes a perfect example of what can go right in a business website.1. Their purpose is perfectly and clearly revealed upfront.
    2. You are just one click away of obtaining the actual product they offer. You don’t have to be a fortuneteller to find out the download link and information.
    3. Most important features of the product are displayed to a first time visitor without obliging the user to search.

2. Too much words!

Reading onscreen is still a pain. This is an extremely accurate, almost biblical fact.  Monitors are not the best devices to read on, and yet, all we do on them is read!. So folks… PLEASE! take it easy on your visitor’s eyes and avoid tiny fonts and odd color schemes. The idea is not to torture your visitors but to please them.

TypoManchester

  • Manchester city website sure got it right with their bold and clear use of typography. 10 to 20 words in the same line is the most an average user can handle. Keep in mind that web sites are not novelizations of your business. Keep it short. 4 to 5 lines per paragraph is just right; more than that is customer poison. Wide line spacing makes text easier to read. Many studies show that a reader can retain more information when spacing is not tight.

cyprus

  • Cyprus Government web site looks outdated and boring mostly due to it’s terrible use of typography. If they deserve any award it’s for committing almost every typography sin; bad kerning, no contrast, many typefaces at the same time, poor paragraph justification… It’s a reader’s nightmare.

Many web designers ignore the basic rules of typography. Displaying type in a proper way is a beautiful art with many rules to obey and many to break when you get to master it. If you want to know more about typography, you should read our article with all the basics at the Iconshock blog.

3. Dark backgrounds don’t get along with too much text

Information is the most important thing you offer at a website. Your success depends on the way that users understand and absorb what you have to say about your products and services. It is your main task to make this information completely accessible to anybody.

Low contrast between background and text makes your information almost invisible. Text becomes most visible when the contrast between it and the background is high. If you want someone to understand what you are offering, avoid using dark-colored text against dark backgrounds. This is equal to zero contrast. Again, reader’s poison. The same applies to light colored text against light backgrounds.

terrible-web-typography

  • There are so many colors and patterns that it almost hurts. The AAA+ Utah Ski Rental Homes site is the best way to prove that bad design can give you a headache.

Another terrible practice is to put text on a heavy textured background. Who the hell thought this was a good idea in the first place? Use only solid colored backgrounds to enhance the readability of text. Busy or textured backdrops make text difficult to read and attracts the visitors attention everywhere except to the information.

Although there are some very good examples of light typography over dark backgrounds, it is true that the human eye takes more effort in focusing on light patterns over dark surroundings than the contrary. So, if you have a lot of text information to give through your site and you don’t hate your users, the best thing is to go with light backgrounds and dark typography. That’s the combo that allows the human brain to perceive information in the best way and reduces eye strain. Black backgrounds are more suitable for graphic-focused sites than text dependent ones.

good-web-typography

  • The atebits site is a perfect example of correct use of dark backgrounds. Their text is concise, their fonts are easy to read and they add a bit of highlight in the top of the page to create visual hierarchy and some flare. Simple and elegant.

4. They want lists!

One of the best things you can do to make your users remember your products or services in a paragraph of text is to list them. Make extensive use of lists with every bit of information crucial to your business and they will remember it for sure.

  • Break down your services or products
  • Build a list
  • Be remembered

Got the point?

Good-lists-web

  • Icons are an excellent way of attracting attention to your lists and giving your readers graphical elements so they can remember your information easier. Remember that one of the easiest ways for our brain to learn is through association.

good-web-lists

  • The Final Eyes website is one of the most elegant examples of lists on the net. With only basic shapes and solid colors they create clear and understandable lists that are a nice to read.

5. Don’t scatter your information all over the place

Since the advent of print, a thousand years ago, reading has been a process of scanning paragraphs from top to bottom. Since the arrival of the internet, the web has even changed the way we read. Users usually scan through your text in unorthodox ways, skimming through headlines and jumping from one graphic to another.Some studies reveal that the “F” shape scan is the most common path users follow when reading a website. This means your content is not going to be read entirely, and that the headline and the first two paragraphs are all you have to engage the average user. It is rare that someone goes beyond that. You have to stick in those two paragraphs the most relevant information that you want your possible customers to know about your business.

Visual hierarchy is important because it allows you to control how a visitor reads your page. We all know we are far from living in an ideal world, and people just don’t like to read anymore. You only have a couple of glances from your users to grab their attention and tell them what the site is about before they turn away and go elsewhere.

fnav-iconshock

  • The Fellswoop website is a perfect example of great content alignment and a good example of “F” scan navigation. They place their basic information in a hierarchy that guides the user’s eyes to successfully acknowledge their brand with just one look.
    1. Catching company motto.
    2. Company logo and website options.
    3. Their services.

This is what happens when you don’t use hierarchy, everything is a mess and you just don’t know where to start, you won’t last much longer than a few seconds on this place, enough for taking a screenshot to be used on articles such as this one.

6. Difficult navigation

It’s too easy for anybody to get lost in a website. Too easy for web developers to ignore. The best thing is to test your site and make some UX trials before going seriously online. You will be surprised to see how people get by mistake to places you never thought even possible. Create clear and friendly 404 not found pages, make your sitemap robust and transparent. Do anything you can to turn your site into a crystal clear river awaiting to be sailed.

white-house-usability

  • We’ll never get tired to point out the many virtues of the White House website redesign.1. Clear and always present main links.
    2. Huge grasping photographs and engaging headlines.
    3. Easy to use search boxes.

white-house-footer

  • The white house huge footer serves as a site map with clear as water links to every section.

manidoo-iconshock

  • The Manidoo website on the other hand is hierarchy madness. At first glance you can’t figure out what to look at or what to do. You have to spend a couple of clicks to find out what’s the site about and there is no apparent navigation path whatsoever. What the hell is this place?

7. Unclear headings

The Web is all about giving value to your users clicks. The thrill of discovering the unknown isn’t something the Internet user thrives about. Be clear on your headings and your links. Net surfers want to know immediately what are they reading about and where are they heading at with that next click. Simplicity and straightforwardness is much more appreciated and successful than florid, imaginative, but cryptic writing. The web is far, far away from literature. The average web reader wants direct, clear and concise information, and the less they have to imagine and the less they have to work out for themselves the better.

proper-headers

  • Noupe is one of the best design related blogs in the world, and one of its strengths is captivating users with straightforward, crystal clear headers. When you visit them, you know exactly what they are talking about.

8. Dividing long posts in various pages.

Users prefer always to use their scroll wheel instead of clicking on the page numbers to advance through your articles. This is certainly true with normal posts under 2000 words, but if you feel particularly eloquent and want to write your heart out, you’d better consider dividing your content in more than one standalone article.

nt-times

  • The New York Times is long famous for having long, thorough analysis articles in their printed edition. As they migrated to the web, they have sustained their good prose and quality of journalism and instead of chopping their articles and adapting them to a more web friendly kind of writing (that meaning short, full of spelling errors and mediocre) they have decided to divide their articles in various pages. This approach works for the Times because they have a reading habit audience that expects just that from them. This approach won’t work for everybody.

bold-italic

  • San Francisco web site The Bold Italic takes the long post approach, making each article with a distinct style depending on the topic covered. They never split their posts and each one is filled with innovative graphics to make the large amount of text appealing to web audiences.

9. Nobody cares about your domain name anymore

No one remembers a web address with the exception of playboy dot com or Google dot com. Websites these days are accessed through search engines and social media, and if a user is interested in returning, they just bookmark you. The people that still go to a site through remembering and typing the domain name is a very small percentage of users. So make it the easiest as possible for your content to be bookmarked. Offer subscription. Give newsletters. Invade the web with your link instead of going crazy if your dream dot com domain is taken.

Once people reaches your site, they must find easily a way to stay connected with you without having to memorize your domain and stuff, that’s why things such as RSS subscription and social networks are some of the most useful ways for everyone to store their favorite websites, the other way is by organizing bookmarks, which can be done in a lot of ways on the different browsers, that’s why it’s also important for you to create a nice favicon for your company, so your bookmark stands in front of the rest.

10. Nobody wants to log in!

Please, for god’s sake! Don’t force your users to log in order to see your content. Users don’t like to fill registry forms and repeat the same info they have typed over and over on almost every social media service they encounter. This too depends on your type of business, but as general rule, try to make users type the less as possible. And if you do receive information from them, always be clear about your confidentiality. If you lose a visitor’s trust, that client will spread the bad experience like wildfire.

login-iconshock

  • The Bank of Scotland has not one, but at least three log in forms for their happy users to fill out. It is more than comprehensible that a Bank should have forms to control security, but this bank is taking the rule too far. No matter your service, try to keep logins and sign up’s to the minimal.

11. They don’t want to visit you all the time.

Gmail and Hotmail have made an excellent job on making users almost forget about spam. With that issue aside, people are increasingly in need for ways of receiving information on your products and services without actually entering your site. Users want to know what are you up to, so give your web site easy accessible RSS subscription feeds, and newsletter links.

Call it laziness, or ”economy of movement” but the truth is, people aren’t so eager to click outside their most visited daily websites, be that their email and their social media. One definitive key of success is to mingle your products and services through social media making them a part of the daily experience of your potential customers. So if you haven’t done it yet, go and open a Facebook profile, a Twitter account and start talking directly to your followers.

zynga-facebook

  • Zynga, the creator of the facebook hits FarmVille and Mafia Wars, has violated one of the most sacred core tenets of web start-up wisdom; Never build your business on someone else’s platform. Zynga has proved that micro transactions at the scale of Facebook’s platform are big business worth serious investment. Only in 2009 they have recollected more than 500 million dollars in funding.

redbull-facebook

  • RedBull is winning the energy beverage race in Facebook by creating an incredibly entertaining profile page wasting no precious space with lengthy and boring details of the company’s mission and foundations. Instead, fans can then focus on watching rad videos, playing ridiculously addicting games like Red Bull Soapbox Race and looking at information from the various sporting and musical events Red Bull sponsors. Almost a million fans says there is something they are doing well.

Research on what kind of social media your target users prefer to spend their time as deep as you can. Give things away… make surveys. Test your products with your audience. There are plenty of examples of how big name companies are using these web 2.0 tools for their advantage. Take United Airlines for example. They are the most followed legacy airline on Twitter and the reason for this is because they were the first to believe in the service. They invented the “twares”; special Tuesday ticket discounts that are a complete success. Their discount deals go within hours. You don’t have to be a mogul or a celebrity to harness Social media. Each case is different, you just have to take your time to find out were are your potential customers hanging out and how to give them added value in their daily digital social habits.

jetblue-twitter

  • JetBlue’s Twitter philosophy in their own words “Our goal would be to make ourselves available, help whenever possible, and to show that our brand is built by real people who care about our customers.” They have managed to be the most successful Twitter brand in the airline industry with more than a million and a half followers by turning Twitter into a personal, human direct contact between them and their clients. They have not taken the easy route of giving away things. Think of their Twitter as a 24/7 personal customer service agent.

12. Desktop surfing still rules

Internet-usage

  • Morgan & Stanley, one of the most renown financial and marketing companies in the world, predicts that within the next five years more users will connect to the Internet over mobile devices than desktop PCs. In their study, they state that mobile Internet usage is ramping up faster than desktop Internet usage did. According to their chief internet analyst Mary Meeker, (some call her the queen of the Internet) adoption of Apple mobile devices is taking place more than 11 times faster than AOL, and several times faster than Netscape.

Mobile browsing is the future. There is no doubt about that. Plan for mobile, by all means. Learn how to create a mobile style sheet. But don’t risk an entire project, and blow away your development costs just to be mobile-compatible. Take your time and do it well rather than doing it quick, desktop users will still remain for many years to come.

13. A company is not a name

Nobody out there knows your name, so no one will type in a search query for “Landon’s incredible shoe boxes”. People type in a need. It is your task to rank your answer to that need. That’s how it works. Aim all your efforts in positioning “shoe boxes” rather than spending big bucks on SEO to rank “Landon”.

14. Remember, there are a lot of browsers out there

Don’t discriminate your possible customers by marrying your project only to Firefox. Try to make your website the most friendly it can be to every browser out there. The web is a large sea and you have to be broad in reach.

too-many-browsers-iconshock

15. Don’t be condescending about your user’s machines

Despite users being a bit slow to update their software, normal households do update their hardware more often than you think. Technology is getting faster and cheaper each month and people don’t hesitate on spending on the latest gear the market has to offer. So you can safely design for ultra wide screen monitors and use rich multimedia when appropriate.

internet-penetration

  • Although Africa still is the most poor continent and the Internet penetration rate there is the lowest, the mighty black continent has reported the growth of Internet users in the last ten years has been of 2000%, the highest in the world. These are numbers to take into account. (taken from http://www.internetworldstats.com)

16. Don’t hide your products!

Customers will not come to your site because you know how to smoke through your nose. They will not buy from you because you usually tell damn funny jokes at parties. Users visit you either by mistake or because they want to know about your products and services. They love to see clean product detail pages that provide thorough descriptions and comparisons. Stay sharp and focused. Show what you need to show, and keep out what you don’t. Don’t design cryptic links or create a challenging navigation if you want to actually produce some income from your site.

volkswagen-iconshock

  • The Volkswagen people did everything right with their website; Beautiful and fast loading product pictures, instant display of each item’s price and plenty of additional information at the users demand. Their menu, with its high contrast and excellent readability, is the most accessible element of their site. After all, it is where you browse their products. Follow their example and you will sleep better.

apple-iconshock

  • The Apple website is all about their products. It’s like a worship shrine made solely to praise, buy and enjoy their items. Check out that at any given moment, you can see at their site at least 4 or 5 ways to know about and buy their stuff. And they do such shouting self promotion in such a  style you almost enjoy it.

17. Take it easy with the ads, your site is not a Nascar vehicle!

User behavior on the internet is fleeting and restless. Your main task is to keep the more clicks as possible inside your website, kind of like TV programmers try to keep you from zapping. Keep customers focused on their tasks so that they don’t become distracted when they go through your information. Place advertisement of only complimentary services and products on your site, and keep them unobtrusive with your own goals. Many e-commerce analysts say that you have to avoid all advertisement, but the truth is that many new entrepreneurs need the extra profit. I do agree that the best case scenario is a distraction-competition free environment, but I think that can be obtained gradually as you grow.

toomuch-iconshock

  • Websites can’t look like Nascar machines.

18. Difficult check out processes.

Has it happened to you that buying on some sites seems so unreliable and difficult that you find it easier to turn off the computer and go to a K-mart? Customers might abandon the entire order if checkout doesn’t seem simple and straightforward. Don’t complicate your users life and make the billing process simpler and cleaner as you can. Remember, at this point their goal is to finish shopping, and your goal should be to close the deal as smoothly as possible.

carsonified-iconshock

  • The Carsonified site asks just the right questions and make it very easy for users to check in and enroll in their services. Their design is inviting and does inspire trust. The billing process is a breeze, because they ask only the essential and avoid extra check-boxes with bonus newsletters, subscriptions or browser plug-ins.

19. Staying too quiet

Make it possible for visitors and customers to give feedback about your website, your products and your services. Be in constant touch with your visitors and customers. Try to answer each and every comment your visitors leave you. If anybody leaves bad press about your stuff, take a step at the plate and defend your brand. Argument your defense with data. Back it up with satisfied customer testimonials. Your business is your life, don’t forget about it.

apple-toonoisy

apple-tooquiet

ibmvsapple

  • One of the reasons Apple has become the phenomenon that it is, is because of a steady presence in the media. They have a clever marketing strategy that both for good and bad reasons has them under the spotlight all the time. In contrast, IBM has gone pretty much quiet for some time now, and new generations don’t even know they where giants in the past. Just check on this Google trends sheet how many mentions does IBM have in the past months.

20. Don’t lie, ever!

The worst sin of all is to lie to your mom and to your customers. That is a sure ticket to hell my friend, and I’m not talking about a hell full of Californian blonds and Led Zeppelin concerts. Keep your information updated and fact proven. Include transparent tax rates and shipping and handling costs. Nobody wants to see one price at the beginning and then another at checkout. Include disclaimers when necessary. Everything you do to make customers feel safe and respected will increase your credibility and turn your business into a trustworthy company. Trust is the only easy path to success.

pinocchio-iconshock

21. Unreliable payment providers

Don’t expect ever to go big if your payment provider is “Harry potter’s money pot” dot com. Take your time to evaluate the pros and cons of each and every payment provider out there. Be aware of what your niche is accustomed to use. Avoid up-front costs for the users. This is a very careful subject so do your homework and research properly.

paymentproviders-iconshock

22. Link overload craziness

Navigational links, tag clouds, related posts and things like that do enhance user experience if used appropriately. However, if these links just take you on a carousel to a dozen pages with no sense, then all you’ll end up with is a horde of deserting pissed users.

Malasia

  • Can you count how many links are displayed in this webpage? The Malaysian Government site is a sea of links that is very difficult for any user to follow. Try to minimize your websites sections and links to the bare necessary.

23. Social media frenzy

Sure social media is at the core of this Web 2.0 era. But come on… you will not benefit whatsoever in putting links to 40 social sites on your posts. Nobody on this earth will log on 40 times to share your content. With so much third party crap on a site, you will just look unprofessional and begging for friendship. Want to be perceived as Jim Carey in “The Cable Guy” ?, because if not, you need to keep social media to the minimal. Focus on the sites your visitors use. Don’t get carried away.

socialmedia-iconshock

24. Spending all your time on SEO

News out my friends… SEO is dead. The sunny times will come when Search Engine Optimization will not be crucial to make your business peek out the huge sea. Customer satisfaction, community engagement and above all, quality of content will solely be the backbone of any business. The SEO battles have gone to a point where content is not important as long as your keywords are repeated enough. Does anybody believe in Google anymore? Blogs are becoming infinitely more reliable sources of information because they list and rank content based upon a human criteria of what’s best. Any given query on a search engine deploys the most optimized sites, but that doesn’t necessarily translate as the best ones. There are so many sites doing SEO that doing SEO is redundant and pointless. So stop screwing your code and start thinking on creating some kick ass content.

Don’t get me wrong. SEO is still useful in some way. But consider it as a way to optimize your site to get the most benefit out of the position you earn via marketing and traffic.

tweetwasters-iconshock

  • Internet marketing guru Rae Hoffman and her team made a little experiment called tweetwasters that proved that form without substance is pointless. In just 4 hours after launch, the website had over 300 pages indexed and ranked 1st on Google for the word tweetwasters. After 48 hours the site had managed to hit the Alexa “what’s hot on the web now” list and earned a mention by Techcrunch. But just a week later the site growth halted and now it’s just a tiny spot on the net. Why? because the site had nothing to back up it’s 15 minutes of net fame and was purely designed to prove that you can’t get away with only traffic.

25. Outdated code

Ok… I’m kind of swimming in harsh waters here… but I have to take the dive anyhow… I HATE coding. Never been good at it, and I think I never will. It’s just not my thing. But you do have to pay incredible attention to the coding of your site, specially now, when HTML5 has arrived and the advent of semantic web is upon us. Proper meta tagging and semantic markup are fundamental. You don’t have to do it yourself. Hire a somebody. Ask your kids. They probably are experts by now. Always be updated in the latest tech trends in order to survive. everything you can invest to keep up with technology is a sure bet for success. Or at least a lifesaver.

semanticcode-iconshock

26. Torturing intros

Flash was created to make interactive rich media applications. Not to torture your visitors with minute long animations of rubbish. Flash is an incredible tool, use it only when it really adds functionality and added value. Don’t waste it on futile intros. A long and futile intro is just a perfect excuse for your visitors to go elsewhere.

flash-terrible

  • The Data just data website intro is longer than most average movie trailers. It’s graphics are not engaging at all, and the flash intro purpose is just irrelevant to what they sell. This intro has gone so popular due to the wrong reasons, that it’s no surprise that people visit the site a lot just for the guilty pleasure.

27. Anonymity

Leave your contact information visible, clear and accessible. Think about putting it on every page. Nobody will trust some anonymous web provider. About me pages are often overlooked by web designers, but they are actually one of the preferred destinations for visitors, surprisingly enough, “about” pages are the most clicked page on every site. After all, it is the only way your potential customers can know who’s behind the brand. So take them as what they are worth; your first way to distinguish yourself from your competitors. Use about me pages wisely in order to build the image you want to build for yourself. No need to post your prom date anecdotes, or to post your dog’s YouTube video. Provide visitors with a enticing, human and engaging about me page with relevant information. Don’t hesitate to put some light fun facts if it is proper to your niche and aids some boost to your brand.

whoarewe

  • The arc 90 website has a beautiful way of displaying their team, identifying their field expertise with colored tags and white minimal design. They provide relevant short bios of each team member and a peek at their hobbies and personal life just enough to give the visitor the impression that they are dealing with real humans.

28. Slow loading

Check the load speed of every page on your site. If any load in more than 10 seconds, fix it (2-4 seconds is normal these days). If your developer says they can’t, and it’s not your own network causing the problem, think seriously about hiring a new developer.

slow-loading

  • The 28fields web site has to be a joke. The best thing is that it DOES star loading. Guess how many crazy people out there are actually trying to download the site.

cocacola-iconshock

  • According to the Huffington post, the Coca Cola website is the 6th slowest website of a Fortune 500 company spending 28 seconds to load. Who knows, maybe that’s their tactic so you drink a coke wile you wait.

29. Unnecessary SEO

Most people believe that Search engine optimization is utterly indispensable for your website to succeed. That we believe, is not true. Not that we are saying that all SEO companies are lying to you. What we are trying to point out is that every technique that Search Engine Optimization companies can possibly use to rank you better are no match for good content. You can create fake blogs with clone posts, and repeat a thousand times the same keywords. Maybe you’ll rank better that your competitors in a couple of months. But all that will be pointless and will never reflect as a real increase in your revenue if you don’t have content to back your SEO. Stop worrying about Search Engines and worry instead about building a really great website.  Don’t be messy with your HTML and code your site neatly. Make it accessible and think thoroughly its usability. And most important, focus your energy in offering kick ass content that people will talk about. That my friends is all the SEO advice you need. Content is king.

goodcontent

30. Part time business making

Building online empires is certainly not a part time job. Have a total immersion of your topic, know your clients… research on your niche.. and above all enjoy what you are doing. If you spend more time asking yourself why you are doing it that doing it, you better rethink while you can. Maybe soon it will be to late to throw everything away.

perfectequation



Related Deals


Related Posts