Web Usability | The Difference Between Average & Exceptional Web Design

Less than one person in every one hundred visitors to the average website will buy or take your desired action, be it a sale, email optin, RSS subscribe or contact request! Increasing this visitor-to-sale conversion rate is all about usability and implementing a simple conversion path, that takes your visitor by the hand from entry to exit, your Most Wanted Response.

Good usability is about 1) Becoming Your Customer and 2) Attention to Detail.

Become Your Customer.

Get inside your customers’ minds and be them. See, think and feel what they do when buying using your site and buying your product. It is about how your website should look based on its theme, colors, design, layout, etc, to make your browsers buyers want to spend time and money there. Get them to take action and give you your most wanted response. With regards design you essentially want something that is contemporary, clean, and inviting to your potential and target customers; often neutral is best with lots of background white space, a clean color, like a light grey/gray and 1 or 2 accent colors to give identity.

As an example, a website aimed at new mothers could use light blues, pinks and images of attractive babies. A website aimed at selling high-end, exclusive furniture might well use blacks, grays and white to demonstrate class, with guarantees and security logos to build trust and show that the website offers customers military strength security and that they are safe to spend here. In either case, use words and language that your target customer understands and uses.

Taking the time to fully understand your target customer will consequently dictate the look and feel of your site, especially relating to the features, layout, design, logo, colors and language used.

Attention to Detail.

Be detailed and specific, clean up typos and grammar. One spelling mistake can give the impression that you do not check things. If you cannot spell, or cannot be bothered to check your spelling, a customer will doubt that you can handle their credit card and personal details responsibly. These are subconscious thoughts and references that customers make.

Good Usability makes the Difference.

Usability includes everything from the way the graphics, images, text, navigation menus are used on the website. Prospects (potential customers) need a simple, clean path from entry (entering your website) to exit (having bought your product) without resistance or site elements that make them have to think or work out what to do.

Using poor quality website software will affect usability for you and for your customer. Problems include; a slow load time in your user’s browser, poorly laid out products, inferior search engine optimization features, all leading ultimately to an arduous visitor experience.

Good website software loads fast, has a great structure for the user so they can find your categories, pages and/or products easily, and is built so Google can find and index your pages and products with ease.

3F Strategy:

The days of having a simple 5-page brochure website with your company details and a few pictures are long gone. Your average website now generally has at least thirty pages plus, many over a thousand pages. These are big websites with lots of content and multiple images per page.

Yet, a surprisingly large number of businesses both large and small simply do not understand websites and their architecture. They launch websites that actually drive customers away because they are slow, cluttered and use complex navigational menus that you would need a college degree to understand.

However, you can easily make your website work exceptionally well. In fact, the most simple, basic strategies are often the most effective, but the most overlooked. Many of the latest software, web tools and website modules available offer make it easy for your site to be dynamic and interactive. They allow you to add more content, more easily, without having to call your web developer every time you need to make a simple tweak to the information on your site.

‘At a fundamental level you need to implement a 3 F Strategy: Your website must be Fast, Functional and Familiar!’

Most people go onto a website with a specific goal in mind - for example to read an article, sign up to a newsletter, subscribe to your RSS feed or buy a product. You have to help them accomplish that goal, and fast. People do not want to wait forever to negotiate their way through arty graphics or unfamiliar navigational menus or even worse, wait for Flash to load.

Many sites still have not taken this lesson on board; even a decade after some big name online websites and retailers went belly up. Pretty but ineffective websites with unnecessary Flash interfaces and areas that users never venture into are very common. In addition, even with broadband internet in millions of homes around the globe, many websites still take forever to download. Let’s say it again – you only have approximately 5–7 seconds to make them stick, or your prospects are gone!

‘User experience and interactivity is critical for your success on the web, as that’s all there is! This is the conversion process personified!’

Your website should also function like other successful sites. Therefore, if you design a new menu interface with buttons in unfamiliar places, your users may not know how, or simply not bother to learn how to use it and then leave your site. A user may admire a pretty site once, but they will not return nor make a purchase. In contrast, people will return to a 3 F site (‘Fast, Functional and Familiar’) repeatedly. Your 3 F site will generate sales, repeat traffic and increasing profits.

Word of Warning: The danger of the readily available and open source website features and modules is that they have in some instances brought needless complexity within the reach of anyone. This can result in the temptation to spend a lot of time adding them to your site, leading to a huge waste of time, energy and money.

‘As the Saying Goes: KISS = Keep it Simple St*pid!’

Website Usability Essentials | Usability Tips for Your Website

A clean, clear and simple navigation layout, with multiple navigation and product search options is the way to optimize usability—and consequently maximize sales.

Know your Customer.

If you do not know who your customer is, find out – and quick! We’ll discuss this in more detail shortly, but in order to maximize your most wanted response, sales and conversions you need build your website specifically for your target customer.

Demographics & Psychographics.

This is simply about communicating to your audience effectively. Every personality type, every age group (within reason), every intelligence level and every internet experience level can land on your website. Have you considered building your website for the visually impaired, so they can easily navigate? How about providing how-to guides and help videos, to educate your users? These are just two simple examples to get you thinking.

Multiple Languages.

Offering multiple languages and selling globally can on average add 25% to your sales and conversions. This obviously depends on the most wanted response of your website and if you sell products, the products you are selling, and its suitability to be shipped overseas. However, having a global reach gives you and your customers a win-win situation.

Ask your web developer if they have a stable and reliable multi-Language module, and can you see it in action on a live site. Many branded e-commerce software solutions now come with this option. When testing on a live website, look for any text overflow in box headers, etc, as words can be longer when converted into other languages.

Google’s Free Website Translate Tool.

Google offer a Website Translator module that can be integrated into your site in minutes, by way of a simple piece of code. This will add a simple drop-down menu to your site, in your chosen location, and will provide your site users with approximately 50 different language conversions.

Note: Any text overflow present, when your default language is converted, is something you may just have to accept. So weigh up any negative effect of this text overflow versus the simplicity of using this module, and the extra sales you could get as a result of selling globally.

• Google Translate Tool: http://translate.google.com/translate_tools

Contact Forms.

Using a clean and simple contact form is essential, so that would-be-customers can reach you easily. I prefer contact forms to displaying an actual email address on the live site, because spammers can get hold of your email address. If you add a CAPTCHA challenge response (security code) onto your contact form, any spam attempts are blocked.

Search Box.

All good websites, especially e-commerce websites must have a search box option, as this is one of the first features a user will look for when entering your site and searching for products. More often than not, prospects will have arrived at your site direct from the Google search engine where they will have used the search box feature. So give them consistency and offer a search box.

Note: Test your search feature for accuracy of search results, before making your website live. If you give poor search results to your visitors—as many low-end websites software and e-commerce solutions do—you will deny your prospects and customers access to your site information and product offerings and frustrate your site users.

See Google’s Commerce Search for ideas: www.google.com/commercesearch/

Easy Navigation & Product Menus.

Finding information, areas of your site and products easily is down to using a clear hierarchy of tiers, using text links or buttons to navigate from the home page down to the relevant information and product pages. This clear structure is critical so your site user knows where to click to find the area, information and products they want. Use clean and uncluttered menus and product menus and navigation bars. If you have a long menus, split these into groups with a small heading per group so that it’s not one long—hard to read—menu.

Give Various navigation options so Customers can Easily Find Your site info and products:

• Use a simple search box that scans your site content for matching keywords
• The header navigation bar can have a specific link or for ecommerce sites a ‘Shop’ link/button linking to a page with this specific information and all your product categories listed all on the one page
• Alternatively use a header navigation bar with a drop down menu displaying each main category or subcategory
• A left hand site menu or product menu can detail each product category or subcategory, using text or graphic headers for each and as in the paragraph above following a linear path to the products
• Taking navigation to its optimum level, a filter module giving the savvier net user a way to drill down through product attributes, to find specific products in seconds
• Thumbnail page (category or subcategory) will have sort features to filter by type, price, date, amount, or alphabetical order, and the ability to ascend & descend these options and a ‘View Items Per Page’
• Specific site items, areas and Product promotions on your home page or left or right hand columns – for example Top 10 Best Sellers, New Arrivals, etc.
• You can position site areas, modules and information including ecommerce site elements such as Best Sellers and New Arrivals in your main site header navigation bar for optimal prominence
• Footer Links provide quick access to specific categories or direct to specific site areas and best selling products (this is a good strategy for SEO too)

Link to your key site elements and products from your Blog, How-to Guides, Videos, etc.

Highlight Categories.

When a site user is in a specific category on the website, highlight this on the navigation bar so they know exactly where they are on the website at any moment. This can be by way of a different shade of button or an underlined or bold font. Alternatively, use detailed header text to show in what category they are currently located.

Breadcrumbs or Breadcrumb Trail.

The small horizontal links positioned at the top of site and product pages—directly below the header navigation bar—give users a way of keeping track of the path they have taken, and show them their current location within your website. The term comes from the trail of breadcrumbs left by Hansel and Gretel in the fairy tale; as they go deep into the forest, they drop breadcrumbs to help them find their way out.

Breadcrumbs are very useful on deeper sites, especially large e-commerce websites that have lots of categories, products and pages. It is your decision if you want to use them. Some websites do, some do not. They can be used for navigational purposes, and/or as an advanced SEO strategy.

Most sites use these poorly. This means that a large percentage of site users and e-commerce shoppers do not know what they are, or what they do. If you are using these for user navigation then do exactly that, showing people their current location on your website. It is important to highlight that the breadcrumbs are navigational links and can be clicked—instead of having these small but very useful links camouflaged.

I’d even recommend highlighting the breadcrumb link of the area of the site they are currently in, like this below highlighting the current location:

You Are Here: Home > Category > “Your location”

Ecommerce Checkout Breadcrumbs:

Using a breadcrumb trail in your checkout process is highly recommended even if you opt not to use one for your product hierarchy.  This is detailed more in section 5 entitled ‘Checkout’, further down.

The top two breadcrumb images below are positioned at the top of the checkout page. The bottom 2 images are both used on the same checkout pages. The text in bold, ‘You are Here’, sits at the top of the checkout pages and under the site main header; the small round icons sit at the bottom of the checkout pages. You can be flexible and also use one or the other, either at the top or the bottom of the page.

Sales Funnel – Guide Your Visitors.

If you want people to get to your key “money pages” and site areas and if you have an ecommerce site-buy your products, take them by the hand from entry (entering your site), to exit (ordering a product, taking your desired action): either explicitly tell them exactly what to do within each step, or make it so obvious and self-explanatory that nobody could miss it. This is your sales funnel. Good sites and good e-commerce websites have them. If a customer lands on your home page, then subtly guide them to your category pages as fast as possible, then into your main pages or product pages, and then into your checkout or most wanted response/action page with as few steps and as little resistance as possible.

Ecommerce Website Product Hierarchy.

Ecommerce websites follow a hierarchy or tier structure, like a tree with branches. However, if you go deeper than three clicks—from the home page— before you get to a product page, you will lose visitors and Google will struggle to find your products for ranking and SEO purposes. To get it right, there are typically two popular product hierarchies used on ecommerce websites.

Recommended Ecommerce Website Tier Hierarchies:

1)      3 Tiers: 1. Home Page > 2. Category Page (or thumbnail view page) > 3. Product Page
2)      4 Tiers: 1. Home Page > 2. Category Page > 3. Subcategory Page (or thumbnail view page) > 4. Product Page

3 Tier Product Hierarchy.

If you have a DVD website for example, you would structure it like this.

Tier 1 – Home Page: The Home Page is the top tier and displays your products by category on the product menu links. When a customer clicks a product menu category (such as Comedy, Drama, Sport, etc.), they enter into the Category Page (also known as a thumbnail page).

Tier 2 – Category Page: All products within this specific category will normally be laid out on the page using a thumbnail view. This is like a preview of all of the products in this one category page using a small thumbnail image per product, maybe a small intro description, possibly price and customer review rating and a ‘view more’ or ‘learn more’ (or similar) button. When you click the thumbnail products link or image, you enter into the main product page for that particular product.

Tier 3 – Product Page: This is the product page where the customers will ‘add product to cart’ before entering the checkout. You will display main product images, description, price, add-to-cart/basket button, etc. on this page.  See Element 7 for Product Page information.

4 Tier Hierarchy.

If you have a clothing website, you could structure it like this.

Tier 1 – Home Page: The Home Page is the top tier and displays the products by main category on the product menu links. When a customer clicks a product menu category (such Men, Women, Children, etc.), they enter into the Category Page.

Tier 2 – Category Page: Here the categories will display sub categories from within the main categories such as (Men’s: T-shirts, Shirts, Knitwear, etc). When a prospect then clicks a product link such as T-shirts, they enter the Sub-Category page (also known as thumbnail page).

Tier 3 – Sub Category Page: All products within this specific category will normally be laid out on the page using a thumbnail view. This is like a preview of all of the products in this one category using small thumbnail images, maybe a small intro description, possibly price and customer review rating and a ‘view more’ or ‘learn more’ (or similar) button. When you click the thumbnail products link or image, you enter into the main product page.

Tier 4 – Product Page: This is the product page where the customers will ‘add product to cart’ before entering the checkout. You will display main product images, description, price, add-to-cart/basket button, etc on this page. See Element 7 in the following pages for Product Page information.

Sort Feature.

It is critical within the sales funnel process to offer usability options to your prospects and existing customers, but you must make it seamless. Category (Thumbnail pages) must provide various sort-filtering options that could include:

• Sort by Type
• Sort by Price
• Sort By Color, Brand or other specific
• Sort by Date Newest added to Site
• Sort by Best Selling
• Sort by Amount in Alphabetical Order
• Ability to ‘Ascend & Descend’ all of these options
• View Quantity of Items Per Page’

‘Sort By: Type, Price, Date, Amount, Alphabetical Order’:  this enables customers to quickly find the product they want—then you can get them into the product page so they can place an order.

Two Popular Shopping Cart Processes.

When customers ‘Add to Cart’, there are two common methods used by e-commerce websites.  It is important to test each before selecting a model to follow. We’ll discuss more on this testing (Split Testing) in Step 4.

Standard Cart Process: When a customer adds a product that they want to buy to their cart, they are automatically taken to the Shopping Cart page (as the image below shows). From here they can click ‘Continue Shopping’ that will take them either back to the product page they have come from or to the home page (this simply depends on how you set the site up). Alternatively, your customer can click the ‘Checkout’ button and place the order on the Cart/Basket page.

New Cart Process: When your prospect ‘adds product to cart’ they stay on the product page. They are then presented with a confirmation (pop up) displaying the cart activity. They are not automatically taken to the cart page as in the Standard Cart Process. The cart page still exists, but you only go there if you click the ‘View Cart’ or ‘Basket’ link.

Ecommerce Trade Accounts.

By way of a simple trade application form on your website—similar to a contact form but with company details—you can offer trade customers a discount on products. Trade customers complete the form and their details are then stored in the e-commerce trade module, in your Content Management System (CMS) back-end, awaiting your approval. It’s all managed there.

Website Conversion Essentials | Conversion Tips for Your Website

Usability and Conversion go hand in hand. Without great usability your website conversion rate will suck. Conversion is the process of converting a prospect into a customer. A conversion equals a desired action (your Most Wanted Response) such as an email opt-in, RSS subscribe or sale.

When you first launch your website, it will not be firing on all cylinders. There is no way you’ll get it converting at the optimum visitor-to-sales conversion rate from the outset, until you analyze user data – and this can only be carried out once you actually have enough traffic to gather usable data. Only when you consistently get at least 50–100 people a day on our website will you have enough metrics to judge and get actual results. The more unique visitors per day, the more accurate the data will be.

However working on a website that is growing and not yet at its peak is not a problem. As the saying goes ‘You Don’t Have To Get It Right, you Just Have to Get it going’ so realize there will always be room for improvement, and increases in your conversion rate.

‘Use these critical conversion tips on your website today and immediately boost profits… or use when you have enough user data!’

Marketing Costs vs. Conversion Increases.

Should you be spending money on marketing if your conversion rate is poor? You can and should, but then at least pause when you get enough data to analyze and refine, as mentioned above. The key to good conversions is Traffic>Conversion>Relationships, and the results can be explosive that are attainable if you continue to refine your website over its life cycle. This can increase conversion rates from 1% to 4% overnight from organic traffic alone, PPC is typically much higher. Moreover, by doing so, if you sell one product per day at $100, then overnight after making subtle design and navigational changes you could be taking $400 without spending another cent on marketing.

Websites and E-commerce websites characteristically have two main resistance points. This ultimately means visitors to your website will stay and take your most wanted response or buy your products, or they will leave faster than they arrived.

Resistance Point 1: The moment a prospect enters your website.

As you approximately have 5–7 seconds to capture your visitor’s attention, you need to get them interested in what you have to offer and make them stick to your website. They will either click to another page, buy your product or leave. If they leave on the page they enter on, this affects your visitor-to-sales conversion rate and bounce rate. Resistance Point One can come from any design or layout element: poor colors, images, text (headlines & descriptions), buttons (shape, color, and text), badly worded links, poor navigation, a design that’s too busy, price, etc. Remember, this is primarily a subconscious decision.

The average conversion rate on websites including e-commerce website is less than 1%. Less than one in every one hundred visitors to the average website will leave without buying a product. Bounce Rate is the percentage of people that enter your website on a specific page, and leave from the same page without clicking to another page —they see only a single page before leaving.

Resistance Point 2: Any Step of Your Website Action page or Checkout Process on an ecommerce store.

In this example we’ll look at an ecommerce website but simply relate it to your action process, be it an opt-in, RSS subscribe, form action, payment process or order.

Scenario: A prospect has landed on your website, and they are interested in your products. They ‘add to cart’, and enter your checkout process. This is the next critical zone where prospects tend to bail out! Average dropped shopping cart percentages (also known as cart abandonment rates) are in the 80% plus range. This is when a would-be-customer leaves your cart checkout process and your website without buying. For every one hundred people entering the checkout process, only twenty or less on average will complete their order.

For every additional step (or page) you have in your checkout process, you potentially lose more and more would-be customers. We will address this in section 5), ‘ Checkout’. There may obviously be more areas of your website that create resistance to your prospects, but it is of critical importance to get these two points right.

Usability and converting traffic comes down to the old adage ‘KISS – Keep it Simple St*upid!’