Microsoft Surface 2: Object Box Demo
| Client: | Microsoft |
| Role: | Interaction Design, Visual Design, Animation |
| Year: | 2010-2011 |
What is Surface?
Microsoft Surface is a tabletop multitouch device. More here.
What is the Object Box Demo?
Since the Surface 2 hardware has object recognition capabilities, the UX team was asked to imagine some scenarios in which the objects might be used in real world applications. We focused on the use of transparent acrylic objects since their ability to allow light to pass through from the table's pixels had interesting design implications. For example, in using a clear acrylic card for placement on the table, an application designer can project imagery through the card that has been customized to that individual or brand.
My role
My role was to assist in visualizing possible scenarios in which these objects might be used. Additionally, I was responsible for the interaction and visual design of much of the demo. We had only a few short, intense weeks to visualize, design and create pseudo-applications to show partners, executives and eventually the public the power of such a simple idea.
Interaction Design
Getting ideas down quickly is an absolute requirement for a project such as this. Above is a small sample of many pages of sketches done to help myself and others visualize possible interactions that these unique objects might afford. Some interesting ideas came out of this process, some of which found their way into the final demo and others that have been filed away for future exploration.
Wireframes
We didn't have an abundance of time for iterating and experimentation in design, but some quick and dirty wireframes helped me to think through the user interactions a bit before committing to them in the final specification.
Visual Design
Below are some screenshots taken of the demo in use.
Below, you can see some of the original visual design screenshots. Like everything Surface 2 related, the design is simple and straightforward, following the Microsoft 'Metro' visual guidelines which emphasizes the restraint of embellishment.
Above is the 'Resort' scenario. This demo used transparent business cards that allowed two resort visitors to exchange information and schedule dinner when the cards were placed down on the table.
Here you can see the 'Home Center' scenario in which a clear cylinder object is used as a contextual dial for helping customers choose trees and plants in the design of their hypothetical home. Like all the objects used in these demos, this simple form-factor is one that is very instinctual and natural feeling for users.
Since Surface devices often find their way into public spaces, we decided to explore solutions that would help keep personal information from others if necessary. The 'shield' object is wedge-shaped and opaque on one side of it's surface (the one adjacent to the table). The side that lays flat on the table is clear and reveals private information when the object is placed over hidden or redacted areas of the application. We chose banking as a scenario to illustrate the concept, but other industry verticals such as gaming might use similar solutions.
2 Comments
Reader Comments (2)
Thank you for sharing your articles, appreciate your polish
maybe you will Replica Rolex Watches
love it ,thans for your post..... Replica Breitling Watches