Desaturated Stats Bars Don't Match Art [$50 awarded]

[deilann]

While I love the design of the new stats bars, they really clash with the art on the site. It looks really weird having super desaturated colors right next to my avatar.

The $50 bounty on this issue has been claimed at Bountysource.

[Alys]

I agree. My avatar is mostly red at the moment, and it looks quite odd that the health bar is a very different kind of red.

[veeeeeee]

There's also a shadow effect for all the level tags and usernames that makes them a little hard to read.

Edited to add: stat bars seem to look best at 75% zoom in Chrome; any larger and the labels start running into other things.

[AnitaYCheng]

The text-shadow effect being grey looks off on warm-colored backgrounds. Many people's level badges look weird, especially if they're at higher levels with the red and orange.

The button labels on the stat bars also make it hard to see where the level is if it's low, since the button covers up the majority of the stat bar down there.

[Alys]

With my stats like this: I keep thinking that my XP is also very low because the dark XP indicator on the washed-out "background" tricks me into thinking that's where the XP bar ends. As AnitaYCheng says, it's hard to see low levels, and also a high-level stat can look deceptively low.

[deilann]

A full HP bar makes me think my HP is almost empty.

On Fri, Jun 6, 2014 at 1:58 AM, Alice Harris notifications@github.com wrote:

With my stats like this: [image: screen shot 2014-06-06 at 6 55 43 pm] https://cloud.githubusercontent.com/assets/1495809/3198362/74857556-ed58-11e3-9971-c9e0cb98f981.png I keep thinking that my XP is also very low because the dark XP indicator on the washed-out "background" tricks me into thinking that's where the XP bar ends. As AnitaYCheng says, it's hard to see low levels, and also a high-level stat can look deceptively low.

— Reply to this email directly or view it on GitHub https://github.com/HabitRPG/habitrpg/issues/3565#issuecomment-45316453.

[Alys]

Here's some results from using software that changes the site appearance to mimic visual impairments. The results aren't terrible but they could use some improvement.

For people with low vision, there's now less contrast, making the numbers and icons harder to read (it wasn't perfect beforehand but it's noticeably greyer now and on a dimmer background, whereas vision impaired people need higher contrast to be able to more easily read text and see icons):

There's similar contrast issues for some forms of colour-blindness. Because the colours are washed-out for a "normal" view, they're even more washed out to some colour-blind people, making it harder to distinguish the bars and the lettering, especially for XP. The XP text would be clearer if it was darker (the text in the first image below would then be easier to read) and the XP bar would be easier to see if there was a greater difference between the bar and the background (the bar in the second image below would then be less "hidden").

It would be good to do changes like these on the beta site first, so that a range of people have a chance to comment on them.

[wc8]

(I agree re: @Alys's comment that visual changes should go to beta first.) Mixed feelings on the change itself.

Much Better: The arrangement of icon + initials on the left is neater, sleaker and clearer. Good job. The darker border is an improvement, I think. Needs Improvement: I agree that the desaturation seems too much, even without the color blindness/clarity issues to fit well in the header area which is, overall much darker than the tasks area.

Suggestions: If we're going to go lighter, I'd say the full indicator of the meter bars should be no lighter than the color now in the icon area. You could then make the icon area darker a little than that. Make the empty indicator a little lighter so it's higher contrast.

[hattieshoe]

I agree the bars are too light. I keep having to look at them multiple times to register where the level actually is, especially when the level is low and the bar is behind the icons on the left. I like the look of the icons all right, but I'd rather have the better functionality from before the change.

[wc8]

Could the icon area be translucent? Then it'd be slightly darker for readability, but you'd still be able to see the meter level through it.

[DanielTheBard]

The colors I feel actually match with the colors we have for the tasks pretty well. If you ignore everything else in the header, it doesn't seem that bad of a fit. And I do really enjoy the new bars, in general. However, I think these are some problems.

The colors (of the bars AND tasks) are generally more desaturated than the avatar art. So while they're not at odds with each other... they're a bit at odds with the other artwork. Though, not horribly so.

The other problem is the style doesn't match. It doesn't match the 16-bit-esque avatar art, and it doesn't match the task boxes. The task boxes art similar in color but the rounded edges of the status bars are completely at odds with everything else. Doesn't really match the more blocky artwork or the rectangular task boxes.

The status bar are the only things with those dark colored outlines. It makes the bars really stand out, which is cool, but they don't mesh with anything else since outlines for everything else are much more subdued.

[lemoness]

I worry that when we implement backgrounds (see this card:https://trello.com/c/zFF0ZsI7/30-background-art), these desaturated bars will look even more out of place. A new aesthetic factor to consider!

[DanielTheBard]

@lemoness - That issue might apply to task color, as well then. Or so I think. And while I do like this design, perhaps part of the answer is to make the bars more pixelated instead of the more modern rounded style?

[lemoness]

I don't think the task color and backgrounds will conflict - the tasks are below in their own section, but the stat bars are going to be right next to the background art.

On Fri, Jun 6, 2014 at 7:11 PM, Daniel the Bard notifications@github.com wrote:

@lemoness https://github.com/lemoness - That issue might apply to task color, as well then. Or so I think. And while I do like this design, perhaps part of the answer is to make the bars more pixelated instead of the more modern rounded style?

— Reply to this email directly or view it on GitHub https://github.com/HabitRPG/habitrpg/issues/3565#issuecomment-45398699.

[deilann]

You can get a good feel for what the header looks like with every more saturated colors if you install merfy's custom theme and have the "beach" background.

On Fri, Jun 6, 2014 at 7:39 PM, lemoness notifications@github.com wrote:

I don't think the task color and backgrounds will conflict - the tasks are below in their own section, but the stat bars are going to be right next to the background art.

On Fri, Jun 6, 2014 at 7:11 PM, Daniel the Bard notifications@github.com

wrote:

@lemoness https://github.com/lemoness - That issue might apply to task color, as well then. Or so I think. And while I do like this design, perhaps part of the answer is to make the bars more pixelated instead of the more modern rounded style?

— Reply to this email directly or view it on GitHub https://github.com/HabitRPG/habitrpg/issues/3565#issuecomment-45398699.

— Reply to this email directly or view it on GitHub https://github.com/HabitRPG/habitrpg/issues/3565#issuecomment-45399223.

[DanielTheBard]

@lemoness - Not necessarily true. I have my header set to sticky so when I scroll all the tasks scroll up to meet and touch it. It honestly bothers me a little as it is.

Edit: I actually just unstickied the header and enjoy it more now. It's less awkward. Though, it has the downside of not being able to see my bars as conveniently.

[deilann]

More saturated task colors might feel overwhelming, but on the plus side, they will help folks with color and other vision deficiencies differentiate the tasks.

On Fri, Jun 6, 2014 at 7:42 PM, Daniel the Bard notifications@github.com wrote:

@lemoness https://github.com/lemoness - Not necessarily true. I have my header set to sticky so when I scroll all the tasks scroll up to meet and touch it. It honestly bothers me a little as it is.

— Reply to this email directly or view it on GitHub https://github.com/HabitRPG/habitrpg/issues/3565#issuecomment-45399255.

[DanielTheBard]

@deilann - Fair. And I do acknowledge it's probably not as important of an issue, currently. At the least though, the difference in style of the status bars and the task boxes, is causing the biggest problem for me. If each was from a video game, they'd be two completely different games.

[deilann]

Oh, no, I was weighing the positives and negatives of making the tasks more saturated. I'd like it -- I might be able to tell the difference between some of the blue tasks and grey tasks. But it might make the page overwhelming. Dunno.

But I do agree that the difference in style between the task boxes and the status bars is very jarring, now that it's pointed out to me.

On Fri, Jun 6, 2014 at 7:48 PM, Daniel the Bard notifications@github.com wrote:

@deilann https://github.com/deilann - Fair. And I do acknowledge it's probably not as important of an issue, currently. At the least though, the difference in style of the status bars and the task boxes, is causing the biggest problem for me. If each was from a video game, they'd be two completely different games.

— Reply to this email directly or view it on GitHub https://github.com/HabitRPG/habitrpg/issues/3565#issuecomment-45399348.

[Wine-Guy]

Most of what I intended to write has already been mentioned... and I liked the 'Old School' video game feel. The kinder/gentler bars... strike me as 'meh.'

It is jus the visceral reaction from an old fart.

[nbering]

In keeping with the old-school style, rounded corners would have been used very little in non-sprite components in an old video game. Calculating rounded corners requires a square root operation that was too processor intensive. Just my 2-cents.

[hattieshoe]

After reading the comments about the "old-school" straight-edged bars, I am noticing the mismatch too. The rounded corners look odd next to the avatars. It would feel more unified to have the whole header in the same environment.

[LB7979]

I agree on the bars not matching the rest of HRPG design, and on them being hard to read. And the names of Party members are especially hard to read! (the white letters on light-green background - that's not readable; make either those letters black or, better yet, the green darker).

[cemsbr]

Please, keep the 8-bit large-pixel old-school style and drop these new bars. I appreciate your efforts, but the bars were fine. Congratulations for all the art work!

[lefnire]

Heed, we get a thread like this every time there's a visually obvious change in the interface (just ask @zakkain). Alas that if we reverted each time (as desired by the community), Habit would still look like this. Feedback is great and welcome, and accessibility concerns vital (as per @Alys's comment). However, we're giving our "doers" creative license to forge ahead (see discussion here), and we should all keep in mind these "out with the new, in with the old" reactions are knee-jerk. Also, let's not poo-poo @benmanley's hard work. 8-bit and saturation-reduction are good recommendations... not so "drop the new bars". Forward!

[deilann]

Thank you, @lefnire.

(However, I do believe that beta first is a good idea.)

[lefnire]

Yes, beta first :+1:. Every once in a while (eg, this time) there's a branches complication that sees beta-ish stuff on prod sooner than desired, I'll explain why that happens sometime if you're curious (here, G+, email - whatever's clever).

[cemsbr]

I agree with the creative license and by "drop the new bars" I didn't mean to keep everything as it is forever. In my opinion, reverting the bars in the production site and improving the new ones in the beta is the best option.

[deilann]

@cemsbr If there's a branch complication, as @lefnire said, reverting the bars from prod and moving them to beta would involve a lot more work than is, in my opinion, worth it.

[cemsbr]

Yes, if it is not trivial to revert, keep this minor problem in production.

Besides the good comments everybody has made, I would like to share two more thoughts. The XP bar seems more problematic in @Alys post and maybe the orange colors (from the task boxes) could be better. Second, as to the empty/full distinction problem, one option could be using the full color as the border color, so if you see the border you are in trouble (empty).

[LB7979]

@lefnire , this is not only aesthetical (though even if constructive criticism would be only aimed at aesthetics, that does not make it less valid!), users are reporting accessibility problems (see all the users writing about how it's now hard-to-read, and hard-to-make-out). This is not a "knee-jerk reaction only because it's new", in fact you are the one having a knee-jerk reaction by claiming it's "only because people don't like new stuff". Please stop and consider for a moment if they might have a point. There's been a lot of improvement in the HabitRPG user interface lately; for example the introduction of the bar on top of the screen (the one that used to be black first). Most of the new user interface is very much appreciated! For exampe that bar (especially after it was changed from the first, black version into what it is now) is something that users overwhelmingly value very much, and they say so - remember all the users saying "I love this new interface!!!" in the Tavern? That, and most other changes, were for the better. This, however, is a deterioration.

[deilann]

@LB7979 Tyler recognizes that they may have a point. He also worries heavily about accessibility.

His issue was not with this thread or constructive criticism, but is specifically addressed at comments that belittle the work @benmanley has done and are, in my opinion, of quite a rude tone.

In the past, contributors have left HabitRPG because of incredibly rude comments every time UI changes were made. Feedback and accessibility concerns are more than welcome. Comments like "drop the new bars" are not.

[LB7979]

The fact that there are users who are rude or mean (and I agree those should behave better / be told that their behaviour is unacceptable / be flagged / dismissed etc.) does not make criticism in general less valid. By saying " "out with the new, in with the old" reactions are knee-jerk" you guys are dismissing all criticism beforehand, and saying something that is not true - see all the POSITIVE reactions that users post in the Tavern after many changes. This last one did not elicit that.

EDIT / ADDED: to be clear, 'you guys are' should actually be 'Lefnire is'; sorry my wording as it is above does not make it clear who I'm adressing there.

[deilann]

Lisa, I assure you that is not what Tyler meant by his comment. What Tyler did mean is that every change (even the ones you're referencing that were celebrated) gets a thread like this. There were a lot of users who were very upset by the toolbar and wanted the site to go back the way it was. He's not saying that all of these criticisms are invalid -- but that every change is going to elicit these kinds of reactions.

When someone does a lot of UI work on Habit, they can feel overwhelmed with the amount of negativity hurled towards them. I can assure you that both @benmanley and @lefnire are pro-criticism -- but not criticism that boils down to "out with the new, in with the old." I think the disconnect here is that what Tyler means by "out with the new, in with the old" is he's talking about "It didn't need to change so it shouldn't change" not "Wow, I don't like these new changes for these specific reasons/because of accessibility concerns."

He is not trying to dismiss all criticism. If he wanted to dismiss all criticism, he would have gotten rid of me a long time ago. ;) I've had some very fervent conversations with @benmanley about site changes that I didn't like.

On Tue, Jun 10, 2014 at 1:46 AM, Lisa B. notifications@github.com wrote:

The fact that there are users who are rude or mean (and I agree those should behave better / be told that their behaviour is unacceptable / be flagged / dismissed etc.) does not make criticism in general less valid. By saying " "out with the new, in with the old" reactions are knee-jerk" you guys are dismissing all criticism beforehand, and saying something that is not true - see all the POSITIVE reactions that users post in the Tavern after many changes. This last one did not elicit that.

— Reply to this email directly or view it on GitHub https://github.com/HabitRPG/habitrpg/issues/3565#issuecomment-45588458.

[Alys]

@LB7979 : Lisa, it's worth noting that in lefnire's comment, he did say "accessibility concerns vital" and "8-bit and saturation-reduction are good recommendations". He is paying attention to all the feedback and considers much of it valid. When you say "you guys are dismissing all criticism beforehand", I'm guessing (I could be wrong!) that by "you guys" you are thinking of HabitRPG's staff and major contributors. You might not have realised, but several of the posts on this issue containing constructive criticism have come from staff and top-level contributors: deilann, wc8, DanielTheBard, lemoness. Those guys are definitely not dismissing criticism; they're making it :) albeit in a polite, constructive way.

[cemsbr]

@benmanley, I'm sorry if my comments sounded rude to you. I didn't had much to say after reading previous posts about problems of the new bar and I was just wondering why this change remained in production despite the criticisms. Reverting a deterioration should not discourage creativity, but stimulate the community collaboration towards a common goal. I'm sure you will improve your work (in beta) based on our feedback, but, while it does not happen, having the previous bar would be better (if it weren't for the "branch complications").

[LB7979]

Sorry my comment above was unclear because in the 1st paragraph I was adressing what Deillan said, and in the 2nd what Lefnire said. That should have been clearer.

By saying " "out with the new, in with the old" reactions are knee-jerk" Lefnire is dismissing all criticims beforehand.

I really hope he is taking the comments of Daniel, Lemoness', Alys' and Deillan, as well as all other users', seriously.

It's not that we're saying 'everything should always stay the same'; it's that brighter colors (than they are now) would be a better choice for the bars (and that is even ignoring the accessibility problems).

[deilann]

Yes. Tyler understands that. And agrees. And is taking all of our comments seriously. Trust me.

If you, personally, are not saying "everything should always stay the same" then he is not addressing you with that statement.

[benmanley]

Believe me, I wish it had stayed on beta too. ;-)

I’ve tried to take in all the comments above.

First things first: Accessibility is the most important issue. I’m going to raise the saturation on the bar, lower the saturation on the meter background and tinker with the label colour/opacity.

I think the debate can rage on regarding the rest. However, my two cents are:

1. Clearly, no colour can simultaneously match everyone’s avatar/custom background. So long as the colours match the scheme in general, I think that’s fine. Once I tweak the saturation, I think it will solve that concern.
2. Regarding ‘8-bit/16-bit-ness’, I think there’s an element of subjectivity. @DanielTheBard made some good suggestions which I’ll put to the test. I rounded the bar borders as most of the UI elements adjacent to them are rounded. However, I did consider leaving them squared as they're not buttons, so maybe that will be for the best. I'll try it.

[deilann]

Re #1: totes agree

Re #2: Do let us see some mockups! I'm excited to see what you come up with. I wasn't really bothered by the design (liked it), but once @DanielTheBard pointed it out more, it's started to clash.

On Tue, Jun 10, 2014 at 7:13 AM, Ben Manley notifications@github.com wrote:

Believe me, I wish it had stayed on beta too. ;-)

I’ve tried to take in all the comments above.

First things first: Accessibility is the most important issue. I’m going to raise the saturation on the bar, lower the saturation on the meter background and tinker with the label colour/opacity.

I think the debate can rage on regarding the rest. However, my two cents are:

1. Clearly, no colour can simultaneously match everyone’s avatar/custom background. So long as the colours match the scheme in general, I think that’s fine. Once I tweak the saturation, I think it will solve that concern.
2. Regarding ‘8-bit/16-bit-ness’, I think there’s an element of subjectivity. @DanielTheBard https://github.com/DanielTheBard made some good suggestions which I’ll put to the test. I rounded the bar borders as most of the UI elements adjacent to them are rounded. However, I did consider leaving them squared as they're not buttons, so maybe that will be for the best. I'll try it.

— Reply to this email directly or view it on GitHub https://github.com/HabitRPG/habitrpg/issues/3565#issuecomment-45618486.

[lefnire]

@deilann and @Alys have my intentions correct. I've been following this thread, generally agreeing, and keeping my nose out of it (leave it to the design & accessibility people). But these large UI reactions can often turn from a wave of feedback to... well, a curb stomp. I only chimed in when I saw pebbles falling over that precarious cliff. For context:

• Reaction to @zakkain's Bootstrap redesign
• Reaction to my toolbar
• To @benmanley's toolbar redesign
• To @benmanley's notifications work
• And more

@LB7979 None of those were as celebrated as tavern implies. Tavern is where people schmooze; Github is where people complain - it's what it's here for! So:

• Criticism :+1:
• Coders: use the useful bits (saturation, 8-bit, etc.. for me, doubling down on beta-first). Don't let the wave scare you.
• Commenters: keep it friendly and useful. Our contribs are donating their spare time, and doing a great job. It's a precious gift, and delicate to bullying (we've lost contribs before).
• We're not afraid to revert code that's a bust, but only after hard evidence dictates it is. This changeset isn't, thus we see the top dogs (@deilann, @veeeeeee, @Alys, @lemoness, @wc8, etc) providing improvement suggestions - not "please revert".

@LB7979 If you have any more concerns with Habit's Gitiquette, feel free to email me

[deilann]

:thumbsup: Agile dev doesn't work if you revert things that aren't 100% broken.

[benmanley]

Sorry for the lack of agility. Stuck IRL for a while.

Here’s what I’ve come up with:

Desktop

Mobile

• Made the bars and labels more 8-bit
• Saturation – Upped the bar and lowered the background to increase contrast.
• Moved the labels outside of the meters so that they don’t obscure anything.
• Narrowed the meters to compensate for the brighter colours.
• Text shadow on level label – I’ve removed it for now. Will revisit when new colours have been decided.

Also, would like to apply the label style more widely. A bit like this, say...

Haven’t committed any code yet. Let me know your thoughts.

[deilann]

Oh, I do like. I'm not sold on the text shadow at all, though. It might be a bit... soft? But the bars are so fab. Improvement from what they used to be and an improvement from the newer ones. :thumbsup:

On Mon, Jun 16, 2014 at 1:18 PM, Ben Manley notifications@github.com wrote:

Sorry for the lack of agility. Stuck IRL for a while.

Here’s what I’ve come up with:

Desktop [image: meters-desktop] https://cloud.githubusercontent.com/assets/3317594/3292698/423c2378-f592-11e3-8837-6ed496d3446a.png

Mobile [image: meters-mobile] https://cloud.githubusercontent.com/assets/3317594/3292705/5060a154-f592-11e3-9253-9ca0d6e2f02e.png

• Made the bars and labels more 8-bit
• Saturation – Upped the bar and lowered the background to increase contrast.
• Moved the labels outside of the meters so that they don’t obscure anything.
• Narrowed the meters to compensate for the brighter colours.
• Text shadow on level label – I’ve removed it for now. Will revisit when new colours have been decided.

Also, would like to apply the label style more widely. A bit like this, say...

[image: labels] https://cloud.githubusercontent.com/assets/3317594/3292709/5b6199e6-f592-11e3-8410-6dd101ee9fc8.png

Haven’t committed any code yet. Let me know your thoughts.

— Reply to this email directly or view it on GitHub https://github.com/HabitRPG/habitrpg/issues/3565#issuecomment-46230778.

[cemsbr]

Much better! No rounded corners outside and the inside ones look nice. With the labels outside, the bars look cleaner. It was also nice not to choose the bar colors for the label colors, otherwise one could think he/she has more points.

On the other hand, I am concerned about how it looks like in a limited space (e.g. my desktop version below). Moreover, I'm afraid the number colors are still in low contrast, as pointed out by @Alys.

[nbering]

Personally, I like the new version in @benmanley 's post. Much more readable.

[lemoness]

I like it too! Will link to this thread on some social media to get some more feedback.

On Tue, Jun 17, 2014 at 6:23 AM, Nicholas Bering notifications@github.com wrote:

Personally, I like the new version in @benmanley https://github.com/benmanley 's post. Much more readable.

— Reply to this email directly or view it on GitHub https://github.com/HabitRPG/habitrpg/issues/3565#issuecomment-46305597.

[robeden]

I'm not a fan of the rounded corners inside the square corners. Seems like it should be one or the other.

I guess the other problem is that the whole thing just feels like a deviation from the overall style of the site. Task boxes are rectangular with flat colors. I have no problem with changing that, but it seems a redesign should be done across the board if that's what's desired... or at least have a grand design for the direction things are going.

[benmanley]

@deilann The text stroke you came up with for the contrib labels is more what I wanted to achieve here but I didn’t think to use zero blur. I’ll update and post some screenshots shortly.

[deilann]

Oh yay I helped! :D

On Mon, Jun 23, 2014 at 2:31 AM, Ben Manley notifications@github.com wrote:

@deilann https://github.com/deilann The text stroke you came up with for the contrib labels is more what I wanted to achieve here but I didn’t think to use zero blur. I’ll update and post some screenshots shortly.

— Reply to this email directly or view it on GitHub https://github.com/HabitRPG/habitrpg/issues/3565#issuecomment-46823206.

[benmanley]

Text only

Icon only

• Here's some screenshots with updated text shadow.
• I've tried either text or icons to prevent the issue @cemsbr raised regarding width. I think text would be clearer than icons, but open to opinions.
• I've also darkened the text further.

@robeden I think it's reasonable to give an RPG style to stuff in the header or elements that relate in some way to the pixel art, but keep the rest of the design flat/clean.