Redesigning Steam’s In-Game Overlay UI

I actually think the current in-game overlay is decent but for me personally it’s too chaotic. Informative but messy. So here’s a few mockups of a redesign I was working on for a while.

The Original

I like:

  • How informative it is, the 4 most important things (friends, news, achievements, screenshots) aren’t hiding behind tabs, but instead are shown in blocks
  • Having a clock

I don’t like:

  • Managing windows in the overlay. Little by little it happens, you open your friends list, then you open an IM to a friend, then you open the browser and it covers up everything else. It gets messy very quickly.
  • How information is so spread out and all over the place.
  • Text that is right aligned. It’s just a personal thing. Here it’s used properly. Still, I’d rather have the Game title in the upper right corner have left aligned text and be in the left hand corner of the overlay than where it currently is right aligned.
  • Seeing the seconds on the clock, because it’s too much information and it takes an extra moment for my eyes to scan the numbers and recognize the time. We’re not used to seeing seconds like that. Most people aren’t used to seeing the seconds at all on a digital clock. Seeing an extra 2 digits is awkward. Then again it might come in good use. If anything shrink the size of the seconds to be the same size as the “AM”.

I wish:

  • There was a timer next to the clock that would tell me how long I’ve been playing.

So I basically reorganized it into tabs. On one hand the informative previews that the blocks offered is gone but there’s also no more window management. If you want to move around and resize windows, it’s still possible as you’d be able to detach windows from their tabs and move them around.

The Redesign (4 versions with different headers)

Keep in mind, I had to push all the elements close together to fit them so these mockup images wouldn’t be too large. In reality this layout would have a lot more room to breath.

Here’s a closer look at the differences and explinations:

  • Consistency based organization used
  • name of game first, then clock, then Steam settings, then my account info
  • Account info is on the right because that’s how it is in the Steam client

  • Hierarchy based organization used
  • It’s all about you first, then the game title you’re playing, then the time & timer, and last the settings

  • Account info completely removed because it’s unnecessary. This isn’t Xbox Live. Switching between accounts in-game isn’t possible.
  • I moved the account info (with avatar and online status) down into the friends window.

  • Usage based organization used
  • Personally, I activate the overlay to look at the clock. I’ve never actually clicked the a game’s “game groups, cd key, website, forums” links in game.
  • I’ll be favoring this last version.

Keyboard Shortcuts (2 versions)

  • This was just an idea for powerusers, people who are very familiar with the overlay or use it all the time to launch their friends list or the web browser.
  • I prefer the black keys
  • There are 3 other key style but they all sucked and I didn’t post them.
  • F, C, A, and W can all be reached with the left hand while holding shift so it works out well.

The Final Version (includes tab for the new Screenshots feature)

  • I decided against using the keyboard shortcuts because they took up space and I needed extra horizontal space in order to fit the new Screenshots tab.
  • Besides when you’re playing games your hand is on the mouse at all times anyway so it’s not like the keyboard shortcuts are saving you a significant amount of time.

I personally like this design over the original but I do miss the informative blocks. Maybe I’ll mockup another redesign to fix this. What do you think?

4 Comments

  1. Hello there,
    I just read all your posts. I think you have really awesome ideas!
    If I were you I would submit my portfolio to Valve and get a job there(that’s one of my dreams actually)
    So my question is: are your Steam and Windows redesigns real or just prototypes and if they are real, could you send them to me? I’d really like to use them. Ever since the Steam UI update came out I can’t get used to it! The ones you’ve done really seem to get all the frustration out of Steam. The other thing is, the “Facebook connect account” thingie button isn’t working for me.
    Yours sincerely,
    Me.

  2. Steven says:

    I really like your designs. I dislike the current steam in-game overlay. When I’m in a game, the friends list is the most important thing, everything is a distant second.

  3. Gruouchypus says:

    INCREDIBLE!! but- is there source code for this AND is it usable? from what I understand, VALVe has not released the src packages to gameoverlayUI.

  4. TheDarkySide says:

    Oh my Gosh is very beatiful.

Leave a Reply

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