Seth Nickell

Its rough, its dirty, its still pretty cool. Diana and I originally put together a mockup for the RH blog aggregator, to replace the existing monstrosity:

It sounds like the RH blog aggregator will be moving to Planet soon anyway, so I thought I’d get an early start on the template/CSS munging. And since I was already doing it for Planet, I figured, why not take a whirl at the Planet I know and love?

Here’s Planet Gnome with the new template/css. Obviously I’m not running the planet.py updater periodically, so its fixed where I left it last night. Lots of little cleanups left to do, like using day names instead of dates, hardcoding the little image sizes to improve render speed, making it work at narrower sizes, make titles link, etc. There’s also a couple visual details off relative to the mockup (some of the spacing, the blog entry titles should be darker which looks better and is easier to read). I chose the colors 10 seconds ago, so they suck 🙂

This design isn’t just purty, its designed to improve reading too.

• The primary contextual information used for orienting the conent of a blog entry is “who”. I think most regular readers are picking up the “who” from photos, so those are visually distinct off to the left.
• The name and face are also grouped closely together, which should help people build the association.
• Your eye can skim down the un-noisy left hand side (also note that we break days using a color band with the day name, so the lightly coloured bar at the left is basically the orientation/skimming bar) to find entries
• Once you’ve located the start of an entry (this isn’t just for “searching” through the page, its a frequent orientation procedure while you read), your eye shifts over to the text in a familiar left-to-right reading direction (compare with the existing layout where people’s eyes tend to try and scan on the right which is mixed with noisy text, then once they are oriented/context loaded as to the person, have to scan left and find the start of the text line to read… the little bits of extra work add up :-).
• Most of the white on the page is inside the actual blog entry content boxes (in the word balloons). Restricting white like this draws your eye into the boxes. This reduces some of the visual overload problems in the existing pgo (its even worse in the RH blog aggregator right now). In other words, the layout draws your eye into the text, which is what the blog is really about, and also keeps the amount of text from seeming overwhelming (which is what “wandering eye with no strong visual reference” tends to do to people). The existing pgo has a strong wandering eye effect, which seriously discourages people from actually reading, whereas if the text seems more managable people are more likely to dive in.
• I think the titles of blog entries are usually useless, so I almost dropped them altogether, but didn’t, as you can tell.
• We avoided strong visual lines and dividers to make it easier to pleasantly “read through” the whole page. Lines get in the way of your eye, so they should only be used when you actually want to disrupt or control the eye’s flow.
• As far as high level design goals, I think the “word balloon” increases the feeling of attribution. Its suggestive that there’s a real person saying these things. I think its less of an issue for pgo, but for Red Hat that both improves the humanness of the blogs (the main reason companies are starting to have them, I think), and it makes it clear that the statements are individual opinions. Its subtle, but I think it has impact on how people interpret the information.
• The width of text is restricted. Its easier to read relatively narrow text columns.