Readable mobile game UI: designing for a small portrait screen

Poppivo’s in-house concept seeds explore paper birds, emerald glass, ceramic towers and mechanical foundries. As we plan a community-created portrait games feed, that variety becomes a useful design test: a game needs its own personality while still making the next decision understandable.

A detailed scene can make an appealing image and still be hard to play. The useful test is whether the player can pick out what they control, what can affect them, and where their attention belongs at the size they will actually see it.

Begin with a readable shape

A character needs an identity that survives a small display. A silhouette, a clear direction of movement, or a distinct outline can carry more useful information than a tiny surface detail.

CUTWING’s paper-bird concept offers a concrete design question. How much of the bird’s folded shape needs to remain visible for its orientation to be obvious against pale islands? Adding decorative folds would not answer that question on its own. The background and the bird would need enough separation in the moments when orientation matters.

The CUTWING concept image shows the world’s pale palette and folded forms. The browser demo now provides a playable example alongside that artwork. A future visual update or remix still needs to keep movement easy to follow; changing a theme alone does not establish that the game is readable.

Give contrast a specific purpose

Contrast can direct attention, but every bright object cannot be the most important thing on screen. If the decoration is louder than the object the player must react to, the scene asks them to do extra visual sorting before making a move.

One useful review starts with a still frame and a single question: what do you notice first? Then compare that answer with the next required action. In an action scene, an incoming hazard might need priority. In a quiet placement moment, the landing area could deserve it instead.

Color can contribute to that hierarchy without carrying every rule alone. A dangerous object can have a recognizable shape or motion as well as a color. This also gives the design more ways to stay understandable when colors are difficult to distinguish.

Review the moment after the effect

A burst, a glow, or a trail can make an action feel good. It can also cover the result. The problem becomes clearer when several effects overlap: a hit effect, a reward animation, and an environmental motion may all compete for the same patch of screen.

For an illustrative shooter scene such as SCRAPHOUND’s foundry direction, the useful question is whether a player can still identify an incoming threat after an impact. The answer may require reducing the effect’s area, shortening how long it stays bright, or moving decorative activity away from the important path.

Sound can reinforce the event. The visible result should still carry enough information for someone playing with the audio off. Optional motion also needs separate thought from movement that communicates a rule.

Look at the phone-sized version

Large artwork invites close inspection. A phone view exposes different problems. Fine texture may turn into noise, text may cover the action, and a pale character may merge with a pale background. Those are reasons to review the actual composition at its intended display size.

A practical review can include a few deliberately plain versions of the scene: smaller, without sound, with fewer decorative effects, and with the likely touch area covered. Generated games and remixes would need the same checks. Passing a rules check would not establish that the important information remains visible.

Text needs the same phone-sized review. A score, an instruction and a pause control have different jobs. Planned Claude-assisted hints would need to be brief, legible and shown without covering the decision they explain. Important labels and controls also need room around device cutouts and system areas.

Microsoft’s Xbox Accessibility Guideline 103 recommends conveying important information through more than one sensory channel and avoiding color as its only signal. For Poppivo’s interface, that means considering shape and visible feedback alongside color and sound. A broader accessibility review still needs to consider the game’s controls, pace, and other demands.

We want the planned creation and remix tools to support distinct worlds without losing the clarity a small screen demands. Claude could help develop an idea or explain a difficult moment; the resulting game would still need readable artwork, useful feedback and controls a player can understand. These are design goals for Poppivo’s coming-soon community feed.

Sources

1. Microsoft Xbox Accessibility Guideline 103: Additional channels for visual and audio cues
2. Apple Human Interface Guidelines: Designing for games