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.

79 Comments

  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.

  2. eebest8 says:

    “At this time it seems like WordPress is the top blogging platform available right now. (from what I’ve read) Is that what you are using on your blog?”

  3. saiba mais says:

    Appreciate you sharing, great blog. Awesome.

  4. I really liked your blog article.Really thank you! Much obliged.

  5. Major thankies for the blog. Really Cool.

  6. luck says:

    Major thanks for the blog article.Much thanks again. Fantastic.

  7. Major thankies for the blog article.Really looking forward to read more. Awesome.

  8. Im grateful for the blog article.Really thank you! Awesome.

  9. I really liked your article post.Thanks Again. Cool.

  10. I cannot thank you enough for the blog article.Much thanks again. Fantastic.

  11. I really like and appreciate your blog.Really thank you! Much obliged.

  12. free says:

    Hey, thanks for the post.Thanks Again. Fantastic.

  13. Hey, thanks for the blog article.Much thanks again. Want more.

  14. Thanks for sharing, this is a fantastic post.Much thanks again. Will read on…

  15. Really enjoyed this blog post.Much thanks again. Much obliged.

  16. Thanks a lot for the blog article.Really thank you! Want more.

  17. I really liked your blog.Really looking forward to read more. Cool.

  18. I appreciate you sharing this article.Thanks Again. Want more.

  19. Enjoyed every bit of your article post. Want more.

  20. Awesome post.Thanks Again. Really Great.

  21. Learn C++ says:

    Very neat article post.Really looking forward to read more. Keep writing.

  22. I truly appreciate this article. Much obliged.

  23. “Thanks for the article.Really thank you! Will read on…”

  24. “Wonderful web site. Plenty of useful info here. I’m sending it to a few friends ans also sharing in delicious. And naturally, thank you in your sweat!”

  25. Looking forward to reading more. Great blog post.Really looking forward to read more.

  26. “Im thankful for the blog post.Really thank you! Great.”

  27. “Thanks for sharing, this is a fantastic blog post.Thanks Again. Fantastic.”

  28. “Good day! I know this is kinda off topic nevertheless I’d figured I’d ask.”

  29. Saunawenik says:

    “Thanks for great information I was looking for this information for my mission.”

  30. Appreciate you sharing, great blog.Much thanks again. Great.

  31. “I really enjoy the article post.Really thank you! Will read on…”

  32. Thanks for sharing, this is a fantastic blog article.Really thank you! Keep writing.

  33. Very informative article post.Thanks Again. Keep writing.

  34. Muchos Gracias for your article post.Much thanks again. Keep writing.

  35. Say, you got a nice blog.Thanks Again. Awesome.

  36. I think this is a real great article post.Really looking forward to read more. Keep writing.

  37. Thanks for sharing, this is a fantastic article.Really looking forward to read more. Want more.

  38. Fantastic blog article.Really thank you! Want more.

  39. Great, thanks for sharing this post.Much thanks again. Fantastic.

  40. I value the blog article.Much thanks again. Will read on…

  41. I really like and appreciate your article post. Will read on…

  42. Thanks so much for the blog.Thanks Again. Will read on…

  43. slim dildo says:

    Appreciate you sharing, great blog.Much thanks again.

  44. “Wow, this paragraph is good, my sister is analyzing these kinds of things, thus I am going to inform her.”

  45. Major thanks for the post.Really looking forward to read more. Want more.

  46. “I hope to give something back and aid others like you aided me.”

  47. Hey, thanks for the blog. Really Cool.

  48. Im obliged for the article post. Really Cool.

  49. I am so grateful for your blog post.Much thanks again.

  50. “I loved your post. Awesome.”

Leave a Reply

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