Interactive storytelling using cool out-of-the-box Intuiface components

I’d like to share a simple Intuiface XP that we built as an exercise of interactive storytelling using a variety of out-of-the-box components. Some of these design ideas may help other creators.

The XP is intended to be a visual aid for a presenter talking about the evolution of productivity, and how a new multi-touch screen called Surface Hub by Microsoft can help along the way. The XP is organized in four scenes.

THE SITUATION
In the first scene, we used a parallax effect created by overlapping two long PNGs. The top layer is an illustrated timeline of events. As you scroll the parallax, the irregularly shaped ‘holes’ on the top layer let you see through synchronized images on the bottom PNG. The goal is to reinforce the story with real photos, without much distraction.

THE CHALLENGE
This is a simple reveal using the scratch card asset. There are fancy ways to use this component, for example revealing animations in the background, rather than just static images.

THE OPPORTUNITY
This ‘magic glass’ effect is done using a customized version of the design accelerator called X-Ray under Visual Effects. There are two overlapping images, and you get to move a pinboard that gives you a peek on the image in the background. We blurred the image in the foreground and added some visual cues to hint the user where to move the magic glass.

THE FUTURE
This is the last scene and it’s meant to be a call to action. Using a before / after effect, we transition from a boring black & white image to a lively colorful photo featuring the Surface Hub device. Contact information pop up as you progressively slide the curtain. This asset is available under Design Accelerators > Visual Effects > Image Curtain.

Since we developed this XP several years ago, some of the code may be outdated.

Surface Hub XP (32MB)

In this video we also cover additional UI tips for Intuiface storytelling:

4 Likes

As always, very cool @tosolini! You’re very creative with the information-effects!

1 Like

@AlexB Thanks!