Applying Graphic Design to the Info Bar

[freim]

Of all the mock-ups I like Eleazar latest the best.

I agree, it looks very nice and tidy.

[Eleazar]

At some point in this thread someone has proposed that nearly every word be changed to an icon. While i do think it could benefit from more icons, i think that an infopanel composed mostly of icons would be pretty intimidating to those unused to it. Because of the abstractness of some of the concepts, many of the icons won't be understood, unless you already "know" what they mean.

...It would be a non-trivial rewrite of the code to put the attack icons in front of them....
don't put status icons on the unit-image.

It's good to know what the technical limitations are. How easy is it to change the space between lines of type for different lines?
What kind of icon placement is trivial?

I don't feel bad about dropping the attack icons, as shown in my last example. They currenlty don't express anything that's not in text. Looking back, i think there are better ways to integrate them. If they can't be used, i think DFool's indentation would be good to add to my color changes.

i hadn't included DFool's advancement icons, because a first i forgot about them, and i haven't yet wrapped my brain around how they mesh with everything else.

You have to be careful about relying on color changes because a lot of people are color-blind.

Please observe that my proposed changes rely very little on hue (redness, blueness etc.) and mostly on differences in brightness. 90% of what i'm proposing will be equally obvoious to the colorblind.

[Darth Fool]

A couple of things. FIrst off, the pictures I showed were not mock-ups, but in game shots. They show what can be done almost trivially, and in fact have been committed to the trunk for the dfool theme (indentation of attacks will take place for default as well).

At some point in this thread someone has proposed that nearly every word be changed to an icon. While i do think it could benefit from more icons, i think that an infopanel composed mostly of icons would be pretty intimidating to those unused to it. Because of the abstractness of some of the concepts, many of the icons won't be understood, unless you already "know" what they mean.

Agreed. Things like MP could also be confusing however. I am thinking of changing it back to movement

...It would be a non-trivial rewrite of the code to put the attack icons in front of them....
don't put status icons on the unit-image.

It's good to know what the technical limitations are. How easy is it to change the space between lines of type for different lines?

Within the attack list, not so easy. between other items (abilitiies, traits, etc...) it is straight forward as these are seperate reports that can be moved anywhere on the screen.

What kind of icon placement is trivial?

Adding an image representing a label (like replacing MP with feet) can be done in the WML config. Having an icon representing something dynamic requires changes to the C++ code, but nothing too difficult. Placing the icons anywhere that there is not another Rectangle containing other reports is trivial. Having them on top of another Rectangle that has information in it that gets updated will cause graphical glitches without a major rewrite of the core C++.

I don't feel bad about dropping the attack icons, as shown in my last example. They currenlty don't express anything that's not in text. Looking back, i think there are better ways to integrate them. If they can't be used, i think DFool's indentation would be good to add to my color changes.

Yes. I have not abandoned the idea of color changes, it is just that currently more functionality needs to be added to the theme/report system before it can be done. I don't think that it is too hard, it just was not trivial to do.

i hadn't included DFool's advancement icons, because a first i forgot about them, and i haven't yet wrapped my brain around how they mesh with everything else.

You need to start playing in the dfool theme then I think that you will like it. The advancement icons are probably most useful in campaigns where units regularly get to higher levels, and not as useful in single player where high level units are rare, and high level units that amla are practically unheard of.

Also, I do like my move of the advancement icons next to the level report. The two are conceptually very tightly coupled, so it is good that they are graphically near to each other.

You have to be careful about relying on color changes because a lot of people are color-blind.

Please observe that my proposed changes rely very little on hue (redness, blueness etc.) and mostly on differences in brightness. 90% of what i'm proposing will be equally obvoious to the colorblind.

You are correct. Again, I hope to add color options to the theming system, but it is a little less trivial then just doing indents.

[khamul]

Is it possible to re-arrange the attack text, so that instead of

Foo strike ( impact )
foo
7-3 melee

You have

Foo strike: 7-3
melee (impact)
foo

It seems to me that attacks and damage is most important, and should be in the most obvious place, and that the damage type is associated with the type of combat (i.e. melee/ranged) and should be placed near it.

[Jetrel]

I strongly think that color changes, rather than bolding or indenting, are the way to go.

You have to be careful about relying on color changes because a lot of people are color-blind. As long as you don't depend on people being able to distinguish different colors, it should be ok.

Shame on me. I should have pointed out that the most significant changes that Eleazar made were to luminosity, not color. Fortunately, anyone who can see at all is capable of discerning differences in luminosity.

Having the subsections dimmer than the headings is the primary differentiation that Eleazar uses. The different colors for different sections are an added bonus, and do, themselves, help quite a bit.

Also, FWIW, I found DF's version a lot more readable than Eleazar's, and I'm not even color-blind. But maybe with brighter colors, it would be better.

I strongly disagree with this. It is the fact that Eleazar separates his text sections by luminosity that makes it easier to read, certainly for me, and, after certain difficulties I had months ago, I've done tests to figure out where my monitor is in the gamut of computer screen brightnesses. If the dim text is too dim on your machine, then your screen may have a strange gamma curve - incidentally, wesnoth has a means of correcting that, so it isn't a problem.

But fundamentally, it is because subsections are dim and headings are bright that makes his easier to read.


Either way, though, we're really getting the best of both worlds, here, so there's no argument.

[Eleazar]

You need to start playing in the dfool theme then I think that you will like it.

I don't see any options in preferences. How does one change the theme?

[Darth Fool]

You need to start playing in the dfool theme then I think that you will like it.

I don't see any options in preferences. How does one change the theme?

Well, there should be an option in the head of the trunk, although Ott reports that it seems to cause crashes on Macs . You can also use the ":theme" command to bring up a theme chooser. The theme will not take effect until the next game you start or load.

[Dave]

IMO what we want here is a small change. Ideas for redoing the unit panel have been around for years (literally), but what's nice about Eleazar's proposal is that it's so brilliantly simple to implement, and yet looks so good.

With a large change you can get a large improvement, but it's also easy to expend alot of effort and the new interface to be found to actually be worse. But with Eleazar's proposals it's a clear improvement with little effort. So I say we try to implement his.

His latest one with the icons is a little more difficult to implement, so I think we can leave it to whoever implements this to decide whether to use it. One thing I would like is if the icons used a transparent background instead of black.

So, who actually wants to implement this? Darth Fool or Yogi, are you interested?

David

[Darth Fool]

IMO what we want here is a small change. Ideas for redoing the unit panel have been around for years (literally), but what's nice about Eleazar's proposal is that it's so brilliantly simple to implement, and yet looks so good.

With a large change you can get a large improvement, but it's also easy to expend alot of effort and the new interface to be found to actually be worse. But with Eleazar's proposals it's a clear improvement with little effort. So I say we try to implement his.

His latest one with the icons is a little more difficult to implement, so I think we can leave it to whoever implements this to decide whether to use it. One thing I would like is if the icons used a transparent background instead of black.

So, who actually wants to implement this? Darth Fool or Yogi, are you interested?

David

I am happy to continue pursuing making the changes. I presume that mostly what you mean is the incorporation of color (well, luminosity) into the reports to distinguish between more and less important information. This should be relatively straight forward for most things by simply adding a new font_color option to the themes. The attack report, however, will require a little more sophistication as the report is generated as a whole, so some work will need to be done in how the report.cpp and display.cpp communicate these issues.

[Woodwizzle]

Don't change the luminosity too much. There are certain people who cannot detect small ammounts of contrast and so it would be invisible to them. Instead use a combination of color (hue) for the majority of us, and indentation and a slightly smaller font size as well as a subtle change in luminosity. Then everyone should be ok from an accessibility stand point, and it'll look good to everyone else as well.

[Jetrel]

Don't change the luminosity too much. There are certain people who cannot detect small ammounts of contrast and so it would be invisible to them. Instead use a combination of color (hue) for the majority of us, and indentation and a slightly smaller font size as well as a subtle change in luminosity. Then everyone should be ok from an accessibility stand point, and it'll look good to everyone else as well.

I think that Eleazar's original proposal was quite sharp, and I'd trust his design instincts more that I would, say, those of some of our code folks.

He is, after all, a professional in the design field.


I think Dave and I are in agreement about this - let's start by implementing the color change business, and then possibly go on from there.

[Eleazar]

Thusly endorsed, i post RGB values for DFool's convenience. I'm not confident that the color values remain unchanged via the forum.

Icons could be a further improve certain aspects, but probably in a different method than my previous post. Let's ignore that part of my proposal for now.

HP,MP,XP lable grey: 180,180,180
Darkest MP,XP value: 128,128,128 (Assuming this will lighten to white as the number rises. Otherwise use the following grey.)
Level,Traits,etc. grey: 165,165,165
Attack Name: 245,230,193
Attack Description: 166,146,117

I think the DFool's indentation is a good thing, as well as Khamul's suggestion:

Foo strike: 7-3
melee (impact)
foo

This order would tend to keep text from overflowing the panel, at least in English.

[Darth Fool]

Thusly endorsed, i post RGB values for DFool's convenience. I'm not confident that the color values remain unchanged via the forum.

Icons could be a further improve certain aspects, but probably in a different method than my previous post. Let's ignore that part of my proposal for now.

HP,MP,XP lable grey: 180,180,180
Darkest MP,XP value: 128,128,128 (Assuming this will lighten to white as the number rises. Otherwise use the following grey.)
Level,Traits,etc. grey: 165,165,165
Attack Name: 245,230,193
Attack Description: 166,146,117

excellent. I am this -><- close to getting color'ed fonts into themes.

I think the DFool's indentation is a good thing, as well as Khamul's suggestion:

Foo strike: 7-3
melee (impact)
foo

This order would tend to keep text from overflowing the panel, at least in English.

This, I am not so sure about, since arguably the most important text is the damage 7-3, and it could get knocked off the edge by a long attack name. How about

Code: Select all

7-3 Foo-strike
melee (impact)
bar-special

?

[Dave]

let's start by implementing the color change business, and then possibly go on from there.

Indeed. We don't want another fiasco where we discuss what we want for a couple of months, come to no solid conclusion, but have lots of proposals that are rather complicated, and then no-one codes it.

David

[Darth Fool]

Mosts of Elezear's suggestions have now been implemented in the dfool theme and to the attack layout in all themes. Below is a crop of the sidebar from the canonical 800x600 resolution screen shot of a stoned poisoned slowed elvish shyde.

note to coders, the markup text now recognizes rgb colors of the form '<r,g,b>' when placed at the beginning of a string (analagous to the '#' used for 'BAD_TEXT'. This is kind of cludgy at the moment as there is not any realy checking done to make sure that it is well formed.

It should be pretty straight forward now to make any color changes.

edit: updated image using all of E's color suggestions.