The Next 10 Years: Redesigning TF2's Menu

Team Fortress 2 is a game that has helped shape the gaming landscape for almost 10 years. As other games have come and gone, TF2 continues to be a highly-regarded (and played) game with a varied and wonderful community supporting it. Innovative and different, it is at times both a whimsical game and one with serious competition to be had.

That isn't to say there hasn't been (or continue to be) some problems with the game. Between bad matchmaking, unbalanced competitive, hackers, random crashes and longstanding bugs, sometimes it seems like all we see in the world of TF2 is the negative side.

But think about how far we've come! Released in 2007, TF2 is rapidly approaching it's 10 year anniversary. While the core gameplay has continued to evolve, some features of the game have been left back in the past. This article is my thoughts on how to 'refresh' TF2, revitalising it and bringing it into the present so that it can continue to be an attractive game to the current and next generation of gamers.

I won't be covering gameplay imbalances/bugs or issues to do with matchmaking and the like - these topics have been done to death by everyone else and me adding my two cents isn't going to bring anything new to the table there.

At the very least I think it's important to understand who I am and from what direction I'm approaching this from:

Who am I?

My name is Ryan, I'm a Full Stack .NET developer (with a current focus on Sitecore) based in Sydney, Australia.

I'm mainly a PC gamer. My Gamertag is Robotnik (or some variation thereof) on most systems. In fact you may know me from Arqade, the gaming Stack Exchange where I am one of the moderators, and you can see my TF2 Questions and Answers Here. Here's my Steam Profile, where I have 635 hours in Team Fortress 2 since 2011. I have some TF2 YouTube videos on my personal channel (but most of my time is dedicated to my group's YouTube channel: A Pinch of Salt).

In other words, I'm just your average Team Fortress 2 player - I primarily play on Valve servers, I trade when I want a particular weapon or cosmetic and I'm certainly not good enough at the game to compete at any sort of serious level. I enjoy watching Uncle Dane, Mr Paladin, ArraySeven and others on YouTube. I main Spy, can hardly Rocket Jump, I make a decent PyBro and I am usually the guy that will switch to Medic when the team is crying out for one.

So with that out of the way, Let's take a serious look at how I believe we can improve Team Fortress 2!

TF2's Menu System

I find TF2's menu to be dated and cumbersome. Sure, it's been updated over the years, but overall the design and layout hasn't changed much, and there's a lot going on inside it that isn't very well defined.

It seems that whenever a new function was added, it was tacked on to the UI without much afterthought (and probably not by the original developer), meaning there are less-useful functions given top priority, along with inconsistencies between how certain things behave.

This actually ties back into a lot of discussions around TF2 not being 'newbie friendly'. When new players cannot navigate the menu system easily, or don't know how to use tutorials (or that the tutorials are crap - another point entirely), that drives them away from the game as a whole. It doesn't matter how balanced the gameplay is if noone can easily work out how to use the menu and get into a game they want to play.

None of this is more clear than on the Main Menu screen:

The Main Menu

I hope you appreciate this screenshot, as I had to completely reset my TF2 configs and HUDs to get to it:

TF2 Main Menu

Let's quickly go over what each button does:

  • Find a Game - Drops down a menu of the game modes - Casual, Competitive, Mann Vs Machine, Community Servers, Training.
  • Items - Opens a full screen menu with options for choosing a class to customise, browsing your backpack, crafting, or visiting the Mann Co. Store
  • Shop - Also a link to the Mann Co Store.
  • Featured - Shows specials from the Store in a slideshow-like fashion
  • View Promotional Codes - Opens the Steam Overlay and shows unredeemed Promo items from cross-promotions with other games. I don't think this is enabled by default, but the fact it's here at all is a bit worrying.

Along the bottom those icons are:

  • Quit - self explanatory
  • New User Forum - Opens Steam Overlay with Steam Browser window to the TF2 Forums
  • View Achievements - Opens small in-game window, allows you to checkbox incomplete achievements to add them to the gameplay HUD.
  • Developer Commentary - Opens a large blank box with 'Start' on it). Clicking start launches you into the original Dev commentary (a little out of date)
  • Be a Coach - Asks if you want to volunteer to teach others how to play TF2
  • Workshop - Explains the Workshop then any subsequent button opens the Steam Overlay
  • Replays - Shows your recorded replays, allows you to edit them
  • Report a Bug - Ironically enough, this crashed the game when I opened it. Normally, it allows you to report a bug (funnily enough).
  • Options - Opens the Source game default options control panel. Graphics, Sound and other settings
  • if you've played any other Source game (eg Half Life 2 or Portal) you'll be familiar with this screen
  • Advanced Options - Contains gameplay-altering options (Quick Weapon Switch, Click Or Hold to toggle Medigun and so on).

The icons on the top right are:

  • Item Notifications - Alerts you to new unlocks. This doesn't exist on screen if you don't have any new items.
  • Live Streams - Shows a list of current livestreams - (When you click on a Stream it minimizes the game and launches Twitch in a regular browser instead of the overlay browser)
  • Contracts Drawer - 'Weekly' (kinda) quests/challenges when there's a campaign running. The button is greyed out (but not removed) when there isn't any.
  • Inbox/Messages (Updates & Announcements from the TF2 Team & Blog)

What's wrong with this?

As part of my job I've had some background in User Experience (UX). Let's take a quick look at the definition of UX from the almighty Google:

User Experience
the overall experience of a person using a product such as a website or computer application, especially in terms of how easy or pleasing it is to use.

"if a website degrades the user experience too much, people will simply stay away"

In other words, UX is about making it easy for you (the gamer) to do what you want (use the game's features), so that you don't get frustrated, lost in menus, or confused about what clicking something will do (buttons should state what they do and act similarly to one another). This is different (but related) to the 'User Interface' (UI). You can update all the buttons and backgrounds to make the menu look nice, but if you redesign how the menu is organised based on what your users need to do, that's altering the UX.

Like a lot of things in life, there's no 'one way' to simply 'do' UX. But here are some core principles to follow:

  • Make a good first impression - A user should look at the Main Menu and know exactly where to click to do what they want. Likewise, you don't want users to get lost navigating around your other menus either.
  • Reduce Clutter/Don't get in the User's way - Define 'goals' that the majority of your users have when using your interface. If 70% of your user base wants to launch the game to play casual mode in Payload maps, then you should do what you can to highlight that path through your interface and make it easily accessible. Other paths and items can exist but they have to add value to your users in some way. If something never gets used, is it really worth keeping there?

UX is a huge field and these are by far from the only 'core principles' out there, but they are the ones most relevant to today's topic. So without further ado let's analyse TF2's Menu system from a UX perspective:

First, what have I actually used on this main menu? Here's a visual representation:

TF2 Main Menu Colorised

  • Green is a function I use regularly. (The blank green square is where item notifications appear).
  • Yellow is something I don't click often but I do have uses for.
  • Red, I have either never clicked, or can't remember at a glance what happens if I do. That's right. I cannot tell at a glance what these buttons do without launching the game and mousing over them, and I've been playing the game for 6 years:

TF2 Bottom Buttons

There are some other things that are not quite right either:

  • Core Features are Hidden
  • 'Find a Game' might be easy to spot, but you've got to click to expand and then choose an option in order to get to another menu where you choose some more options before finally clicking 'Play'. It's a long path and not exactly conducive to getting people to play the game.
  • Non-core features are prominent
  • Why is there an entire button dedicated to redeeming Promo codes on the main menu? I know this is toggleable, but why is it toggleable in the first place?
  • The 'contracts drawer' exists when there are no contracts.
  • Stuff like 'Be a coach' and 'Dev Commentary' aren't used that often.
  • Inconsistent Window/Popup/Menu behaviour.
  • Some buttons open a whole new full-screen window (Backpack etc). Others open 'pop-up' style windows.
  • Popup menus are inconsistent. Some pop-ups can be moved around the screen, others can't. The way they look compared to each other is different.
  • Some buttons/links open in-game, others open the Steam Overlay, and others minimise the game completely and open your default browser!
  • Mouseover text appears for some buttons but not others
  • Some icons disappear when not used (item notifications) others don't (contracts drawer, messages)
  • Unclear Iconography
  • Icons should tell you at a glance what something does. As previously mentioned a lot of the buttons require mouseover text to figure out what they do. In other words, the icons themselves are not standardised nor recognisable; they don't give a very good indication of the function behind them.

So how do we fix it?

1. Draw focus to core game mechanics.

The Main Menu should draw your gaze to the things that matter most, whether you're a newbie, a mid-tier player, or veteran. It should focus on the things that most people are going to want to click most often:

  • Playing the Game (everyone)
  • Learning/Training and Guides (newbie to mid, but could also be veterans depending on quality and technicality of material)
  • Organising/Viewing their Backpack, Loadouts and Items. (mid-tier to veteran players)
  • Interacting with community features like the TF2 Wiki, Steam Forums and livestreams (everyone)
  • Viewing Achievements and Stats (everyone)
  • Trading & Shopping (mid to high tier players)
  • Seeing announcements & Specials (mid)
  • Configuring settings & Options (everyone).
2. Group like-minded content

Now that we have some core stuff, how can we organise it in such a way as to provide distinct groupings of content?

  • Gameplay (Core Game Modes)
  • Items (Backpack, Crafting, Store, and Trading)
  • Community - Links to the Steam Community, Workshop, helpful resources and Streams
  • Options - A single area for all customisations
  • Announcements - Combining 'Messages' and 'Featured Items' into a single feed.
  • Personal Goals - Group stuff that you can 'earn' together: combine 'Achievements', 'Contracts', Replays and so on into a more fully fledged 'Personal Profile' of sorts.
3. De-emphasise unimportant stuff

Based on the above, let's take a look at some buttons that don't really need to be there:

  • Promo Codes - Move into Store and Item menus
  • Notification button - Keep item notifications, but make them dismissable. We don't need the button to stick around forever
  • Contracts Remove this entirely until we need it, (and potentially merge it into 'Profile' as you'll see later).
  • New User Forums - Combine into 'Training'
  • Be a coach - Combine into 'Training'
  • Dev Commentary - Move into 'Options'
4. Improve Iconography

If we restrict ourselves to easily-recognisable icons as a supplement to the button text rather then relying on them explicitly, then they will enhance rather than detract from the usability.

How this would look

Here's a Photoshop mock-up of a redesigned Main Menu based on the points above:

Mockup
Larger Image

Here are the big changes in terms of UX:

  • Find a Game and Item 'sub' options are now prominently on the home page
  • Notifications now do a Toast-Style popout of the right side, so you can see at a glance what you've earned and can dismiss them without the hassle of opening them up.
  • Featured Items and Messages have been combined into 'Announcements' and are always publicly visible.
  • Options and 'Advanced Options' have been combined
  • 'Training' has been promoted into a 'Community' section (and will have missions/community guides etc. More on this a bit later).

Some other Visual & Style changes to the UI to help:

  • The Left-hand side menus now hug the far side of the screen rather than sitting center-left, which gives us more room in the middle.
  • The character model has moved over slightly to give more room on the right for the 'Announcements' section.
  • I've removed the 'Hard' buttons, opting for a more 'Hyperlink' style look utilising the slimmer 'TF2' font. This helps to reduce the visual noise and make the UI feel fresher, bringing it more in line with current (2017+) UI trends.
  • The big thick 'taskbar' at the bottom has been removed, helping increase the usable area and make the screen feel more spacious.

Overall, the core stuff like 'Find a game', 'Items', Exit and Options haven't moved much from their original position, so power users won't have too much to adjust to.

There are some changes that can't really be shown in a mockup which could be considered as well:

  • Animated Characters - Some simple idle animation, like breathing/looking around, and perhaps interspersed with the occasional voice lines & taunts pulled from the taunts system?
  • Changing/New Backgrounds (Not just picking one on startup but cycling through them. Perhaps even animated 'flyovers' or pan-shots of some maps?

Conclusions & Final Thoughts

I really wanted to drive home how important the menu screens are to the overall feel of the game. I've only focused on the Main Menu in this post, but realistically the entire menu system could do with a freshen up, so maybe I'll give them a go in another post.

I haven't changed or removed any features, (and I understand that there's a case for that as well), but that wasn't the focus of this post. I wanted to work with what we've got today but present it in a much nicer and easier to use way. There are some additions to this UI (like the 'Profile' section) but a lot of these are simply combining old functionality together.

Of course, this is just one person's opinion, and yes there are UI skins out there built by very talented people that make the current look & feel half-decent. But I believe it would make a world of difference for the TF team to really have a hard look at the whole menu system and rework it from the ground up so that it would suit the needs of today's players while also helping to entice tomorrow's.

Thanks
  • My friends, family and colleagues who offered suggestions & insights, and put up with my hounding for input, thanks all.
  • Some icons made by Freepik and Google from www.flaticon.com, licensed by CC 3.0 BY