When my old refurbished OnePlus 6 started draining battery faster than I could charge it, I knew it was finally time for an upgrade. After cursing my indecisiveness while browsing phones, my dad sheepishly pitched a solution: to take his 2-month-old phone so he could upgrade to the newly launched iPhone.
Thus my “new” phone, a OnePlus 9, happily met all my needs for battery, refresh rate and clean hardware. However, the more I used it, the more frustrations I had with the user interface in some pre-installed apps.
Foremost, the calculator app is one that is often regarded as a simple but classic addition to every smartphone. To my frustration, as I hit buttons on this calculator interface, every ~8th keystroke wouldn’t register. This could be chalked up to human error, but we don’t blame the user when looking at UI design. Upon further inspection, it appears that the “hit box”, or the invisible geometry on the screen that users must press inside for the application to register the input, is counterintuitively small.
This screenshot shows how small the hitbox radius is around the number keys compared to the padding between keys. There is a larger area between keys than each key radius. To understand why this is such a simple example of poor component design, observe the tactile buttons on calculators.
In the common calculator design, the keys are raised (tactile) and a different colour so the user can easily identify them. The space between each key is less than a finger width.
And now look at how Apple and Google’s commonly used mobile keyboards are designed.
In both of these keyboards, invisible key hitboxes are laid out without a gap in between. One approach opts to mimic tactile keys where there is a slight gap, but the actual hitboxes are slightly larger to eliminate typos.
This can be boiled down to one imperative commonality in button design:
If you press/touch within the area of the calculator/keyboard, you will definitively input something.
As experienced with many mobile typing errors, it is unavoidably easy to accidentally press the key next to the desired key. However, it is more intuitive to the user to have an incorrect keystroke than none at all for missing the desired key hitbox by a couple of pixels. Frustration occurs when it seems communication was broken between the user and the device.
This is intuitively supported by the tactile response in the calculator when a key is pressed (many mobile keyboards have options for vibration/sound response to mimic this).
Comparing this to Apple’s sleek interface and Google’s functional one, it appears that both companies have swiftly tackled this issue by simply displaying the hitbox and making it bigger. OnePlus, please take notes.
Like most other Gen-Zs pacified on mobile devices, my nightly routine ends in setting my alarm for the next morning and plugging it in to charge bedside. I encountered the same frustrating issue with the Clock app, where the toggles are small and hard to hit. This was the deal-breaker. No one likes going to bed grumpy.