Armchair VGUX: Super Smash Bros. Ultimate
If it ain’t broke, don’t fix it. But this one’s broke, so let’s go!
Easily far the most exciting news out of Super Smash Bros. Ultimate’s announcement was that every single character would be returning to the game.
Around the world, Smash fans shouted “Yay!”
And, at the same time, UX designers shouted: “How’re you gonna fit all that in the UX!?”
And Nintendo, in their infinite wisdom, answered: “By using 75 tiny icons, of course”.
I’m mostly joking. Mostly. But really, let’s take a look at how Nintendo tackled this colossus challenge of fitting 75 smashable characters onto your Switch:
Sooooo, yeah. Not perfect. Actually, kinda bad (And that screen doesn’t actually have all the characters). I have two main complaints:
- The character names are very, very small.
- The frames to show your selected character takes a lot of room on the screen.
Now, the important thing to consider is that the Smash Bros. franchise has an established style with these character select screens — they’ve kind of always looked this way. But I think we can do better. It’s 2019, there are lots of games with huge casts of characters, so let’s see what we can learn from them.
I wanted to explore how a new player might find a character to play, and I made the assumption they’d be most interested with playing their favorite characters outside of Smash. For that reason, I started with a franchise based filter:
This isn’t a bad solution; you select the franchises that you’d like to pick from and the screen adapts to your choices.
For a new player, if they’re fans of Mario or Zelda, they can select those franchises and get a curated list of the characters available. It could also be used as a modifier on the matches themselves — want to play a match with only Donkey Kong characters? Just pick the DK category.
I wasn’t convinced this would help an experienced player, though. They’re not looking to pick from a franchise or category. Instead, they probably just want to get back to one of the characters they play competitively or have been recently practicing.
With that in mind, I designed an approach to fit an experienced player better:
This is a bit of a swing and a miss. I like the favourites section, but the attempt at showing some stats just doesn't really work for me (not sure what I was thinking with the neon green, either…)
Anyway, you might have noticed the character frames got a lot smaller? Well, arranging and rearranging the screen to create these mockups made it clear to me that the character select panels take up way, way, way too much space. It’s a good 30% of the screen devoted to almost no useful information.
Let’s see if we can fix that:
Now that we’ve got that element sorted, we’ve opened up a ton of room to play with.
Since I started this project, I’ve been thinking a lot about the Multiplayer Online Battle Arena (MOBA) genre and how it handles a multitude of characters. There are a few approaches: some try to show off the sheer number of characters like Heroes of the Storm, whilst others go for data-driven layouts to help with choice, like DOTA 2.
I used these games as inspiration for my next few prototypes, exploring a few layouts they used. First, this…attempt:
Other than an excuse to feature Piranha Plant, this mockup is really a direct mimic of what Blizzard has done with Heroes of the Storm. The characters are in loosely defined categories — Mario in the top left, then Metroid, and so on.
It’s a fun layout, and it allows the gorgeous character art to really shine, but it’s not doing much else. It’s certainly not solving any problems, and in fact, since there’s no room for more characters, isn’t really scalable either.
Putting this together had me thinking about how I could replicate some of the information that the DOTA 2 interface provides. Choosing your character is extremely important in Smash Bros, so finding new ways to communicate each characters’ strengths and weaknesses could be a real boon for both new and intermediate players.
Okay! There’s some fun stuff in here. There’s some data here just for flavor; the franchise icon and character numbers don’t really help with making a good choice of character. Beyond that, though, we’ve got some actual usable data!
Firstly, I think a new players’ enjoyment of the game is largely predicated on picking a character they’re capable of understanding and has a playstyle they enjoy. For that reason, I’ve added a difficulty rating and a few icons to indicate what sort of a character they are.
Putting this into a UI, something similar to DOTA 2’s UI looks like this:
This is a good start — you’ve got strong character visuals, some good at-a-glance information on what sort of character they are, and the difficulty will go a long way for some players.
That being said, it’s a very slow UI to handle 70+ characters, even with a filtering system. Imagine starting at character 1 and you want to pick character 70 — it’s a lot of scrolling (Assuming it doesn’t loop, anyway).
With this in mind, I made one last attempt at the UI:
On the left, there’s a vertical scroll with a number of categories and their description. For new players, they might simply scroll through and look for low difficulty options. Intermediate players can quickly look for play styles they’re interested in and pick from there. For advanced players, you could simply offer a ‘Favourite’ category which they can manually add to.
There is a single fatal flaw in most of these designs, however: only one player at a time can pick their character. This essentially invalidates all these approaches, as a headline feature of Smash is its local multiplayer modes.
With that in mind, I took one last attempt at wrangling a card layout that worked with multiplayer:
I’m pretty happy with where this landed. It’s a little busy, but that’s a concession I can live with if it means the UI helps new players find the right characters for them. I’ve included filter and search functions, but I’ll leave it to your imagination as to how those work.
Of course, this implementation still isn’t perfect, especially since Super Smash Bros. Ultimate actually supports up to eight players, which this UI simply wouldn’t scale for. I think in that scenario I’d be tempted to revert back to the original layout.
Despite its flaws, I had a great time exploring this UI and the various challenges it represents, and I hope you enjoyed reading through my thinking.
Thanks for reading! I hope you enjoyed this breakdown and rebuild of Smash’s UI. If you’ve got your own ideas or solutions to some of the problems I’ve outlined, I’d love to hear it!