I'm working on the UI for my game, now, and I'd appreciate any and all feedback you all would care to give. This is not an area I'm particularly adept at, but I know the level of polish on the UI has a major impact in how fun the game feels, so I want it to be good. First off, the main menu: I think this should be fairly self-explanatory. The green brackets light up when you mouse over them and play a tone when clicked. Down at the bottom you can see the current course you've selected to play and the patterns that are in that course. One of the patterns is currently playing out in the background. I'm still sorting out font issues, trying to find royalty-free fonts that match the style I'm going for, so the game title in particular is still a placeholder. However I'm fairly happy with the font being used for the high scores. Now the in-game screen: On the left we have the number of lives and two meters, one for charging up a new bomb, and the other for the player's current rank. These dim if the player flies over them, so they shouldn't get in the way. The text inside the meters is pretty dull, though. The score and score multiplier are very bare-bones at the moment, and while I have some vague ideas for how to snazz up the multiplier, I don't have anything concrete yet, especially since the multiplier is unbounded (a perfect player can get an arbitrarily high multiplier). Finally, here's the help screen: Mostly here I need feedback on layout and text. If anything seems poorly-worded, please let me know. Thanks for any feedback you care to provide!

The only thing I would suggest is that on the main menu screen, it's a bit hard to see what's going on with all the red and blue circles. Perhaps you can fade them out a bit? Maybe when it's actually animated it's easier to follow, it's a bit hard to tell from a static screenshot.

I think you need to declutter a bit, maybe like the above poster said, you can fade down the pattern in the background.

Other things, pick a better font like you said, something a bit more futuristic or war like. Possibly something thats mock russian. Add some art somewhere, like a logo for the fleet you are flying for or a rendering of a spaceship.

You could make the spaceship a bit better as well, its nice already but perhaps a bit to round, although thats personal taste.

Lastly, pick out a better color scheme; blue red and black is uninteresting. Personally, I think an electric blue and white with some accent colors (brown or pale green perhaps), would attract the eye more and clean up the image.

Let me know if you want to see what i'm talking about, I can mock up a color pallet or an image for a splash screen.

I mocked this up, it took me about 15 minutes. I was just trying something and went with it, anyways its very busy, but more flashy which can be a good thing, or not.

Also, I dont know why I put SDR on the ship, its got nothing to do with anything except that I figured the ship should have the initials of a military force on it.

<br/>

Wow, that does look a lot better. Thanks!

I do want to be showing a demonstration of the current course in the background, so yes, the background in my first screenshot's animated. But I should fiddle around with adding some backgrounds, and make the buttons less plain -- and changing the color scheme sounds like a good idea too. What are your thoughts on having the highscores table on a different "page" from the main menu?

The spaceship was made in about thirty minutes in Blender, and I agree, it could be a lot better. Problem is, I've never been happy with any of my spaceships that's gotten more than thirty minutes' worth of effort. Just something for me to work on, I guess.

Well, I'll get cracking on this feedback and come back with more shots. Thanks again! This is all very helpful.

Quote: Original post by Derakon
I do want to be showing a demonstration of the current course in the background, so yes, the background in my first screenshot's animated.

Instead of fading the demonstration to the background as suggested (which would be the natural choice if it's merely ornamental) you could instead make sure it doesn't interfere with the important controls and text, or with the HUD in the in-game screen.
For example:
- get rid of the high scores: a new menu item can display them without the animation or in a opaque "dialog" that hides it;
- move the course description to the bottom right, about as wide as the buttons above;
- restrict the animation to a viewport that goes from the bottom left of the window to below the title and left of the right panel containing buttons and text;
- in game, the gauges for bombs and rank and the verbose 2-line text are a waste of space and an ugly interference: put the same data outside the game viewport (top and bottom or right margins of the window);
- you can replace in-game text with much more compact icons (the traditional little ships and little bombs) and simply less text (e.g. "x6.26 000326 0.39" with the numbers in the screenshot, in different colours and/or fonts and/or sizes; are you sure you need to display rank at all?).

If you want to redesign your buttons, consider framing and linking together the playfield/demo viewport, the buttons and the other panels such as help and high scores with coherent GUI decorations, like those in Starcraft or Raiden III. In the current state, the uninterrupted black background is ambiguous: diegetic void of space behind ships and bullets, or extradiegetic arbitrary colour that goes well with white text and green brackets?

Hah! Pretty much everything you described, I've been working on doing for the past few days. Let me provide some updated screenshots; I'm not done yet, but I think I've made some good progress.

First, in-game screen:



The two circular meters on the left are for rank (outer) and bomb charging (inner). In other words, every time the outer circle closes itself, you advance a rank, and every time the inner circle closes itself, you get a new bomb.
Below that, of course, is your life count.
In the upper-right is the score multiplier and meter, and the current score. The meter advances to the right; every time it fills, your multiplier increases by one. I've just gotten a 2x multiplier here, which started a special effect (the large faded 2). There are some situations where you can rapidly increase your multiplier, which makes this area look rather blurry. :)

Now, the main menu (edit: replaced with a version with better graphics):


This is still unfinished; I can't for the life of me figure out what to do with the buttons, and I feel like there should be some kind of background here. The highscores are obviously fake. You can see my first foray into hand-lettering in the upper left, and again in the splash screen:


I've gotten some criticism from friends for the logo being hard to read. That's understandable, but I'm not certain how much it should be an issue -- how important is it for a logo to be legible vs. interesting? Of course ideally it would be both, but this is far from my area of expertise and there's limits to how much time I want to spend fiddling with letters. At the same time, I don't want to just slap a font down and have done with it.

[Edited by - Derakon on February 3, 2009 9:00:05 PM]

Maybe just put some kind of bloom/outline on the game name (maybe a bright bitmap behind it). I mean most of your game is black and your title is in dark grey.

Other than that, nice update. Looks way better.

I don't like the font type and I personally wouldn't be expecting itallics, excepting (maybe) in a help screen for a certain word, or a side note comment.

I think the font needs to be more bold, because the screen looks too empty with this one.