Of Ansel and Atomz:
Surfacing Deep Content On-line and On-Site at SFMOMA

Tana Johnson, Dana Mitroff, and Peter Samis, San Francisco Museum of Modern Art, USA

http://www.sfmoma.org/

Abstract

At the San Francisco Museum of Modern Art (SFMOMA), where we have been creating and publishing rich digital content for more than ten years, the urgent question has become how we can guide our audiences to the information of greatest interest to them, whether they are accessing our Web site remotely or using our multimedia programs at the Museum. We are also asking ourselves what, if any, should be the difference between those two experiences. This paper describes two new initiatives: the preparation for and implementation of a hosted site-wide search solution at www.sfmoma.org; and the new Koret Visitor Education Center Discovery Interface, which reorganizes the contents of thirteen different multimedia programs and presents them through three point-and-click visual interfaces.

Keywords: discovery, user interface design, multimedia resource discovery, legacy software, search engine, on-line collection database, Google, Flash, metadata, XML

Overview

At the San Francisco Museum of Modern Art (SFMOMA), where we have been creating and publishing rich digital content for more than ten years, the urgent question has become how we can guide our audiences to the information of greatest interest to them, whether they are accessing our Web site remotely or using our multimedia programs at the Museum. We are also asking ourselves what, if any, should be the difference between those two experiences.

Until recently we had been suffering from the classic problem of first-generation Web sites and multimedia programs: the institution organizes its content in the ways it thinks about itself, replicating its historical development in the digital realm, rather than organizing and presenting content in ways that are intuitive from a visitor’s point of view. On the Web, for example, our educational multimedia content was buried deep within the Education section of the Web site and, for all practical purposes, inaccessible to those who weren’t familiar with this unique aspect of SFMOMA’s digital offerings. Users who didn’t happen to click through to a particular sub page never discovered the rich variety of multimedia content available on-line. Meanwhile, on the kiosks in SFMOMA’s Koret Visitor Education Center, we had organized content using the titles that the programs had at the time of their creation. The titling system was meaningful to us, but to an outsider it simply obscured many potentially rewarding educational experiences.

This organic, ‘bottom-up’ evolution is typical of most museum Web sites and multimedia programs developed in the late 1990s and early 2000s. This paper outlines our attempts to remedy the situation within a modest budget, without rebuilding from the ground up. Still, these efforts constitute a significant correction, and put us in the position to explore what our next-generation digital resources will look like.

On-line

The On-line Challenge

On the Web, our new site-wide search engine is a licensed product called Atomz Search™, which we launched in winter 2004 as a gateway into our wide variety of content. From media-rich, Flash-based multimedia programs such as Ansel Adams at 100 to public program information stored in an SQL database, it surfaces resources that would otherwise be buried deep within the site. It makes accessible everything we offer on-line, from museum store products to artworks in our collection. With almost 600 searches performed on our site each day, it is a critical feature of sfmoma.org.

The impetus for a new search engine came in spring 2003 while we were working on a major initiative to bring our collections management database, EmbARK, on-line. (Mitroff, Misunas, and Wise, 2003) That project, informally called Collections Access Online, grew out of a National Endowment for the Humanities (NEH) Challenge grant and was a cross-departmental collaboration of SFMOMA’s Web group (part of the Department of Publications and Graphic Design), the Interactive Educational Technologies group (part of the Education Department), and the Collections Information and Access department (part of the Collections Department). Around the same time, we also received a grant from the Institute of Museum and Library Services (IMLS) to further refine our use of multimedia and improve our ability to communicate with visitors in the galleries and on-line.

When we began work on Collections Access Online, our plan was to modify the EmbARK Web interface so that it matched the look and feel of our existing site, and to link to it from the Collections section of our Web site. We did not plan to integrate collections data into the search engine, which at that time was a very rudimentary built-in feature that came with our Web server (Microsoft’s Internet Information Server). In order for users to search SFMOMA’s collections, they would have to click through to a separate search within the Collections section of the Web site. If they typed an artist’s name or the title of an artwork into the home-page search box, the results would not include any collections data.

As we began developing the functional specifications for the collections project, we quickly realized that this setup would not be the best way to serve our Web users. Burying the collections data within the Collections section of the site would assume that all users were familiar with the basic concept of a museum collection. To us, it might be obvious that clicking on Collections in the navigation bar would lead to the collections-specific portion of the site (where, presumably, one could then search the database records), but that system would put the burden of knowledge on the user. Here was an acute symptom of ‘first generation’ Web site balkanization, in which a site’s structure mirrors the organization’s internal structure.

Our educational multimedia content was in a similar situation. We had six years’ worth of rich multimedia content – a wealth of information illustrating some three hundred objects in our collections – yet none of this content was accessible via our Web site search engine. The only way to access all of this rich, interpretive content was to navigate three levels deep into the Education section of the site, and then, if lucky, stumble upon one of our interactive Flash features such as Making Sense of Modern Art. But even at that point, there was no quick-and-easy finding aid telling people where to go to learn more about a particular artist or artwork.

The rest of the site’s content suffered from similar navigational problems. Although collections data and educational content are certainly the ‘meat’ of sfmoma.org, our site includes many other types of content as well. The Exhibitions and Calendar sections are SQL database-driven areas of our site that receive over 240,000 visits each year from users who are planning trips to the Museum. Our on-line store, hosted off-site by Yahoo!, receives almost 54,000 visits per year. And our on-line Press Room, also SQL database-driven, serves a small but active and important audience of almost 32,000 visitors. Yet the search engine we had at the time could only crawl the static HTML pages on our Web server and could not ‘see’ any of our dynamic data, multimedia content, or content hosted on external servers. Furthermore, we had very little control over the search results and how they were displayed.

The On-line Solution

The right solution was obviously a centralized, comprehensive search engine that would bring everything together in a simple, intuitive interface. Hence, the scope of this project quickly grew beyond offering straightforward access to collections data into a larger mission to increase the availability of the full variety of content on our Web site.

To identify the right search solution, we engaged a San Francisco-based technology consulting firm, Carbon Five, to assist us with a technical needs analysis and help us select the right search-engine technology. We needed a product that could handle the diversity of our site, in terms of both content and format, and deliver relevant results in a customizable way.

Needs Analysis

We identified the Atomz search engine based on three criteria: its general feature set, our technical requirements, and its reporting capabilities.

Atomz Search offered a rich feature set that allowed a high level of control and customization over search results. For example, we wanted to be able to prioritize results for certain words and phrases; the first hit for the word film, we knew, should be a link to the film series The Seventh Art: New Dimensions in Cinema. We could guarantee search returns like this through the configuration tools in the Atomz Search administrative interface. We also wanted to be able to group different types of search results into a handful of categories so that users would not be overwhelmed with an endless Google-type list after each query. An Atomz Search feature called collections enabled us to achieve this, consolidating search results into our own customized categories. Atomz Search also supported the easy integration of thumbnail images into search results. This feature alone, we felt, would make the new search function far more useful and efficient than a massive list of text-only results, and it would be more in harmony with the identity of our institution; SFMOMA is, after all, an art museum.

Atomz Search also satisfied our technical requirements. Because SFMOMA’s IT staff did not have the resources to support and maintain a search engine, a hosted search solution was very attractive; it made sense to select one that could be hosted off-site, and that the Web team could maintain without too much outside assistance. Once Atomz Search was configured by the Atomz implementation team, the administrative and technical requirements for maintaining it were negligible.

The reporting capabilities were also of great importance: We wanted to know what terms and phrases users were searching for, and how we were serving them. Atomz Search had impressive metrics reporting capabilities.

For all these reasons, Atomz's hosted model with its subscription service was ideal. The hosted solution required no ongoing IT support. The company was willing to work with us to achieve our customized search-return categories and display. And the subscription costs we negotiated were affordable within our IMLS-funded budget.

User Interface Design

From the start, SFMOMA’s Web team was committed to focusing on user-centered design. The project presented a great opportunity to apply interface design principles from the for-profit Web sector to a museum site. We had previously benefited from some pro bono consultation from a user interface specialist with the Nielsen Norman Group. We followed the guidelines articulated in their report E-commerce User Experience: Design Guidelines for Search (Nielsen, et al, 2000), with the following imperatives.

Make Search Visible

The design of the old SFMOMA site required users to click on an SFMOMA logo to reveal the search box. The only hint offered was the word search next to the logo.

Fig 1: Old SFMOMA Search box.

We redesigned the interface to make the search box clearly visible.

Fig 2: Current SFMOMA Search box, http://www.sfmoma.org

Make The Default Search Simple To Use

We debated whether or not to offer search parameters such as search collections, search calendar, and search entire site, but we determined that simpler was better. Again, just because a Web site may have evolved over time with a phased rollout of separate back-end systems, those systems may not be meaningful to users. Hence, we determined not to ask users to narrow their searches up front. They would only need to submit a single query; we would, on the other hand, be able to group their returns by category so they could instantly see related results. We created the categories based on our user-testing findings (discussed in detail below).

Provide Information About Alternative Ways Of Locating Content

Because so much rich content was buried in the SFMOMA Web site, we knew that users might not find everything we had to offer, even with a new search engine. The Atomz Search collections feature allowed us to include a special category for interactive features on the first search-return page. We also discovered that we could incorporate links to multimedia content within our on-line collection pages, thereby ensuring that users who might have missed relevant multimedia features in their surfing or search results could find them while browsing the collections.

Fig. 3: Object in ‘Collections Access Online’ with a link to Making Sense of Modern Art, http://collections.sfmoma.org/OBJ177.htm.

In addition to consulting the for-profit Web world for search engine design principles, our interface design requirements were grounded in extensive data from our Web server logs. An analysis of the logs revealed that the most frequent searches were for specific artists or artworks in the SFMOMA collection. Other popular searches were for art history topics such as “California artists,” logistical information about the museum, information about current exhibitions and public programs, products in our on-line store, and press-room content.

Fig 4: Atomz Search results for Paul Klee, http://catsearch.sfmoma.org/search/catsearch/?sp-p=all&sp-f=ISO-8859-1&sp-a=sp10026505&sp-q=paul+klee

Based on these findings, we divided our users into three general groups and mapped out six specific categories of results using the Atomz collections feature:

1. People planning to visit SFMOMA who want logistical information about the institution, its exhibitions, and its public programs

            a. Exhibitions and Public Programs

            b. General Information
2. People looking for artists, artworks, and general art historical topics

            a. Interactive features

            b. Collections

3. Specific audiences with particular tasks, such as shopping or obtaining press information:

            a. MuseumStore

            b. Press Room

Implementation

Before we could implement Atomz Search, we had a lot of housecleaning to do. The HTML page titles on our site, for example, followed a haphazard mix of styles and conventions, so that a list of them in search results was neither consistent nor informative. One page might be titled SFMOMA – Welcome while another page would be titled Info: San Francisco Museum of Modern Art. Some pages were simply Untitled, and a few stragglers from our early on-line curriculum site were titled Welcome to Adobe GoLive 4!

To tackle this massive project, the Web team first established new naming conventions for the entire site. We then broke the site into sections and subsections and gave every page a unique name. A former intern implemented the re-titling; the job took a full week.

The next step was adding the appropriate metadata for each page. Not only did this include standard metadata fields such as keywords and description, but also custom fields that we developed and instructed Atomz Search to recognize. For example, in order to display thumbnail images in search results, we created a metadata field called SearchImage.

For Atomz Search to index our multimedia content required a significant amount of effort. The Flash-based Making Sense of Modern Art program (http://www.sfmoma.org/msoma/), for instance, was buried many levels down with a single entry point, but we wanted to surface numerous artwork-specific sections within it. In order to surface these bodies of content, we had to install multiple ‘side doors’ into the Flash program. Each new point of entry was given a unique URL using what we call ‘threshold’ pages.

A threshold page is a static HTML page that contains a link to a unique Flash file and metadata about the movie’s contents.

Fig 5: Threshold screen for Henri Matisse's Femme au chapeau, http://www.sfmoma.org/msoma/artworks/5478.html

The threshold pages provide Atomz Search with the artist’s name, artwork title, thumbnail image, medium, and other information. They have another benefit as well: the brief descriptions they contain give surfers context and some background information as they enter our interactive features, and they provide links to required plug-ins such as QuickTime and Flash. And because threshold pages are static HTML pages, we can point outside search engines such as Google and Yahoo! to them.

Fig 6: Google search results for ‘matisse sfmoma’ showing a link to the multimedia threshold page, http://www.google.com/search?hl=en&q=sfmoma+matisse

Now our multimedia content appears in search results not only on the SFMOMA Web site, but also all over the Internet.

Through our Web logs, we have discovered that Google loves the threshold pages, and we’ve seen a tremendous increase in traffic coming from Google straight into our multimedia content. In the past two years, 70% of our search engine traffic has been referred by the Google search engine, and the amount of traffic Google has referred to our site more than doubled between 2003 and 2004. Of the Google searches that led users to our site, almost 21% of those searches were for names of artists or artworks in SFMOMA’s collection for which we have interactive multimedia features and relevant threshold pages. In fact, more visitors now come through the threshold pages than through Making Sense of Modern Art’s front door.

On Site

Inside SFMOMA, we have taken a very different approach to surfacing content – an approach that is designed for visitors who have just seen artworks in the galleries and are sitting down at an interactive kiosk. In October 2002, SFMOMA inaugurated its new Koret Visitor Education Center (KVEC) which houses the Learning Lounge, an elegant drop-in space with comfortable seating where visitors can avail themselves of informed staff, exhibition catalogues, film screenings, and programs produced by our Interactive Educational Technologies (IET) team (Samis, 2003). With the opening of the Koret Center, visitors can finally access, via the seven workstations distributed around the Learning Lounge, all of our multimedia programs, including pre-Internet programs that were not previously available on the Web site. Visitor surveys had revealed that people liked to see videos of artists, so we developed a video anthology program called Artists Working, Artists Talking for the new kiosks.

Fig 7: The Learning Lounge in the Koret Visitor Education Center at SFMOMA.

In fact, by 2004 there were no less than thirteen different interactive features on these kiosks:

1. Ansel Adams at 100
2. Art as Experiment, Art as Experience (12 abstract artists)
3. Artists Working, Artists Talking
4. Romare Bearden
5. Philip Guston
6. Eva Hesse
7. Making Sense of Modern Art (40 artists in depth and growing)
8. Gerhard Richter: Forty Years of Painting
9. ROY/design series 1
10. Frank Stella
11. This Is Not a Web Site (a high-school program about René Magritte)
12. Bill Viola
13. Voices & Images of California Art

The kiosks proved very popular – second only to the regularly scheduled film screenings – but we found, to our frustration, that visitors only scratched the surface of their contents. So many human and financial resources had been invested in our flagship program Making Sense of Modern Art, but KVEC visitors consistently chose to view two other programs: the new Artists Working, Artists Talking and the much older (pre-Internet) Voices & Images of California Art.

We determined through visitor surveys that the interface housing the programs was visually compelling but difficult to navigate. According to users, for instance, the title Artists Working, Artists Talking was self-explanatory. Furthermore, once they clicked on it, they were presented with a list-based menu of the forty artists that comprised the entire program’s contents – all on one level. Clicking on a name triggered a full-screen, high-quality video. Instant gratification. Then they clicked on the next name. We often observed people going down the column, starting with a familiar artist such as Diego Rivera or Frida Kahlo and then triggering every subsequent video, whether they knew the artist or not. They were interested in a passive learning experience – one that required little navigation or reading.

Visitors informed us that titles such as Making Sense of Modern Art,Art as Experiment, Art as Experience, and even Voices & Images of California Art revealed little or nothing about the programs’ contents. As they sat down at the kiosk, it was not clear which of the featured titles would have information about Jackson Pollock or Salvador Dalí. Here, again, we had organized our content by the legacy principle, accumulating program titles that were meaningful only to us, as past development and production campaigns.

Our new project, then, was to reorganize the multimedia content so that a kiosk user could find something of interest within just three clicks. The programs ranged in format from Flash (circa 2000–2004) to HTML (1998–99) and now-obsolete applications such as Apple Media Tool (1994–98). To give visitors what they wanted would require us to unify all of these formats and create a tool that would ‘atomize’ them – break them into small content chunks that visitors could access directly and intuitively.

In March, 2004, SFMOMA contracted with Method Inc., an Internet design firm, to create what we call the Discovery Interface. We agreed with Method on the following design goals:

1. To make preexisting (and future) content available within three clicks
2. To create an interface that is fun to use and a sensory experience
3. To create an easy-to-understand sorting mechanism
4. To foster cross-linking when possible
5. To be tactile, high end, luxurious, and stimulating

Method proposed a sophisticated, easy-to-use, and technologically advanced table of contents that would allow users to easily find and browse content. They specified Flash back-end with XML, perhaps combined with HTML using Cascading Style Sheets, and they suggested that the framework could be created quite simply with only two to three new screens. We anticipated the project would be completed in three to four months. It turned out to be ten.

Needs Analysis: Personae & Requirements Development

In the formative phase, we conducted a survey that reflected two distinct sets of users: docents, who were starting their tours using our kiosks, and visitors, who were of various ages, backgrounds, and ranges of art experience. The findings were enlightening. Not only were the users often having trouble finding what they were looking for, but they also had vastly different ways of searching for information: by artist name, by medium or movement, by subject matter or theme. We identified a number of potential user scenarios:

1. The Browser: a visitor with no particular agenda who just wants to click around and see what’s available
2. The Knowledge Seeker: a visitor who approaches the kiosk to search for a specific artist or artwork
3. The Casual Seeker: a visitor who wants to know more about a particular question or subject, but is willing to browse around to find an answer
4. The Planner: a visitor interested in highlights of SFMOMA’s programs or collections. This person tends to go directly to orientation or special exhibit links and wants to know where a specific artwork is located in the galleries. (See end note)
5. The Visual Player: a visitor who does not know artists’ names but responds to visual cues and would most likely browse by clicking on available images

The Discovery Interface would need to accommodate users with varied learning styles, objectives, knowledge bases, and computer skills. Technical issues to consider included the fact that some existing multimedia programs were Web-based, while others could only run from a local machine. The task was further complicated by the fact that our kiosks in the Koret Center do not have keyboards (to prevent users from accessing the system/desktop and from using the computers for e-mail). Without a keyboard there could be no search box, so it would be essential to devise clear and creative ways of exposing content via a set of point-and-click visual arrays.

The team conducted a needs analysis to determine the functional requirements of the interface. Did we want users to be able to learn something while browsing ‘the surface’, rather than immediately plunging them into ‘deep’ content? How much information was enough? How much was too much? We knew that, for the longevity and scalability of the program, the interface should be Web compatible and adhere to Web standards. We finally decided that the home page should offer three paths: a menu of artist names, a visual menu of artworks, and interactive feature titles (the ‘old way’).

Fig 8: Discovery Interface homepage.

Fig 9: Discovery Interface artwork menu.

Beyond this initial set of requirements, an additional set of enhancements was proposed: the creation of a middle, or exploration, zone within the interface that would include zooms of each artwork; connections between related artists and artworks; and ways to filter the opening menus by medium, time period, movement, and geographic location. The goal was for all of the interactive features to be accessible within three clicks. And, of course, the overall design and presentation had to be beautiful and visually compelling.

Design Phase and Technical Implementation

Early in the conceptual development phase, Method proposed re-titling the entire Discovery Interface Making Sense of Modern Art to reflect the fact that all of our programs explain and contextualize the art in SFMOMA’s collection. This re-branding was a crucial step in acknowledging our project’s mission. The point of integrating all of our prior programs into a seamless whole, after all, was to give visitors more transparent access to content – to make their museum experience more user friendly. During the visual design phase, we spent months critiquing many different page layouts, colors, motions, sounds, and navigation schemes.

Then came the technical build out, which was divided into two parts: the front end, or Flash code that would make the screens interactive and handle the XML produced by the back end, which entailed building a Microsoft Access database and a Web-based authoring interface for inputting data. The decision was made to shift from multiple standalone kiosks to a client-server model for ease of updating. Screen size and video resolution became issues for the developers, given that we were working with aging CD-ROMs running at 640 x 480 pixels, HTML Web sites and Flash-based programs running at 800 x 600 pixels, and full-screen QuickTime movies; everything needed to work at a screen size of 1024 x 768.

Fig 10: Discovery Interface artwork detail page.

Also important to consider was the amount of in-house production time required to create thumbnails and zoom-size artworks, to recompress QuickTime movies into Flash files, to write artist bios, and so on. As the production workload grew and the rollout date fell further behind, we realized that our simple project had become much more than a new ‘front end’. But when we were finally able to conduct usability tests, users typically did find what they were looking for – and serendipitously came upon much more in the process. At this writing, we are installing the full-featured program into our Koret Visitor Education Center.

Fig 11: Artwork-specific screen inside Making Sense of Modern Art.

Fig 12: Richard Diebenkorn video in Artists Working, Artists Talking

Conclusion

These two parallel and cooperative initiatives, supported by a National Leadership Grant from IMLS, represent our attempts to guide our museum audiences effectively to the content of greatest interest to them – whether they are on our Web site or inside SFMOMA – in an intuitive and technologically mature way. The outcomes of these initiatives include a comprehensive search engine for the Web site with easy-to-read returns full of visual highlights, and a sensually rewarding point-and-click Museum kiosk browsing interface that builds on visitors’ gallery experiences and presents them with interesting and provocative multimedia content.

We expect that the new Making Sense of Modern Art will find its way to the Web, augmented by educational curriculum, in the second-generation phase of development. Now that we have ‘atomized’ our content, we are more prepared to target it to a spectrum of users in a variety of ways and places: on-line at home, in SFMOMA’s Koret Visitor Education Center, in school, and in the galleries.

Post Script

Full support of “The Planner” scenario was deemed out of scope for present purposes. Although more and more museums seem able to fulfill it, we were less than sanguine about our ability to channel reliable information about object locations from our collections management system to the Koret kiosks and to refresh it on a regular basis.

References

Mitroff, D., M. Misunas, M. and S. Wise, S. (2003). Bringing It All Together: Developing a User-Centered Search Experience on the SFMOMA Web Site. In D. Bearman and J. Trant (eds.). Museums and the Web 2003: Proceedings. Toronto: Archives & Museum Informatics, 2003. last updated March 2003, consulted January 25, 2005. http://www.archimuse.com/mw2003/papers/mitroff/mitroff.html

Nielsen, J., Molich, R., Snyder, C., and Farrell, S. (2000). E-commerce User Experience: Design Guidelines for Search. Downloadable PDF Published by Nielsen Norman Group, orderable online at http://www.nngroup.com/reports/ecommerce/search.html.

Samis, P. (2003), "Bridging the Gap" in SFMOMA’s Learning Lounge: Where High-Tech Meets High-Touch. In ICHIM ’03 Cultural Institutions and Digital Technology Proceedings, Paris, Archives & Museum Informatics Europe, 2003. consulted February 22, 2005. http://www.ichim.org/ichim03/PDF/100C.pdf

Editors Note: Textual correction made June 1, 2005 at request of author.

Cite as:

Johnson, T., D. Mitroff, and P. Samis, Of Ansel and Atomz: Surfacing Deep Content On-line and On-Site at SFMOMA, in J. Trant and D. Bearman (eds.). Museums and the Web 2005: Proceedings, Toronto: Archives & Museum Informatics, published March 31, 2005 at http://www.archimuse.com/mw2005/papers/johnson/johnson.html