A phone screen is not merely a smaller canvas. It is used while walking, waiting, holding something else, switching attention, and relying on one thumb. The useful question is not how to fit every feature. It is what the person is trying to decide right now.
Across Found, Epilogue, and TILT, the answer changes. A profile needs enough context for a considered choice. A shared story needs reading space and an obvious next turn. A motion game needs the board to remain visible while the device itself moves. The screen should express the task’s hierarchy rather than the organization of the codebase.
Give each screen a sentence
Before arranging components, we try to describe the screen in one sentence: choose a profile to understand, continue the shared story, guide the marble through the next path. Elements that do not help that sentence need a stronger reason to stay.
This does not mean every screen has one button. It means one purpose organizes the buttons. Secondary actions can remain available without competing with the primary decision. A clear hierarchy reduces the time a person spends decoding the interface.
Progressive disclosure protects attention
Detailed products contain information that matters at different moments. Showing all of it immediately makes the interface look complete while forcing the user to sort it. Progressive disclosure presents the essentials first and gives a predictable path to depth.
On a profile, a concise overview can lead to personal details and preferences. In a story thread, the latest turn can remain central while earlier sections stay easy to revisit. Settings can group rare administrative actions away from everyday navigation without hiding them entirely.
Design for reach, interruption, and error
Important controls should be reachable without hand gymnastics, but reachability is only part of ergonomics. Destructive actions need distance from common actions. Long forms need saved progress. A temporary connection loss should not erase writing. Returning from an interruption should restore the person’s place.
- Use clear touch targets with space between competing actions
- Keep primary navigation stable across the product
- Save drafts before asking users to trust a long form
- Make loading, empty, offline, and error states part of the design
- Avoid placing important meaning in color alone
Text is interface
Small screens magnify vague language. Continue might mean save, submit, approve, or move to another step. Specific labels reduce hesitation: Send request, Publish opener, Save preferences, Delete account. Supporting text should explain consequences where the action carries emotional or privacy weight.
Readable type also needs room. Compressing line height or shrinking text to preserve a decorative layout transfers the cost to every reader. We would rather let a page scroll naturally than turn the content into a visual test.
Remove before decorating
Color, motion, illustration, and personality matter to us, but they work best after hierarchy is stable. When a screen feels crowded, the first response should not be smaller icons or another accordion. Ask whether two controls represent the same decision, whether a label can replace an explanation, or whether an uncommon action belongs elsewhere.
A good mobile screen does not announce how much it contains. It makes the next meaningful action feel obvious, preserves context when life interrupts, and leaves enough quiet space for the product’s character to be felt.