Warning: Parameter 1 to wp_default_styles() expected to be a reference, value given in /homepages/13/d514182410/htdocs/blog/wp-includes/plugin.php on line 601

Warning: Parameter 1 to wp_default_scripts() expected to be a reference, value given in /homepages/13/d514182410/htdocs/blog/wp-includes/plugin.php on line 601
ipad

Archives 2011 // HCI Paper: Intuitive interaction with 2.5D environments and 3D objects in a web-application for mobile devices

During my master’s course on Human Computer Interaction at the Mittelhessen University of Applied Sciences, we had to come up with a new human computer interaction concept and prototype using new technologies and input devices such as multitouch-tables, mobile devices, kinect sensors, etc.

It was right around the time the HTML5 hype started. Apple had just announced the new iPad 2 with a gyroscope sensor improving the motion sensing accuracy and allowing the iPad to measure in which direction you are moving/rotating it in space. We decided to have a look at how we can make use of this new interaction input to enhance the mobile user experience in an online shop.

 

download_paper_screen

 

Using the new Javascript DeviceOrientation API and WebGL we designed a prototype for a digital webshop making use of cubic panorama images to immerse the user in a 2.5D environment where he can use his tablet as a digital window to explore the shop.

 

The cubic format uses 6 cube faces to fill the whole sphere around us. (http://wiki.panotools.org)

 

By taping on a specific point of interest the user would open the details view of a product. For the product detail view we decided to use the webGL javascript API to render a 3D representation of the product, enabling the user to directly interact with the item, rotating it from various angles.

 

http://www.elated.com/articles/rotatable-3d-product-boxshot-threejs
http://www.elated.com/articles/rotatable-3d-product-boxshot-threejs

 

For a more detailed description of the process and the results of the research, you can have a look at the final paper below (german).

download_paper_screen

 

Leave a Reply