Color-coding text

[papillon]

Someone suggested color-coding the main characters to make it easier for the brain to follow who's speaking when.

I suspect that coloring all of the text would be too hard to read - colors other than white tend not to be very clear.

So far, experiments with coloring just the name don't seem very successful to me - the color isn't that distinctive and it DOES make the name harder to see.

Any suggestions?

[Grey]

I'd say a definite no for colouring the text body, but if you keep the tones fairly close to the text colour, pale pink like in the example, and similar mild shades, then it could work. I wouldn't say it makes it any harder to read.

Really you'd have to do a little trial like writing a conversation between several characters using different colours for each of their names, and see if it looks useful, or just a mess.

[szarebure]

Pink on black is ok, but you could use much more colors on white background. But I think it's not so important. There are even guys who find it impossible to read their OWN sources without editor showing it in different colors .

[monele]

Mm... I tried something similar and I guess it's ok as long as pastel colors are used... but you'll quickly run out of colors ^^;. Maybe you could make some random demo of this system and people would vote ? ô_o

Or instead of using a text label, have some small icon/picture of the character talking ?.... Oh wait, you could slightly tint the frame instead of the text ! But I think (from memory) that your frame is rather complex and probably needs its own colors eh ? ^^;

[papillon]

Yeah, frame tinting (or frame-border-tinting) might work in some cases but wouldn't fit the existing design here.

Pastels are readable but not a strong enough visual cue to help someone who doesn't find the name listing helpful enough on its own.

I suppose the careless reader is just going to have to suffer. Unless I could afford voice acting, which is unlikely.

[Quin]

Since no one's made a mock-up with colored text, I decided to try it. (Click to enlarge.)



I used HSL colors with a luminosity of 160 (on a 0-240 scale) for the names, and the same color with the luminosity changed to 220 for the text.

HSL values: Z = 20, 204, * ; Y = 80, 216, * ; X = 180, 200, * ; W = 232, 204, * (where * is 160 for names or 220 for text)

My only complaint here is that Xander's name seems a bit too dark.

[papillon]

Now try that on a non-black background. It looks fine there with the strong contrast, but probably not as fine on a semi-transparent overlay.

ISTR the Quest for Glory games did little segments in different very-bright-color text when there were tons of girls in the room to distinguish between, but you wouldn't have wanted to read it long term.

edit: actually, using the values you used and a reasonably chunky font, it's not that bad.

[mikey]

Hmmm, actually, I never found color coding helpful.

The thing is, it might work fine when only two characters are involved (in the whole game - and one of them is the protagonist), but other than that, it will be a mess, IMO. Plus, it just disintegrates all atmosphere for most of the time.

Although I will say I like that example above - the name appears a bit darker, the text lighter - but I'd say it would be good if all names were the same color, so this would make it more of an aesthetical thing.

I think if the dialogue gets confusing, perhaps a different approach can be used - turning the "inactive" characters on the screen into grayscales, maybe?

[PyTom]

I'm a big fan of using color to convey information. One of my co-workers once compared the syntax-highlighting in my text-editor to a Christmas tree. But I find it really does help improve my productivity, as it lets me skip over irrelevant details, and focus on what matters.

I think the same is true of colored names in VNs. Assuming I've met the characters and know their names, then I don't need to actually read their name again. When I have internalized the association with a character, than I don't read the colored text. Instead I simply see the color, and skip over the name... and I still know who's speaking.

Now, this does mean the color-character associations need to be disciplined, and that one needs to keep the colors distinct. But done correctly, this can really accelerate the playing of the game.

I'm not sure about color-coding the body text. One can skip reading the character name since there are only a few choices during the entire game. But the body text has to be read anyway, and the character normally needs to be established before reading it... so I don't think there's much advantage to color-coding the body text.

I personally don't think that the reason the name is hard to read in the first example is not because it is in color, but because it is a name. If I understand this correctly, the human brain is set up to recognize common words. By using a name, which isn't a common word, it gets sent up to the part of the brain where you have to figure out what those letters mean, and that's what slows people down.

If anything, I would expect coloring the name to make things easier to read in the long run, as people don't need to read names anymore. It's not an effect that can be demonstrated with a single screen of text, or even a few screens of text, but it's something that will manifest itself over the length of a visual novel.

The key is to not only consider what makes a single screen easier to read, but what makes the VN as a whole easier to read. Coloring character names does the latter, even if it doesn't do the former.

(Also, sans-serif fonts are generally easier to read on the screen then serif fonts. Serif fonts tend to have lots of little thin parts that don't map properly onto the pixel grid, leading to weird aliasing things. Try zooming in on that image, and see how the stroke width goes all over the place, in a way that it doesn't on the sans-serif example.)

[rioka]

Colored text sounds good but there may be a problem when there's too many characters. Like someone said - you'll run out of assigned colors or colors may be too similar that players may become confused.

[PyTom]

Running out of colors seems to be more of a theoretical problem then an actual one. Minor characters can share a single color (or non-color, like white), while the major ones each get their own color. Trivially there's ROYGBV, and there's also cyan in there, so that easily brings us to 7 colors. Adding in light versions of some of the colors, and other colors like gray and brown, can bring us over 12, which is pretty much the largest cast size a game will see.

Harder is coming up with a meaningful assignment of character to color, but even non-meaningful assignments are better than just letting the character names sit in boring uninformative white text.

[monele]

On the subject of not having to read names after a while, I have at least one example that proves it true : Quartett. It uses comics bubbles. Some of them start near a character but some of them are just character-less and given the context you can still guess who is saying it.
The counter example, to me, would be a few of these art-less demos. I found it very hard to focus and clearly picture who was talking and what was happening. It seems the brain needs at least to see the name and graphics once...

[Quin]

Now, this does mean the color-character associations need to be disciplined, and that one needs to keep the colors distinct. But done correctly, this can really accelerate the playing of the game.

That's what I'm thinking... it'll shave a few milliseconds off the time it takes for the player's mind to process the screen. But just as important, it's also a subconscious cue to help reinforce which character is speaking.

I used the word "cue" deliberately here, because that's all it should be. A player shouldn't have to rely on text color as the sole way to tell who's speaking. Characters can have their own ways of speaking (accents/dialects, balance of big words vs. small words, emotions), and in many cases the character's picture will be on the screen. And in the worst case, the player can always go back and read the speaker's name in the text on the screen.

In a way, colored text is also helping to distinguish between characters in the manner that different voice actors help to distinguish between characters in anime. Since there's not a lot of voice acting being used in non-commercial VNs yet, colored text could be one more tool designers have to simulate different voices. (Since I've opened the box, let me be the first to dissuade designers from considering using different fonts to simulate different voices. That would be an aesthetic nightmare...)

I'm not sure about color-coding the body text. One can skip reading the character name since there are only a few choices during the entire game. But the body text has to be read anyway, and the character normally needs to be established before reading it... so I don't think there's much advantage to color-coding the body text.

But are there any disadvantages? One is that legibility can be hurt, especially if care isn't taken with the color and font choices. As Papillon noticed/demonstrated, it does require a "chunky" font to help keep colored text legible. It took a few tries for me to find a font that worked even for my illustration above. (And I wholly agree with PyTom on serif vs. sans serif. Serif fonts work well on the printed page, but not so well on the screen due to resolution, anti-aliasing, etc.)

I personally don't think that the reason the name is hard to read in the first example is not because it is in color, but because it is a name. If I understand this correctly, the human brain is set up to recognize common words. By using a name, which isn't a common word, it gets sent up to the part of the brain where you have to figure out what those letters mean, and that's what slows people down.

Also to blame in that line of thought is that I picked less common names; it's probably easier to recognize a Jane or a Michael than a Wrenna or a Xander.

But I finally figured out why I made that comment about Xander's name color being hard to read. It's because when I loaded that image in a window in my browser, it had a white border all the way around it and lots of white on two sides. The visual difference between white and black was overwhelming the smaller difference between black and purple. This might be less true in an actual visual novel, where there won't be quite as much stark brightness on the screen.

Harder is coming up with a meaningful assignment of character to color, but even non-meaningful assignments are better than just letting the character names sit in boring uninformative white text.

Well, that's an easy one... just match it to the hair color.

[papillon]

Yeah, hair color is my guideline, or at least a shade related to it if the general hair color wouldn't work. (the PC having very dark hair, but it highlights purple/lavender, so.)

I suspect there are rare occasions where different fonts could be used to good effect. But probably not in anything resembling a proper VN... Something that was primarily non-textual with only a few text passages might want to give you a stronger clue.

Picking a good font is a pain in general, balancing the desire to be 'not bland' vs the need to be readable! Serif or not, I think that font works well in clear white... and finding a Sans font that isn't totally dull is tricky...

Here's where I've gotten to at this stage of experimenting.

[mikey]

PyTom's suggestion with colored names only is really logical and for people who are color-aware, it will be an excellent tool - the thing about all other text being all the same (style, color, size) all the time is also something I identify with, it's the best compromise before it starts to look clownish. A notable exception may be some inner monologues or special thoughts, like was used in MetroBlues.

Harder is coming up with a meaningful assignment of character to color, but even non-meaningful assignments are better than just letting the character names sit in boring uninformative white text.

Well, that's an easy one... just match it to the hair color.

That's ingenious! Though it may be confusing if you have a b/w game.

There however are a number of other ways of making it more clear who is speaking, avoiding character confusion:
- use character names that have different beginning letters and length
- use mini-images to show who's speaking (the thumbnail-like thing, you know what I mean)
- write it so that it can be understood - for instance from time to time confirm to the player who is speaking, adding "Miwako said", as a next line if your conversations are long.

The counter example, to me, would be a few of these art-less demos. I found it very hard to focus and clearly picture who was talking and what was happening. It seems the brain needs at least to see the name and graphics once...

If it's confusing, then it's not necessarily a bad thing. It only shows that when the pictures will be added, the visual novel will be complete. On the contrary, you can read Narcissu without the graphics and music and it still makes a good figure - but I actually think as fas as a visual novel is concerned, that's not really what one should be going for. This may also apply to Gakuen Redux, which is also too standalone, even though I made every effort to severely limit the mood/surroundings and character descriptions.

Some of the Alltogether releases if you played them, have really confusing dialogue, because there are no indications (at all) of who is speaking. Again, this would be perfectly okay if there were characters appearing with each line, or something visual, but sadly, that isn't the case.

Anyway, I wanted to just point out, that solving the "who's speaking" issue isn't necessarily going to be only by styling text.