This was my intern project at Developer’s Division and Microsoft Research. Although I had created various interactive UIs at school, it was my first time working as a professional user experience designer. Thanks to my mentors Bob Silverstein and Steven Drucker, I was able to have the full experience from ideation, prototyping to conducting a user study. I had a wonderful time working with the UX team of DevDiv and the VIBE team of MSR.
The Problem
It is not easy to create meaningful and relevant data visualizations. There are two parts to the job:
- Make it right: collecting, validating and analyzing data; correctly mapping data to coordinates and dimensions. There are generally two types of tools for this. One offer a catalog of generic templates, for example Excel and Tableau. The other offers greater flexibility through coding, for example R/ggplot, Mathematica and Processing.
- Make it pretty: choose the right visual elements to reveal insights; make it readable and visually compelling. This is best done using WYSIWYG design tools.
For specialized datasets and heavily customized representations, coding is almost always the choice. However, code is unfit for visual design iterations. To design a visualization, it usually involves going back and forth between different tools to adjust the parameters and appearances. When the work is done, the work flow cannot be easily reused or shared because it’s scattered in multiple places.
Can a visualization tool provide the data scripting tool when the user interface with data, and the visual design tool when the user works on graphics? Can it allow easy sharing of visualization schemes among a community of both coders and designers?
The Concept
I proposed an UI that can be described as “Illustrator meets Excel.” It provides a canvas where the user can draw freely with vector shapes. In defining a shape’s position, size and color, one may use a pointer/picker, type in a value or bind it to an Excel data cell.
Next, this shape can be used to define a Visual Style - styling options packaged and can be applied to other shapes.
Last, duplicate the shape over multiple rows. A chart is created.
Updating a visual style will update all elements that use it. Selecting a shape immediately traces back to the source data. Visual style can also be reused and shared easily via an online community:
This idea takes advantage of Excel’s powerful formula system while keeping design work in a visual interface. Here’s a video of the storyboard:
The Prototype
I spent about 3 weeks implementing a prototype of Vis-à-vis. I worked with another developer to recreate an Excel-like interface in Silverlight. I had never used C# before but it felt just like Java with some fancy syntax sugar. The experience of collaborating with another programmer, though, was extremely beneficial to me. I read a lot of code of his and learned a great deal about the best practice in organizing a complex project.
The finished prototype was functional with most key concepts of Vis-à-vis such as data-binding, tree view panel and defining and applying visual styles. I was quite proud.
Usability Study
I was encouraged to run my own usability study using the prototype. The study included four tasks:
- Create a column chart
- Modify the chart to show conditional coloring
- Modify the chart to a waterfall chart
- Create a GapMinder style bubble chart
Five participants from internal teams were recruited. I observed two sessions then conducted the rest. It was fun but stressful at the same time, hearing blunt critics about my work and seeing occasional bugs in the prototype. It was not easy to separate myself as a researcher from the design work. Some take-aways from the study included:
- Participants liked direct data binding, but struggled with formulas. It was not clear that the REPL accepted expressions, and it lacked auto-completion features like that of Excel.
- Parameters were not easily accessed. To simplify the object tree, I adopted a behavior where property fields only show when it has been modified on the canvas. The “hidden” fields caused a lot of confusion.
- Use of terms such as “style”, “reference”, “parameter” were confusing for they mean different things in the participants’ familiar context.
- Mental model: some participants think about data visualization as a whole piece. They have trouble ‘disassembling’ a chart, and bottom-up work flow is not intuitive enough for them.
Design recommendations were made from the observations. That concluded my internship. A paper based on the project was submitted to EuroVis.
Collaborated with Bob Silverstein, Steven Drucker, Danyel Fisher, Roland Fernandez and George Robertson.