as suggested by another thread, I'm working on redesigning the "stats" screens in Charm School. Unfortunately, that particular area of visual design has always been a problem for me... I don't really have a great grasp of what looks good. :)

Anyway, here is the current work in progress - this is very much not finished.

http://irc.wgp.org/users/papillon/newstats.jpg

and for reference, the old version

http://irc.wgp.org/users/papillon/class_screen.jpg

(Anything that hasn't changed between them is probably still in my List Of Things To Do)

Is the gradient nature of the status bars too distracting? As you can see, it can turn into quite a lot of different colors... Do the three different name-fonts help set apart the girls' personalities visually, or do they make it look messy?

To me the whole screen looks a bit messy like this, there are too many colors, too many different fonts and lines and the left and right margin are different.

What I would do is:
- Move the middle part to the left so it is centered on the screen and text + bars are centered under the photos.
- Remove all lines that don't have a clear function (line in the middle and underlinings of the names)
- Make the buttons more uniform (I would have them all the same shape and size), choose the size so that the buttons at the top have the same span together as the total width of the middle part.
- Vertically put the middle text + bars closer together to create some extra empty space for gaps.
- With the extra vertical space make more room between the different elements (top menu and photos, names and properties, buttons and also top and bottom margins).
- I would only use one font (in only a few different sizes/shades)
- Finally, think about the placement of each element on the screen and the distances between them and see if you can make things more uniform.

Looks a LOT better in my opinion. Status bars are a lot easier to read than numbers. But I have to agree with Mike that there're too many colors and fonts. This significantly increases the cognitive load (mumbo jumbo I learned in Human-Computer Interaction interface design class) required to make sense of the screen (in other words, gives users quite a headache when trying to process it :)). I believe the rule of thumb is no more than 3 colors, and 1 or 2 fonts should be sufficient (I'm counting about 4 or 5 right now).

Originally posted by papillon
Is the gradient nature of the status bars too distracting? As you can see, it can turn into quite a lot of different colors... Do the three different name-fonts help set apart the girls' personalities visually, or do they make it look messy?

Using the status bars, I can rank attributes at a glance. This simplifies your UI a great deal, at the cost of some precision (unless you have tool tips that provide the actual precentage). I like it personally, since I can rank the different attributes at a glance, instead of reading through columns of numbers.

If you are going to have color and font represent aspects of the game, I would reccomend a legend of some kind. It isn't obvious what they represent.

Is there a reason you're measuring the strength of an attribute with two visual cues - length of the guage and color? I found it confusing at first. I thought the length meant one thing and the color something different.

Cheers!
Carl

I think it looks good. I really don't mind the variety of colors because I think that fits the charm school theme. The primary thing I don't like is the girl name fonts. They don't at all look like signatures, they just look like mismatched fonts. The same font for each (maybe Alice's) would look nicer IMO. My secondary concern is with the bottom two buttons. They're a little huge with wide side gaps and look less like buttons than the ones above them. Using the same font size seems like underemphasis. I'd try putting the text on a single line and adding bold. Or maybe shrink the exercise/spells fonts and italicize. I imagine that Celtic font doesn't italicize well, though. :cool:

The new version is a lot better, and I didn't have any negative reaction to either the fonts or the colors.

I'd like that the attribute being trained be highlighted in some way (a star at its right or something). Also, if I click an attribute the training mode should change to train that attribute.

Okay, *next* step. (This is going to take a while, isn't it. I do appreciate your help, but I won't be upset if you get sick of this. :) )

http://irc.wgp.org/users/papillon/newstats.jpg

Names now have the same font, centering is better, color-gradient now only applies to the top two stats (Since they are resources and not skills, they're like healthbars - they go into the red to warn you that you are low on that resource and that's BAD.) The skills just stay purple.

Next set of questions - I have a lot of different purples here. Does that blend or clash? (I *never* understood clashing. I was a fashion disaster at school.)

Trying a new possibility for that one row of buttons, obviously, and trying to incorporate the idea of showing which stat the class links to - good? bad?

(And yes, they're still a bit jagged in places, but I can fix that if the idea is okay.) Edit - changed the dark purple to pink. We've got an Easter M&M's color scheme going now. :)

The screen now seems a bit bland and gloomy to me. How about some lighter colors for the stat bars and the training buttons: http://www.geocities.com/bitzidio/newstats.jpg ?

Edit: apparently the link only works after copy-pasting it to the address bar and pressing enter.

I would split the characters screens up so the each have their own screen. I did a little edit to show you what I mean.

They do each have their own screen, actually, but there are also times when you need to see the overview. I haven't even *started* on revamping the individual screens yet. :)

I think the current screen is okay but what really bugs me is the pixelated bottom buttons. They give the whole thing the MS Paint look which I find to be a huge turn off. Nice anti-aliased buttons will go a long way to improving the screen's look. At first sight here's I how I thought of the rest of the stuff:

Background - good, works with the theme.
Character portraits - very good
Status bars - okay but the brown on stamina is kinda gross
Buttons Above - good but maybe make them bigger so the text actually fits.

I would also experiment with putting some icons beside the stats. The gold and month displays pretty much demand a little picture of a sack of gold (make the picture change depending on how much gold is had) and a picture of a calendar respectively.

Originally posted by Crispie_Critter
I would split the characters screens up so the each have their own screen. I did a little edit to show you what I mean.

That looks VERY good :)

Is there a reason for the separator between "happy" and "health"?

Different kind of stat, like I said. The top two are resources - you start with 100%, the level is constantly decreasing unless you rest, and you have to keep an eye on it to maintain it because it's bad if it gets too low (goes into the red, now, which is much easier to notice than 20% was - now you can tell at an easy glance which character is too tired to be sent to work)

The bottom five are skills. They start low, never go down, and (generally) only go up if you make an effort to change them, through training or item purchases. You don't need to keep an eye on them in the same way. There's nothing intrinsically 'bad' about having a low skill stat.

So these things are very different and that's why they're set apart.

Crispie's thing looks fine but not my style, and I'm not in the mood to redo the entire game at the moment. :) Anyway, I've made some changes and I'll let it go at that for a while, until I get my next urge to revamp things. Off to the NEXT project in the queue... :)

edit: Well, it seems to be working! Sales have dramatically picked up, although I can't say whether it'll stay that way. :)

Well, it seems to be working! Sales have dramatically picked up, although I can't say whether it'll stay that way.

Hehe! You've seen? the power of graphics! ;)

(of course you need to have already a good game behind it)