If you don’t want to read another story discussing the design of DK5, read no further. Skip it if you’re tired of it. I don’t mind if you don’t want to read it.
Okay, the disclaimer is over.
To my mind, successful visual communication is directly related to “visual hierarchy.” Visual hierarchy refers to the order in which elements in a design grab your attention and focus. It is derived through contrast. An element in a design which is in contrast to the elements around it will be more visually dominant, and will stand apart. An element in a design which is similar to the elements around it will be more visually subordinate, and will “group” visually with similar elements. It is important to have both similarity and contrast in a design.
Too much similarity and nothing stands out. Sometimes this is appropriate: in a page in a novel, for instance, you generally just want the reader to begin at the top left and not be distracted by anything else on the page. A magazine, newspaper or web page needs some contrast so that important features stand out. Too much contrast, though, means that the viewer can’t figure out where to start and what is important. Design strikes a balance between the two.
Contrast is derived in a number of ways: scale, location, color, complexity, recognizability, etc, all create contrast. In a design with a lot of red, blue will stand out. In a design where everything is large, a small thing will stand out. Context is everything!
There has been much gnashing of teeth/rending of garments regarding the design of DK5, and much of it focused on the design of the type. I think the type is a problem (particularly for people with disabilities), but other qualities of the new design add to some users’ difficulty with using the site.
Here is the blow-by-blow of what I see and don’t see on the front page design.
The first thing I see in DK4 is the masthead and logo of our beloved flag-waving dude. “News Community Action” serves as a tagline for the site. I immediately know what website I’m on. I think the banner could be downplayed a bit more, but not as much as it is in DK5.
The first thing I see in DK5 is a bounce between the story headline and its image. I can’t decide which is more important, but it does draw me into the site and to the current top story.
DK4 reads more like traditional media, and DK5 downplays its masthead branding and pushes forward the story. IMO the DK5 banner is visually weak and has many little elements that clutter but don’t unify it. I think it works okay but I think it could work better if it stood out a bit more and were more visually unified as a banner.
The second thing I see in DK4 is the headline for the story. That is due, in part, to its location, since it isn’t particularly visual (the Community Spotlight banner is actually more obvious but we’re trained to look at the top left for important information so that is why the headline works).
The second thing I see in DK5 is all the sidebar images. This is a serious visual hierarchy problem. The banner/masthead should probably be more important than all the little images in the sidebar. I know why they are there, but they do clutter the page and distribute areas of visual dominance in ways that aren’t necessarily commiserate with their actual importance.
In DK4, the third level of hierarchy is the Community Spotlight banner and diaries. That is appropriate; the sidebar should probably be at that level of importance.
In DK5, the third level of hierarchy is the banner. It really should be more important, or at least as important, as the sidebar. I personally find the new logo to be somewhat generic, and it is easy to ignore with all the other visual clutter in the banner. My eye pings back between “Daily Kos” and “Blog it!” with the other little icons and whatnot just adding to the visual fray.
On DK4, the last thing I notice (other than the front page story text) is my personal “welcome” box. One thing that DK5 did that is unequivocally good is to get rid of that box, and have it accessible as a dropdown when I click on my username. Hooray! (IMO, “News” “Community” and “Action” should work the same way: not a hover activated, but click activated dropdown).
On DK5, the last thing I notice is the sidebar heading and the story titles. The images have already jumped out as a separate entity. They don’t really read as a unit in the hierarchy, and as I’ve mentioned, I think those thumbnail images have too much visual importance.
What people don’t see or ignore is sometimes as important as what they do see. In DK4, I ignore/don’t see the primary navigation and the login stuff. That is actually okay; I know where to find it if I need it. Honestly, I never used the primary navigation anyway.
In DK5, I ignore/don’t see the tags at the top. I actually don’t see them. I don’t use them so I don’t care, but it is interesting to me that it took me many many visits to actually notice they were there. They seemed more like part of the browser than part of the page. I also don’t see/ignore the “News” “Community” “Action” menu; I wouldn’t use it anyway, but I think that having it trigger the dropdown on hover is a problem because it gets in people’s way. I have read a lot of complaints about it although my big screen means I don’t encounter that problem. I also think that having them persistent when people scroll is annoying. They are EVER PRESENT. Their disruptive trigger follows you to as you scroll, even into the comments. UGH!
The new design is definitely more contemporary, visual and “youthful” in its feel. There are some plusses to that. It does draw you in much more, particularly if you aren’t a longtime user — I didn’t think much about the DK4 design after its launch until DK5. Aside from issues of typography and other usability, I think I can get used to the “look” but the sidebar and banner have their relative importance mixed up, and there are still too many disparate elements clamoring for our eyes. The experience is visually fragmented and that does impact the emotional experience of users.