Help Me Out!
polycounter lvl 11
'Took some time this weekend to make a mock-up of something that's been bothering me at the back of my mind for a long time - making a UI for a personal project of mine. I'm not a UI person, so the whole how and why was really getting to me. It's something I'd have had to tackle sooner or later, so I just decided to bite the bullet and give it a shot.
I started by looking at UIs of games I really liked, and asking why they made the practical and aesthetic decisions that resulted in those UIs. I then stole what I could. The result was me screwing around for a couple of days making what you see below.
So, what do I need your help with? Below is an image of about one-half the UI with alphabetical labels applied. I need you to match the numbered items in the list below with the labels as best you can.
Which is the:
And below is a mock-up of how the whole thing would look...
Questions? Crits? Great Thoughts? Suggestions?
Thanks for your time.
I started by looking at UIs of games I really liked, and asking why they made the practical and aesthetic decisions that resulted in those UIs. I then stole what I could. The result was me screwing around for a couple of days making what you see below.
So, what do I need your help with? Below is an image of about one-half the UI with alphabetical labels applied. I need you to match the numbered items in the list below with the labels as best you can.
Which is the:
- Hit Point Gauge?
- Character Portrait?
- Selected Weapon Indicator?
- Mana/Super Meter?
- Ammunition/Ammo Type Indicator?
- Stamina Bar?
- Victory Indicator?
And below is a mock-up of how the whole thing would look...
Questions? Crits? Great Thoughts? Suggestions?
Thanks for your time.
Replies
1) C
2) A
3) E
4) B - because out of the options left it makes the most sense
5) F
6) D
7) G - because out of the options left it makes the most sense
The victory indicator is a bit weird, unless that was given as an option,
Maybe it makes sense in the context of the game, but without knowing that the feather icon is a bit weird.
The mana meter is also a bit weird, I have no idea in what direction that fills up, and when it would actually be classed as full. (because of the portrait being in it + the 4 controller icons).
I figured that the feathers were victory icons and I don't think they are too big of a problem if you just sit down with this game and play it, it might take a round or two and then I bet most players would get it. But having said that, I could see them as like a single-charge thingies for some power or something. Perhaps you could make the empty icon for the Victory marker a ink bottle like in this: http://www.theballroomblog.com/wp-content/uploads/2012/06/quill-pen.jpg and when you win one round, you just plop in the pen you already have.
Only other thing I can think about is the ammo counter. On the right hand side it is kinda hard to see if you have 4 bullets and it is a full magazine or 4 bullets in a 5 bullet magazine. Although, upon closer glance you see that the empty slot is for other gun in the background but still, I think you could probably make that thing a bit easier to see and read!
Just my thoughts~
2.A
3.E
4.D
5.F
6.B
7.G
The book/feather gives me the idea that it has something to do with writing so I thought that maybe option B was stamina (as in stamina for writing) and that you would hit the buttons as the stamina fills up.
The part that throws me off is the weapon/ammo. It confused me when I saw it because at first glance I didn't notice the deselected weapon but it was very easy to notice the ammo that belonged to it. Maybe desaturate and lower the opacity even more.
Although, it seemed weird to me that there were weapons included in something that looked like it had to do with writing.
Personally, I think that there is a lot of meters in the one area. Usually there is some kind of give and take with stamina/mana/ammo and those sort of things. For instance in first person shooters, I have to pay attention to health and my ammo but my stamina doesn't have a bar and only takes effect when I start running. Although, he stops on his own rather than making me pay attention to how much stamina I have.
Through your feedback, it became painfully obvious that wins weren't being conveyed the way I wanted. Maybe it's because I called it a "Victory Indicator" instead of "Downs." *Shrugs* I dunno. Anyway, I think the suggestion of adding the inkwell was a good call. Though, the way I implemented it was a bit different. As the player loses a round, the indicator disappears - leaving an ink spatter. The idea behind it is that only the victor may tell the story (hence the blank pages in the books).
I also modified ammunition indicator. I changed the position and saturation of the inactive ammunition to improve readability. I also added a bit of a glow to the active ammunition panel to help reinforce which type of ammunition is currently being used. There are two different types of ammunition, and I think to reinforce that, some kind of label had to be applied. So, I labelled them - though I'm thinking that the label should only show up on the active ammunition. I wish I could think of some way to further differentiate the two ammunition types without resorting to using words, so any suggestions on doing that would be appreciated. Also, any suggestions on making it obvious that the ammunition is independent of the weapon would be appreciated.
Mana/Super Meter... I think you guys were right. So, I made the "Filled" portion brighter to help differentiate it from the "Unfilled" portion. I think desaturating the unusable button indicators was a good call. I also added some glow to the usable buttons.
Is there anything I forgot?
Im also having a hard time understanding how the Stamina bar(the one with the buttons) works. it looks complicated with the button layout but maybe with an explanation it will make a little more sense.
A good way to indicate ammunition types is through color. i know you don't want to resort to words but maybe if you handled that prior, such as a tutorial portion of the game, then you can leave it out and let those who want to learn on their own have a go.
Finally, maybe highlighting the active weapon and active ammunition with a different color could help. Those are just a few suggestions.
Make the weapon indicator and ammo incidator on the bottom corners of the screen oder atleast under the character portraits. Link the ammo icon with the weapon visually
Im not sure about the feathers. And whats that behind them , ink ? Cannot really read that, let alone that thing where no feather is, looks like the earth with ink on it
A simple point indicator would do fine
The major thing with your frame is that it is not good looking. The visuals are
not on a good level to be honest.
Do not do such harsh gradients. Never go from a cold color to a warm color like this,
The poison green on the green bar cannot stay.
Same as the turquise on the blue bar. Way too strong. The colors just dont fit together
The books and paper do not really make sense and are in a completely different style. Your bars are minimalist while this is realistic. Your layer styles are not looking good.
The white glow looks just bad and misplaced. The styles on the timer need a complete rework. Get rid of all thin white strokes and glows and put something better. I dont see any other white in your frame. The gradient on the timer is "ok" , the font is ok too but could rock a lot more
The font for the names dosnt fit and is too small by far , either settle for serif or sans serif
Why is there an intense black stroke around the 2 bars, but only a tiny one around the blue bar and why do they end in a small drop shadow in the middle ? Stay consistent
Also what is this thin grey line around the blue bar ?
Putting colored playstation buttons in the ui makes it even harder finding a good color sheme.
Also i heavily suggest you pick up a color palette that works together
https://kuler.adobe.com/#
2) Obviously A)
3) E
4) B (this one isn`t obvious for UI element IMO, but maybe because it`s static now)
5) F
6) D (i feel like stamina should be yellow - but maybe it`s just me overplayed Diablo II)
7) G (Why feather?)
Overall feeling - too many colors, in my opinion.
Thanks. I think you may have a point about a few things.
@Shrike
Thanks for the comprehensive crits (and the link to that color scheme gizmo)! For the most part, I found them useful.
@pior
Wow. People can come up with some outlandish stuff. For the record, I'm stealing that idea. Thanks.
@Sali
Thanks.
I took a day away from this project to approach it with fresh eyes, and to think about what I want from this UI. The first attempt is below.
I stripped everything down and switched the colors of the HP and Stamina bars, just to give it a try (hey, green HP and yellow Stamina worked for Monster Hunter). Strangely, I'm not too keen on the switch, but I don't feel terribly strongly about it either way. The "poison green" is gone in favor of a bright yet slightly more muted green.
In this iteration, the weapon indicator was stripped out (I figure it could probably be handled on the character), yet the ammo indicators were kept in the same position. My reasoning for that is this: having to look to see how much ammo remains should be a penalty. I want users to count their shots. Moreover, I kept the red on that ammo type indicator because it's especially "effective."
I got rid of the inkwells, but elected to keep the quills. Considering that I want to go with a Darkstalkers 3 -style down system, players should be able to notice that one of them disappears when the HP gauge runs out.
All-in-all, I don't terribly mind the changes made in that iteration. However, I fell in love with the idea of having those books there.
Second iteration. When I fall in love with something, I usually try to find a way to make it work. *Shrugs* Whaddayagonnado?
So, as far as I could tell, there were a couple of problems with the books. The presence and position of the books and paper made them feel like disparate elements. Also, the minimalist gauges felt disconnected from those elements. After a bit of thought, it hit me: put a paper texture on the gauges. Also, I added other pages to "link" the timer page and books so they wouldn't seem so isolated. (Though, looking at the preview for this post, it seems that I'll have to darken the pages a bit more...)
I also realized that since I'd gone to great pains to design the weapons with different silhouettes, it might actually be better to use their silhouettes than the full art of the weapon. Figured I should at least try that.
As for the font, I wanted to try "Bradley Hand" for some reason - and I rather like it. I'd previously tried "Century Schoolbook" and stumbled upon the font Arc SW seems to use in the BlazBlue games.
There are a couple of things I still wanna try, should I find the time to do so.
- I'm thinking of making the Quill icons realtime 3D elements similar to the books to increase cohesion.
- I'm also considering making an inkwell to go underneath the timer. Just to try it.
EDIT: Fixed on the last iteration.
Thanks, garriola83! You gave me an idea. When unavailable for use, the button is not only desaturated, but it also shrinks in size.
I can't seem to figure out how to make the names bolder as "Bold" doesn't show up as an option for that font in Photoshop...
First off, friendly warning, I am very familiar with falling in love with an element of a piece but I will definitely argue that you will end up with stronger pieces if you are willing to cut literally any part. I'm not saying you should cut anything in particular but I find it helps me to evaluate pieces on their own merit. For the books, I think they bring an interesting theme but they don't provide much use at the moment. My first thought on a potential change/streamline was to integrate the character portrait into the page of the book. A win could be marked as an ink checkmark below their name or something. This would consolidate three separate elements down to one which would help make things cleaner. Plus you could have thematic fun with it, like after the final loss the losers book could slam shut or burst into flame or something.
I also don't want to run on too long but my color advice would be too make sure your elements read well at a glance and from a distance as someone playing your game (a fighter I'm assuming) would only be able to spare quick glances so easy reads are key. Also make sure to test your colors for color blindness legibility, its a definite nicety but will also keep you honest
Hope that helps and was clear enough, keep up the good work, definitely interested to see where you head with it!
http://colorschemedesigner.com/