My driving principal while designing RECaf was to make the app “thumb-able.” That is, I wanted to be able to do as many tasks as possible with the phone in one hand, gesturing only with my thumb.
This is getting harder with every new iPhone generation.
Years ago, Jeff Hawkins, creator of the original Palm Pilot and then CEO of Handspring, commented on the one-hand-ability of the Treo line of smart phones. He was getting asked frequently why Handspring had adopted plastic RIM-style keyboards on its phones, rather than relying on the Graffiti handwriting recognition he had pioneered for Palm devices.
“I think the most important thing here is that on a phone, you have to have a keyboard. You really want to have one-handed operation, and that requires a keyboard....”[1]
This was a few years before Apple released an on-screen touch keyboard that anyone would consider usable, of course. The point is, in Hawkins’ mind, any task you needed two hands to do on a mobile phone was a failure, at least to some degree. The task may be easier or better to do with two hands, but it needs to be possible with one hand. I believe this is still largely true.
We’re busy people, and our hands are often busy throughout the day. When I’m walking around the city, I’m often lucky to have one hand free to pull out my phone and get something done. The last thing I want is to have to free up the other hand just to do the simplest of tasks.
Unfortunately, phone manufacturers and software developers have all but thrown the one-hand principle out the window in recent years. The allure of larger and larger screens has decreased the thumb-reachable percentage of the screen significantly. And yet, much of our software, particularly on iOS, has failed to accommodate.[2]
When the first iPhone was released, with its puny 3.5-inch screen, I could easily reach every corner with either thumb. On an iPhone XS Max, with its gargantuan 6.5-inch screen, I’m lucky to reach even 60% of the total screen area without a second hand. And yet, Navigation bars, with their all-important Cancel and Done buttons, and many other controls are still located at the top of the screen, way out of thumb’s reach.[3]
And it’s not just the top of the screen. The larger your screen area, the more difficult it becomes to carefully balance the device and reach the bottom of the screen as well. Simply moving navigation to the bottom of iOS would not adequately address this issue.
With this in mind, I approached RECaf’s design as if my thumb were the only option for at least the most common actions[4]. If it was something I needed to do more than occasionally, and I couldn’t do it with my thumb without some sort of awkward phone juggling, I declared the design a failure and started over.
Throughout the process, I studied other apps that had tackled this issue—some built-in from Apple, others from third parties—and I adapted what I considered to be the best ideas from each.
The Tab Bar
I’m not a big user of Snapchat (I’m not in the correct demographic) but when a few developers I trust showed me Snapchat’s swipe-able tabbed interface, I knew a variation of that would be perfect for RECaf.
The Tab Bar lives at the bottom of the screen, so technically, it is reachable by the thumb. But I find it so much easier to simply swipe between tabs vs reaching down to the bottom of the screen and tapping that frankly I would love it if Apple stole this idea for the standard Tab Bar.
Since this is not a standard implementation, of course, it took a bit of work to get the animations and the gestures working as well as I liked. But the end result is so fluid and simple. While a more complex tabbed interface with more tabs and deeper navigation structures might make this impractical, in RECaf’s case, with only three tabs, it’s perfect. With the easiest flick of your thumb, you can get from one major area of the app to another. You can still tap on the icons on the bottom toolbar as well, of course, if you are unaware of the swipe gesture.
Drag-able Panes
Over time, Apple has been adding drag-able panes to Maps and other built-in apps, such as Stocks; a variation of the same pattern also exists in the current Music app. And many third-party apps have copied and enhanced this pattern themselves, most notably ride-sharing apps like Lyft. The idea is to put information in a panel, or pane, that can be dragged up or down to reveal more information/controls on two different z-depths. This way, you get almost two screens worth of UI on a single screen, and you can move the information you don’t want out of the way with a simple thumb movement up or down as needed. Put a scroll view inside these panes, and you can get just about any active controls you need under your thumb with relative ease.
In RECaf-this became the perfect way to show both a listing of historical statistics about your caffeine habits and a listing of your entire caffeine logging history on the same screen. Just tap, swipe, or drag the All Log Entries pane up, and the history is concealed behind the long list of entires. Drag, swipe, or tap it back down, and the stats become visible again.
A more complex variation appears on the Log Entry screen, where you can move two different panes (frequents and favorites) to show three different methods of logging on a single screen (frequents, favorites, or custom). Rather than putting these three modes behind a segmented control, having to tap all the way on the top of the navigation bar to switch modes, you can simply move your thumb up or down to reveal the UI you need. Because the panes are drag-able from any visible part of the pane, it doesn’t matter how precise you are about the dragging, either. Wherever your thumb happens to land on the pane, you can move it up or down. You can even move both panes at once, so you’re never more than one drag away from he UI you need.
The podcast app Castro uses a similar approach with its now-playing screen. You can swipe down from just about anywhere on the now-playing screen to go back to the main interface.
Implementing this in RECaf took quite a bit of UIPanGestureRecognizer gymnastics (and ample use of container views) to get it working smoothly, but at the end of the day, I ended up with an extremely “thumb-able” UI. Given how often Apple is using a similar pattern to avoid putting UI tools in navigation bars in Maps and other built-in apps, I wouldn’t be surprised at all to see drag-able panes become a much more common part of iOS in the future. That would make me very happy. I’d love to have an official API for creating such interfaces, rather than the custom implementations many of us have had to create in the meantime.
Viewable Content vs Interactive Regions
Clearly, we can’t put our entire interfaces under our thumbs. We have these gorgeous giant screens; we want to use every pixel. But if you reserve the areas that are out of reach of your thumb for visual information that isn’t interactive, you can free up the thumb-reachable region for your interactive elements.[5]
In RECaf, I wanted to take advantage of the larger screens of some iOS devices by putting the pertinent information, whenever possible, above my thumb. On the source detail page, for instance, the name, icon, and other information about the source is listed just below the navigation bar, while the interactive buttons for favoriting amounts and adding Siri Shortcuts are placed in the thumb zone.[6]
By all means, we should make use of every pixel of our screens. We just have to be sure the parts with which we need to interact are not out of reach.
Conclusion
Large screens on phones are not going away anytime soon. At the same time, our thumbs aren’t going to magically start getting longer. That shrinking percentage of reachable screen real-estate needs to become the focus of interactivity, while the outer regions of the screen are devoted mainly to information display. The more designers and developers consider this, the better time we will all have with our apps, regardless of our screen-size preferences. I hope Apple, too, is planning on leading us in this direction with future versions of iOS.
via Pen Computing ↩︎
Understand, this is not a knock against larger screens. I totally get why some people prefer large-screened phones. I just think that we as software developers are failing to accommodate these customers by not moving the most important interactive elements of our designs to a more reachable region. ↩︎
Yes, we have hacks like Reachability. But they are hacks, not solutions. ↩︎
That is, when you actually launch the app and use it in the traditional sense. My real hope with RECaf is that you don’t need either hand to use the app. Siri Shortcuts make logging with your voice a much more efficient option. Nevertheless, knowing some people would not be using Shortcuts, I wanted the process of logging with your thumb to be as convenient as possible. ↩︎
This is why Navigation title bars are so large in iOS. That giant header serves as a clear visual anchor. What may look like a waste of screen space to some is actually very effective for creating hierarchy in an area of the screen that is not optimal for interactive elements, anyway. ↩︎
If you switch to Edit mode, the upper informational regions do become interactive, but this is an infrequent use case compared to how often someone may want to alter a shortcut or add an item to favorites. ↩︎
