StarbUX

After venting my frustrations with Twitterfeed yesterday, I thought I might like to do a nice positive UX post lest you think I'm just a Negative Nancy about this stuff. I may not be filled with sunshine and puppies, but I've got at least a few bottles of each stored away for the right occasions. And today, I'll be singing the praises of a company that doesn't get that treatment very often these days: Starbucks.

But, before I begin...

---

Disclaimers And Caveats
"What, the Starbucks website is perfect? They have no major UX issues?" The answers to both questions are almost certainly no. I'm just callin' 'em as I see 'em.

"Oh, C'mon, Starbucks isn't the first person to do that!" Probably not. But just because something's been done before doesn't mean that it's done well forever thereafter. And hey, if I haven't seen it, it's new to me. (Also, Starbucks is not a person, despite what the law says.)

"I could totally do better than that." Ok. No one's stopping you. Do it.

---

Ok, glad we got that settled.

When I was looking for the calorie content in one of their sandwiches yesterday (for my data-driven diet), I was a bit taken a back by the design of their navigation menu (in a good way).

They don't look like anything special right now, I admit. In fact, my one small quibble with their design is that the menu "tabs" don't look clickable at first. They are taking advantage of a very pervasive web idiom, which makes it hard to mistake those headers for anything but ways to navigate to a different part of the website, so it's fine. But making their clickability (is that a word?) a little more obvious wouldn't take away from the cleanliness of the design and it would help that occasional user who hadn't quite internalized this particular navigation idiom.

Anyway, I was supposed to be talking them up, not down, right? This is the flyout that happens when one of the menu areas is hovered over with a mouse:

Shiny!

There are two things that I think are fantastic about this design. First, instead of trying to fit all this in a traditional flyout menu, which would've been long and cumbersome, or hiding some choices, they instead structured it almost like a miniature web page that's been stripped down to it's bare information architecture. I'd have to do testing to be sure, but it seems like the hierarchy is narrow enough that I wouldn't expect users getting flustered or experiencing information overload while figuring out what to click on.

But the second thing is even better. You may not have even noticed it because of the way I cropped that shot, so here's a closer look.

See what they did there? Those little links in the "bubble" at the bottom (what would you call it?) are cross-references. They did their homework. Consider the "Coffee" and "Menu" section headers. They designed the former to be a brew-at-home catalog (with a small helping of information about their roasts) and the latter around the coffee beverages you can buy À la carte. Then they realized - probably through some combination of user research, usability testing, sheer cleverness, and trial & error - that people could conceivably look for the some things housed under "Coffee" under "Menu" first, and vice versa. It depends on what the user is looking for and how the user defines the goal. And so they created their bubbalicious cross-reference sections - which conceivably are easily noticeable and yet not distracting - to help those users out.

Brilliant human-centered design. But I still won't drink their coffee.