Exuberant video game menus designed with da Vinci in mind


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. — Photos: Atlus

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 last Friday (Oct 11), 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.”

Atlus has designed its menus with the recognition that minimalism and clarity are not necessarily synonymous.Atlus has designed its menus with the recognition that minimalism and clarity are not necessarily synonymous.

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 stylised, but barely perceivable as style.

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

“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.

Atlus’ emphasis on menu style started influencing the games in unexpected ways; even the music ended up being guided by the UI.Atlus’ emphasis on menu style started influencing the games in unexpected ways; even the music ended up being guided by the UI.

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. '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.

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.’”

For Metaphor, much of the typography was customised letter by letter to fit the style and dimensions of each menu – a process further complicated by the fact that the game is being published in 11 languages.For Metaphor, much of the typography was customised letter by letter to fit the style and dimensions of each menu – a process further complicated by the fact that the game is being published in 11 languages.

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.

Another atypical aspect of the company’s design method, Hashino said, is that each of a game’s many menus has a different layout: a list, a grid, a dial. For Metaphor, much of the typography was customised letter by letter to fit the style and dimensions of each menu – a process further complicated by the fact that the game is being published in 11 languages.

“That means that we have to custom program each individual screen,” Hashino said. “It allows us a much greater degree of freedom, but it is an extremely inefficient process. Every designer who joins our company is like, ‘I cannot believe you’re making things like this.’” – ©2024 The New York Times Company

Follow us on our official WhatsApp channel for breaking news alerts and key updates!
   

Next In Tech News

Eutelsat uses SpaceX rocket to launch first satellites after merger
Google tools to combat mobile phone theft start rolling out to users
The new macOS trick to quickly arranging windows side by side
Passkeys: The successor to passwords is about to get much simpler
India's Tech Mahindra beats July-Sept revenue view
Banned from school? US teens picture life without cellphones
Online chat investigation snags nine suspects charged with child solicitation, other crimes in the US
How 'pig butchering' romance scams siphon millions from Californians every year
‘Kindness’ influencers on TikTok give money to strangers. Why is that controversial?
US SEC gives green light for options listing for spot bitcoin ETFs to NYSE

Others Also Read