Wikipedia describes metadata as data about data. So, for example, you might have this post’s content as the main data but the date published, date edited, author, category, tags, etc. would all be its metadata. It’s supporting data that enables enrichment of navigation for users or intersections with other data to provide more related information.

It’s extremely important for those who dabble in information architecture, interaction design or web design to understand the importance of using metadata to build an effective modern web application.

Metadata as Navigation

Navigation is the more common usage of metadata. This post has supporting navigation to related posts by category, tags, and its publish date. All of these navigation points are associated by their metadata.

I think it’s important as a designer to have access and to look at feeds or database tables when developing the user interface. It enables them to find creative uses for metadata that can complement the interaction. I’ve worked at places were this is not a common practice and always thought it was odd.

Early this year I redesigned rikcat.com and I used my Delicious links feed as the main content area for my links section. I noticed the feed had the tags from my posts. So I decided to provide them to users as links back to the corresponding Delicious tag to enrich the user experience. If I never looked inside the data feed, I would have never had the idea to use them in the user interface.

Metadata for Data Intersection & Mashups

Simple forms of data intersection could be the use of tags on a real estate blog. Say all of your authors tagged their posts with a zipcode relating to the content. Well, you could aggregate all of those zipcodes and geocode the posts. Then use the Google Map API to visualize the related posts on a map to create new entry points to the content.

Yahoo Pipes is a mashup tool that takes multiple sets of data and intersects them on their metadata. It also provides some tools to do content analysis and outputs the results to a feed. You can create and enrich the data to enable new interfaces into content.

Data Visualization

A more advanced example of leveraging metadata is digg.com’s Digg Labs. Via flash applications Digg Labs uses the choices their users are constantly making to create a steady flow of metadata, giving the applications a feeling of activity. Users will generate more metadata than your admin users or, in Digg’s case, its story submitter will, so figuring out how to provoke and strengthen users interaction will help enable more visualization.

ESPN.com Sportsnation Polls use IP look-ups to capture the state where poll votes are cast. Then it uses that metadata to provide a visual map of where votes were cast. The user can also hover over a state and see results from just that state. A great use of the collected metadata.

Conclusion

When designing a site, do you look at the site’s metadata? Do you look at the database field or xml feeds for navigation and content ideas?

1. Eliminate Redundancy

In the old Windows vs. Mac OS debate, most of the time people talk about security, but my biggest pet peeve of the Windows platforms is its overwhelming myriad of ways to do the same thing. With all user interfaces there will be a learning curve, but don’t use that as an excuse to add duplicate functionality.

Be stingy as it relates to adding top-level navigational elements, and make sure adding them is the right choice. A higher-level grouping may be what is needed. I recently came across a book called The Paradox of Choice; it talks about our inability to deal with an abundance of choices. An excess of choice has a paralyzing effect, so keep the UI from overwhelming the users. Make sure everything that’s included is absolutely needed to accomplish the goals of the UI.

2. Nomenclature & Contextualization

A user should have a reasonable understanding of what they will find underneath top-level navigation. Name your navigation exactly what it is and try not to be cute when naming different areas. When developing navigation and content areas, group like items together. This will add cohesion to areas and straighten the users understanding of the content.

Contextualize navigation and certain content elements to limit what the user has to visually take in at any one time. Content having the appropriate context and related information can do a lot to add additional clicks to supporting content.

3. Consistency

Being consistent in placement of navigation is a must. Some of the worst UI’s are ones where navigation moves around the page. Iconography and color can do a lot to improve the UI. Stick with your design conventions and try not to have many variations.

Buttons and typography should have a consistent feel and any deviations should point out special situations to the user. If you have a case where there is a slight change from page to page, like the case of an error message on a form, make sure the user notices the change. This can be extremely frustrating to users who don’t notice the page refresh and the page isn’t noticeably changed.

4. Beware of the Visual Arms Race

When designing a site or application you will usually have input from a client or business interests. It’s important to translate their request as it relates to the UI. A lot of times there will be multiple interested parties with separate goals competing for UI importance. It’s vital to understand this; it happens so often I coined the phrase “visual arms race” to describe it.

A visual arms race is when multiple stake-holders compete for prominence in the UI. It tends to skew the UI in some funky directions with the danger of losing focus of the core goal. Remind them what the core goals of the UI are and make sure their suggestions are in line with them. I’ve had many UI’s fall apart because of competing interests fighting to be the biggest and boldest.

There will also be a tendency for people to provide solutions to UI problems — try to get them to articulate the problem first. Many times their suggestion will be to add something to the UI, but this may not always be the best solution. If you first understand the problem, you may be able to come up with a better solution.

5. Testing

Because we are so involved in developing the UI, it’s hard to look at it as if you were a new user. That’s where testing comes in. For most projects I don’t think you have to do extensive user testing, but for projects that have sophisticated UI’s, testing can eliminate a lot of customer service question and also save money.

For smaller projects, taking simple screen mockups and asking someone new to the UI what the primary and secondary goals of each screen is can give you a good idea if the UI is working. For larger, more complex projects, having a formal user test or focus group can also be helpful.

In Conclusion

None of these suggestions are ground breaking, but they are things that I keep in mind when developing a new user interface. You can’t go wrong with just trying to keep it as simple as possible.