Slideshow SS12

Project Description

This project is a technical demo that Float4 could use to present to potential clients during pitches, or in booths at conventions, to showcase that it was possible to leverage existing content from other platforms, such as Vimeo, Flickr, and Twitter.

User Experience

Problem to Solve

Float4 needed an application that would display their portfolio in the context of their software, RealMotion™. It needed to connect to the different APIs of the services they were using: Vimeo, Flickr, and Twitter.

The application also needed to showcase the multi-touch possibilities of their hardware setup. The way Float4 managed multi-touch applications was not by using tactile screens, but rather by detecting infrared beam break on multiple axes. This way, they could project their installations on any surface, and keep the interaction possible. This setup could cause an issue to users who would not know that breaking the IR beam caused an immediate trigger, as opposed to touching the surface onto which the interface would be presented.

Solution

To fix the issue of triggering buttons too quickly, we implemented a check to determine how long the user would remain over the interface element. To indicate that the interface was about to trigger, we added an animated circle that filled up; once the circle would be filled, the button would be triggered.

Interestingly, this feature has been used more recently in games, likely for the same reason; to avoid an action too quickly done. Horizon Zero Dawn on the PS4 added this UI element for many actions that modify the player's equipment. Tetris 99 on the Switch also implemented this feature so that players know when they are about to leave the game.

For the other parts of the interface, we wanted to avoid having elements stuck to a place, so all elements could be moved to any place on the screen. Pinching and expanding motion had become standard on smartphones, so we implemented this for expanding images, but also for videos: expanding a video thumbnail would set it fullscreen and start it, pinching it would stop it and reduce it to its thumbnail state.

Credits

• UX Design, Graphic Design, Development: Mat Janson Blanchet
• RealMotion™ Graph Development: Bruno Gohier

All copyrights and products belong to their respective owners.