Usability and the new Steam

Today Valve launched a new version of the Steam Client. It has been in open beta testing for a couple of months, and has brought massive improvements to the client. Of course, as with any change, people tend to be resistant to it. However with a new user interface, there are usability issues that many people are now experiencing.

The new Steam Client, in the Store

The new Steam Client

Firstly, Steam is essentially a tabbed interface. In the previous version, there was a visual indicator of these tabs – the buttons to switch tabs look like tabs. In the new version, there are simply 5 massive strings of text across the top of the client, with the text representing the active tab glowing. Clicking on these, switches ‘tabs’. The fact that those strings of text control what is shown in the client is not obvious immediately, rather it’s an association which the user makes after clicking on them. John McCaskey, a software developer for Valve, replied on the forums by saying:

We are certainly aware that the use of typography without tab outlines or such is non-standard and perhaps not as obvious as full on tabs in the main nav area. We went through several iterations on this and settled on the hover glow effect as being pretty effective at communicating that the items were navigation elements and overall feedback is that the vast majority of people are discovering and using them without issue. The barrier for use is also really only one time as a switching cost to the new UI; that is once you learn they are navigation elements once there is no longer any confusion, so we think this isn’t too big of an issue and that overall users will appreciate the more elegant look and feel in the long run.

Tabs in Google Chrome

Tabs in Google Chrome - tabs done right

The problem is, it’s a one-time barrier for use. But that’s exactly the problem, it’s a barrier. Users are typically lazy, and they don’t want to spend time relearning a program they’ve been using for months or years. And while it may have a “more elegant look and feel”, it is not immediately apparent that the user can interact with it. Traditionally, text has been used to display data, and icons, or text with icons, are used to display something which the user can interact with, such as a button or toolbar icon.

This is, in my opinion, one of the reasons why Cocoa Touch has been a huge success. In Cocoa Touch, it is immediately apparent what will do something when you touch it, and what will not. Cocoa Touch is so intuitive that there are videos of toddlers and even cats using iPhone OS. In the new Steam client, there is no such distinction between interactive and non-interactive controls.

Another example is in details view mode of the games list. In the right-hand side pane, there is a row of avatars depicting friends who own the game, and if the user has more friends who own the game than can fit on screen, the last avatar is replaced with a “+18” button (for example), where 18 is the numbers of friends who cannot fit on screen. That button, however, looks nothing like the actual buttons seen around the client, and indeed I only discovered that it was a button, when another user was complaining on the forums that it made the button below it redundant. The new Steam client is not user-friendly, and there is no clear distinction between what the user can interact with, and what they cannot.

Details View

Details View in the new Steam Client

This even extends to the menu bar. In Mac OS X, an application’s menu bar is at the top of the screen, uniform for all applications, and its title bar is at the top of the window. In Windows, the title bar is at the top of the screen, and the menu bar is directly under it. Steam does not respect either of these guidelines in its Windows version. Some Steam windows have a menu bar at the top and no title bar, while some windows have a title bar at the top and no menu bar. There is also no clear visual distinction between which window has a title bar, and which window has a menu bar. The main Steam window has what is evidently a menu bar, as the bits of text which comprise it contain strings which are common to many menus, namely “View” and “Help”. The Servers and Settings dialogs, however, have a title bar, and “Servers” and “Settings” cannot be interacted with. The Friends list is the most confusing, however, as the word “Friends” at the top of the window, which what users presume to be a title bar, is actually a menu bar. I only realised this when I rolled my mouse over it (to get to a different control), and it changed.

Friends list in the new Steam Client

Friends list in the new Steam Client

Additionally, there is no visual connection between a menu, and the menu bar item which opened it. Clicking on a menu bar item causes a menu to appear, however there is a clear gap between the two. Like the tabbed interface, the connection between the two controls is one which the user makes, not one which is made for them.

John McCaskey’s answer to the menu bar was:

Same general thinking goes for the menu items. We’ve saved space by not having a separate title bar area. It’s non-standard, but we think it works and haven’t had much feedback about confusion with it.

So, Valve have saved space in the new client at the expense of usability. I’m sure saving space wasn’t at the forefront of their minds, considering that the first beta release of the new client had massive wasted space issues. (via Sciss0rz)

Valve seems to have forgotten one of the rules of software design: You are not your customer. Whilst the smart brains on the software development team can easily use the new interface – the one they designed – many users are now finding it hard to use. Whilst most of the complaints from lazy users will blow over in days if not weeks – just like changes in Youtube and Facebook – as these users get used to the new client, the fact remains that the new Steam is horribly user-unfriendly and unintuitive, especially for newcomers.

  1. April 29th, 2010

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: