Help me organize boat-loads of data in a well-designed, user-friendly way!

June 23, 2010 9:52 AM

Help me organize boat-loads of data in a well-designed, user-friendly way! I'm making a website for an organization with a very comprehensive and interesting audio archive (say, 1500 items). I'm trying to find a way to represent the archive (about 24 items at a time, per page) in a visually easy, comprehensible way.

The problem is that there are several types of items in the archive: there are recordings, series (containing similarly-themed recordings), producers (the people doing the recordings), DJ shows (which is like a series of curated audio shows) and so on. I'm trying to arrange these in a grid, with each item being a similarly-sized box of, while at the same time trying to quickly delineate the differences between each item, and the vaguely hierarchical relationships between items. For example, a series encompasses a bunch of recordings, so maybe an icon indicating a bunch of stacked discs would indicate a series? Or should I color-code each item?

From a UX perspective, what's a good way to organize this visually? Do you have any good examples of current websites that deal with a large amount of information that needs to be referenced often? I'm looking for any good starting points

Thanks, AskMe!

posted by suedehead to computers & internet (5 answers total)

If this was a project I was just starting at my job I'd need to know a couple of basics off the bat:

1) How users expect to search for, navigate, and consume the data. e.g. Do they look for things by producers, by audio recording name, by series name, etc?

2) Besides the individual vs series of recordings, are the other types all facets of the whole collection? i.e., Is "by producer" one way of viewing the data set, and "by recording title" another way to view the whole data set? If so, then you might benefit from a type of faceted navigation. Check the Yahoo design pattern library and welie.com for examples of faceted navigation.

3) Items per page: Do you want to give the ability to view more than 24? I would. For a set of 1500, you might offer choices of 20 and 100, or 24, 48, 96. You choose the increments, but just give those who want more on a page the ability to view more on a page.

4) Pagination: Check aforementioned design pattern libraries for examples. I prefer pagination to be present at both the top and bottom of the results set, on the right side. Decide whether there will be a "view all" option.

5) If there's any chance at all people with visual disabilities are going to be using the site (and don't forget that tons of people are color-blind), stay away from color-coding as the only difference between icons. I suggest a stack of widgets to denote a series of widgets. Again, check design pattern libraries.
posted by ImproviseOrDie at 10:44 AM on June 23, 2010

Seems like you could simplify things a lot, and at a lower cost, if you use wordpress.

Each recording goes into a post (using micro audio plugin to play mp3), which can also have text describing the content, as well as both categories AND tags to really detail and cross reference each recording's unique profile.

Another plugin can be used to force a 'set related posts' option, for those items in a series, or just wing it with any 'see related posts' and let the content/tags/categories self relate.

The last plugin I would get is wp-pagenavi, which then gives you pagination (not just newer/older post links) for easier getting around.

I'd avoid color coding, and also cutsie icons, which almost never mean to insders what they mean to outsiders.

Simple, quick and virtually out of the box for you.
posted by MTCreations at 11:09 AM on June 23, 2010

Ah, I'm using Drupal and have mapped and thought out ways in which data is going to be stored, displayed, and organized. The problem isn't the backend or the structure of the interface so much as the specific visual design- using icons, or double borders, or dotted lines, or colors, etc, to represent mini-representations of each content type.

Originally this task was delegated to a designer, but the designer backed out at the last moment, and so now this task lies to me.

Design patterns are exactly what I was looking for- thanks. The site is the aural equivalent of TED.com, which is actually not that well organized as an archive, but more of a showcase of 'featured' items. Plus, it's in flash.

So any other ideas or example sites would be very very much recommended. Thanks again!
posted by suedehead at 6:09 PM on June 23, 2010

I'm not sure you're going to get great answers from the hivemind on this one. Other than some of the information architecture approaches that ImproviseOrDie recommends, visual cues such as iconography, color-coding, etc. are highly subjective and can be accessibility and usability minefields (though aren't necessarily so).

(And, by the way, if you have a chance to create a faceted structure, it might be worth the time. As a frequent consumer of music, I often search across different dimensions depending on what it is I'm trying to find.)

That said, if I were in your shoes, I'd combine several of your approaches. For example, create an icon for each type, and color-code each icon. But don't rely on iconography; pair each with a terse-but-meaningful text label.

And furthermore (back to faceted organization) - make each label navigable; that is, if you're looking at XXXXXXXX series recording, and you click the series recording icon, take the user to a page to view all series recordings.

In terms of illustrating hierarchical relationships - this is a tough one. What constitutes the parent in a series? Is this a conceptual grouping based on label? Artists? Producer? Instrument? Decade? Genre?

The way this is often handled is to treat the parent as a separate entity unto itself. (This is natural when grouping by artist; less so when grouping by, say, "The Blue Note 25th Anniversary Masters Series" or whatnot.") If it makes sense, find the common theme across series, and try to enforce the attributes of the theme, rather than "this is a collection of individual recordings." But only if that makes sense.

From a visual perspective - do you need to show that xxxxxxx recordings are a part of yyyyyy. Could this be accomplished textually? Maybe two or three lines of text underneath the block that shows a bounded set of children - kind of like how Facebook will show three names of friends who "liked" something and then N more.

Other tricks: indentation, size contrast (parent big, children small), color contrast.

That's all I got. Hope it helps.
posted by kables at 9:20 AM on June 24, 2010

Thanks a lot for your response, kables!

Here's a very very rough mockup of what I'm working from, just for reference.

For example, create an icon for each type, and color-code each icon. But don't rely on iconography; pair each with a terse-but-meaningful text label.

That's a good point, am doing that already.

And furthermore (back to faceted organization) - make each label navigable; that is, if you're looking at XXXXXXXX series recording, and you click the series recording icon, take the user to a page to view all series recordings.

Yup, I've been doing that up the wazoo.

-

It's just that the specific visual representation is eluding me a little. I want to intuitively represent relationships between items. For example, in the mockup above, the relationship between a Show and a Series is immediately obvious, because the Series looks like a bunch of Shows layered on top of each other. Now I'm thinking: how I do this with a 'Producer' without having it look too much like a Show, or a Series, while indicating its relationship to a Series (a Producer can produce a Show and/or a Series)? And so on.

While the icon thing like you mentioned is what I might fall back on, I'm still not content with it being the only way for things to be represented, because it relies too much on the user's eye having to drag to the upper-left hand corner of each box.

Faceted navigation is a little bit hard, because the items in the archive are unique enough that it's sort of hard to really do a 'drilldown' navigation. I'm using tags though.

So that's really where I stand. The iTunes Music Store is an okay example, although maybe a bit too simple.
posted by suedehead at 11:04 AM on June 24, 2010