Handlebars in UI Design
A new kind of element which has risen in UI design
This article studies the nature of interaction of ‘handlebars’, a new kind of element which has risen in UI design (esp. on touch based operating systems). In my observation, as touch operating systems have evolved, the interfaces are becoming more and more gesture based leading to the sparsity of explicit navigation and menu items. Handlebars are an embracement of this era of user interface design.
The purpose of this article is to help designers see how these ‘handlebars’ are being used today (esp. on iOS and Android) and how they can be useful for ‘spatial rearrangement’ in touch interfaces. My hope is that an observation of a system element like this will help designers think about new ways to design apps.
What is a Handlebar in UI Design?
Imagine a canvas that is cut vertically or horizontally to create two or more distinct sections. Handlebars are an interface element to help the user resize and rearrange the different sections on this canvas (or interface in modern UI).
If you have used the iOS multitasking split-view on iPad, the little vertical and horizontal handles in one of the two apps in split-view are what I call as ‘Handlebars’.
It looks very similar to a scrollbar, but the similarity only goes that far. While handlebars look simple, they have some complex interactions loaded in them. As such, this lets UI designers tackle quite a few design problems with handlebars.
SUMMARYHandlebars when used to rearrange on-canvas elements, are either used on a horizontally cut canvas or vertically cut canvas. This is a fundamental concept of handlebars which is closely related to how the layout is arranged.`
Mechanics
Let us say you have App-A on the left and App-B on the right in a 70–30 split. If you decide to change this to a 50–50 split-view, then you have to rearrange the space.
Let’s look at how this is done step by step. Handlebars work in 3 distinct steps:
- Grab
- Steer
- Release
How do these three steps work in the above scenario?
Grab
In order to go from 70–30 to the 50–50 split, you need to grab the vertical handle first. Grabbing the vertical handle requires precision- the gutter enclosing the vertical handle is as good as thin air: you cannot grab that area to initiate a rearrangement.
Steer
Once you have grabbed the handlebar, you can either steer left or right. Steering is an action that lets the user move in single dimension (in the case of a vertical handlebar, the user can move in the x-axis.)
Steering is more forgiving than the Grab action. Once you have the vertical handle grabbed, your finger is free to move along the full height of the screen when moving your finger from right to left to rearrange the split-view. The steer area is the whole gutter in the split-view. This makes the action of steering a less dexterous one as most users would struggle to keep their finger in the same spot as they mimic a slow horizontal swipe. It is only appropriate to call this action a steer, as the user can steer slowly or quickly — giving a sense of control to the user. This control is psychological though as split-view is only available in discrete set of values like 50–50, 70–30 and 0–100.
Release
Throughout the grab and steer actions, the user’s finger is on the screen. The release action is what provides closure– completing the action of rearranging the split-view.
Once the user has the handle steered to the desired position, she can release the handle/lift her finger to see the split-view lock into a different arrangement. Since the arrangements are discrete, the final split percentage is determined by the proximity of the handlebar to a pre-assigned arrangement. If the user releases the handlebar closer to the point on the x-axis that may trigger a 50–50 view, she gets a 50–50 view; a 30–70 view if she releases the handlebar well past the 50–50 mark and so on.
When are handlebars useful?
On a high level, handlebars are useful whenever two discrete blocks of information need to be rearranged strictly straight along x or y axis. Handlebars also serve one other key purpose — they act as signifiers to make invisible gestures visible.
They are not very useful for diagonal resizing interactions which are probably left to resize cursors. They are also not used for dragging elements freely on a canvas (those are drag handles and are different).
Coming to the future of mobile web, they can be useful on touch based devices — for example on ecommerce sites they could be useful for comparing two different products (the handlebars would move one product in and out of view — say from your cart) while you browse the other products.
SUMMARY1. Handlebars are used for rearranging and resizing huge blocks of UI on the UI canvas.2. They require precision when grabbing but no precision at all when Steering. Release is what locks the canvas into a new position.
Handlebar use in a horizontally cut canvas : Android Multitasking
Multitasking on Android is very similar to how the same works on iOS. Again, since this post is about handlebars and not about multitasking, we are not going to focus on how multitasking mode itself is triggered. Like the iOS example, let’s go through this step by step.
Grab
Unlike the iPad, the Android multitasking view is split horizontally. As a result, the handlebar is horizontal. Again, the orientation of the handlebar indicates how the canvas is cut and how you can re-arrange elements.
Coming to the interaction itself– you grab the handlebar precisely from where it sits. The rest of the gutter is not a grab area.
Steer
Since this is a horizontal handlebar, the steering is vertical. You can steer up or down, to rearrange the split view.
Release
Once the handlebar is let go, it snaps to pre-defined discrete positions depending on when you let it go.
Comparison to desktop interfaces
Before moving on to more examples of handlebar use, it is important to note that handlebars have a lot in common with some desktop cursors but not everything. What makes handlebars special is that they are more versatile than the drag handles on desktop interfaces. In the following image, I highlight some key points around where the desktop cursors are limited.
Handlebars are also used to bring off-canvas elements into view
Android N/O App Drawer
The gesture to open up the app drawer on Android Nougat/Oreo is a fine example of a non- precise interface. It is also an example of an interface where the handlebar is pointed — the pointed shape is key in signifying the direction of the swipe gesture.
Grab
In order to grab the little pointed handlebar, just swipe anywhere across the screen. Notice how the handlebar changes its shape as the user swipes up– hence reflecting a ‘grab’.
Steer
In this example, the user can either steer up or steer down. The steer area — where the finger can move during the steering action — is the horizontal width of the device.
Release
There is only one end state in this example– the app drawer opened. Once the user ‘steers up’ halfway across the screen, releasing the handlebar results in the app drawer snapping open fully.
Once again, the steering provides a sense of control to the user and the user’s intent is understood through their interaction. This makes opening the app drawer a really fluid one.
A note on pointed handlebars – As seen in the above example, pointed handlebars are used (in my observation) to signify the direction in which an off-canvas element is being pulled in. As such, pointed handlebars are only used to bring in off-canvas elements.More examples of Handlebar use
The following examples show the diverse scenarios where handlebars are used in UI design:
Things 3 has a handlebar to show and hide the sidebar. This handlebar can be used both with the mouse and a simple horizontal swipe gesture.
Messages has a pointed handlebar to bring the sticker pane in and out of view.
Notes uses handlebars in a completely different way — the vertical and horizontal handlebars are used to rearrange columns and rows respectively. The handlebar lets the user ‘lift’ the rows/columns.
The iOS lockscreen has two handlebars on the same screen which do different things. Both act as signifiers to indicate an action as well.
When inside the an app, the home indicator acts as a different kind of handlebar — one that pushes the current view out.
SUMMARYHere’s all the ways in which handlebars are used in the above examples:* Hiding and showing views.* Expanding and collapsing views.* Rearranging columns and rows in a table.* Pushing a view out.
The future of natural interfaces
In our quest to build gestural interfaces, we are at a point where some of the actions cannot be performed without precise elements like the handlebar. A completely non-precise UI is far from reality but until we reach a point where everyone is comfortable with invisible gestures, we need handlebars to make gestures visible.
