Deconstructing: SilverPAC's Multi-Touch Website

[Update 11/9/2009 to reflect updates to the SilverPac site.]

SilverPAC just launched a multi-touch website using Silverlight 3.

http://www.silverpac.us.com/multitouch/

There also a bit of write-up about the development of the site by Ciplex in Los Angelas, CA in the press release. They claim it is "The World's First Multi-Touch Interactive Website."

Below is a video for those who don't have multi-touch hardware:



Although when I first read about this, I had a healthy dose of skepticism, after watching the video and in particular trying out the website myself (on my new HP tx2z) I think this was pretty well implemented. I was particularly impressed because I know that the multi-touch APIs available in Silverlight 3 are pretty limited (particularly compared to WPF 4 Touch.) Here are a few notes on their implementation:

• Introduction animation - When first loading the site, it shows an 8 or 10 second animation that demonstrates the gestures you can use to navigate the website. Interestingly, this intro animation is in Flash whereas the rest of the site is in Silverlight. This introduction is critical to orient the user and show how the multi-touch gestures will work. They are illustrated by using auras identical to those used in the application.
• Limited gesture vocabulary - The site only uses four gestures: Tap (for selecting a "page"), Pan Up/Down (for text scrolling), Two-finger swipe (for changing "pages"), and Pinch in (for zooming out). I'm glad they only have a few gestures, and they all make sense. I have discussed limiting the multi-touch vocabulary, and Ciplex seems to have done that. The only thing I would have changed is adding the Pinch out gesture to allow zooming in, duplicating the behavior of tapping on a page. This provides symmetry and would be more intuitive. Update: Pinch out was added.
• Auras - They implemented their own auras within Silverlight. This is important for users to see whether their touches are being recognized by the application. Not a full implementation of Microsoft Surface SP1's auras described in the Ripples research paper, but good anyway.
• Page layout - The site consists of nine pages with simple free form navigation from one to another. Users can zoom to the large view, either through gestures or the mini-map icon in the bottom left, then select a new page, or use two-finger swipe to change pages. With a more complicated site and more pages, a more complicated navigation scheme, or multi-layer zoom, would be needed.
• Pages - The pages on this website are more like cards of data than hyperlinked pages. There are no links internally, only to external sites.
• Mini-map - When zoomed in, there is an subtle icon in the bottom left corner. It serves two purposes - remind the user where they are in the page layout, and act as a link back to the zoomed out view. This is important for users who navigate the page with a mouse.

There are a few things that could be improved. They are mostly implementation issues rather than design.

• Add pinch out, as discussed above.
• The auras often get stuck, as if one touch is still down. This prevents some of the gestures from working unless you reload the page. Seems like if a touch or gesture is done too quickly this occurs.
• The page content and headers could be sized so the user could read them better from the large view. The interface zooms anyway, so it might as well make use of the space.
• Some pages, such as the top left, have too much text and no indication of the subject of that text. Scroll down far enough and you'll find out the names of the CEO and others, but how would the the user know to look there? Also, the bottom center page is blank. Either put some content there or don't let the user navigate there. Update: The pages were updated to rearrange the text, and allow switching columns within a page.
• Aura performance is laggy and has a slow frame rate. The animation of the page transitions and product has good performance, though. Update: Aura performance was improved and I haven't seen any more stuck auras.
• Although the user can navigate the pages using just the mouse, they cannot do the equivalent of the two-finger swipe to change between zoomed-in pages. This may illustrate an advantage of touch, but for users with no touch hardware, it seems like an artificial constraint and switching back to the zoomed out view to switch every page is slow.

Overall, even though there could be a few improvements made , I think the SilverPAC Multi-Touch website is a fine example of a multi-touch web implementation. (Update: Many of my suggested improvements were implemented since my original review.) The bar of excellence will be higher in the future, of course, but this is a good start at this point in the Natural User Interface Revolution. [Thanks to Gene on NUI Group Community Forums for posting a link to this.]
[Thanks x2 to Gene for letting me know about the site updates.]