"ia" in Weblog

In my redesign post I mentioned this ‘zooming content’ idea I’ve adopted. I don’t think the concept is new but I’ve not seen anyone write about it so I’m jumping in… Each page is based on what I’m calling a ‘zooming’ layout. By that I mean that the information view and relevance on the page zooms out as the page goes down. This is influenced by three things:

1. Derek Powazek’s Embrace your bottom! article.
2. Peter Morville’s Ambient Findability.
3. The Best of Eyetrack III: What We Saw When We Looked Through Their Eyes.

The Eytracker III study from a couple of years ago found that people aren’t afraid to scroll below the fold but that their scanning became more rapid. To cater to this behaviour I have limited the amount of information in the lower sections of the page. The page content becomes more and more brief and scannable as the page goes on. Take the weblog index for example: it starts with a complete entry, then moves to summaries of 5 recent entries, along with access to the archives, and finally to external links.

Every page follows this pattern. The top of the page deals with specifics and details while the bottom of the page presents an overview, encouraging scanning and, hopefully, giving people what they want, when they want it.

Why have I done this instead of going for the more conventional two column blog layout? Conventions are our friends, after all…

In Ambient Findability Peter Morville calls web pages ‘discreet findable objects’ that can be accessed out of context via search engines… Basically, there’s a very good chance that people are coming to a content page from Google having performed a search on a specific keyword phrase. The standard two column layout presents these nice new visitors with a lot of information they’ve not asked for and are probably not interested in. I wanted to let people get what they came for before bombarding them with choices, in line with Derek’s suggestions.

Content is king and will govern both incoming links and page weighting by the engines. If someone gets to one of my pages it will probably be thanks to the content so I’ve made sure I give that up front. The article, blog entry or portfolio item is there in full at the top of the page with nothing else in the way. The main navigation gives a broad overview of the site and the metadata to the right suggests the presence of more local and related posts but I’ve tried very hard to keep noise to a minimum. I’m hoping that I’ve left enough wayfinding and orientation hints at the top of the page to let the user reach a decision about the context of the site and content before continuing down the page.

After the full entry I zoom out one level.

On the index pages this steps out to an overview of the most recent posts, kept short and scannable; On the content pages this is lists of two different types of entry: the most recent ones, which I’d obviously like to promote to new visitors, and related (and hopefully relevent) posts, which are an attempt to push old content. (This second group is found by passing the article title into my site’s search and listing the top results.) Derek Powazek advocates using the bottom of the page to give readers somewhere to go but I had one more question I thought people might ask: Why should I believe the post I’ve just read? By providing a list of links to other things I’ve written I am trying to establish credability with my readers as well as cross-sell content. That’s also what the slightly anomolous ‘about me’ snippet is trying to suggest - that I do have some idea what I’m talking about.

The final portion of the pages is for less relevant or less valuable information - external links, comments, that sort of thing.

I don’t think this is a radical idea - far from it - newspapers have been doing this sort of thing for ever, but I am very surprised that it’s not been applied to more websites. When I sat down to think about what information I should be presenting to my users at any one time this zooming idea just seemed to make sense. My biggest concern with the approach is the way it dresses up normal in-site navigation to look like more content. When I first sent the new design round to people I was expecting lots of complaints about access to the archives. So far no one has said anything about that…

To sum up: people tend to scan the page below the fold so the further down they go how about offering them more scannable content? Zoom detail to overview.

This redesign has been 18 months coming. I did the original design over Christmas 2004 but I just couldn’t find the time to follow it through. Since then the design has been through several revisions, getting simpler each time. This version is the product of an anti-shadow and -gradient phase I was going through about 6 months ago, when all the shiny new Web 2.0 sites were coming out. I’ve mellowed a bit since then… I also really wanted to see a return for natural textures. They’ve fallen from grace since their heyday, back about 4 years, on sites like DNA (now redesigned) and the Hayward Gallery.

For the IA and information design I have experimented with a couple of ideas: zooming content and weighted navigation.

Zooming content, which I’ll write up properly another time, is basically content becomming more general as you scroll down the page. This gives easy and intuitive access to recent posts but makes the pages very dense and limits access to older content. To try and balance this I have experimented with the function of search. It’s normally an afterthought, consigned to the top right corner where everyone can find it but no one is encouraged to use it. With this design I wanted to try bringing search to the forefront of my navigation so it’s given pride of place in the dead center, right next to the primary navigation. This random access navigation is is supported by a fairly standard taxonomy, as well as more granular tagging. I still have about 200-odd posts to tag and perhaps 350 to categorise but I’ll be getting on with that behind the scenes over the coming weeks.

There is also liberal use of weighted lists, something I’d resisted up until now. I’ve used the same treatment for everything: categories, tags, chronology and projects all use size to convey importance. I’ve not seen them used as extensively as this and I’m not convinced that it will work but we’ll see…

The biggest change round here, for me anyway, is under the hood. I’ve finally diteched the ropey old CMS I’d been using. I wrote it about 5 years ago as a database editor for Access and I haven’t updated it since. Not that useful, really… So I am incredibly happy to welcome Symphony to donotremove. It was a long time coming but it’s been a pleasure to work with. It’s XML/XSL based, which gave me a fairly steep learning curve but now I’m on top of it I love it. XSL is incredibly powerful, even if it is somewhat clunky, and there is no end of documentation available on the web. I’ve tried Wordpress, Textpattern and Expression Engine, and none come close to Symphony. It just thinks the way I think a lightweight CMS should.

And with Symphony has come commenting. This is a new thing for me so we’ll see how that goes…

Last week Keith Robinson published a great article on the concept of site maps and how best to serve users’ needs. He questions the use of the home page and the inevitable arguments that follow amonst the stakeholders and information architects when trying to tie down what ‘belongs’ on it. He suggests a more freeform approach to organisation, with close attention paid to meta tagging to allow for better ‘related content’ grouping, which sounds just fine to me.

An interesting upshot of the article is Mike Davidson, Nick Finck and Thomas Baekdal’s discussion of the 404-as-a-portal concept. I’ve had a go at this myself (although I got bored before finishing it off) but a recent project was completely based around it and when done properly I’ve been really impressed. I’ve got vague thoughts of recomposing content based on friendly urls but either way their discussion has showed me that I need to rethink my site architecture… I’m still using unfriendly querystring parameters, which is just plain lazy.

Roger Hudson goes back to fundamentals for his Web Essentials 04 talk on web navigation. Everyone needs to be reminded of this stuff.

I have quite randomly stumbled across a great-looking list of resources for the whole web development process. I think I’m all design-processed out but the ‘design’, ‘user research’ and ia sections look very handy indeed.

Happy Cog, Zeldman’s studio, have just announced their redesign of Amnesty International USA’s website, and a fine job they’ve done. On top of this they’ve helpfully decided to write up the process.

Now, the most interesting thing here is the header navigation system they’ve adopted, something close to my heart at the moment. I considered something similar for a site I’m doing at the moment but disgarded it because the categories didn’t balance enough for my liking. Now I’ve seen how well it works in practice I’m kicking myself for not persevering. On the other hand, I’m certain that we’re working with a tighter budget and with less time… [sigh].

I also really like the colour scheme they’ve chosen… It’s vibrant, exciting and a huge departure from what I expect from Amnesty - but in a good way. It reminds me slightly of Oxfam actually. The home page makes good use of imagery, something that’s always sold good causes to me, combined with a simple two column layout presenting the news alongside what you can do to help. It’s very well thought out and I think it’ll do very well for Amnesty.