Well you’ve finished your most excellent latest flash game all that’s left is to stick on a menu screen. 5 minutes later with a picture in the background, slap a few bits of text around and the jobs done, sweet.
I despair sometimes, there are some great games out there with truly dreadful menu design. OK it’s not going to make it a better experience, and the game play is the most important thing but it really doesn’t hurt to put a bit of effort into making the menu as good as the actual game.
Using Consistency
So what is a good menu system ? One that’s easy to use, where everything is consistent. Take “City Smasher” for example, a great game by syrplord and fluidAnim. The game itself is a brilliant 10 minute basher, the menu on the other looks alright but is completely inconsistent and confusing.
So whats wrong? Firstly it took me ages to work out how to play the game. The first thing you see is the title “city smasher” but otherwise the most noticeable link is “play more” – no, TRY AGAIN! I finally worked out that I had to click on one of those mode buttons, but by this stage I was really bored. I suspect that despite the brilliance of the game potential players will have given up before this discovery.
Call me old fashioned but I expect it to be clear where the buttons are, some items are click-able, some are just text. If you want a button in a game, maybe make it a button, if you use text for buttons it’s hard to work out what’s what. In City Smasher the same fonts have been used as both buttons and text, which is highly annoying, be consistent. On the web people are used to clicking on buttons, if it’s a text link its usually underlined or a different colour, or at least try and make it clear.
Button Design
So what makes a good button design. Well firstly here’s some tips:
Fonts
The one on the left is a pretty awful button but what makes it worse is for some reason the text is set to dynamic so it will turn off anti aliasing on that font. Which makes it look all horrid and jaggy. Even worse is that the dreaded “Times New Roman” has been used, it looks hideous, don’t do it.
If you aren’t going to use Times New roman choose a font which is readable, you may have some ultra cool font which looks great when large but pick something which is easy to read when its small. Bolder fonts are better for small items like buttons as they are great for readability.
Rounded Corners
I’m a fan of rounded corners, they look great, but if you do them with the flash rounded box tool and want an outline make sure you “turn lines to fills” flash has a few problems drawing rounded curves to straight and you’ll invariably end up with kinks and they look horrid.
Colour Pallete
With colours there’s a fairly simple rule with UI design, try to use as few as possible, if you can get away with one main colour it looks better, its much more stylish to be minimal in your use of colour, it will stop your art turning into a psychedelic nightmare.
Filters
Flash 8 has some great new filters for things like drop shadows/glows etc. They look great but don’t over do them. The start on the left is the usual “oh the default will do” looks a bit harsh. The one on the right is a nice subtle variation.
Of course if you don’t want to use buttons (and a lot of games don’t) try and pick a clear font, Heli boarding does this a great job of using just text, mainly because there’s no clutter. Also rather than scattering text all around the screen the menus are in a column with the most important thing at the top. Although rather oddly the button you are over fades out rather than being highlighted, another thing which quite a lot of games do.
Well that’s about all for now, remember the menus and buttons don’t make a game but they are the first thing people see and first impressions do count.
