When designing a web site some designers start with the looks, the style, the feel, when in fact they should be thinking about a very important factor—Information Architecture—the art and science of organizing and labeling any system, be it a web site or a database.
A traditional web site design process always starts with laying out a sitemap and wireframes. Why should the blog’s design be any different? In most cases the site’s information architecture will actually dictate the direction for the site’s design.
There were definitely changes in the way people organize information on their blogs. The readers are no longer limited to the standard about-contact pages, blogrolls, categories, archives, the most popular-recent posts/comments and ads. More and more blogs nowadays display side posts with their bookmarks and latest activities from social networking sites. Some blogs even bring readers on board to contribute the best articles from all over the blogiverse. Two of the most notable examples where community was invited to be a part of the site’s content are Quipsologies (from the Community) and Noupe (DesignNews).
Nobody can deny the fact that there is lots of information that we want to share with the rest of the world or use as a promotion, so it is very important to pay an extra attention to how we structure our blogs without adding a clutter to the site.
In organizing the information architecture of a blog it is also important to know how readers behave when visiting an unknown site, and think outside of being the authors of our blogs.
One of the most frequently displayed links on blogs are categories and archives. I too have them on my sidebar, though won’t be keeping them in my blog’s new design anymore, thanks to Chris Pearson’s enlightening article on What Every Blogger Needs to Know About Categories, where he warns us that:
By giving users a list of categories to browse on your site, you are creating a psychological conundrum that usually leaves them with a severe case of analysis paralysis.
As far as blogs are concerned, categories are the single biggest contributor to both page bloat and link dilution, two of the most abominable SEO sins.
Pearson’s article makes a lot of sense, and he supports it with his own blog’s information architecture: the sidebar contains only four lists with the Latest Articles, Must Reads, Improve Your Blog and Worth A Look, while the Topics(categories) and Monthly Archive are kept on a single page—Archives.
Once again, while thinking about the Information Architecture for Inspiration Bit, I did some research and want to share with you what I found on how other blogs organize their site’s information flow.
Lauren has just launched her blog’s fresh new design. It looks amazing, so make sure to visit her site and share your thoughts and opinion on her blog’s new look. She’s still working on adding more features to her site and polishing a few details, but I already like how she added her social networking links in the footer, and displaying the Related posts, along with the calls to sharing and subscribing to her blog at the end of each article. Lauren has also spent a considerable amount of time putting together a very helpful Graphic Design Glossary which she links to from her main navigation menu.
Andy Rutledge is a brilliant designer, no doubt about that, and his design articles contain so much value that there’s no need to advertise the RSS feed on his blog with big icons or fancy styling. Andy places only two simple links to his Articles feed—at the beginning of his huge triple footer and at the bottom in the Colophon section, along with the author’s short bio, contact and link to his company site. There are lots of small, but memorable details like the decreasing font size in the excerpts for the three most recent posts on the home page; various bits of articles from the Web in a section, cleverly titled as Ephemera; minimalistic but highly user-friendly and space-efficient switching tabs in a large footer that features Andy’s articles on various topics. Nothing distracts the reader’s eye when reading an article on the site, as there are no sidebars, at the end of the post visitors can browse through the same tabbed Archive we saw on the homepage.
Patrick Algrim’s site design is all about grids, organization, minimalism. Some of the interesting details that stand out are the small navigation in the search box area, the fact that Patrick’s photo along with a short bio appears only when previewing a single post (something to consider for blogs with multiple authors), the comments area is aligned with the rest of the large footer section, making it look more as a part of the site’s overall information architecture rather than a continuation of the post. On the home page the Discussion section is replaced with the Most Recent posts from the Archive. Even the ads placement on the blog was carefully calculated: small images with sponsor ads look more like portfolio thumbnails, and at first I haven’t even noticed that there are TLA ads in the left bottom section of the site.
If even for some smaller sites an efficient Information Architecture can present a challenge, how do large sites with a complex data structure like news sites, portals, deal with it? American Institute of Graphic Arts (AIGA) has managed it masterfully. There are a few organizational tricks that even smaller web sites can find valuable and applicable to their structure. AIGA’s homepage is filled with tons of information: a featured most recent article is followed with four previous articles along with short excerpts, five most recently commented and popular posts appear after, design jobs, design archive and a calendar of events complete the left section of the page; while the login area, search bar, news and sponsored ads are all displayed in a sidebar. Once we click to read an article all the extra curriculum data disappears, including the footer, and is replaced only with the information relevant to the particular article—Related Images, Content, Event, and a small tabbed section with the recently commented and popular posts.
Jon Tan’s personal site is all about paying attention to details—from exquisite typography to an elegant and user-friendly information architecture. The two sidebars on the homepage are uncluttered and contain only a short bio on the left and a collection of “Curious Asides” with a last link that takes to another page that displays “Stubs via Del.ico.us”, “Moments via Twitter”, “Photos via Flickr” that we can all subscribe to. Both homepage and single post’s page feature a large three-columns section above the footer with interchanging sections: the featured articles, comments, conferences and “Snippets from the Silo” with some very helpful design tutorials/articles are on the homepage, while the latest posts, comments and blogroll on the single post page. Article’s page is once again uncluttered: Jon displays some post-related meta data at the top of the sidebar and once in awhile an auxiliary related data, appears on either sides of the article, making the experience similar to reading a textbook.
If you thought of Andy Rutledge’s and Jon Tan’s sites being very minimalistic, check out these next two blogs. Astheria is designed by Kyle Meyer, who explained the reasons behind his blog’s super minimalistic design being the result of frustration when “every time I come across a website and am forced to bump the text size up or wait for all of the imagery to load up so that I can enjoy the content“. On Astheria the content definitely gets the royal treatment: the homepage features the most recent post, with a huge font size set in 4.4em, two columns with five latest articles and posts (not sure though how does Kyle determine what is what), a single line footer with the subscribe link, a very simple menu (with a link to archives that features all articles in a chronological order) and even a simpler logo. The single post’s page once again starts with a huge headline and ends with a collection of Related Reading links and social bookmark — no sidebars, no footers in sight.
If Kyle has placed a tiny logo on Astheria, Andrew decided that the HTML title of the blog is sufficient for readers to see the blog’s name. He also ruled against having a dedicated homepage on his blog, and greets visitors with a full article, completed with a comment form and readers’ comments that start somewhere in the middle of the post in a right sidebar. The navigational menu comes with a drop down list for archives and categories. A similar drop down appears in the post’s breadcrumbs.
Kyle Neath’s impressive tricks start with a usage of an image underneath the Featured Article, which can be swapped with the Blog’s Archive, or Experiences or links from Interwebs when you click on the menu items in the “30 Second Tour” section below the banner-like image. I also like how you can switch between listing Tips/Resources, Reviews and Marks—very space efficient. When viewing a single post, the reader can check out the Hot Topics on the sidebar or visit Kyle’s other projects.
What can be said about John Boardley’s beautiful site that hasn’t been said yet. Recently John updated the look of iLT’s main navigation to make it more prominent amongst the site’s rich information architecture. ILoveTypography is one of a few sites that display a complete list of all articles ever written on a sidebar. With twice per week posting schedule John has managed to publish over 100 posts in less than a year of iLT’s existence. However, not everyone can get away with such a long list of past posts on a sidebar, unless you tend to publish very long articles that are so characteristic for iLT. John even created a long list with his favourite typefaces on the second sidebar of the site that’s updated with new type names/links every month.
10. A List Apart
Of course, everyone knows this mecca for all designers and developers, but it’s worth taking a second look at ALA’s information architecture. If this site has managed to handle elegantly its vast amount of articles and pages, then no personal blog has any excuse for a poor site structure and navigation. There are four ways how a reader can navigate A List Apart: viewing a complete list of articles by clicking on the first menu item—Articles; clicking on Topics provides us with a short list of the site’s main topics (that also appear on the sidebar) along with a description and links to subtopics; clicking on linked topics in the breadcrumbs of a particular article we read; searching ALA via search box.
Kevin Cornell’s site is not only pleasing to look at, but also a joy to browse and explore. The content area of the homepage is split into three columns: the first column is reserved for the actual article, the second column features three latest articles, the last column starts with a ravishing search box, followed with the list of Recent Links where Kevin shares interesting snippets from the Web. On a single post page, the content in the last two columns is replaced by Comments in the middle, and on the far right the Recent Articles are presented as little thumbnails with post’s title and date placed into ALT and TITLE attributes of the corresponding image. Also make sure to check the tabbed section on the right of Bearskinrug’s Store section—such an artful solution to display tabs as illustrations.
12. Rob Goodlatte
Rob Goodlatte’s stunning web site utilizes various navigational elements—top menu, right sidebar and big footer area. The most recent posts gets the spotlight on the homepage and is followed by four previous posts split into two columns. The content of the sidebar changes depending on whether you’re on the homepage or reading a post. The footer always displays the latest tweets, features three posts from four categories and links to Rob’s social activities. I really like how he displays three most popular posts on the single post’s sidebar—the text links are indented with “-9999px” and instead replaced with the images of well-crafted magazine-like titles.
Dave Bowker’s elegant site sports a three-column layout with a very minimalistic middle column, where he displays only a limited post related meta data, which give lots of breathing room to articles on the site. The last column showcases links to other sites divided into five different sections. I especially like the way Dave’s portfolio page is organized.
Veerle’s blog is one of the most well-known web sites on the Web. She’s got lots to offer to her readers: art projects, tutorials, articles, workshops, job ads. There’s certainly lots of information on the site, but Veerle has victoriously dealt with the complex structure by integrating various navigation options for her readers and visually separating the main content of the site from the auxiliary data. As soon as you switch to the single post view the complex structure is replaced with a simple user-friendly layout, where the article gets the prominent spotlight on the site.
15. Design Adaptions
Recently Charity’s site has received a fabulous makeover. I really like her implementation of the data organization on her blog. Depending on whether you’re on the homepage or reading an article on the single post page, the surrounding navigation aids you in finding a relevant and valuable information and keep you glued to the site, exploring it. The homepage features a horisontal row with the photos from Flickr, followed by the set of external links that encourage visits to other sites. Even though the tabbed section stays on a single post page, Charity complements it with the “possible related” posts. The footer links are changed as well, and turned into a showcase of the most popular posts from three different categories.
16. RA Project
When browsing RA Project you can sense that Ronald Huereca has put a considerable amount of thought into improving a user experience on this site, after all the site’s purpose is to place readers first. The homepage features an excerpt from the most recent article, that’s complemented with the list of five recent articles on the right. AJAX carousel is a geeky and quick way to present readers with a whole bunch of recent articles that they can easily browse. Three articles from different categories are featured below with the list of related posts. The footer presents readers with a short about section, del.icio.us links and Readers First award recipient. Since it is a multi-authored blog, Ronald cleverly displays the author’s short bio before each post, followed by a number of links from the same category as the post, and more articles from the same author.
I hope you got inspired by the examples above to perhaps re-think or improve the information architecture of your site. You may also find helpful two of my previous articles on blogs with unconventional layout and elaborate footers.
What other sites would you include to this list? How do you browse other blogs as a reader? What are the first things you look at after reading the post that you liked? What do you find most frustrating when browsing an unknown to you site for the first time? What would you like to see on a web site that you visit regularly?