Home Screen Widget Design: One Job, One Tap

Both apps keep their data on the device, a choice we describe in why some of our apps need no account. That choice shapes the widgets too: they draw on data that is kept on the phone.

One job per widget

Apple’s guidelines ask designers to choose simple ideas that relate to the app’s main purpose. They also warn that replicating an app icon offers little additional value. We read that as a test you can apply before drawing anything: finish the sentence “this widget lets me ...” with a single verb phrase.

For Spareday, the sentence is “check in a habit without opening the app”. For Cardday, it is “meet today’s word”. Everything the apps do beyond that, such as statistics, a year view or spaced-repetition study, stays in the app. A widget that tries to host two jobs usually does neither well, and the person using it has no way to tell which one a tap will perform.

Glanceable: what to show and what to leave out

Glanceable means the answer is readable in the time it takes to unlock the phone. Apple’s guidance on density is balanced: sparse layouts can make a widget seem unnecessary, while overly dense ones are less glanceable. Its advice is to provide the essential information first and let a longer look reveal more.

Our two widgets make that trade-off differently, because their jobs differ.

The Lock Screen is the extreme case. Apple describes accessory widgets as displaying a very limited amount of information because of their size, and the inline shape offers only one tap target. If a habit does not fit in that space, the widget is the wrong place for it.

One tap: interactive widgets and their limits

Apple’s guidelines describe the default behaviour plainly. Tapping a widget opens its app, while buttons and toggles can offer extra functionality without launching it. The Reminders widget, which marks a task complete, is the guidelines’ own example. The advice that follows is the heart of tap-target design: offer simple, relevant functionality, reserve complexity for the app, and pay attention to the size of targets so people can tap them with confidence and without accidentally doing something they did not intend.

Android is stricter. Its overview says the only gestures available for widgets are touch and vertical swipe, and it notes that list-style widgets can let people mark items done. In practice the interaction vocabulary is “tap a thing” on both platforms, which suits a check-in.

That is how Spareday works: you tap a habit in the widget to check it in, or you check in inside the app. Cardday’s free widget takes the other route. It shows the Word of the Day with its meaning and opens the app when you tap it. Flip and answer buttons on the widget are part of Cardday’s optional Pro, so the free widget stays a single glance with a single destination.

Sizes: iPhone Home and Lock Screen, Android grid sizes

The two platforms describe size in different languages, and that is the first reason a widget is never a straight port.

The iPhone rows come from Apple’s size tables; the Android row from the Android overview, which says that the number, size and spacing of cells can vary widely from device to device. The last row is ours, taken from each app’s own page. On iPhone, both apps also offer Lock Screen widgets in three shapes: a circle, a rectangle and one line.

Apple’s advice on sizes is worth repeating because it is easy to ignore: offer multiple sizes only when each adds value, and do not stretch a small widget’s content to fill a larger area. Larger sizes should carry more layers of information and action, not the same content made bigger.

Widgets that never lose data by accident

A widget is the place where a stray tap does the most damage, because it is always on screen. This is why Spareday’s description says that its widgets never reset a counter by accident. And when you do restart a counter on purpose, your earlier runs stay in the history.

The same care applies to wrong taps. Spareday lets you undo a check-in with one tap, and it lets you fill in any of the last 366 days if you forgot to tap. Neither feature is a widget feature, but together they make a one-tap widget safe to use. A single-tap design works only if a mistake is cheap to undo.

Freshness: what a widget can and cannot update on its own

Apple’s guidelines state that widgets refresh periodically but do not support continuous, real-time updates, and that the system may adjust the limits depending on various factors. So the design question is what the widget should show when it cannot update.

Two of our support answers show the consequences.

• Spareday. The operating system decides when a widget redraws. On Android, widgets refresh about every 30 minutes, and tapping a habit in the widget updates it at once. On iPhone, a check-in made in a Home Screen widget shows in your other widgets and in the app after you open Spareday once.
• Cardday. On iPhone, the app prepares the cards a widget will show each time you open it. A widget that changes its card on a schedule, a Pro option, keeps changing for a day or two on those prepared cards, and shows a message asking you to open the app once the supply runs out. On Android, the Pro widget stays on a card until you rate it, or until you tap the next button of the wide widget.

We would rather say this plainly than hide it. A widget that shows a polite request is better than one that shows nothing, and Apple’s guidelines make a related point: show content quickly, without hiding stale data behind placeholders. If people are likely to look more often than you can update, they suggest showing text that says when the data was last updated.

Free for everyone: why we keep the widget free

A widget exists to save the person a step. Charging for that step would defeat its purpose. In Spareday’s maker note we say that widgets are free because checking in should take one tap. In Cardday’s, we say that the Word of the Day widget is free because meeting one word should take no purchase and no sign-in.

Free does not mean unlimited. Each app has an optional Pro, described on its own page, and Cardday’s Pro adds widget behaviours such as the card that changes by itself on iPhone. We keep the line where the job changes: seeing and checking in stay free, while extra looks and extra widget behaviours belong to Pro.

A short checklist before you draw

1. Write the one verb phrase the widget serves.
2. Decide what the smallest size shows, then add detail only for larger sizes.
3. Make the tap do one thing, and make the result of that tap easy to undo.
4. Decide what the widget shows when it is out of date, and say so in words.
5. Check each platform’s own size model, because they are different.

If you design in the same spirit for games, our notes on accessibility settings worth looking for take the same approach to small controls. Our guide to habit tracker widgets looks at the same question from the user’s side, and how many words each CEFR level needs explains the vocabulary that Cardday’s widget draws from. For a wider checklist, see our mobile app accessibility checklist for small teams, and for the platform differences beyond widgets, shipping one app to two stores.