*** From the Archives ***
This article is from February 15, 2001, and is no longer current.
Great Sites: A Novel Interface for the Smithsonian’s Everyday Things
Don’t you hate it when the first page of a site is nothing more than a long list of technical requirements for viewing the site? This is not a good way to begin a quality Web-browsing experience. Yet the appropriately titled “Revealing Things” prototype created for the Smithsonian Without Walls has no choice. What makes this online exhibit so interesting and exciting is the technology behind it, so there is no alternative low-bandwidth or feature-crippled version.
Revealing Things uses a proprietary data-animation engine called ThinkMap, which is a Java application developed by Plumb Design. The first prototype use of this technology can still be viewed at Plumb’s Visual Thesaurus site, which presents a fascinating free-association view of an online thesaurus.
The Revealing Things project was handled by the design firm Razorfish, which brought in Plumb specifically because it wanted to use ThinkMap to animate the interface. The efforts of these two firms — one handling the front end, the other the back — resulted in a powerful exploration tool that takes us to the edge of what’s possible on the Web.
Exploring the Site
Once you get past the “Revealing Things” requirements page, you’ll experience a delay while several files load. These are not Flash files, though Flash is required for one of the later animations. When the loading finishes, you’re left at the real introductory page, which reveals only a sampling of what lies ahead. Click to continue.
Finally, a small, 600-by-400 pixel window opens with a number of different information areas divided into frames. The main content frame includes a picture of the currently selected “thing,” in this case a Gilbert Chemistry set from the ’40s, with an accompanying narrative. Some of the narratives have additional pages or audio, and you click icons to load these.
Figure 1: The “Revealing Things” site divides its 600-by-400 window into several frames.
All the site’s text is set as sans serif using CSS (Cascading Style Sheets). The dark gray background of the narrative frame provides good contrast to the yellow text and the images.
A stack of thumbnail images lives in a narrow middle column on the page. These look like basic links from thumbnail to content, but the stack is actually richer than this. When you move the cursor over a thumbnail, the image is highlighted to show that it’s selected. The frame in the lower left corner of the window identifies the image and includes a brief, scrolling description. At the same time, the name of the image is highlighted in the floating “Maplet” frame at the left of the window — the frame that holds the map of the various associations.
Figure 2: Moving the pointer over a thumbnail image highlights the associated title in white within the Maplet frame to the left.
Clicking on a thumbnail changes the content and title frames and reshuffles the stack of thumbnails so that the active one is on top. Simple enough so far. But don’t let the fact that there are only ten thumbnails fool you.
Take a closer look at the Maplet frame. This is where most of the navigation occurs, and it is an ever-changing map of associations rather than a direct correlation of fixed hierarchical links. In the center of the Maplet is the current content item in yellow — the color for titles that represent “things,” or objects. The concepts that relate similar objects appear in blue. These are associative links, and you can click on any blue item to bring it to the front and rearrange the map. As we saw in Figure 2, highlighting a thumbnail highlights its name in white in the Maplet.
What you’re seeing is a complex database schema come to life. Each “thing” fits into a number of concept categories, and as you click through the map, you can see the associations rearranging on the fly. When a blue concept comes to the front, the yellow “things” float around it, and the column of thumbnails updates. Clicking a yellow link brings that thing to the center, changes the content frame, and rearranges the thumbnail column. So if you click on Unwashed Jeans, for example, its yellow title comes to the center of the map, and three blue concept links float around it — Recollection, Jeans, and 1950s.
Figure 3: Clicking on an object title (yellow), such as Unwashed Jeans, brings it to the center of the map, surrounded by relevant concept links (blue).
If you click on the blue 1950s concept link, new associated concepts appear around it, and yellow “thing” links display in the background. The same “things” show up as images in the column of thumbnails.
Figure 4: Clicking a concept link (blue) brings it to the center of the Maplet.
From a design and user-interface point-of-view, all the pieces — the frames and the elements they contain — make up a coherent whole, with navigation on the left and content on the right. The frames-based organization makes it possible to change the layout of elements in the large frame to suit the contents. So one content document might have a dark background and another a light one. One frame might be straightforward HTML and another use Flash animation. This flexibility also makes it easier to acquire content from outside sources, but it also means that some of the frames don’t fit as cleanly into the space as others.
Navigation is not as straightforward as one might hope, and I’m certain some visitors will find it confusing. But this results more from the novelty of the system than from a fault in the design. There is no navigation bar; everything is selected from the Maplet or column of thumbnails. This scheme works in this case, because the site is completely devoted to the collection of “things” and their revelations; there is no place else to go except the Help section, which may come in handy until you’ve acclimated yourself to this new way of navigating.
Figure 5: “Revealing Things” includes concise, well-organized help to get visitors up and running with its innovative interface.
Using the three sliders in the frame at the bottom-left corner of the window, you can also adjust what information is shown in the Maplet, to place more or less emphasis on Theme, Era, and Object.
Clicking on the little window icon in the blue bar across the bottom of the window opens a new, separate Maplet window. This gives you more room to see the concepts and their relationships to the objects of the exhibition. You can even drag the items around and watch them rearrange. It’s almost more fun to watch the relationships change than to read the object descriptions.
Having Things Your Way
You may have noticed that I’ve talked very little about the exhibition itself. The attraction of the content is based mostly on nostalgia. The featured “things” that are revealed in this exhibition are everyday objects of the not-too-distant past, and each has a story to tell. The stories are not profound, but they add a facet of human interest to these otherwise mundane artifacts of the ’40s, ’50s, and ’60s.
More interesting from the standpoint of information architecture is the way information is stored, selected, and presented. There’s a freeform nature to the Plumb Design ThinkMap that makes each visitor’s experience different and personal. It gives you the opportunity to make your own choices and follow your own interests. The unique tools facilitate this rich browsing experience, while the design of the site leads us to discover as much about ourselves as about the exhibited things.
Read more by Clay Andres.
 |
I find it amazing that some people would review this site as an example of good design. The site is simply too slow and the UI is unecessary complicated.
wasted my time waiting for nothing to happen. go back to the old drawingboard
For many, a site’s load time is the number one user experience and all else follows from this. This is a short-sighted view and one that leads to blindingly dull conformity. Here is a site, that while admittedly slow, shows the real potential for displaying information in this new medium. Compare it to something that is perhaps even slower loading, but more immediately accessible, like a music video. You’re willing to wait for a known experience, but it’s difficult to explore the unfamiliar. I say give us more exploration, and if it requires a minute’s wait, it’s a price worth paying.
While load time shouldn’t be the only consideration when determining a user experience, it is an important one. We can’t simply dismiss the abhorant load time of this site in the name of being “novel.” I believe it takes even more creativity to explore the edges of the technological envelope while still creating an exciting experience for ALL users, not just those with blazingly fast broadband. Anybody can create a wizzbang site that takes hours to download, but how many people can create one that is enjoyable to the entire internet population (from dial-up to broadband)? Those few sites are the ones that CreativePro should be showcasing, not these sites that are created by technophiles for technophiles.
Beyond the load time issues, which CP wishes to ignore, are the usability issues. The window doesn’t adjust to match the users screen size, so users with large monitors can’t read the type. This is something that is simple to fix, and shows a lack of usability testing. The site is also abismally hard to use, with the links swirling around forcing the user to “grab” them. I appreciate the novel idea of taking a museum and transfering it to the internet, allowing for a true exploration of materials. However the system must be deemed a failure if the user simply gives up on it due to its complexity…which is evidently the case here.