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.

72 Comments

  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!

  3. 1 says:

    Wait! How quiet are the things that bothered you?!

  4. Great blog post.Much thanks again. Much obliged.

  5. Great, thanks for sharing this article post.Really thank you! Awesome.

  6. Appreciate you sharing, great blog.Really thank you! Really Cool.

  7. Im grateful for the article post.Really thank you! Really Great.

  8. Enjoyed every bit of your article.Thanks Again. Really Great.

  9. Muchos Gracias for your post.Really looking forward to read more. Cool.

  10. I value the blog post.Thanks Again. Want more.

  11. index says:

    Fantastic article. Really Cool.

  12. I appreciate you sharing this article.Much thanks again. Cool.

  13. I really enjoy the post.Thanks Again. Much obliged.

  14. tutorial says:

    Im obliged for the blog.Really thank you! Awesome.

  15. Very informative article.Thanks Again. Great.

  16. A big thank you for your blog post.Really looking forward to read more. Cool.

  17. Im grateful for the article.Much thanks again. Really Cool.

  18. Im obliged for the blog post.Thanks Again. Will read on…

  19. Really enjoyed this blog.Really thank you! Really Cool.

  20. Hey, thanks for the article.Really thank you! Keep writing.

  21. I loved your article post.Really thank you!

  22. A round of applause for your blog article.Thanks Again. Cool.

  23. Thanks so much for the blog article.Really looking forward to read more. Cool.

  24. You sure know what you’re talking about. Everyone is going to soon be visiting your site.

  25. I am so grateful for your post.Thanks Again. Great.

  26. I really can’t believe how great this site is. Keep up the good work. I’m going to tell all my friends about this place.

  27. This site looks better and better every time I visit it. What have you done with this place to make it so amazing?!

  28. Talking to this blonde beauty is much more fun than playing the lottery!

  29. Im grateful for the blog post.Really looking forward to read more. Great.

  30. “Thanks for your article. I have continually noticed that a majority of people are needing to lose weight since they wish to show up slim as well as attractive. Even so, they do not generally realize that there are many benefits to losing weight as well. Doctors insist that over weight people experience a variety of disorders that can be instantly attributed to their own excess weight. Thankfully that people who are overweight plus suffering from different diseases can help to eliminate the severity of their illnesses by simply losing weight. It is possible to see a continuous but identifiable improvement with health as soon as even a slight amount of fat reduction is obtained.”

  31. “I have observed that in video cameras, specialized detectors help to target automatically. The sensors involving some camcorders change in in the area of contrast, while others employ a beam associated with infra-red (IR) light, specially in low lumination. Higher specification cameras sometimes use a blend of both programs and likely have Face Priority AF where the photographic camera can ‘See’ your face as you concentrate only in that. Thanks for sharing your thinking on this blog site.”

  32. Major thanks for the blog article.Really looking forward to read more. Keep writing.

  33. This is a wonderful website. The site owner has carried out a superb job of putting it together, the info here is really insightful.

  34. Looking forward to reading more. Great article post.Thanks Again.

  35. This is one awesome article.Much thanks again. Awesome.

  36. Fantastic blog post.Really thank you! Great.

  37. Wow, great article post.Thanks Again. Will read on…

  38. Muchos Gracias for your blog.Really thank you! Will read on…

  39. A big thank you for your blog post.Really thank you! Keep writing.

  40. wow, awesome blog article. Really Cool.

  41. A big thank you for your post.Much thanks again. Cool.

  42. I loved your blog post.Really thank you! Awesome.

  43. Thanks again for the blog article.Thanks Again. Want more.

  44. Appreciate you sharing, great post.Really thank you! Want more.

  45. “I’m not sure where you are getting your info, but great topic. I needs to spend some time learning more or understanding more. Thanks for magnificent info I was looking for this info for my mission.”

  46. Very informative blog post.Really looking forward to read more. Much obliged.

  47. dildos for says:

    Great blog article.Thanks Again. Want more.

  48. Very neat blog.Really thank you! Fantastic.

  49. “ItВЎВ¦s really a nice and helpful piece of information. IВЎВ¦m satisfied that you simply shared this helpful info with us. Please keep us informed like this. Thank you for sharing.”

  50. Im obliged for the post.Thanks Again. Awesome.

Leave a Reply

Your email address will not be published. Required fields are marked *