Microsoft Surface 2 Platform
| Client: | Microsoft |
| Role: | Interaction Design, Visual Design, Animation, Sound Direction |
| Year: | 2010-2011 |
What is Surface?
Microsoft Surface is a tabletop multitouch device with unique capabilities and is a major breakthrough in Natural User Interface technology. The device has the capability to detect up to 50 finger inputs simultaneously, pushing it into uncharted territory when it comes to multi-user, social, public computing applications. What's more is that objects, such as a can of soda or a business card, can be placed on the device and detected using the hardware's unique breakthrough technology called PixelSense which utilizes infrared sensors the size of individual pixels allowing remarkable accuracy in mapping and detecting objects placed on it's surface.
My role
My role in the software UX team was multifaceted. I had the opportunity to utilize many of my skills such as visual design, interaction design, motion and animation design, prototyping, and sound design and my work can be seen directly across most all aspects of the platform.
Interaction Design
Above is a small sample of the vast amount of time spent with a pencil and paper imagining what interactions might be possible with this technology. Some ideas were utilized, and some weren't, but because the design philosophy was centered on interative, user-centered principles, the studies led to constructive discoveries and, at times, eureka moments.
User Flow & Transitions
Mapping the user flow through the various application states was a vitally important aspect of the software design. I worked with a team of amazing UX professionals dreaming, designing, refining and testing how users move through the system from the time they walk up the device to the moment they accomplish a task. Above are a few examples of wireframe storyboards that helped us visualize the transitions from state to state.
Below are some videos that show some of the transitions and animations in the (nearly) final product.
Above is the unveiling of the product in the Microsoft Keynote speech at CES 2011. In it you can see some of my work in the transitions and animations.
Another peek at the product from Engadget after it was announced.
Brand Animations
One of the most fun and creative pieces I worked on while at Surface was the "Brand" animations. These animations (seen below) are seen when a user moves back and forth between the "Attract" state, and the Application Launcher.
Replace w/ image here. No Flash.
Click anywhere above to view the animation.
Above is a simulated example of the logo-lockup animation. This visualization is seen when a user enters the system by tapping the logomark in the center javascript:noop()of the screen in the Attract mode (idle-state water interaction). I worked closely with the Surface Art Director and brand experts to ensure that the animation makes an impact but is not so overwhelming as to detract from the Brand.
Using Flash and ActionScript, I created a basic algorithmic particle system that (somewhat) mimicked the Attract particle system. I then animated the particles in a controlled but random fashion. Next, I developed a simple AIR application that exported individual PNG screenshots for each frame and then handed off the frames to the UI developer for integration into the software.
Replace w/ image here. No Flash.
Click anywhere above to view the animation.
Using the same particle system mentioned above, I created this loading animation that is seen by users when they exit the Application Launcher state and go back to Attract Mode.
Keyboard design
The keyboard for Surface is one of only a few examples of full-size QWERTY touch-keyboards on the market. The keyboard (as well as the rest of the platform) is localized in over a dozen languages, so one of the primary challenges was to lay out custom instances of each language's keys. The visual design is simplified and elegant, following the Metro visual guidelines for Surface. I also worked on the keyboard transitions and key press animations.
During the design of the keyboard, I developed a Flash application prototype that allowed me to quickly make changes to many of the visual and interaction parameters of the keyboard, so the team could see and test things such as the key sizes, padding and color palettes among other things
Sound Direction
Working with the Surface Art Director, Microsoft Sound Design Engineers, and third-party sound design firms, I helped define and direct the vision of the audible aspects of the Surface experience. This included the direction and critique of interaction feedback sounds, ambient sound and brand appropriate tones and effects. Much time was spent discussing how sound could reinforce the experience while not overwhelming users or surrounding passersby.
Partner Applications Direction
A suite of several apps were demoed with the CES Surface v2 announcement. I contributed to their design by providing direction and critique as they were being developed.
Blutooth Application
Not really a part of the Platform per se, but I also designed the Surface app below.
3 Comments
Reader Comments (3)
Wonderful post, very informative. You must continue your writing and I will be here reading your blog quite a lot in the future. I can’t wait to read your next wonderful post -luxury Bell & Ross BR 02-94 watches .
Thanks! I've been pretty busy lately at work, so I haven't been posting much. I'll definitely share some stuff soon though.
That's what I am looking for.damages dvd season 4 This is awesome and I also want to share something cool with you.Grey's Anatomy dvd That is cheap dvds and I hope you would like it.Covert Affairs dvd