Even after multiple redesigns the main menu of Tower Unite is still a hotly debated topic, from legitimate criticisms to various nitpicks and little adjustments requested.
I figured I’d throw my hat into the ring to try out menu design and to try addressing a few noted problems I’ve seen brought up. Please keep in mind this is all for fun, so:
- Please do not “backseat” the Tower devs – while I believe good constructive criticism is incredibly important for a healthy project, it can also be INCREDIBLY exhausting to be nitpicked constantly over otherwise miniscule details. This is a fun “what-if”.
- This is PURELY concept art. While I have used Unreal Engine in the past, I understand its menu systems can be a bit… tricky.
Current Main Menu:
The current menu is very simple to understand. While sub-menus have lost a bit of needed categorization, it’s still very simple to wrap your brain around, albeit a bit strangely oriented.
This menu is very mouse oriented, as it lacks the proper navigation tools needed to use with controller. This is not currently a big problem, but as more and more Game Worlds support controllers, the option may need to become available.
It also seems to lack a strong design philosophy in favor of “showing all its hands at once”, so to speak. The screen is proportioned and split up into different catagories, which seems to have an odd effect of not really guiding your eyes to any intended location. In fact, the spot with most contrast seems to be the News and Chat tabs, which I believe could be better placed in focus of the Plaza and other game elements.
Concept Goals:
Easy to navigate buttons that contain all necessary information.
Add support for ease of access for controller while retaining good navigation with mouse function.
Infuse a strong sense of design into the menu. How much can we tell the player about the game from one glance? Not just all needed information, but the game’s character as well?
Menu Studies
Team Fortress 2’s newest main menu is incredibly slickly designed. While containing a lot less needed information than Tower Unite could ever need (Condos, Workshop, Appearance, all community tabs, etc.) it still does a marvelous job of subjugating a lot of the less important buttons to simple square buttons with info tooltips.
Fall Guy’s main menu is a case study on ease of access, with a hovering bar on the top of the screen you can navigate through arrow keys, controller bumpers, or simply clicking. While more is hidden behind a sub-menu, it is still one of the most slickly designed menus I’ve seen in recent years. 10/10
THE PROPOSAL:
What I decided to go with with was a very simple “brochure” design. With Tower Unite taking place entirely on an island, heavily featuring tourist materials such as maps, signs and advertisements, I felt this would be the best way to instantly show off Tower Unite’s indentity – while also being a great way to merge the worlds of style and substance.
(Now keep in mind this was a very quick concept – in a proper “brochure” design, you would be able to throw in so many fun little designs in the design of the background. The text is also very sloppy as well. I didn’t want to fiddle with a bunch of fonts for two hours so I just drew them out.)
I figured that loosely categorizing various buttons and menus under Tower Unite’s slogan, “Play! Create! Party!” while not ENTIRELY accurate to a tee, would still work well to organize each section and create a nice simple tree of things.
The slopes of the brochure folds help guide your eye to the ‘Play!’ and ‘Create!’ options first, as the Condo, Plaza, and Game Worlds are the most information to feed the player first (I imagine).
I didn’t get to make another concept image, but I would imagine that the brochure would “unfold” a bit when you hover over a main button to tell you more about each option, serving the same purpose as the current menu while keeping things visually clean.
A few changes:
The “News” tab is now a square instead of a long banner. I’d imagine new updates would have to have a second quick additional image made to crop correctly, but it really helps to free up quite a bit of space.
The community tabs have been relegated to small buttons in the corner, which I would imagine tell you what each button is when hovered on. (The Discord community button is also placed next to Global Chat in the empty space, which adds a bit of visual interest and puts more of a focus on it.)
The top menu is mechanically similar to how Fall Guys operates, in that a simple bumper press (or mouse click) can direct you to more settings and help options. The big buttons are placed in a simple tree grid, so that navigation is incredibly easy while visually interesting.
The friends menu is now a simple expanding menu that can be opened with a click or press, and it displays how many friends are online at the current time.
(I would imagine a hover or click on the Game Worlds button brings you to a quick access menu to each Game World too, of course.)
Conclusion:
Keep in mind this is still a very simple, very rough concept made in a couple hours. Things are not perfect and a few things are missing, but overall, I’m very happy with how it came out.
I have absolutely no idea what even in particular is not possible in Unreal at the moment (a few things, I’d imagine) but it was a fun side project to illustrate some fun design techniques and give me an excuse to talk about Fall Guys’ clean menu.
And who knows, maybe it could inspire the devs down the line to mess around with various aspects of Tower’s UI design. Thanks for reading! -Z
