Let’s Dance! UI design in Hatsune Miku and Persona 4: Dancing All Night

Anyone who’s seen me in one of Bristol’s night-time hotspots, or indeed one of the weddings I went to last summer, knows that I love to dance. Anyone who’s played board games with me knows I love to shout out meaningless platitudes like “believe in yourself!” at random moments. Yes, I am an embarrassing person to be around but I regret nothing.

I’m also a fan of Japanese RPG Persona 4 Golden on the PS Vita, and its rhythm-action spin-off Persona 4: Dancing All Night - overflowing both with dancing and meaningless platitudes - seemed like the perfect addition to my life.

It shares my little hard disk with Hatsune Miku: Project Diva f, which has been a firm favourite of mine over the past year. Two rhythm action games, both with different design philosophies, and a lot worth comparing.

In particular it's notable how the visual interface sets the limitations of the choreography - that is to say the stage design - in both the games. I’d even go so far to say that they reflect two contrasting ideas about what a great rhythm action game should be.

The basics of play

Before we compare the interfaces of the games, I’ll fill you in on the basics of how to play. In Hatsune Miku, black markers appear on the screen, in the shape of one of the PS Vita’s four face buttons. A matching coloured symbol will fly onto the screen from the outside, and when it overlaps with the black marker the player must press the corresponding face button.

In Persona 4:DAN, the play screen shows a ring with six hollow circles on it, corresponding to the three outermost face buttons (cross, circle, triangle) and three outermost directions on the D-pad (down, left, up). Yellow circles will appear at the middle of the screen, and move towards the outer ring. When a yellow circle makes contact with a hollow circle the player must press the corresponding button.

In both games, missing a note will cause the player to lose some health. Lose too much health and you’ll lose the song, but health can be also be recovered by hitting notes successfully.

Using visual layout to inform physical actions - Hatsune Miku

One of my favourite things about the choreography in Hatsune Miku is how the layout of the notes on the screen reflects the buttons that need to be pressed. For example, notes that happen in quick succession are usually spaced close together, so that the player is aware well in advance that a fast sequence is on its way. The player, already being given a lot of stimulus to process, is constantly being given a helping hand to guide them towards the correct physical actions.

More interestingly, the position of the note on the screen and direction in which the notes are moving, match the position of the corresponding button to be pressed. For example, the Triangle button is the top-most face button - when triangles appear on-screen, they will often be at the top of the screen, or climbing from the bottom to the top, subtly hinting “up” to the player.

In the video above (from 0:40) take note of how often the pink square symbol appears left of the red circle symbol, matching their position on the control pad.

Making these subtle on-screen hints helps the player deal with more difficult-looking patterns and thus feel more skilled. But giving the player a helping hand does not detract from the experience - by making what would otherwise be complex simpler and more intuitive, the developer can challenge the player with harder challenges. The player can cope with more physically demanding and visually complex choreographies than they would be able to otherwise, and feels more accomplished as a result.

The helping hand also creates an opportunity to ask for brief moments of mental juggling, by removing the support for short periods. In harder stages, there are some occasions where the on-screen pattern will go against the visual rule that has been present through most of the game. At these moments the player has to think extra-hard to process the visual information. However, note that these sections are short and uncommon - their purpose is to offer the player a challenge, not to force them to lose.

The satisfaction the player receives at this point is that of having dealt with complex information, not of overcoming a physical challenge like they do in the rest of the song. Additionally, a moment surprise is usually followed by a safe space of familiarity, allowing the player to get back to rhythm, rather than beating them into submission - a design strategy I used myself when developing Tap Happy Sabotage (see Chessboxing section).

Using visual layout to focus on other stimuli - Persona 4: Dancing All Night

By contrast, P4:DAN’s user interface means that the layout of the notes cannot reflect its rhythm so clearly. The position of the yellow notes is defined entirely by the associated button and the time it should be pressed. The designer is given no freedom to create suggestive patterns like in Hatsune Miku. Indeed, if two notes appear in rapid succession, unless they use the same button, it is very hard to telegraph that to the player. Two notes occurring within a heartbeat of each other will be drawn too far apart for this to be visually obvious.

As a result it's common for such notes to be next to each other on the controller. A "down" can be followed by a "left" in quick succession, but not by a "triangle" as the player is likely to miss the connection.

In this screenshot, the player must press down, left, up in quick succession

However, it would be a mistake to necessarily see this as a shortcoming of P4:DAN. It is more the result of a design with different intentions to Hatsune Miku. Hatsune Miku players can keep their eyes focused on one point on the screen, and the challenge is processing a rapid succession of information (notes) and responding with a feat of agility (button presses). P4:DAN requires players to track notes through their peripheral vision, due to successive notes being drawn spread-out over the screen.

Indeed, you’re not meant to watch the notes as-and-when they’re supposed to be played. Successful play means using the notes appearing on-screen as an aide-memoire, having a broad feeling for when they need to be played, but simultaneously absorbing the information needed to play the next set of notes. One could argue that the game attempts to ask players to engage with the music on a richer level - listening and feeling rather than reacting.

With so many visual stimuli it can be easy to miss notes in the noise, such as the one on the bottom-right

Unfortunately, requiring the player to think like this results in a number of frustrations - or at least it did for me personally. Because you’re not looking at notes when you play them, it’s very easy to miss a note without being informed of what you missed. Moreover, the yellow design of the on-screen notes makes them particularly hard to spot against yellow backgrounds. In Hatsune Miku, guiding the player’s eye towards the next notes removes this frustration, as the next place to look is usually very close to the last note played.

In Hatsune Miku notes appear next to each other. So it's obvious where your eye should be and easy to spot when a note is missed.

How this affects the choreography of levels

With these considerations in mind, it stands to reason that the harder stages in P4:DAN are less physically demanding, and indeed slower, than in Hatsune Miku. Additionally, Hatsune Miku offers players the ability to use the D-pad buttons as well as the main face buttons, meaning that agile players can play notes twice as fast in Hatsune Miku than in P4:DAN.

The aim of basic play is clearly different. P4:DAN challenges players by giving them complex stimulus to process. Hatsune Miku challenges players’ speed of processing stimulus and agility, requiring them to bring out their inner virtuoso.

The player must swipe to hit a star icon to get the note

With this in mind, it’s interesting to compare the way the two games use the PS Vita’s front-screen - swiping the screen is a note action in both games. In Hatsune Miku a yellow star on-screen acts much like a coloured button symbol: when it overlaps its black marker the player must swipe the screen. Swiping a star is compulsory, and life is lost by missing it. In P4:DAN a blue ring will emerge from the centre, and player must swipe the screen when it intersects the outer ring. Swiping a blue ring is not compulsory, but awards the player bonus points.

Swiping when the blue ring reaches full size awards bonus points

The swiping action is an interesting one, as it requires the player to lift their thumb off of its usual resting place, and make a more expressive movement. A swipe does not have the immediacy of tapping a button, and it’s unclear to the player exactly what the game registers as a swipe. How long does a finger have to have travelled before its action is declared a “swipe”? Does the swipe register at the beginning of the motion or the end?

As a result Hatsune Miku is very lenient with what it considers good timing on a swipe - swipes cannot be considered early or late like a button press is. This leniency is so strong that a player can swipe the screen maniacally during these sections and still hit all the notes without penalty.

Because of the added difficulty of switching between buttons and swipes, the two games take different attitudes to requesting them from the player. Hatsune Miku usually keeps sections of swiping separate from sections of button-pressing. Only in specific sections in difficult tracks will it ask the player to switch rapidly between pressing and swiping. In this segment (from roughly 1:30) the player must switch between four swipes and three button presses - this is one of the hardest-ranked tracks in the game.

In P4:DAN, swiping is asked of the player between button-presses, the two actions being mixed together. To hit swipe notes the player will have to move back and forth between the touchscreen and the face buttons frequently. P4:DAN can get away with asking for more physically demanding swipe actions because there is no penalty for missing a swipe. Players can choose to focus on the key notes, or if they feel like showing off they can attempt the swipes in-between. In P4:DAN, swiping is a risk-reward mechanic, as swiping makes it easier for you to miss key notes. The result is a game which does not require you to be a virtuoso to beat the harder levels, but gives you an opportunity to do so for flourish, expression and high scores.

Heads-up displays and processing of information

In addition to the ways choreography is conveyed to players we also see differences in the heads-up display, or HUD, showing the player useful information about their progress. These differences, however, do not seem to reflect the contrasting design goals of the games, and it's easy to compare which HUD is more successful than the other.

P4:DAN has a considerably more complex HUD than Hatsune Miku, with separate meters showing how far through the song you are, progress, your ability to enter “fever mode,” and a counter for your combo. In a game where keeping track of a lot of stimuli on-screen at once, spreading all these bits of information over the screen serves to add complication, and makes players miss seeing notes as their eyes dart around trying to process the HUD.

The five monsters at the top of the screen show whether the player is succeeding or failing, but even in this screenshot it is hard to tell.

In addition to this is a frustratingly vague representation of progress. Five animated figures at the top of the screen represent whether or not you are succeeding through their colour and animation - grumbling and red if you are failing, dancing and rainbow-coloured if you are succeeding, and a variety of states in-between. The problem here is that the player cannot parse this information at a glance.

Viewing a mid-toned character doing an animation between standing and jumping neither tells the player whether they are doing well enough to succeed, nor how close to the threshold for success they are. The states where the player is close to the mark are exactly those where they need this information most, and where being just above or just below the threshold creates most tension. Yet this is the point where it is hardest to read your state from the meter.

The circle on the right represents health, while the purple bar on the bottom represents number of notes hit. It flashes and changes colour when the 80%, 90% and 95% marks are hit.

By contrast Hastune Miku shows key information in two easily-readable bars at the bottom of the screen. The progress bar at the bottom of the screen is also subtly misleading in a way which creates tension but does not hide key information. Success in Hatsune Miku is achieved by hitting 80% of the notes in a song. A “great” result is achieved by hitting 90% and “excellent” by hitting 95% of notes. The progress bar shows how many notes you’ve hit, and so how far away from hitting each of these markers are.

To create drama the progress bar always appear further away from the next marker on the bar than you actually are. So the difference between 79% and the 80% marker is clearly larger than the difference between 74% and 75%. As a result it’s very common for a player to have moments where they think they aren’t going to make it, only to have that dramatic moment where the 80% marker is hit. This small design decision makes the player feel like a hero through UI design alone. I love it.

The design ethos of the two games

In terms of my overall feelings of the two games, Hatsune Miku is easily my favourite of the two, but I can certainly appreciate what P4:DAN is trying to achieve. I’d go so far as to say that the design of these games reflects two opposing and equally-valid approaches to game design.

Hatsune Miku starts with its basic actions - pressing buttons at the right time - and gives the player every helping hand they need in order for these basic actions to feel natural and empowering. From there it expands by creating physically demanding challenges and giving the player a lot of information to process. On top of this, the customisable music videos add pzazz, personality and an opportunity for players to make the game their own.

By contrast, Persona 4: Dancing All Night feels like it started with a clear design goal: to immerse the player in music and dancing. The user interface feeds into this, forcing the player to “feel” the music rather than sight-read the notes. The best place to focus your eyes on the screen appears to be the centre of the screen where the characters are dancing, presumably perfectly placed to watch the show. The game invites the player to use difficult swipe actions to show off, expressing their confidence, rather then simply to survive. The resulting game supports a philosophy that rhythm games should be about intuition and expression.

Neither approach to design is necessarily better, and we need both for the medium to grow. We need games that start with a core philosophy and try to prove it out, as this is how we challenge design norms and ask questions about what games can be. But we also need games that take a basic working formula and expand it to explore what it can be, as this allows us to explore the finer details of design and test out the limits of an idea.

Both approaches are valid, and both games are important as steps in the ongoing evolution of the medium. So long may their lessons inspire the next generation of games!