Over the weekend I went to see World’s Apart, the feature film put together by Cirque du Soleil. Needless to say it was an amazing film. Visually spectacular, full of whimsy and bursting at the seams with astoundingly talented (and fearless) performers. And yet in the midst of enjoying the spectacle – it made me think of the web.
One thing that struck me was the way that Cirque du Soleil handles transitions in its shows. The transition to the next section of the performance is never jarring or noticeable – it flows on without you really noticing. They seem to get around this in two ways.
The first is they manage to make the transitions entirely seamless. Whilst your attention is directed to the current performance, the next scene is being prepared and set up out of sight. Once the current scene is ended, it pulls away to reveal the next set, complete with performers already in action. All the hard work was done behind the scenes so that the viewer didn’t have to wait.
The other way they handled the transitions was to incorporate them into the performance. There were a number of instances where there was rigging or other safety equipment that needed to be clipped into place in order for the show to continue. Rather than have this be a jarring return to reality - Cirque du Soleil makes it all part of the act. Synchronised swimmers took the cables to comical butlers who moved in unison to plug them in – the whole thing was beautiful and whimsical. You never really thought about the fact it was delaying you from seeing the acrobats themselves.
I think we can learn a lot from Cirque du Soleil in terms of the way we deal with transitions in our websites and web apps.
By transitions I am talking about those moments between a user’s action, and the desired result. It might be a new page loading, or ajax content being brought in, or anything where they expect a result from their action.
Let’s be honest – people hate waiting. They want results as soon as they take action – otherwise the become discouraged, bored or otherwise disinterested. It’s happened to me, it’s happened to you. You’re browsing a site, find something that interests you, click away. And wait. And wait. It doesn’t take long at all for you to give up.
So let’s take a look at what we can learn from Cirque du Soleil about managing transitions for our users.
What can you do to prepare content and information for the user behind the scenes while they are looking at the current page? Maybe something like Filament Groups Ajax Include can load the vital content first, then load additional, supplimentary content in the background? Perhaps you load the first image of your slideshow, and then load the others in the background before the slideshow starts?
These things don’t load the site faster, but they do give the illusion of speed. The user get’s the important information first, and then the rest is filled out behind the scenes.
The way in which Cirque du Soleil made the functional transitions part of the show really reminded me of the way we can use animation on the web and in web apps. Subtle transition animations like swipes, even loading screens make the loading of content in the background part of the process. Rather than a straight change after waiting a bit – the animation makes the time taken to load a part of the experience.
These are only two really brief thoughts – and I’d love to elaborate on them more in the future. But it’s always interesting to look at other artforms (in this case performance) and see how it can relate to the work we do day to day.
I’d love to know your thoughts on this?
0420 230 997
69 810 297 383
All content copyright 2013 Jordesign
No comments yet.
Leave a reply