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. :-(