List Grid

Blogs Media Lab

Multitouch Kiosks Highlight Collection

It’s difficult to blog about a collections-focused touch screen in a museum without drawing comparisons to the amazing Collections Wall at the Cleveland Museum of Art — and feeling entirely inadequate. We’re not (yet!) anywhere near that scale, but luckily for our egos we weren’t aiming there with this project. We wanted a simple, intuitive interface and […]

It’s difficult to blog about a collections-focused touch screen in a museum without drawing comparisons to the amazing Collections Wall at the Cleveland Museum of Art — and feeling entirely inadequate. We’re not (yet!) anywhere near that scale, but luckily for our egos we weren’t aiming there with this project. We wanted a simple, intuitive interface and something we could evolve in-house after watching and analyzing user behavior.

wall_2

AJ explores some of the garden artwork on the new screens.

We stayed true to the original idea of a “big swipe” interaction, creating what’s essentially an enormous photo-viewing application with zoomable images and some video mixed in. As another way to celebrate the 25th anniversary of the Minneapolis Sculpture Garden, we chose to launch the screens with highlights from the Garden.

Under the hood

The screen are running Google Chrome in Kiosk Mode and displaying a simple web page supported by a lot of custom Javascript. To keep things fast each screen is running a Squid web proxy to keep a local copy of the content, and the videos are also stored locally to avoid buffering issues. I thought Squid would manage to cache the videos, but due to the way they’re served using HTTP Range Requests I had to install a very vanilla Apache server locally to get them working. A bit of ugly overhead that keeps it from being a truly standalone solution, but something we were unable to solve on a deadline.

table_change

Design and New Media hanging paper representations of the screens to get a sense of scale and placement.

We’re also logging interactions using Google Analytics’ Track Event API (easy, since it’s just a web page!). Right now we’re tracking when the screen is “woken up” by a visitor’s interaction, when they open the textual “Info” button, and when they play a video. With video we also separately track if they watch all the way to the end, and if they don’t we log the timestamp they stopped watching.

The project is on our public Github account, so please have a look if you’re interested.

Content admin

The content is fed to the web page via a simple JSON file. AJ built an online editor that allows us to rearrange slides, import new collection objects and video, and edit or create the “Info text.” Very often our public-facing projects run into tight deadlines to launch and the admin / maintenance side of things never gets finished, so I’m quite excited to have this working.

Screen Shot 2013-06-06 at 1.31.58 PM

Lessons Learned

Gestures are different at this scale.

Sure, we know HTML5 and Javascript and have built some nice gestural interfaces before, but we weren’t prepared for the differences of a large-scale screen. Instead of tidy touch events using single fingers, we were seeing people swipe with their whole hand, or two fingers, or four. People tried to zoom using whole hands dragging in and out. Kids would “tickle” the screen and overwhelm our scripts, leaving the device crippled. While we gained many days by developing and designing in a familiar toolset, we lost almost as many days trying to rapidly mature our touch library. Midway through the project Ideum released Gestureworks Web Socket bindings for Javascript, which is absolutely the approach I’d take next time if we stick with HTML5. We learned the hard way that a true multi-touch vocabulary is not something you can just “whip up” from scratch…

Attract screen felt like a “home page”

Eric built a fantastic opening animation to attract visitors’ attention, which they would then dismiss to start interacting with the slides: “Tap to begin.” A number of our early testers mistook the animated gestural instructions for a menu, and were quite distressed when they couldn’t find a way back to the “menu.” We toyed with changing the intro and couldn’t solve it until finally we realized we just needed to change one word: “Swipe to begin.” By making the intro video actually be the first slide, users were able to discover the operation of using the screens (swipe) at the same time as they “dismissed” the intro. And the intro was always available by just swiping back. It’s a no-brainer now that we see it, but it’s one I’m glad we tested and re-tested.

Video is being watched until the end!

… about 10% of the time. That doesn’t sound like much, but it’s honestly higher than I expected (caveat: only a few days of stats). The space isn’t an especially inviting one for consuming media, but the content is compelling enough people are happy to stay and watch. We’re still collecting data to see if there are any trends around the timestamp when people stop watching — I hope this will inform the type of video content that is most appropriate for the medium and environment.

Position matters

So far the right-hand screen is used almost twice as often as the left-hand, which is a bit deeper in the space. So it may just be ease of access and people engaging with whatever they reach first, but we’re watching this closely for clues for future content: maybe one screen could be a long-running silent video? Maybe one screen never returns to the attract mode? Do we run something entirely different on each screen so there’s a reason to try both?

 Summary

A fun and challenging project that launched on-time and does pretty much what we set out to do. Can’t ask for more!

If you’re in the Twin Cities, please stop by and try out the new screens, and tweet us @walkerartcenter with feedback.