Firecat Studio

The Usability Test and Other User-Centered Design Tools

Recently, we asked some of our coworking group and other friends if they'd be willing to participate in a usability test conducted by another user-centered design consultancy. That spurred a whole, interesting conversation about what a usability test is, what we can learn from one, and when a project warrants conducting a usability test.

Usability Activities

There are a multitude of ways we user-centered designers gain insight into how people use websites. Mature, experienced designers should be open to finding out they don't have all the answers - but that users DO. These usability activities are the special magic behind great web design. Some of our favorite usability tools are:

• Heuristic evaluation. Measure a proposed design against a set of web design rules of thumb, or web design best practices.
• Contextual inquiry. Study how users work and perform key tasks while in their "native environment." For example, before redesigning an intranet reference system for customer service reps, we want to know about the rep's cheat sheets, post-it notes, bookmarked websites, phone directories, and other job aids, and how they interact.
• User personas. We frequently create fictional representative users of various types, and use those to check the design. For example, Jolie, our young, internet-savvy college student might be fine with a design, while Frank, the retired Colonel who struggles with e-mail will have a more difficult time - and both need to be able to successfully complete a key task.
• Task analysis. We look extensively at how and when every bit of information is transferred during a task, whether the information is moving from a database, a memory, a piece of paper, a post-it note, or a website. We consider physical aspects, environment, and time as well, like having to walk to a printer, or digging the credit card out of a wallet or purse.
• Informal usability study. Sometimes it's enough to just show the person sitting next to you a sketched layout of a screen and ask, "If you were trying to order tickets on this website, what would you do first?" or "This is a restaurant review website. How would you find reviews for Tre Trattoria?" Speaking from my own experience, the hardest part of this type of test is shutting up and letting the person find his or her own way, or to fail.
• The full web usability test. Conducted in a usability lab, with a controlled environment, one-way mirrors, videocameras recording the mouse, keyboard, user's face, and the screens.

Here's what a usability test looks like. We're seeing the participant from the control room through one-way glass; we can see her but she sees a mirror. We are able to guide her and answer questions. Commonly, a usability specialist sits with the participant.

Photo courtesy Sun Microsystems.

In web design projects, it's very helpful to watch people try to complete specific tasks using a prototype of a proposed design. A screen that the designer feels is perfectly clear in its layout and labeling can be baffling to a user, and there's no better way to help the designer understand that than for her or him to watch users attempt to perform the task.

For example, when I'm designing an airline ticketing system, I analyze the users' needs and the business requirements, then mock up what I think is a great set of screens to allow users to order tickets. I probably did a great job. But I can't fix problems I'm unable to anticipate, and that's where a usability test comes in. Here's the drill:

• Design the test. The usability specialist works with the design lead to design a usability test. We discuss the goals of the test, the users and tasks, the desired task flow, possible alternative task flows, and criteria for success.
• Recruit participants that match our criteria.
• Schedule participants into the lab.
• "Freeze" the design for the test, and provide a prototype. This prototype can be the actual code, mockups of screens, or a sketch on paper. A great usability specialist can get valid results using any of these artifacts, as long as they have the basic elements needed for the user to make decisions.
• Conduct the test. The sessions are recorded. The usability specialist walks the participant through the task without leading them (which would invalidate the results). The designer and other team members can watch behind the one-way mirror. Occasionally we may ask questions or clarify something about the task through the intercom, but it's best to remain silent and just learn.
• Document and analyze the results. After all participants have been through the test, the specialist tabulates and analyzes the results. How many participants got all the way through the tasks? Where did they stumble, and why? The usability team pores over videotapes and discusses what happened, looking for patterns.
• Write the report. It's great if the designers can attend sessions, but budgets often don't allow for that. The usability specialist must draw conclusions, support the conclusions with data, and make specific recommendations for improvement.

The scenarios provided to the participant must have enough information to ensure we know whether or not the user successfully completed the task - or if they can't complete the task, how far down the path they got. "Let's say you need to order plane tickets to Guadalajara for a trip on August 12, returning on August 24. It's you and your adult companion - who's confined to a wheelchair. How would you proceed?"

As a designer myself, I have watched - helplessly - behind the one-way mirror while a user missed the large and obvious (to me) "Order Now" button. As web professionals, it's very easy to lose touch with how it feels to be a novice user. The more experience we have, the harder we have to work at understanding "beginner mind" on any web interface or application. Watching actual users use what you've designed is invaluable experience. Sometimes quite painful, though!

Full usability tests are time consuming to plan, conduct, and report on, and in order for the results to be valid, require the services of a usability expert. The specialist who conducts the test (usually sitting beside the participant) has to be a special kind of person, one who can patiently wait through user frustration, withhold information with a poker face, and not lead the participant in any way.

If you're getting the idea that usability tests are expensive and time-consuming, you're right. At Firecat Studio, we only recommend a formal usability test when the alternative methods can't tell us what we need to know, and when we do not have the luxury of trial and error.

Alternatives to Full Usability Tests

In many cases, we can conduct informal usability tests using paper prototypes or quick mockups and uncover the majority of usability problems with much less time and expense.

Ship, Then Test

A perfectly valid approach is to "ship, then test" - put the site out there, measure users' actual success with tasks, and make adjustments to the interface after launch. Websites aren't like books - they're meant to be reworked, to evolve and grow as you learn more.

Sometimes skimping on usability is penny-wise and pound-foolish, though. A full usability test is in order when:

• Designing complex, custom-programmed interfaces, where reprogramming costs would be extensive.
• Inventing a new type of interface, one for which a widely accepted user interface pattern doesn't apply.
• Time to market is critical and reprogramming or redesign would take longer than the test process.
• A usability problem could result in a highly negative brand experience. This one's a judgment call - any usability problem impacts brand, even on screens used behind the scenes. Some black eyes are worse than others, though.

Depending on the size and business-critical nature of the project, any of these cases can make the $5,000 and up cost of a usability test seem trivial. If you're interested in finding out more about usability tests, or in exploring our other, lighter usability techniques and activities and how they can improve your business website results, please feel free to contact us for a professional consultation.

Creating a Great Landing Page

convert

A recent thread in the CHI-WEB list prompted these musings on designing an effective landing page. I love creating landing pages! In our attention-deficit culture, they're the bomb.

What's a Landing Page?

Landing pages are the magic behind online advertising. When you click on a banner ad, or a link in an email, you are taken (when the designer knows what she or he is doing) to a specific, focused page that delivers whatever the ad or link promised you.

Landing pages have to do the heavy lifting of converting the user from a prospect (someone who was interested enough to click) to a customer. A conversion doesn't have to be an actual product sale, though - it can be any action you want the user to take, like an employee filling out an open enrollment form online, or voting in a survey, or just reading a message or looking at an image or video.

That relentless focus on a specific, desired action by the user distinguishes a landing page from any other web page. By contrast, a home page usually must offer several possible actions or paths for the user, such as Find Contact Information, Log In, Review Services Offered, Shop the Catalog, Make a Comment, and so forth.

Landing Page Design Philosophy

My best advice: Keep landing pages extremely simple - and ruthlessly focused on whatever benefit or offer the user clicked to arrive there. The user in the scenario is already in the marketing funnel - so give them NO reason to jump out. Limit other navigation choices to some very secondary "other options." Sometimes we remove the global navigation altogether to help the user stay in the task we want them to be in.

The design of the landing page is certainly important, but it's vital to approach the landing page as part of a sequence. The tease in a banner ad or email is also critical to success. The sequence for marketing landing pages is often:

eMail -> Landing page -> Confirmation page

For a small business, it might be:

Printed URL (on a billboard, business card or letter) -> Browser -> Landing page -> Confirmation page.

Each link in the chain must do its job to get users to take the desired action. Consider how they'll find the tease in the first place. Make sure the tease is compelling. Test variants to see what drives the most traffic. Optimize for SEO.

Landing Page Examples

Netflix - The Direct, Simple Approach

Here's a sample offer email from Netflix:

And they wisely take me straight to their home page, which is an optimized landing page for prospects.

Sure, existing Netflix customers are important to Netflix too - but not as important on the public home page as what I call the "keystone" user of that page, the prospect. There is a Member Sign-In in the top chrome, but chances are, existing customers will "deep dive" straight to their login and account via a handy customized link in a reminder Netflix email anyway. That's good cross-channel strategy.

MyLife - The Gotcha Approach

MyLife (which used to be Reunion.com) teases registered users who aren't yet customers with emails like this one:

The registered user cared once upon a time about connecting with their past, so MyLife wisely pushes that button again in the email, trying to spark curiosity.

But then the marketing funnel hits a block. Instead of presenting the information they've teased, the user is negatively reinforced for clicking - a Roadblock landing page. In order to help people jump the payment hurdle, they're using time-sensitivity - see the ticking stopwatch, after which presumably the cost goes up or the offer terms sour.

I'm not a proponent of this type of takeaway marketing. I'm willing to bet they could improve the conversion rate and retention with marketing method that show more respect for the user. In our current Internet culture of free giveaways, a better strategy would be to take me to a page where I saw partial data, and invite me to pay for the contact info. Or let me connect in the usual free social media form, and upsell me other higher-end services.

But Wait! The Interminable, Hard Sell Landing Page

You'll be familiar with this type of landing page, it's the online equivalent of a 30-minute infomercial. I know they're effective, but I can't stand them. They smack of snake oil, the foot-in-the-door salesperson jabbering on, and on, overcoming objections by persistence and brute force.

Unfortunately, they work. Extremely well, in fact - as ably demonstrated in a Firecat First Friday coworking brownbag on email marketing given by San Antonio's Chick Whisperer Scot McKay a few months ago. Scot is a driven, intelligent marketer who continually experiments and tests, and repeats what works. This longer, overcome objections approach works beautifully for him. Scot's approach is to give, give, give, ask for a small sale, and continually build relationship.

I'm including as my example of the long scroller a typical landing page from Facebook's "Pied Piper" Mari Smith - because it's extreme, almost a caricature of this type of landing page. Mari's emails are very personal looking, not graphic, with the tone of a note from a friend. She also gives lots of freebies and carefully builds relationships. But when she's ready to ask for the sale, watch out! It's 12-15 screensful of information calculated to wear down the user. I can't show you the whole thing - that'd be ridiculous. Here's how one of Mari's landing pages starts, though:

 

Chock full of words straight out of Words That Sell.And this goes on for 12 more screens (at 1924 resolution!).

There are calls to action sprinkled throughout the long scroller. ("Now how much would you pay? But wait, don't answer - because for a special limited time, you also get...") Finally, finally! at the bottom we get to the main Call to Action element - which glows, pulses and screams. After all that effort, the user does need to be rewarded with an incontrovertible, straightforward "ask."

 

Techniques Checklist for a Landing Page

Mari's landing pages contain almost all the elements that could possibly help to convert someone from a prospect to a sale. Use some of them - or if you have the stomach for the hard-sell technique, all of them:

• Addressees: "Attention all coaches, marketers, entrepreneurs..."
• Emotional Promise: "Finally! Discover exactly..."
• Recognizable Brands (Twitter and Facebook logos)
• Promise of Benefit
• "We relate" verbiage - "If you're tired of being stuck, afraid to be left behind..."
• More Info - the user expects to navigate away with these links, but these are anchor links to sections further down the interminable landing page
• "Hard Truths"
• The Big Questions (in red, "Where do you start?"
• "You Could Try..." less desirable solutions
• "My Passion"
• Stats and Facts
• The Solution (her product) - at last, several screens down from the top
• Messages of Urgency
• Kill the Competition - why other providers aren't credible, and she is
• This is for You - stated in imperative language
• Checklist of Benefits (with big red checkmarks)
• Second Checklist of Benefits - But wait! You also get...
• Third Checklist of Benefits (What's Included)
• Visual Value - numbers and pricing with strikethru and better terms NOW
• Special Bonus!
• More Bonuses!
• It's Easy! promise (since all this is starting to sound like time-consuming work)
• Testimonials. Screensful, video, audio and text with selective bolding of key phrases
• The Press Says - More credibility building and press coverage
• Call to Action - The giant main Call to Action coupon, finally
• Special Price - Strikeout on "original price" showing discount
• Warning - limited time to create urgency
• Breaking News - Yet another special terms message with animated arrow
• Assurances - Secure transaction, Money-back guarantee
• Another Personal Message "I know it's a risk"
• Dangle the benefits again
• Less demanding call to action, a simple text link
• Letter closing with signature and photo (personalize)

Phew! That made me tired, didn't it you? I strive to use as few as possible to achieve that magic balance between simplicity and effectiveness. I don't like wearing my users down, so I'm a good match for clients who offer straightforward value and prefer a direct, authentic style.

A Quick ASCII Wireframe for a Landing Page

In our web design work, we often sketch out "wireframes" of pages -- not the pretty, finished look of a comp, but a utilitarian representation of the elements that belong on a page. Here's a very basic wireframe of a Landing Page - what I would sketch out on the whiteboard in a design meeting.

==================

Logo Masthead/Branding

* Benefits statement
* Supporting info / list

[CALL TO ACTION (C2A)]

... other options.

==================

Mental Model of a Banner-ad-to-Landing-Page Conversion

Here's another of our tools to get essentialized enough for a really effective landing page: The Mental Model. In this process, we examine what steps, beliefs, emotions, objections, logic and so forth are pinging around in the user's head at these critical junctures.

Like most of our design work, this process is best viewed from the user's point of view, though I have tagged what's going on in our "design speak" and included some advice to the designer.

1. See the offer (banner ad, email, website/link in context, print offer with easy URL). [Visibility, context]
2. Get intrigued enough to click. Your banner ad, eNews tease or website paragraph with a link needs to be a compelling promise of a specific benefit. Paint a mental and emotional picture with images, words, sound, ideas. Make the link itself an action verb phrase in Second Person if possible, such as "Find Out More or Enroll Now". Questions also work well. [Emotional+Mental = Compelling]
3. Did I arrive where I intended to? Match the branding and message to your ad/tease so this is instantly, intuitively processed.
4. Is this for me? The user WANTS to believe or they wouldn't have clicked through to the landing page. Help them believe it! Tell them what they stand to gain, specifically and compellingly. Overcome anticipated objections. [benefit statement]
5. What's the catch? This is the hesitation with the user hovering over your Buy Now button. Include the terms of the offer in a straightforward, factual, BRIEF manner. Include only what's necessary. Rework complex offers until they're essentialized.
6. YES! [click]
7. What now? Reward the user AT ONCE for clicking. If you need hairy registration information, your lawyer insists they actually scroll through the Terms of Service, and so forth - fine. But that can WAIT until AFTER you thank them, turn something green, check something off with a juicy large checkmark. You are building a relationship that's fragile. Hold up your end in a warm, HUMAN manner. [Positively reinforce the desired action]
8. No, thanks. In case of NO, underneath/after the primary sequence, offer something to keep the user in relationship. Examples: Learn more, still not convinced? More info, testimonials and case studies can help salvage a conversion. If you have a free, trial or limited version, here's where you offer it. Other products or services? Doesn't hurt at this point. Still THANK them for their time.

Resources for Understanding User Mental Models

I highly recommend Dan Ariely's Predictably Irrational book to better understand the user's head space and emotional landscape when processing offers. By better understanding the mental and emotional state of the user, you can make an offer and overcome objections without subjecting users to the long, scrolling horror techniques.

Another good book is Indy Young's Mental Models book, available from Lou Rosenfeld's site. Both Indy and Lou are top UX professionals and great sources of user-centered design info.

I'd love to hear what you think about landing pages, and I'm always on the hunt for spectacular examples, both good and bad. Send 'em on!

Designing in an ADHD Culture

SxSW 2009 is accepting panel ideas, and I want your help identifying the right people to help me with THIS one: Designing in an ADHD Culture.

I think we need Thom Hartmann on the panel; he wrote a book on ADHD that basically said this is a cultural adaptation, not a disorder. Read the list of symptoms below and see if you're suffering from this disorder too. I've seen this ramp up like crazy in the past few years, and I attribute it to the barrage of info coming at us with increasing volume.

Adults

• Often making careless mistakes when having to work on uninteresting or difficult projects
• Often having difficulty keeping attention during work
• Often having difficulty concentrating on conversations
• Having trouble finishing projects that have already been started
• Often having difficulty organizing for the completion of tasks
• Avoiding or delaying in starting projects that require a lot of thought
• Often misplacing or having difficulty finding things at home or at work
• Often distracted by activity or noise
• Often having problems remembering appointments or obligations

Sound familiar? Who else shall we have on our panel?

Kathy Sierra, who knows to put one point on each slide and make her points with a mallet instead of a pixie stick.

Jane McGonigal, the goddess of games. She knows how to keep people engaged, interested, motivated.

Who else? You? Tell me what you think. Would you want to attend that panel?