This article addresses three types of rating schemes: one-dimensional (i.e. “Like”), two-dimensional (i.e. thumb up vs. thumb down), and multi-dimensional (i.e. the ubiquitous 5-star scale).

One-dimensional feedback

The simplest way to collect customer opinion is a single-click affirmation. Examples include:

• Facebook’s “Like” button
• A thumbs-up button by itself
• Google’s new “+1″ button
• Heart / favorite button (Kaboodle, Etsy, Slideshare, etc.)
• Marking a comment as “helpful”
• Flag as inappropriate

Kaboodle:

Vimeo:

This rating method is the simplest for the customer – it requires just a click, and usually doesn’t require going to a separate page. Frequently the “Like” or “heart” button is a toggle (on or off), and doesn’t ask the customer for written feedback.  In essence, it allows a person to express some level of affirmation toward a product/content while investing very little time.

However, simple input also means simple output. There isn’t much you can do with the data, other than report back to the viewer how many people clicked the button. In the case of the Facebook Like button, the number of “likes” may be tied to your social network (“38 of your friends liked this”) which gives it a little more value. Other than social credibility, though, what does it really mean in the context of a product, or even a piece of content like this article?

“38 people faved this” means nothing if you don’t know how many people read it, or how many people totally hated it. Single-dimension feedback doesn’t give us insight into the range of opinions about something — it’s all or nothing.

The speed of the one-dimensional feedback mechanism makes it most useful for small content items, such as blog posts or videos. It would have little value applied to a  complex product or service, where the nuances of opinion are much more important.

Note: there is much room for discussion about what it really means to “like” something in the Facebook era — it’s a shallow commitment at best. Don’t miss Jonathan Franzen’s NYT article “Liking is for Cowards:  Go for what hurts.”

With so many services offering ways to like, heart or share something, it’s getting a little ridiculous. That’s a lot of love to dish out over a simple blog post (Mashable.com):

Two-dimensional feedback

The next level of feedback allows a customer to submit an opinion on two levels: love it or hate it. The most ubiquitous example of this is the thumbs up / thumbs down scale.

YouTube uses a combination, pairing “Like” with a  “Thumbs Down” button.

Again, this feedback mechanism doesn’t allow for nuances of opinion. It’s purely black and white; it omits the grey area, as well as the customers who didn’t vote one way or another, but might still have a strong opinion.

As with the single-dimension rating, this type of feedback is best for simple pieces of content (videos, forum comments, etc.).

Multi-dimensional: 5 stars and more

The multidimensional rating category is most often represented with the 5-star rating scale, which you now see everywhere, especially on e-commerce sites.

Amazon.com:

(Note: Amazon now combines the 5-star rating scale with a Like button: I guess it’s too hard to resist offering people a one-click “like” sentiment, as opposed to asking for a full written review, which requires both thought and time).

The 5-star rating scale has become the de facto standard for product reviews, in part because it’s automatically included with customer review platforms like Bazaar Voice and Power Reviews.

The advantage of a numeric scale (which doesn’t have to be 5 stars, but more on that later) is that it lends itself to better data. Customer feedback can be reported back as an average across ratings, and a small bar graph can also quickly show the distribution of responses (how much agreement there was among customer reviewers).

For a more complex product, many sites also allow customers to provide a rating of 1-5 on several attributes of the product. For example, AppExchange allows customers to rate a solution based on Ease of Use, Value and Support:

This highest level of detail obviously also requires the most time and contemplation on the part of the customer, so only the most committed fans (or the truly irate) will invest the time to complete such a review. The value of the data is much greater, but the trade-off is that far fewer customers will contribute, so the weight of each review could be disproportionate.

Finer points on rating scales

Most product reviews use the 5-point rating scale, but not all sites explain clearly what each point on the scale means. Responses will be more meaningful if each value is explained for the respondent — for example, “4″ means “I liked it, but didn’t love it” — rather than letting each respondent decide this for themselves.

There’s also room for some creativity here. Why use generic descriptors (“average”, “above average”) when you can customize the scale to match the product type or your audience? A site that sells to teenagers should have a different set of anchors (1= “this blows”, 5 = “OMG I’m in love”) than a site that sells washing machines. (Note to self: I don’t speak teenager very well. Need to brush up.)

Final note: the 5-point scale allows the reviewer to submit a neutral vote of 3, which may not always be helpful. If you want to force your reviewers to make a choice between the positive and negative ends of the scale, a 4-point “forced choice” scale is also a possibility.

Written reviews: the qualitative angle

Ratings & reviews together provide the most complete picture of customer interest. Written reviews provide the background to the simple quantitative measure of thumbs or stars, and are much more valuable to potential buyers of a product than a simple metric like “38 likes”. Of course, a well-written review is much harder to get compared to simple ratings (I won’t get into the topic of incentives here, but there are many creative ways to get customers to submit good reviews).

Some sites take the ratings & reviews form even further, and ask for information about the reviewer (Diapers.com: view full-size review; view full-size review form):

… or for specific attributes of the product like sizing, fit, or style (Bluefly asks for tons of information; see the complete review form here):

Asking for this much detail creates a review form that’s daunting to say the least! I’d be interested to know what the completion rate is for these types of reviews.

In conclusion

In conclusion, when you choose a rating & review system for your site, it pays to carefully consider what kind of feedback you really need. (Do you need to offer your readers 27 different ways to like something? Do you need to know your reviewers’ hair color or toothpaste preference?)

• For a “that’s cool” affirmation of a simple piece of content, go with “Like” or “thumbs up”.
• If you want useful quantitative information like average score or distribution of votes, go for a Likert scale (5 points to include a neutral choice, 4 points to force a choice), along with written reviews.
• If your site sells a complex product or service, go ahead and add multiple product attributes, tags, and even reviewer demographics — as long as you’re confident your customers won’t be turned off by the length of the form.

I hope this was helpful, and please feel free to add your own experiences or opinions below. Cheers!

Share/Bookmark

Despite the ubiquity of search behavior, and well-established conventions for presenting search results, I still see plenty of cumbersome, confusing search tools out there. The most egregious tend to be from B2B rather than B2C sites — because usability isn’t directly tied to the bottom line — but they still cost the company in lost productivity and employee morale. (After all, who can really enjoy a job that requires them to endlessly interact with hostile software.)

This article is my attempt to collect the most important elements of a successful search UI. There are certainly more than 10 guidelines — add yours in the comments!

First, a point of clarification. The word “Search” is used pretty loosely these days to refer to any aspect of looking for something on a site. Technically, there are two components of looking for something: search, in which the user types in a phrase in their own words; and browse, in which the user opens links to product categories or uses a faceted search interface to sculpt their own set of search results. This article addresses the most common scenario, which is a search results page that shows search and/or browse results together.

Smart keyword search

1 For keyword search, offer autocomplete. By looking up the user’s query as she types it, this approach guides her to the right terminology and increases her chances of success. Everyone’s familiar with the most basic version…

…but a drop-down isn’t the only way to do it. The Home Depot has taken autocomplete to the next level by combining it with a mega-menu to show not just a list of suggestions, but also their context.

2 Keyword searches are a fantastic resource, so make use of it! Look at search logs to find what people are struggling with. This applies to incoming traffic from search engines as well as site search. List the most common search terms and investigate why people are not finding those items right away.

Integrate search form + results

3 Display the search form, filters for refining results, and results data on the same page. This is a convention for most shopping sites, but I still see plenty of sites that present only a search form, with results on a separate page. This forces the searcher to pogostick back and forth between the search form and the results, which makes the task infinitely more time-consuming and irritating. Note that this rule doesn’t apply to a quick-search form (typically located on the site’s home page), which serves as an entry path to the search/browse functionality.

Make search results page more informative

4 At the top of the results list, state how the results list was created. Show how many results there are, and exactly which filters are applied to the list. This includes keyword search terms as well as browse categories.

5 For faceted search/browsing, provide an obvious way to remove a filter once it has been applied (thus broadening the search results again). My favorite approach is to group all filters at the top of the “Narrow Results” panel, with a button for removing them, as in this example from Diapers.com:

6 Pagination tools typically appear at the top and/or bottom of the search results list. Make it very clear how many results are on each page, and how many pages there are altogether. Many sites also allow the visitor to “view all” or at least change the number of results that display per page.

7 Sorting options should be logical and designed to help the searcher understand the results. The labels should relate to the content being searched. For example, it’s not very valuable for the default sort order to be by customer rating if there are no ratings available for the results shown. Most sites offer a combination algorithm as the default sort order (i.e. “Best Match”, “Most Relevant”), which combines keyword relevance, customer ratings, manually adjusted search rankings, etc. Here’s a creative example from Hipmunk, which uses “Agony” as the default sort order:

8 Provide a “new search” or “search again” link that is distinct from refining the current search (see Hipmunk example above).

The product detail page is still part of the search process

9 On the detail page for the product or item, add a “Return to search results” link at the top of the page. Ensure that both this button and the browser’s Back button will return the visitor to the same search results she left! This means that if she was viewing page 3, it returns her to page 3 — with the same sorting, pagination and filtering settings. The surest way to destroy the search/browse experience is to reset the search results every time the user views a product page.

No Results. Go Home.

10 The “no results” message is the most overlooked part of a typical search project, but it can be a very helpful tool to keep visitors engaged and help them find the right product. The best examples use it as a platform to suggest different search terms, and even cross-sell related items.

When the user is in “browse” mode (using filters to refine results), she should never reach a “no results” page. Ensure that all lists of filters contain a result. There should never be a case when a user clicks a category that contains “0 results”.

For keyword search, however, it’s always possible that the index will not recognize the user’s query, even with autocomplete. “No results” is not the end of the conversation … it’s an awkward pause that needs to be dealt with. At the very least, offer a chance to search again, and a few alternate next steps (tech support phone number; links to top categories so the user can try browsing instead).

I hope this was helpful! Read on for a few more resources on creating effective search experiences, and I welcome your comments.

Resources:

• Best Practices for Designing Faceted Search Filters / Greg Nudelman / UX Matters
• Site search best practices / Louis Rosenfeld / Bloug (especially the comments)
• Search Patterns / Peter Morville / Searchpatterns.org
• Advancing Advanced Search / Stephen Turbek / Boxes & Arrows
• Designing for Faceted Search / Stephanie Lemieux / UIE

So I was quite surprised the other day to receive this email from my new favorite book shopping site, BetterWorldBooks:

Hello Caitlin,

(Your book(s) asked to write you a personal note – it seemed unusual, but who are we to say no?)

Holy canasta! It’s me… it’s me! I can’t believe it is actually me! You could have picked any of over 2 million books but you picked me! I’ve got to get packed! How is the weather where you live? Will I need a dust jacket? I can’t believe I’m leaving Mishawaka, Indiana already – the friendly people, the Hummer plant, the Linebacker Lounge – so many memories. I don’t have much time to say goodbye to everyone, but it’s time to see the world!

I can’t wait to meet you! You sound like such a well read person. Although, I have to say, it sure has taken you a while! I don’t mean to sound ungrateful, but how would you like to spend five months sandwiched between Jane Eyre (drama queen) and Fundamentals of Thermodynamics (pyromaniac)? At least Jane was an upgrade from that stupid book on brewing beer. How many times did the ol’ brewmaster have one too many and topple off our shelf at 2am?

I know the trip to meet you will be long and fraught with peril, but after the close calls I’ve had, I’m ready for anything (besides, some of my best friends are suspense novels). Just five months ago, I thought I was a goner. My owner was moving and couldn’t take me with her. I was sure I was landfill bait until I ended up in a Better World Books book drive bin. Thanks to your socially conscious book shopping, I’ve found a new home. Even better, your book buying dollars are helping kids read from Brazil to Botswana.

But hey, enough about me, I’ve been asked to brief you on a few things:

[personal details]

Eagerly awaiting our meeting,

[the books I bought].

Talk about blowing customer service out of the water!

I’m totally excited to meet my new books, and I’m thrilled to know they are already thinking of me.

What a difference a little personality makes. Step aside robots, and let a little human touch and humor into the transaction.

Also check out “Shop From Work Day” and the Boss Button in the main navigation.

Guaranteed it’s going to be more memorable … and next time the book-bug bites (which is pretty often), which site do you suppose I will think of first?

Share/Bookmark

This post will be the first in a series of “Axure how-to’s” that explain how to get it to perform some of its trickier technical maneuvers.

Show, don’t tell

I’ve noticed an interesting phenomenon in the year or two I’ve been showing my prototypes around. People – who were once quite content to read about what a button does in an annotated wireframe – now see an interactive prototype, and all of a sudden they want to see every interactive element in action. No longer satisfied with notes that explain “when you click the button, this happens”, they want to click on it and see it work.

The conditional button is a great example. It’s only enabled if a certain condition is met; otherwise it’s not clickable. You see this behavior in just about every software installation sequence on the license agreement page: first you have to click “I Agree”, then the Next button is enabled and you can go forward.

Can it be done in Axure? But of course! Here’s the finished example.

First, name all the parts

I’ve created a basic wireframe for the license agreement page. There are two elements that we’ll be dealing with here: the “I accept” checkbox, and the “Next” button.

In order for the next step to make sense, these need to have names.

1. Open the Annotations & Interactions panel (right side of the screen).
2. Under Footnote and Label, enter a name for each element. (Now would also be a good time to enter an annotation in the Description field that explains what this element does.)
   
3. Do this for both elements.

Logic 101: if A, then B

Now, we set up the condition.

1. Select the “I accept” element.
2. In the Interactions panel, click Add Case.
3. Under Step 1, click Add Condition.
4. Here’s where you build the “If” statement, and why you needed to name the elements. Set it up like this:
   
5. Click OK. Back on the Interaction case properties dialog, scroll down and choose Enable Widget(s) (meaning the Next button). Click Widget on the bottom pane, and choose the Next button:
   
6. Click OK twice. Now do the exact same thing all over again, except set the “Else” condition so that if the value of “accept terms” is false, the widget will be disabled.

Pages have interactions too

The last thing we have to do is set the Next button so that it’s disabled by default. The way to do this is with a page interaction.

1. Click the arrow at the bottom of the screen to open the Page Interactions panel.
2. Click Add Case.
3. Choose Disable Widget(s), then choose the Next button from the bottom panel (same steps as above).
4. Click OK. Now the Next button will be inactive by default.

It’s a good idea to set a different visual style for an inactive button, so we’ll do this last.

1. Right-click on the Next button and choose Edit Button Shape > Edit Disabled Style.
2. Choose a lighter fill color, font color, etc.  and choose OK.
   
3. Now the button will look inactive unless the user clicks “I accept”.

And that’s it! F5 to publish and you’re all set with a new, even more interactive prototype.

Try it out here.

Share/Bookmark

Too many of our electronic devices are “designed for the dump” — new features require higher processor speeds, which requires replacing the entire unit (cell phone, laptop, media center, etc.).

This is good for sales, obviously, but terrible for the planet (and the people who have to deal with the e-waste we produce).

“Designed obsolescence” isn’t the only way though. For example, companies can create buy-back programs to re-use out-of-date electronics. Even better, we can design products with modular components, so we just replace one piece rather than the whole thing. And certainly it can’t be too hard to make things like power adapters universal, so we only need one.

Share/Bookmark

From IDEO.

Prototyping for Elmo’s Monster Maker iPhone App. from IDEO on Vimeo.

Share/Bookmark

The dominant retailer tactic these days is loyalty cards. Things are cheaper if you have one, and usually they don’t cost anything, so it’s silly not to sign up. Problem is, you never have it with you when you go back to that store. So they have to look it up by your phone number, which more often than not isn’t in the database, etc … so ultimately, checking out takes twice as long just so you can save a couple bucks.

Wouldn’t it be cool if I could take a picture of all my loyalty cards with my phone, store them in an image database, and use that instead of the actual card when I go to check out?  The main screen would be a list of retailers, with the option to sort by most recently used or A-Z. Then at checkout, I would just retrieve the image of the card, and scan it through the cashier’s barcode reader (assuming this is actually possible). [update: yes, it is.]

The business case is pretty obvious – offer customers an incentive to register the app (additional coupons, etc.) and sell contact information to retailers. This would keep the UI ad-free and uncluttered  — very important, since saving time at checkout is the whole point.

So far, so good.

Update: I checked around, and of course it exists! Several, in fact.

KeyRing

Billed as “The #1 Android and iPhone Mobile Loyalty Card Application”.

CardStar

Lots of recent news coverage. In addition to storing all the consumer’s card data, merchants can offer coupons directly to registered consumers.

Verizon just invested 400K in this one.

Sigh.

Related:

• http://www.nytimes.com/2010/06/01/technology/01loopt.html
• http://www.building43.com/videos/2010/06/29/loyalty-cards-merge-onto-mobile-phones-thanks-to-cardstar/

Share/Bookmark

Share/Bookmark

In the case of spaghetti sauce, at least, we cannot always explain what we want. Especially when asked about our preferences, we are more likely to list what is currently known and popular than ask for something that hasn’t yet been done or isn’t widely available (even if that is what we would prefer).

How do you like your spaghetti sauce? Thin, spicy, chunky, traditional …

The point of the talk is variability — one product cannot meet the needs of all users. In the food industry that revelation ultimately led to the 500 kinds of sauce we now face at the supermarket. (See Barry Schwartz‘s talk for more on choice overload.)

Gladwell’s talk was a good reminder to me to stray away from open-ended questions when conducting user research. A question like “What kind of features do you want in this system?” is only going to yield a list of features that are already well-established, even bad ones.

Share/Bookmark

One can imagine the studios are already hard at work for next year!

Share/Bookmark