Here is my finished product. Below is my thought process and reasoning for reconstructing the menu in this way. Utilizing a radial menu is more accessible, quicker to navigate through, and capitalizes on the strengths of the Nintendo Switch controllers. Keeping the shaping of each button imperfect and non-symmetrical allows the player to quickly form a mental map of the menu system and more easily remember where things are.
Transparent layers of geometric shapes and colors create an interesting theme with an added practical purpose: Hovering over the various menu buttons provides a preview of the next screen.
The menu systems of the Super Smash Bros series has had varying levels of success. In Melee, the franchise’s GameCube version, a dark FUI style resonated through the menu’s various screens as things felt almost holographic.
The front end menu screen in question.
As an exercise in UI, I wanted to take Super Smash Bros. Ultimate, the most recent installment for the Nintendo Switch, and break down the first screen of the front end menu to see what I might be able to discover. I started by quickly recreating the menu in Adobe Illustrator by hand, to get acquainted with the various elements at play. As I did this, I noticed quite a few interesting aspects to the design.
My recreation of the menu, made using Adobe Illustrator.
The first thing I noticed about this menu was how dynamic the button shapes were. There seemed to be no grid used as a baseline, with the edges of each button falling in seemingly random places. While I found this idea unconventional and counterintuitive at first glance, I eventually understood this to be a potential way for the menu to become more easily memorized. By giving each button a unique shape, they stand out from each other upon a glance. After enough time navigating through the menu, it becomes easier to find your way around. Comparing this to a menu where each button has the same visual importance with little to no variance apart from the label, it makes sense to build a menu in this way.
Another thing I noticed about the menu was the center of the menu giving contextual art/iconography that signified what screen would come next. This echoes the idea from Melee, providing plenty of visual feedback to show the button that was currently highlighted. This is a very successful aspect to the menu, and allows for even more readability at a glance.
If I were to make changes to this menu’s design, I would have it function more similarly to a radial menu. The current menu would work incredibly well on a touch-screen device, but since the player will be navigating using the switch controllers, there are some potential frustration points when navigating around. If we were to design the starting menu as a radial menu that reacts to the direction of the control stick, players, would be able to go from the highlighted button to another button of their choice in much less time, and with fewer inputs. The controller doesn’t need to be stuck going left, right, up, and down to go from button to button.
Below, I have remodeled the same menu with this idea in mind. The small black triangle near the central circle would act as a ‘pointer’ that shows the player where their directional input is currently, offering visual feedback for them to react to. When a certain button is selected, that ‘wedge’ could grow slightly and stay highlighted even if the player returns the control stick to the neutral position. This would let the player go directly from ‘Smash’ as the highlighted button to ‘Vault’ with a simple, single shift of the control stick. This improves accessibility by lowering the number of actions required. You may have noticed that the ‘Shop’ button (seen in the previous image to the right of ‘Online’) is missing from my redesign. Similarly, the rightmost menu with various other options is also missing. Both of these would be found under the gear icon at the bottom of my redesign, depicted as a simple gear icon. This keeps the initial menu less cluttered, while still providing the option to navigate to those selections just as quickly. The original menu had a section on the screen that acted as a ticker where helpful tips ran across the screen, and another section at the bottom that provided more text about the selected button. I left these out of my redesign as I felt that they were not needed, and didn’t provide much additional help. However, these elements could easily be added back in, running along the top and bottom of the screen.
I had a lot of fun recreating the various assets for this exercise and reinvisioning the potential for a better menu.
My redesign of the menu, promoting the radial design and simplifying the menu by bringing several options into a ‘settings’ menu.