Around 10 days back I attended the Microsoft touchdown programme on Office 2007 held in New Delhi. I admit I was late to the party of the new MS Office user interface (I don’t dogfood Microsoft software like I used to), even though we are Microsoft ISV partners. But as they say, better late then never.

A long time back I received an email from Rajeev Mittal, Microsoft’s main man on the small and medium solutions and partners, asking me to have a look at the webcast for the  new Office 12 system (Office 12 was later renamed to Office 2007). I had a look and proclaimed to Ashish that it seems like another one of those “old wine in new bottle” products. Microsoft made me eat those words. Usability doesn’t come easy and in the case of MS Office, it has taken almost 18 years for Microsoft to perfect the fine art of user interface design. This is after the fact that Microsoft has been one company which gets user interface and usability (Think: intellisense, office assistant, doc templates et. al)

At Tekriti Software, we lay a lot of emphasis on usability and user interface. It is sometimes even more important  than the underlying code and technology of the products and services we work on. This is what made my excitement on seeing the new UI so much as to warrant this blog post. Primarily I will analyze the Office 2007 user interface and co-relate that with web based user interfaces.

It always seemed to me, till a few years back that usability design was a sense. Some people were good at it, some were not. It was almost like painting a picture. Some people would get the sense of the color scheme and detailing a lot better than others. But that’s not the complete story. Usability and user interface (interaction design)  has a lot of aspects to it.  Analyzing consumer usage and access patterns is one way of streamlining the layout of the screens (read the F Pattern).  To put it concisely user interface design is not only an art , but it is also a science.

Feedback followed by research on consumer usage and access patterns  brought into Office 2007 “The Ribbon”.

The Ribbon is the one stop shop for  a particular functionality related to the product. No longer do you need to navigate through three levels of menus to find options for unrelated tasks. For example in five seconds figure out how to insert a table of figures in a Word 2003 document. If you cannot  then you are one of those users who found discovery of functionality in office really hard. What use is a product if functionality discovery is so difficult. So important learnings:

Learning 1: Always keep the most commonly used tasks or features clearly visible for the users. Size of the links and/or buttons text will determine how fast they can be traced by the user.

Learning 2: Ensure that the core assets of your product are easily discoverable, if they are not visible.

Now some science added to visual design, in Office 2007  Fitts’ Law was used to refine the ergonomics of interactions and UI design. Quoting from Jensen Harris: An Office User Interface Blog

 

Speed of target acquisition is but one of the many characteristics of a graphical user interface, but it’s an important one. In Office’s redesign, we’ve tried to take advantage of Fitts’ Law in several key ways: the control layout and scaling of the Ribbon, the Mini Toolbar and other “by the cursor” contextual UI, and the usage of the edges and corners of the screen for the Quick Access Toolbar and Office Button.

The above gives us some more important learnings from the UI design perspective:

Learning 3: Utilize the corners of the screen effectively. The upper left and upper right corner of the screen are all yours to place the most used links (eg. Logout, My Profile or Home). 

Learning 4: Utilize layers (CSS properties: Z-index, Opacity and JavaScript: onmouseover etc.) to bring up quick access and quick formatting toolbars close to the XY position of the mouse. This reduces speed of acquisition of the formatting buttons, and hence as per Fitts’ Law, you can afford small sized formatting buttons.

Learning 5: A layout which scales itself based on the screen resolution will utilize screen real-estate the best. So whether its’ 640X480 or 1600X1200, a self scaling layout will provide a consistent user experience.

Learning 6: Simplified Fitts’ Law, time taken to acquire a target is directly proportional to the distance from the starting point and the center of the target, and inversely proportional to the width of the target.

Another great enhancement is the auto preview, which allows you to see what you text would look like before you select a font size or a color scheme. Since formatting has been a repetitive process, involving trial and error until you achieve a sense of perfection, Live preview is great. So there is another learning there:

Learning 7: Increase responsiveness of tasks which can be handled client side using DHTML or utilize AJAX to increase responsiveness in case tasks are server side. Specially true for tasks which require several iterations before baseline, like text formatting, color coding. 

Wow, I can go on and on. The redesign of Office 2007 is a gold mine of information, the deeper I delve, the more I realize the significance. Mind you I have not even touched the tip of the technical aspects including MS Office Open XML formats. I believe a case study on the redesign of Office 2007 will be well worth the effort for all you UI specialists and usability gurus. Maybe this post has intrigued your curiosity enough to take it up.