This week we launched an alpha of our HTML5 slot machine game on Facebook and we ran into our first performance and scaling issues. Our first batch of users were complaining about the game loading slow and sometimes not loading at all. Not good news when you only have a couple dozen people playing.

In this case, our scaling and performance issues were partially technical and partially perceptual. This blog post is about the perceptual and the technical changes we made to improve loading performance.

First the perceptual change.

While images, sounds and code were loading we would show this loading bar. It is an animated gif file, and it basically just goes forever.

It sucks from a usability perspective. The only excuses I have are that I was lazy and I wanted to see if it really mattered to users. It did. So with a bit more effort and more code we replaced it with this.

This is a lot better.

1. Progress bars are more informative and they remove much of the uncertainty. User’s don’t have to second guess if it is working or stalled.
2. It has an informative message at the bottom that updates at different loading stages. The benefits are two fold. First information for the user. Second information to help improve customer support. It is much easier to pinpoint problems when a customer says it is stuck at “Loading Music” compared to “It’s just stuck…”