Design Mistakes that will cost you sales.
I have posted this article after recently taking a look at a few of our clients’ websites, some of them designed by us some of them not. When 3001 web designs a website we give it a nice clean professional look and feel and of course take care of the coding to make sure it is search engine friendly.
Then we let our clients loose on the site to create their own pages and add their products. While they may not realize it some of our clients are costing themselves sales or losing potential memberships due to some very simple mistakes made when creating pages themselves. The idea of this article is to both educate you and make sure your site is not making any of these costly mistakes.
I will be referencing WordPress a lot during this article, as most of the sites we have built for clients use this software, but these points also apply to non-WordPress sites. Let me first begin by saying that just because WordPress comes with lots and lots of functions in the built-in text editor, it does not mean you have to use them all, let me explain how this can be bad for your sales/sign-ups.
Web Design Standards
One of the biggest things that will cause a website to lose sales (apart from lack of promotion) is basic design flaws and layout mistakes. There are certain “No No’s” that you may not be aware of when building your site’s pages.
When a website is designed by a decent web designer they will follow industry-accepted standards for web design. These standards are created and adhered to by web designers to maximize the effectiveness of modern websites for both search engine indexing and more importantly ease of use for visitors.
I am sure I do not have to tell you that the visitors are the number one consideration when designing any website.
How Visitors Use Your Site
Millions of dollars of study have been done into how web users behave when they visit websites. These studies tracked the eye movements of web users to see EXACTLY what they look at and for how long on a visit to a website.
Here are the most surprising they found relating to web design:
The visitor has an overall glance at the page to decide whether or not the site looks professional and or useful to them, this decision is made in under 1 second, that is all you have to make a good impression or they leave.
They then look directly to the content of the page whether that be information or products. If they do not see the information they want they will usually check out your main navigation next.
Take a look at the following image results from these eye-tracking tests and look at how little the visitor focuses on the sites graphic design. The coloured areas on the following heatmap are where the user focussed their eyes. The dark red is where they looked the most, it is clearly the content getting the most attention. Without wanting to sound brutal they don’t care much about your site’s design as long as the overall feel is professional.
We will often suggest to clients that perhaps they should change something in the pages they have created because it does not conform to industry standards, again what you need to remember is that web design standards are not created or set by web designers and website owners, they are based on what customers actually do when visiting websites. Confuse a visitor to your site by presenting them with fancy layouts they are not used to and they will leave.
Here are some basic no-no’s for your site, these are based on what web users say annoys them, plus a few mistakes that can affect that VITAL “overall feel” glance when they decide how professional your site is. Be sure to read this list and if your site has any of these errors we highly recommend you correct them.
The first two mistakes are to do with non-text issues then we will move into the text problems as a result of overusing the text editor.
1. Pop Up Windows (Not to be confused with chatbots)
These should be used sparingly and ideally not in the first few seconds of the visitor’s experience which can be annoying if you are trying to read. Exit-intent pop-ups (triggered if the visitor goes to leave your site) can be effective for building a mailing list. If you plan on using any kind of pop up make sure there is a good reason and use them sparingly. Chat windows offering help or guidance are not included in what we are talking about here and can be excellent for generating sales and leads.
2. Flashing Banner Ads
People have mixed feelings about these, some web users hate them others don’t mind them. Our way of thinking is that anything that flashes advertising another site has the ability to attract the user’s eye away from YOUR product, service or the information on your site. We are not saying don’t use these but be careful where you place them. Do not put them above your main content or at the sides of pages near your navigation. If you want to use animated banners put them towards the bottom of your pages.
There is one exception here if you run a free information site and your income is derived from clicks on these banners or other ads then put them where you think they are most likely to be clicked even at the top of the page.
3. Funky Fonts
This is a BIG no-no. Windows computers come with core fonts that are chosen as core fonts for a good reason….ease of reading. Yes, we know you want to make your site original and different but trust us the comic sans font or any non-standard font that web users are not used to can affect how much information they read and their overall impression of your site. WordPress, for example, includes a very easy to read standard font set. If you do want to use custom fonts make sure they are easy on the eye and look professional. Also, check that they are easy to read on mobile devices as well as desktops or laptops.
4. Coloured Text
Ok let me state this as simply as I can 99.9999999% of the time text on web pages should be BLACK or dark grey on a white background, links should be blue and warnings should be RED. It is a fact that black on white is the easiest on the eye when reading.
How many books have you ever bought containing blue green-yellow or orange text? You might think that Green, Pink, Blue Or Brown writing looks nice on your site but it does not conform to web standards and looks unprofessional. REMEMBER the first glance of less than one second, if a visitor finds your site unprofessional they will not buy or sign up. Is your purple text worth losing sales for?
Exceptions to this are Headings and sub-headings which can and should be a well-chosen contrasting colour. That colour should normally blend with the rest of your site’s theme in a way that it doesn’t look odd. Take a look at our own home page and see what we mean. We use Black for headings to make hem stand out and facilitate scanning for information in sections the rest of the text is a clean grey colour.
Headings are normally coloured by WordPress’s style sheets as standard so if your designer has set them there really is no need for you to change the colour of the text.
5. Text Size
Again something you do not need to mess with if you use WordPress. WordPress style sheets specify the text sizes as percentages or fixed font sizes in standard CSS language. This allows web users to view your site using their own computer specified viewing settings when viewing web pages, very useful for those who may have visual disabilities.
Different computers are set at different screen resolutions, though your resized text may look great to you, it can look awful on the visitors’ screen. Try not to mess with text sizes other than for headings, in which case you should really use the drop-down formatting options for headings in your WordPress text editor.
6. Logo/Header Size
This goes back to the less than one-second glance. Users largely don’t care about your logo, yes branding is important but your logo should be ideally at the top left of the page and should not be too large. The deeper the logo is, the deeper the header or navigation row becomes and this increases scrolling for your visitor to get to the information they actually want. Just go look at any big company website and look to see where their logo is and what size it is.
7. Text Centering or Justifying
I can not stress enough how sloppy and amateur this looks. The web standard for text is to align it to the left of the page (headings too). The centred text should only be used in very specific circumstances. Perhaps in a call to action or within a hero section at the top of a page but as a rule, it is another no-no.
Imagine how silly Google or Yahoo results would look centred instead of left-aligned. Your pages are no different.
Centering text makes it harder to read and can subconsciously make your visitor uncomfortable, do that and you are increasing the chances they will just leave without buying, signing up or whatever else you are trying to get them to do.
Justifying text is also a bad idea, this creates very odd spacing in your paragraphs and again makes information harder to read.
8. Too much blurb!
This is the biggest single mistake sites that sell products make. Your home page should have a MAXIMUM of 1 SHORT paragraph of text at the top of the page IMMEDIATELY followed by images of your product or brief descriptions of your services. If you want to include large sections of text on your homepage you should put this text AFTER the pictures of the product.
Let me explain something. It is true that Google and other search engines look for that text on your homepage to help rank and index your site, but it does not matter where on the page that text is.
If you want massive amounts of descriptive text on your WordPress homepage for search engine purposes, contact us and we will hard code it underneath your latest products. At the top of your page before your latest products, you should have a SHORT paragraph only. Here is an example of an imaginary flower site.
Welcome to Flora’s Flowers. We deliver beautiful flowers worldwide free of charge to your loved ones. We have a wide range of bouquets, roses, carnations and all your favourite flowers and blooms. Beautiful flowers created for you by our professional florists.
A visitor will scan that paragraph because it is nice and short. They can learn that there are no shipping costs without reading your full shipping policy on your homepage. Then what do they want to see? Pictures of the flowers, choices and prices so SHOW THEM WHAT THEY WANT TO SEE, WHAT THEY CAME FOR!
Put yourself in your clients’ shoes always and learn two simple facts:
A. Web users want it and they WANT IT QUICK!
Imagine for a moment that tomorrow morning your wireless mouse stops working. You dig around and find the old back up wired mouse but you want a new wireless one. Off you go to Google search for “Wireless mouse” get the results and click a link to visit a site that sells what you are looking for.
What do you want to see now? The mouse and the price what else?
B. Most of your visitors do not like reading they just scan your pages.
Back again to the broken mouse, you click the link and on the home page of the site, you are greeted with…..
Welcome to Acme electronics. Acme electronics was founded in 1996 by Fred Smith who was tired of being cheated out of his hard earned cash by large electronics chains.
All our items are sourced wholesale from leading distributors blah blah blah blah, blah blah blah blah, blah blah blah blah, blah blah blah blah, blah blah blah blah, blah blah blah blah, blah blah blah blah, blah blah blah blah,
SCROLL SCROLL SCROLL SCROLL………..
SHOW ME THE MOUSE AND THE PRICE PLEASE ARRRRGGGGGGGHHHH!!!!!
Put your site/company information on the “about us” page so that if the visitor wants to read it they can. Put your shipping information on a “shipping info” page WEB USERS DON’T LIKE READING MORE THAN THEY ABSOLUTELY HAVE TO.
Got the point yet????? If not go to eBay, go to Walmart’s site, go to Ford go to any big retailers website you can think of and tell me what you see. You see very little text and lots of pictures of products with prices, so learn from the big boys show your product first.
9. Monster Paragraphs.
These are mainly found on information pages. Remember what I told you above, this is again based on the millions of dollars of research into the eye movements of web users. Unless your reader is really interested in the information they will scan your pages for headings that interest them then read the info below that heading. So make it easy for them to scan. Break your information up into small paragraphs with subheadings that describe the paragraph. Help them find a specific part of the information they require.
Using this method the visitor will read much more of the information that they would if your paragraphs are long or do not have subheadings as it is much easier on the eye.
This article is a good example of this. A lot of information split into short paragraphs that help the scanning process.
In closing let me clear up one thing. Only people who own websites (you) and web designers give a flying hoot about the cosmetics of your site, visitors consider it for less than ONE second then look for info or products they came for. They are hunting for information to make a decision, so show them the info as quickly as you can, make it easy to find and easy to read.
Is your site making any of the mistakes above? They could literally be costing you money. If you have any questions about the layout for your site let us know, remember, unlike other hosts we care about your success we are more than prepared to guide you.
About the Author
Gary McHugh is the author of many website-related articles and owner of 3001 Web a complete web hosting and design service for webmasters of all levels of experience.