The ExhibitFiles Website is a community site for exhibit designers and developers. Almost three years ago now, Ideum worked with the Association of Science -Technology Centers and Independent Exhibitions to help design and develop the site. Created with funding from the National Science Foundation, the purpose of the site is share design practices and provide access to resources that can improve exhibit design. Last week, we launched a new feature called “Bits,” which best described on the ExhibitFiles site itself:
A Bit is an individual media element that you share with your peers. It might be a photo you take of an inspiring exhibit element or design approach, or it could be a prototype you’d like people to comment on — anything you can illustrate with a photo, video, or audio file. You can also just post a question if you’re looking for help from others.
Along with support for uploaded files, you can embed flickr photos or YouTube videos. We will be adding support for PDF documents and audio files in coming weeks. The custom-developed Bits feature and the site itself was developed using Ruby on Rails.
You can try it out at: www.exhibitfiles.org/bits.
There’s more on the Bits launch on the ExhibitFiles blog and Paul Orselli’s ExhibiTrick blog. You can learn more about the ExhibitFiles site development in the Ideum portfolio (A custom-built community site for exhibit developers).
We’ve just launched a redesign of our portfolio site and blog. The site aggregates content from our Flickr, Twitter, and YouTube sites, embedding it in our new website. For now, we’ve added simple links to our Facebook and Linked In pages. We may expand our integration with these sites in the future. Along with extending our reach into these social networking platforms, the site is easier to maintain and update.
The site is powered by WordPress. While this is hardly revolutionary, having WordPress work as our de facto content management system gives us a flexible platform for our Web presence. Our portfolio and products are custom “pages” in WordPress. The WordPress plug-ins Tweet Blender and Flickr Feed Gallery display tweets and photo thumbnails on the front page.
The portfolio itself contains descriptions for 14 projects. We’ve gone with a new editorial style for presenting project descriptions along with an improved layout. Each project description contains links to either YouTube videos or Flickr photos (or screen shots). We use Adobe Flash to integrate these media items into each portfolio piece. “Custom fields” in WordPress are used as hooks to connect to remote content and control the layout.
Five of the descriptions in the portfolio are for new projects we’ve worked on this fall and winter. These projects all involve either multitouch and/or multiuser technology. The new projects are:
- Visitors explore the electromagnetic spectrum on a custom 100″ multitouch table
- Teams of museum visitors guide their ships to an extra-solar planet
- “Magic Planet” exhibit shows visitors global images on a spherical display
- A multitouch “Collection Viewer” presents surprising connections to museum visitors
- Visitors explore “Arctic Choices” with a multitouch, multiuser mapping exhibit
The redesign of the portfolio site is our 4th since the company was founded in late 1999. Here ‘s a look back on some of the earlier designs.
We just learned that the KQED Quest website won the Best Use of Web 2.0 / New Media Award at the Jackson Hole Wildlife Film Festival. We worked closely with the KQED Quest team to develop this site, which makes extensive use of Google Maps and Flickr photos “mashed” into visually rich map applications.
There is a video on YouTube of our MT2 multitouch table in action at the Ontario Science Centre. The video shows our multitouch mash-up that uses Yahoo! Maps and Flickr photos. (The video also includes various applications from NUI’s Snowflake software suite which comes bundled with each table.)
We worked with Ontario Science Centre to customize the mapping program and they have opened it up to the Flickr community. Visitors can join their group, Innovation in Toronto, and upload geo-tagged photos to be included in the exhibit on the museum floor. This is the first time our mashup has been used in this way.
Update July 27, 2009: Ontario Science Centre just posted a video on YouTube that shows the Multi-touch Mapping Mashup in detail.
This post is the second in a series of three exploring multitouch and multiuser design. Our company, Ideum, develops computer-based interactive exhibits for museums.
The first post addresses user interaction and feedback, the second focuses on User Interface (UI) elements, objects and environments, while the third looks more broadly at how multitouch and multiuser exhibits can shape the visitor experience.
Objects, Environments, and Navigation
The last post explored the types of gestures and the way in which visitors interact. This post focuses on the elements that visitors interact with. As you’ll see, there is strong focus on objects. Multitouch and multiuser applications also require that we rethink standard navigation schemes.
Objects. Resizing and rotating objects is a common feature in many multitouch applications. This type of interaction is very intuitive and we observed museum visitors spending a lot of time viewing photographs in this way. For a multitouch multiuser table, an object-based approach makes sense. Objects can be rotated to accommodate visitors from any side of the table and multiple users can interact independently with objects. The extension of this object-based approach to connect with museum collections seems natural.
Environments. There are a number of interesting possibilities when we look at environments in multitouch design. In the Yahoo! Maps and Flickr mashup application we developed, the map was the environment. It provided context for the geocoded photographs. However, the environment could be even more dynamic with ability to transform objects or trigger new actions.
For example, one could imagine an exhibit where visitors could move objects from one-side of the table to other—this movement could represent time and we could see that object or photograph change over time. The table could effectively work as a dynamic timeline: move right and move forward in time, move left and you move back.
Additionally, a table environment could be divided into zones, and as objects are moved into these areas events are triggered, or objects are transformed in some way. There are interesting possibilities here for works of art. Exhibits where visitors manipulate sketches which transform into finished paintings could be developed. For scientific images, different views of objects shot by different types of imaging equipment or in different wavelengths could be used. Finally, developing physics games where gravity, the coefficient of friction, or other parameters could be changed is another possibility for science exhibits.
Universal, Omni-Directional Navigation. Since multiuser, multitouch applications can be accessed from any side of the table, there is a need, in some applications, for a universal navigation element. In our mapping application, we wanted to provide museum visitors with the ability to control the map environment. We found that panning could be a shared function, but the ability to zoom and select the map-type couldn’t be shared in the same way.
Visitors can “call the orb,” with a quick double-tap on the table surface and the orb even contains a compass to help the visitors orient themselves to the map they are controlling.
The Microsoft Surface team recently released an example of Newsreader with universal, omni-directional navigation. In this case, the navigational element is fixed and rotates around the center of the table.
Symmetric Navigation. Another possible approach to navigation on a large table where users can approach from any direction is what we call symmetric navigation. In this case, the navigational items are repeated in two places on the table. For example, a simple menu could be present in opposite corners of the table. Another configuration would have sets of tabs or buttons appearing on opposite sides of the table. The information would be repeated, but would be properly oriented for each side.
User Interface Elements
Many of the user-interface elements are similar to those found in touch screen mouse-driven applications. However, some new elements have appeared, mostly attributed to the development of the iPhone.
Buttons /Icons/ Thumbnails. These conventional navigational elements appear in most traditional applications. Of course, these graphic elements need to be large enough to pressed by a finger tip, like they would in a touch screen application.
Dials. Apple’s iPhone uses “slot machine-type” dials for some of the applications. While I haven’t seen these dials appear in other multitouch applications, one could imagine these finding their way into computer-based exhibits.
We explored the possibility of using dials, although ours were right-to-left oriented. This was a very early concept for a floor-to-ceiling multitouch enabled health exhibit.
In this rough mock up we imagined that users would be able move the dials right to left and see changes in life expectancy and other important health information.
Drawers. Pull-down menus don’t work well for touch, or multitouch applications. Although, a variation requiring two touches can be used: one touch opens the menu (or drawer) and the second touch makes a selection. This can be used with symmetric navigation or for universal, omni-directional navigation. Additionally, drawers can be used to provide additional information, not just navigational choices.
Flip (or Flick) elements. The HP TouchSmart and Apple iPhone have applications that allow visitors to “flip or flick” through photographs. We used a similar photo viewer for our panoramic viewer exhibit.
In this exhibit, visitors can pan and zoom an image of the Birmingham skyline and click on points of interest. Each point has a photograph a visitor can select from the panoramic image or flip (or flick) through using the movable photo viewer. I should mention this exhibit is developed for the HP TouchSmart. It is part of an installation for Vulcan Park and Museum in Birmingham, Alabama.
As you can see, there are some challenges and interesting possibilities when it comes to navigation and design for multitouch exhibits and applications. In my next post, I’m going to look more broadly at how multitouch and multiuser exhibits can shape the visitor experience.
With the development of our first interactive exhibits, and a few rounds of informal user testing, we’ve begun to explore approaches in multitouch and multiuser design. We’ve created both a multitouch mashup that uses Flickr and Yahoo! Maps, and a panoramic viewing application that allows visitors to access detailed photographs from points found on the larger image.
We developed these applications for our multitouch table (MT2) and for the HP TouchSmart platform. After developing touch screen exhibits for nearly a decade, the differences between standard touch and multitouch are very much in focus.
From the beginning, it has been clear that mouse or even standard touch-screen conventions wouldn’t be completely applicable. Multitouch and multiuser design requires new thinking, more experimentation, and careful user-study. I want to share some of what we’ve learned and the areas that we are still investigating. I’m also doing this in preparation for a workshop that we’ll be conducting at Museums and the Web (called “Make it Multitouch”) and a short presentation for the Canadian Museum Association’s annual meeting (called “Doers and Dreamers“) in Toronto at the end of March.
This discussion has been divided into three blog posts: The first explores user interaction and feedback, the second focuses on User Interface (UI) elements, objects and environments, while the third looks more broadly at how multitouch and multiuser exhibits can shape the visitor experience.
How do users interact with interface elements and content on a multitouch screen or surface? And how are these interactions different than those we observe in standard mouse-driven or touch-screen applications? Below is a list of some of the unique ways visitors can interact with a multitouch interface. As you’ll see, some are very natural and others are more obscure. It is a strange blend of intuitive gestures and secret handshakes.
Touch. The same as standard touch screen interactions, touch areas are made larger to accommodate a finger tip than those for mouse or trackball driven kiosks and exhibits.
Drag. With either one finger or multiple points, this type of interaction is similar to what we see with a mouse and pointer.
Pinch & Expand. This is an intuitive way to increase or decrease the size of objects in multitouch environments. In one case, we saw that just the act of placing a hand on the table surface slightly expanded an object (the hand opened a bit more as it impacted the surface). This allowed the visitor to immediately understand how to size the object. Pinch & Expand is common in ordinary hand gestures when talking about how big or small something is.
Rotate. As a visitor drags or pinches and expands an object it becomes apparent whether it can be rotated or not. Since multitouch tables have multiple points of approach, most applications provide visitors with the ability to rotate objects.
Double-Tap. We’ve used this type of interaction in a mapping mashup to “call over” a floating universal navigation element. We found this helpful for our large table, where the floating navigational item could be out of reach. However, our testing showed that this was not as an intuitive as some of the other types interaction. Although, once observed, most visitors found it simple and helpful.
Draw. Some multitouch applications allow visitors to draw shapes, such a NUI Gravitor application (seen above). It is also possible to draw “commands.” For example, you could draw an “x” on an object to close it. This would assume, however, that the object could not be dragged or resized, since those interactions would be interfere with the ability to draw.
Flip or Flick. It allows visitors to quickly browse through “stacks” of photographs or other fixed size objects. This works well with “dual touch” technologies like the iPhone and the HP TouchSmart.
Visitors can benefit from additional feedback as they interact with multitouch applications. Occasionally, there can be a lag in direct feedback for some of the interactions listed earlier. This can be especially true in multiuser environments where the application is trying to process dozens of simultaneous points.
Tracers/Trails/Auras. As each finger point is detected as a “blob” by the “touch core” software, a small graphic or animation follows the point across the surface or screen. You can see a tracer (above) following the visitor’s finger as he resizes the painting. (His finger is slightly off the table so you can clearly see the “tracer.”)
Highlights and Ghosting. As visitors touch an object, it can be made to highlight or animate in some way. Ghosting can be helpful for dragging as you can still see where the item originated. Highlights provide the user with instantaneous feedback and reinforcement of their current action.
Connections. Lines (or other indicators) that connect objects can be helpful in way-finding particularly in multiuser environments. For our multitouch mapping application, we created connection lines from photographs to their points on the map—knowing that one user may be manipulating a photograph while another is controlling the map. This allows a visitor to trace the connection line back to the geographical point where the photograph was taken.
In my next post, I’ll explore how these interactions are applied to User Interface (UI) elements, objects and environments. As you’ll see, things get really interesting when we look to adapt and invent new ways for visitors to interact.
New Mexico Stories is a map-based Flickr mashup that we developed for the Museum of New Mexico Foundation. The Foundation is a private, non-profit organization dedicated to the four museums and six historical state monuments that comprise the Museum of New Mexico.
This mashup site is open to visitor-contributions and the photographs are drawn from a Flickr Group which is also called, New Mexico Stories. The group is administered by the Foundation. I blogged about the planning process last October (see Planning for Social Sites).
New Mexico Stories pulls geocoded images from Flickr and places them on a map of New Mexico. Images are divided by county, so the site should be able to easily hold thousands of images and remain, “navigable.” In addition, a Gallery view creates a random collage of 50 images from the collection.
The site has just become available and the Foundation will be formally announcing its release later this spring. Please let us know what you think, and if you have a New Mexico Story to share, please do.
In designing Websites that have a social dimension we’ve learned the importance of developing a social networking plan. While the standard methods of Web design -such as wireframes and mockups- are still part of the process, we’ve been concurrently working on plans for social interaction.
Back in 2006, when we developed the American Image site, which uses Flickr, we learned the hard way that failing to properly plan for social interaction can have negative ramifications. The American Image: The Photographs of John Collier Jr. was one of the first examples of a museum using Flickr to house a primary collection. We created a mashup that pulled the images from Flickr into the American Image site.
At the time, we were new to Flickr and failed to fully appreciate all of its workings. The critical mistake we made was a simple one: we put most images into Flickr all in the same week. (See: John Collier Jr. Photostream.) While this served the mashup well -we had a well-populated online collection and a lot of images in the shooting script educational activity- we missed out making a bigger splash in Flickr itself.
Anyone who is familiar with Flickr understands that it takes time to connect with contacts. By contributing photographs over time you’re more likely to make more friends and you have a better chance of having some of your photographs make it into some of the more visited areas of the site. For example, Leonard Gagnon’s Daughter’s knitting was a top photograph on Flickr on October 26, 2006.
If we put out 15 photographs a week for 18 months, it is likely would have had even more success in expanding our audience in Flickr. While this is just one example of a lost opportunity, it does point out some of the issues involved in creating mashup sites. We’ve used this experience to help us think more broadly about planning for sites that rely on social interaction. Here are a few things to keep in mind:
Understand the Platform
Understanding the workings of any social site you might be connecting with is the key to creating a successful plan. The details are important. How do you make friends and contacts? How do groups work? How do you get “featured” on the site? Getting featured can mean huge traffic. A perfect example is the Ontario Science Centre’s Space Toilet Video, which was featured on YouTube.
How you interact on these sites can make a great deal of difference in how successful the project may become. Each type of social networking site is different; understanding a particular site’s culture and workings can make a difference to the effectiveness of your approach. For the American Image project, we connected with a number of influential Flickr groups, including: Black and White, The Maine Pool, Professional Photographers, New Mexico Photos by New Mexico Photographers, and many others. This outreach helped us find Flickr members that had shared interests.
For another Flickr-based project that we’re currently designing, we’ve already identified the groups in Flickr we intend to join and to which we intend to contribute. We’ve also looked at how we will “tag” our images to make sure that they are more easily found. In general, we are examining all aspects of our presence in Flickr. Everything from our profile, to how we’ll manage our contributions, to how we might interact with others has been outlined. We continue to honing networking plans as we work through the design mockups.
Make Time Estimates
It is easier to estimate how long it will take to build a site. than it is to estimate how long it might take to maintain it. The social aspects of these types of projects are unpredictable; we never know how many people may come by, or how they will interact. Still, we can try to estimate how long certain tasks may take. Beth Kanter, on her blog, wrote a post and created a chart on “How Much Time Does It Take To Do Social Media?” However, once you’ve decided on a platform you’ll still need to break down individual tasks to try get an accurate estimate of time.
One important consideration is: even repetitive tasks can take up a great deal of time if they are multiplied. For example, Museum of Contemporary Art, Los Angeles (MoCA) has a MySpace page with 11,500 friends and counting. Just the act of approving friends can take some time (think 11,500 clicks). Of course, this doesn’t even include answering email inquiries or other types of interaction with “friends.”
Having 11,500 friends in MySpace is a good problem, but it does bring up the unpredictable nature of interaction in these types of spaces. In our new Flickr project, we’ve estimated the time it will take to respond to requests and have tried to estimate how many we might expect. The difficulty here is the number of requests not the time it takes to respond. There are other wholly predictable parts of the plan, including how many photographs we intend to post, and how many groups we intend to join. Separating the predictable from the more dynamic aspects of social media is important in planning.
Planning for Problems?
It is easy to envision how visitors might abuse the system or cause problems with your presence in a networking site (after all, this may be the single most common excuse keeping museums out of social spaces). Inappropriate comments-either inaccurate ones or worse-happen, and we need to be ready for such occurrences. Still, planning for these potential negative interactions shouldn’t be allowed to dominate the process.
Also, it is important to remember that sites like YouTube, Flickr, Facebook, Twitter, and others have mechanisms that help moderate their respective environments. For example, we’ve yet to see an inappropriate comment associated with photographs for the American Image project, nearly two years later. For the most part, good things happen when people interact online and planning for positive interactions and success is important as well. (How does one respond if one gets 10,000 requests for friends? MoCA got volunteers involved.)
Authenticity and Critical Mass
Pre-planning for social interaction not only prepares you (and your client) for how much time and effort might be required to maintain a presence, it can also lead to a more effective approach. In creating our new plan for engagement on Flickr, we’ve found popular and relevant groups and have identified influential online community members, who we think will have a strong interest in connecting with our project. In addition, we’re looking outside of Flickr and developing a strategy to get museum supporters to join, hopefully strengthening ties with current members of the museum.
Long term, we’re looking at creating a blog, some associated widgets, and perhaps a Facebook group focusing on the photographs in the collection. How you extend a presence from one social site or format into another might be a good topic for another post.
Making a more conscious effort to manage your presence in social networking sites means you’ll be more thorough, more thoughtful and hopefully be able to maximize opportunities to connect with others. Still, planning can only go so far. In practice, unpredictable encounters will arise, as will challenges and new opportunities. The presence has to be authentic, it can’t all be worked out ahead of time; after all we are talking about social interaction here.
Our new Flickr-based mashup, will be an interesting experiment. Unlike the American Image, this project will rely primarily on user-contributions (to a Flickr group). Obviously, our connections with others in Flickr and their photographs and stories will go a long way toward determining the success of the project.
Taking advantage of the opportunities presented is a critical issue for museums, who generally have small audiences. There is a need to try to reach a critical mass of visitors, which can lead to more meaningful interaction online. We’ll post more about this project and role planning played later next month.
Two projects we helped design and develop have won awards at this year’s Museums and the Web Conference held in Montreal.
ExhibitFiles won the Best of the Web award in the museum professionals category. Congratulations to our partners the Association of Science-Technology Centers and Indepedent Exhibits, and to our advisors and the many members of the ExhibitFiles.
The American Image: The Photographs of John Collier Jr. won the Best of the Web award in the exhibition category which included over 40 nominees. Congratulations to everyone at the Maxwell Museum of Anthropology. The judges had great things to say about the project, you can view their comments on the conference forum.
We’ve just completed a series of changes to the ExhibitFiles website including: improved “member contacts,” better commenting, and enhanced member profiles. It’s now possible to include blog feeds and flickr thumbnails in your profile. You can see mine here, or click below.
Along with improvements to profiles and commenting, a new search feature was developed. While the ExhibitFiles is only a couple of months old, there are already over 40 case studies and reviews and more than 200 members. Finding the right exhibit or a colleague’s profile was becoming increasingly difficult. The new search feature allows you to conduct a full-text search or you can click on a topic, institution, or individual in a case study or review to bring back results. For example, clicking an exhibit focus such as “Science” brings back the 15 records that share that focus.
We’re still fine tuning the search feature, but we hope this and other new features will help the ExhibitFiles continue to grow and make it even easier to use.