Smart Strokes Interface Iteration
Incorporating Pixelboard’s shape recognition tool into the UI.
For the newest update to Pixelboard, we wanted to make it easier to draw basic shapes like rectangles, ellipses, and straight lines. We accomplished this through a regimen of machine learning, with the team training Pixelboard to reliably recognize those inputs. It’s possible to use this feature — called Smart Strokes — without any UI, but for new users we wanted to provide the option to clearly see what’s going on. This component took its own path to release.
The general Smart Strokes flow is as follows:
- The user draws a stroke.
- If Pixelboard can provide one, the user may choose whether to use the machine-recognized version of the stroke (rectangle, ellipse, or straight line).
- The user can freely flip back and forth between stroke versions until it’s committed (usually by drawing another stroke).This approach naturally lends itself to a two-state control, much like a toggle. Initially we considered anchoring this to the middle of the screen edge.
We soon decided the control should be visually associated with the Marker tool, because they work together.
Since this control is a toggle, could it resemble … a light switch?
The original implementation had the palette only appearing when relevant, and disappearing otherwise. This worked OK, but eventually we decided it’s more predictable for the user if the palette is simply always visible or always not.
At this point, we were asked to add a way to lock the shape palette in recognized mode. The UI conceit for this is that it works like a caps lock key — double tap and a green LED lights up to indicate it’s in locked mode.
In this mode, every stroke is converted to its recognized version if possible.
The question then becomes what to do with the situation where there is no recognized version of the stroke.
And what if the palette is visible while there’s no stroke drawn? Depending on how cautious we were about hiding the palette, this was a situation that could happen.
At this point, the five possible palette states looked like this:
A possible issue with this design is that the second button is selectable even when selecting it would have no meaningful result. To address this, we simplified a couple of states down to a single “no recognizable shape” version which shows no selection ring.
You can disable this palette if you like. Because Smart Strokes is a feature of the Marker, we placed the toggle for this in the Marker tool popover. We couldn’t find a single switch color that clearly conveyed “enabled” status while still harmonizing with the rest of the popover, so the switch just picks up your current Marker color.
You can still use Smart Strokes without the palette. If you hold down at the end of your stroke, Pixelboard will attempt to convert it to a recognized shape. If you continue to hold after that, you can drag your shape around — or reposition a line’s endpoint.
If no shape is recognized, we let you know in the status bar.
Pixelboard 1.2 is out now. Go try Smart Strokes for yourself!
Black Pixel is a creative digital products agency. Subscribe to BPXL Craft and follow us on Twitter.
