vanderwal.net

Understanding Visual Organization

Luke Wroblewski has a must read article, Visible Narratives: Understanding Visual Organization published at Boxes and Arrows. The article shows the importance of and how to visually structure information to assist the user with finding and focussing on content they are interested in. This lesson is one that is often missed in Web site redesigns.

A visual presentation of information is an essential tool to have in your tool belt. Lack of a usable visual structure can hinder your users from finding the information they are seeking. Many users come to a new site and perform a quick scan of the information available looking for something to attract their attention as it relates to terms, visual cues, or a vocabulary that will get the user to the nuggets they desire.

The user's eye needs resting places to guide them or help the user jump from topic to topic until the user finds one topic or link draws the user (as the user believes) closer to the information. Visual organization help facilitate the user's scanning and reading.

If the visual organization uses HTML markup's header tags and CSS for presentation the information has an underlying structure. The underlying structure can be used to assist bots (non-human search tools that scrape sites looking for information) in finding information. The automated scraping or searching is augmented by the markup as the information in the headers is often given greater value and can help the information get consumed by users interested in finding and using the information. With a little bit of scripting a properly marked-up Web page can generate a table of contents. This visual structuring eases the reuse of information, which is always a benefit.

Model of Attraction moves forward

The upcoming IA Summit in Portland, Oregon is providing me the opportunity to offer the Model of Attraction live and in person. In the coming weeks I will be posting background to this presentation in digestible chunks. You are free to peruse the initial draft of Model of Attraction from March 2002, the Model of Attraction outline from December 2002, and the attraction category here in Off the Top.

Navigation is Broken

Part of the need for developing the Model of Attraction revolves around the broken metaphor of navigation that many IA's put much trust in. Metaphors use a concept that is understood (often not related to the topic at hand) to describe the hard to understand or the new. All metaphors limit understanding as they do not accurately describe the actions and relationships, they only provide a framework that helps understand bits of the whole. The navigation metaphor has been stretched beyond its limits and has limited the possibilities of information structures. We as IAs are worse off by leaning on navigation beyond its narrow boundaries and the users of the sites and the information bound in the sites are worse off by the over reliance on the navigation metaphor.

To see where this discovery began, go to this discussion on IA, navigation, and information space. Pay attention to Stewart Butterfield's comments. In addition navigation does not permit us to think about understanding visual attraction, reuse of information, information access methods outside the PC based Web, mobile access, personalization, content management, or the ability to have a rough cloud of information that follows the user (access to information where and when one needs it). In the Peterme discussion I stated I would sleep on a solution. I repeatedly slept and woke thinking about this problem and fell into the Model of Attraction early last March and have been working with the MoA since then.

I have used the MoA with clients and when mentoring IAs and Web developers. The comprehension is much better when describing the same approach than when using the navigation metaphor. Clients quickly understand the need for controlled vocabularies based on the user's common language and understanding. MoA helps easily explain the need for grouping of information around categories and facets. Card sorting tasks become easy to understand for the clients and helps them assist in the process. Most of the IAs took kit (persona, taxonomy, wireframes, metadata, etc.) are more usable as their need is easily understood by all in the context of attraction.

Scent not Strong

You may be thinking this rough explaination you are getting sounds like Information Scent. You would be right, to some degree. But information scent, like navigation, is a metaphor. Yes, scent breaks too and is quite difficult to use with clients as some things get very confusing for them. Scent helps IAs understand what is going on a little better and there is great research that has come out of the Information Scent community. But when you get down to it scent is a subset of attraction. Scent is one method of attracting or repelling the user toward information they are seeking and keeping extraneous information out of the mix. Scent also has its limits. The scent metaphor works with getting the user to information, but it gets very murky when the information needs metadata (to help augment the attraction between the user and the information they are seeking). Scent and odors have distinct understandings and altering the scents for understanding (metadata) raises many questions from clients as the client tries to understand. Scent does not work well when trying to build information structures for mobile access to information, nor for setting the ability to have the information follow the user (What you want to use a blueberry muffin as a perfume? Don't think so).

More to Come

This only defines MoA by showing the limits of navigation and scent. More understanding is on its way in upcoming weeks and will be put in a presentation format for the IA Summit. Those that are worried, we are not throwing out navigation or scent. We are keeping navigation in its small usable space where it works well. Scent has provided great research and has similar properties to attraction as it is a subset. The Model of Attraction will provide a broader foundation that allows us to move into the future as we build information structures that include possibilities for mobile access, social networks, and true access to information as the user needs it by keeping the information close at hand. The MoA does not solve these problems, but provides a framework that does not break when we work to solve these issues.

AIfIA is offering its IA Leadership Seminar as part of the ASIS&T IA Summit 2003 "Making Connections".

The Leadership Conference and the Summit offer great opportiunites to expand our knowledge and skills. This is one event I am really looking forward to this year.

Jon Udel digs into information mapping

Jon Udell digs into information mapping, which includes a discussion and pointer to Samuel Wan's fisheye menu. Jon's entry has other pointers that will keep you occupied for a little while.

Peel exposes layered storytelling

Design Interact examines the Seattle design firm Peel and their layered storytelling approach to information structures. Layered storytelling is explained:

Layered storytelling means that a site opens much like a film, with a splash of music, photography and animation, but not a lot of information. If you stay on the top level of the site, your experience is similar to watching a documentary on television. But if you click on any topic, you dive down into a more book-like experience, with long texts and additional background information. The idea is that a visitor skims along the surface until he or she finds something interesting and then digs in to read more.

This appoach provides the ability to have a one way interaction with the site as it entertains and informs, but when the user is attracted to a topic, idea, or visual cue they can interact and find out more. I have enjoyed the layered storytelling approach when I have encountered it. It does seem like it would have the same repeat user problems that other multi-media interfaces encounter, in that having to wait for load times before interacting or navigating is usually problematic. Providing an option to use the layered storytelling or providing it the first time by default (but if a user is like me and works with three or four browsers open or working from many computers, setting a cookie to track repeat use will not solve the issue).

This too is worth coming back to as it provides intamacy with the user and a topic. This can help break down some of the dry appearance of some dull topics that are difficult to unwrap, like sciences, urban planning, the history of duct tape, etc.

Dumbing down of computer and information design books

My trip to bookstores in Florida had me seeing what the person on the street sees as computer books, "Dummies" guides. There were eight shelves of Dummies computer books with a handful of Microsoft publisher books thrown in for color variation.

When I returned home I took a trip to Barnes and Noble and found the computer Web section filled with GUI tool books (Dreamweaver, FrontPage, GoLive, etc.) where there were shelves of HTML, DHTML, CSS, Perl, proper design (by Zeldman and Veen), or Information Architecture books. This trend worried me more than what I saw in Florida. The GUI books did not get into proper markup or understanding of information. The books were concerned with how to make better use of more bandwidth. Not one place in the many books I pulled off the shelf did I see any mention of the user or information use (let alone information reuse). The beauty of learning how to develop properly is knowing when the GUI tools are wrong, but better is knowing what is built properly will work well on broadband and on mobile devices. If the information is important and cared about it should be made available, accessible, and usable.

More future proofing information

Speaking of future proofing your information, Mark discusses CMS and information reuse. One quote that brings this to light is:

This ties you to your content management system. The further removed your raw data is from your published form, the harder it will be to migrate away from the tools that convert one to the other.

Mark also discusses how using HTML he then created PDF files of his Dive into Accessibility essays. HTML has much of the semantic tools needed and the structure to provide a reusable information repository.

Touch Graph tool for viewing relationships

Stuart has been discussing Touch Graph lately and has me quite intrigued. There seem to be many uses that would be helpful on a regular basis. Using the tool to view clickstreams or to view actual site maps (versus heirarchial site maps) would be helpful.

Smart Mobs and Emergence provide sparks

I began reading Smart Mobs by Howard Rheingold the past few days. It is a fantastic book that covers a lot of ground, including free riders, game theory, mobile technology, information creation, and information use and reuse. The book is proving to be an excellent follow-on to Steven Johnson's Emergence. The two books are wonderful mind-joggers and fodder for new preceptions about information, technology, and the world around us. A trait that both share is excellent bibliographies and end-notes (the end notes in both books were not very user friendly and would seem to be structured for hypertexting and not paper books).

These two books put the focus on being future friendly, which does not mean any thing new, but reinforces my belief in properly structured information. Information use and reuse are the key elements in both books, which embrace bottom-up information creation and knowledge sharing. The need for access to information drives Smart Mobs, whether it is to grow open development or for mobile use access is important. The best access environment we have in place at the moment is valid HTML/XHTML that is used to properly structure the information.

This also requires thinking through every pixel on a Web page and understanding its purpose. Understanding the user will help provide a framework for building information interfaces. The information/content should take importance also that is why users are reading, not the entertaining graphics. Keep in mind we structured information can be reused on mobile devides that may not use your images, information may be scraped and repurposed, information may be printed, or read aloud to a person using a site reader while they are driving or read to a person with visual difficulties.

You may want to get your hands on either or both books and take a look for yourself and you may be inspired in new ways or have your beliefs in information and its used renewed.

Up the kilt of the BBC redesign

Matt has posted a PDF of the detailed BBC redesign process, which is well worth the download time (7.3 MB plus). This is how the process should be done and is done often in places that care to do it right. This process takes time, which equates to money, but the reward is happy satisfied users.

At first I found it a slight bit odd that the Beeb would target their voice map (page 16) to the fun and highbrow side of the map. I understand highbrow, but fun over functional seemed odd at first (possibly since I work with clients that should be focussing on the functional and not so fun side of the map (some think of the fun at the detriment of functional). But, having the Beeb America channel help understand the fun side of the site. There is a lot of information that the Beeb produces and much of it is instructional/educational, which benefits from having the fun element. I have tended to think of the BBC as a resource for my news, and growingly so my information (gardening, etc) and entertainment.

Quiet time offers reading for IAs

Things will be quiet here for a few days. Go read the Boxes and Arrows and the equally great offerings at Digital Web. Digital Web is offering The Psychology of Navigation by Jesse James Garrett Persuasive Navigation by Jeff Lash Navigation Complex by Peter-Paul Koch. All of these articles are well worth the time to read, Jesse's may be my favorite of the bunch for personal reasons.

Meryl gets Lou and Peter talking about IA

Meryl's interveiw with Lou and Peter about information architecture over at Digital Web is a must read. It is a good overview, plus it gives good answers to many of the definition problems that continually pop-up in IA.

Accessible persona

I was reminded today of Marcus a persona in Mark Pilgrim's Accessibility tutorial for Weblogs (and anybody else interested). Marcus is actually a real person (as pointed out by Mark), which drives the persona home. This may be my favorite example currently for accessibility.

At work we constantly get outside developers turning over non-accessible sites or applications. The client I work for is put through the painful task of explaining what needs to be done to meet Section 508 requirements. The teeth pulling the client goes through is shameful as the outside contractors want every single item spelled out and they want to know why (they usually have built the application or site through reusing a previous product built by somebody that is no longer there and that way they can do the job cheaply and make a better profit, had they built from the beginning knowing and understanding the requirements it would have been easy and inexpensive to do). Often times I am asked to help define what needs to be done and why something fails compliance, usually as a sanity check (accessibility has been an area of strength for four years or more). The regulations are very broad and do not define the exact actions that should be avoided (this is the correct approach to allow for technological improvements).

Marcus is a great example to have on the shelf as much of the information I work with during the day is public information that the taxpayers paid for, whether they are sighted, physically able, have their hearing, or not. We know that there is a decent number of users that come to government sites from publicly available systems (like in libraries) that have technology that is nowhere near current. These people should be able to get to the information and use the information and applications around it as others can use it. Marcus is usually what we see as worse case scenarios using Lynx, but also what we think of as our baseline. Knowing Marcus exists and is really helps greatly.

There is also a benefit side to building accessible information, it is future ready information. The information that is fully accessible is ready to use with no (or is rare cases slight) modification on mobile devices. This is the wonderful thing about building accessible information. One of the first steps is building information that validates to a standard. The next thing is separating style from the content by using style sheets, which make it easy to over ride any style that is problematic or to easily allow for scalable styles. This two helps create information that is future compatible. Accessible information can also be easily reused in from its presentation as it is built to standards that ease.

Accessible information is also structured properly. Structuring information properly is far more than how it looks, it is how is marked up. A header on a Web page has an "h1, h2, etc" tag around it, which eases the ability to build a table of contents or use that header as a contextual aid to summarize the information below it (that is if headers are tagged properly and the content in the header is properly descriptive). Structuring the information helps the information be reusable out of the Web page as that is what HTML does, provides structure elements in the markup tags. If information to be reused has needs (including structure and context that is easily discernible), which validating HTML provides as a basic foundation -- of course there is much that can be improved upon the basic HTML markup, but it addresses the information needs. Building accessible information applications (Web sites included) keeps money from being wasted in the future and it does not require buying a third-party application, which are often cause more problems than they solve where accessibility is concerned (this will not always be the case).

As Joe Clark's book, Building Accessible Websites points out accessible does not mean ugly or plain. Joe walks the reader through how to make beautiful sites that are also wonderfully to folks like Marcus (side note: Mark Pilgrim edited Joe's book). Another excellent book on accessibility, and is my favorite book on accessibility, as it works very well for Web application developers (and I agree with its approach to information in complex tables more than Joe's approach) is Accessible Web Sites. These are two great resources for leaning how to do things properly. I will be working on longer reviews of each in the near future.

Usability Net from the EU - Updated

UsabilityNet is a solid resource put out by the EU. There are many great resources, like the methods table, but there were also many visual presentation and structural problems that kept me from getting the most out of the site. On the top page there presentation is very cluttered and the image buttons are not easy to scan, or for that matter read (here a text links with CSS would offer much better readability and would easily be resizable for those with visual difficulties). The inside pages often have two layers of navigation, but use a visual presentation that not only had me slightly baffled, but other Web development and design professionals too. Not only are there two layers of hierarchial navigation layers on the top, but there are sometimes left navigation provided. I really was not sure what the differences were between the second tier top nav and the left nav as they were similar.

I completely agree with Beth that the Usability for Managers section offers great resources. This page gives solid reasoning behind the benefits of using usability testing and development.

The area where this site could use the most improvement is the accessibility of some of the informaiton. The methods table is a great idea with a solid presentation, but it is not accessible in the slightest for folks with disabilities or those using mobile devices. The largest disappointment is the page is not printable.

In all this will be a great site if they can get through some of the structure and presentation issues. It seems ironic that the site has usability problems, but it is a young site with a great future and I have no doubt they will get there.

[hat tip Beth]

Model of Attraction Outline - Version 1

The Model of Attraction ouline version 1 is now posted. The outline has been structured to set up a structure for filling in the blanks and providing a better strucutre for understanding the MoA. Outlines are my foundations for writing more serious works. Outlines help me find holes and provide a structure to rest content upon. This verion is largely attributed a train ride to Philly that allowed me time and untethered space to think, order, and write.

Please comment if you are so inclined. Find holes are areas that do not seem fully fleshed out enough. Thank you in advance.