You need more than top rankings on Google. People have to be able to navigate to the product they want and trust you enough to buy. Your website’s user experience (UX) should focus on building your visitor’s confidence by helping them complete their goals. 

Home Page UX Tips That Build Trust On A Quick Glance

Your home page gets the most traffic. Make it obvious that you sell products. Think of your home page as the window to your store. Think Macy’s on Magnificent Mile. Dress your home page with your best products and images. One thing you never see at Macy’s is different dresses swooping by one by one in the window. I’m talking about sliders here. If you have to use them, make sure they are user friendly.

Hero Area Best Practices

Your hero area (also called featured area) is the most prominent real-estate on your home page. You only have 50 milliseconds to leave a good impression, here is how to make it count.

Hero Area Do’s

1. Use simple, uncluttered design. Use as few words as possible.
2. Eliminate everything that does not make an impact. For example, your recent blog posts.
3. Use visual queues like color or arrows to focus attention on a single call to action.
4. Make it easy for people to self identify. Do you sell pricy jackets for women?

Hero Area Dont’s

1. Decorate. Swirls, sparkles, and other meaningless symbols add to the cognitive load and distract your customers.
2. Have outdated content like promotions from last week or even last month. You will instantly lose credibility.
3. Clutter the area with too many messages or promotions.
4. Have an automatically advancing slider or carousel.
5. Emphasize a product that is not representative of your overall mix.

Home Page Navigation

When people visit your site, you want to help them find what they came for. According to conversion expert, Tim Ash, the main focus of your home page is to provide category level navigation. Follow these pointers to help visitors find what they are looking for.

Home Page Navigation Do’s

1. Give visitors a “30,000 foot view” of what your site sells so they can drill down to specific categories.
2. Add your most used tools or buying guides.
3. Provide links to return policy, customer service, shipping and privacy pages.

Home Page Navigation Dont’s

1. Assume you know what people are looking for.
2. Jam every category and subcategory on your home page.
3. Push product level promotions. If you only have a few products, you can ignore this.
4. Use generic stock photos. This screams inauthenticity.

Solid Ecommerce User Experience Boils Down To Simple Primary Navigation

Navigation is critical when you have a lot of categories, variable products or products with many options. Nothing is more frustrating than a cumbersome menu. The quicker people can find what they want, the quicker you can move them through to the checkout process.

The purpose of a navigation menu is to get people where they want to go. Here is a breakdown of what you should address:

Primary Navigation Menu Do’s

1. Limit top menu to 7 choices.
2. Use a secondary navigation at the top right for items like “Contact Us”
3. Use a multi column menu that organizes categories and sub categories.
4. Show high quality images of your product.
5. Make your navigation menu prominent with contrasting colors.
6. Cross reference products into multiple categories. Someone looking for a USB drive may look under Laptop, Accessories, or Computers.

Primary Navigation Menu Dont’s

1. Have a single drop down that takes up a long column.
2. Show link empty category pages to main nav.
3. Over-classify products. If there is only one product in a (sub)category, remove the category and reclassify the product.
4. Don’t use vague options like “more.”

Cart Menus

A cart menu is likely the last button a user will click before taking out the credit card. Don’t over look this tiny icon.

Cart Menu Do’s

1. Show total price and number of items in cart.
2. Link to the cart page where they can see details of their contents

Cart Menu Dont’s

1. Substitute a “mini cart” for a full cart. Your ecommerce site, needs a cart page, not just a cart widget.
2. Link directly to a checkout page that doesn’t show every detail of the products in the cart.

Search

Many users skip the navigation menu altogether and rely on search/faceted search to drill down further. Faceted search can get complicated quickly. From a development and cost perspective, but also a user perspective.  Follow these guidelines to keep things simple and helpful.

Search Do’s

1. Use an open text field box at the top of every page.
2. Use faceted search when there are over 20 products within a category.
3. Filter by price, color, size are basic faceted search options.

Search Dont’s

1. Use filler text on search input. Leave it blank, or say “Search.”
2. Use subjective filtering options such as “heavy-duty” or “light-duty.”

Ecommerce UX Tips For Product Pages

Full product details are critical. For SEO and for user experience. Internal links boost SEO and help the user navigate back to the product listings page. A user friendly layout will have essential product information above the fold.

Product pages are the meat of your site, they need to convert. If  your customer has to select an option before adding to cart, display an error message when the “Add to Cart” button is clicked.

Product Page Content Layering

Your product page can quickly suffer from information overload. You want the right level of product information for people that already know what they want to buy, but also cater to shoppers that need every last product detail. By layering your information, you can cater to both types of buyers.

Product Page Content Layering Do’s

1. Provide a short product summary at the top of the page or next to the photo.
2. Add a border or shaded background to your “action area” – where people select options and click your button.
3. Present the ordering options near the top in the action area
4. Have breadcrumbs on the product pages.
5. Put product details, reviews, data, etc. below the product image and CTA area.

Product Page Content Layering Dont’s

1. Put a large block of copy near or above the CTA button.
2. Hide your add to cart button until someone makes a selection.
3. Make availability information an extra click away.
4. Have a subtle change when someone clicks your add to cart button. People will miss your “Successfully added” message.

A common mistake with many WordPress ecommerce themes was hidden “Add To Cart” buttons.

Product Page Images

Large photos and zoom is about the closest your buyer can get without physically touching the product. Fuzzy, poor quality images make the products look poor quality too. Check out this case study, where bigger, better product images increased conversions by over 300%.

Product Page Images Do’s

1. Use large, high res photos on a white background.
2. Use zoom features to let users see details for themselves.
3. Allow users to scroll to back and forth between images.
4. Provide clear instructions that additional images or zoom features are enabled.

Product Page Images Dont’s

1. Show “lifestyle” images or your product. Show just the product.
2. Don’t muddy up your photos with logos, watermarks or backgrounds.
3. Force an image pop-up to see more details or additional photos.

Build Trust With Buyer Friendly Checkout Process

Your checkout process needs to be simple, logical and distraction free. Don’t complicate it. Macy’s cart page hits many of the main points. The cart shows product details with images, pricing, tax and links back to individual product pages.

Cart Page

The first page in your checkout process is your cart page. You never want to send a user past this page. This page reaffirms what they have purchased in detail. This helps them build confidence and trust in your store.

Cart Page Do’s

1. Confirm everything. Product, size, color, quantity, availability, ship date, estimated delivery.
2. Allow users to navigate directly back to products in their cart.
3. Make it easy to change quantity or delete products. Let users change qty to 0 to remove products or click a “remove” button.
4. Show a picture of the product, in the color it was ordered in. If your customer orders a black jacket and sees a blue one at checkout, they lose confidence.
5. Make the continue checkout button prominent, but allow people to continue shopping.
6. Show the total out the door price.

Cart Page Presentation Dont’s

1. Prematurely ask for a credit card or email address. Let people confirm what they are buying.
2. Don’t use an “Update” button to remove products.

Checkout Page

After buyers feel confident that they are ordering the right product from the right company (yours), it is time to get the party started.

Once users start the checkout process, they want to complete the purchase as quick as possible. Help them help you. Remove distractions and make the process as easy as possible. Don’t make them re-enter their address or guess how to complete the form.

Checkout Page Do’s

1. Ask for only the minimal required information.
2. Replace the main navigation with a “contact” navigation.
3. Keep your checkout process short and your steps clear and logical.
4. Show progress during the checkout process.

Checkout Page Dont’s

1. Present new information or choices.
2. Force people to “join” or “become a member.”
3. Make people re-enter the same information twice.
4. Let users use billing address as shipping address with a single click.

How Does Your Site Stack Up?

You don’t have to have a million dollars to create a positive user experience. Nail these basics and you will get Google and customers to love your site and buy from you.

Interested in learning more about mobile shopping guidelines? Join our webinar on February 10, on “Mobile Shopping: Key Features Users Want” hosted by Michel Sharritt, VP of CueCamp and Situated Research.

Written by: Darren Dematas, Intertwine
Posted by: CueCamp

The post User Experience Tips: How to Seduce Ecommerce Visitors to Buy appeared first on CueCamp.

So it was really great to read Paul Olyslager’s recent post on the “9 Common misconceptions about users.”  One or two of them are common knowledge, but they are all spot on.  I want to share a few of the really good ones and perhaps add a few cents of value of my own.

His first one is perhaps the best.  Users want choices.  One of the primary motivations that drive human behavior is the need for perceived autonomy (see my gamification posts for more on that). We crave feeling in control of our lives and our decisions. Having options is a salient signal to ourselves that we are in control.  In fact a recent TED talk by Alex Wissner-Gross makes the (a little too far reaching) claim that the best measure of intelligence is the ability to keep your options open.

Unfortunately, it doesn’t end there.  Designers make a huge mistake by taking this as a maxim and giving users tons of choices.  This leads to many negative outcomes.  Because users also hate cognitive load.  If making a decision among all of these options feels like a lot of work we absolutely hate it.  That is not perceived autonomy, that is perceived helplessness.  Sheena Iyengar (about whom I have blogged before) calls this choice paralysis.

There is also the strong likelihood of loss aversion.  While making decisions we worry that we might make the wrong decision.  And we HATE that because it reduces perceived competence (another one of those fundamental motivations).  Then after decisions we are susceptible to post-decision regret, also known as buyer’s remorse.  The only thing worse than being forced into an option is being forced to live with that outcome afterwards, always wondering (or knowing for sure) that another option would have been better.  Some of us have this more than others (who Barry Schwartz calls “maximizers” in the fantastic book (and TEDtalk of the same name) the Paradox of Choice), but most of us have it to some extent.

And all of this just in his first misconception.  Thanks for the great post Paul.

Written by: Marc Resnick, Human Factors
Posted by: CueCamp

The post Users Like Options, But Hate Making Decisions appeared first on CueCamp.

Website Usability Tip #6: Recognition, Not Recall

Minimize the user’s memory load by making objects, actions, and options visible. The user should not have to remember information from one part of the site to the other. Nor should the user have to remember or learn a new way to do something. (ex. Checkout Process)

• Use common icons that make sense to the user
• Do not over-complicate your interface
• Only use pop up instructions on buttons if you must

Website Usability Tip #7: Flexibility & Efficiency

Flexibility: allow multiple ways of accomplishing the same thing.

Users can find information through:

• A search box
• Using menu navigation
• Breadcrumbs
• Links in the footer

Efficiency: build in simple and efficient methods of doing common tasks, without making it difficult for someone new to the system.

Amazon’s checkout process and shopping cart system are an example, with users being able to set up a ‘one-click’ checkout system where a default credit card and address are stored to make checkout super speedy and easy.

Website Usability Tip #8: Aesthetic and Minimalist Design

Aesthetics is important when designing for the web. Knowing how to balance aesthetics with what users want can be a challenge.

Here are some key points to remember:

• Make sure colors play off of the colors of a well designed logo
• Do not overwhelm users with too much content
• Content should be relevant to the site
• Use clickable videos
• Never use avatars

A big mistake that web designers often make is adding more pages to a website to make it look more ‘legit’. Always remember that users on the Internet usually quickly skim over information, and avoid wordy text. Overwhelming them with redundant information will make them leave the website.

Website Usability Tip #9: Assist Users

Help users recognize and recover from errors.

• Error messages should be expressed in plain language
• If there is a process for ordering something (or otherwise), guide users through the process
• Never make users guess what to do next
• Constructively suggest a solution if a mistake is made

Website Usability Tip #10: Documentation

Even though it is better if a website can be used without any assistance, it may be necessary to provide documentation for complex tasks.

Any such information should be easy to search, and focused on the user’s task.

• List concrete steps to be carried out
• Make sure instructions are not too long
• Ideally, it should be contextual (placed where it is needed, so users don’t have to search for it)

Let us know if you have any questions on our website usability tips. If you would like a free expert analysis of your website’s usability, request a free usability report from CueCamp.

Written and Posted by: CueCamp

The post Website Usability Tips, Part 2 appeared first on CueCamp.

Website Usability Tip #1: Visibility

Always show users where they are at on the website. 

• Use breadcrumbs
• Highlight where the user is at in the menu navigation
• Use sitemaps

Website Usability Tip #2: Communicate Clearly

The website should speak the user’s language. Nothing should be left up for interpretation. 

• Links and buttons should be concise and clear
• Labeling should make sense to the user
• Labeling should also be short and to the point
• ‘Error 404’ pages mean nothing to most users
• Buttons should be labeled in a way to bring a call to action (buy now)

Website Usability Tip #3: User Error

Users often click on items by mistake and need a clearly marked “emergency exit” to leave the unwanted area without having to go through an extended process. 

• Use clear breadcrumbs
• Use sitemaps
• Have a search button
• Make sure your logo is clickable to take the user back to the home page
• In some instances pop boxes may be useful warning your users of their error

Website Usability Tip #4: Consistency

Consistency is key to keep your users happy and coming back for more. Users should not have to reorient themselves each time they click on a page.

• Keep the same format for all pages of your website
• Placement of menu navigation should remain consistent from page to page
• Heading font sizes and placement should be consistent
• Labeling should not change
• Functionality of buttons, forms, etc. should not change

Website Usability Tip #5: Error Prevention

Even better than good error messages is a careful design which prevents a problem from occurring in the first place.

• Eliminate error-prone conditions
• Check for errors
• Present users with a confirmation option before they commit to the action
• Design a simple environment

Interested in the last five tips? Read Part 2 of our website usability tips. If you would like a free expert analysis of your website’s usability, request a free usability report from CueCamp.

Written and Posted by: CueCamp

The post Website Usability Tips, Part 1 appeared first on CueCamp.

Work with a reliable web design company that can help you meet current and future needs.

People are often in a rush to get something, anything, up on the Internet. Because the average business owner is inexperienced at web design and related terminology, website companies that are anxious to offer a cheap, yet profitable (to them) service, bring up a website on the Internet that may or may not help the client generate additional revenue: the goal of commercial websites.

Also, some business owners mistakenly believe they can save money by creating a website on their own by using free software found on the Internet. Wrong. You’ll spend money to compensate for the mistakes the free software makes. You have to understand: It’s free for a reason — it doesn’t cover many areas of web design.

So, it’s important to consult a web design company. However, conduct a background check before you sign a contract. Check out their previous work; ask for testimonials; ask for phone numbers of previous customers and listen carefully to what they say.

To ensure you’re working with an experienced person or company, ask for a sitemap and wireframe (explained below) with your proposal. Anyone who can’t provide this information lacks usability expertise.

Sitemaps are diagrams that group a website’s pages into the hierarchy that will eventually become the structure and navigation of the website. A sitemap is a visual or textually organized model of website content that allows users to navigate through the site to find information. Think of a traditional map that helps you find places, but a site map goes the extra step by linking each listed item directly to its website counterpart.

Well-designed and organized sitemaps allow for scalability (growth) by intelligently designing the information flow. In other words, the website should always be designed with future growth in mind, which can be accomplished through a well-ordered hierarchy, as represented in the sitemap. A good web-design company pays very close attention to detail so that information is logically organized, which the site’s end-users see as clearly defined and labeled navigation on a website.

Also be sure the web design company include wireframes, these indicate to prospective clients a webpage’s visual design; they lay out how content will be organized on the page for the end-users. A wireframe, a visualization tool, presents proposed website functions, structure and content. It distinguishes the site’s graphic elements from functional ones; wireframes make it easy to visualize how users will interact with the site.

A typical wireframe includes: key page elements and their locations, such as headers, footers, navigation, content objects and branding elements; grouping of elements, such as sidebars, navigation bars and content areas; labeling, page title, navigation links and headings to content objects; and placeholders, content text and images.

A reliable web design company continually considers the needs of all website stakeholders (all potential groups that will use the site) and verifies that they can fulfill their needs easily by using the site. For example, a school’s website might have different information for students, teachers, parents, investors, etc., and each of those groups should be able to locate information that fulfills their goals in an easy, efficient manner.

Another web design tool, an advanced free usability test, checks ease of use and functionality. A reliable web-design company will allow you to test your site and conduct remote tests, too. After the test, it will provide advice on how to decide what changes to make.

Delivering a sophisticated, aesthetically pleasing website helps create both a resource that meets the content provider’s objectives the presents to end users a work of art that draws them back again and again to find out “what is new” because of its visual appeal.

The investment in comprehensive design upfront maximizes the positive impact of the site while minimizing ongoing website updating costs. The initial investment serves as a rock-solid core for future growth, where additional information and features can be added down the road without having to redesign the entire website.

In other words, investing in a website design that meets the criteria presented in this paper reduces the OVERALL LIFE CYCLE COSTS OF THE WEBSITE.

INCLUDE SOCIAL MEDIA AND OTHER RESOURCES & TOOLS TO INCREASE WEBSITE EFFECTIVENESS

Many companies forget to integrate social media into their websites. Social media allows open communication and provides a way to exponentially increase communication channels. Also, blogs open up communication and establish you as an expert in your field. This allows potential customers to get to know you and your business, and build trust within your business. Many free platforms allow the business owner to have a fully functional blog.

For sign companies, many different website features can educate people about signs. A Flash show could depict examples of past work. Also, visual examples could border of the page that explains about signs. Adding a video that educates people about signs could dramatically increase traffic.

Most sign companies and small businesses use their online presence to stake their small claim on the seemingly unlimited Internet. The Internet grows by leaps and bounds daily. Several options can help businesses claim their share of business from Internet marketing; some must be purchased, and others can be accomplished at no charge.

Paid options include targeted advertising and ad placement, through services such as Google. For example, if a small business (say for example, an online hardware store) wants to sell products, it can pay Google to place targeted ads on relevant websites (for example, a webpage on home improvement). Google can help match the small business’s products to the webpage where they’re displayed. This requires well-written content, with appropriate keywords that describe those products or services, and the design of “landing pages,” or the page your website visitors arrive at after having clicked on a link.

For example, if an ad is for hammers, clicks should be directed to a page specifically selling hammers rather than to the website’s homepage. Landing pages make it easier for end-users to find what they’re looking for (which means high relevancy — they require fewer clicks to find what they want), and can be tracked and streamlined with services such as Google Analytics.

On the other hand, many free options can drive traffic to your website. Two free tools, Website Grader and Website Validator, offer suggestions on improving your SEO score and tips on fixing errors on your website. Suggestions include creating a few keywords for your website, which can be embedded in meta tags, and should be unique for each page on the website. These keywords tell search engines what the page is about.

In more technical jargon, a meta tag is a special HTML tag that stores information about a webpage, but isn’t displayed in a web browser. For example, meta tags provide information, such as what program created the page, a description of the page and keywords relevant to the page.

Also, keywords that appear frequently in headings and text on the webpage indicate to search engines page relevance to your readers. Sign-company owners should consider what search queries their clients would enter when looking for them, and make sure those words appear frequently on the website, in headings and verbiage, as well as in meta-tag descriptors (which are hidden from view but embedded in the code of webpages for search engines). For example, a custom electric-sign company would insert such meta-tag descriptors as”channel letters,””LEDs,” “custom,” and “neon.”

A content-management system (CMS) enables companies to edit their content internally, perhaps even without the need for a webmaster. For a small business owner, this might simplify changing the content on their website without having to pay someone to make minor updates.

However, additional systems can add extra complexity. You should carefully choose a CMS system that meets your current and future needs without overwhelming the person that ends up using it. Otherwise, that person will end up either not using it or using it marginally, which is a waste of time and money. In many cases, it’s better to send minor updates to the web developer or website manager, and offload the complexity to somebody that better understands it.

Many companies like to collect a big check to develop a website, but are less eager to help out after it has launched. I advise clients to carefully choose a web-development company for the long-term – and also one that will make quick changes when needed.

FUNCTIONALITY

Particular browsers and users can turn off functionality, such as Flash or JavaScript, to disable the features and content associated with that technology. Some people are annoyed by the “glitz” and disable these technologies to ease their browsing experience. Embedding important content, such as the website’s main navigation system (menu/buttons), in a technology such as Flash can cause these users to miss this content. If end users turn off Flash, and your website uses it to create the menu and buttons, they couldn’t navigate the website.

Good designs should account for all users’ needs, so the most important content is delivered according to standards that are supported (and tested) across various platforms and browsers, including those where particular features, such as Flash, are disabled.

On the daily level, the more frequently you update content, the better. Search engines like to see content updated roughly once a week to maintain frequent crawls. Of course, update frequency can vary, based on the nature of the website’s goals: A news site should change content frequently, while other sites, such as an individual’s personal home page that contains family photos, might not need to update as frequently, because SEO (Search Engine Optimization) is less of a priority.

Also, a page should load instantly. People expect pages to come up within a couple of seconds of loading a website. Of course, this depends on the speed of their Internet connection. However web pages can be programmed to conserve bandwidth and reduce the size of transferred data, such as images. A good web-design company takes special care when compressing images to retain quality, and use dynamic styles that can be drawn by the browser to reduce the number and size of images that need to be transferred.

A simple add-on to a website is a hit counter. Hit counters can be set up to count ‘unique’ visitors, so the same person visiting the site only counts once (based on IP address). This information shows the effectiveness of marketing campaigns to draw new site visitors.

Furthermore, analytics tools measure how long people stay on your site and what pages they visit, and tally visits by geographic location. This can help put the pieces of the puzzle together to see exactly how effectively a campaign or advertisement brings in people, tracking where they go on the site, and for how long.

Michel Ann Sharritt is VP of CueCamp (Naperville, IL), which offers such services as usability-research testing, web design, social-media integration, software usability and analytics analysis. They host monthly webinars that educate the average business owner on websites. For more information, call (630) 962-7043 or visit www.cuecamp.com.

Written by: Michel Ann Sharritt
Posted by: CueCamp

The post What to Know: Hiring a Web Design Company appeared first on CueCamp.

User-centered design (UCD) is an approach for employing usability. It is a structured product development methodology that involves users throughout all stages of Web site development, in order to create a Web site that meets users’ needs. This approach considers an organization’s business objectives and the user’s needs, limitations, and preferences.

Importance of User-Centered Design

In order for your Web site to be successful, users must visit the site to find information or accomplish tasks. No matter what objectives you have set for your Web site, it must carefully balance the needs of users and the needs of your organization. If users don’t find your Web site helpful, they will not use it.

From the business side, you can lower operating and redevelopment costs by developing a product, such as a Web site, correctly the first time around.

The Process

To create a user-centered Web site you must think about the needs of your users throughout each step in the development of your site, including:

• planning your site
• collecting data from users
• developing prototypes
• writing content
• conducting usability testing with users

Creating a User-Centric Web site

The first step is to clearly define your organization and users’ needs, goals, and objectives. To get the project started, begin by asking yourself (and your Web development team) more detailed questions such as:

• What are your agency’s primary business objectives and how do they relate the Web?
• Who are the users of your Web site and what are their tasks and goals?
• What information and functions do your users need, and in what form do they need it?
• How do users think your Web site should work and what are their experience levels with the Web site?
• What hardware and software will the majority of your users use to access your site?

Written by: Usability.gov
Posted By: CueCamp

The post User-Centered Design & Usability Tips for Websites appeared first on CueCamp.