I paid $300 for bad UI design (and all I got was this blog post)

Dear Expedia,

Hi! I recently had a bummer experience on your site that cost me $300. I think it wouldn’t be a hard thing to fix, but first here’s my story.

Several weeks ago, I booked a $200 flight from San Jose, CA to Seattle. I found available flight times, put in my personal and payment info, and clicked this big yellow confirmation button:

complete booking

 

 

 

 

 

It seemed to go through – Mission accomplished!

The night before my flight, I went to Expedia to check my flight details.

O NOES – my flight wasn’t booked!

What happened?!

Now I’ll admit, it’s possible I messed something up. I have two kids and a full time job, and tend to do too much at once. I didn’t check my email for confirmation after I booked (probably because I get about 1,000 emails a day and think email is a broken communications channel, but that’s another post). I just trusted things were good and moved on, since the Complete Booking button went through.

So now I had two options: not take my trip (important for business reasons) or book it for $500. I cringed and took the second option, repeating these steps:

  1. Find available flight times
  2. Put in my personal and payment information
  3. Click big yellow confirmation button.

Everything seemed good – button went through again and the screen returned to the top of the page. But wait—even though the Complete Booking button clicked through successfully, there was some small font at the top of the next screen:

correct

 

 

 

 

 

 

Oh crap—I’d missed some critical information I guess! Maybe I didn’t put my credit card info in correctly. (If so the error should have been more obvious, but OK—my bad.) I read down the page a bit…

“Please select a travel protection option.”

correct2

 

 

 

 

 

 

 

 

Now, I don’t really even know what travel insurance is. Selling me this is something important to Expedia, but I don’t care about it at all. It’s not really surprising I overlooked this because:

  • It’s irrelevant to me, and I didn’t expect it as a required step in booking a trip.
  • The UI did not clearly warn me that my failure to “select a travel protection option” meant I wouldn’t be taking my trip.

Well, OK then. Sadder but wiser, I selected a travel protection option –no– and I’ll be paying $500 to fly to Seattle tomorrow.

Some may argue that I should have payed closer attention during the original transaction. Hey- I wish I had! But I think the whole thing could have been prevented with just a few UI improvements that would make fast and confident booking easier for busy people. Here’s some guidelines from 37 Signals’ excellent book, Defensive Design for the Web, that I hope Expedia will consider:

  1. Eliminate obstacles to conversion. Think about the typical flyer’s core booking goals- flight times, price, payment, confirmation. It’s not buying insurance. That’s an option, and should be optional.
  2. Create bulletproof forms. Don’t let me get to and successfully click the confirmation button if I skip a required field – stop me at the required field.
  3. Display obvious error messages. The Complete Booking button should behave differently if I can’t book the trip – I shouldn’t be able to click it, say. It should turn red. There should be an error right on the button. As it stands, if you make a fatal error in the form, you can still appear to complete your booking.
Posted in Content Strategy | Leave a comment

Sketchnote: How do I buy books on Kindle for iPad?

glutenfreeblob

The difference between sketchnotes and comics is, comics have to be drawn intentionally. They have to look like more than one draft went into it. If we’re being honest here, you probably also need to memorize this book, have a fine arts degree, and be that kid who drew really perfect starting in 1st grade, the one who made all the other kids give up early on.

Whatev. I made one anyway.

The blob was inspired by Google’s new emoticons for Google Hangout, some of which are disgruntled yellow lumps. They seemed to have educational potential, to me, these lumps.

The matter of how to buy books in Kindle for iPad is a topic that I’ve dealt with at work – this process changed some time ago, due to Apple appstore rules. If you haven’t heard about this, you open the app as a new user, and expect, as you might find in other Kindle devices or apps, the ability to buy books. Well, it takes an extra step now, as the blob has discovered.

Posted in Content Strategy, Sketchnotes | Tagged , , | Leave a comment

Sketchnote: The Art of Explanation by Lee LeFever

Wow! This book. All technical writers, in particular, should read it.

Common Craft is known for its widely imitated paper-cutout style instructional videos, but in a way this has become a distraction, the “Common Craft style,” I mean. Before reading this book, I didn’t realize that the cutouts weren’t the point. They are compelling, don’t get me wrong. That’s the secret to why sketchnotes get attention, of course- the handcrafted look. But the cutouts are just actors that impart ideas that are simply constructed, and contain context and emotional appeal. They make us feel smarter and build our confidence. A lot of things that attempt to explain our complicated world fail completely by these measures.

Part 1 of The Art of Explanation is concerned with the Plan: what makes an effective explanation, and who is it for? How do you build the confidence of others?

The Art of Explanation

As it happens, just to create this one dubious page of info-cats required a plan that went like this: read, highlight, review, random pages of notes and cat drafts, then sifting these for just a few to include, since running out of room seems to be my main skill as a sketchnoter.

blaa

It’s comically challenging, this thing of sketchnoting. I’m keeping after it, though. As LeFever points out, and he is quite right, the act of making yourself produce an explanation increases your own comprehension of a subject – in this case, the importance of why- context and connection. Have those sometimes been missing from my own content as a technical communicator? You bet.

Posted in Book & App Reviews, Sketchnotes | Tagged , | Leave a comment

Sketchnote: The Graphic Faciliator’s Guide

First things first, my attempts to sketchnote but a few of the many fine ideas in Brandy Agerbeck’s The Graphic Facilitator’s Guide, which shares the wisdom of her profession (distilling and illustrating information in a live meeting environment).

Brandy’s book is ambitious in scope; I lack her skills in info-synthesis and organization to do it justice in a page. Brandy argues that in the 21st century, we’ve embraced the postmodern perspective that all voices have value, without yet having determined how to distill and organize multiple perspectives into a coherent meaning. Graphic facilitators do just this: they step into a conversation without an outline or a script, where spontaneous perspectives are shared, and apply their thinking, listening, and drawing skills to the task of identifying patterns, symbols, and lasting meaning from many inputs.

**update**

I found this sketchnote a challenge. Perfectionism, completism, still-developing synthesis and drawing skills, the sheer skills it takes to sketchnote, all challenges to take on when approaching this discipline.

The following sketch ended up being cut out of the original sketchnote (so much for quick like a bunny). I wasn’t sure it was a key idea, or maybe I didn’t like the stick guys? Let it be noted that actual graphic facilitators, who work in front of a live audience, could never get away with this type of nit pickery!

listenthinkdraw2

Posted in Book & App Reviews, Sketchnotes | Tagged | Leave a comment

Sketchnote building blocks + visual vocabulary

Sacha Chua has a great post on how to build your sketchnote visual vocabulary. It’s helpful to be fluent in symbols you’re likely to draw and re-use, especially when sketchnoting live. With this in mind, I’ve borrowed ideas from some other artists and sketchnoters (including Austin Kleon, Don Moyer, Sachiko Umoto, Ed Emberley, Fiona Watt, and Joy Sikorski) mixed in with my own ideas to practice drawing random things, some useful, some just for fun.

icon-library

Posted in Sketchnotes | Tagged | Leave a comment

Information structure for sketchnotes

After experiencing an empty chair moment while trying to sketchnote a training last week, I realized I needed to hit the books and revisit some basic visual information structures.

The Napkin Sketch Workbook chapter “Choosing a Structure” provides great sketchnote examples for several information models, so to teach myself, I applied a concept from work (Kindle) to the info models myself. Here are my results*
*info represented is example only- not real data

Here’s another extended example of a workflow or business process. I find myself drawing these at work whenever I’m thinking about ideas or objects that move between people or locations.

Next up: tackling more structures, and a visual icon library…

Posted in Content Strategy, Sketchnotes | Tagged , | Leave a comment

Drawing is easy. Thinking is hard.

Last week I attended a training on how to write a product planning document. “Writing is the easy part,” read one slide. “Thinking is the hard part.”

I tried (and failed) to sketchnote the talk. Early in the discussion, the facilitator told an anecdote about Jeff Bezos: that he used to bring an empty chair to meetings to represent the customer. I dutifully drew the chair, which sat in the center of the page as random phrases began to surround it. I ran out of room 30 minutes into the talk.

I imagined the consumer of my sketchnote sitting in the empty chair I’d drawn. They’d look at the buzzwords I’d written, spread out in wobbly circles on the paper, wondering when they could get up and leave. My sketchnote, I realized, had no information structure — no skeleton. I guess I thought that this sort of thing would create itself as long as I could draw a few things along with the words.

It turned out that drawing is easy, but thinking is hard.

Posted in Sketchnotes | 5 Comments

Sketchnote Autobiography

In the spirit of Austin Kleon’s Steal Like an Artist, I have a number of sketchnote heroes whose work I admire and sometimes try to emulate. One of them is Don Moyer.

His one-page autobiography is a favorite, which I’ve tried my own version of:

Actually found this a challenging exercise, it feels weird to map out a life. To quote Bob Seger, “what to leave in, what to leave out?”

Several years back, I attended an all-day onsite-offsite (a special kind of corporate torment in which team members are trapped in a conference room together for 8 hours with flip charts and markers in an attempt to get along). The leader, a UX design manager, insisted that each participant design a map of their life, which they then had to present to the group in a 10-minute speech.

The UX designers quickly produced adorable cartoons and poster-perfect lettering, while the writers hesitantly scratched out stick men surrounded by clouds of text. When it came time to sum up our lives before the crowd, though, the writers were able to compensate with amusing stories and asides.

How did I do? I can’t recall. I’m sure my drawings were bad, but since then I’ve been trying to bridge this gap.

*Bonus material*

More of my sketches stolen like an artist from Don Moyer… Here’s his great Flickr photostream.

Posted in Sketchnotes | Tagged , , | Leave a comment

Sketchnotes: lettering by hand

Any one of Mike Rohde’s sketchnotes makes me want to improve my penmanship. His own doubles as both art and information.

This being so, the curiously low-priced Creative Lettering Techniques by Jenny Doh seemed like a compelling investment.

Although the book’s examples are from proper artists who use stuff like Gesso and scratchboard, many demonstrate basic techniques for adding 3D or textured effects to letters with regular pens (one of my favorite pens, a Wacom iPad stylus, works just fine for this purpose).

I realized while flipping through this book however that these aren’t the quick techniques you’d use to scribe a talk or meeting, but more to embellish or add emphasis to a more designed piece of visual content. The latter is actually more my area of interest, and I’m not the best artist, so it’s a great reference.

Any book that promises to improve the drawing aspects of my writing always gets my money because I suffer from the imbalanced outlook Brandy Agerbeck warns of in her book The Graphic Facilitator’s Guide:

“Because drawing is the physical, tangible skill and because it can be the scariest and least-developed, we overemphasize it. Do not let drawing eclipse the importance of your listening and thinking skills.”

Listening. Thinking. Oh, right.

Posted in Book & App Reviews, Sketchnotes | Tagged , , | Leave a comment

The Rise of the Content Strategist

Note: My article was originally published on the University of Washington’s Flip the Media blog on 4/1/2012


Content strategy jobs are hot—Flip the Media’s Peter Luyckx called it last year. Type “Content Strategist” into a job search engine and you’ll see plenty of results. Reflecting that trend, my own title was recently changed from Editor to Strategist.

Five years ago, Content Strategists were rarer than unicorns. I’d know– I’ve been in content since 1997 and only recently started seeing the title come up. What’s happened in the content industry that’s driving this change?

Kristina Halvorson’s Content Strategy for the Web, first published in 2009, has been a big influence, as Peter notes in his post. In her book, Halvorson defines content strategy as “the practice of planning for the creation, delivery, and governance of useful, usable content.” How does this differ, though, from what professional content writers, editors and managers have been doing all along?

Continue reading

Posted in Content Strategy | Leave a comment