You are here

Website suggestion - new comments more noticeable

42 posts / 0 new
Last post
dboki89
Offline
Last seen: 9 years 5 months ago
Joined: 2009-11-30 20:44
Website suggestion - new comments more noticeable

Please make new comments easier to spot during page scrolling.

Rationale: Ergonomics. Topics with several non-consecutive new comments force user's eyes away from the main content to the right, in order to notice the red "New" tag while scrolling. On the other hand, if the background of new comments was given a very slight visual clue, a very gentle shade of red, the eyes and focus could remain on the content. Even while scrolling towards new posts, glancing over older ones makes it easier to remember what the topic was about, or what the other comments said.

Required:

  1. slight CSS modification;
    .comment-new.even, .comment-new.odd { background-color: #ffeeee; }
    or "optimized"
    .comment-new.even,.comment-new.odd{background-color:#fee;}
  2. slight modification to the gradient image set in .comment{}, from gray-to-white into gray-to-transparent. An approximation image made in GIMP, encoded in Base64:
    data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAaCAYAAACO5M0mAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAMpJREFUOMvFUzsWwzAMgvd8/xt16tT7JFnpYP2suFnrKX5GIJDC1/sjIo/KN8t9ALj0AydABuYAcHglN+jKeDaQNsocnEAJII2Y8x5gAhgq0kqaKgIBGAQOK6UWbLKp9liruymXPq0nouoZ1noPxiDSRtbjOdAcKqU9icnYHoFmSo3RnXdfyYieycMIqxl4X3U6dSncDHfOfdbrBmSGiBxlZnTPMQqwYVy81HE6Ix82R7QNv5Aub9NZAi/bEpieZwRefyTX5jrSf50vCJ6DklQ0f3cAAAAASUVORK5CYII%3D

    "Optimized" version:

    data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAaCAYAAACO5M0mAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAMFJREFUeNrFUjEOAzEIs6X+/0edOvU/uVtdRXVlBL2uzUISjMEA74+niByVO8v7BuDUBU6ADOYGLhrBjm6MRwNpZN6MfAO16bkdtipgbkaV1AqNr0m/GZdDGUCsH6kx0VPUJ/VB1+jPnNRuxkJU0/eGL9+HM50wY5y2TZQqY5QPXWFEDb8c4RQD2l+nk6WIGH5T7lm3DUgPrdyzdprWxwRgMNrMcYaRPzZH9IafiMoxnTTcqtFSN3AarjC5jIBt/nVeCJ6DkkcnzEAAAAAASUVORK5CYII%3D

Conclusion: Might be worth to try it for a few days. It should improve usability for logged in users without impacting any performance, and if there is negative feedback it's fairly easy to remove. After all those recent CSS changes, what's one more? Blum

Gord Caswell
Gord Caswell's picture
Offline
Last seen: 1 day 5 hours ago
DeveloperModerator
Joined: 2008-07-24 18:46
Stylish

I use the Firefox addon Stylish with the PortableApps.com Enhancements+ style to do exactly what you're asking for.

dboki89
Offline
Last seen: 9 years 5 months ago
Joined: 2009-11-30 20:44
Heh, glad to hear

I was thinking it would be useful as a default option on the website. Kind of like merging patches upstream in programing. Makes one less custom thing for others to install. Wink

My posts are old and likely no longer relevant.

Gord Caswell
Gord Caswell's picture
Offline
Last seen: 1 day 5 hours ago
DeveloperModerator
Joined: 2008-07-24 18:46
True

I can definitely see the benefit of having it upstream - I sometimes wish i had the enhancement when I'm looking at the site on my iPhone.

GlennAllen
Offline
Last seen: 9 years 4 months ago
Joined: 2011-03-08 14:46
Sort of agree

I agree that the 'New' was sometimes a little less than easy to notice. I just make it blink -- obvious (hard to miss) w/o being too distracting (for me anyway). To each his own.

Pyromaniac
Pyromaniac's picture
Offline
Last seen: 9 years 2 months ago
Developer
Joined: 2008-09-30 19:18
Huh...

I always thought it was easy to see the word "New". If I just scroll casually, I see a flash of red out of the corner of my eye, scroll up and it's there.

gluxon
gluxon's picture
Offline
Last seen: 3 years 9 months ago
Developer
Joined: 2008-06-21 19:26
It's an nitpicky thing.

It's an nitpicky thing. Looking at "New" forces the eye to move off the content while reading, and it's not immediately noticeable. Maybe it's just my, but I can see "New" in the corner of my eye, but not exactly which comment it is.

GJansen
Offline
Last seen: 11 years 7 months ago
Joined: 2011-03-06 09:14
New?

I didn't even new there was a 'new' until this thread :). Guess I'll go with OP's idea.

consul
consul's picture
Offline
Last seen: 8 months 3 weeks ago
Joined: 2007-05-02 13:47
rather not ...

have then 3 sets of colours in the rows, the light grey, dark grey and light red.
For me, the red "new" on the right works well enough at not being obtrusive. I'm here everyday and I notice it

Don't be an uberPr∅. They are stinky.

John T. Haller
John T. Haller's picture
Online
Last seen: 52 min 27 sec ago
AdminDeveloperModeratorTranslator
Joined: 2005-11-28 22:21
Experiment in Progress

I've implemented something similar to this now. We'll see what folks think of it. Note that you may still have the non-transparent version of that image unless you clear your browser's cache.

Sometimes, the impossible can become possible, if you're awesome!

Gord Caswell
Gord Caswell's picture
Offline
Last seen: 1 day 5 hours ago
DeveloperModerator
Joined: 2008-07-24 18:46
Great start

I like the change, but I find it's not quite dark enough to be noticeable at first glance. What about something like #FFDCDC?

John T. Haller
John T. Haller's picture
Online
Last seen: 52 min 27 sec ago
AdminDeveloperModeratorTranslator
Joined: 2005-11-28 22:21
Hmmm

What say you?

Sometimes, the impossible can become possible, if you're awesome!

Ken Herbert
Ken Herbert's picture
Offline
Last seen: 9 hours 52 min ago
DeveloperModerator
Joined: 2010-05-25 18:19
Honestly looks a bit too

Honestly looks a bit too standoutish to me.

Plus if you are interested in any level of web standards for readability and accessibility, the signature text and the "New" text in the top right both fail the WCAG contrast test against both the new message background and the existing background.

John T. Haller
John T. Haller's picture
Online
Last seen: 52 min 27 sec ago
AdminDeveloperModeratorTranslator
Joined: 2005-11-28 22:21
Agreed

I backed it off a bit. Let's give this a try. It's supposed to be subtle. Just enough to draw your attention more easily.

Sometimes, the impossible can become possible, if you're awesome!

Gord Caswell
Gord Caswell's picture
Offline
Last seen: 1 day 5 hours ago
DeveloperModerator
Joined: 2008-07-24 18:46
Still good

I'm good with this. We'll see what others think.

Pyromaniac
Pyromaniac's picture
Offline
Last seen: 9 years 2 months ago
Developer
Joined: 2008-09-30 19:18
Honestly..

I strongly dislike it. It's too... I don't know the word in english, but I'll say corriente, for which the closest word google translate could come up with was unexceptional. So I'll take it. I really prefer the word New over the whole color change, but I know you mustn't ignore the masses and so I'll tuck my thoughts in the back of my head and hope I get used to it (if indeed you choose to go with it).

GlennAllen
Offline
Last seen: 9 years 4 months ago
Joined: 2011-03-08 14:46
Eh?

I'm sure specific suggestions will be entertained, but what does "New over the whole color change" mean? (Do you mean a column of 'New' from top to bottom?)

As for me, I don't like the new look enough to disable my current look (but, that's the beauty of Firefox/Stylish--most things are easy to "adjust" to your liking).

Pyromaniac
Pyromaniac's picture
Offline
Last seen: 9 years 2 months ago
Developer
Joined: 2008-09-30 19:18
Upper right

the word "New" is there.

I personally am fine with just that.

GlennAllen
Offline
Last seen: 9 years 4 months ago
Joined: 2011-03-08 14:46
OK

Well, another couple alternatives: a (thin) reddish border all around the new comments or just a (somewhat thicker) border on the right.

Gord Caswell
Gord Caswell's picture
Offline
Last seen: 1 day 5 hours ago
DeveloperModerator
Joined: 2008-07-24 18:46
Much better

It's much better now.

Winterblood: yes, it's standoutish, but that's the point, make it obvious which posts are new at a glance. If this becomes a permanent change, we can get rid of the red "new" text, so that would get closer to meeting the standards you mention.

vf2nsr
vf2nsr's picture
Offline
Last seen: 7 years 8 months ago
Developer
Joined: 2010-02-13 17:10
I like

In fact it should make it much easier when there are multiple new reponses in different parts of a topics "tree"

“Be who you are and say what you feel because those who mind don't matter and those who matter don't mind.” Dr. Seuss

GlennAllen
Offline
Last seen: 9 years 4 months ago
Joined: 2011-03-08 14:46
Where?

Not seeing any difference (on prod site anyway--are you "experimenting" on dev?). (I clear cache at Fx shutdown.)

UPDATE: OK, it's there now. Looks OK, I guess--the silver and "pinkish" seem to clash a bit to me, but... meh.

UPDATE 2: lighter pink now, less "clash"

UPDATE 3: I like this somewhat better:

.comment-new.even, .comment-new.odd
{ background-color:  #ffe0e0  !important;
  background-image:  -moz-linear-gradient(top,#ff9090,#ffe0e0 55px)  !important; }
Ken Herbert
Ken Herbert's picture
Offline
Last seen: 9 hours 52 min ago
DeveloperModerator
Joined: 2010-05-25 18:19
That will only work in

That will only work in Firefox-based browsers though.

There are also (different) ways to do it in Webkit, IE and Opera, but not all of them function the same as I believe IE can't handle colour stops (the 55px bit in your background image).

GlennAllen
Offline
Last seen: 9 years 4 months ago
Joined: 2011-03-08 14:46
Yeah, I know...

but I was more interested in posting the colors and "suggesting" the gradient change (plus, I [obviously] use Firefox Portable Biggrin [<- this emoticon doesn't look that much like a "smile" to me]). However, w3c has standardized on the Mozilla Gecko format for gradients, so WebKit et al will be changing theirs. The gradient support also only exists in the newer versions of the browsers (which one would hope that almost everyone reading these forums uses(?). Wink [<- and this one really doesn't look that much like a "wink"]

dboki89
Offline
Last seen: 9 years 5 months ago
Joined: 2009-11-30 20:44
Thank you John!

Thank you John! Biggrin I've been away for the weekend, but I like the change. Now, let's hope the lynch squad doesn't mind... Smile

Oh, I see I'm not late after all.

My posts are old and likely no longer relevant.

consul
consul's picture
Offline
Last seen: 8 months 3 weeks ago
Joined: 2007-05-02 13:47
lighter ...

if it's going to be a shade of the red, make it one step up from imperceptable red. It should show a very slight difference so it doesn't distract you from the thread chain.

Don't be an uberPr∅. They are stinky.

Rapscallion
Offline
Last seen: 3 years 5 months ago
Joined: 2008-11-18 16:19
Love it!!

Love it!!

It amazes me that on the internet you can be anything you want, and yet so many people still choose to be idiots.

Ken Herbert
Ken Herbert's picture
Offline
Last seen: 9 hours 52 min ago
DeveloperModerator
Joined: 2010-05-25 18:19
I'm still not big on the pink/red thing

I'd be more inclined to go for yellow. It is a much easier colour to contrast for readability, and looks less like it is screaming "YOU HAVE TO LOOK AT ME" while still being visible.

Maybe something like this?

All it takes is this:

.comment-new.even, .comment-new.odd
{
   background-color:#ffe;
   background-image:none;
}
GlennAllen
Offline
Last seen: 9 years 4 months ago
Joined: 2011-03-08 14:46
But

the "pink/red" is just a lighter color of the same PortableApps "red", so it's more "logical" (to me). Plus, my normal/not-new comments already use a yellowish shade for a background.

Ken Herbert
Ken Herbert's picture
Offline
Last seen: 9 hours 52 min ago
DeveloperModerator
Joined: 2010-05-25 18:19
Just because it is

Just because it is mathematically a lighter shade of the PortableApps red doesn't make it an attractive colour, and doesn't mean it fits into the design of this site. Designs involving red/pink are, to me, one of the hardest things to get looking right, and most of them don't - I hate when clients ask for red or pink, I just try to avoid those colours as primary design elements as they are easy to get wrong. This is one of the few sites who's red design I like, but I just think the pink is reaching too far into potentially ugly territory. Plus from a readability point of view, it is one of the hardest colours to provide a good, readable contrast for text.

And please don't take this the wrong way, I am happy for the discussion etc. and I'm not trying to dismiss your opinion, but I don't think that you using a particular colour for one element in your custom CSS should influence John into not using that colour in the default CSS for a different element.

GlennAllen
Offline
Last seen: 9 years 4 months ago
Joined: 2011-03-08 14:46
True enough

I can't really disagree with your statement that red can be "difficult". I generally don't like pink shades much at all. I played around with several here (darker is too dark and lighter is too light--again, for my taste). But, red shades are generally good for signifying change (or "new"); and in this case it's more of a temporary change. It does what it's supposed to as far as I'm concerned, which--yes--is to be very noticeable without being obtrusive. However, whatever the site ends up using, I'll still be using what I'm using. At least the text is black by default, so it's easy to read (unlike those places where the text is just a medium grey).

Ken Herbert
Ken Herbert's picture
Offline
Last seen: 9 hours 52 min ago
DeveloperModerator
Joined: 2010-05-25 18:19
Yeah, sites can get away with

Yeah, sites can get away with grey as a font colour when it is dark enough (#555 or darker on white, #333 or darker on light grey), but black is usually a better choice.

One of my small issues with this site is the colour of the signature on the blue/grey background. Do I whinge about the contrast not being to spec for people with sight-affecting issues or do I just agree to disagree with John's design decisions because it isn't really "important" text?

And thanks for not being offended by my previous post. I seem to have a rare talent for offending with comments that I think are just being to-the-point. I almost didn't post it in fear of it being taken the wrong way.

dboki89
Offline
Last seen: 9 years 5 months ago
Joined: 2009-11-30 20:44
Adding on your discussion

I agree with both of you on several accounts. Red is not as easy to work with as for example blue or silver, and it often ends up less than ideal, but red looks really nice on PA. I went with that color in my suggestion because 1) PA already used various shades of pink in multiple places and 2) it looks more consistent with the overall red website.

Out of curiosity, winterblood, would you consider #555 to be dark enough for the signatures or is that still too bright to you? Doesn't really matter since it's less important content, just curious.

GlennAllen, I've found that red border would look out of place. Since the website uses a subtle border color, default comment borders almost blend with the background. Red border makes them look very boxy. Not sure if setting a border-radius would make it any better. Anyway, I was looking for an easy tweak, one John might actually implement and that wouldn't impact the overall design. Just a simple usability enhancement.

My posts are old and likely no longer relevant.

GlennAllen
Offline
Last seen: 9 years 4 months ago
Joined: 2011-03-08 14:46
Yep

I'm also using a 5px border radius, which is something I typically do.

This is what I'm now using for comments (only the first section isn't "new"):

/* comments */
.comment {
  background-color:  #ffd  !important;
  background-image:  -moz-linear-gradient(top,#fb4,#ffd 55px)  !important;
  }
.comment .new { color:  #b00  !important; }
/* new */
.comment-new.even,
.comment-new.odd
{ border:  solid 1px #B43006  !important;
  border-radius:  5px  !important;
  background-color:  #ffe0e0  !important;
  background-image:  -moz-linear-gradient(top,#ff9090,#ffe0e0 55px)  !important;
  }
.comment a[href="/user/172683"]
{ background-color:  #0b0  !important;
  color:  #ffb  !important;
  font-weight:  bold  !important;
  }

UPDATE: I decided to add a left border for #comments and .indented -- to get some "tree lines"; since the rounded corners (and dark border) don't really look good with that, I'm just left with the reddish bg/gradient (which is fine all by itself).

Ken Herbert
Ken Herbert's picture
Offline
Last seen: 9 hours 52 min ago
DeveloperModerator
Joined: 2010-05-25 18:19
The current contrast levels

The current contrast levels are fine to read (for me). It is dull, but it shouldn't be too heavy or it will appear to be part of the main content. I have still seen a couple of people in the forum mistake a signature as content, so I would prefer there to be a non-text separator like a top border on the sig.

What I am comparing the contrast to is the WCAG 2.0, which is a set of guidelines that specify ways to make websites more accessible to people with vision, hearing or other issues that may make traversing a website more difficult.

Going by the WCAG #777 fails, #666 passes to AA standard, while #555 passes to AAA (the highest) standard. There is an A standard, but it does not have any strict rules regarding mathematical contrasts.

solanus
solanus's picture
Offline
Last seen: 9 years 8 months ago
Joined: 2006-01-21 19:12
I'm not overly fond of the pink, either.

It definitely does the task, though. It really helps make new comments jump out.
I like the idea of using a thicker or darker border for new posts instead.

I made this half-pony, half-monkey monster to please you.

GlennAllen
Offline
Last seen: 9 years 4 months ago
Joined: 2011-03-08 14:46
Too much? :D

I'm actually using all of my "test" methods right now: light red background with the gradient at the top, thin red border, and the thicker red border on the right (which I'll probably drop in the near future). New posts are easy to pick-out without being at all distracting (to me). I've also taken to highlighting my own profile link in the header to make my own posts more readily noticeable. I just think the quicker you can "see" what you might look for, the easier it is to read the posts (without being distracted by the "what's new?" or "where's mine?" little, nagging, internal questions).

Simeon
Simeon's picture
Offline
Last seen: 9 years 8 months ago
DeveloperTranslator
Joined: 2006-09-25 15:15
ditto

I think the combination of the pink and the grey shadow at the top is a bit strange.

"What about Love?" - "Overrated. Biochemically no different than eating large quantities of chocolate." - Al Pacino in The Devils Advocate

dboki89
Offline
Last seen: 9 years 5 months ago
Joined: 2009-11-30 20:44
Due to community feedback...

I'd just like the comments to be a little more noticeable, regardless of the exact implementation or color. Going by general feedback, I'd like to edit my initial suggestion. John, would you please consider trying another iteration? Either a brighter shade of red, like #fff8f8, or as winterblood said a very bright yellow. Though red looks more consistent.

Another thing worth trying, if it's not too much of an effort, is a second gradient image specifically for the new comments. One that uses a darker shade of the whatever background color is decided on.

Example code usable in Stylish:

@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain("portableapps.com") { .comment-new.even, .comment-new.odd { background-color: #fff8f8 !important; background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAaCAYAAACO5M0mAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAIlJREFUOMvFkTsOwCAMQ18k7n/C3qKla7oUhFJD2JoFFFmOP+bH4WxMAer7N8DDv78N2JYpYwSOzB/gOBZ3BbgEgwedHYjQ6DPX2/FMjQA+nk7N1AXTxzUrUDtdg76U0UR+XU4B7o1mrACn6NmijKhRtWPKzLKZK4mmA5WZNPBpnuq0YrdtMz/OAxJCNxiUweBFAAAAAElFTkSuQmCC") !important; } }

Example code for the website (image currently in Base64):

.comment-new.even, .comment-new.odd { background-color: #fff8f8; background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAaCAYAAACO5M0mAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAIlJREFUOMvFkTsOwCAMQ18k7n/C3qKla7oUhFJD2JoFFFmOP+bH4WxMAer7N8DDv78N2JYpYwSOzB/gOBZ3BbgEgwedHYjQ6DPX2/FMjQA+nk7N1AXTxzUrUDtdg76U0UR+XU4B7o1mrACn6NmijKhRtWPKzLKZK4mmA5WZNPBpnuq0YrdtMz/OAxJCNxiUweBFAAAAAElFTkSuQmCC"); }

I strongly feel this would be useful, we just need to find the proper tweak. Though I'll drop it if it doesn't get implemented.

My posts are old and likely no longer relevant.

John T. Haller
John T. Haller's picture
Online
Last seen: 52 min 27 sec ago
AdminDeveloperModeratorTranslator
Joined: 2005-11-28 22:21
Noticeable?

The new comments are already absolutely impossible to miss... to the point people complain they are too noticeable, so I don't think we'll be making them MORE noticeable. The only situation they wouldn't be noticeable is if your monitor's color calibration is really messed up.

Sometimes, the impossible can become possible, if you're awesome!

dboki89
Offline
Last seen: 9 years 5 months ago
Joined: 2009-11-30 20:44
Sorry, wrong words. More than before, less than now

Due to complaints, I've suggested using even brighter colors, the ones that are less noticeable than currently. Toning it down so to speak... Sorry for poor choice of words, I was saying to others why I suggested that color in the first place ("to make it more noticeable than the way it was"). Then follows a suggested code that should be less visible.

Edit: from this to something like this. Should address concerns raised by the community, and the gradient change is suggested due to Simeon's input.

My posts are old and likely no longer relevant.

GlennAllen
Offline
Last seen: 9 years 4 months ago
Joined: 2011-03-08 14:46
More to the point

I think the real complaint is that the silver/grey gradient and the pink background look, well, kind of ugly together (and, yeah, "ugly" can be "impossible to miss"). That gradient looks fine with the normal comment's white background, but it doesn't really look good with the pink. (Of course, to each his own.)

Log in or register to post comments