All About Website Usability Blog – Holly Phillips


The power of having a “form protocol” for online forms
June 23, 2009, 4:23 am
Filed under: form design

Designing clean, intuitive forms with minimal abandonment rate is a true art.  Caroline Jarrett and Gerry Gaffney ‘s 2009 book “Forms that Work” is a good primer on the basics of this art.  They give good tips on form layout, question wording, appropriate answer format, form flow, and even font and color.  There are many good before-and-after examples, too, to show the power of doing things as (seemingly) simple as changing the field alignment or question order.

This is all great insight that any form designer can benefit from.  But one of the best tips in the book focuses not on the form itself, but on working with the person requesting the form:  always use a “form protocol” on which the requester must specify, for each and every field, who needs it and what they’ll do with it.  This forces him to justify every piece of information he asks for —  which ultimately (and hopefully) will result in a shorter, more direct form.  And a short, unintimidating form is much more likely to be completed than a long one that asks for all sorts of information unrelated to the form’s purpose.

Forcing a form protocol to be filled out for every new form also will help prevent people from adding fields just because we’ve always asked them.  Do you really need to ask what products they own if the form’s purpose is to give a free whitepaper?   Sure, marketing loves this kind of information — but is it worth risking a higher abandonment rate if it’s just a “gee wouldn’t it be nice to know” thing? 

Form Protocols:  my new best friend (for form design anyway…)



Great Product Pages
June 18, 2009, 4:19 am
Filed under: usability basics

I just attended a “webinette” hosted by Usability Sciences where they gave 8 characteristics of a good product page.  While just a start, following these 8 tips will help ensure that your product pages have at least a basic level of usability.

Here are the tips; for more details, see www.usabilitysciences.com:

  1. Let the user know where they are on your site  (clear breadcrumbs, navigation to similar items
  2. Show good product descriptions and details (details and specs in bulletted lists, selective use of fonts to draw attention to important info, tabs if too much info)
  3. Ensure product descriptions appear above the fold.
  4. Provide high-quality photo and additional views available (soles of shoes, backs of electronic equipment)
  5. Use color swatches to dynamically change the product image.
  6. Make product options immediately visible (dynamically filter and gray out those that are not available)
  7. Prominently display upsell options (but not obtrusively)
  8. Clearly mark call-to-action buttons and cluster them together

A good example of all these principles they shared is Nine West (I’d say this falls short on the breadcrumb and good description rules, but does well on the others):

ninewest_ex



Great usability at Piperlime
June 17, 2009, 4:00 am
Filed under: shopping cart

During my shoe-shopping foray on the web, I ran across a site worth a mention in the area of usability:  Piperlime.  They’ve done a lot of things right on this site: 

  • mutually exclusive categories to make it easy to narrow down to what you’re interested in
  • tons of different ways to search
  • great gallery pages with clear pictures and pricing
  • excellent product pages with photos from every angle (including the soles of the shoes)

I could go on, but what I really want to focus on here is Piperlime’s checkout process.  So many sites today still take you away from your shopping page when you add an item to a cart.  If I’m shopping, I may want to add several items to my cart when I find them and then, and ONLY then, do I want to be taken to my cart to see what’s in it. 

Piperlime gets this.  Add a product to your bag and an unobtrusive yet clear small gray box floats down the right-hand-side on that page letting you know what was added to the shopping bag.  It sticks around for a while, with some handy info in it (number of items, total) and links (checkout or view your whole bag).  But if you don’t want to do anything with it, it disappears on its own after a minute or so. 

Piperlime add-to-bag

Piperlime add-to-bag

Why is this a good thing?  As a customer, it doesn’t take me away from what I really want to do — shop for shoes.  It leaves me right on the page so I can continue my task.  But it also gives me quick access to take the next step if I’m ready.
And it’s good for Piperlime, too.  They let me shop around and (hopefully) find more shoes I want to buy.  Clearly they need to put some other code in place to help make sure I actually DO eventually get to that final checkout page, but that’s another blog.  In the meantime, here’s hoping more sites adopt this type of customer-friendly add-to-cart methodology.


When to do usability testing
June 11, 2009, 4:12 am
Filed under: customer-centered-design, usability testing

Companies usually start doing usability testing by doing what I call “disaster checks”.  They let the designers go off and design as best they can, then bring in some users near the end to make sure they didn’t miss anything.  The problem with this approach is twofold:  (1) it assumes the general design approach is on-target and at most needs some minor tweaks; and (2) it’s too late to react to any but the most minor usability issues found in the testing.

A much more effective and efficient approach is to dfully integrate usability testing throughout the entire design process:

  • Before you start designing:  Perform early testing to determine where the customer needs truly are (do they REALLY need that new capability you want to add, or are they much more interested in having you fix one of the existing capabilities?)
  • During the design phase:  Perform iterative customer-centered-design throughout the entire design process.  Start by testing some radically different design mockups with customers, incorporating their feedback into the designs, repeating, and continuing to do this until you have high confidence in the final design
  • After you release the new design.  Perform before-and-after task-based testing to see how easily customers can do their tasks on the old design, and then how easily they can do them on the newly-released design.  We typically measure satisfaction, success, and time-to-complete, as well as collect customer suggestions and path data showing how exactly they tried to do their tasks
  • As you think about the next design.  Continuing to mine your site metrics can tell you a lot about where people get stuck.  Conducting regular customer satisfaction surveys with the use of the website can give you direct customer words about the problems they have.  And conducting task-based usability studies or interviews, where you watch customers try to do typical tasks (or, better yet, their own tasks) at your site yields invaluable insight.  All of this can be used to help direct where to focus your next design efforts for the biggest customer impact.

So the real answer to “when to do usability testing” is “all the time”.  Once you make it an integral part of your design process, not only will you understand your customers better but your design efforts will be much more well-framed and guided, and you’ll have solid metrics on the impact of your design efforts.



Know thy customer, pt 3 – now what?
June 8, 2009, 4:52 am
Filed under: personas, usability basics

Now you have a great, rich persona or lots of research about your target market and key customers.  Clearly this helps you decide what products they might be interested in, but how does this help you design a website?  After all, good design is good design, right?

Yes and no.  Clearly the basics of good website design apply no matter who your target customers are.  You need to make sure your site is intuitive, clearly laid out, uses clear scentful link names, etc.  But once you have a clear idea of your customer, that can help guide your design decisions.  For example, we were trying to decide whether to include links to arranging for product calibration on our main product pages.  Doing so would have added more complexity to the pages, but the division in charge of our calibration services really wanted those links. 

Our persona research let us answer that debate.  We knew that our key personas never arranged for calibration of his products himself; instead, he sent his units to his centralized calibration team who them would arrange for repair using a very different part of the site.  Knowing that let us confidently decide to NOT include calibration links on the main product pages, since we knew the people who needed those links would never look at that page.

One of the biggest benefits of having solid personas (or customer research) is to enable confident decisions like this.  Since you can’t do direct research to support every design decision, having personas is the next best thing.



Know thy customer, pt 2 — but how?
June 4, 2009, 4:51 am
Filed under: personas, usability basics

Ok, you’re convinced that it’s a good idea to understand your customers in depth.  But how?

One of the best ways is to use design personas.  Alan Cooper popularized the whole area of design personas in his book “The Inmates are Running the Assylum” in 1998.  For all the gory details, see “The Origin of Personas” or “Making Personas more powerful:  Details to drive strategic and tactical design”

Wikipedia defines a design persona as “an artifact that consists of a narrative relating to a desired user or customer’s daily behavior patterns, using specific details, not generalities”.  A persona is given a name, history, rich description, and even a picture.  Typically a site will have one or two primary personas and a handful of secondary personas that, together, embody the key characteristics of the site’s main target customers.

In addition to developing personas, you can learn a lot about your customers by talking with them in individual interviews or by phone, watching them use a website (even if it’s not yours), or asking questions in basic surveys. 

However you do it, your goal should be to come away with a clear understanding of who your customers are, what they’re trying to do, why, and how they need your site to help them.



Know thy customer, pt 1
June 2, 2009, 8:49 pm
Filed under: personas, usability basics

So where to start?  The single most important thing you can do to  successfully make a usable site is to understand your customers:  who they are, what they’re trying to do, and why.  This foundation will form the framework to let you make a truly usable site.

There are many ways to find out about your customers.  Your marketing team probably has a good feel for the demographics of your customers, but you need to go beyond that.  In addition to knowing that your customers work in particular industries or companies, you need to know characteristics that can help you understand how they want to use your site.  Things like

  • what are they trying to do at your site?  Do they come to do research well before they’re ready to buy?  To find information on how to use your products in new ways?  To arrange for support or repair? 
  • what do they do if they have a question?  Do they like talking to live people, or prefer to try to solve their problem themselves?
  • what motivates them?  Do they like to be seen as an expert by their peers?  Like to get their work done as quickly as possible?  Are more concerned with having the highest quality than doing something quickly?
  • how do they interact with others they work with?  Do they need to justify a desired purchase to someone else, or are they given full decision authority?

These are just a few of the questions that you should know as you create and improve your site.  If you know that your customers like to be seen as experts, you might emphasize white papers, training, and access to your own technical experts.  If they need to justify their purchases, add easy ways to save or forward relevant information to others.  Are they “people” people?  Add chat and call-me-back.  In other words, frame your site around your customers. 

In my next post I’ll talk more about how to learn about your customers.