Final Prototype Video

Ventana is designed to allow the presentation of any kind of information. It could be used to present fashion, jewelery or even a restaurants menu. Ventana can be installed in any shop window.

For our purposes Ventana is showing two products thematizing the US city New York. By the mere presence in front of the window a user can navigate and interactively experience the digital space.

Through the use of inexpensive technology it is affordable for a wide varaity of shops. It can be used for very small interaction with the shop windows content up to very complex games and e-commerce solutions.

Reducing the Gesture Set for Ventana

Ventana was designed to be used without any learning time. Therefore I had to use a gesture set which had to be reduced to only a few possibles. It should be easy for nearly everybody to use.

Currently there are two possible ways to control the application.One is the bare presence and one is hand pointing gesture. It was an important aspect for me to make sure that the users do not feel silly when using the shop window in public space. Having a reduced gesture set makes it easy for people to learn how to control the system.

Theme Design

When designing the application I tried to bring in an abstract layer. People should still easily discover that the theme is “New York” but it should not look like a photo. Therefore I designed it in a cartoon like way. I tried to use typical aspects from New York when working with the graphics. Using photos as a draft and reassemble them to a new art work helped to keep the New York touch but added a surreal visual value. Changes between the scenes are displayed through an animation. The animation has an important part because this is the point when most users get attracted by the shop window.

The interactive shop window prototype uses two scenes: Central Park and City.

Scene: City
The City scene displays the fast living and uprising business life. Everything is loud and fast.
Buildings in the city are tall and grey. Only a few famous buildings are added to build the connection to the trend city New York. Everybody knows the city and its very famous attraction like the state of liberty or the empire state building. Therefore I added this two famous constructions to the design to make it easy readable for the visitor to see what the theme is about. But New York is not only famous for this two constructions, New York is a major player in the movie industry like in the movie King Kong. Therefore I used King Kong as a fun attractor for the shop window visitor.
The bag displayed in the shop window is a bag specially designed for business lady‘s. To display more information about the bag I used the famous “ONE WAY” street signs and replaced its content with the new bag information. Using such a connection helps the user understand that the theme is “New York” but also brings in the connection between the bag and the theme.
As an addition to this visual aspects and features I added sound. Having sound as a background noise as well as having sound for playful features supports the theme even more.

Scene: Central Park
The Central Park scene is, in contrast to the City scene, more quite and nature related. The Central Park in New York is another very important part for this city. Many people use it to relax from their stressful and hectic life. They go out for a run or play sports or have a picnic with friends. In my design I tried to bring in this relaxing and playful aspect. I used butterflies to follow the active hand, a squirrel running around and added girls having a picnic. All of it supported by background sounds from a park. A man which walks into the scene displays that there is a wave gesture required to gain more possibilities to control the interactive shop window. With such a direct message it’s easy for users to understand how to get an additional interaction layer.

Sounds

Sound in the prototype can help increase the fun factor while using the application. Certain hot spots in the different scenes play sound when the user activates them. Every scene has a theme background noise to increase the connection between the visual theme and the real world.

The City:

Audio MP3

Central Park

Audio MP3

King Kong

Audio MP3

All sound are from www.freesounds.org

Arduino and Electronics

For my prototype I displayed two products. Both of them are related to one scene which will be projected to the screen. To make the connection between the product more visual I used light. The light will higlight the product of the active screen.

To achieve this functionality I used Arduino and two relays. On the code side I used the serial listener which listens to the Tinker socketserver that controls switching the lights on and off.

Actionscript 3

The design of my shop window theme should be easy to change and quick in development time. Hence, I used Adobe Flash to achive this goal. The application is built in Actionscript 3 and is set up as an MVC based application. A socket server receives the values from the processing and passes them on to Flash where the values are handled by an appcontroller. The combination of pure Actionscript 3 coded in the Adobe Flash Builder Enviroment and the Flash IDE gave me the possibility to design quick prototypes and test them thouroughly before I had the final graphics.

Processing and SimpleOpenNI

For my final prototype I used SimpleOpenNI and Processing for the user- and hand tracking. using the Microsoft Kinect camera. Because I used Flash to display all Information on the screen I used the Server class from processing. The only values I send to the flash are the hand position and the center of mass of the closest user. These two values can easily be accessed through SimpleOpenNI.

3D Renderings for the exhibition setup

The idea would be to line the interior with dark fabric.
Thanks to Florian Wille for designing this 3D Renderings.

Read more »

Prototype

The first working prototype focused on the technical solution. How can I track the user passing by, how can I track when a user gets control and how can this change the setup.
I ended up having two levels of interaction.
The first level is the passing by
When someone passes by at the shopping window a city pops up in the display. Having such a big change in the shopping window attracts automatically the users attention. In this mode I also added a parallax effect. Having such an effect in place made the test users already moving back and forth just to see if something happens.

 


Read more »

Exhibition Setup

Here are my exhibition setup plans. The idea is to build a box which should look like a shop window. The reason I build such a construction is that I do not have the possibility to display it during the exhibition in a real shop window.

 

Read more »

Older Posts »