Vis-à-vis

July 20 2010

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:

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.

The Disconnection In Data Vis Work Flow

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.

Vis-à-vis Wireframe Step 1

Next, this shape can be used to define a Visual Style - styling options packaged and can be applied to other shapes.

Vis-à-vis Wireframe Step 2

Last, duplicate the shape over multiple rows. A chart is created.

Vis-à-vis Wireframe Step 3

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:

Vis-à-vis Wireframe Step 4

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:

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:

Vis-à-vis User Study Task Completion Times

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.

user experience tool Silverlight C# user research