Rethinking the Nintendo Switch UI
It’s not terrible, but it could be better.
As the new console on the block, Nintendo has an opportunity to learn from the UI mistakes Xbox One and Playstation has made. They’ve managed to create a home screen that feels somewhere in between Xbox and Playstation. It feels organized, minimal, and light hearted like the Nintendo brand we all love. I think it could still be better. I’m going to break down the Nintendo Switch home screen, and then show you how’d I’d improve it with my own design. Before we do, let’s talk about the history of the console home screen, and where we are now.
Console UI History
Remember the Nintendo 64? Unless you were born after year 2000 (anyone else feeling old?), you probably do. Those were the days when you turned on your console, and it simply played the game cartridge you inserted. No dashboard. No home screen. Just turn it on and play.
Fast forward almost two decades later, and consoles are not only playing games, but they’re streaming your TV shows and movies, playing your music, organizing your connected friends lists, utilizing apps (even apps that order your pizza), and offering online downloads where you can buy a game from the comfort of your couch.
With all of the features a console brings to the table these days, the console home screen was born. While the UI has improved since the days of the first Xbox and Playstation, it’s still not great. The Playstation 4 home screen is minimal, but has poor organization and a ton of inconsistencies in styles. The Xbox One home screen is highly organized and styled, but also cluttered with advertising and shortcuts that users don’t need.
Switch UI: The Good and the Bad
Nintendo’s UI was honestly a bit surprising to me. They came out of the gate with a pretty strong UI. It’s not perfect, but it’s not awful. Let’s take a look at the UI and break it down by section.
The top section features your profile picture, the time, wifi signal strength, and battery information (I’ve chosen to show % on mine). Consoles tend to use the top section for navigational purposes. Nintendo chose to place this elsewhere. It feels more like a phone OS or tablet OS, which makes sense for the handheld. For the TV? I’m not so sure. I think a bigger profile picture presence and stronger use of the top space is something worth exploring.
The middle of the UI features a horizontal column of cards. These cards represent software/games the user has recently opened or played. I’m a huge fan of a card system. They’re easy to organize, and allow third parties to incorporate their designs with consistency to the UI. What I don’t love is the horizontal scroll, and the way they handle the game title. Zelda’s title is currently bleeding over into Snipperclips. This section could be cleaner, and better utilized for the user.
I’ve dubbed this section “icons.” The icons section feels slick and modern at first glance. However, there’s a few icons that I have some trouble with. For example, the power icon. Not only is it unnecessary, but it’s also a different stroke weight than the rest of the icons. The “news” icon (first one) looks more like messaging. I love the colors, but I wish they’d continue throughout the rest of the icons. I think we can trim some unnecessary fat here, and build on a system that isn’t far from working.
Part of this section doesn’t feel necessary. The Joy-Cons on the left is absolutely necessary, so that you know when your charge is running low (they learned from Xbox on this one), or a Joy-Con becomes disconnected. I think always displaying the button map isn’t hurting the user experience, but most of the users playing the Switch are tech savvy and know “A” is select, and “B” is back. The only place these options are expanded are when you’re selecting a tile in the middle section. I think there’s a more simple, and lean way to educate your users on their button options.
Nintendo Switch UI Redesigned
As I said before, the UI that Nintendo debuted with the Switch isn’t horrible. I wanted to redesign the UI with respect to the things they did right, and I wanted it to still feel “Nintendo.” I also wanted to ground myself in the reality that this is a console UI, and not a website or an app. I’ve never designed a console UI before, so I had to approach it as a gamer, instead of the typical app or web user. Luckily, I have a lot of experience as a gamer! So without further ado…
Simple, modern, and Nintendo.
These are the three focus points I had in the redesign. Give the user options, and make it feel like they are in control. Let’s break down this design, and see how it works.
Where did the icons go, you ask? I’ve hidden the icons in the top section, which animate out from below the user icon horizontally when the user moves the cursor up (see below). I know what you’re thinking. WHY ARE YOU HIDING THE ICONS?! Bear with me. There’s a reason.
The reason I can sleep at night after hiding the icons under the user profile icon is because I’ve given the user an option to place navigation where they want. The first 4 cards underneath the Zelda BotW header are customizable. You can choose for them to be the browser, access to your friends list, games, or any of the icons from the top navigation.
In this case (below), I’ve chosen the first two tiles to be specific games (Mario Kart and Snipperclips). I also decided to add the eShop for quick access to new games. Last but not least, I added the gallery, because I love to share my game captures on social media. Everything following these tiles will automatically be games downloaded or recently played. There are tons of different variations, and any user can customize the first row to allow quick access to the games or features they use the most.
Let’s talk about the selected state on Mario Kart that you can see above. The gradient outline animates in a gradient from light blue to white around the edge of the object, and the card moves slightly up. This is emphasized by a slight blue gradient at the bottom of the object. The button options are placed on top of the gradient. My opinion? You only need two options: Select (A), and Options (X). Press A to play, or X to close the software, delete it, change the tile, etc etc. That’s all you need.
The design also works with the Switch “Dark” theme, and I went ahead and experimented with a Zelda theme as well.
That’s it! I would take the time to animate a full example, but it would take the time I don’t currently have to give up freely. I hope you enjoyed reading, and I’d love to hear your thoughts on the redesign below! ✌️🤓
