What a Difference Spacing Can Make: Redesigning Steam’s Spacing Issues

Spacing is powerful, when it’s there you don’t notice it, when it’s gone something feels off. Every day when I load up Steam to play a game for a few minutes I’m overwhelmed by the hideous spacing issue in the Games Library list. The list of games has almost no spacing to the left of it, which gives it an awkward feel. Almost like the list is squished up against the left side. This lack of space keeps my eyes from comfortably scanning the first few letters of each game like I normally do and instead I have to fully read each title. I’ve noticed this over the months as my games list has grown.

Eye tracking technology has shown over and over that people skim downward through lists by focusing their eyes on the first few words in a line of text then moving on. Aslo wehn we raed we dno’t atuclaly pay anettiton to evrey slinge ltetter of erevy wrod, but isntaed fucos on the fsrit and lsat lteetr. So when the first letter of a word doesn’t have adequate space the eyes have a harder time automatically recognizing the word. Take a look…

The lack of space (left sample) in front of game titles is subtly pushing the eyes away from the first letter of the title, where-as the middle and right sample have space in front of the game title and are easier to read. Another thing to keep in mind is white space and lines. The right sample has too much space in front of the game titles and creates a gutter of space that can be distracting to some eyes. At first look you’re probably not going to notice it. It isn’t until you start scanning up and down the list, reading the titles to yourself, that you realize the middle list is easiest to read. But the right is also acceptable.

The horizontal space between the gray line and the beginning of the game title should be the same as the vertical space between Game Titles.

Most people don’t notice it because they aren’t trained to notice it and will think I’m trying to bullshit them. Go to twitter, google, and facebook, and look at the spacing between paragraphs, the spacing between tweets and search results, the spacing between status updates. Proportional spacing is important. It can be a little off, it doesn’t have to be exact but you get the idea.

To be fare the last one isn’t too bad. If it had just a little less spacing it would be perfect, because the spacing in front of the games titles would be proportionate to the spacing between the bottom of one title’s letters and the top of the lowercase letters of the title beneath it. Something I overlooked when I made the middle sample. Sorry.

And now for the biggest offender. Here is the “List” view of the games list in Steam.

(above) It’s discomforting on the eyes to have to read the titles like that. So lets give them some spacing.

Now, the spacing doesn’t have to be proportionate in this case, this would actually be the best solution (above), the game titles have spacing yet are still close enough to their pictures so that your eyes can easily glance back and forth. The readability is adequate for what we’re doing.

Of course if you wanted something extremely readable you can go with the above spacing. Although it doesn’t look as good because the game titles are farther away from their pictures. This level of readability is not needed, people aren’t going to spend 3 hours looking through their games list so we don’t have to worry about their eyes getting strained.

Sometimes we have to sacrifice what looks nice for readability and other times we sacrifice readability for what looks nice. It really depends on the situation.

Hopefully, you enjoyed this post and understood why these changes where made. At this point, any type of spacing is better than the lack of spacing the game titles have. It’s something that’s bothered me since the design was released and I hope it gets fixed soon.

* Dear Grammar Nazis, I’m sorry for using the words “proportionate” and “proportional” interchangeably.
* Also, Dear Hypocrisy Detectives, I realize that my own blog breaks some of these “spacing proportion” guidelines, but I am “really fucking tired of dicking around with WordPress’ messy css” and refuse to hunt down 7 seperate css selectors that somehow collectively control the margin or padding on one element. Oh, how I look forward to the sweat release of death one day.

1 Comment

  1. Skywalker993 says:

    I’m looking for a way to alter the vertical spacing between game titles. I downloaded the Windows 8 skin and have been making edits to make things fit properly and comfortably; I found how to space the text horizontally, off the side of the window, but there is too much space between titles and it’s wasting space. Do you know where this value can be changed? I’ve searched about 30 .layout files in the resource folders.

Leave a Reply

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