Making Isometric Social Real-Time Games with HTML5, CSS3, and JavaScript

Chapter 3. Interface Considerations

There’s much more to building a great-looking game than just laying out buildings on a grid. A working game requires ways for users to communicate with the game, and as games move toward mobile delivery, that need for communication changes. User expectations of mobile devices are often different from their expectations of desktop computers, and the devices themselves add new complexities.

GUI Design and Interaction in Web Games

Graphical user interface (GUI) and human-computer interaction (HCI) are extremely critical areas in application development but are sometimes overlooked by developers. Companies and applications such as Apple, Google, and Facebook were able to become successful in part due to their excellent design usability guidelines. They require consistency, simplicity, responsiveness, and minimal design across all their products. Of course, video games (including ours) are no exception to this rule, but there is one big gotcha that you need to keep in mind: unlike other sorts of applications, our GUI has to be comfortably usable on both desktop and mobile devices.

Knowing this, we can work out a simple set of recommendations to follow when designing it:

• We can’t rely on mouse hovers to give feedback or to present tooltips. Touchscreens have only two states: either you are touching the screen or you aren’t.

• Having no tooltips means that icons and buttons must communicate very clearly what they are going to do.

• We can’t rely on right clicks ...