xmouse

Front page designs

Something that’s been on my mind slightly more than the usual lately is how the front page of weblogs are presented. By ‘front page’, I’m refering to the page the user sees when visiting the weblog’s base address: not a specific archived page, but the page that normally displays the freshest posts from a weblog. Different people present their front pages in different ways depending on the different goals and aims a site has, and the message the author wishes to put across. I’ll start with some case studies and move on to my thoughts on the issue itself.

WaSP

The Web Standards Organisation’s weblog is your bog-standard front page. The recent x entries displayed in full, with no real indication of what kind of website it is (apart from the more-than-vague ‘Recent Buzz’ title). This is real fault existant in far too many web pages (not necessarily excluding my own, although I have tried to be careful with this issue).

But it serves its purpose fairly well. As this is a frequently updated weblog it makes sense to have many entries displayed, and rendering them in full, although adding to the length of the page, decreases the number of clicks needed to read an entry. The metadata given with each entry is nicely done: an intuitive little box on the right, which gives the author’s ‘WaSP name’ (although I would have thought that the full name would be more readable and therefore useful), the date (which is linked to the entry’s permalink) and the topics the entry covers.

A quick summary of the WaSP organization, and a slightly less brief one are also present. In my eye this is confusing: both should be together (perhaps with the more brief one at a larger font size) because they describe the same data. It’s also fairly confusing (albeit useful to the frequenter) to have the weblog as the front presented to all users.

This is simply a weblog, short, sweet and with no frills. The thing is, these frills make life a lot easier for the users, but as it is integrated into a whole website I guess they probably don’t have enough space to put in all the whistles and bells.

Skyzyx

Next up is Ryan Parman’s weblog. This is slightly more inventive: keeping the page length down by only rendering the latest 3 entries. After that, another five are abbrieviated to title and comment count. This is someone who’s taken a bit more time with their templates, but still there is no indication of this site’s raison d’être, less of what indeed a weblog is.

One strange thing about Ryan’s weblog is that the content only starts below half the way down the screen. Some scrolling is required straight off to get to the most recent content (I admit that my site is appaling in this nature, and indeed is one thing I need to address). The navigation is also over-confusing: there’s really far too many options available, and it’s not even complete (the feed link is hidden down at the bottom of the page). On the positive side, the design is clean, clear and all the information is pretty well colour coded which allows me to find the content very easily.

Ryan’s site follows the paradigm of ‘Some full entries then some more titles’ also featured by such destinations as Jeff Croft (with a few differences) and SimpleBits (again, a few things have changed). This site is basically built around the weblog, and so a fairly traditional weblog layout is a good idea here.

Design By Fire

Andrei’s weblog should be a great example of how to design a front page. After all, a front page is predominantly an interface, and Andrei works (or used to work?) as an interface designer for a certain little company. Although I much prefered Andrei’s super-controversial and sadly short-lived layout that combined all the best elements of magazine layout, minimilism, and really made DxF a very interesting weblog to read and be involved in for a while.

Moaning aside, Design By Fire’s front page is quite interesting: the main content column features the latest entry in all its glory (giving a very changing front page, and lets users know with a glance when the site’s been updated), followed by a section that features the latest comments posted (a very simple way of advertising the discussions, and gives the debator an useful way of seeing when their participated-in discussions have advanced), followed by less recent entries, all with the briefest of metadata and a short summary. These summaries are just pulled from the article itself, rather than being seperately written words, which is probably a less effective way of doing things. The less recent articles, abbreviated to just titles, are again repeated down in the sidebar.

This front page does manage to cater for nearly any type of user possible, with the possible exception of a first-timer. And it does so with also fitting in Google Ads, the latest entry immediately available, and big text (where legibility is necessary, he uses smaller text where its not so important). The latter is certainly one thing I need to consider in my own pages. The downside is that there are so many sections that the user is bound to get confused. Trying to confine everything into two columns has meant prioritisation, and the section that the user wants to see may not be immediately available.

Design By Fire confuses me. Andrei’s stated that he wants his site to be more publishing platform and less weblog (fair enough), but I don’t get why he’s hidden everything but design articles behind a really small icon! Only design-themed entries hit the front page and the ‘contents’ link is only the design category archive. To get to anything else you have to jump through so many hoops I can’t even remember them after having studied the site. It’s weird. The front page doesn’t help either. The two-columned layout stenches of clichéd weblog design and gives no indication of Andrei’s wishes. The only Unique Selling Point is the orange, and I know enough people who are apparently blinded by that background colour.

Whitespace

My final case study will look at the example lead by designer-debator Paul Scrivens (aka Scrivs). He’s thought about the design of his front page considerably, as can be seen from the careful layout presented to you. Here’s what this site does right:

For the first time user, a large ‘About Whitespace’ section is present. This a very helpful summary, giving the user in a few sentances an idea about what the content will be about, the community-based concept and even the writing style and humour of Scrivs himself. This is something every page should feature. One problem I perceive is that in trying to be humorous it forgets to explain to the lowest set of web-experience. It states it’s a weblog, but what’s a weblog? Can you remember how long it took you to understand exactly what constitutes a weblog? Ever tried explaining it to anyone? It’s tough. I try to cater to this need by linking to my about page which quotes from blo.gs.

Next, (nearly) all the functions of my (rather sophisticated, IMO) archive pages are featured without the need to click through to any seperate page. This allows Whitespace to exist as one static page and a large number of (I assume) dynamically-generated entry pages. Lots of the entries are shown as just a title and comment count, but as I’ve investigated, that’s almost useless: it’s only useful for someone who’s visited recently and knows the name of the entry that they want to revisit. Then the content that would be normally in a sidebar (and indeed, is, in the entry pages) is reproduced over to the right of the screen. The latest entry is treated to a summary, and this is the true summary type, not just pulled from the entry as Andrei’s are.

Overall I’d say this is a fairly effective layout. There are negative points: because there’s so much information available the whole picture is rather confusing without some information design to help things out (I assume he kept things clean in the interest of minimilism, but I don’t think it works here). Also, to get to any specific part of the interface would involve a lot of eye searching and mouse work, but this has the upshot of reducing scrolling and click counts. The minimilism gives an indication of Paul’s design tastes, the summary of his humour. I think the only thing missing is perhaps a sign of how important community is to Whitespace. Granted, he tries to make this distinction in the summary, but I think giving the latest comments section more priority would be a good idea here.

My thoughts

Let me apoligise first: I’ve done more case studies than I wanted and I even had to cross Stopdesign off my list! But anyway. My thoughts are that your front page should do exactly what good interface always strives to do: present the information that will be useful, nothing more, nothing less. Easier said than done. It’s important to realise that front pages are interfaces, and the most-used interface of any site by that matter. In an ideal world, the computer would read the mind of the user, take them straight to the information they wanted, whilst telling them exactly what is going on, where they are and where they need to go.

It’s not an ideal world. And so, we have to cater for as many types of users as possible without overloading any type of user with useless information. What different types of user do we have? Well, I think the main types are these:

  • First-time users, aka ‘Newbies’. Those with no clue what this site is. Perhaps with no clue what a weblog is. Someone who thinks the Google search box is the address bar.
  • The casual reader, the weblog-hopper, the bored-but-experienced web user just looking for something to read.
  • The regular. Those who follow your weblog.

We need, therefore, to:

  • Tell first-timers where they are and what this site is in existance for, as well as what sort of things you can find here. That’s why so many sites provide an ‘about this’ box. Don’t get carried away here: it’s easy to let your description clog up the interface for the other two types. Perhaps link to a document covering the topic in more detail?
  • We also need to tell the casual reader about what this site is about: at a glance, give a sample of the content or describes what topics you as the author(s) will be covering. This must also serve as an advertisment, snatch their attention, make them want to read your weblog.
  • Finally, we need to highlight to the regular any new entries, and give them the option of finding other ones (my methods of doing that have already been discussed).

I’ve already discussed how several existing sites implement (or not) those needs. What are your thoughts?