Circuitree: The Willowtree blog

Phew! I just submitted two proposals for talks--actually, one talk and one tutorial--for the Agile 2011 conference in Salt Lake City, UT.

The process was kind of a whirlwind. I somehow missed the call for earlybird submissions, so when I saw the last call on the IxDA mailing list on Friday I had about three days to run the idea by my manager, brainstorm, outline both talks, and then write and edit the proposals. Nothing like a tight deadline to invigorate you!

Luckily, it seems that my old instructional design skills can be encouraged to re-emerge with sufficient a) motivation and/or b) caffeine. The conference looks really cool, and I'm excited at the opportunity.

The two talks I proposed are:

• Agile UI Prototyping with jQuery
• Why Can't We All Just Get Along? Improving Designer/Developer Collaboration

I felt like the other submissions were already covering "Agile UX 101" pretty thoroughly, so I decided to go in a somewhat different direction.

Agile UX design is something I care a lot about since I live in that world every day, and I've learned a ton since I began this adventure four years ago (mostly, y'know, the hard way...). Our development process has evolved a lot since I first joined the team and is continuing to evolve all the time. So I'm excited at the chance to share what I've learned.

I'm also excited at the chance to go back to my roots and present and/or teach technology again. It sometimes seems strange that I teach more kayaking than anything else these days! I give a lot of presentations as part of my job, but it's not the same thing as working with students to really dig into a topic.

The talk on designer/developer collaboration is particularly near and dear to my heart--coming from a stint as a 1-person design/development shop I made a lot of early mistakes in this area (and sometimes still do!), but it's now one of my favorite parts of the development cycle.ﾠ

Sure, I love building cool stuff that makes our users' lives better, but possibly one of my proudest moments was when a developer who had never worked with a UX designer before said, "I don't know how we ever did this stuff without someone like you."

Slightly less proud, but equally important moments: all the times developers point out to me something I missed, or come up with a better way to do something, or push me to write a better error message than the one I just gave them. I feel like it's too easy to slip into a "developers are from Mars and designers are from Venus" attitude when in reality there's so much common ground.

So, now I just have to sit back and wait for feedback and/or a final decision. Cross your fingers for me!

I recently noticed something interesting about the mall directory graphics in my local mall, the Natick Collection (because apparently calling it a "mall" would be just so...2007).

Here's the first directory I encountered, all the way at one end of the mall, outside Macy's.

As you can see from the closeup, Macy's is all the way at the bottom.

Here's the next directory I encountered:

I took this from the same angle, standing in front of the directory. Notice anything strange?

The map has a totally different orientation: Lord & Taylor at the bottom, Macy's on the left.

Intrigued, I walked through the whole mall and found that virtually every directory I passed used a different orientation.

All of the pictures below were taken from standing in front of the directory and are presented in the order I took them. As you can see from the "You are here" stars, I basically walked from one end of the mall to the other (from Macy's to Sears) and then up (down? sideways?) into the wing with Neiman Marcus at the end.

Note that there's only one place where two consecutive directories use the same orientation.

The effect of directory orientation on mall wayfinding

I discovered this while on a trip to the mall during which I had to stop at a number of stores I rarely go to (I'm not a big fan of malls, and I have a 10-month-old, so I tend to save up my mall shopping to do all in one epic trip).

I had to look at directories multiple times during the trip to find my next store, and I found that every time I had to stop and re-orient myself to the map in its new configuration.

I suspect that this is because, much the way people recognize common printed words by their shape rather than parsing each letter individually, I was doing my wayfinding using the rough (and quite distinctive) shape of the mall itself.

Every time I came to a new directory, it made the shape of the mall unfamiliar all over again. I had to first "learn" the new map before even looking for the "You are here" star and planning my next move.

It is helpful that the color-coding, at least, is consistent from map to map, but I found myself relying on the color blocks much less than the shape.

Directory orientation: nature or nurture?

I have a hard time believing the orientations are random, especially since the directories were created after the mall was renovated several years ago, which added the entire Neiman Marcus wing and the adjacent luxury condos and transformed it into an extremely upscale shopping destination. I can't believe they did such a massive and expensive set of renovations without putting any thought into the directory experience.

However, even after consideration I still can't figure out the rhyme or reason behind the various orientations. For instance, they don't seem to be arranged so that "up" is always the direction you're facing as you look at the directory, or so that "up" is always the direction you're facing as you come out of the closest department store. They're not reliably clockwise or counter-clockwise.

I suspect that the mall didn't consider my use case when designing these maps. It's possible that it's optimized for someone entering the mall from one of the entrances near a directory and looking at only a single directory (I unfortunately didn't examine this closely while I was there).

It's even possible that the mall designed this disorienting experience deliberately to force me to look at the map closely (to notice other enticing stores, perhaps? Although the store listing is so far from the map itself that I find it unlikely that this would actually work).

If anyone manages to figure out the rhyme or reason, please post it to the comments. I'd love to know! For now, I'm back to planning my route in advance using the Web site (which, by the way, uses a totally different directory format and color scheme. Sigh).

When will they start making a GPS device for malls?

You know that poor developer in the first Charlie's Angels movie who tells dominatrix Lucy Liu that their company should offer free coffee because "coffee makes us code better?"

Yeah, that's me.

I was once shocked to calculate that my yearly coffee expenditures were the equivalent of a mortgage payment. When someone finally gets around to inventing steady-release caffeine patches, I'll be first in line.

But I could quit anytime, of course.

Anyway, you can imagine that the usability of our office coffeemakers is of great interest to me.

Keurig Coffeemaker, Mark 1

In the beginning, the managers said, "Let there be free coffee." And they caused a Keurig coffeemaker to be installed in the kitchen, and, yea, the joyful employees saw that it was good.

It's virtually impossible to make a mistake using this thing. You put your cup on the clearly marked stand, open the drawer, put the K-cup in the receptacle, close the drawer, and press the green button. Voila: a perfectly sized cup of coffee.

It's simple, intuitive, and has clear affordances: the drawer has an indented handle that affords pulling, the place where the K-cup goes is shaped exactly like a K-cup, and the green button blinks after you close the drawer to indicate you should press it next.

And, just in case you should get confused, the machine has integrated instructional graphics and text outlining all of the relevant procedures.

Sure, the instructional diagrams aren't the most aesthetically pleasing decorative element, and the only time I've actually used them is the first time I ended up with the corporate hot potato of emptying the full K-cup bin. But, it's nice that they're integrated with the machine instead of hidden away in a manual that a) no one will ever read and b) will inevitably be lost.

So, Keurig has a good thing going here, and there's no reason they'd want to change it, right?

Enter the Keurig B3000SE

In our Warwick, RI office the earlier model has recently been replaced with these:

My extremely scientific first thought was "Ooh, pretty!" The science-fiction model number combined with the sleek, silver aesthetic make this machine look like it's come back from the future to save me from caffeine withdrawal.

Unfortunately, Keurig has traded function for form.

The new machine has an LCD screen, which, in theory, could significantly improve usability. Instead, after you insert your K-cup and close the drawer, you see this on the screen:

This screen stopped me cold. My office only supplies one size of cup, and the K-cups are also all the same size--the right size for a serving that fits the cup, presumably. And what do the numbers mean?

The graphic all the way on the left looks like an espresso cup, and the graphic all the way on the right looks like a travel mug, neither of which seemed to match my cup. So I chose the second from the left.

This produced a serving that filled less than half of my cup. I dumped that cupful and tried the next setting over to the right. That produced a serving that filled about three quarters of my cup. I discarded that coffee too.

At this point I had a brainwave and examined the cup, which had (in small print along its seam) "10oz." It turns out that the numbers on the LCD correspond to the serving size in ounces, and the correct setting is therefore the one all the way on the right (whose graphic, I will note, bore no resemblance whatsoever to the size and shape of the actual cup I was using).

I don't know about you, but I'm much more used to measuring coffee in small, medium or large (or tall, grande and venti, on an extravagant day). I don't have a good mental picture of how big 10oz is (and it's a pretty safe bet that I deal with ounces more times a day than most people, after 7+ months of mixing baby bottles).

NOTE: According to Mindless Eating by Brian Wansink, which is a fascinating read in general, most people are poor at estimating liquid serving sizes--especially in short, wide cups like our office coffee cups. The author's research suggests that I wouldn't have been able to correctly guess the size of my cup in ounces, even if it had occurred to me to try.ﾠ

Moreover, I wasn't devoting a lot of mental energy to figuring out what the numbers meant; I just wanted to get my cup of coffee and get back to work. To use Steve Krug's term for it, I was "satisficing:" conserving resources by taking my best guess.

I've since watched other employees making the same mistake. So, let's do some quick and dirty math.

According to Amazon.com, each K-cup averages about $.50. Assuming that other employees do the same thing I did, at an office where 100 employees drink coffee this single confusing screen could cost the company an extra $100 (2 cups * $.50 * 100), plus over 8 hours of lost productivity (5 min per employee * 100 employees).

If we decide that most employees figure it out sooner than I did and only discard one cup, the cost is still $50 and 4 hours of lost productivity.

That still seems like a lot of time and money for a single coffeemaker screen, no?

Communication Problems

My other least favorite thing about this model: whereas the first model doesn't make a hole in the lid of the K-cup until you press the "Brew" button, the new model pierces the K-cup as soon as you close the drawer.

I discovered this by my usual method (a.k.a. "the hard way"). I put the K-cup in, closed the drawer...and only then noticed that the machine couldn't brew because its hot water was heating. With the original model, I could have taken the K-cup out and used it in the second machine right next to it; instead I had to wait several minutes for the heating process to finish.

Also, the very first screen on the LCD (before I even insert a K-cup) asks me to select a language. Yes, French and Spanish speakers should be empowered to make a cup of coffee, but this machine performs a single function (make a single-serving cup of coffee), and only has a few potential error conditions (K-cup bin full, out of water, water heating).

Should I really have to select my native language to allow my coffeemaker to communicate with me?

The old model was so easy to use (partially because it had so few options) and its integrated graphics so clear that I doubt a non-native English speaker would have had any difficulty using it, even though all the text instructions were in English.

If Keurig had in fact been receiving customer feedback that other languages were important, the original model's instructional text was so concise that it would have been relatively simple to provide French and Spanish versions as well.

Closing Thoughts

They have made some improvements in this model. I love the aesthetics, and I like the way the K-cup holder swivels invitingly towards you when you open the drawer. The K-cup bin disposal method has also improved. I also like, in theory, the fact that you can adjust the strength of the coffee by specifying a different cup size.

Now that I know how it works, I can use it successfully every time. But whereas the original machine required no thought whatsoever, every time I use the new model I have to take a minute to remember which setting is the right one.

Which is especially difficult before I've had my morning coffee.

One step forward, two steps back, Keurig.

This is the whiteboard in my office kitchen:

It started as the set of instructions in red in the upper right from our product owner and business analyst (who somehow also got stuck with the job of ordering our office coffee supplies).

Our IT director translated it into a flowchart, with additional contributions from several developers:

I contributed the JavaScript function on the left (and also, somewhat more embarrassingly, the chicken pot pie comment above):

Every time I look at the whiteboard I feel happy.