Organizing Lots and Lots of Content
November 1, 2007 at 5:00 pm by Chris
In September, we went live with Directorship.com, a large-scale project we began work on in January. Directorship Magazine is a publication with leading business and management content for board directors, global business leaders, governance experts, and shareholders, and they needed their website to be a powerful enhancement to their publishing business.While this site could be a case study for just about any of our NewfangledCMS applications (it has Password Protected Content, RSS Feeds, Advanced Website Tracking, Email Newsletters, Google Optimization Tools, Calendar of Events, Date-Based Publishing, Surveys, Polls, E-Commerce, Blogs, User Account Management, Personalization, Data Importing and Exporting, and lots of Custom Applications), as well as our Prototyping process (I posted recently on prototyping, and Mitch and I spent 6 months prototyping Directorship.com!), I really want to highlight two aspects of this project's user interface. In the next two short paragraphs, I'll discuss how a tagging system and a unique search interface make this site something special. 
TagsTags really are the backbone of this site. Because it has such a large amount of content, the user interface needs to depend upon some kind of common thread that is more flexible and specific than the traditional navigation systems. Using tags, this site is able to connect most of its various types of content while still organizing it by general categories (magazine articles or news articles) and dates. You'll notice that on any article detail page, a 'Related Content' box serves up links to related articles, blogs, webcasts, etc. based upon having tags in common (see image to the left). The more tags in common, the more 'related' content is. The tags also control how advertisements are placed throughout the site. By tagging advertisements, Directorship is able to more appropriately match ads with content, and offer their partners sponsorhip opportunities rather than just basic participation in a pool of circulating ads (though they can do that too). You'll also see a tag cloud being used as a search option in the unique Advanced Search tool we built. Which leads me to my next point... 
SearchAs we prototyped this project, we quickly realized that our standard approach to site search was not going to be adequate for a site with such a large amount of content. While the architecture of the site was already at a point that would be very useful to a navigation-oriented user, we needed something more robust for those users who are more inclined to use a search utility to find what they're looking for. We initially set up an 'Advanced Search' page that was linked from a global navigation menu at the top of the site. This way, anyone could use the basic text search on the main navigation bar, or click to the 'Advanced Search' page if more refinement was necessary. However, we also realized that many searches are going to be refined by the user already being on a particular page of the site, so having to leave that page to use the Advanced Search wasn't very helpful. What we needed was an advanced search tool that would be available on every page but not take up valuable screen real estate if it was not being used. 
After we sketched this out, our Developer, Steve Brock, created an elegant ajax Advanced Search tool (see above left) that allows any user to search using a variety of criteria, and even employs a tag cloud as a search option. Justin Kerr, our Creative Director, organized, simplified and styled it to be as easy on the eyes, and as easy to use, as possible.We've continued to improve Directorship.com even since it went live in September. We've added some new functionality, including rotating 'article center' boxes on the homepage that serve up articles based upon sponsorship and tag relevance and using tags to relate opinion polls to particular articles and news stories. Take a look! |
Tags: web-development tagging user-interface-design design prototyping newfangled
 |  |  |  |  |  |
