Improving Angband's appearance, esp. colors

[tilkau]

Personally I find this pretty difficult to read and visually distracting. The list item labels are already pretty well marked without needing an extra background colour change,

Hm.
Well, I'm not stuck on a background color change, but I can't agree that they are pretty well marked; the main purpose of that change was to separate the whole lot from the status display (Human/etc..) that's sitting behind the inventory display.
I've tried altering the bg of the status display instead, but a) there are no options that don't make it look washed out and weird,
b) it makes it look like the status is 'currently invalid' somehow.

and the grays of 'for Quiver' etc are too close to the background colour for comfort.

Okay, I think I agree there. Maybe g might work better.

@fph: yeah, that reorganization sounds sensible to me. I'll incorporate it in the next mockup of that screen.

[Pete Mack]

Bad idea for yellow. It's more important to be able to distinguish monster colors than to have an aesthetic character stat page.

Good that we are on the same page re: how to maintain aesthetics. This is a pretty typical design process: make loads of mockups, zero in on the feel you want by iterative discarding.

This just shows the change to 'b' color:


Here's a comparison after tweaking, of blue colors (btZBT, left to right, top to bottom),



While making that, I noticed this existing potential problem:



These colors (zWV) seem very similar. z versus W and V versus z being the worst match ups. Upping z's saturation, to #94c3dc, seems to help, without stepping on Z or B's toes too much:



Another triple that's in the danger zone is oIU -- o vs I is quite a small visual difference. U is not a problem but must be considered when adjusting o and or I, in order to not create an o vs U or I vs U problem.

p vs v is not too bad but could probably be improved.

Here's the original colorset, with no tweaks (top)...



...and the colorset with all tweaks so far applied (bottom).

(P has also been changed here, which hasn't come up in mockups so far. Just dropped the saturation a bit to make it less burny. I also decided R probably shouldn't change -- at least, without making sure it doesn't step on I's toes.)

[kaypy]

Could we just add some extra color entries and get both aesthetics and distinct critters? We have 228 unused slots after all...

[Zireael]

I'll chime in to say that most of the ideas presented are brilliant. I fail to see what the problem with changing yellow is.

(And the resistances portion of the character screen seriously needs a way for the columns not to blend together. Rows are fairly OK)

[Pete Mack]

The yellows are hard to distinguish on one of my devices only. On the others they are fine fine. I retract my complaint.

[molybdenum]

I'm glad I caught up on this thread. Just today, after playing/testing for about two hours, I started getting eye fatigue. This has been happening for the last month or two, since I started playing again, but I figured it was because I was using the non-hires OS X version. Alas, using the latest hasn't helped. I was just thinking of hacking in some kind of easy color profile switcher in the OS X port so that I could experiment more easily without needing to use the clunky visuals interface.

Another thing that has always been an issue for me is color blindness. Usually, the colors of monsters or objects don't affect gameplay too much, but there have been some times I've gotten into trouble because there is a slight shade difference between some weak monster and something powerful. The main problem is when the colored item is on its own and not next to something that I can compare it to. For example: in the main term, the text in the upper left that describe your race and class is apparently in a blue color. I wouldn't be able to tell that color from white or light grey if it was by itself. It's especially bad for me that it's used for menu selections and such. The funny thing is that I only noticed when I started playing again a few years ago; in the mid-90s, it was a much more vivid color that I can distinguish quite well, which I dug out of old prefs files. Another solution I've thought of hacking in for myself was to apply color cycling to more things, but that's a pain as well.

I don't want to step on the designers' toes, but I've used iWantHue to help create starting points for palettes for my own use -- the idea being to start with colors that are more visually distinct for people with normal color perception. Another strategy that I've recommended to designers is to think about using subtle texturing or patterns where possible. While this wouldn't work for the text itself, a subtle background behind each character might help. It certainly wouldn't work on character-only displays, and possibly not on lower-DPI ones as well, but it's an idea.

[Pete Mack]

If you could make colorblind color and monster color preferences that would be great. Angband used to be designed for a 16-color dumb terminal, so yes, there are 2x more colors now. I cringe when people suggest 256: I would have a hard time resolving much more than what we have now. The blues in particular, and the really dark colors are simply hard to see at all without alpha adjustment.

[Derakon]

Random thought: it should be possible to do two-toned or gradient symbols, no? Like, a symbol that's blue on top and red on the bottom, with either a smooth transition between or a half/half allocation of color. The drawing logic would probably get unpleasantly complicated, and I don't know how much differentiation this would actually buy us, but it could be an option.

[Pete Mack]

It's a pain. You'd have to do a double-strike with a mask for the second copy. Shimmering letters are much easier. Maybe the thing to do is shimmer more monsters. Another choice is to add more characters: Accents and the like would work for lower case (but not upper.)

[yyt16384]

Random thought: it should be possible to do two-toned or gradient symbols, no? Like, a symbol that's blue on top and red on the bottom, with either a smooth transition between or a half/half allocation of color. The drawing logic would probably get unpleasantly complicated, and I don't know how much differentiation this would actually buy us, but it could be an option.

It won't work for -mgcu.

[Nick]

Someone on reddit has posted some Angband fonts, and there's discussion - seems like people interested in this thread might have something to say about it.

[molybdenum]

So, I did some experiments. My setup was the OS X port on a Retina display, using 12pt Source Code Pro Regular, with font smoothing (tends to make the font fatter and rounder).

- Striped pattern (fine): Alternating a 0.5pt/1px line with a different-colored line of the same weight kept the character shape intact, but wasn't too useful color wise. I tried different angles, which didn't really help.
- Striped pattern (medium): Alternating a 1pt/2px, the only difference from the above was that the patterning was more visible, but the character shape was harder to discern.
- Two-tone: Top half was one color, bottom half another. Pattern was visible, but almost too much so. Some characters were harder to discern, like T, I, i, l.
- Outlining/stroking: Characters were stroked with a different color at a few different weights. I didn't prefer the look, but it could possibly work in some cases.
- Gradient fill: I found this to work surprisingly well. I only tried a vertical gradient, so things like rods, wands, and staves wouldn't work, but for other characters, they were still legible while showing enough color.

Some of the above could work with meatier fonts, and or larger font sizes, but it'd have to be really tuned regardless. Shimmering is still probably the best option. I could take a look at making the flicker table more dynamic; they're all currently hardcoded and each one must have exactly three colors.

[tilkau]

The yellows are hard to distinguish on one of my devices only. On the others they are fine fine. I retract my complaint.

Yes, I was specifically aiming to make all colors more distinct. If your display is calibratable (ie has proper brightness/contrast/color temp settings, unlike eg. laptops), then I suggest using the guide at http://www.lagom.nl/lcd-test/ to get a basic calibration. I run through that on any new display I have to use, and it seems pretty reliable.

So, I did some experiments. My setup was the OS X port on a Retina display, using 12pt Source Code Pro Regular, with font smoothing (tends to make the font fatter and rounder).

- Striped pattern (fine): Alternating a 0.5pt/1px line with a different-colored line of the same weight kept the character shape intact, but wasn't too useful color wise. I tried different angles, which didn't really help.
- Striped pattern (medium): Alternating a 1pt/2px, the only difference from the above was that the patterning was more visible, but the character shape was harder to discern.
- Two-tone: Top half was one color, bottom half another. Pattern was visible, but almost too much so. Some characters were harder to discern, like T, I, i, l.

These three are used for titles only, in art generally. Presumably because of how they unavoidably detract from readability of character shape.
The smaller the scale of the letters, the worse it is.

- Outlining/stroking: Characters were stroked with a different color at a few different weights. I didn't prefer the look, but it could possibly work in some cases.

This does read, but I'm not particularly a fan of how it looks.

Note that there are two different ways to do outlining;

1. stroke the outside
2. outset/dilate the character, draw it in outline color, take the undilated character, draw it over the top.

#1 is easy, but #2 is cleaner (preserves sharp character features that would otherwise be obscured by the width of the outline stroke)

IMO this takes considerable tuning (to achieve an outline size that is effective without being obnoxious)

- Gradient fill: I found this to work surprisingly well. I only tried a vertical gradient, so things like rods, wands, and staves wouldn't work, but for other characters, they were still legible while showing enough color.

Not bad if the gradient is mild (not too much difference in brightness). Using a gradient between different hues (blue at bottom -> purple at top) can be a good way of getting a strong effect without obscuring the character shape excessively.

Some of the above could work with meatier fonts, and or larger font sizes, but it'd have to be really tuned regardless. Shimmering is still probably the best option. I could take a look at making the flicker table more dynamic; they're all currently hardcoded and each one must have exactly three colors.

+1

[Derakon]

So, I did some experiments. My setup was the OS X port on a Retina display, using 12pt Source Code Pro Regular, with font smoothing (tends to make the font fatter and rounder).

Hey, thanks for doing these experiments!

[t4nk]

Bump.
So, are there any conclusions about what would be good to do? Because, you know, someone may go ahead and actually do that
Also, if anyone has other ideas about improving the looks of UI, post them!