People’s lives are messy, so design for imperfection

big picture ideas | Friday, February 1st, 2013

I think it’s a fair generalization that most designers are perfectionists. After all, who could stand to spend all day staring at a computer screen, aligning all the boxes and putting each pixel in place, other than a perfectionist?

Perfectionism is a useful trait when your goal is beautiful graphic design — but it can be a false friend when you rely on it to design the flow of a system that real people have to use.

Here’s the thing: people are messy. People’s lives are messy. Behaviors in real life, from buying a T-shirt online to booking an airline ticket, rarely progress in an even, uninterrupted flow.

Yet our wireframes are most often based on the “happy path” of least resistance: Screen A, followed by Screen B, followed by Screen C.

When we do dare to speak about messiness, we’re usually talking about how to handle error messages, or calling it an “edge case”. (Or, let’s be honest, making fun of our users with their low attention spans and outdated browsers.) It’s rarely an integral part of the design process.

For example: suppose you’re designing an e-commerce site that sells diapers. Here’s how the typical design team would imagine the “customer journey”:

  1. Mom arrives at site after reading our carefully crafted email.
  2. She notices our new diaper subscription program and decides to read more about it. Several pages worth (with really nice graphics).
  3. The subscription form requires knowing several things: her preferred brand of diapers; whether she’s getting a good price; and the frequency of delivery she needs. All this she can look this up in her Order History if she needs to.
  4. She completes all the items on the sign-up form, in the correct order, and submits it with no errors. Mission accomplished!

Sounds great. But here’s what really happens (trust me, this is not fiction):

  1. Mom realizes she’s out of diapers.
  2. She opens laptop and starts Firefox.
  3. Baby starts screaming; feeding and soothing ensues
    {insert 45 minutes}
  4.  Mom returns to laptop. What was I doing? Oh yeah, diapers.
  5. She opens the diaper site again. She has approximately 2 minutes on the baby clock to get this done — no time to poke around at special offers or read banner ads.
  6. She completely ignores everything on home page except the “reorder diapers” link. Something about subscriptions passes by her attention, and it seems like a good idea (she wouldn’t have to go through this every month), but she’ll have to wait until another time to figure out what it is.
  7. Password?
  8. She hears a crash in the other room. Shopping interrupted again. Time to make lunch anyway.
    {insert 1 hour}
  9. Third time’s charm. Opens laptop, signs in, finds My Account, finds the first pack of diapers on the list. Clicks Reorder. Hopes it’s the right size, because she doesn’t have time to check.
  10. Baby in her lap starts whining and reaching for the keys. Mom manages to get to checkout in record time and click “Confirm Order” before the baby gets the keyboard and manages to open three applications and send 2 emails before mom can close the laptop and throw it back on the top shelf.

There are plenty of tactical ways to smooth out her experience and satisfy the design team’s objectives (clear access to My Account, streamlined reordering, “remind me later” tool for the subscription program, etc).

But my point is that messiness should be a mindset, not an exception to a rule. We shouldn’t assume that everyone is paying attention, not distracted, not multi-tasking, never interrupted, etc.

If we would account for messiness from the beginning, we wouldn’t have to spend time adding the workarounds later … they would be baked in.

Which would free us up to do other things … like automate our diaper orders!

5 Quick Usability Fixes for your iPad app

interactions & patterns,mobile design | Wednesday, April 11th, 2012

I am quite enamored of my iPad, so much so that I can’t imagine how I functioned before I had one. As a left-brained Virgo information architect, though, I can’t use it without thinking about how to make it better. I’ve installed many apps from publishers large and small, and in many cases it feels like we’re back to 1995 when it comes to designing something that actual humans can use.

Here’s a top 5 list of my main pet peeves. Just a starter, certainly, but I need to vent!

1. Where am I? How do I get around?

The tablet UI is a learning curve for desktop users (no dock, Start button, etc) so why complicate things? Make sure the Home and Back buttons are easy to locate (“Back” preferably in top left), and the current state (i.e. page) of the app is labeled in some way so the user can orient herself more easily. Many usability problems I’ve encountered could be solved just by attending to basic navigational rules.

2. Where are the things I use on the web version?

If the iPad app is a mobile version of a site that your customers are already using, make sure that you include the basic functionality they will expect. Omitting basic task flows -> frustrated customers.

Example: the Netflix iPad app doesn’t allow me to manage my DVD queue. This seems like a very obvious user scenario: I’m sitting in front of the TV, watching previews, and want to add a DVD to the queue. Clearly the iPad app was designed only for streaming (when they planned to separate the DVD business). As a result, however, even the movie catalog is constrained to streaming titles. If you search for something that’s only available on DVD, the app presents a null result:

3. Follow established interaction patterns. Please.

Just because the content is presented via an app doesn’t mean you need to invent brand new interactions for standard functionality. For example, search results. The Epicurious app allows me to search the catalog for recipes based on ingredient, dish, occasion, etc. Awesome, and now indispensable in our kitchen.

However, it took me awhile to realize that the side tabs next to the list of search results are actually sorting tools. Say it ain’t so! Granted, there are space issues, but I think a simple drop-down would still work in this context, and would stay within established conventions.

4. Account for landscape mode

The screen cover sold in the Apple store rolls up into a handy little stand for the iPad — in landscape mode only. Make sure your app’s orientation can rotate.

5. Help, settings, & accounts

As with many web apps, these are the neglected stepchildren of the app world. I would argue that with an app it’s even more important to provide easy access to the nuts and bolts of how to use the app and protect your data. Most apps provide some way to sync your data to the cloud, but often the function is manual and/or hard to find.

This one I discovered the hard way: if you upgrade the operating system, you lose your data. So, make sure the account management details are straightforward.

That’s it for now. Venting complete. I feel much better!

 

Further reading on iPad usability:

iPad Usability: Year One (Jacob Nielsen)

Customer ratings: likes, thumbs, or stars?

big picture ideas,customer experience | Friday, July 15th, 2011

Rating systems are an increasingly common feature on sites that catalog products or services. What may at first glance seem like a simple question – should the rating scale be thumbs or stars – actually reveals much more nuance on closer examination. Different rating scales are geared toward different contexts, and I think it’s important to understand what they communicate (and what they don’t).

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!

10 guidelines for effective search results

ia/uxd methods | Monday, April 25th, 2011

Search is one of the most important elements of a successful website, and not just for e-commerce. Internet users rely increasingly on search to find everything, often completely ignoring the site’s navigational structure and homing in on the search box exclusively (and not always smartly).

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

[dropcap2]1[/dropcap2] 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.

[dropcap2]2[/dropcap2] 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

[dropcap2]3[/dropcap2] 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

[dropcap2]4[/dropcap2] 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.

[dropcap2]5[/dropcap2] 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:

[dropcap2]6[/dropcap2] 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.

[dropcap2]7[/dropcap2] 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:

[dropcap2]8[/dropcap2] 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

[dropcap2]9[/dropcap2] 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.

[dropcap2]10[/dropcap2] 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:

A new twist on the autoresponder email

customer experience | Wednesday, February 2nd, 2011

Like any good online shopper, I receive a ton of confirmation emails from sites I give money to. Most of them are written by robots and say really boring things like “your order has been received”. Nice to know, but they only stay in my inbox for about a second before being deleted, mostly unread.

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?

Axure how-to: create a conditional button

tools & techniques | Tuesday, January 25th, 2011

Axure is my absolute favorite tool for wireframing, prototyping and even functional specs – but despite my ongoing love affair with the program, it’s not the easiest thing in the world to figure out.

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.

Watch “The Story of Electronics”

sustainability | Friday, November 12th, 2010

Annie Leonard’s new video “The Story of Electronics” is not to be missed!

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.

Interactive, paper-based prototyping idea

ia/uxd methods,silliness | Wednesday, August 25th, 2010

I love this! No more excuses for not testing a design. And it looks like fun, so who would want to skip this step?

From IDEO.

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

Next Page »

Powered by WordPress | Based on a lovely theme by Roy Tanck | | Log in