Designing for one thumb

BookWorm was the first thing I designed where the input device was a thumb. I had built responsive websites for years and assumed that was the same skill. It is not, and the gap showed up in the first day of using my own app.

A responsive website is a layout problem. A phone app is a reach problem, a connectivity problem and an attention problem, and the layout is downstream of all three.

Reach

Put a primary button at the top of a phone screen and you have asked someone to either shuffle the phone down their hand or use a second hand. Most people are holding a phone in one hand, often while doing something else. The comfortable area is the lower third.

So in BookWorm the primary action on every screen sits low. Add to library, write a review, save. Top-anchored buttons are a habit from a world where the pointer costs nothing to move, and moving them down was the single change that made the app feel less like a website in a phone-shaped box.

Connectivity

On the web you can mostly assume the request will land. On mobile data in a lift, you cannot. Redux applies the action locally straight away and reconciles with the server afterwards, so tapping save never puts a spinner between the reader and their own library.

The part I got wrong first was hiding this. My initial version queued writes silently and looked identical online and offline, which felt clean until a write failed and the reader had no idea anything had ever been pending. Now there is a quiet persistent indicator whenever something is queued.

An app that holds your data silently is not being smooth. It is being untrustworthy in a way you will only discover at the worst moment.

Attention

Phone sessions are short and interrupted. That pushed the library grid towards book covers doing the work, with text kept to a minimum. Covers are already strong distinct identifiers, and a reader scanning their own shelf recognises one faster than they read a title.

It also meant designing for resumption. Close the app mid-review and it comes back where you left it, because on a phone leaving mid-task is the normal case rather than the exception.

What carried over

The type scale and spacing discipline transferred directly. Everything about where things sit and what happens when the network drops did not. If you are moving from web to mobile, expect the second category to be larger than you think.