Archive

Archive for the ‘information architecture’ Category

3 tips on designing an effective e-commerce checkout

November 27th, 2009 No comments

Of the many different types of websites, none has received as much scrutiny as e-commerce, a category where ROI can be measured more easily than any other. And in e-commerce sites, the most studied area is the checkout, a multi-step process where users often fall off before completing their purchase. In my own research attempts, I found considerable amounts of information, but little written from a usability design perspective.

In this article, I will highlight three important steps that can be taken to improve the usability and ultimately the success of an online checkout. Many of these suggestions are based on common user experience design heuristics, the most well-known having been produced by Jakob Nielsen. These heuristics are violated both consciously and unconsciously, often by designers or clients who feel that users should be funneled through a checkout to the point that information and paths that would allow a user to postpone a purchase are removed. Unfortunately, this often leads only to frustrated users who will be unwilling to complete a purchase.

Tip #1 – Provide clear direction of paths on the sign-in page

amazon-sign-in lenovo-sign-in
Problematic Example – Amazon.com Good Example – Lenovo.com

When a user makes the decision to check out, they need to see sign-in options. A user may already have an existing account on the site, or they may be completely new. In addition, some new users may wish to create an account on the site, while other users simply want to check out as quickly as possible. A single page is usually necessary to direct these different types of users to the proper path.

Such a page should contain at least 3 elements:

  • Username and password fields and a sign in button for existing users.
  • A button or link for users that wish to create an account.
  • A button or link for users that wish to check out without creating an account (often called Guest Checkout).

Sometimes account creation is tied in as an optional step in the Guest Checkout, but if so, this should be clearly indicated on the page. In addition, many sites support 3rd party payment and checkout options like Paypal or Google Checkout, and these options should be visible on this page as well.

While most e-commerce sites include these elements, the presentation often suffers. One or more options may be overshadowed by another, or widget placement makes it difficult for users to understand what they need to do for each path. For example, the Amazon page uses the same form field and action button for both new and returning users, and uses a radio button to select user type. This blurs the line between the paths available, and leads many users to encounter error messages or begin down the wrong path. In addition, there is no guest checkout.

In contrast, the Lenovo e-commerce site uses the page architecture and design to clearly lay out the path for returning and new users. For new users, both the account sign-up and Guest Checkout are clearly visible.

Tip #2 – Let the users know where they are

zappos-address k-mart-address
Problematic Example – Zappos.com Good Example – Kmart.com

From Jakob Neilson’s 10 heuristics to Keith Instone’s Stress Test, user experience experts agree that it is important for users to be aware of their position in a website. It stands to reason that users should easily be able to access relevant information about their position and step in the checkout process. Designers may balk at including this information, saying that it will clutter the page and overwhelm the users, but good designers can work this information in an effective way. The following should be available on all steps of the checkout, not just the final Review and Confirm:

  • Clearly define the number and name of each step in the checkout process (usually at the top of the page).
  • Show the user where they are in the checkout process.
  • Clearly indicate what the user needs to do to continue by highlighting the Continue button and giving it a label that describes the next step
  • Show the user relevant information from previous steps, such as items in cart, shipping costs, total costs, shipping addresses, etc.

Zappos demonstrates a lack of useful information. The Zappos checkout does not even include a listing of the steps in the checkout process or a clear header that describes the current step. There is no information about the items in the user’s cart. Despite the lack of this important information, the page is very cluttered and text is tiny and difficult to read. Even the Continue button, which should pop-out, is buried under text.

In contrast, the K-Mart site is clean and contains significant amounts of white space, yet also provides relevant information to the user. The graphic at the top of the screen illustrates the steps in the checkout process and uses color to clearly show users where they are in the process. Information about the users order is provided in the right hand column, including a full breakdown of cost. Finally, the Continue button is clearly visible and well-positioned at the bottom of the form, though the labeling should call out the next step, such as “Continue to Shipping Options”.

Tip #3 – Let the user move freely

buycom-address Sonystyle.com checkout
Problematic Example – Buy.com Good Example – Sonystyle.com

Steve Krug, in his slightly dated, yet still excellent web usability book, Don’t Make Me Think, uses an e-commerce checkout as an example of a page where global navigation may not be necessary, though he still recommends a minimal navigation with a home link. Personally, I cringe at the number of e-commerce checkouts that remove most or all navigation options from the checkout pages, forcing the users down a narrow funnel. The problem is that some users may wish to leave the checkout for a variety of reasons but still come back. Perhaps they think of another item they wish to purchase, or want to fill out there cart to reach the minimum purchase threshold for free shipping. Many clients feel that they need to remove anything but the Next Step link in a checkout in order to drive users to complete their shopping. Unfortunately, boxing these types of users in will not push them toward completing their transaction. Instead, these users may become frustrated and abandon the checkout all together. The following should be available throughout the checkout process:

  • Global Navigation. Users have come to rely on it throughout their shopping experience. Taking it away reduces the users control and navigation options, and can raise a flag for the user if the look and feel changes enough to make them feel they have gone to another site for the checkout.
  • Back to cart button. Users that need to alter their cart should have a clear way to do so, in addition to visualizing their cart during every step of the checkout process.
  • Clearly labeled Next Step button. This was mentioned earlier, but it bears repeating. The button should be visible and pop out on the page.
  • Review and Confirm Step with links to each step in the checkout process, including their cart. The user needs to know that they have a last chance to look things over. If their is a problem with their information or cart contents, they should be able to easily change them.

The Buy.com checkout removes the entire global navigation, replacing it with a checkout progress indicator and Buy.com logo. Unfortunately, neither are clickable, leaving the user with “Save and Continue” as her only option. The lack of the global navigation menu also changes the look of the site, though the color scheme and Buy.com logo keep the site from appearing too jarring. In its defense, the Buy.com Review and Confirm page does include links to change a shipping address or go back to their cart, though these links are very small and easy to miss.

In contrast, the Sonystyle.com checkout includes the global navigation throughout the checkout process, adding the checkout navigation as an additional, prominent piece of information. A clearly visible Back to Cart button is also visible on all steps, and the user can easily change her shipping information from the previous step.

Conclusion and a few words on one page checkouts

So that concludes my three tips, which boil down to two important web heuristics: give the user sufficient information about where they are and where they can go, and give the user the freedom to move where they wish to.

A final point I wish to touch on is the idea of a one-page checkout. Some sites, such as eforcity.com, will use small points, four columns, and a scrolling page to fit all of a users shipping and billing options on one page. This is problematic for several reasons, not the least being an information overload. Other sites, such as Gap.com, use an AJAX driven interface to expand and collapse different steps in an acordian fashion, retaining a multiple step process without forcing a single page load. While this solution has its merits, it is important to consider the accessibility implications of implementing a checkout that relies so heavily on JavaScript, particularly in light of ADA (Americans with Disabilities Act) lawsuits such as the one that hit Target 3 years ago. In addition, users have become familiar with the three-page checkout, and a new paradigm may confuse some users. That being said, there is clearly a future for checkouts like Gap.com.

Gap.com checkout (AJAX expandable)

Gap.com checkout (AJAX expandable)

Internet User Experience Conference Summary

April 12th, 2009 No comments

Just a quick summary on the IUE 1009 conference.  First, it is a local conference for Southeast Michigan, but that doesn’t mean there weren’t some quality speakers present.  As Dan Klyn pointed out, Ann Arbor can be seen as the birthplace of modern IA (check out his slides for more info).

I did do some tweeting at the conference; more than I’ve ever done actually. In fact, at one point I think I was the top contributer for #iue09. Compared to my last conference (CHI 08 in Florence), I noticed that Twitter was playing a larger role. At a panel on social networking, all of the panelists had their twitter usernames on their namecard, including Chris Barger, GM’s own Twitter guru.

I would give a summery of the talks I went to, but you can basically check out my Twitter feed for that (#iue09). A few good presentations that I could find on Slideshare:

Presentation this Thursday at IUE

March 29th, 2009 No comments

For any readers in southeast Michigan, I’ll be presenting at the Internet User Experience conference on Thursday.  Our presentation is titled “Lessons Learned While Integrating a New IA Tool” and will focus on our experiences adopting Axure RP.

Axure & Protonotes: an alternative to Protoshare

January 14th, 2009 13 comments

Update 2/27/09: Updated the HeadInsert script again to Version 1.3.  Read about the changes here.

Update 1/21/09: Added new version of HeadInsert which can ignore certain HTML files.

Do a Google search on Axure vs. Protoshare vs. iRise and you may find sponsored links from each of these products explaining why they are the best.  These three are the leading “designed for IA” options for wireframing and prototyping (I say designed for IA, as Visio, Omnigraffle, and other drawing/diagramming tools still have a strong following).

iRise was never an option for me due to the cost, so I have been using Axure for the past 8 months. I initially was able to use Axure for free thanks to their Good Student Program, and I found it to be well worth the cost when I entered the workplace. I have found it to be a great tool for wireframing, prototyping, and generating specifications.  While there is certainly room for improvement, particularly with specification generation, the community around Axure is engaged and growing, which means that new features and widget libraries are coming all the time.

I heard about Protoshare a couple months ago.  While I haven’t used it, I have read some documentation and viewed demonstrations.  Axure still seems to be more fully featured for wireframing and prototyping, but I was intregued by Protoshare’s reviewing features.  Then, while browsing the Axure forums, someone mentioned Protonotes, a free tool for annotating HTML pages.  As Axure produces HTML prototypes, it seemed like the Protonote script could be inserted to achieve functionality similar to Protoshare.  By inserting the script into each page in the prototype, team members and even clients could make comments directly on the prototype/wireframe, which can then be viewed in a central location.

The problem is that Axure generates a new HTML page for each wireframe, so large projects can easily generate 20+ pages.  Inserting the Protonotes script into the header of each one every time the prototype is recreated isn’t really feasible.  To that end, I wrote a small program that will allow users to automatically insert a script into the header of each HTML file for their prototype.

Just download and extract this Zip file.  Generate your Axure prototype and drop the HeadInsert.exe file into your prototype directory.  Run it, then paste your Protonotes code into the text box.  Leave the checkboxes checked (you don’t want Protonotes scripts in your frame management files) and press the insert button. For example, I pasted the following:

<script src=”http://www.protonotes.com/js/protonotes.js” type=”text/javascript”></script>
<script type=”text/javascript”>
var groupnumber=”##############“;
</script>

into all of my prototype HTML files.

I recommend making a backup of your prototype files if they are important, as there is no way to reverse the process short of opening each .html file and removing the code you inserted (though you can always regenerate your prototype with Axure). I am not responsible for anything unexpected that happens to your files, unlikely as this is.  It’s a pretty simple script, but if any errors occur, please let me know.

Zip file: HeadInsert_v1.2

inserthead2