Meet Sander Viegers, Excel User Experience Designer

Today we have a guest post from Sander Viegers, a user experience designer who worked on many aspects of Excel 2007.

Hi, my name is Sander Viegers. I am user experience designer in the Office Design Group. I’ve had the pleasure of working with the Excel team on Excel 2007.  In this blog entry I would like to provide some insight into how I contributed as a user experience designer.  Since charting seems to be a highly popular topic on this blog, I’ll focus on the creation of the new charting experience.

Maroon, Yellow, Blue and Grey

One thing you immediately notice when looking at the charts that people produce with Office 2003 (left side of the image 1) is that they all use the same colors: maroon, yellow, blue and grey. It is not too surprising when you realize that this is the default color scheme and you need to go through a dozen dialog boxes to change the colors and make the charts somewhat decent and professional looking.  The charts you see on the right side of image 1 are found in recent publications like annual reports, newspapers and magazines. They are often created in graphical applications and use more subtle colors.

Image 1. Charts created with Office 2003 vs charts found in recent publications

Before we started redesigning the Office 2007 charting experience, we did a lot of research to get a better understanding of where the pain points are with our customers and what they expect from charting capabilities. This research showed that the most dissatisfaction with charting came from customer’s thinking that charts do not look good. The research also showed that clearly communicating data is the most important thing to achieve with a chart. This means that a chart needs to show all the necessary information to the viewer, but minimize the redundant information.  Dissatisfying charts are illustrated in the Image 2 below. The chart on the left does not tell us what the colors mean while the chart on the right tells us what the colors mean in two places.

Given these two data points, our most important design goals were to create an experience that allowed our users to easily create good-looking and meaningful charts.

Image 2: Examples of charts with missing and with redundant information

A Process of Pencil Paper and PowerPoint

My favorite design tools are pencil and paper. These are the most efficient tools to explore different design solutions. In this case, through sketching we explored many different ways to create an experience that would easily allow people to create good looking and meaningful charts. The sketches as shown in Image 3 were discussed with the development team and used as an inspiration source for more ideas.

Image 3: Pencil and Paper Sketches

Some of the sketches were worked out in wireframe prototypes that were build in PowerPoint. This is a fast and easy way to create a conceptual prototype that people can comment on. We tested a series of wireframes as shown in Image 4. Experienced and non-experience users were asked what they thought about the designs. At the time we wanted to know how to introduce the concept of style. No one on the Excel team knew yet what a ‘style’ would mean.  However, it appeared an effective way to enable users to easily create good looking charts thru things like color schemes. Similar to style, we found that structural variations were a good mechanism to help people to create meaningful charts. With wireframe images we also explored new interaction paradigms, where we tested the idea of taking over the whole screen for certain tasks (e.g. choosing a chart type). Testing the prototypes was extremely useful to help add direction to the deisgn; for instance this full-page concept of choosing a chart type did not work so well because users liked to keep the context of where they were working when choosing a design.

Image 4: Wire Frame prototype

Interactive prototypes

To get a good feel for the actual experience, we build interactive prototypes. Prototyping the user experience is often the best way to discover problems and to communicate solutions. The interactive sketch in Image 5 explored a novel way of browsing different variations of the chart while keeping the context of the workbook intact. It appeared that it would be challenging to show the variations in such small thumbnails.

Image 5: interactive prototype

Later in the development cycle the prototypes were of higher fidelity and looked more like the final product.  Image 6 shows a screenshot of a prototype that was used to optimize the ‘insert chart’ experience. In the usability study, people were asked to insert a chart, select data, and choose different layouts and styles. This prototype also shows the contextual tabs. These are tabs that only appear when the chart is selected. This was a good way to show variations of the chart while keeping the context intact.

Image 6: High-fidelity interactive prototype

Conclusion

Our goal was to create an experience that allowed people to easily create good-looking and meaningful charts. Because these were the most important goals, Quick Layouts and Styles are the two most prominent user interface elements. The Quick layout gallery ensures meaningful charts: no redundant information and no missing information. The Style gallery ensures a variety of good looking charts for various satiations.
As a user experience designer I worked with the Excel team to give constant feedback of what the end product could be. The key thing to realize is that no one knows what we ship until we ship. Until then, through sketches, wireframes and interactive prototypes we explore the entire solution space, get user feedback and iterate until we have the best solutions.  This process is illustrated in the image below.

Image 7

PS Udated to remove interactive link ... it was causing problems