Be Willing To Be Wrong

Early in our work designing Ribbon content, we had little data to go on in
terms of how different content layouts within the Ribbon would affect the usability of
the features being laid out.  Being a new control, there wasn't any direct
information we could fall back on to tell us how to use it most effectively.  So, we did what we almost always do
in the absence of good information: use our gut feeling to make a decision and then get the prototype into the
usability lab as soon as we could to start validating the design.

This was one case in which I was pretty sure I was right.  My instinct
and experience told me that the chunks within a Ribbon tab should be laid out
generally left-to-right in decreasing priority.  (Except of course in
right-to-left languages, in which we would do the opposite.)   To me, this
made perfect sense: people read left-to-right, we've watched people scan menus
and toolbars for years left-to-right.  I just knew logically this would
turn out to be the right decision, so we laid out the content that way in the
Ribbon and headed to the lab.

(Excel "Sheet" tab in recent builds - click to view full picture)

To my surprise, some of the tabs using these left-to-right layouts were
performing terribly.  We would put the key commands over to the left, and
people just never found them, or they wouldn't find them until they scanned the
rest
of the tab first.

In short, my gut instinct and my intelligent guess were both as wrong as they
could have been.

As we watched more people use the prototypes, we started to
understand more the scanning process that was taking place.  Later on, we
did eye-tracking studies to watch how people scanned the Ribbon and it further confirmed our theories based on the earlier tests. 
It turned out that the truth wasn't a
big "A-HA!" moment... it was a series of realizations of how different
combinations of layouts, iconography, text labels, and position affect the usability of a
layout.  In short, the truth is complicated and we needed to try to
understand the relationships at work between layout, scanning pattern, and
usability success.

One important thing we learned, for instance, is that many people tend to
start scanning directly under the name of tab they clicked, proceed to scan around that area
(both directions), and
then continue to the right.  This means that we need to consider where a
tab is positioned in the overall tab set as we consider the layout of that tab.  (The fact
that we ship Office in 30+ localized languages makes this a non-exact science.)

Another thing we noticed was that, totally contrary to my expectation, the
leftmost chunk in a tab is kind of dead space.  It's often the last thing
people scan.  So we switched our thinking relative to this position and
started moving commands that were consistent across the apps as much as possible
into that space.  This means that you spend more time becoming peripherally
aware of the same feature being in the same position and as a result you
counteract the fact that you don't scan it as soon.

It's not even that straightforward.  Certain commands, such as starting a
slide show, or creating a new slide, seem to have a high affinity and
expectation for being on the left and do just fine in that area.  The exact
kinds of layouts present in a tab (such as presence of in-ribbon galleries) also affect the
usability of different relative positions, and we continue to learn more every week.

I was reading a blog entry of someone who was kind of critical and dismissive
about what we're doing
and our designs.  One of his criticisms was "how bad the usability of the
Ribbon would be because it's got icons scattered all over of various sizes." 
What we've learned is actually the opposite.  People can scan disparate
patterns more easily than homogenous patterns.  When we use more
toolbar-like layouts--a bunch of equally-spaced, equally-sized buttons, people
scan them less quickly than when each chunk has a memorable layout.  So we
actually try explicitly to vary the layouts between chunks--it helps people find
the thing they're looking for more quickly.  That's something we wouldn't
have known if we didn't have a commitment to watch people work.

It's becoming more clear every day that there's a nascent language at work
here, and we need to keep working to become fluent in it.  Given that
interaction design is just a form of communication, I guess that shouldn't be a surprise.

There's just no substitute for watching real people try to get work done in
your product.  A well-designed usability methodology, along with an
openness to the possibility that your initial assumptions were wrong, can help
turn a design from a clunker to a winner.

Comments

• Anonymous
  September 29, 2005
  The comment has been removed
• Anonymous
  September 29, 2005
  
  How old were the guys?
  I am pretty sure that, for an 40er, a ribbon whose content changes according to the task or context, behaves pretty much like a blinking toolbar and thus is a problem. Better stick with the old UI. And that's why I don't understand why you guys don't offer a "classic UI" flag. (You can drop the dockable toolbars, this makes people nervous anyway).
  
  Other than this, I wonder what are your thoughts about resiliency. When you learn a new UI, your eyes and brain cooperate to store the what's in the short term memory towards the longer term memory anytime something is resilient, for instance a particular toolbar button that the user recognizes having a particular function. As ribbons content keep changing with clicks, the resiliciency of icons being at a known location goes away and this gets very frustrating.
  
  Last, the width and height of galleries. It's tempting to fill it up with tens or may be more graphics, but then this explodes the screen just like the Start menu. What are your thoughts?
  
• Anonymous
  September 30, 2005
  I will give you this: when I saw the new UI design you guys are proposing, I immediately started rethinking the UI for my own apps.
  
  I actually think the Ribbon is brilliant -- if properly implemented. But, I also tend to think of what it would take for me to implement that in my own applications.
  
  That "if properly implemented" has me a little scared. While I really like the idea, I also think the design can go horribly wrong if badly done or not thought out. As with all powerful ideas, if used incorrectly they go wrong all the worse.
  
  So what does that mean to me? If I try to use something like this, I will have sit down and think long and hard about what goes were. This is much more complicated than a simple toolbar, and it will be much easier to confuse a user if used badly.
  
  And frankly, thinking that hard about UI scares me. :)
  
• Anonymous
  September 30, 2005
  I think one thing that is missing is a better visual cue to separate one chunk from the next. I know that simple background colors are all the rage, but the border isn't doing it for me.
  
  A subtle horizontal gradiant, IMHO, would both help separate the chunks from one another visually, and give more "weight" to the sides of each chunk, allowing better left-to-right or right-to-left scanning.
• Anonymous
  October 02, 2005

1. I like the ribbon muchly
   2. Even if the left of the ribbon is 'dead space' does the clipboard have to get such a honking big chunk? Many power users never use it and unless you allow customisation that really is dead space.

• Anonymous
  October 06, 2005
  The comment has been removed

• Anonymous
  October 06, 2005
  Is it possible to turn the titles of the sections off? "Clipboard" "Font" etc. I find them very distracting.

• Anonymous
  October 06, 2005
  And why are some buttons so much whiter than the others ('cut', 'paste', are gray, 'bold', 'italics' etc. are so white that my first expression was that they are edit fields)?
  
  I got used to the following simple visual cues: if it's gray, it's button, if it's white, I can click and type there.
  
  And now you mix all this up?

• Anonymous
  October 15, 2005
  Personally, I love the idea. I think it's much better than the clutter of one-too-many toolbars. My only thoughts for what to change are: a) The clipboard section is fairly useless, b) The new/open/print buttons are not useless, and c) The merge cells button could be bigger, as I've never had a spreadsheet in which I did not use that extensively.

• Anonymous
  October 18, 2005
  "how bad the usability of the Ribbon would be because it's got icons scattered all over of various sizes"
  
  Your answer only works for consistently used functions. Searching for a new function becomes that much more difficult doesn't it? What have your studies shown in time it takes to find a "new" function that a user is looking for?

• Anonymous
  February 04, 2007
  PingBack from http://fly.ingsparks.de/2005-10-08/interfacedesign-bei-offcie12/

• Anonymous
  May 30, 2008
  Early in our work designing Ribbon content, we had little data to go on in terms of how different content layouts within the Ribbon would affect the usability of the features being laid out. Being a new control, there wasn't any direct information we

• Anonymous
  October 27, 2008
  PingBack from http://mstechnews.info/2008/10/the-office-2007-ui-bible/

• Anonymous
  April 30, 2009
  The comment has been removed

• Anonymous
  May 28, 2009
  PingBack from http://paidsurveyshub.info/story.php?title=jensen-harris-an-office-user-interface-blog-be-willing-to-be-wrong