Archive design pattern

The user wants to search for an article of interest by chronological order

Use when you have more than 10 to 20 items to display
Use when you have a data set that spans over a long time frame and want to let the user browse the items in the dataset by chronological order.
Use when displaying all items in a dataset confuses the user rather than giving an overview
Use when it makes sense to order items in a dataset by dates
Use when you want to provide an easy way to browse your entire database of articles.

List the items in your dataset in chronological order and provide suitable headlines to match the amount of items. If you for instance have 10 items per year, it does not make much sense to part these 10 items into months. If you have 100 items a year, but also have months without any items, it might not make sense to list all months.

Either you can provide links to pages that shows all items per time period, or simply make a list of links to each item directly on the main archive page.

Use the archive pattern when it makes sense to list items in chronological order. List items in an archive format, makes it easy for the user to explore how the website of interest has evolved over time and what has influenced today’s items.

Archive of blog posts at loudthinking.com.
Archive of blog posts at Techcrunch.
Archive of blog posts at Ajaxian.com.
The articles in the archive on macalicious.com is parted into months.

View more example screenshots

2 Comments

Jasper Kennis

20 Mar, 2008

Great if you want to find something of witch you know when you saw it the first time.

Trevor

11 Jun, 2008

I understand this technique was written to quickly get modal tabs running, but the Javascript is both intrusive and far from a progressive enhancement. If the user has JS turned off, the entire thing falls apart. At the very least, the links should lead somewhere. A full page reload seems like ordinary navigation tabs, but at least it would function properly.