OmniGraphSketcher for iPad
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.
Typical 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.
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:
- adjust the axis' position on the canvas
- adjust the minimum value
- adjust the maximum value
- adjust the minimum and maximum values together
- adjust the spacing between tick marks
- adjust the size of tick marks
- and other possibilities.
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.
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.)
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.
Robin Stewart. OmniGraphSketcher Goes Logarithmic. Blog post for The Omni Group, 2011.