 Christopher Butler Strategy and Resourcing Hi, I'm Chris. I've been working at Newfangled since September, 2004. | Chris Butler's Blog |
 | Subscribe to this blog Click this link to view blog as XML. View a list of all Newfangled blogs >> Subscribe to all Newfangled blogs >> |  | Search Chris' blog |
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: newfangled web-development tagging user-interface-design design prototyping
 |  |  |  |  |  |
Prototypes Prototypes Prototypes
September 10, 2007 at 8:25 pm by Chris
One of the most important aspects of our web development process is the first step; what we call grayscreen prototyping. Our goal with this first step is to create a semi-functional website that is malleable enough to allow for a fluid and on-going process of refinement with our client, but 'real' enough to accurately show the structure and functionality of what will be the final product. (You can read more about our process here, where Eric writes about it in a way that I never could.) Invariably, our clients respond to the prototype with enthusiasm and excitement, even though the prototype has no color, style or real content, because it is the first time that they begin to see their project come to life in an interactive way. But, by the time we start designing and developing the actual website, the prototype tends to be long forgotten. This is a good thing in terms of keeping the momentum of a project going and keeping to schedule, but sometimes I like to browse through our prototypes and remember those old times of 'adventure' and 'discovery' in the crazy world of HTML. 
The reason I bring this up is to draw attention to this essential step in our process and mention some cool new developments in how we prototype. A few months ago, we hired our first fulltime Prototyper, Michael Stalker. Since he came on board, he has done a lot of the things that we AE's have been wanting to do for a long, long time (but probably better than we ever could). One goal we've had for a while has been organizing, revamping and making more current the general html that we use in most of our prototypes. He's done a great job with this already and our latest prototypes are looking better than ever. 
Another improvement that Michael has begun implementing is cleaning up and improving all the javascript that we use to emulate some of the more sophisticated functionality that is actually developed later on in the process. Things like search tools, filtering functions, video and audio elements, etc. are not actually functional in the prototyping phase, but they need to get as close as possible so that our developers know exactly what our clients are expecting. We achieve this in our prototypes by using javascript code, which Michael is becoming a real whiz at. Our newer prototypes will be able to indicate the latest web technology in a much more specific and visual way thanks to his work.Anyone who appreciates art would probably be just as excited to see the preliminary sketches for a great painting rather than the final piece, because it gives the viewer some insight into who the artist is, how he or she thinks, and what his or her priorities are in the creative process. Likewise, we consider web development to be an art which starts with prototyping. We archive every prototype we create and often review them as we work on new projects, because they, like the sketches I mentioned above, give us new insights and ideas, and remind us why we're excited to create websites. Update: 11/1/2007: Here's a site with some simple ajax style prototype scripts. Some nice things there! |
Tags: web-development design prototyping
| | | | | |
RSS