Blue Feather Agency logo Blue Feather AgencyBrands built to be remembered
Games

Explore How Online Game Menus Teach Good Website Navigation

Open the League of Legends client and the biggest thing on the screen, top left, is a button that says PLAY. Not "Get started", not "Explore our modes", just the verb the player came to perform.

Illustration for Explore How Online Game Menus Teach Good Website Navigation

Open the League of Legends client and the biggest thing on the screen, top left, is a button that says PLAY. Not "Get started", not "Explore our modes", just the verb the player came to perform. I think about that button every time a Tyler or Longview business owner asks me why their website gets visits but no calls.

I build sites for local businesses in East Texas, and I keep a spreadsheet of every contact form I have shipped and how many enquiries each one brought in the first ninety days. There are 71 rows in it now. The patterns in that sheet line up uncomfortably well with what online game designers figured out about menus years ago. Games have an advantage over most websites: they get brutal, immediate feedback. If players cannot find the queue button, they close the client and play something else, and the studio sees it in retention numbers by the next morning.

One loud action, everything else quiet

Game menus are ruthless about hierarchy. Minecraft's Java Edition title screen offers Singleplayer, Multiplayer and Minecraft Realms as stacked full-width buttons, with Options and Quit Game smaller underneath. Fortnite's lobby puts a large Play button bottom right, while the Locker, the Item Shop and the rest live in a slim tab row across the top. The primary action is huge, the secondary actions are present but visually demoted.

Most small business websites I audit do the opposite. Home, About, Services, Gallery, Testimonials, Blog, FAQ and Contact sit in one identical row, same weight, same colour. The one action that pays the bills, calling or booking, is given the same visual importance as the owner's biography.

When I rebuilt a roofing contractor's site last spring, I did nothing more radical than move "Get a free inspection" out of the nav row and into a solid orange button on the right of the header. Same words, same page. Enquiries through the form went from 9 in the previous ninety days to 23 in the following ninety. Not every client sees a jump like that, and season matters for roofers, but across the spreadsheet the sites with a single visually dominant action average 2.6 times the form submissions of those with a flat nav row.

What game menus get right that websites ignore

The menu remembers where you were

Final Fantasy XIV lets players build and save their own hotbar layouts per job, and the game restores them every login. Most online games drop you back on the character, server and loadout you used last session. None of them make a returning player rebuild context from scratch.

The website equivalent is small but real: if a visitor came to your site from a "water heater repair" search, the page they land on should be about water heater repair, with the booking action on it, not the homepage. Of my 71 sites, the ones with a dedicated landing page for each core service convert visitors to enquiries at 3.4 percent; those that send all traffic to one homepage sit at 1.9 percent.

Back always works

Press the cancel button in almost any console game menu and you go up exactly one level. Players never lose their place. On the web, the equivalent breaks constantly: modal windows that swallow the back button, booking widgets that reset when you return, menus that collapse on mobile and forget which section was open. Every one of those is a small betrayal of the visitor's expectations.

The hub is a place, not a list

Hades turns its menu into a room. The House of Hades is where you upgrade, talk to characters, change weapons and start the next run, and every function lives at a physical spot you walk to. Players never think of it as a menu at all. Websites cannot copy that literally, but the lesson stands: group functions by what the visitor wants to do, not by your internal org chart. "Services", "Pricing" and "Book" belong near each other because a customer moves through them in that order.

The three-click rule is the wrong metric

Web design checklists repeat that every page should be reachable within three clicks. I stopped believing it after looking at how players actually move through big online game menus. Getting into a ranked match in Overwatch 2 takes several selections: Play, then the competitive mode, then the role queue, then confirm. Nobody complains, because each step is obvious, labelled in plain words and moves visibly closer to the goal.

What frustrates players is not click count but uncertainty: a screen where they cannot tell which option leads where. The same holds on websites. In my spreadsheet, a pest control site with a five-step quote form (property type, problem, photos, timing, contact) outperformed its old one-page form with eleven fields, 31 submissions against 12 over comparable quarters. More clicks, less doubt per click.

So I measure something else now. For each important task, I write down every point where a visitor has to guess. A navigation label like "Solutions" is a guess. An icon with no text is a guess. A button that says "Submit" when the visitor does not know what happens next is a guess. I try to get the guess count to zero, and I stop worrying about clicks.

A quick audit you can run tonight

Borrowed straight from the way game UI teams playtest menus, here is the checklist I run on every new client site before quoting:

  1. Ask someone who has never seen the site to find your phone number. Time it. Anything over eight seconds needs fixing.
  2. Count the items in your main navigation. If it is more than six, something is a secondary action pretending to be primary.
  3. Squint at the header. Whichever element is most visible should be the thing you want visitors to do.
  4. Press back from every form and booking step on a phone. Note anything that loses entered data.
  5. Read each menu label aloud and ask whether a customer would use that word. "Residential HVAC Solutions" fails; "Home heating and cooling" passes.

Game studios run versions of this with recorded playtests, and they often discover that a menu item nobody uses is sitting in the prime spot. Websites hide the same problem; you just need to look. On a dentist's site last year, analytics showed the "Our Philosophy" page sitting second in the nav while drawing under 2 percent of clicks. We swapped it for "New patients" and that page became the second most visited on the site within a month.

Where menus and mobile meet

Navigation on small screens is a topic of its own, and we cover it in detail in our piece on mobile online game interfaces and small screens. The principles above apply there with even more force, because a phone gives you room for perhaps one loud action and very little else.

If you are planning a rebuild, our web design archive has more of these teardown notes, and the conversion section collects the numbers from my spreadsheet as they change. I add a row every time a site goes live, and the PLAY button lesson keeps winning.

TB
Theo Banerjee

Theo builds websites for local businesses in East Texas and keeps a spreadsheet of every contact form he has ever shipped and how many messages it brought in.

More posts by Theo

More in Games