Chart Editor

THe Problem

Making the Experience of Creating and Editing Charts Easy

When I joined the SPSS Team the product had two Chart Engines. The first was an older technology with limited functionality. The second was a rich editing environment, but due to bugginess and usability issues the adoption of the engine had been small. This project had the goal of creating a new chart creation and editing environment that had a richer feature set than the legacy system and none of the usability problems of the previous project.

I also joined the team as the 3rd designer assigned to the project and when many of the technology decisions had already been decided.

THe Process

What Does the User Need? What Does the User Expect?

• Discovery
  • I started the process by interviewing customers about their current usage if chart building and observed them as they used our product to create those charts.
  • Many users were unaware of the newer charting engine or had tried it and stopped due to stability and usability issues.
  • Most users either used the older chart tools or exported our data to Excel and created their charts in that environment.
• Competitive analysis
  • I looked at Excel, Delta Graph, and other graphics packages to both better understand the scope of the needed functionality and to understand why our users preferred to create their charts in those products over the chart tools in our product.
• Start from Scratch
  • The existing product design relied on patterns from image editing software rather than chart editing software. In my discovery, heuristic analysis, and competitive analysis it quickly became clear that that approach was not the best design for our users. I convinced the team to discard that previous work (thankfully, not much had been done on the front end yet) and build from a new design paradigm.
  • We validated this paradigm through prototypes and further usability testing with users.
• Rapid, Agile Design and Testing
  • Once the overall design was agreed and validated, the design moved rapidly to keep pace with development.
  • Designs were often not finalized until one sprint before sizing and development
  • The rapid pace of design and development means that the QA Engineers had a difficult time keep up. So, the designers (myself and one other) wrote the test cases for the designs as part of the design deliverable. This allowed testing by the QA and Dev engineers to move faster and more efficiently.

THe Product

The design was based around a paradigm of a canvas and a toolbox.

• The design was meant to be familiar to users of other charting products. The similarity allowed them to transfer their experience from those other experiences to this product.
  • The toolbox contained over 20 different palettes to cover different functionality for the different chart types and devised an complete. The palettes are context sensitive based on the selected object within the chart. For example, there was a "Line" Palette where the user controlled the weight, color, style of any line, including the line charts, grid lines, axis lines, etc. We created a matrix of all supported chart types (including hybrid charts), the objects within those charts, and the different Palettes.
• The design was extensible in that the addition of new chart types and functionality could be easily handled by adding new tabs and controls in the toolbar.
• The design was keyboard accessible, with the ability to move through the object hierarchy of the chart quickly and easily and evoke edits and actions with keystrokes.

THe Conclusion

The New Chart Editor became the primary charting UI for the two main SPSS products (Statistics and Modeler) and remained the main charting UI for many years. It was well adopted and well liked in all followup discovery with users.