Simple set of settings panel buttons

[Ultra Magnus]

Hello people.

I'm finding it tough to come up with ideas for my game's settings panel.
Here's what it's like so far...



The icons were liberated from a free clipart site.
I don't pretend to be anything of an artist. 8)


Aaaanyway...
The sliders are self explanatory, but here's a run-down of the left side, top left -> bottom right...

Toggle music on/off, toggle arrows* on/off, restore default settings
Save game, load game, reset/restart game
Exit game, continue playing

(There's also a red circle that goes over the music icon, just like the one that's over the arrow.)


So, what do you guys think?

I can't think of anything that could visually represent "continue", and I'm not particularly happy with the "default" or "reset" icons either.
There is a separate status-line that tells you what each of the buttons do as you hover the mouse over them, but I'd really like for that to be used only as a backup; i.e. for the icons to be readable on their own.

Does anyone have any ideas that could make it more... good?
Also, how about the layout? Do you think the buttons' positions are alright, or should I shuffle them around a bit?


Thanks in advance for any input.
J.


* The game has optional arrows that can be overlaid onto the room screens to help show where the exits are, in case you were wondering.

[Babar]

The Reset/Restart icon is actually an 'off' symbol (or power symbol). I'd think it'd be more suited to the Quit button, no? I'm not sure what the symbol for Reset is, but Google brought up this. It doesn't really seem familiar enough to have it as a standard, so if you get a better idea, you might go with that.

I'd suggest having the buttons/symbols all having a consistent colour, like all green, or all blue, but without seeing what kind of game it is, I couldn't say.

Also, instead of 'Continue', you could have a little red X in the top corner of your GUI, I think that is the standard way of doing it.

[Ultra Magnus]

The Reset/Restart icon is actually an 'off' symbol (or power symbol).

Yeah, I know.
It's usually green for "power on", and red for "power off", right?
So I thought using an orange one could possibly mean "reset".
As I said, I'm not really happy with it, but that's why I'm asking for help.

As for the continue being a little "x", I'd prefer for it to be a big chunky button like the others, really.
It's arguably the most important button on the panel, because without it the player is pretty much stuck and can't continue playing, so I'd like it to be big and noticeable.

I am using this icon to mean "yes" / "okay" for a few other guis, so maybe it'd work as "okay", as in "I've finished tooling around", with this one? I dunno. It seemed a little... tenuous to me.

[Dualnames]

Well, first the outline is rather good. What I didn't like:
-Save and Load, they seem really flat and don't really match the rest.
-That green button as well
-Continue should be replaced as well. (an arrow like the one of return in your browser might do it.)
-The sliders' default should change as well.

[Khris]

How about using some music icons:
-Reset:  |<<
-Quit: eject symbol
-Resume: |>
Save & Load could be a red laser burning a CD with sparks flying and a blue, weaker laser reading it, respectively

You can also add a label and set its text to whatever the button under the mouse does.

[Ultra Magnus]

-Save and Load, they seem really flat and don't really match the rest.
-That green button as well

It'll be really easy just to add a bit of depth to them in photoshop.
That's a really good call, and it was something I simply didn't think of.
Thanks for suggesting it.

-Continue should be replaced as well. (an arrow like the one of return in your browser might do it.)

The continue button doesn't even exist yet. That's the main reason why I started this thread.
What's there is just a place holder to show roughly where and how big it could possibly be, maybe.

Also, I'm already using an arrow very similar to browser nav ones as the button for the arrows, so that could get confusing.
Although, you did draw my attention towards the page refresh icon, which might make a good "restart" button... Hmmm...

How about using some music icons...

I thought about that, but I figured it might make it tough to pick out which button(s) actually control(s) the music at first glance.

However, it does sound like it'd be wicked cool, and it's actually given me a really good idea.
It'll be a bitch to actually pull off, though.

Actually, I seem to actually be using the word actually a bit too much, actually.

You can also add a label and set its text to whatever the button under the mouse does.

Yeah, I know, but I figured since I already had the status line, I might as well use it for this as well.
Is it possible to do scrolling text within a label or button, do you know? Because that might be cool.


Thanks for the feedback, guys. Including Babar, who I forgot to thank before.
Keep it coming.

[Khris]

Is it possible to do scrolling text within a label or button, do you know? Because that might be cool.

Yep, possible, but would require some scripting. And a fixed-width font.

[Ultra Magnus]

Yep, possible, but would require some scripting.

I figured it would. 8)

[Ultra Magnus]

Bit of an update following people's suggestions...

alts:

Instead of just one "continue" button, it now has a "save changes and continue" button (the tick) and a "continue, but don't save changes" button (the cross).

Better?
Still not finished, mind, but am I at least maybe heading in the right direction?

[AlbinoPanther]

I think that it's finished now! It's much better then the first one!

Don't waste your time on details that way you will never finish the whole project.

[Shane 'ProgZmax' Stevens]

Is this for a silly game?  If so then I'd say the font and buttons work.  If it's a serious game, I'd go with a less-cartoony font at the very least.  Also, you might want to make some of your own slider buttons since they look very plain right now.  The blue arrow doesn't convey meaning in an intuitive way (I'm not sure I know what toggling 'arrows' does), though the rest of the icons are all quite good.

[Ultra Magnus]

Thanks for the feedback.
I'm glad you guys like it so far.

* The game has optional arrows that can be overlaid onto the room screens to help show where the exits are, in case you were wondering.

Yeah, it's a pretty damn silly game based on a kids' TV show (the link in my sig), so lots of bright colours, big clear controls, etc.

The slider handles do still need doing, that's what I meant by "still not finished", but I'm drawing a blank.
Also, there must be a better icon for "default settings" than just a cog.

Any suggestions?

[Khris]

A suggestion for the default settings button:



This clashes a bit with the current design, I know, it's just a 5 minute piece to show my idea.

[Ultra Magnus]

You really like the idea of using music symbols, don't you?

Anyway, that's a pretty good idea, actually showing the default settings within the button.
It'll take some tweaking to make it fit in, make it obvious it's a button, etc.

But I like it.
Thanks for the suggestion.

[zabnat]

This might be a bit off topic, but I had problems with the tick (ok) and cross (X) marks when I was younger. Because at school on the tests they marked a V (for wrong = Väärin) when answer was wrong. That V looked very much like a tick mark since it was done quickly with a pen. And on the other hand the X marks were used to indicate something was ticked. I'm just saying that those icons are not always universal.
I would suggest to color code them (green tick and red X) to help us ignorant people from strange countries.

[OneDollar]

You asked for input on the layout, but everybody's discussing icons at the moment so I thought I'd offer my opinion.

I don't like it. A bank of 9 symbols all thrown together just looks confusing if you ask me. Personally I try to separate options into groups with similar functions, then order those groups depending on how much they affect the game - major changes at the top and tweaking options at the bottom. I threw together a very rough edit to demonstrate what I mean...



*I put the save, load, restart and quit buttons all together at the top because they're 'system level' type options, ie they are the most powerful and affect the state of the game

*Music and volume come next because they're probably the next most likely to be changed, and they're also pretty important from a game point of view. I moved the music muting button to the end of the music slider because it controls the same thing, and added an equivalent button that mutes sound effects. The buttons are at the right-hand side so they seem more like clickable options than just pictures to indicate the slider's function. (If it were me when coding the interface I'd also interlink the slider and button functions, so that when you click the mute button the slider's value is set to zero, and when you move the slider to zero the button changes graphic to the muted state).

*Next comes the gamma level (which I'd rename 'brightness' but that's up to you - and maybe less accurate) because its also a slider and fits in with the order - its a visual change rather than a system change, but it can result in you not being able to see anything. I've also (quickly and badly) resized the slider to fit to the width of the interface, rather than matching the music and sound sliders, because it doesn't have a button.

*The arrows option is a bit of an odd one, which makes it hard to place. You might want to put some text to the left of it, or possibly move the music and sound mute buttons down there. Alternatively invent some other graphical tweaking options?

*Finally there's the Apply, Restore and Cancel type buttons, which I've put at the bottom and in the same order you'd find the on other programs. If you mirror layouts of programs the user might be familiar with they'll find it a lot easier to understand your interface.

*One other thing I would mention (and I haven't added) is that because your interface relies so much on icons you might want to stick a text box right at the bottom that displays tooltips for whichever button the mouse is currently over.


This is all my personal opinion, but hopefully you'll find some of it useful

[Ultra Magnus]

This might be a bit off topic, but I had problems with the tick (ok) and cross (X) marks when I was younger. [...]
I would suggest to color code them (green tick and red X) to help us ignorant people from strange countries.

That's a very good, logical suggestion.
Not just in aid of you foreign types, but it'll make them more instantly distinguishable for everyone.
I'll have to shuffle stuff around a bit so the green tick isn't directly next to the green exit, but it's well worth doing.

Thanks for the feedback.

Personally I try to separate options into groups with similar functions, then order those groups depending on how much they affect the game

This is exactly what I had in mind when I asked about the layout.
However, while I certainly appreciate your mock-up, there's way too much dead space for my liking.
I've got a thing about having stuff neat and tidy, equal distance apart, and symmetrical to at least some degree.

(If it were me when coding the interface I'd also interlink the slider and button functions, so that when you click the mute button the slider's value is set to zero, and when you move the slider to zero the button changes graphic to the muted state).

The reason why I put the music toggle switch in at all is because volume at zero != silent.
However, it looks like CJ might be about to change that, so maybe by the time I finish this game it won't be necessary.
But I do like that idea about using the button it as a shortcut to moving the slider by hand, so I may leave it in and tweak it to do just that.

One other thing I would mention (and I haven't added) is that because your interface relies so much on icons you might want to stick a text box right at the bottom that displays tooltips for whichever button the mouse is currently over.

As I said, I've already got a status bar that is coded to say what's under the mouse, but you're not the first to suggest this in this thread, so maybe I should disable that while the gui's open and replace it with a varying label within the panel window?
I think that may be a good idea, actually.

You've certainly made me think of a possible alternative setup, so I'll tool around with it and see what the reaction is.
Thanks for the suggestions.

[Ultra Magnus]

How's this'n?

[ALPHATT]

It's the best so far, but OK and Cancel should be next to each other.

[OneDollar]

Its quite a bit better. I get what you're saying about dead space, and that's a fair enough comment, but I'm still reading that quit, restart, ok, revert and cancel are all the same 'group' of options. How does a simple separator look?