• Hey Guest! Ever feel like entering a Game Jam, but the time limit is always too much pressure? We get it... You lead a hectic life and dedicating 3 whole days to make a game just doesn't work for you! So, why not enter the GMC SLOW JAM? Take your time! Kick back and make your game over 4 months! Interested? Then just click here!

Constructive criticism needed please . . . How clear and concise is this GUI to you?

otterZ

Member
Hi guys, hope you and your families are staying as safe as possible at this time.

I would really be interested in your feedback / constructive criticism about the GUI in a game I'm making. What do you think of the design and is it clear and concise? Anything confusing or unclear or could be improved? To really test the clarity of this GUI I'm not even going to tell you anything about this game or even the name of the game, that's unimportant - just focusing on the clarity of the GUI here.

What do you like or dislike about this GUI? Anything that could be improved or is unclear or doesn't fit right?

Thanks guys as I've been working on this game for months now and you will see things I can't see for sure because I've kind of become lost in the game if you know what I mean.
 
Last edited:
H

Homunculus

Guest
The first thing I notice is that it's a bit inconsistent in style. Some buttons / elements are rounded while others are square or semi-rounded. The colors all over the place as well. Some texts are not aligned (Total excercise time and Hours / Mins are not in line with anything vertically, for example). I also see some aliasing problems, the checkmark and lock icon borders look jagged, as well as the blue filled buttons on the left.

I'm also not a fan of the extremely saturated colors you used in the time selection buttons and the green on / off switches. Overall, my main problem as said is consistency between colors, shapes, and spaces though.

Hope it helps!
 

otterZ

Member
The first thing I notice is that it's a bit inconsistent in style. Some buttons / elements are rounded while others are square or semi-rounded. The colors all over the place as well. Some texts are not aligned (Total excercise time and Hours / Mins are not in line with anything vertically, for example). I also see some aliasing problems, the checkmark and lock icon borders look jagged, as well as the blue filled buttons on the left.

I'm also not a fan of the extremely saturated colors you used in the time selection buttons and the green on / off switches. Overall, my main problem as said is consistency between colors, shapes, and spaces though.

Hope it helps!
Thank you Homunculus for taking the time to give me great feedback. It is amazing how valuable advice is from someone seeing something from another view point. Yes, the text is out of line - I can correct this in time, good point. Aliasing problems I never thought about so I'll look into that. A lot of other good points too.

The most helpful observation you made was about inconsistency between shapes, colours and spaces. This is something I can work on to improve. I even copy and pasted your comment and put it on my 'things to improve' list (which is getting longer and longer).

This helps a lot. Thank you again :)
 

NightFrost

Member
I'm not sure everything needs to be on the same page... you can often see stuff like this separated to pages or tabs you can quickly navigate back and forth, and you can eithe changer the settings or just press a "START" button. If the game would automatically save statistics after every exercise, you wouldn't need a "SAVE&QUIT" button, just a "QUIT" button. Most of the stuff on that screen would be something you'd see after selecting "PLAY" from title screen; options like "QUIT" would be also be on titlescreen, as well as option to view your total statistics where the "RESET" button would also be (statistics in their own room would also give you room to display a more detailed breakdown). Similarly, "INSTRUCTIONS" and "DIET IDEAS" sound like they should be options on the title screen.

Simplest way to paginate content would be to create a separate room for each content group. You could use a single room too, but you'd have to write a manager that displays and lets player operate only some of the UI content at a given time.
 

Jezla

Member
I would also add that it would look better if you didn't use elements such as the check mark or lock to indicate selected or locked-out option. With your button style, it seem more natural to me to use color changes to indicate button state (black or bright blue for neutral, dark blue for selected, grey for locked).

Otherwise, I agree with @NightFrost that many of the option groups should have their own page.
 
I'd agree that the check mark seems out of place with the rest of your GUI. I would use some sort of border around the selected button, although the suggestion of color change for selected elements, either for the entire button or just the text within, could work too. I personally don't have any problem with the locks, except perhaps that the color of the locks is a little too similar to the color of the text. A darker blue or gray would be better.
 

Joe Ellis

Member
I feel like there's no guidance,
normally certain parts are made bolder or more striking so that your eyes
get drawn to those first, then the sub parts that belong to those are below
and are contained inside those sections

The Level Selection, Time Selection and Location Selection should be the biggest texts,
and you should add another title for the Strength Exercises, Abs/Core Excercises..
called "Exercises", and remove this from each one, so they're Strength, Abs\Core, Flexibility & Balance and Tips
And I'd get rid of the "Selection" word, just use Level, Time, Exercises, Location

Then once those parts (The most important) are layed out, put the start save quit buttons to the right
of the screen out of the way, so once the player has finished selecting the options
they'll look there cus they're less bold and important looking, and above the buttons
you can display the Total Exercise Time etc. as these are just statistics that
the player might want to look at before playing again


All this is just advice, it might not all be the best thing to do,
it's just what I would think of doing if was in your position
 
It's a good start, but kind of noisy. I would try to standarise the colours and fonts used rather than the mix you have now.

And maybe draw boxes around the various groups of buttons that belong together to make it easier to understand the groupings.
 

Rob

Member
One of my first thoughts was that maybe too much information was being packed into one screen.
If you separated the info and maybe had some text that described in detail what stuff did, that might be better.
Maybe the GUI will be obvious to the player without descriptive text but I don't have any other suggestions ;)
 

Yal

šŸ§ *penguin noises*
GMC Elder
I agree that there's too much info for one screen, I would split it up into different stages if possible (first difficulty selection, then exercise + duration selection, then location) and have "back" buttons that lets players go back if they think they selected the wrong thing at some point. If you handle the entire menu as separate object instances at the moment, you could achieve this pretty easily - make the room several screens tall / wide, and spread the objects out so they don't all fit in the view at once, and then scroll the view when they pass to the next stage of the menu. (Scroll in increments of an entire viewport for simplicity's sake).

This would also free up some screen space for things like future DLCs / new game modes, explanatory text for the exercise types, previews of the location, and cool decorative graphics to get the player's blood pumping.
 

otterZ

Member
. . .you wouldn't need a "SAVE&QUIT" button, just a "QUIT" button.
Thanks Nightfrost, yeah I totally agree with not really needing 'Save & Quit' - just a 'Quit' button would be fine. Having different settings separated into different rooms is an interesting idea. There would be more scope to add different features and it would be less chockablock.

The reason I was trying to get all features on one single screen was to try and make it a kind of 'load 'n' click Start'' single interface, with the least amount of clicking around - ie less distractions when the motivation to workout is there.

Separating the features out into separate rooms is a really interesting idea that I will give a lot of thought to, especially due to the fact that I will add more features in time - so I may not have any choice but to separate the interface into different stages. Great idea.

I would also add that it would look better if you didn't use elements such as the check mark or lock to indicate selected or locked-out option. With your button style, it seem more natural to me to use color changes to indicate button state (black or bright blue for neutral, dark blue for selected, grey for locked).
That's an interesting idea, thanks Jezla.

I'd agree that the check mark seems out of place with the rest of your GUI. I would use some sort of border around the selected button, although the suggestion of color change for selected elements, either for the entire button or just the text within, could work too. I personally don't have any problem with the locks, except perhaps that the color of the locks is a little too similar to the color of the text. A darker blue or gray would be better.
Thank you for your feedback HeWhoShallNotBeNamed, yourself and Jezla have a good point about the check marks and also the lock / colour of the locks. I will think on this and could maybe do a 'makeover' of the GUI in an update. I will channel my efforts into getting more exercises into the game first as a priority (I have around 136 exercises, including left and right variations, but I would like to bump that number up to 300+. Then polish this interface with your suggestions guiding me.

I feel like there's no guidance,
normally certain parts are made bolder or more striking so that your eyes
get drawn to those first, then the sub parts that belong to those are below
and are contained inside those sections

The Level Selection, Time Selection and Location Selection should be the biggest texts,
and you should add another title for the Strength Exercises, Abs/Core Excercises..
called "Exercises", and remove this from each one, so they're Strength, Abs\Core, Flexibility & Balance and Tips
And I'd get rid of the "Selection" word, just use Level, Time, Exercises, Location

Then once those parts (The most important) are layed out, put the start save quit buttons to the right
of the screen out of the way, so once the player has finished selecting the options
they'll look there cus they're less bold and important looking, and above the buttons
you can display the Total Exercise Time etc. as these are just statistics that
the player might want to look at before playing again


All this is just advice, it might not all be the best thing to do,
it's just what I would think of doing if was in your position
This helps a lot Joe - great ideas. Guidance and clarity are arguably the most important things to consider for a GUI. Even if it looks nice visually, if players get frustrated and confused and feel lost - then the GUI is ineffective.
Wow, it's really amazing what things other people can see if you open your mind to suggestions. That is something I can work on to improve clarity.

It's a good start, but kind of noisy. I would try to standarise the colours and fonts used rather than the mix you have now.

And maybe draw boxes around the various groups of buttons that belong together to make it easier to understand the groupings.
I agree with both of those observations Indianabones. Standardising the colours and fonts plus putting boxes around groupings of related buttons would definitely help to make it less noisy. This will help with clarity in particular. Really helpful ideas there, thank you.

One of my first thoughts was that maybe too much information was being packed into one screen.
If you separated the info and maybe had some text that described in detail what stuff did, that might be better.
Maybe the GUI will be obvious to the player without descriptive text but I don't have any other suggestions ;)
Thanks Rob, that is a good observation, being able to provide information on what each button/area does is another reason to seriously consider separating out the GUI into different screens/rooms.

I agree that there's too much info for one screen, I would split it up into different stages if possible (first difficulty selection, then exercise + duration selection, then location) and have "back" buttons that lets players go back if they think they selected the wrong thing at some point. If you handle the entire menu as separate object instances at the moment, you could achieve this pretty easily - make the room several screens tall / wide, and spread the objects out so they don't all fit in the view at once, and then scroll the view when they pass to the next stage of the menu. (Scroll in increments of an entire viewport for simplicity's sake).

This would also free up some screen space for things like future DLCs / new game modes, explanatory text for the exercise types, previews of the location, and cool decorative graphics to get the player's blood pumping.
Thanks Yal, some really great ideas there. The main feedback message in general from your comment and other comments is that this screen really needs to be 'uncluttered' and separated out into maybe 2 screens/rooms, or like you said, make it scrollable even.
The fact that this would allow room for different game modes is a great observation, as I have plans to incorporate a different game mode after I've polished the whole game (along with the GUI).
Decorative graphics to boost motivation is an idea I've never even considered . . . yeah that would be fun to incorporate too. I have put motivational quotes that display randomly every time the game starts, but motivating players by using graphics is a great option.
This community is so helpful when it comes to straight up honest feedback, as friends and family are sometimes reluctant to tell you about things that could be improved. I have found one thing that works nicely though - I show the game to friends, and of course they give me encouragement which is nice, but then I say 'There's something wrong with it though that I need to fix. Can you spot what it is?' Then, whatever detail they point out you can then reply 'Exactly!' This way friends don't feel bad for criticising and you can find out what really needs to be improved upon with that new found constructive criticism.
Wow! A lot of food for thought there.
 

BQubed

Member
I haven't read everyone's replies so I apologize if I echo someone else.

My first impression when glancing at it was that it was a lot on one page. It kind of sets me up to expect this to be a complex game like a flight simulator. That being said, when I stopped and read each thing one by one it was all rather clear to me; however, everyone is different and people tend to be a little impatient when first trying out a new game. Instead of putting all this stuff on one screen, I'd divide it into several sequential screens that present each option like so:

Difficulty > Duration > Exercises > Location & Start

On the bottom of the screen I'd also include Quit/Reset as two persistent buttons so that if a player decides to quit halfway through this process (for whatever reason) they don't end up feeling annoyed at having to quickly select stuff in order to get to the quit button. Same logic on the reset button.

If the player sprite serves no purpose in this GUI then I'd say remove it completely. The player will get more than enough time to stare at their sprite during gameplay, so unless there's a reason for it (ie. she gains/loses weight visibly) then that space could be better utilized.

I'm not sure what instructions/diet ideas shows you precisely, but I think there are probably other locations in your game that would be a better home for them. I see nothing in this GUI about food intake so maybe place the diet ideas info bubble wherever the player will consume food. Instructions could be placed somewhere accessible during gameplay.

The Bootcamp Rank and quote are far too large for something that only has aesthetic value and no functionality. The ranking could be shrunk down and relocated, and if you want even more space efficiency then you could also make it so the quote pops up when you hover your mouse over the ranking.

All in all, my suggestions may not fit well with the game you're trying to make, but hopefully something here helps or gives you an idea.
 
F

Fihril Kamal

Guest
I don't know, but it seems every option in one screen at once seems pretty overwhelming to me.
 

otterZ

Member
Great points BQubed, this really helps - really good points and a lot of tips on how to make use of space more efficiently. When I overhaul this GUI I'll try to follow a colour palette too and try to make everything more uniform.

Yes, Fahril Kamal, pretty much everyone has said the same too, in that I'll have to 'unclutter' the GUI in time and separate it into several screens. Good point. I agree.
 

Bawat

Member
There's way too much on screen at once for me.
The player doesn't need to see all the locked out levels.
If you show maybe 4 levels on screen with an arrow for scrolling right and left through them, then you'd be able to focus the user's eye on the important details, and you'd future proof your level selection gui - because as it stands, if you want to add a new locked level you can't.
Also, it's easy to see that the colours are just the defaults that a paint program gives you, you'll need pick a theme and choose maybe 3 colours that work well together and be consistent with them.
On a different point, some shadows would really help bring out the the things you can click - communicating to the user that they can click them.
Lastly, when I design pages, I try to think about how a spanish person who really really wants to play my game but doesn't speak english would use it.
A lot of us english natives are bad at reading too, so I try to replace as much text as I can will illustrations and visual explainations.
 
I agree with the tab idea. You can probably control what is drawn on screen by checking the image index of a tab sprite and doing if image_index = 1 draw tab a, if image_index =2 draw tab b, etc.

A preview/thumbnail of the location would also help, whether it be in its own separate little window or just filling up the button graphic.
 

otterZ

Member
Thank you Bawat,
I agree about there being too much at once on a single screen.
Showing a few levels but having the ability to scroll to different groups of levels to future proof the level selection is a really neat idea - I like that. It never even crossed my mind to have this as an option.
About the colours . . . yes, Homunculus also said that he wasn't keen on the colour scheme and I have been looking at colour swatches/palates lately, yes 3 colours that go well together would make it visually more appealing.
I like your approach to GUI design, as in including as much visual cues as possible rather than text, for a number of reasons which you mentioned.
I think this thread is interesting, not just for the really helpful ideas on how to improve this particular GUI, but also because you get to see other people's approach to how they go about envisioning a solid GUI in general.
Great ideas!

Jsnye_Machworks - yes, a preview/thumbnail of the location is a really neat idea. I like this idea.
 
Top