Introduction

Nearly four months since the beginning of this journey, I present to you my final project for my independent study investigating the field of Information Architecture (IA) and further research into web design.  I want to start out this post by thanking Michael and Katharine for their conversation and insight into IA and librarianship in general.  I’ve appreciated our talks and lunch meetings - may there be many more days of good food and conversation between the three of us.

The Initial Project Description

The initial project description read as such:

In this new online information age libraries must be able to virtually compete for the attention of their users. Websites are no longer simple storehouses of information holding lists of links and resources. Today’s Web is built on interaction and near synchronous, if not synchronous, communication. As such, the design of Websites must be purposeful and thought out. The field of Information Architecture (IA) can help librarians plan for and develop online resources that are strategically and appropriately built.

Reflections on the Research

With that in mind I delved into print and online literature about IA and web design to enhance my skills as a designer and architect of websites.  I also used the Information Architecture Institute’s (IAI) extensive online resources to the point where I was motivated to join as a professional member.  Additionally, I leeched resources and knowledge off the Boxes and Arrows site.  Twitter was able to connect me with other IA professionals, web designers and students from as far away as Belgium and as near as Michigan, and I bounced ideas off of them and was always amazed to receive feedback from these wonderful strangers.  Even though the comprehensive resources at IAI and Boxes and Arrows were extremely thorough yet readable, I found my readings from Peter Morville and Christina Wodtke to be the most enlightening experiences this semester.  Wodtke’s text (Information Architecture: Blueprints for the Web), in particular, provided seemingly all the necessary concepts and theory behind IA that I would need to begin my journey.  And even though I felt that Morville’s text, Ambient Findability, was more theoretical (if not hypothetical) at times, I found it to be a read that opened my eyes to the potential of the web and necessary role information architects must play.  I must admit that I skipped over the polar bear book Information Architecture, another of Morville’s texts, but I am planning on continuing my professional development in IA and will soon purchase this text.

The Final Project

The final project had three purposes:

1. Demonstrate the IA planning process (i.e. wire frames)
2. Create a site that was designed and motivated by IA
3. Advance my current set of web coding skills to a more advanced level (XHTML, CSS, JavaScript, W3C standards)

1. Demonstrate the IA planning process

Using wire frames and design mockups, I prepped for the website’s creation.  In past web design projects I had use simplistic mockups and sketches that I believe failed me in a variety of ways.  But with the comprehensive wire frames I found that I could foresee issues right away because I wasn’t distracted with design and user experience issues.  I was able to focus solely on the purpose of the site and the navigation from content piece to content piece.

2. Create a site that was designed and motivated by IA

I could simply say that the wire frames were enough of an IA influence but that would be inaccurate.  While the wire frames did guide my design choices, it was more of the IA mindset that they put me in that drove the creation of my site.  I found myself asking about content location, navigation issues, and findability more in this project than in any other project I’ve undertaken.

3.  Advance my current set of web coding skills to a more advanced level

As a self-taught web designer I’ve realized that a lack of a formal education in XHTML, CSS, and JavaScript has left some decent sized potholes in my design toolbox.  While I’m proud of the skills I have taught myself, I realize that this is a pretty significant weakness.  This independent study gave me the opportunity to sit down, focus, and carefully read some great web design texts online and in print.  I used a variety of Site Point and O’Reilly texts, while all the time referring to some seminal articles over at A List Apart.  I was able to dive a little bit more into Jquery (a JavaScript library) which has really opened my eyes to its ease of use and influence on the user experience.  I included three different customized plugins with the site and used AJAX for the first time in my career, albeit very simple AJAX.

The Site

You can visit the final project at:
http://project.ia.thecorkboard.org

The site isn’t necessarily supposed to be a full-fledged library website.  It is, however, supposed to illustrate solid IA and web design, but not content creation.  So when you see filler on some of the pages, don’t get distressed.  Look more at the structure of the site and how you could potentially interact with it.

There are five different page architectures to view.  To access these five pages, click on “Site Map” in the lower right-hand corner of the home page.  This will list all the pages.  You can also click any of the links below to go directly to them.

1. Homepage architecture
2. Content with columns architecture
3. Content with numbered pagination architecture
4. Content with tabbed pagination architecture
5. Content architecture

My project site is coming along nicely. There are five active pages representing a different type of architecture on each page.  Additionally, my Facebook inspired modal boxes are all working on the contact area of the homepage and at the footer in the lower right hand corner of each page.

To get to the different types of pages use the sitemap located at the the footer area.

I’ve been working on turning my wireframes and initial designs into an actual working site. Because of my research into IA, I’m finding that my design and coding has become much more streamlined, organized, and precise - which is making things so much easier. Because the wireframes really helped me to visualize the purpose of each section of a page, I’m able to quickly code up a section at a time and insert them into a master template. All together I’ve got 5 different page template styles. I’m working on the homepage now and you can see my progress here:

http://project.ia.thecorkboard.org/

The first time in any web design project, I’ve put together some decently comprehensive wire frames.  Christina’s Wodtke’s Information Architecture: Blueprints for the web text enlightened me to the purpose of this glorious tool and I am finding that these wire frames really are saving me some time.  I had completed *rough* design outlines on past projects but was never motivated to go into this much detail.

One of my time savers has been my grid spacing.  I know that each box is 20 pixels by 20 pixels and this helps me to get my containers spaced out to the exact pixel.  Additionally, I’ve created some numbered notes to remind myself what exactly is supposed to go in each box.

Bet you can’t guess what I’m using to mock these bad boys up.  Photoshop?  Nope.  Some fancy IA program?  Nope.  Just plain old Keynote ‘09.

The Homepage

The standard content page with video or picture highlights

Content page with numbered pagination

Content page with tabbed navigation

A content page with three columns and a descriptive header

Let’s be clear here: I’m a self taught web designer and now I’m trying to fill in the gaps of my knowledge about Information Architecture on my own.  And while being self taught is itself an amazing journey, the valleys that need to be filled with knowledge and experience are extreme.  The peaks, however, are that much more enjoyable when reflecting on how by my own effort and dedication I was able to learn what I did.

So as I continue on this quest I am delighted to encounter some truly helpful books and articles that supply for me a strong foundational understanding about the field.  My most recent read Information Architecture: Blueprints for the Web by Christina Wodtke was one of those experiences that just opened up my eyes so much in understanding what exactly Information Architecture really is about.

Wodtke understood her audience: Newbies like me.  From beginning to end, she was able to clearly and succinctly supply me with the information I needed to know to get the basics.  Furthermore, the concepts she covered engaged me in wanting to discover more about them.  I also appreciated her balance of theory and practice.  She led me into the mindset of an architect (the theory) but always relayed how that thinking morphs into a practical, usable product.

I should admit that Wodtke pointed out that I’ve made some blundering errors in designing sites.  Well, I guess that’s to be expected when you’ve really just begun.  But her text also confirmed some things I’ve always thought about web design: Organize in containers for clarity, provide a hierarchy of content, and simple design isn’t bad - sometimes it’s really, really good.  I don’t think I was born with these values of web design but that they were things I picked up as an astute observer of the thousands of pages I’ve visited.

Of the weaknesses I do have, one of the biggest has been visualizing the organization of content.  Depending on the size of the organization, the complexity of content, or the wants/needs of the user, mapping what content needs to be created and its structure is a very daunting task.  So Wodtke’s chapter on site path diagramming, topic mapping, site maps, storyboarding, and wire frames provided some much needed insight.

I feel much more comfortable in my IA skillset after reading Wodtke’s book as I begin my final project for this course, a model academic library website.

Taxonomy: “a technique that organizes information into hierarchical categories” (Bertolucci).

From your library’s homepage, users need to be able to find what they need, even if it requires multiple clicks, with the language and organizational method of your site.

Librarians, being organizers by nature, would presumably have an instinct for creating web taxonomies, but observations speak otherwise:

A survey of the literature on applying facets on the web shows that librarians think it a good idea but are unsure how to do it, while the web people who are already doing it are often unaware of S.R. Ranganathan, the Classification Research Group, and the decades of history behind facets. (Denton)

It would be nice if librarians and web designers were on the same page here, but in the meantime we can do our best to better understand each other.  Library of Congress and Dewey classification systems were designed with a single access point for retrieval: the call number, which is arranged by subject.  Websites, however, are more dynamic, requiring many access points depending upon a user’s thought process.  The classification systems are designed for retrieval by librarians, not patron browsing and exploration.  Thus, an entirely new system is required.

There are no hard-line rules in place for creating this hierarchy, but there are a few things to keep in mind.

1. Label for the user.  Do NOT use internal jargon. (Bertolucci)
2. Design hierarchies for the user.  Follow his or her thought processes, not what is most evident to the designer. (Denton)
3. Although the structure is never complete, it should be rigid enough to withstand change and is not entirely altered when new information is added. (Chosky)

Denton offers an excellent explanation as to how to go about creating a hierarchical structure and stresses user testing to ensure the labels make sense to patrons.  He has got some fabulous insight that I would highly recommend if you looking for systematic methods for the process.  Wodtke takes a more casual approach, suggesting that one can begin by first emptying your recipe box and organizing all the cards, clippings, and photocopies into categories.  Label each pile with a post-it.  Have a friend do the same and discuss the differences.  Similarly, write the titles of each page, function, or service that your web site provides on a card.  Mix them up entirely and reorganize them.  Have employees and patrons do the same.  This will help to formulate where to begin and how to label items.  Organize, define, refine.

Wodtke also has a great suggestion for those strange outliers that don’t seem to fit any distinct category.  The designer can place these items on the front page or make a unique category for them to create more of a draw for the individual items rather than burying them in an illogical place.  Placing them in a visible location would be beneficial, especially in the case of the library, as it might highlight services that would otherwise be forgotten or easily dismissed–and if this was done on a rotating basis it would be an easy source for dynamic content.

Bertolucci, K. (2003). “Happiness is taxonomy: four structures for Snoopy.” Information Outlook. Retrieved February 17, 2009, from http://findarticles.com/p/articles/mi_m0FWE/is_3_7/ai_99011617.

Denton, W. (2003, November). “How to Make a Faceted Classification and Put It On the Web.” Miskatoni.org Retrieved October 19, 2008, from http://www.miskatonic.org/library/facet-web-howto.html.

Wodtke, C. (2003). Information Architecture: Blueprints for the Web, 104-5. Boston: New Riders Press. 

Skittles.com recently launched a new site redesign that is based entirely upon social networking.  In our socially-network world this is brilliant, right?

I hate it.

Incorporating social networking is essential for organizations (especially libraries) to engage users and keep them coming back.  But in the case of Skittles.com this has been done to an unhealthy extreme.  The entire site is based off of the platforms of other sites (twitter, facebook, myspace, wikis) and lacks a coherent brand–let alone a logical navigational system.

Because nearly all content is user generated you’re confronted with this message before you can even view the site:

Just a heads up: Any stuff beyond the Skittles.com page is actually another site and not in our control. This panel may be hovering over the page, but SKITTLES® isn’t responsible for what other people post and say on these sites. Click the box below to acknowledge that you know SKITTLES® isn’t responsible for that stuff.

From this point you’re required to provide your birthday before you can begin browsing its homepage.  Talk about locking things behind a barrier!  Even in doing a bit of investigating for this post I nearly got so annoyed that I left.  Making users input information just to view your content is a major design flaw.

Did I mention that it lacks a coherent brand?  When your homepage is a facebook “fan” page it confuses users.  “Where am I?  I thought I went to the skittles site…?”  So not only are you lost from the get-go, but the navigation is located in an elusive box to the upper left.  At least for me, it came off as a pop-up and was not inherently clickable.  If you came to the site for nutrition information it is located under “other gobbledygook”–I only found it through process of elimination.  Once again, if I’m a user looking for something specific I want to find it right away, not after deciding that “nutrition” doesn’t belong under the other tabs.

Libraries: do not do this.  Terrible design.

Delving more into the literature for library websites, I have noticed a few trends: One, make sure to speak the user’s language and avoid librarian vernacular; two, make web pages and access points that cater to the user group; and three, entice them.

Speak the user’s language

This has been a point of discussion time and again in my library school courses.  If librarians cannot fully communicate with the user, or worse, make them feel small and for not understanding, of course our users will become frustrated and go somewhere else.  Brian Matthews, in his article “Web Design Matters” uses the example of interlibrary-loan (or ILL for those of you in the biz), “that term may be meaningless to the novice user who simply wants to get a copy of a book that your library doesn’t have.”  In an evaluation of usability testing, John Kupersmith cites evidence that patrons seem to find the wording of the website particularly troubling.  For journal articles and article databases in particular, the average user success rate is 53%.

We are turning away nearly half of our users because they simply due to misunderstanding.  Better wording on library websites can be a quick fix that will make a big difference.

Multiple Access Points/ Web Pages for the User Group

The idea of creating web pages that speak to specific user groups was a predominate theme in library literature.  Brain Matthews calls this “Segmentation,” he explains:

When speaking to a small child, you are likely to use a different voice and tone than you would with a coworker. Why not apply that thinking to your web site as well? Libraries typically develop their pages for a mass audience, but various patron groups have unique needs for services and resources. We need to communicate with our users in a manner that is most effective for them. The wording, images, and style should be customized accordingly. A page that a teenager prefers is going to differ from the page his parents prefer. Consider developing separate content for your major patron groups.

Staff and librarians, parents, faculty, children, non-English speaking populations, high school students, off campus users–all of these groups have different interests.  Each of them would benefit from a web page with links and stories catered to their needs.  Matthews links to Colorado State University and Buffalo State College, and I also want to highlight Skokie (Illinois) Public Library, who also does a fabulous job with this concept.

Perhaps this is my academic librarian mind speaking, but does anyone else feel that it distracts slightly from the seamless user experience and creates a bit of clutter?  In 2003 John Kupersmith discussed this idea in Library Journal’s netConnect.  Noting similar concern for disorientation, he suggests: “Keep the design focused. Resist the tendency to make special-purpose pages perform general-purpose functions.“  While I am not entirely sold on this idea, I do think it relevant and see the benefits, especially in the public library.

The idea of multiple pages can also be discussed with multiple entry points.  Users have very different thought processes and might reach their need goal within the library’s website with a route unexpected by the designers.  Matthews notes “instead of investing all your effort in funneling them through a proper pathway, build for error by providing escape routes along the way.”  This ties back into the concept of using terminology that is relevant and understandable for the user, even if it requires a bit of what seems like redundancy.  We must recognize that people accomplish tasks in different ways and the library website should cater to these methods.

Entice them

To use Matthews once again:

Start thinking about your site as an ongoing personal experience and not just a URL.

Whew.  That is powerful stuff.  Librarians need to look at ways to keep users coming back, as opposed to only checking the site to for the library’s hours.  The site should exude the identity of the library and provide content that is fresh and user-driven.  John Dupuis recently stated that library web sites tend to focus extensively on content and accomplishing user tasks.  However, the web should also be a place for discovery and exploration (the library’s mission all along!) as opposed to simply providing information.  Looking to business models, Dupuis has some interesting ideas that caught my attention and might help keep interest for users as well.  Citing Tor.com, a science fiction and fantasy discussion forum he notes:

As it happens, what I really find interesting and provocative is the idea of using a blog as your home page, the idea that you can leverage the content you create and put on the blog and direct it towards the “stealth” purpose. In Tor’s case, that would be buying books. In the case of a library that would use a blog as it’s home page, the stealth purpose would be to funnel students to our catalogue, online resources and various services.

How very tricky of them.  Although the library isn’t necessary selling a product, we sure do have a lot of books to entice them with.  Heck, they can even take them home–for free!

Thanks to Dan Klyn for linking me onto this:

Well, it has hit the point in the semester where I am to begin working on the actual project for this course: a sample site.  I’ve created sites in the past, and, yes, they’ve most likely been quite poor when it came to the planning stage.  In the past I didn’t have much knowledge or skill to go on - I just assumed what I did would work.

Yea right.

But as I’m reading Christina Wodtke’s Information Architecture I’m realizing that this stuff is hard.  So much is riding on the preparation of the site.  Do I know my users?  All of them?  Are my assumptions correct?  Will my design be usable?  Will my reasoning for content placement and design be defensible?  Is my wireframing going to be transferrable to an actual design?

I have to admit that because this site will be created for a hypothetical user-base, and, well, because that user-base is hypothetical there’s not a whole lot of usability testing that can be completed.

However, in the end this is a lot of fun.  So many decisions need to be made and each one directly affects the usability of a site.