Redesigning the Steam Friends List

One thing that annoyed me about the friends list in Steam is that my username is included in the list of my friends. I am NOT my own friend. Also, I hate having to click those little tiny arrows next to my friends’ names so I can be given the option to send them a message, invite them to a game, join a game, etc… There were quiet a few things that bothered me, so I went ahead a made a mockup of how I’d like my friends list to look and function. A bit of simplicity and minimalism was lost in the process but a lot of functionality and usability were gained. In this particular case we swapped beauty for functionality. The original (left) looks a bit cleaner and more simple but the redesign (right) is more functional and easy to use. There is no right or wrong in the world of design, only what works and what doesn’t work for the target user.

  • A – I moved your avatar + username + online status (whole profile) to be outside of the “friend list box”. It logically does NOT belong there. You should NOT be in your own friends list no matter how much you love yourself, you will not be messaging yourself, joining your own game, or inviting yourself into your own game. So I moved “You” to be above your friends, it also shows ownership, your friends belong to you, so they are underneath you (like a folder tree). Also you are at the top so that you can change your status (online, away, etc…) more easily and you can always see yourself no matter where you have scrolled to in your friends list.
  • B – This white arrow used to be right next to your username, when you clicked it a menu would pop up letting you change your online status (away, busy, offline) and at the end the option to change your display name. Most users are going to use this feature to change their online status, so I moved the arrow down to be next the online status itself, where I feel it belongs.
  • C – This information containing label used to be useless so I color coded it and added more data that could help the user determain how many people where online/in game/available. The first number “4” shows how many available friends you have to work with here, then out of those 4 friends you’ve got 1 who’s “in game” (green color coded text) and 3 who are simply “online” (blue color coded text). Another way of doing this would be to put a label “34 Friends” right above the entire friend container, but below your avatar and username. Then change the [4 friends | 1 in game | 3 online] to [1 in game | 3 online | 30 offline] which would probably be better.
  • D – I completely removed the option arrow that used to be next to your friends’ usernames (see F). I hated this arrow, It was tiny and hard to click when you were in a hurry, yeah you could double click on someone’s profile to send them a message but how are your users suppose to know that? (see F)
  • E – Combined [in-game] + [Left 4 Dead 2] to just [playing Left 4 Dead 2], there’s no reason for information like this to take up 2 lines.
  • F – The most important change is the showing of most used actions right underneath your friend’s username and online status. The whole point of opening up your friends list is NOT to stare at it, but to send someone a message, invite them to a game, or join their game. So why make people click on little tiny arrows to do those 3 actions over and over again? I just put those actions right out in the open, if they are clickable I underlined them (sorry for the blurry underline, Photoshop’s “Sharp” anti-aliasing {used to mimic clear-type windows anti-aliasing} does that) if not then they get no underline and are darkened. Another option is to only make these options apear when you mouse over that perticular friend. That way the list still looks clean but you still get those easy to access options.

Alternate Options

  • C & F can be further altered: on the left all the chat/join/invite options have been darkened and only show up enough to let you know they are there, when you mouse over a friend they become visible, and on the right they are completely invisible until you mouse over a friend.
  • Also at the top, the “4 FRIENDS | 1 IN GAME | 3 ONLINE” Label (on the left) can be refined to something like “1 IN GAME | 3 ONLINE | 30 OFFLINE” (on the right). I’m not sure which is more useful to the user though.

So there you have it. A little bit added, but a lot gained, and added for good reason. Now if only Valve would re-render our avatars so that the green/blue/grey borders had less of a distracting gradient, and get rid of the inner shadow on the avatars, it just makes it look blurry and mushy in my opinion.

I was going to blur out my friends’ names but I realized all of this is public info, all their usernames and avatars are accessible on their public steam accounts and they can change these anytime they want, so I left them as is.


  1. josh cooley says:

    Nice, I also am a UI designer, and one thing I always think of is how if your friends change their screename and avatar you cant tell who your friend is anymore! I suggest adding a feature that allows you to see your friends name. Or, for privacy, something like Josh C.

    • I HATE that too. That’s the one thing that really bothers me about the Steam friends list, is how often some of my friends change their names.

  2. D1G1TALD3ATH says:

    Super nice! I would love to have this!