- title
- Gizmo Design
- dated
- Fall 2023
As the constraint system began to show promise, we identified the need to make these constraints fully available to the user. While creating a sketch, the user should be able to add constraints between parts, adjust the values that constraints try to uphold, and create relationships between constraints.
Ivan worked on a visual / tactile affordance for adding and manipulating constraints that built on top of the handles we plan to use for ink manipulation. This affordance takes its name, and some design cues, from the move/rotate/scale/etc. manipulators in 3D modelling applications. The gizmo gives you a way to see that a constraint exists between handles. The gizmo shows you what sort of constraint it is — angle, distance, or both. The gizmo also offer a touchable surface for manipulation.
The current design of the gizmo is primarily a reaction to the following forces:
- A gizmo represents and constrains two measures (angle and length) of the vector between a pair of points (handles).
- There may be a lot of gizmos on screen. The gizmos might be packed tightly together. The two points might be very close together, or very far apart.
- Two gizmos may be wired together. The gizmo must be touchable. The handles are also touchable. The wire is touchable.
The easiest way to satisfy all the above goals for just a length measure is to draw a straight line between the points, so that’s what we started with. We could imply that the line’s length is constrained or not by varying the rendering style (eg dashed vs solid vs wiggly), or by varying whether or not the line overshoots the points.
To extend the easy “just draw a straight line” approach so that it alludes to the angle as well, we could draw a semicircular arc perpendicular to one or both of the points. When we do this with just one point, the resulting shape looks a bit like a crossbow or pickaxe. Drawing a full circle instead of a semicircle offered some benefits (eg: they’re more touchable), but both shapes are quite visually heavy. This is not a problem if there’s only one gizmo showing at a time, but we wanted to show lots of gizmos (eg: so that you could easily wire from one gizmo to another).
The next revision was shrinking the circle to the center. A bunch of variations of this idea were tried. One large force motivating these variations was the need to show constraint state without just using color. Accessibility concerns are reason enough to not rely on color to express meaningful state, but another reason is that we wanted to reserve the use of color for other purposes, and not burn that channel of expression so early in the design process. Dash patterns were also explored and ruled out — they’re too visually noisy.
Another idea was to make the circle solid and punch-out the center of the line. That created space for an icon. But, this created a tension. If the icon were too small, it’d be hard to see. If the icon were large enough to see clearly, it’d occupy a lot of space, making overlapping gizmos hard to work with.
So instead, the punch-out was reversed, so that the line punched out the center of the circle. This split the circle into a pair of brackets, which were both visually and metaphorically appealing. **These brackets could move relative to each other and to the line, and this movement could be used to express constraint state.
Using solid black lines for the gizmo led to visual conflicts with other elements. We tried lighter grey colors, thinner lines, dashed lines (again), and found these variations unsatisfying. Ultimately we thickened the line so that it matched the radius of the handles, dropped the opacity, and moved the brackets to the interior. This sort of “popsicle stick” rendering style felt really touchable, and visually lightweight. The final tweak was to add a thin arrow to the center to indicate vector direction, to mitigate some unresolved quirkiness of the computational model.