Kos Komments are one big steaming hot MESS!
I knew it was gonna happen. Someday soon, DK5 would be deployed. I viewed the beta site, I started a few critique threads, fought valiant but losing battles for the continuance of custom tip jars, comment headlines, and image hovers (title attribute in the img tag). Happily, some of the big design problems have been resolved. But the comments design is still — you guessed it — a HOT MESS.
Here is my main problem with it. The comment threads are no longer scannable. Why is that? Primarily, it is a problem of visual hierarchy: how the different comments are grouped visually with the comments they respond to, yet still remain their own separate unit. How does the current design fail?
1. No more comment headlines. That little bold headline really helped introduce the next comment. It drew the eye. It was easy to see where a new comment began, because the headline was bold. There are other issues about the loss of the comment headlines, but they are separate from the usability overall of the comment design, so I won’t describe them here.
2. Avatars. Now that we have these big square avatars in front of every comment, they become the first thing that attracts the eye. Busy, bright ones grab the most attention. Many are unreadable. Those of us who eschew the avatar get the grey flag-waving kos dude, so most avatars at this point are identical. The avatars in the comments are a failure on all levels. They don’t provide useful information and they draw attention away from the important thing: being able to read the comments in their proper order and grouping.
3. No margin. There are indents for nested comments (comments that are replying to the comments above), but without a left (and to a lesser extent, right) margin, the indents are not as useful as they could be. There is too much white space at the left; the grouping of the comment indents loses its ability to communicate the “level” of the comment. You can’t easily tell which comments are replying to the diary itself, unless you notice the missing “replying to” name that is in bold.
4. “Replying to” username in bold. It is nice to know to whom a comment is replying, but having that name in bold and in black makes it seem like IT is the important, not subordinate name.
5. Commenter’s name in orange. Yes, I know it is a link, and that is good, but it fades away into the page and becomes difficult to see. The “replying to” name is bold, and steals its (visual) thunder. This is an easy fix, but right now, when you scan the comments, all the “replying to” names jump out, and the commenters themselves are nearly invisible in comparison.
6. Thin border at the TOP of a new comment. This border (or rule) at the top of a new comment is supposed to help separate it from the previous comment. However, it isn’t as effective as a border at the BOTTOM of the new comment. I did a redesign. You’ll see. Changing the location of the border helps. A thicker border would help even more but that was more photoshop work than I was willing to do.
7. Lots of other visuals like the downwards pointing arrow graphic pull the eye away from the comment. That arrow reinforces the right margin of the comments, but that isn’t really needed as much as reinforcing the left margin of the comments.
In sum, too many graphical elements competing for the eye, but which do not help reinforce the proper grouping of comment information. Not enough graphical elements to reinforce the grouping of comments. Grid needs to be more explicit. Here are some screenshots that illustrate my points.
Screen shot of current comment design: HOT MESS
What I see first: the busiest of the avatars
What I see second: the “replying to” username
What I see third: other graphical elements
My eye is jumping all over the place! I can’t read the actual text!
Here is a section of the comment thread with bold added to the first line. It helps! Please, bring back comment titles!
Here is a quick re-design that creates a margin (gray behind the comments), changes the location of the borders that separate comments, and changes the typographic design of the commenter and the “replying to” names.
Awesome! I can read these much more easily!
Okay, I want my custom tip jar back too. All the fun has been taken out of the DK diary process. :-(
UPDATE with redesigned “rec” interface in the comment. After commenting and reccing comments in this diary, and accidentally clicking on the “reply” icon instead of the tiny star with just a number (or not) next to it, I did a quick redesign of that interface.
New “rec” interface
Still can’t figure out how to make the images larger (help, someone?). in this design, the icon and text is swapped (text on left, icon on right), with more space between Reply Rec and Flag. Also, I’ve added the text “Rec” to the little star icon. And everything is a scosh bigger. (edit: elfling helped me out: centered images will display larger. Hopefully left and right aligned images can also display a bit bigger too. Someday.)
Now that I’m “blogging” and editing my “blog,” I would love a repeat of the formatting tools at the bottom. You have to scroll to the top to format anything when you have a bunch of images in a blog and it is an irritation as well as a usability problem.
And Sweet Baby Jesus, the tiny orange dot that indicates a “new” comment is next to invisible. Here are the problems with that:
1. Dot combined with avatar. It’s just busy, and the dot is small.
2. Dot doesn’t MEAN anything. What is a dot? The word “new” communicates what is needed; the dot is a meaningless, generic shape; not even an icon. And an icon for new isn’t helpful either. How about reverting to language.
3. Dot goes away when you scroll. Rather than keeping the dot present until you refresh the page/return to diary, the dot goes away after you’ve scrolled to it and stayed there for a bit. This eliminates new comments before you can really figure out what the new comments are, especially if they are nested in the comments conversation, and not just appended at the end of the comment thread.
As I interact with the comment thread here, I get better at some things, but finding a new comment will continue to be difficult. Please, consider making it explicit and persistent (until I make the choice to leave the comments and thus “refresh” the newness of a comment).
A simple suggestion:
