Making an App’s Navigation Bar accessible to your Thumb

The large screen of the iPhone 6 and iPhone 6 Plus broke the concept behind bar button items and modals. Here’s why and how I fixed it in my new app Slim.


Throughout the development of Slim, a new weight tracking app for iPhone, my aim was to deliver the best user experience possible. However, ever since the iPhone 6 and iPhone 6 Plus I always had issues with the concept of buttons in navigation bars. Wonder why? I’ll explain.

So — what’s wrong with buttons in the navigation bar?

Many apps use the navigation bar as the main means for navigation inside the app: accessing a sidebar, presenting modals to post a new tweet, saving and navigating backwards. In my case, most weight trackers use bar buttons to access modals and save new weight measurements via this modal view.

Screenshots of my blood pressure tracking app, Blood Pressure Assistant

However, the haptics of the iPhone 6 and especially the iPhone 6 Plus make it almost impossible to tap buttons in the navigation bar — at least if you don’t want your users to strain their fingers.

In fact, only a fraction of the iPhone 6's screen can easily be reached with a thethumb. The figure below clearly outlines this problem. (For more infos click here)

Thumb zones; taken from scotthurff.com

Although Apple has designed a work-around for this issue (double-tapping the home button), I strongly doubt that the general public commonly knows this feature. Even if, it cannot be taken for granted that this feature is actually used. For me at least, it „doesn’t feel right“ to use this work-around.

What’s more, statistics from my prior apps (a blood glucose and a blood pressure tracker) indicate that data input is the most frequently used functionality in tracking apps. As a matter of fact, in the last month, about 56,3% of all tracked events were related to entering data and thus, presenting a modal view by tapping navigation bar buttons.

What did I do about this issue?

In my opinion, the problem consisted of two different parts: Firstly, the bar buttons used for navigating throughout the app (e.g. showing a modal) and secondly, presenting a modal for data input. Therefore, I decided to go for a different approach to both of them.

Navigating in Slim

Luckily, I read an article on Medium a couple of months ago that helped me to rethink the navigation in Slim. The concept provided by Thomas Veit (thanks for sharing!) basically shows a new way to pop a view controller (usually triggered by the back button in thenavigation bar) with the use of long-tap and swipe gestures.

I adopted this idea for my purposes. Once a user performs a long-tap gesture, a blur effect will be applied upon the view and a menu will be shown, providing an easy means of accessing the navigation bar’s buttons. (the menu is by Marvel, you can find it on Github. Also many thanks to you guys!)

A Long-Tap gesture will bring up a menu to easily access the navigation bar’s buttons

Modals in Slim

When the user taps the “plus” icon, a modal for data input will be displayed. I decided to go for a minimalistic approach to avoid a full screen modal: Obviously, the most important thing one wants to enter in a weight tracking app is the weight. Therefore, I created a smaller modal, displayed on the bottom of the screen which is reduced to the very basic functions required for entering the weight. This way, users can easily enter data and reach the save button.

Smaller modals with less functionality make it easier to reach all buttons

Want to see it in action? Slim is now available on the App Store — Check it out.

Let me know what you think about this concept.

Cheers,
Josef

Show your support

Clapping shows how much you appreciated Josef Moser’s story.