How Mobile Online Game Interfaces Shape Small Screen Design

The first HUD I ever shipped for a phone failed in a hallway. We asked a tester to walk the corridor outside our studio playing with one hand while carrying a coffee in the other, and within four minutes she had hit the pause icon eleven times by accident. The icon was 36 pixels square and sat in a top corner, exactly where a thumb ends up when it stretches for something nobody should have put there. I redrew that screen three times. Most of what I now tell clients about small-screen websites started in that corridor.

Start with the hand, not the screen

Designers sketch phones as flat rectangles. Players hold them as objects with weight, and the grip decides what is reachable. Steven Hoober's 2013 field study of 1,333 people using phones in public found that 49 percent held the device in one hand, 36 percent cradled it in one hand while tapping with the other, and 15 percent used two hands. That one-handed group is the reason the lower third of a mobile online game screen is so crowded and the top corners are so quiet.

Clash Royale is the cleanest example I know. Supercell built it in portrait so a match can be played one-handed on a bus. Your four cards sit along the bottom edge with the next card previewed beside them, the elixir bar runs underneath, and the arena fills the upper part of the screen as something you watch far more than you touch. You drag a card upward to deploy it, so every action begins inside the comfortable arc of the thumb and travels outward. Outside a match, the home screen keeps its main tabs in a strip at the foot of the display with Battle in the centre.

Pokemon GO applies the same logic to a game played while walking. The main menu is a single Poke Ball button at bottom centre, your trainer avatar sits bottom left, and the nearby tracker bottom right. Catching a creature is a flick from the bottom of the screen upward. Niantic designed for a person whose eyes are half on the pavement.

The button is not the hit area

This is the trick game UI artists learn early and web designers often skip. The visible icon and the touchable region are two different shapes. At both studios I worked with, our house rule was that a tap region had to be roughly 1.4 times the drawn icon, padded invisibly, with no two regions overlapping. Apple's Human Interface Guidelines ask for a minimum of 44 by 44 points; Google's Material guidance says 48 by 48 density-independent pixels. Treat those as floors, not targets.

Games also forgive near misses in ways websites rarely do. Plenty of mobile games snap a sloppy drag to the nearest valid lane or tile instead of cancelling it. A contact form can behave the same way: a phone field that accepts spaces, brackets and dashes instead of rejecting them, or a date picker that opens on the current month. Treat imprecision as normal input, not as an error to scold.

Portrait or landscape decides everything else

Genshin Impact runs in landscape on phones, and its control layout looks nothing like Clash Royale's. A virtual joystick lives under the left thumb; normal attack, Elemental Skill and Elemental Burst cluster under the right; party portraits stack along the right edge so you can swap characters without letting go of movement. Both thumbs stay busy for the whole session, which is why the minimap and quest tracker are pushed to the top corners. Information you read goes where thumbs are not. Controls you press go where thumbs already rest.

A small business site is almost always a portrait experience, which makes it Clash Royale, not Genshin. Yet I still see restaurant sites with the phone number tucked into a corner of the header and nothing at the bottom of the screen. That corner sits at the far end of a thumb's reach for anyone holding the phone in one hand. A sticky bar at the foot of the page with "Call" and "Book" does more work than any hero image.

Why I disagree with "hide it in the menu"

The standard advice for mobile web design is to collapse everything secondary into a hamburger icon and keep the screen clean. Games taught me to distrust that. A mobile online game rarely hides its core loops behind a single icon. It puts four or five persistent tabs on screen because players return to them dozens of times per session, and every hidden step costs retention. Supercell could have folded Shop, Cards, Clan and Events into one menu button. They didn't, because a tab row works as visible memory: the player never has to recall where anything lives.

For a site with five pages or fewer, I now recommend a bottom tab bar or a visible row of links over a hamburger. The menu icon is fine for the twelfth page nobody visits. It is a poor home for the two pages that pay the bills. For a longer treatment of how game menus map onto site structure, the piece on what online game menus teach about website navigation goes further than I will here.

Less on screen is not the same as less

Monument Valley, ustwo's 2014 puzzle game, shows almost no interface. There is no score, no timer, no health bar. Rotating handles and sliding platforms belong to the architecture, so the controls are the scenery. People praise it as minimal, but the designers did not remove information; they moved it into the world, where the eye already was.

The website version is a service page where pricing, location and opening hours sit inside the content instead of in a sidebar that collapses below the footer on phones. When Theo audits client sites on mobile, he scrolls with one thumb and writes down every fact he had to hunt for. The hunt list is usually longer than the page.

A translation table

These are the patterns I lift most often from game screens into small business layouts.

How I test a phone layout now

1. Hold the phone in your right hand only and complete the main task: call, book, or send the form. Then switch hands.
2. Count taps from landing to finished enquiry. In game terms this is time to first match; on most client sites I aim for three or fewer.
3. Drop screen brightness to its lowest setting and stand near a window. Pale grey buttons vanish, just as faint HUD text disappears on a phone outdoors.
4. Ask someone who has never seen the site to use it while walking. Watch where their thumb goes before they say a word.

Small screens reward the same humility that mobile games forced on me. Type matters at this size too; Imogen covers it in her piece on typography for online game titles, and more of our layout notes live under web design.