Obsession to Detail

The success of a user interface depends on getting the details right. 
That's not to say that a little bit of fit-and-finish work can save a horrible
design, but a good idea won't thrive either unless enough of the little details
are right.

I know that I am sometimes frustrating to work for because I
can be a bit of a perfectionist around the UI.  Especially during the last
part of the product cycle, I'm constantly prodding and poking (and asking those
around me to prod and poke) to make sure that every decision we make is as good
as it can be.  (I mean, you only get one chance to do something like
this, right?)

Our development team has gone out of their way to provide us the
opportunities to get the details right.  Unfortunately, sometimes getting
the small stuff right costs way more time and energy than doing something "most
of the way."  Yet, the whole team has remained committed to going beyond
the "good enough" mentality so that the user experience is seamless in ways you
wouldn't even notice unless we got them wrong.

One of my favorite examples of this was a design change we made a number of
months ago called "Eat Dismiss Clicks."

Here's the setup.  Let's say that you drop down a menu in Windows. 
Now, instead of clicking a menu item, you click somewhere else on the screen. 
This has always dismissed the menu and sent a mouse click to wherever you
clicked.  Nothing surprising so far; this is just how the Windows focus
model works.

Now, let's say you insert a Picture in Office 12.  As you know from
my
discussion of Contextual Tabs
, the Picture Tools appear in the Ribbon because
the picture is selected.  So far so good.

You decide you want to add a shadow to the picture.  So, you drop down
the Shadow gallery from the Ribbon and look through the shadows available. 
You don't see anything you like, so you click somewhere other than the gallery
to dismiss it.

BAM!  Your click goes through to the document.  Because the click
wasn't on the picture, the picture gets deselected.  Because the picture
got deselected, the Picture Tools disappear.  Now, all of a sudden, just
because you didn't see a shadow you wanted, all of your tools disappeared and
you have no idea why.

It's easy from a developer point of view to explain this as the "correct"
behavior.  The behavior is perfectly logical, and it follows the way focus
has worked in Windows for decades.  It would have been tempting to have
just left this as is, and to have rationalized that people should make sure to hit "Escape" or
to click somewhere on the Ribbon or title bar to dismiss the gallery instead.

But when we looked at people actually trying to use the product, they didn't
"aim" their "dismiss the menu" click at all.  They weren't actually trying
to both make the gallery go away and also perform some action with a single
click.  Clicking away from the gallery was just an efficient and
discoverable way of making it disappear.  The software was behaving
rationally, yet it nonetheless managed to completely confound the user's
expectations.

So, we had a quandary.  Making a fix was expensive, complicated, and
involved working around the Windows focus model.  The test team was
concerned that a lot of unforeseen quality regressions would occur.  Code
down deep in each of the apps would have to change.  It was the kind of
scary technical problem no one wanted to touch with a ten-foot pole.

Did we make the change?  You betcha.

Because it was too important
to get the details right not to.  We bit the bullet, worked through the
technical issues, found and fixed the bugs, and checked it in.

And now?  People find this part of the experience to be seamless. 
No one ever notices the work the team did to get that detail of the design
right, because it works the way you'd expect if you just sit down and start
using it.  Sure, there's a detailed and complicated technical story behind
how it works--but that's what we get paid for, figuring out how to put technology at the
service of delivering great software experiences.

The "Eat Dismiss Clicks" story is emblematic of how our
team has
tried to go beyond to get the little things right in the Office 12 UI.  If we do
the job well,
the experience is seamless, responsive, and predictable, and it makes all of the
extra work worthwhile.

It's the obsession to get the details right that makes all the difference.