Robin Stewart: portfolio
icon

Adjusting Axes

OmniGraphSketcher for iPad

Summary

OmniGraphSketcher has a lot of settings that control the x- and y-axes. When we designed the iPad version of the app, a major goal was to simplify the user interface while not giving up any important functionality. I led the design and implementation of a powerful and user-friendly method to directly interact with the axis parameters.

Goal

Text fields for axis range parametersTypical graphing software provides text fields for setting parameters such as the minimum and maximum values of axes (image at right). I wanted to make OmniGraphSketcher's numeric axes fully and easily customizable, without a lot of text boxes cluttering the interface.

Process

The idea was to allow users to directly manipulate the graph axes by touch. But dragging an axis could mean any of several plausible actions:

The software interface needs to make it clear that one or more of these options is available, and it needs to indicate which option will occur. It should provide as much of this functionality as possible while remaining simple to understand. I discussed these issues with the product manager and the director of user experience, and I sketched out some possible indicators.

Sketch of axis manipulation ideas

We decided that the minimum/maximum values and the tick spacing were the most important adjustments to enable, and we went through several more iterations before settling on a knob design we liked. (I led all parts of this process except graphic design.)

Final design of the axis manipulation knobs

Solution

Our eventual solution requires no permanent controls. Tapping an axis reveals three contextual knobs. The knobs at the ends of the axis display the minimum and maximum values. Dragging them directly adjusts the endpoints; the original value stays “attached” to your finger as you drag. The end values automatically snap to nearby tick marks so you don’t get meaningless decimals. You can also tap on one of these axis-end knobs to bring up the keyboard and edit the numeric value directly.

Dragging the middle knob controls the spacing between tick marks. Reasonable values are always chosen, such as multiples of 2, 2.5, 5, and 10.

We also added a gesture shortcut for power users: drag with two fingers to adjust both endpoints at once, panning along the number line.

Finally, when we added support for logarithmic axes, I re-implemented these direct manipulation algorithms so that they would also work in logarithmic space.

All of this is demonstrated in the following video.

Further Reading

Robin Stewart. OmniGraphSketcher Goes Logarithmic. Blog post for The Omni Group, 2011.