In our best practices usability guideline series, this topic has come up before which emphasizes the importance of the guideline we are addressing today - consistency. While it is a standalone guideline, it is the key to making the other guidelines work as well – to provide the best possible user experience all of the usability best practices you put in place must be done consistently across the site. Consistency allows a casual user to learn your site more quickly and a frequent user to move effortlessly to the content or task of interest. While it is often the first guideline we look at when evaluating the site, it is the last guideline I’m looking at here because it impacts each of the other areas we have looked at in detail already. To understand how, let’s take a look at the elements of this guideline in detail:

Consistency

1. Clear indication of the home page

• This applies in two situations – first, if a user reaches your home page, they should know it
• When seeing the home page, users should never have to question where they are in the site, yet, too often in testing, we see users hit the “Home” link while on the home page to double check. This should never be necessary.
• The home page should be clear, offer a value proposition and highlight the main navigation to allow users to move to content of interest quickly and easily
• Secondly, there should be consistent access to the home page throughout the site. Conventional ways of doing this include making the logo in the upper left link to the home page or providing a “Home” link in the main navigation, bread crumbing and, possibly, at the bottom of the page as well
• The key here is to be consistent in the presentation of the link. If the logo in the left is clickable, every page should have a logo in the same place, linking to the home page.

2. Possesses consistency with terminology, design, colors, etc. and - if offline entity exists – maintains consistency of brand /messaging / image

• These two guidelines go hand-in-hand to ensure you are providing a single brand look and feel to your customer, so we’ll tackle them together.
• The key here is presenting a recognizable image to a user not only across all of your touch points, but within the touch points as well. So many sites today encompass different product lines, different customer targets and vast quantities of content. These are often produced by groups within an organization that do not work together. None of this matters to a customer, so it is important to view your site through their eyes.
• A customer should be able to recognize the site as yours no matter where they are in the site by the design of the page. Logos, colors and imagery should be in harmony with the brand and the same throughout the site.
• Also vital is the language used, not just in using the same terminology throughout the site (including spelling of terms, use of acronyms and capitalization), but also in the tone and level of the communication.
• All of these elements will come together to create an overall experience of your brand with your customer, and, if implemented well and consistently, can reinforce your brand image with the consumer.

3. Page layout / organization is consistent at similar levels of hierarchy

This goes back to the concept of teaching users how your site works and facilitating easy navigation. Users should immediately be able to recognize a main navigation landing page, a category page or a product page and know how the page will work and where to find the information of interest on the page once they have seen one example of it on your site.

4. Navigation and information architecture is scalable for new content

• Web content is rarely static. Once your template is created, you will need to add new content to the site, making room in your design for this new content. In order to do this seamlessly and with a minimum of disruption to the user experience, your initial design of the navigational structure of the site as well as the information architecture you have put in place must be scalable and have room for new content to easily be slotted in.

• • While you want to try to think of all of the possible content you will want to include on your site during the design process, it is impossible to think of all of the eventualities that might cause the need for your site to contain and direct users to new information.
  • If there is no room for expansion of the subcategories / submenus of your navigation and no space in the hierarchy and design of the information on your site for additions, even of another layer of content, you will be stuck creating an inconsistent experience in order to add the necessary information or be looking at a large scale design project every time new content is available for the site. Thinking about consistency before this becomes an issue will force you to create a design that can handle not only projected additions, but any of the unexpected necessities that come with doing business in a digital age.

While these are the key consistency guidelines, there are other consistency guidelines that are important to remember as well that go basics of editing. These include:

• Uniform style for capitalization, punctuation, and correct spelling
• Text links are underlined and follow conventions (discussed in detail in our Navigation and Feedback blog)
• Consistency of speed - Main content loads within 1 second on a high-speed connection

Thanks for reading our guidelines on Consistency. For more information on improving your site, please see the rest of our series on best practices according to usability guidelines on our blog. Also, stay tuned to our blog and newsletter for more information on web best practices.

We have done a number of projects lately with sites that need to look at how they greet customers when coming to their site and this got us thinking about landing pages. Very often, users are not entering your site through the home page any longer. Ads, emails and searches are often driving users to your site. With over 1 billion searches per day on Google alone, you should be giving serious thought to the way users are entering your site and whether or not you are putting your best foot forward when they do. If you don’t greet visitors in the best possible way, your goal - conversion - will not be met.

In this post, we’ll take a look at the different ways a user may be entering your site and best practices for these entry points.

The most obvious entry point is your home page. A user may be familiar with your site, may have seen your URL somewhere, or searched for your site and ended up on your home page. The best home pages:

• Make it clear that they are home pages - a user should never have to guess
• Provide access to main navigation, not only to allow for easy access to information, but also to provide an indication of what your site offers
• Indicate the site’s value proposition or benefits - identify yourself to new users
• Offer a clear path for returning visitors to access their account or personalized information
• Entice users into the site - with images, topics of interest, etc. to encourage further interaction with the site

Today, we want to focus more on the pages users reach when they enter your site via a campaign or search. This may be a page specifically designed to be a landing page or simply a page on your site that is a default landing page because of the amount of search traffic driven to it. There are a number of things that should be done whichever type of page users are landing on to greet them to your site. The tips for home pages above apply, as do the following:

• Ensure consistent branding
  • Your logo should be visible and look like your company’s logo - a user should never have to guess whether or not they are in the right place
  • The rest of the branding - look, feel and design - should be consistent with the feel of the rest of your website. This doesn’t mean a campaign or page cannot use different elements than the rest of your site, but the overall look and feel should not be so different that users are again left guessing where they are or are confused if they navigate to the rest of the site
• Provide a clear value proposition that is consistent with both how the user entered the page and the breadth of content, products or services your site offers
  • You want to be sure you are delivering on the specific promise you made in your campaign or search result; the page that users enter should match any expectations you have set for them
  • But, you also want to be sure you do not miss an opportunity for users to understand all of what you have to offer, as something else you offer may pique their interest
• Provide a clear call-to-action
  • This is true whether you are requesting interaction, such as registration from a user, or if you simply want them to explore your site further
  • You want to provide clear avenues to interaction and highlight them with clear instructions to users, so employ action-oriented terms: “Get Your Free Quote”, “Learn More”, “Contact Us”, etc.
• Keep your design clean
  • While you want to make sure you are providing options to users, you do not want to overwhelm them or distract them from your message
  • Include links to key pages or navigation (this page should not be a trap), but do not include every offer or marketing message you want a user to see on this one page
  • Focus on the expectations set and deliver on those on this page using bulleted, easy to scan benefits or value proposition information
• Be aware of the fold
  • Key content and call-to-action messaging needs to be immediately visible to users
  • If users have to scroll for a payoff, you have lost them, so consider who is coming to your site and on what devices / screen resolutions and design to make sure they do not have to scroll to see key information

Below, we will look at some of the best practices specific to different types of landing pages, as well as examples of what to do and what not to do when welcoming a visitor to your site.

CAMPAIGN-SPECIFIC LANDING PAGES

1. While I mentioned it above, I will mention it again here, because this is so important for campaign-specific landing pages: You must deliver on the expectations set by whatever it is that sent a user to the page.

• In the example below, a search for Best Buy, offers a link to what it says is Best Buy’s official site. However, the link actually takes visitors to a landing page specific to Best Buy’s deals and weekly ad. The effect is disorienting for a visitor looking to access the Best Buy site because the set-up does not meet expectations.

• On the other hand, this AT&T ad on CNN.com provides access to the content that was specifically detailed in the ad, while also providing access to a wider range of options if a user is interested in other products or services. This means the page delivers on both the specific user need and a wider range of interests they may have.

2. If you are requesting information from users – to fulfill an offer, get them started using your site, or provide them with customized information, your task with a landing page is even harder. You may lose people as soon as they see a form to be completed. To counteract this:

• Your page should load quickly so users see the whole picture very quickly
• That whole picture should include a clear statement of benefits: what is the value exchange you are offering? You are asking for their time and personal data - what are they getting from you in return?
• What type of time commitment are you asking of them? Is all the information you are seeking on one page or is this a multi-step process?
• What will the payoff be? You need to set specific and accurate expectations for what will happen at the end of the registration process or form.

3. Additionally, any forms provided on campaign-specific landing pages should adhere to form best practices (see more about best practices for forms here). Some highlights:

• Be specific about what you are asking for and WHY you are asking for it
• Ask for only the most important information, focusing on things that are least invasive, i.e., if you can use only a zip code for location, do not request exact street address. You can request that information once you have deepened the relationship with the customer
• Include logos or icons that highlight security of information. Logos like Verisign, Truste and the Better Business Bureau, as well as icons, such as a picture of a lock, reassure users that they are using a secure site and that the information provided will be safe

4. Examples in the auto quote space provide an interesting contrast in what works and what doesn’t:

• Progressive provides a focused page that directs users to a call to action, while addressing critical user information needs:

• Geico, on the other hand, overwhelms users with information. This takes focus away from the purpose of the page and does not address user information in a concise way, making it less likely for users to convert.

DEEP LINKED PAGES

1. For pages on your site that become landing pages because the content is often searched for and makes it a key entry page to your site, it is important to let users know where they are on your site

• Many times, breadcrumbing can be used to help orient a visitor (for some sites, like those with a lot of dynamic content, breadcrumbing may not be the best option. For more information on breadcrumbing best practices, see our blog on breadcrumbing)
• Additionally, clear highlighting within the navigation can be used to indicate position
• This example from CNET shows that a search for “best tablet computers” delivers users to the specific content requested, but also provides good insight into where a user is and what else might be available

2. Access to full site content, especially the home page, is even more important

• Even though the page delivered may match users’ expectations exactly, you want to be sure they can move up in your site’s hierarchy easily to get a wider view
• Ensure access not only to the full navigation, but also link to other information related to that specific page so users can move easily to other content they might find interesting
• Even with these additional links, remember to initiate a clear call-to-action on the page a user reaches
• In this example, searching for “hotel Rome” leads users to a specific hotel property, which offers a clear explanation of how they got to the page and how they could explore the hotel information or other destinations. It also has an immediate call to action above the fold:

Using what works and what doesn’t from these best practices and examples, you can improve your landing pages and make sure your site is a landing page best practice, putting your best foot forward when visitors arrive. For more best practice information, visit our other blog entries and our newsletter.

There is no doubt we all want our websites to be attractive - captivating users and providing visual interest. However, it is important that the visual interest created on a site work with and enhance the usability of the site, rather than detract from it. Often we think of the aesthetics of a site as separate from the usability elements, but they have to work together to create a site that both captures and enhances your brand, attracts and interests users and allows them to easily complete the task at hand on the site. In order to identify the best practices for developing a look and feel that enhances the user experience, we will take a look at the guidelines which make up aesthetic integrity:

1. Uses a clear visual hierarchy with graphic elements and visual cues to help users
   • This guideline should influence all aspects of the design of your site, beginning with the home page. Icons, images, color and text (font, size, etc.) should all come together, not only to present a visually appealing home page, but one that is easily scanned and understood. Users should be able to comprehend who you are as a company and what is most important to you from how you use the visual elements on the home page to introduce yourself and your value proposition.
   • These elements should also be used throughout the site for the same purposes - highlighting key content, making pages easy to scan and understand and demonstrating to users the key navigational features and their position within the site.



2. Site is scalable for multiple resolutions
   • It is vital to understand how a user is going to view your site - will they be able to see and experience all of the work you put into creating a visually interesting design based on the first guideline? Or will they have to scroll both up and down and sideways to view the whole page?
     • In order to address this most effectively, you need to understand the screen resolutions of those coming to your site. Many of us who are online all day looking at a wide screen monitor built in the past few years sometimes forget that there are people who still have their screen resolution set to 600×800 or 1024×768. This may or may not be a factor for you and your target audience, but it could be which is why you need to understand how your targets are accessing your site.
     • Based on what you know about your target base you can decide which screen resolutions you need to accommodate, but blindly assuming you only need to design for higher resolutions without knowing who is coming to your site can be a costly mistake.
   • Understanding these traffic patterns is even more important with the increase in mobile and tablet traffic. Understanding what portion of your traffic is currently coming from these devices as well as what the growth pattern for your target might be over the next few years can inform your strategy for mobile site / app development and the need for site compatibility with devices like the iPad or Kindle Fire.



3. Photos are relevant to the value proposition and content and are accompanied by text that is readable and relevant
   • Incorporating images into your site is important, but doing it correctly can be difficult. Images should draw a user in and help set the tone of the site, but they should not impede a user’s ability to access information or complete a task. Often in testing, we see that by not selecting the right image or placing it poorly within the page design, photographs and images can sidetrack a user or have unintended consequences. So a few things to consider when selecting and adding images to your site design:
     • The image should be clear and easy to understand. You do not want users staring at an image trying to interpret what is going on in the image or what it has to do with your company or its value proposition. These should be immediately clear. Where necessary, images should be labeled or include explanatory text in an easy to see and read font.
     • Images, especially photographs, when they include people should be diverse in terms of age, gender, race, etc. and show a wide cross-section of your target. We have seen far too often users react to a home page image, saying “Oh, this site doesn’t look like it’s meant for me. All I see are older women.”
     • Images should not overwhelm a page. The sizing and placement of images is key to either inviting users to explore a page or creating a roadblock to access. Images should not push key content below the fold of the page, making it unclear if there is information below the image that is worth scrolling for. Indeed, images can be used to help users know there is more on the page, but showing some, but not all of the image above the fold, you can invite users to scroll to see more.
     • Images can also be used to break up and provide interest to text heavy pages. Users tend to scan rather than read most web pages. Images can help guide them to content of interest and provide visual breaks that allow the eye to more readily move through a page.
   • Again, it is also important to make the images relevant and not just a visual element on the page - make them have meaning to a consumer. Following are 2 examples one site that does not do this and another that uses images in an innovative way:




4. Limits animation; if offered, allow the option to control it
   • I’m sure most of us can remember a time when Flash splash pages were all the rage on the web. While designers got to show off on these pages, for the most part, they were a usability mistake. Users were forced to watch an animation that might not be of interest to them, some with sound (and no sound controls) and then had to click just to begin the exploration of a site they had already requested. It’s easy to see why this is not the web standard today. Still, while animation can be an effective tool to help a site come to life, demonstrate a complicated concept or simply put more information in front of a user, too often it remains a misused tool with the most common issue being lack of user control of the element. So how do you implement animated elements correctly on your site?
     • Use animation with a purpose, not for the sake of doing something cool.
     • Allow the user to control the animation, with stopping or pausing capabilities and sound controls, including a very clear and easy to access “Mute” option
     • If you are providing different content, say in a Flash animation on your home page, provide users a way to navigate back to a story or element of interest to them without them having to either wait for it to come around again or to guess which of the 4 stories it is.
     • Make it clear how long an animation or video element will run. This will allow users to decide how they want to interact with it.



5. Content and promotions are not mistaken for ads; are relevant and compelling
   • When testing websites, we often see site designers place attractive images highlighting important content or promotions on the right side of a page. Then, when users do not find the content, many site owners are surprised as it is often exactly what they are looking for and it is presented in an attractive and visually appealing manner. So what went wrong? Users often mistake images on the right of a web page for advertising or promotional content and have trained themselves not to pay much attention to any item in that area that appears to be an ad. So what can you do to overcome this bias?
     • First, if your site does include advertising, clearly label it as such. Make sure users know when they are seeing ads.
     • Secondly, make the content look like content, not like a tile ad. Do not have the promotion or content take the same shape as the advertising you see elsewhere.
     • Next, ensure that the content or promotion is visually integrated into the page using colors, fonts, and imagery that is consistent with the look and feel of your page so it appears to be a continuation rather than a standalone component, separate from the site itself.
     • Finally, do not place unimportant content in the same area as key promotions or content. You do not want to clutter areas users may naturally overlook or train them that this area of your site will not contain content of interest to them and have them overlook important features.


Thanks for reading our guidelines on Aesthetic Integrity. For more information on improving your site, please see our previous stories on best practices according to usability guidelines: Communications and Relevance, User Control, Simplicity and Scannability and Navigation and Feedback. Also, stay tuned to our blog for more information on web best practices.

One of the most important aspects of any site is how the user can get to the information of interest. Once information architecture is considered and clearly defined, the next step is the mechanics of navigation. Users should be able to easily identify links and clickable content, use those and the feedback given by the site to move through your site with ease. To make this process as easy as possible, consider the following basic usability guidelines for navigation and feedback on your site:

Navigation & Feedback

1. Items that are clickable appear that way (navigation should have highlighting, links should be underlined, and visited links (v-links) should be in a different color
   • Links must look like links and be highly visible
     1. The main navigation, wherever it is on the page, should be immediately visible to the user by being prominent and clearly highlighted
     2. The online convention is that links are underlined, either all of the time or on roll-over or another state change, such as color change occurs on roll-over, to indicate clickability. This is important to allow users an immediate understanding of how to use your site
     3. Additionally, headlines and photos or images accompanying them are often expected to be clickable
     4. This is one area in which bucking convention for the sake of creativity can often backfire
     5. The way users surf other sites impacts how they expect to use yours, and if your navigation is unconventional and links are not clearly marked, users may abandon the site without finding what they need
   • Additionally, using color to indicate which links have been visited and which have not can help a user as they explore the site
     1. Most users do not explore a site in the specific order you have laid information out; they move immediately to the information of greatest interest to them and work from there
     2. By changing the color of visited links, you give users a map to the site, minimizing mistaken clicks and repeated content exploration



2. Provides clear feedback immediately, and near user actions
   • Too often on sites, users take an action - click on a button, click a link or complete a search or request only to sit looking at the screen being unsure what, if anything, happened. If they are not given any feedback this can be, not only frustrating, but also cause them to take action multiple times resulting in bad outcomes such as too many items added to their cart or, worst case scenario, multiple charges or bookings
   • If a user interacts with your site, your site needs to respond clearly to their action. This can be handled in a wide variety of ways, with a change of pages, a confirmation message, changes in colors or font, etc. Whichever method you choose a few rules apply:
     1. The feedback must be close to where the user took action. If you provide a confirmation message, but it is below the fold and the user is scrolled to the top of the page, the message is not doing its job
     2. The reaction must be obvious to the user. This is not the time for subtlety – it must be clear that the site is reacting. The user should not have to guess
     3. If the action taken is part of a process, do not allow the confirmation or reaction to take the user away from the intended path or limit their navigation in a way that could mean a smaller purchase or usage of the site. For example, when a user adds an item to his/her shopping cart, many sites take the user to the cart, but do not offer any avenue to continue shopping, potentially decreasing the size of purchase



3. Keeps users informed; Indicates task progression
   • Letting users know not only where they are, but how far they have to go can keep them moving through a task
   • Before beginning the process, inform users of the steps that the process includes
   • As they move through the steps, clearly indicate which step they are on, so they can track their progress
   • Keeps steps simple and only include those necessary to the process to improve completion rates



4. Upon completing a process, provides a confirmation screen with useful information
   • Just because a user completes an online process does not mean the overall process is complete; the confirmation page should be used to provide all necessary information for the user to understand the remainder of the process
   • This information includes:
     1. Confirmation of what has been done already and how the confirmation is being communicated in addition to the confirmation page (i.e., email)
     2. What will happen next in the process, when will it happen and who is responsible for it happening? For example, if a user has requested a quote, who will make contact – does the user need to call? If a user should expect contact, when and by whom? The user should never have to guess at how the rest of the process will play out – it should be explicitly stated for them
     3. What other options do users have from this page, can they view their order, track status, print the page or receipt, etc.? What about any offers or cross-sells? How can you keep the user engaged with your site? This is a great place to offer these items after you have made the confirmation and next steps clear



5. Tracks the state of the user (cookies, saved shopping carts, entered data) and acknowledges returning customers
   • It is important to users that sites recognize them so that they can complete tasks with the greatest ease
   • If you offer to remember a user, you MUST remember them; too many sites offer this option, but when users return they are not signed in. If you cannot automatically sign a user in, do not offer the option
   • Make it clear that the user has been remembered by using their name and offering a clear option for changing users if the logged in individual is not the user
   • When possible, allow the user to confirm their password to have their data pre-filled for them. Minimizing typing and streamlining processes can enhance conversion
   • If users leave items in a shopping cart, retain them there when possible
     1. If they will only be available for a specified period of time, message this to users
     2. Indicate any changes in availability or pricing when a user returns to their cart. Do not simply remove an item from the cart without letting a user know what changes have been made

Thanks for reading our guidelines on Navigation and Feedback. For more information on improving your site, please see our previous stories on best practices according to usability guidelines: Communications and Relevance, User Control and Simplicity and Scannability. Also, stay tuned to our blog and newsletter for more information on web best practices.

Sometimes it’s a basket. Sometimes it’s a bag. Whatever you decide to call it, the online shopping cart is one component you do not want to underestimate! A great shopping cart can make or break a sale in the virtual world. On the web, there is no salesperson ushering the customer towards the register or post-dressing room with chatter, “Can I hold these at the front for you?”

Instead, there is usually a small icon or text link at the top right of the page that keeps track of the products that the customer is interested in purchasing. These virtual shopping carts (unfortunately) are easier to abandon than one a customer might fill up in person, after all it just takes one click to leave the site.

It’s easy to want to get creative when putting together your website, but there are some aspects that work best when kept simple. The shopping cart is one of them. Use industry standards to your advantage so users do not have to think twice when they are shopping on your site. The golden rule is that the shopping cart should always be intuitive, easy to access, easy to update, and drive customers to checkout. Here we will go over the basics of an ideal shopping cart.

The #1 DON’T OF THE E-COMMERCE SHOPPING CART:

DO NOT take the user to the shopping cart page each time they add an item. It is best to let the user control their shopping experience and provide assistance and ease of use throughout that process. Pushing users to the shopping cart page is kind of like a waiter giving you your bill while you are still eating your entrée.

Now let’s continue with 5 basic best practices of the retail e-commerce shopping cart!

1. Cart, Basket, or Bag?

• Make life easier for your customers by providing an easy to read icon and text link in the top right section of your site for the shopping cart. If you are using just a text link, don’t be surprised if some users can’t find it. Don’t forget that not all customers are computer savvy and not all customers have 20/20 vision.

Here are some examples of shopping cart images out there on the web today along with some do’s and don’ts!

2. Link Your Cart!

• Make the shopping cart a clickable link that leads the user to a place where they can view, edit and update their cart. Avoid using a logo of a cart that isn’t linked to the product information as this can easily frustrate the user. If you are using both text and images to signify the shopping cart, it is ideal to have both linked to the shopping cart page.

3. Add + It + Up

• Each time a user adds an item to the shopping cart, confirm that the item has been added. The confirmation can be anything from a number signifier or something more elaborate like a dropdown that shows the product with the dollar amount, size, color, etc. The best e-commerce websites will allow users to preview the shopping cart without navigating away from the page they are currently on, as WalMart.com and Jcrew.com let you. After all, if you were shopping in a real store you would be able to peek into you cart at any time, not just at checkout! If you are going to enable a dropdown preview of the shopping cart for users here are a few tips on maximizing its usability.

4. The Next Steps

• Close by the shopping cart link, it is ideal to include other information related to the shopping cart/checkout process to help the user find the next piece of information they are looking for.
• Provide information about shipping and handling - If your site offers free shipping, it is a good idea to include it in this area because you know customers will already be attracted to this section of your website as they shop. Free shipping can encourage users to go through with the checkout process, as it leaves no questions about how much will be added to their total.
• Checkout - Give the user a link to the checkout flow within the shopping cart dropdown menu and in the general area of the cart. After all, the point of your site is to get the user to purchase, meaning there should ALWAYS be a clear path to the checkout!

5. Shopping Cart Overview - One step away from Checkout!

• The shopping cart overview should be similar to the layout of the dropdown menu for consistency sake. The item images and information should have the same or similar layout and the colors should also be consistent.
• Make sizes, colors, quantities and stock availability easy to digest so the user can confirm that their order is correct and that they have chosen their items accordingly
• Removing items from the shopping cart should require one click! Do not make users edit quantities down to zero in order for them to be removed from the cart.

While the majority of sites we looked at today are apparel websites, many of the same guidelines can be applied for all e-commerce websites. If you are in interested in learning more about how to improve other areas of your retail e-commerce site, please check out our other blog posts on retail e-commerce usability! Also, feel free to contact us if you are interested in finding out even more about how to improve your site.

For this next installment on retail e-commerce usability, we will focus on the product page. Product pages are virtual descriptions designed to sell an item to a consumer. Since the potential buyer is unable to get their hands on the actual product, it is extremely important to relay as much accurate information as possible on the product page. What colors are available? What are the dimensions? What does the back look like? What are the shipping costs? These types of descriptive questions should be answered on the product page.

But that’s not all. Virtual shopping also entails virtual, “Do you think this will look good on me?,” “What about this one?,” and “Should we get this for Mom’s birthday?” types of questions. These questions are solved through various social tools on the product page that are becoming a standard for retail e-commerce.

This overview on e-commerce usability for the product page will cover the basics and then some. Keep in mind that your target audience and the type of product you are selling effects what the ideal set-up of the product page looks like. For example, luxury websites should not highlight the price in orange or boldly advertise savings deals, but discount sites should. For more information about product page usability specific to your company, feel free to contact us.

Product Page Information and Organization

1. What’s for sale?
To make your product pages easy to digest, it is important to organize the page so that the most important information is easy to find and logically laid out alongside the image of the product for sale. What information do your customers want to see? This partially depends on the type of product for sale, however, there are a few basic details that should also be included on the product page.

• Name of Product – The name of the product should be the title of the page, this not only allows the customer to confirm what they are looking at, but it also allows for easy bookmarking. *It is also extremely helpful to include breadcrumbs at the top of the product page so customers know how they navigated to the specific item they are looking at.
• Price – Customers should never have to search for the price of a product, nor should they ever have a doubt as to which price they will be paying for the product. The most common place for the price is directly beneath the name of the product.
• Product Images – High quality, hi-resolution (300dpi+) images of the product from various angles (front, back, top, bottom, inside, etc.)help the customers feel confident about what the product will look like once they’ve received it. If there are any small details on the product, there should be close-up images or zoom-in capabilities, so the customer is not surprised later.



• Product Description – Descriptions will vary depending on the type of goods, but they should always be thorough and include the basic information about contents, size, weight, place of manufacture, etc. Depending on the type of item there is bound to be more specifications about what’s included in the purchase, available sizes, optional colors, etc.



• Stock Availability – Be up front about available stock to ensure customer satisfaction with the website. Waiting until checkout to tell customers that their desired product won’t be shipping for a few more months usually results in an upset customer who now knows that your site is not frequently updated.

2. Building Trust
Shopping online can be risky, and customers know that things are not always as they appear. How can your website build trust? Online customer reviews can do wonders for online sales, in an earlier report, we teamed up with Relevant View to discover that “in general, 63% of users indicate they are more likely to purchase from a site if it has ratings and reviews. If executed properly, ratings and reviews can boost the confidence in making purchases as well as foster a trusted relationship with site visitors” (Source)

• Customer Reviews = Social Proof - Customers tend to trust other customers and the online shopping world proves that customers are at least interested in what others have to say about a product. Star ratings speak volumes to consumers with just one look, often answering their thoughts, “Is this product really as great as it seems?” “Is this product worth buying?”
• Seeing Stars – Whether you use stars or some other rating system, it should be easy to understand and clearly displayed somewhere within the product description. By providing a place for customer feedback, there is a sense of transparency and openness to the customers that can make the shopping experience more comforting. Not only will the ratings help other customers, but they will provide insights as to what products the customers enjoy or prefer over others.

3. Spread the Word!
Share Options – Give customers the opportunity to share product directly from your e-commerce site with an email share option (at the very least). Depending on what merchandise you are selling and who your audience is, additional sharing options may also be beneficial, such as Facebook, Twitter, Digg, etc.

Required Information – Don’t make the customers jump through hoops to share a product, this feature should be simple and quick! The best “Tell a Friend” email feature will include : sender’s name and email, recipient name and email, optional personalized subject line, optional personalized message, ability to email multiple recipients, ability to share multiple products in one email.

A few more examples…

4. Before the Checkout…
What if the customer needs help? – Customer service numbers and emails, live chats, etc. should be readily available for the shopper in case they have any questions about purchasing a product online. Instead of putting these on a separate “Contact Us” page it is a best practice to keep them on the main frame of the website or include them within the product description area to make it easy for the shopper.

Don’t leave S&H to the end – Advertise special offers on shipping & handling on the main frame of the website or the product page. If there are no special offers, provide a link on the product page that will at least estimate shipping costs for the customers when they enter in their zip code.

If you are interested in finding out more about how to improve retail e-commerce usability for your company, please contact us. In this blog series we are only covering the basics of retail e-commerce, shall we say, the tip of the iceberg.

How can you get your customers to the shopping cart faster?

In an attempt to get users to shop faster, many online retailers have added a “Quick Look” feature that allows customers to remain on the multi-product page while adding an item to their virtual shopping cart. In my opinion, this feature is extremely useful when shopping online and has the potential to increase sales.

Think about it. If users can find out the information they need about a product and add it to their shopping cart whilst remaining on the same page, they:

• can make a quicker decision about whether the product is right for them or not (meaning they can move onto another product faster)
• do not need to wait for the page to load
• do not need to click back in their browser to get back to the multi-product page
• do not lose their place on the multi-product page

However, there a few key rules that need to be followed to ensure that your Quick Look feature is effective.

1. Show it off - Make sure users know that the Quick Look feature is available on your site by simply putting the text at the bottom of each product image or by having the text appear when the customer hovers over the product.
2. Make it More than a Look - To make your Quick Look feature as effective as possible, it should have the following:
   • Item description
   • Item details (e.g., content, place of manufacturer, care instructions , specifications, special features, weight, parts included, etc.)
   • Alternate views of the product including a zoom feature
   • Alternate colors/styles available (Name and image or swatch)
   • Available sizes and inventory status
   • Add to shopping cart option
   • Add to wish list option (if applicable)
   • User rating (if applicable)
   • Sharing options (e.g., Email a friend, Facebook, Twitter, etc.)

Let’s take a look at the online retailer ModCloth.com for an example of best practices when it comes to the Quick Look feature.



The only thing missing from ModCloth.com’s Quick Look feature is an option to go straight to the shopping cart (See Anthropologie.com example).



3. Keep it Quick! - One of the most obvious mistakes that retail e-commerce websites make is bringing users to their shopping cart immediately after they have added an item. Would you want to take the items you shop for to the register one by one? Show customers that their shopping cart has been updated, but don’t force them to go there until they are ready .Don’t waste their precious time!

A different way to quick look…

Now that we have looked at what makes an effective quick look tool, let’s take a quick look at a less conventional quick look feature, that is still effective.

Neiman Marcus has created an elegant quick look tool in their Beta website redesign. Instead of a pop-up that opens on top of products, the quick look information unrolls itself within the browser, revealing additional views, product name, available sizes and colors, and the option to place the item in the customer’s shopping bag.

While there are a few things missing from this quick look feature, it is still a great example of how the quick look pop-up can be aesthetically changed to match the users’ taste (Can you see what’s missing?).

Remember, usability and design go hand in hand! Added features that don’t work only clutter a website and confuse users. Make sure your site is usable. Contact us for more information about our research and testing services.

­
• The footer can provide links deeper into your site and to particular content areas of interest to visitors
• ­By doing this it can take the place of an outdated concept of a site map and reduce the need for visitors to turn to the search engine to find specific content of interest.
­
• It can also be an area to place links (such as a store locator), short forms (such as for contact) or icons (such as for social media) that do not have a place in the main body of the page and may be crowded in the utility link area in the upper right.
­
• The footer can also be used for showing a little more personality, providing links to frequently updated content like a blog or events and a quick way to contact a company by providing detailed contact information or a simple form.

TOP 5 DO’S

1. Do remember any element of the page can and will be viewed by visitors – not just search engine crawlers
2. Do apply a hierarchy or categorization of the links and functionality provided in the footer
3. Do make the area readable and easy to scan
4. Do provide clear visual separation of the footer from the main content on the page
5. Do utilize different font types, icons, etc. to make the links standout and provide visualize interest to draw visitors to this area of the page

TOP 5 DONT’S

1. Don’t just repeat your main navigation at the bottom of the page
2. Don’t use the footer as a solution for poor site information architecture
3. Don’t include content below the footer
4. Don’t create a visual barrier above the footer that would prevent visitors from viewing it as a value-added section of the website
5. Don’t overfill the footer – edit it to key information and functionality that is easily categorized and set out in a well-organized manner

The web is filled with less-than-ideal retail e-commerce websites that are losing dollars over simple design flaws. This blog series shares tips on retail e-commerce usability, covering how to improve different parts of a retail e-commerce website.

Power Browsing

A customer can walk around a department store and look for a pair of shorts for several hours. Are the shorts all kept in one area? No, they are dispersed among different designers. Are all of the designers in one area? No, they are categorized by targeted age group or price range. Is everything available out on the floor? Of course not! There is a stock room full of merchandise and multiple stores across the country or around the world that might have the pair of shorts in the size and color you are looking for.

Online shopping gives retailers the advantage to let customers find what they want without leaving their chair. That is if the site’s navigation system and design doesn’t hide it from them.

Here are a few tips on how to make browsing on a retail ecommerce site useful.

1. Let Customers Refine their Browse

• After choosing a main category to shop under, it is ideal for a user to be able to refine the selection they have made.
  - The most common way to do this is by including a left navigation that reveals all of the different options the user can check/uncheck, with the items re-populating based on the customer’s selections- A more recent change on retail ecommerce websites is the mega drop-down menu that doesn’t appear until the user clicks on a header category.

2. Let them Sort!

• Offer “Sort By” options in addition to the filters to give the users a chance to explore by price, relevancy, popularity, designer, style, etc.

3. Viewing Options

• All sites should know this by now. Let users choose how many items they want to see on a page at one time. A “View All” option should always be available to users when categories of items have say 200 items or fewer.

4. More than Breadcrumbs

• When you are using filtering systems it is important to clearly display what categories have already been chosen by the user to prevent them from getting lost in their browse.
• A clear path between product pages and the user’s browse (with customized selections/sorts) should always be available (e.g., “Back to Results”)
• Customers should have the option to deselect categories and clear all the selections with one click.

5. Show the Customer’s Progress

• Don’t let customers drown in merchandise - let them know how many pages you are going to show them and where they are at all times (e.g., “Showing 75-95 of 560 items,” “Page 13 of 62″).

6. Back and Forth Action

• Make sure users can add items to their shopping cart and return to where they were in their personalized search.

While there are many more specific attributes you can use to improve your retail e-commerce website’s browsing function, remember that the main goal is keep the customer on the purchase pathway. Always consider how you can make your website easier to shop and easier to use!

For more on usability tips click here, or contact us for more information about our services.

The web is filled with less-than-ideal retail e-commerce websites that are losing dollars over simple design flaws. This blog series shares tips on retail e-commerce usability, covering how to improve different parts of a retail e-commerce website.

Ready, set, search!

Let’s say you are looking for a new belt. If you walk into a large department store (that you have never been to before) where will you go first? Some of you will walk around looking for the right department, maybe try to find the directory and some of you will ask a customer service representative, “Where are the belts?”

Not everyone likes to browse. In fact, a lot of online customers have an idea of what they are looking for when they come to your retail website. Some customers will go straight to the search box, meaning this tool does not only have to be easy to find, but it must be effective.

Here are a few tips on making your search box and search results usable!

1. Search Boxes Belong On Top

• Usability guru, Jacob Nielson, did a study that revealed 56% of users look for the search box in the upper right hand corner, while 44% look for it in the upper left. In other words, these are your ideal two options for the search box location.

2. Search Boxes & Action Buttons should be Simple

• Keep the design as simple as possible and don’t forget to include an action button to let users “Search,” “Find,” “Go,” or “Submit.”

3. Maintain the Homepage Navigational Framework

• Keep the search results within your website’s main framework so users can easily navigate to another area after they are done viewing the search results.

4. Show Customers What They’re Searching For!

• Reiterate the search text on the results page so users can confirm their search.
• Make sure your search results are accurate!
• Unless you are selling fonts, you should use images in the search results. This way,
  customers can immediately start shopping.

5. Give Customers the Power to Refine

• By giving customers ways to refine their search results, you are improving their chances of finding something they want to buy.

6. Make Something out of Nothing

• Instead of showing users a dead-end page that says “No Matches Found” or “Better Luck Next Time,” show them the closest thing you’ve got.
• Break down search terms when “No Matches” are found so users are still on the path towards a purchase.

7. Show Them What’s Relevant

• One of the most important aspects of the search tool is that is works. Customers are expecting to see relevant items related to the search terms they submit. In order to keep your search effective, make sure that all items are tagged properly. It is also a good idea to offer “Sort by Relevance” so that users know you are showing them a wider range of products for their benefit.

Applying these tips on search and search results will increase the usability of any retail e-commerce website. After all, how will customers make a purchase if they can’t find what they are looking for?

For more tips on retail e-commerce usability, check out more from this series.