Exuberant Video Game Menus Designed With da Vinci in Mind

Rollo Romig

There are days when life seems to consist of navigating app menus. Sometimes it is menus within menus, as when you scan a QR code in a restaurant and struggle through a strangely complex interface to order the burrito you knew you wanted when you walked in. Good menus are helpful portals. Bad menus are annoying obstacles.

The Japanese company Atlus makes video games that offer a third approach: menu as main event. When you open one of its menus, the options unfurl in a sensory feast of color, movement, sound and typography. In its role-playing game Metaphor: ReFantazio, an elaborate tale of political intrigue that was released Friday, the letters in the primary menu fall into place like a crown on an image of the protagonist’s head, their sharp serifs set against a vibrant background of dancing splotches of paint.

Metaphor’s lead interface designer, Koji Ise, had never worked on a video game before and did not look to the medium for inspiration.

“I looked at music videos, I went to art exhibitions, I studied a lot of medieval paintings,” said Ise, who previously worked on websites, apps and advertisements. “This game has a very medieval vibe to it, so I looked at Leonardo da Vinci and thought about how he would design menus. I made sure to include his brushstroke style.”

The Japanese role-playing games that Atlus produces, including the Persona series, are part of a narrative-rich genre known for wildly imaginative scenarios and complex characters. But manifesting those narratives typically requires a lot of number crunching. Playing the games can resemble working in a spreadsheet.

“A JRPG is a menu game,” said Winnie Song, an assistant arts professor of game design at New York University’s Game Center. “That’s all you’re doing. Before a battle, you’re thinking about: ‘Which characters am I taking? What are they equipped with? Are they upgraded?’”

Atlus’ key insight is that if the game is played mostly in the menus, then the menus deserve the biggest aesthetic investment.

It is an approach that diverges radically from the dominant philosophy in computer UI, or user interface. Apple’s influential aesthetic is minimalist, uncluttered and utilitarian — highly stylized, but barely perceivable as style.

“Aesthetics matter because everyday people need to perceive it as approachable before they try it,” said Velian Pandeliev, a UI designer and a lecturer at the University of Toronto.

Apple was a pioneer in making the user interface more playful and friendly, he said, and its operating system tends to dictate the UI aesthetic of the apps offered within it. People seem to expect every smartphone interface to work more or less the same so they inherently understand how to navigate them.

But video games are different, Pandeliev said. They are meant to offer a challenge, and players expect each experience to be novel.

Atlus has designed its menus with the recognition that minimalism and clarity are not necessarily synonymous. If done well, a preposterously baroque user interface can just as clearly point you in the right direction as an austere one.

“They’re doing something very special and bringing a joy into the world that no other game has,” Song said.

Masayoshi Suto, who has been the lead UI designer for many Atlus games and served as design adviser for Metaphor, said he originally thought of the user interface as simply laying out information. But when he was working on the 2006 game Persona 3, it occurred to him that a more expressive UI could make that information fun.

“I started thinking about it as graphical entertainment,” said Suto, who looked to website menus for inspiration. “Now when I make menus, I’m excited for players’ reactions. I think, ‘What will surprise them? What will they talk about?’”

The exuberant menus in the 2016 game Persona 5, Suto said, took typographical inspiration from the ransom-note-style covers of Sex Pistols albums. Shigenori Soejima, Atlus’ lead character designer, recalled that because that game included a character who calls out play-by-play commentary during some battle scenes, Atlus also looked to the data-rich but often bombastic graphics of televised sports matches.

Katsura Hashino, the director of Metaphor and Persona 3, 4 and 5, noticed that Atlus’ emphasis on menu style started influencing the games in unexpected ways; even the music ended up being guided by the UI. “We’ll design a really cool menu,” he said, and then other members of the team “will come up with ideas based around it.”

Metaphor: ReFantazio is a maximalist game: The era is vaguely medieval, yet the main characters dress in Swinging London style, outfitted in tailored houndstooth and plaid suits. The score is orchestral, complete with a choir. Every frame aims to dazzle, but nothing does so more than the menus. Metaphor includes the management of a social calendar as in the Persona games, while expanding that mechanic into the political realm.

The game’s style really clicked for Hashino when he saw Ise’s concept for its primary menu, which is centered on a dynamic portrait of the protagonist, a soft-spoken young man from an oppressed tribe who is competing for his kingdom’s throne. “He explained that this menu shows all the possibilities for the characters,” Hashino said. “So the UI is not just stylish and cool, but is an inherent part of the story itself.”

Ise said Metaphor’s typography had many influences, including traditional Japanese paintings and a particular style of Japanese pop-music lyrics video. He tried to reach the peak of expressiveness, he said, without going over the edge.

“There’s been many times where I added another touch and it interfered with the visuals,” Ise said. “And the others say, ‘OK, you’ve gone a bit too far, my friend.’”

The Atlus approach is highly collaborative. There are no auteurs.

The dynamism of Atlus’ style, Suto stressed, owes itself in part to the company’s unusual attitude that programmers, too, are creative artists. “We don’t list every single step,” he said. “We vibe with the programmer, and the programmer brings their own taste and their own ideas” to the concept’s execution.