Forum's text visibility

I remember's Orzie words about the text not being easy to read on our forums.
But we can change the color/font/background shadow very easily.

So, i open this topic to get your feedback, valiant heroes.

My own feedback is that i noticed while reading very long posts that the text was a bit "waving". Kind of the text it maybe too dark, so i would suggest to make it in dark grey without any shadow under it. The shadow was originally in Heroes II under any text.

Test random text. (now, actual color with actual shadow)
Test random text. (dark grey4 with actual shadow)
Test random text. (dark grey1 without shadow)
Test random text. (dark grey2 without shadow)
Test random text. (dark grey3 without shadow)
Test random text. (dark grey4 without shadow)

I guess dark grey 2 without shadows could be the way to go...   But it will really change the overall look the atmosphere of the forum.
(this is written with dark grey2 without shadow)

Personally, I never had a problem with the text as it is today, for reading, simplicity is the best, why not black without shadow?

Unknown_Hero wrote:

Personally, I never had a problem with the text as it is today, for reading, simplicity is the best, why not black without shadow?

I agree, I never had problems reading the text. It the current one is the most clear one of those you show here. Plain black on light gray should be the best solution I think, so no need to change it in my opinion

Ok, so i won't change it if nobody really has the problem here... but,

Unknown_Hero wrote:

[...] why not black without shadow?

Let's compare.  

Test random text. (actual black+shadow) Test random text. Test random text. Test random text. Test random text. (actual black+shadow) Test random text. Test random text. Test random text. Test random text. (actual black+shadow) Test random text. Test random text. Test random text. Test random text. est random text. Test random text. Test random text. Test random text. est random text. Test random text. Test random text. Test random text. est random text. Test random text. The Ultimate Artefact is hiding in the shadow. Test random text. Test random text. est random text. Test random text. Test random text. Test random text. est random text. Test random text. Test random text. Test random text. est random text. Test random text. Test random text. Test random text. est random text. Test random text. Test random text. Test random text. est random text. Test random text. Test random text. Test random text. est random text. Test random text. Test random text. Test random text. est random text. Test random text. Test random text. Test random text. est random text. Test random text. Test random text. Test random text. est random text. Test random text. Test random text. Test random text. est random text. Test random text. Test random text. Test random text. est random text. Test random text. Test random text. Test random text. est random text. Test random text. Test random text. Test random text. est random text. Test random text. Test random text. Test random text. est random text. Test random text. Test random text. Test random text. v(actual black+shadow) Test random text. Test random text. Test random text. Test random text. Test random text. Test random text. Test random text. Test random text.est random text. Test random text. Test random text. Test random text.est random text. Test random text. Test random text. Test random text.est random text. Test random text. The armies of Black player are leaded by the hidden son of Archibald. Test random text. Test random text.est random text. Test random text. Test random text. Test random text.est random text. Test random text. Test random text. Test random text.est random text. Test random text. Test random text. Test random text.est random text. Test random text. Test random text. Test random text.est random text. Test random text. Test random text. Test random text.est random text. Test random text. Test random text. Test random text.est random text. Test random text. Test random text. Test random text. (actual black+shadow) Test random text. Test random text. Test random text. Test random text. (actual black+shadow) Test random text. Test random text. Test random text. Test random text. Test random text. Test random text. Test random text. (actual black+shadow) Test random text. Test random text. Test random text. Test random text. (actual black+shadow) Test random text. Test random text. Test random text. Test random text. (actual black+shadow) Test random text. Test random text. Test random text. Test random text. (actual black+shadow) Test random text. Test random text. Test random text.

Test random text. (black without shadow). Test random text. Test random text. Test random text. Test random text. Test random text. (black without shadow). Test random text. Test random text. Test random text. Test random text. Test random text. (black without shadow). Test random text. Test random text. Test random text. Test random text. Test random text. (black without shadow). Test random text. Test random text. Test random text. Test random text. Test random text. (black without shadow). Test random text. Test random text. Test random text. Test random text. Test random text. (black without shadow). Test random text. Test random text. Test random text. Test random text. Test random text. (black without shadow). Test random text. Test random text. Test random text. Test random text. Test random text. (black without shadow). Test random text. The rumors in the Tavern are interesting. Test random text. Test random text. Test random text. Test random text. (black without shadow). Test random text. Test random text. Test random text. Test random text. Test random text. (black without shadow). Test random text. Test random text. Test random text. Test random text. Test random text. (black without shadow). Test random text. Test random text. Test random text. Test random text. Test random text. (black without shadow). Test random text. Test random text. Test random text. Test random text. Test random text. (black without shadow). Test random text. Test random text. Test random text. Test random text. Test random text. (black without shadow). Test random text. Test random text. Test random text. Test random text. Test random text. (black without shadow). Test random text. Test random text. Test random text. Test random text. Test random text. (black without shadow). Test random text. Test random text. Test random text. Test random text. Test random text. (black without shadow). Test random text. Test random text. The real power is in a Magic Book. Test random text. Test random text. Test random text. (black without shadow). Test random text. Test random text. Test random text. Test random text. Test random text. (black without shadow). Test random text. Test random text. Test random text. Test random text. Test random text. (black without shadow). Test random text. Test random text. Test random text. Test random text.

I prefer the current version, the first one, so no need for change.

It was Ashirox (the artist who made one of the best HoMM2 fan art pieces) who expressed his opinion on poor readability of the forum text.

I completely support him on the topic. Having a shadow on the text makes it fancier, but very hard to read if the text is placed in large chunks. The eyes get tired very fast and grey (instead of white) background does not help either.

You can see that any standard forum does not have text shadow for a reason.

Quote :

I guess dark grey 2 without shadows could be the way to go... bigsmile But it will really change the overall look the atmosphere of the forum.
(this is written with dark grey2 without shadow)

I like this version better. Yet, this does not solve the problem, because the background is still grey, the letters look too thin, so something else is needed. Even the text shown in reply window is more readable.

Spoiler:

I am curious if there is any way to control the opacity of the shadow for the shadowed text.

Yes, we can set rgba colors for the text-shadow, so we can control the transparence.

dark grey 2 + shadows - version A
dark grey 2 + shadows - version B
dark grey 2 + shadows - version C
dark grey 2 + shadows - version D


if you want to play with it; (it's the chrome version, but should be the same with firefox), just right click on this current text and select Inspect.
If there isn't inspect in the possible actions, push Ctrl + Shift + I,
then click on the "square with cursor", then click on any text of my message (this current post you are reading).
And then, in the bottom area (in a tab named "Styles"), there will be that :
element.style {
   color: #222222;
   text-shadow: ¤ 1px 1px 2px rgba(34, 34, 34, 0.5);
}
where the ¤ is in fact a little image that if you click on it, it'll open something to control the text shadow easily. And maybe there is also a little image next to the "rgba" that will allow you to pick a color easily.
Then, to share it here, you must copy/paste what is between { and }. It should looklikes something like that :
element.style {
  color: #222222;
  text-shadow: 1px 1px 1px rgba(34, 34, 34, 0.87);
}

Code:

<span style="color:#222222; text-shadow:1px 1px 1px rgba(34, 34, 34, 0.5);">dark grey 2 + shadows - version A</span>

<span style="color:#222222; text-shadow:1px 1px 0px rgba(34, 34, 34, 0.5);">dark grey 2 + shadows - version B </span>

<span style="color:#222222; text-shadow:1px 1px 2px rgba(34, 34, 34, 0.5);">dark grey 2 + shadows - version C</span>

<span style="color:#222222; text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.99);">dark grey 2 + shadows - version D</span>

<span style="color:#222222; text-shadow:1px 1px 0px rgba(34, 34, 34, 0.2);">if you want to play with it [...]</span>

GodRage wrote:

if you want to play with it; (it's the chrome version, but should be the same with firefox), just right click on this current text and select Inspect.
If there isn't inspect in the possible actions, push Ctrl + Shift + I,
then click on the "square with cursor", then click on any text of my message (this current post you are reading).
And then, in the bottom area (in a tab named "Styles"), there will be that :
element.style {
   color: #222222;
   text-shadow: ¤ 1px 1px 2px rgba(34, 34, 34, 0.5);
}
where the ¤ is in fact a little image that if you click on it, it'll open something to control the text shadow easily. And maybe there is also a little image next to the "rgba" that will allow you to pick a color easily.
Then, to share it here, you must copy/paste what is between { and }. It should looklikes something like that :
element.style {
  color: #222222;
  text-shadow: 1px 1px 1px rgba(34, 34, 34, 0.87);
}

By the way, I noticed that the font style you used in this quote is much more friendly to my eyes. With it, I am easily able to read the text being at the distance of 80 cm from the monitor.

The hard shadow used in the current standard font causes the feeling of duplicated text, blurring every symbol and requiring additional attention to understand each word. This is one of the reasons I don't reply on the forum so often. That state of the font also encourages using a lot of smilies and colored text simply because of the need to provide better readability of the text. All of this leads to colossal amount of time spent on reading and writing. This also affects the eyesight of the users, for some - probably without their consciousness. The design of the forum is great and we must preserve it, but something must be done indeed.

I would suggest a some kind of experiment, where the standard font parameters are changed, for example, for one full day, so the forum can be watched and some conclusions can be made. After that, the font is reverted back to the previous state. I also suggest reading big threads with larger posts, like this one for example, during the experiment. Of course, I don't know the mechanics of changing the forum code, so this experiment can be carried out only if it's easy enough to arrange for you.

Orzie wrote:

[...] I would suggest a some kind of experiment, [...] for one full day, so the forum can be watched and some conclusions can be made.
[...] I don't know the mechanics of changing the forum code, so this experiment can be carried out only if it's easy enough to arrange for you.

Yeah, it's easy to change. It's done, let's spend few days with this design.

Yay! Let's see how people react on this change.

UPD. I noticed that some sections of the forum became less convenient to watch, like the forum index page (white font is less good-looking when it has less volume now). I suppose, we will have to do something about this too later, like darkening the background under it.

The left panel with Latest Topics, however, seems to be doing okay. Wish we had an ability to scroll it somehow, because 7 topics is not always enough.

Orzie wrote:

UPD. I noticed that some sections of the forum became less convenient to watch, like the forum index page (white font is less good-looking when it has less volume now). I suppose, we will have to do something about this too later, like darkening the background under it.

I did some adjustments.

I have some comments.

First of all, I have to express opinion on standard black font used in topic names. I vote against it, because it's very hard for the eyes to keep attention, the text is perceived as part of the background and stands out less than it should.

Same goes for small white font (not bold), it stands out too little if placed on bright background.

At the same time, large white font + shadow used for subforum titles (like Modding and Mapmaking) seems to be doing just fine even on brighter background.

So, my suggestion is to try using white font everywhere, but somehow find a way to pre-set a more visible shadow for any kind of white text.
Since white font is used mostly for special cases, like clickable links and topic titles, I suppose we won't suffer from some additional shadow under it.

I did some adjustments
(i modified the 2 "not okay" you pointed out)

After a few days of use, the white color for the topic titles is better for me, and the current color of the text in black is okay.

Thank you very much for your feedback. I am sure these changes will somehow help us get more active discussions on the forum itself.
I myself certainly feel some relief for my eyes currently reading the posts.

To GodRage:
1. I would also suggest adding shadows for the highlighted strings (including Registered Users, sorry I forgot to put an arrow there too).
This way the lower part of the index page will be more convenient to watch.


2. As a final adjustment to the page, I'd like to have the moderator groups being highlighted in the same color as they currently are displayed in other parts of the forum.

#FFDD00 - Project Ironfist Team
#3EDB1F - H3SW Team
#0000FF - Tournament Masters (I wish I had some more time for that section of the forum)

That's all done.
I adjusted the shadows for matching the new colors.

But few things will change then;
if there is a link to one of theses 3 groups, it will take the color automatically. For exemple:
https://heroes2.forumactif.com/g4-h3sw-team
https://heroes2.forumactif.com/g3-project-ironfist-team
https://heroes2.forumactif.com/g8-tournament-masters

Yay! Definitely looks better. The only possible problem here is the blue color for Tournament Masters, because it is perceived by the eyes as "darker" color than yellow and green, and thus Tournament Masters has less volume on the index page than the other links. Perhaps we'll find a more suitable color later.

Now, the only additional thing I can think about is the possible new color of subforum links (like Cyborg Faction, Modding and Mapmaking, Bug Reports, Feature Requests! for Project Ironfist). Probably, such great amount of shadowed letters do not work well for the people's eyes. But I currently have no specific idea on what to change there.

I think I may suggest the idea of removing these little descriptions like "Official forum of Project Ironfist, the only existing massive Heroes II modification project." This way the index page will be more laconic and readable. I can do that myself, but I need opinions of people who are newer to the forum, and if they really did feel these texts as necessary for them to understand what's happening on the forum. I am concerning only the Modding Guild section because there are a lot of subforums and a lot of text; other places of the page are readable enough.

Orzie wrote:

Yay! Definitely looks better. The only possible problem here is the blue color for Tournament Masters, because it is perceived by the eyes as "darker" color than yellow and green, and thus Tournament Masters has less volume on the index page than the other links. Perhaps we'll find a more suitable color later.

At any time you want to change the color i'll be there to do it.

Orzie wrote:

Now, the only additional thing I can think about is the possible new color of subforum links (like Cyborg Faction, Modding and Mapmaking, Bug Reports, Feature Requests! for Project Ironfist). Probably, such great amount of shadowed letters do not work well for the people's eyes. But I currently have no specific idea on what to change there.

I can change the design of the link to the forum only 1 by 1 , but 1 by 1 !!

Orzie wrote:

I think I may suggest the idea of removing these little descriptions like "Official forum of Project Ironfist, the only existing massive Heroes II modification project." This way the index page will be more laconic and readable. I can do that myself, but I need opinions of people who are newer to the forum, and if they really did feel these texts as necessary for them to understand what's happening on the forum. I am concerning only the Modding Guild section because there are a lot of subforums and a lot of text; other places of the page are readable enough.

I would even suggest to move the "General Heroes II Modding" into the "General Board", and then rename "Modding Guild" into "Official forums" (or "Official-forum Guild"...or something like that), then we can remove decriptions of the H3SW and ironfist's forums, but still telling that these are official forums.
+ add a little logo for H3SW and Ironfist.