A Time to Share

by usabilitydotcom

In these competitive times of the online world, optimizing web pages for Google and other search engines is often not enough.  Many sites have already added another successful tool to their online marketing toolbox – and it has to do with something we (or most of us) learned to do as children – sharing with others.

Commonly, we see ‘Email’ and ‘Print’ options on web pages, but ‘Share’ icons are gaining popularity on a variety of site types.  By providing ‘Share’ icons, site visitors can link the content within the page to their social networking page on sites such as Facebook, Digg, and Twitter (just to name a few).  This is an effective and easy way for visitors to share content with others and as a result, increase the chance that your site will be visited by a greater audience.

News-related sites were some of the first to offer ‘Share’ icons, but we have begun to see them on all types of sites, as well as in email advertisements.  Figure 1 below is an example of an email sales announcement from Gymboree, a children’s clothing store, and it includes options for customers to share the information via a number of social sites.  The social site icons are referenced with ‘Share with your friends!’ and display near the bottom of the email.

Figure 1 – Gymboree Email Sales Advertisement with ‘Share’ Icons

In the usability studies we have conducted with sites that offer ‘Share’ icons, it is typically those users who are members of one or more social sites that quickly understand how to use the icons.  However, they can be foreign and unknown to visitors who do not participate in social sites, and therefore should be defined, at least subtly.  In Figure 2 below, USAToday.com provides a discreet ‘What’s This’ link directly beneath the ‘Share’ icons.  By clicking the ‘What’s This’ link, a small pop-up window displays and provides a brief explanation of the icons; therefore, users can learn about the icons and how they work if they so choose.

Figure 2 – News Article on USAToday.com with ‘What’s This’ link

Some best practices for presenting ‘Share’ icons on a web page are demonstrated in Figure 3 and Figure 4 below:

  • Do not devote prime screen real estate to the icons or allow the icons to get in the way of what the user is trying to accomplish.  Placing the ‘Share’ icons on the right side of the content or directly below the content will ensure users are not hindered by their presence.
  • Provide the icons in context, such as on an article or announcement page.  Displaying them on your Homepage is not necessarily appropriate.  For example, a real estate company’s website might use ‘Share’ icons on a Property Listing page or a hospital might provide ‘Share’ icons on Birth Announcement pages.
  • Do not overwhelm your visitors with too many icons.  As the number of social sites continues to increase, it is becoming more common (and necessary even) to place all of these icons behind a single ‘Share’ link to avoid icon overload.  If you’d like to provide more than 5 social networking site icons, consider using a single ‘Share’ or even ‘Bookmark & Share’ icon and upon mouse roll-over, display a fly-out box with all the community icons.
  • Finally, place the ‘Share’ icons in close proximity to the ‘Email’ and ‘Print’ links or combine all of them into a single ‘Share’ link as previously recommended.

Figure 3 – News Article on CNN.com with ‘Share’ Icon Collapsed

Figure 4 – News Article on CNN.com with ‘Share’ Icon Expanded

As social sites continue to gain popularity and more sites adopt the use of ‘Share’ icons, they will become as common and as well understood as a ‘Home’ link.  In fact, according to a survey by the Pew Internet Project (August 2011), 65 percent of Internet users in the United States aged 18 or over now use at least one online social network.   So, it may very well be time to invoke your site’s good manners and share!

Best Practices for Mobile Site Checkout

by usabilitydotcom

With the constant evolution of smart phones and mobile devices, users are expecting more efficient and intuitive functionality from mobile websites. This is especially true for those mobile sites designed for touch screen devices.

According to a 2009 whitepaper from Gomez, Inc., almost 75% of mobile web users expect to complete a simple transaction in a minute or less before giving up and exiting the site. This is due to a variety of reasons such as interruptions from everyday life, incoming phone calls, and changing network strength when on the move.

Customers are continually frustrated when attempting to make a purchase on a mobile website, especially when they invest a lot of time and energy researching to find the perfect item, only to struggle when going through the checkout process. Sometimes their frustration stems from a number of factors, and other times it is something as simple as not having a guest checkout option. So, how can mobile site managers make the customer experience of their mobile checkout process more intuitive and enjoyable? We conducted an internal study of mobile websites to find out.

We looked at the mobile websites for Amazon.com, BestBuy.com, Target.com, and BarnesandNoble.com with a focus on their Add to Cart and Checkout processes. Users were asked to search for and purchase a DVD of their choice on some of the most commonly used smartphones, such as the iPhone 3Gs/4G, Android (Droid X/Evo), and Blackberry Curve. From this study we have compiled what we consider to be some of the most important factors to consider when improving the checkout process on your mobile site.

  • Provide an ‘Add to Cart’ option from the Search Results.
    A Search feature is often paramount on mobile retail websites as several users prefer to search for products instead of clicking through various product-related pages. Also, the ability to add an item to the cart from the search results, instead of only the product page, saves users a click and an additional page load.
  • Place a ‘Checkout’ button at the top of the screen, as well as at the bottom.
    Placing a ‘Checkout’ button at the top of the screen expedites users’ ability to dive into the checkout process as it is easily accessible. Additionally, a button at the bottom of the screen saves users from having to scroll back to the top of the page to checkout if they have multiple items in their cart.
  • Allow users the ability to checkout as a ‘Guest’.
    Customers do not like being forced to register with the site in order to purchase an item. We have heard some customers say they would simply discontinue the transaction or drive to a store to find the same item, simply because they are being asked to register at the beginning of the checkout process. However, it is worth providing users with an option to create an account at the end of the transaction as they have already entered their information. If you offer users the option to create an account at the end of the process, ensure the benefits of registering are displayed.
  • Provide a step/progress indicator throughout the entire checkout process.
    This feature helps manage users’ expectations and lets them know where they are in the process. Customers like knowing where they are and how much further they have to go before completing their checkout process. Lack of communicating the progress may ultimately hurt conversion if users encounter issues during checkout.
  • Provide a field-sensitive on-screen keyboard.
    When clicking in alpha-fields (i.e. First Name, Last Name), display an alpha keyboard. When clicking in numeric fields (i.e. Zip Code and Phone Number), display a numeric keyboard. Email fields should have <.com> and <@> keys. Also, in an address field, begin with a numeric keyboard for the street number and switch to an alpha keyboard after a space is entered to enter the street name. See the examples below:


  • Default shipping address to billing address or vice-versa.
    Regardless of which address information you ask your customers for first, ensure the same address is reflecting on the following step for shipping/billing. Also, ensure a method for editing the address or entering a new address is also present in cases where the billing and shipping addresses differ.

 

 

  • Provide the shipping options on the shipping address page.
    Consolidating these related steps into one page equals one less step in the overall checkout process, expediting the transaction time.

 

 

  • Automatically save the cart contents.
    On return to the mobile site, items added to the cart should persist, regardless of whether or not the user has signed in. If the user is signed in and items are added on the mobile site, allow items to carry over to the html website’s shopping cart, should the user choose to complete the transaction later from their home.

 

 

Implementing these best practices within the checkout process of your mobile website will help to ensure that customers have any easy and enjoyable purchasing experience.

Author: Tony Moreno, Usability Analyst
Contributors: Jeff Schueler, President & CEO
Jason Vasilas, Senior Usability Specialist

A Wrap Up on Gift Checkout

by usabilitydotcom

“Is the sweater I’m sending my daughter going to arrive in a gift box? I have no way of knowing what the gift-wrap looks like.”

“If I want to send 3 items to my dad, is each item going to be individually gift-wrapped?”

“It’s not clear how I can add a personal note to go along with the gift to my mom.”

“I don’t want the invoice to show pricing on it when my friend gets the gift. But there’s nothing on the site to tell me how that would work.”

“Would a gift receipt be included with the shipment?”

“I don’t want to give my credit card info before I know what options are available on the site for me to send a gift to my wife.”

The questions and comments above capture some of the uncertainties that site visitors encounter while shopping online to send items as gifts to family and friends. This underscores the importance for retail sites to assess if their checkout process is optimized for gift checkout. To that end, our focus in this article is to examine best practices as they relate to the following:

  1. Availability of gift box/wrap options
  2. Options to add gift messaging
  3. Details about invoicing and gift receipts
  4. Presenting gift options prior to collecting credit card info

Availability of Gift Box/Wrap Options

Ensure site visitors are provided an option to select a gift wrap. An optimal way of incorporating this into the checkout process is to include a ‘gift wrap’ option on the order summary because the summary lists all items ordered, making it easy for users to select gift options for each individual item. Additionally, providing it in the order summary makes it early enough in the process for users to know at the outset of the checkout process that the site offers gift options. An example of how the gift box/wrap options can be presented in the order summary is illustrated by the red highlighted box in the screenshot below from a major retail site:

 

Once visitors click on the ‘gift wrap’ option, provide them the ability to view the types of gift wrap offered and ability to specify gift wrap options for each item in their order summary.

This is illustrated below by the red highlighted boxes. The site presents visitors a visual of the gift wrap options and fields to decline or specify gift wrap options for each item in the order summary.

 

 

Options to Add Gift Messaging

Users interested in sending gifts expect the ability to add a gift message along with their gifts. Below is an example from a site that gives visitors the choice of selecting either a complimentary basic message to be included on the packing label, or a personalized greeting card to be included for an additional charge.

 

When visitors click on the ‘Sample’ link (see red highlighted box above), a pop-up of a sample package label message is displayed, as illustrated below:

 

Additionally, those who opt to add a personalized message are given the option to select a greeting card and a field to include a personal message:

Details about Invoicing and Gift Receipts

Visitors often are concerned that the gift package that is sent out to their friends or family may contain a bill with pricing on it. Visitors expect to see a statement letting them know about the site policy regarding invoicing and gift receipts. It is a best practice to ensure that once visitors are done with selecting their gift wrapping and personal message option, they are presented with a statement informing them that the invoice sent along with the gift package will not include any pricing. Additionally, if business policies allow, consider including a gift receipt with the package and ensure visitors are informed of this in an additional statement.

Present Gift Option Selections Prior to Collecting Credit Card Information

Users want to know what types of gift options are available to them prior to entering their credit card info. Hence, ensure options pertaining to the gifts are presented at the beginning stages of the checkout process. As noted in the first example in this newsletter, a good stage in the checkout process for introducing the gift options feature is the order summary because it is early enough in the process for users to know that the site offers gift options.

‘View All’ – The E-Commerce Version of Window Shopping

by usabilitydotcom

Many of the websites we have usability tested are e-commerce sites containing multiple product types. The products on these sites often include items such as clothing and shoes for the family along with house wares and other home goods. In each of these cases, the female in the household was considered the primary shopper for the family for these types of items and therefore the main audience for the retailer.

Retail sites characteristically have a consistent way to display products. The typical browsing pattern we noticed was:

  • Select a category or department
  • Select a sub-category
  • View small product images on the sub-category (or category) page
  • Click on individual images or product titles to load a product page

In watching females browse online in this way, a striking similarity emerged: As soon as these shoppers opened a page displaying multiple small product images, at least 90% of them immediately looked for a way to see all the items on the page in order to quickly find the item or item type they were searching for. On many sites, this was achieved by selecting a ‘View All’ button or text link. After seeing this pattern on a few retailer sites, our analyst teams began probing to determine if this was something unique to the usability lab environment or if this was standard shopping procedure (SSP). Guess what? It’s SSP. Typical comments we have heard from female users as they reviewed retail sites include, “I typically go to ‘view all’. I don’t like clicking through pages.” and “A ‘view all’ button would make life easier for me. It would take me forever to go though all these pages!”

Recognizing this has some interesting implications for any online retailer. We have seen that female shoppers in particular not only desire to scan every item in a particular category on a single page, but also wish for similar products to be grouped together within that single page. For example, female users expect to see dresses of similar lengths to be displayed adjacent to one another as they scroll down the page. They do not want the long dresses to be randomly placed among the knee-length dresses because then they have to scroll up and down to compare like items. Since we have seen few apparel sites with a product compare feature, the correct placement of products within category and sub-category pages becomes very important to provide the user with what she needs to have a successful site visit.

Based on our research and observations, here are a few necessities to remember when structuring your category and sub-category pages for retail sites:

  • Establish ‘View All’ functionality.
  • Verify the ‘View All’ button or link is easily accessible.
  • Default subsequent results pages to the view all option, if the shopper clicks ‘View All’ once
  • Group similar products adjacent to one another within the page to allow for easy, visual comparisons.

 

The Holidays are Here. Are Online Food Sites Meeting User Expectations?

by tsusc

It is that time of year when many of us pull out our cookbooks or go online to our preferred cooking or food websites to find just the right meal to adorn our holiday tables.  Some of us just want our old favorites, not bothering or caring about nutrition.  But trends show many of us are paying more and more attention to our family’s health and that good nutrition is becoming a key ingredient in our food preparation, even during the holidays.

A survey conducted by the American Dietician Association shows the percentage of people who don’t want to be bothered about diet and nutrition has decreased substantially from 2002 to 2008, dropping from 32% down to 19%.  This segment was as large as 40% in the mid 1990s.

By and large, this trend significantly impacts websites whose primary objective is to provide recipes, menus, culinary information and cooking techniques to the consumer.

In usability studies we’ve conducted on two popular cooking and recipe websites, it was revealed that health and nutrition were important concerns.  In particular, site visitors voiced two distinct requests when it came to healthy living:

  • Visitors wanted a robust selection of healthy recipes, grouped together and easily located by searching or browsing.  In fact, on one site, 40% of the visitors reported healthy recipes were among the most common type of recipes sought, including recipes to accommodate people with special health concerns.  Some comments:

    “Your website has a pretty good ‘healthy eating’ section, but it would be nice to see it explained a little more.”

    “Recipes suited to diabetic exchange.”

    “Add gluten-free recipes for people with celiac disease”

    Healthy Recipe content access from a
    top level navigational button

    DropDownEnhanced.JPG

  • Visitors wanted to see nutrition information included for all recipes, and not just for recipes classified as healthy. On one site, 15% felt they had an unsuccessful visit because nutritional information was hit or miss as nutrition information was not provided for all recipes, except for those in the healthy category. Some comments:

“I would like nutrition information with all recipes.”

“I didn’t see any nutritional information for the recipes.  That’s very important to me.  I would like to see that included with the recipes.”

“A huge drawback for me is that nutritional information is not included for any recipes (except, I believe, those from Healthy Appetite)…adding nutritional data would make me much more likely to visit your site.”

Recipe with no nutritional information,
found outside of “Healthy” Category

NoNutrition.jpg

Recipe with nutritional information,
found in a “Healthy” category

AbbreviatedNutritionPanel.jpg

It was also revealed through these studies that there was not always an adequate amount of nutrition information with the recipes to make a decision. Following are examples of more elaborate nutritional “panels” found with recipes on other popular cooking and recipe websites:

NutritionLabel.jpg

So, when it comes to health and nutrition on cooking and recipe websites, keep the following short list of best practices in mind to satisfy your growing number of health conscious visitors:

  • Provide a “Healthy Recipe” category as well as categories to accommodate visitors with common health concerns, like diabetes.
  • Provide adequate nutritional information to satisfy the greatest number of visitors.  The most common nutritional requests are information for fat, calories, cholesterol, carbohydrates and sugars.
  • If possible, elaborate on nutritional information to include daily values, vitamins and other supplemental nutrients.
  • Provide nutritional information for all recipes, not just for the recipes that fall into a “healthy” category.
  • Ensure nutritional information abuts the recipe, ideally on the left or right side.
  • Ensure nutritional information is well designed, using an easily readable format such as the labels found on product packaging.

Your efforts to give your site visitors a healthy and nutritious perspective could be one of the most important ingredients in a culinary website.

How to Build a Usability Lab – Part 2

by tsusc

This is the second in a series of ongoing blog posts aimed at giving you a blow-by-blow account of our upcoming move to our new offices and the ensuing adventure of building out our new state-of-the-art usability labs.

When building a usability lab, you have to take into account some basic physical considerations such as:

  1. You need two adjacent rooms to represent the control room and user room.
  2. Sound proofing between the control and user rooms.
  3. Sound-proofing the usability lab from the outside and vice versa.
  4. A two-way mirror that allows observation of the user room without being seen.

Sound-Proofing

As the floor plan included in the first part of this post showed, of the four usability labs with the paired control/user rooms, three share a wall with one or more labs and one shares a wall with an office.  When sound-proofing the lab as a whole, one of the major structural changes to keep in mind is to ensure the walls go from the floor of one level all the way to the deck of the floor above. Normal office buildings have 2-3 feet between the ceiling of one floor level to the deck of the floor level above, usually with panel/grid ceiling tiles. By taking the wall all the way up, you keep the sound from reaching into empty spaces above.

There is extra cost involved in building these walls but the major cost incurred is to ensure that 1) the HVAC is designed to go through the walls, and 2) for special sound dampeners to be placed in the ducts between the rooms.

Lastly, where the labs share walls with other labs, we have to ensure the walls are constructed with extra sound insulation inside them. Two major sound-proofing options we have chosen to forgo until we test out the new labs are the sound dampening of ceiling tiles, and a installing a type of sheet rock called ‘quiet rock.’ Together, these two options could add $5,000 to the cost of each lab. The decision was made to wait on these options because they can be easily added after initial construction if it is deemed necessary at a later time.

Two-Way Mirror

What is the first thing that you think of when you think usability labs? For fans of Castle or The Mentalist, it might be watching Beckett or Cho (this character really needs his own show) conduct interrogations on the show from behind the two-way mirror.

The design of our current two-way mirrors has been very effective and we intend to utilize the same design.

For two-way mirrors to work effectively, you need to limit the sound that travels through the mirror between the lab and control room, and you need to limit the amount of light in the control room because with the wrong lighting, you can still see through a two-way mirror. Glass obviously is a great conductor of light but it happens to also be a good conductor of sound so the effectiveness of the mirror coating and dark flat paint in the control room help with most of the light issues but not the sound issues.

One of the most effective techniques to address the sound issue is the use of a unique double-paned window approach. This also helps diffuse the amount of light from the control room.

As you can see from the architectural diagram above, the two-way mirror is set flat in the window frame on the side of the user room and a second piece of plain glass installed on the control room side is set at an angle starting about ½ inch from mirror angling so that at the top it is 2 inches away from the mirror. (I’ll save you from a riveting physics lesson on why the angle of the glass disrupts the sound and light waves more than a normal double-pane window! Let’s just say it works.) The result of this is that voices are muffled so no normal conversation can be heard between the two rooms.

One structural requirement for our new usability labs not listed above is the need for dedicated HVAC in one of our labs. In most office buildings, air-conditioning and heating are only turned on during regular business hours. For our new office space, we have set up one of our labs with a dedicated HVAC system so we can run studies nights and weekends. Not all labs need this option, but with the increase in international remote-testing that we have been doing lately, and the vast time zone differences and having to work on weekends, and all night, when doing international testing, this is an option that would make sense for us. This of course adds additional costs and design considerations to the build-out.

We currently are in the process of getting bids on the audio-visual portion of the new usability labs and focus group room.  The next blog post in this series will be about this process and the options we choose.

How Many Respondents are Too Many in Online UX Research?

by tsusc

When planning studies for the usability lab, sooner or later, the question gets asked, “How many users to do we need to test?” Depending on the goals of the study, and whom you ask, you’ll get answers ranging from 5 to 30. Most experts agree that testing more than that is not the best use of your limited usability budget, since each additional test participant costs money to recruit, test, and compensate.

In the world of online user experience research, a similar question comes up: “How many respondents do we need to consider the survey complete?” In the online realm, additional survey respondents are expensive not so much in terms of money, but in terms of time. How long can you wait for more and more people to complete the survey?

How many responses you’ll need really depends on what you plan to do with the data. What are the main goals of the project? Do you intend to use the data to inform design decisions (e.g., for a site re-design effort) or do you intend to use the data as benchmarks/metrics and compare it to some other data set (e.g., data collected in previous rounds or future rounds of research)? Related to the overarching goals of the research project are the analyses you’d like to have done on the data. Are you interested in analyzing click-stream data or are you strictly interested in survey responses? Will you want to “slice and dice” the data numerous ways to see how different demographic groups respond or how certain survey responses relate to other survey responses?

If you desire complex analyses, analysis of click-stream data, or multiple cross-tabulations of the various survey questions, then we recommend a minimum of 3,000 responses. This number of responses makes allowances for the large amount of variation that we see in site visitor behavior and helps to prevent any particular sub-group of respondents (e.g., first-time visitors) from being too small for meaningful analysis.

If you know at the outset that you are not interested in analyzing click-stream data and that your desired analysis of the survey responses does not involve complex or multiple cross-tabs, then answering the question of “How many responses do I need?” really boils down to two different scenarios:

  1. You need to compare this data set to another data set (e.g., from past or future rounds of research). If you will eventually have more than one data set AND you want to answer questions such as, “Did success increase from Round 1 to Round 2?” then we’d recommend gathering as much data as time would allow. If you intend to compare the data across data sets OR if you just don’t know whether or not you’ll need to compare the data at some point in the future, then we usually recommend a minimum of 1000 responses. Gathering 1000 or more sessions for a survey gives you greater flexibility in terms of how you might use the data in the future. One thousand sessions provide a sufficiently narrow margin of error (± 2.6% at a 90% confidence level) that you can draw conclusions about apparent differences between the two data sets and trust that those conclusions are reliable.
  2. You primarily are running the survey for qualitative purposes (for example, in order to inform design decisions, gather verbatim feedback, discover usability issues, etc.). If you know that you are not going to need to make numerical comparisons between two data sets, then you can feel reasonably comfortable with fewer sessions. The fewer sessions you gather, the wider your margin of error becomes. For example, at 90% confidence, here’s how the margin of error looks for various sample sizes less than 1000:
Survey sample size response table

As you can see, with 400 survey responses, your margin of error is somewhere close to ±4%. You can also see from the table that the relationship between number of sessions and margin of error is not linear, and there is a point of diminishing returns. If your research goals fall in this second category, you need to consider how wide a margin of error you feel comfortable with and balance that with how long you have available to let the survey run.

So, just as with lab-based studies, the answer to “How many responses do we need?” varies depending on the goals of your study. In general, though, it should fall between a few hundred and a few thousand.

How to Use the ‘Quick View’ Feature to Enhance the Browsing Experience

by tsusc

It has become commonplace for e-commerce sites to provide a Quick View feature to enhance the shopping experience for their users. This post addresses the “Do’s and Don’ts” of the Quick View feature.

Let’s start with a definition. The Quick View is a site feature that allows users to quickly view detailed product information without navigating away from the product listing page. Upon mouse-over of a product image, the user simply clicks a button, typically labeled ‘Quick View’, and an overlaid window appears, presenting the product detail. This minimizes time spent browsing products since the user no longer has to wait for the site to refresh and display a product detail page every time he/she wants to review product details.

Consider the screenshot examples below. Figure 1 displays a Quick View button for the product of interest (in this case, labeled ‘QuickLook’). Figure 2 displays the resulting Quick View window.

Figure 1
Quick_View_1.jpg

Figure 2
Quick_View_2.jpg

Creating User Awareness 

To alert users to the presence of the Quick View feature, follow the guidelines below:

  • Ensure the Quick View button appears on mouse-over of the product image, as opposed to appearing at all times. This presents a cleaner look and feel. Additionally, ensure the button appears instantly upon mouse-over.
  • Ensure the Quick View button is centrally located within the product image and thus in the users’ direct line of sight.
  • Ensure visual treatments of the button are such that the button commands attention. In the example screenshot above, notice the button’s contrasting colors.

Optimal Quick View Windows

For an optimal Quick View window, consider the following guidelines:

  • Provide dynamic content within the window.  Ensure relevant product features, such as product size and color are dynamically available via mouse-over or click of an icon.
  • Balance conciseness with rich content through the use of bulleted text and/or tabbed information, if needed.
  • Provide the ability to navigate to the actual product details page so that users can obtain additional information, if desired.
  • Provide the ability to add to cart from the Quick View window, as well as make all required selections such as size, color, quantity, etc.
  • Include an easy to locate ‘close’ icon in the top right of the window.
  • When adding to cart, present relevant error messages that dynamically appear within the window if required selections have been overlooked or if there is insufficient inventory.
  • Upon clicking the ‘Add to Cart’ button, provide clear notification that the item has been added to cart.  Ensure the window closes automatically, so the user is not required to take the extra step to close it.

Potential Pitfalls

When implementing a Quick View feature, avoid these potential pitfalls:

  • Do not strip out all product detail from the product listing page just because you have placed the details within the Quick View window.  This is particularly important in the case of technical or electronic products.  Stripping out all product detail from the detail page will likely frustrate users as they will be forced to rely on the Quick View window to access product details.
  • Do not do away with the product detail page.  Though the Quick View feature is now more common on e-commerce sites, there are still many users who want to navigate to and view a product detail page before making a purchase decision.  Ensure the Quick View is not the sole option for providing product detail.

By following the recommendations above, the Quick View can become a powerful tool that enhances the user experience by cutting down time spent browsing.

Improving the User Experience of ‘Live Chat’ Can Improve Sales

by tsusc

Many online retail sites have decided to offer their visitors an online chat option, a clear signal that online retailers and shoppers alike are beginning to embrace live chat as an effective alternative to telephone and email customer service support.

Our focus here is to examine the live chat feature in the context of usability best practices as it relates to the following factors:

  • Look and feel of the live chat icon
  • Availability and placement of live chat option
  • Content and user interface design of chat screen

Look and Feel of Live Chat Option

Examples below give an insight into the look and feel of some typical chat icons.

Live chat icons found on retail sites vary greatly and include some of the following:

Cisco_revised.jpg

Blurb_chat_icon.jpg

Overstock_revised.jpg    Need_Help.jpg

Deciding what type of visual representation to adopt should depend on the demographic segmentation of a particular site’s target visitors. If a site caters to a narrow demographic segment, then an icon with a picture representing that demographic could be viewed in a positive light. However, if a site draws visitors from a broader demographic segment in terms of gender, culture and geography (both national and international), then a prudent choice may be to use a gender- and culture-neutral icon such as a stylized thought bubble or even a text link.

Availability and Placement of Live Chat Option

Some practices you may want to avoid or modify in regard to the placement of the live chat option:

  • Some sites attempt to aggressively establish live interaction with their site visitors by presenting visitors with a chat window within a few minutes of visitors arriving at the site. This could become a distraction which may cause visitors to leave the site altogether. Our usability test studies have shown visitors prefer to seek out live chat when they perceive a need for it. To that end, discretion should be used when considering whether to push unsolicited live chat onto visitors.
  • Many retail sites choose to place the chat option link in the text links area at the bottom of site pages and the homepage, as illustrated below:nordstrom_revised 2.jpg

    Though placing the chat link at the bottom of the page gives visitors a way to access the option if they so desire, more often than not, users tend to ignore information placed below the page fold, especially if they have to scroll extensively to access it.

Some practices you will want to learn more about and employ when it comes to placement of the live chat option:

  • The emerging trend of placing the chat feature in the general area of the top navigation bar could serve visitors better by making the chat icon fairly inconspicuous, but at the same time giving it more visibility than a text link located within the page footer. For one such illustration, see the graphic below:Tool_Bar_containing_chat_icon_revised_Dell.jpg
  • Many retail sites also place the chat option strategically in the vicinity of the ‘Add to Cart’ button on the product detail page, as illustrated in the example below:Prod_pg_revised.jpg
  • Additionally, the chat feature can be placed at all the possible points where users go to seek answers to questions they may have, such as throughout the checkout process. Other likely points would be the help section, the contact us section, the customer service area and the tech support area.
  • Placing a chat icon beside the search entry field may also increase the visibility of the chat option as the search entry field typically garners a significant amount of visitor traffic.

Content and User Interface Design of Live Chat Screen

Once visitors access the chat functionality, the challenge now shifts to providing them with a user-friendly and seamless user experience. To that end, the following guidelines should be kept in mind:

  • Avoid requiring users to enter personal information such as their telephone number and email address, as this may discourage users from initiating the chat.
  • When a visitor initiates a chat, ideally, a representative should be available to respond immediately. If that is not possible, the visitor should be shown a message displaying the estimated wait time.
  • In situations where representatives have to leave the chat momentarily to check records or obtain additional information, ensure the representative informs the visitor of this by saying something to the effect of “Give me a moment and I will check that for you.”
  • When representatives are typing their response, display a message on the chat screen that reads, “Representative is typing a message.” This will keep visitors informed and they will be less likely to question a delay in response time due to a lengthy message.

When live chat is implemented with usability in mind, it helps online retailers offer site visitors a measure of hand-holding, which in turn, could pave the way for minimizing cart abandonment and maximizing sales. Following these best practices can help make a good feature even more effective.

How to Build a Usability Lab – Part 1

by tsusc

This is the first in a series of ongoing blog posts aimed at giving you a blow-by-blow account of our upcoming move to our new offices, and the ensuing adventure of building out our new state-of-the-art usability labs.

We at Usability Sciences are in the process of moving to a new office building and a ton of work is going on to make it a successful effort. We thought it would be great to share with you our experiences related to building out our new usability labs, as well as a focus group facility.

Background

We have been at our current facility since 1999 and have expanded twice during that time, building out our usability labs, client rooms and offices each time to our current 17,000 sq. ft. space. We have been perfectly happy here but feel the time has come to move to a new office space with state-of-the art technology and upgraded interiors. The new building we have scoped out is in Las Colinas, the main business district of Irving, TX, and is located close to a new DART Light Rail Station, making getting to downtown Dallas or the DFW Airport a cinch. Our new offices will take up  the entire 19,000 sq. ft. of the 16th floor.

Goals

When thinking about building out the new facility, we focused on these primary goals:

  1. Keep the labs, focus group and client areas separate from our employee offices.
  2. Build out four state-of-the-art usability labs to accommodate all the various usability testing methodologies that we do.
  3. Improve our audio/visual setup for all labs and client areas.
  4. Build out one fully-equipped focus group room.
  5. Provide our clients, who come to watch and participate in running our studies, spacious work areas and a better working environment.

Separating Labs and Client Areas from Employee Offices

Shown below is the almost complete floor plan, with the labs, client rooms and focus group facility outlined in red.

Key Items in the Floor Plan:

  1. Four usability testing labs of varying sizes. Some have large user rooms for conducting tests related to kiosks, gaming, and product package scenarios. Some of the labs have smaller user rooms with larger control rooms for situations where 3-4 clients would like to be in the control room.
  2. A very large focus group room with attached control room.
  3. Three client observation rooms. The focus group room doubles as a fourth observation room.
  4.  A separate user waiting-room, centrally located within easy access to all labs.
  5. Large, well-equipped client kitchen.
  6. Client phone room off of the kitchen.
  7. All access to employee offices controlled via keyed doors.

In future posts, we will cover in more detail how we plan to achieve the goals laid out above, and also provide updates as we go through the bidding and build-out process, and the final acceptance of our new space.

We would love to hear from you about any experiences or insights you may have had with building out a usability lab. Please share with us your own adventures!