Log in

View Full Version : Interface - Icons or text?


cliffski
11-02-2002, 07:27 AM
Hi, I'm trying to improve upon the quality of my space game Planetary Defense. Currently it makes use of text in the menu, but my text rendering isn't super quality, so I'm experimeting using a combination of Icons and Bubble help instead.
Here is the before and after...

http://www.positech.co.uk/planetarydefence/interface.html

I think the bottom one looks better, but I'm too 'close' to this game to be objective. Does anyone have any opinions on it? Do icons go down better with users than text buttons?
Any feedback appreciated.

Sphinx
11-02-2002, 07:42 AM
Well, I prefere the 1st piccy as it is easier to figure out and navigate thru the game options, you better place the text below the icons tho :)

Will
11-02-2002, 07:59 AM
I quite like the second one, although I'm not sure if it's because the lack of text or because the moon looks better :D.

Fenix Down
11-02-2002, 08:06 AM
I would suggest a combination of both icons and text (shown at the same time). Icons could mean different things to different people, and frankly the only one I recognized to mean what it's supposed to mean was the question mark. Maybe the door sign too. I think it would look good if you put the text on the right of each icon. Tooltips are mainly useful when you have lots of icons. If you only have a few I don't see why you can't just include the text. Just my 2 cents.

Guardian_Light
11-02-2002, 08:21 AM
I'm with Fenix Down on this one. A combination of icons (the ones in the screen shot look real nice =) and text to the right would be best.

cliffski
11-02-2002, 08:36 AM
Thanks for the feedback guys!

lakibuk
11-02-2002, 09:17 AM
The first version is good. You see what the buttons mean at first sight (if you know the english language). In the second one you have to move over the button,which is very annoying.

Addictive 247
11-03-2002, 01:41 AM
I'd go with the first one.

Siebharinn
11-03-2002, 05:27 AM
I like the first one. The second looks too much like a WinAmp skin.

I can see what you mean though, about the text not coming through very well. Perhaps you could make the moons dimmer, and then when you roll the mouse over that option, the moon comes up to it's regular color (and starts spinning) while the text gets bigger and maybe changes color.

Just a thought. Or four.

cliffski
11-03-2002, 05:30 AM
I'm not at all happy with the first one, the moon and text looks awfull. I prefer the second, but im worried its not obvious the moons are buttons. I have my bubble help appearing instantly instead of after a delay, but im still agonising what to do.
It has to be clear, but this is the users first veiw of my game, they have to think it looks cool and not amateurish as well.

elund
11-03-2002, 11:18 AM
When I played the game initially I thought the font looked a little odd too, but I agree with everyone else that the icons are not that clear. It is pretty obvious to me at first glance that they are buttons, but their function takes some muddling out. It's also not immediately evident that point and hover will provide contextual help.

I think I like the blue moons better. The grey is classy but subdued, since it somewhat matches the glow of the title and the planet. A little more color is nice. What's making the text render with such thin horizontal lines? If it's the text rendering API, maybe you're better off pre-rendering the label graphics and just blitting them.

OTOH, I don't think either example looks terrible. Stop agonizing. :D

Chandler
11-03-2002, 03:07 PM
I think the first one is a lot better, but somehow the second one looks a bit more professional.

and congrats on completing this game and being published by RealOne! That's awesome !:)

Jonas
11-03-2002, 05:38 PM
cliffski I think the 1st one is a better start.

Some things that you should attempt though.

Text: If you like no frills type font, try "Verdana" in a bold style in no less than 18 point size. It will probably be more readable that the one you have in the images.

An other important tip to making your text stand out well it to outline it with a contrasting value. So in this case that might be White bold text with a black outline. This will allow you to write over backgrounds that change in value without losing the impact of your text. IE, your text won't get lost in the images behind it.

The easiest way to do this in Photoshop it to use "stoke" in the layer effects. Another way to do an outline is to make 4 black copies of the text underneath the white. Then move each copy one pixel, each layer going a direction.


The layout:
In general I think it works pretty good with the 1st image, however, I recall somewhere along the line that moving in an arc of buttons is easier to do the other way. Try moving the planet to the right side so that the Buttons go toward the top right, bottom left.

Red Planet:
There is a bit of unnecessary aliasing on the red planet. I think also that if you cut the halo out of the planet and then make more red nebula for a background for the dark part of the planet contrast against, it will be more moody and look a bit more cool :)

If you really feel that you need to do an atmosphere on a rocky planet, here is a shot from Viking of mars:
http://thestarstory.uhome.net/photo/mars%20atmosphere.jpg

See how the glow is a reflection of the general makeup of the planet? Probably a pretty good result would be to to an Inner and outer glow that is 3 or so times wider, but about 65% alpha with a color picked from the planet. And it probably should have a much more diminished effect on the dark side of the planet.

Anyway, the options are worth what you paid for them. hope I was some help :)

Hydroaxe
11-04-2002, 01:27 PM
I like the first one better as well. The icons aren't bad, they just aren't intuitive enough at a first glance. Remember that players should spend an absolute minimum of time on your selection screen. I like the blue moons. If you are still agonizing over the text, choose a flashier more graphic looking font and then warp the text just a bit to make it look like it is curving around the moon. Whatever graphic editor you use should make this easy. Try embossing the text, give the text an outer glow like the large planet or even a drop shadow. There are many things you could do to the text to make it look cool.