Don’t Make Them Think: How to Make a Usable Flash Game


Written By MrSun at 8:00 am - Tuesday, August 12th, 2008
Categories: Flash, Game Development

Image by Steve Woods from Stock.xchng“Usability” is a term used many times in web design and development. It basically means the ease of use or navigation that a website has. It also includes some other specifics like design conventions which we will touch on later. An amazing book on the topic is “Don’t Make Me Think: A Common Sense Approach to Web Usability” by Steve Krug, which is what the title of this blog post is based off of. If you can, find the nearest book store, buy it, and study it. It will all be worth it. But for now, let us apply some of these usability ideas to flash games.

Making a Usable Menu System

Menu systems are a common theme that you find in flash games. They vary from incredibly simple to amazingly complex. Both extremes can be done horribly or nicely. Here are some tips for making a usable menu system.

1. Make it VERY OBVIOUS Which Buttons do What

Too often do I see menus where the functions of the buttons are totally vague. You might think that just drawing a sword for a “play” button is pretty obvious, but most of us do not. Most of the time, just a picture to represent a button is not enough. Of course, there are exceptions if the image is commonly used for that function, like a wrench icon for settings, or a triangle pointing right for play.

Even if you really have an amazingly creative menu system using just images, I’m sorry, but that just ain’t gonna cut it. Unless, you use common images that everyone knows the meaning of, then you’re going to add some text. You can either add the words, or add a description of the button when the gamer hovers over it. Don’t make it too long, though, or they just won’t read it.

2. Make VISIBLE Buttons

One of the biggest mistakes that a game developer can make is to put the buttons in awkward places or to make them hard to see. Buttons are the most important part of a menu. They deserve better than this.

There are 3 key features that a visible button must have:

  1. They must stand out from the background
  2. They must be reasonably large
  3. They have an instant roll over effect (no slow animations)

If your buttons do not have even one of these features, then they will be hard to find.

3. Place “Back” Buttons Everywhere

Nothing is more frustrating than clicking the wrong button and then not being allowed to change your decision. This is why you must place back buttons everywhere, even in-game. An even better idea would be to have a persistent main menu. This means that your menu will show up on every single page. Of course, this only one option out of many.

4. Group Similar Buttons Together

Buttons with similar functions should always be grouped together. Often, they should even have an entire page for themselves. Most of the time, after clicking the “play” button, the user would expect either to start playing the game or to choose a game mode or difficulty. In some games, this is not the case. Some developers place all of the game modes on the main menu page, along with the instructions and game options. Sometimes, there isn’t even a “play” button! I do not recommend this, as it often confuses the gamer.

Here’s a perfect example of how not to make your menus. Don’t get me wrong. It’s a great game, but the menu system needs a LOT of work.

Making Usable Instructions

Instructions are possibly the most misused and misunderstood part of a flash game by both parties, developer and gamer. The developer either thinks that the gamer is really stupid, and explains every single detail about the game. Or, the opposite happens, and they barely explain it at all. In most cases, this won’t really matter because the gamer ever actually reads the instructions, they just go on and learn as they play. I made a previous post here on methods to get the user to see the instructions. Now, I’m going to explain how to make the so the gamer actually knows how to play. Here are a few tips:

1. Use Few Words but Larger Text

Making your text larger gives you two benefits. First, it lets the gamer actually see the text without having to squint. Second, it limits the amount the text that actually fits on the page. Nobody likes to read large bodies of text when they’re supposed to be playing a game.

2. Have as Many In-Game Screenshots/Animations as Possible

With pictures, the user can actually see what they’re going up against. Also, they explain so much better than just plain words.

3. Keep it all on one Page

If your instructions are so complicated that they need to be spread across multiple pages, then they need to be simplified. Of course, exceptions go for more complicate games. But, other have no excuses

«
»