Designing Interfaces with Movement: Learning from filmmakers

(repost from Medium)

For years its felt like web designers have been focused on simply moving people from one screen to another, and guiding them through a process. Whether that process was purchasing clothes or making a fantasy football trade, we focused on specific states of the process with static screens. Until recently a big part of this was due to technical constraints (as the web has historically been very bad at handling complexity and motion).

Sure advancements are starting to show up, but the web still feels like a series of ‘jump cuts’ from screen to screen. We've forgotten about or simply overlooked the opportunity between those screens or “the blood in the gutter” as Scott McCloud calls. These transitions are just as important to consider as the static screens themselves.

Think back to the last movie or TV show you watched. Was it a sequence of statically framed images that simply cut from one to the next? I guarantee it wasn't. Could a movie or TV show be shown in such a way? Yes it could. Would you enjoy it as much or be as captivated with the story? No, you probably wouldn't be (I admit there’s grey area here but for this post lets just role with it).

Back in the early 1900s, when “moving images” were still young, this is exactly how films were made. They didn't move the camera around and instead just set it on a tripod letting events occur in front of the static lens. When editing films together they only used ‘jump cuts’ or ‘fade to black’ to move from scene to scene. This certainly worked but it didn't drive the kind of connection we expect from movies today.

 

Camera movements

So what changed? Filmmakers started moving the camera while filming. Crazy idea, right? Well turns out this movement…

“movement alters an audience’s perspective — making viewers feel as if they are taking a journey through the scene. [Where as] a still camera allows the audience to focus on the dramatic rather than the cinematic aspect of a scene” (Vineyard, 1999).

By using these in-shot camera movements, such as cranes, pans, zooms and dollies, storytellers had more options for crafting greater emotional connections with their audience. Different shot-to-shot transitions like, cross-dissolves and wipes, also helped the viewer build mental relationships between different pieces of a story.

So what does this film stuff have to do with interaction design? Well I think it’s time we stop designing from static screen to static screen and really began considering how movement and transitions can bring greater understanding, connection and emotional resonance between our stories (aka.content & interfaces) and our viewers (aka.users). A good place to start on this path is by learning techniques already in use by filmmakers.

As interaction designers, the additional factor we have to consider is that our viewers don’t just simply consume a story. Instead they actively engage with the story and directly affect what they can see and do. Designing with movement and transitions requires us to consider, not only, what happens between screen elements but also what happens between those elements as a result of a user’s actions.

Sample storyboards of different camera movement techniques

Sample storyboards of different camera movement techniques

 

A few examples: the good

I’m seeing more and more transition explorations within smartphone apps and operating systems, and I think iOS7 has some good examples for us to look at. iOS previously relied on skeuomorphism (making screen elements look like physical objects) to provide a bridge of familiarity with the physical world. iOS7 reduced this visual familiarity, going ‘flat’, and is now using movement and transitions to provide a different type of physical world familiarity.

iOS 7 transition from app icon to the app

iOS 7 transition from app icon to the app

Lets examine what iOS7 is doing with launching apps & using folders. Launching an application no longer spawns a mystery window as it did in all previous version of iOS. Instead we now ‘zoom into’ the application.

This movement does a few things for me. First, it helps me identify and maintain an understanding that this app lives in a world amongst other apps. The zoom transition communicates that I’m focusing in on that single app. Second, by ‘zooming into’ the app I get instant confirmation of my action. I no longer have to wait for a window to spawn behind all my app icons and then show me the app’s launch screen.

This new transition creates a stronger connection between user action and screen reaction. I also think this instant confirmation makes the whole process feel faster (even if it isn't). The perception of speed is just as good as it the real thing.

This ‘zoom’ technique is done in movies all the time. Lets say you’re watching a coffee shop conversation between two people. Then the camera starts to zoom-in, focusing your attention on an angry woman in the background intently watching the two people. As a viewer you understand exactly where the angry woman is in relation to the two people talking and even before the camera had full focus on her, you could already tell she was angry. This movement gives you an understanding and connection to the relationship between these three characters. If the movie simply ‘jump cut’ from a shot of the two people talking to a shot of an upset women, you as a viewer might be able to follow the relationship, but the strength, clarity, and emotional resonance of your connection to the character’s relationships wouldn’t be the same.

This ‘zoom’ transition also added a perception of 3D depth into what is inherently a 2D surface. This 3D perspective and supporting transitions also scale into the iOS7 folders. With iOS6 (and prior) I was shown a representation of what was in my folder. With iOS7 I get to see the actual content within the folder, but its as if I’m standing across the room from it. When I tap to view the contents, its as if I’m walking up to the investigate it. This motion maintains my sense of what is around me but allows me to focus in on what is important. This transition supports a more visceral sense of structure and depth to my content organization.

 

A few examples: the bad

Now, not all animations within iOS7 are as effective. In fact some of them don’t do much to advance our connection with the experience, but instead seem to be there for flashy effect.

Apps fall onto the Home screen after unlocking the iPhone on iOS 7

Apps fall onto the Home screen after unlocking the iPhone on iOS 7

Launching the home screen

For example, the movement of the app icons onto the home screen after you unlock the phone isn't effective. As these icons ‘fall onto’ the home screen, it prevents you from launching any of the apps because you have to wait for the transition to finish. Personally, when I unlock my phone, I want to get to my content and I would gladly take back those few seconds.

 
example of the “Parallax” effect

example of the “Parallax” effect

Parallax effect

The parallax effect on the home screen is another one of iOS7’s unnecessary movements.

 

Since I started working on this blog post, apple has decided to add a setting to remove almost all of their movement and transition details. I believe this was a reaction to wide statements of people experiencing motion sickness while using their iPhones and iPads. As you may have guessed by now, I am a fan of the ‘zooming’ app launching and folder transitions. I think the transitions make using my phone more of a delight, and also makes my phone feel faster than it actually is.

The new transitions of just ‘fading’ into the folder or app launch screen simply aren't as effective at creating the connection between these two screen states. Its like a ‘jumping cutting’ a chase scene rather than ‘panning’ with the speeding car as its rounds a tight corner. Sure it works, but it doesn't communicate the best story.

I fully understand that something needed to be done to help people who were experiencing motion sickness, but I wonder it there is a different transition that could provide these users that same connection and emotional resonance without causing physical discomfort.

 

Movement and web technology

Hopefully, you’re starting to see that movement and transitions can provide numerous opportunities to deepen the connection between digital product and its user. However, as is famously said, with great power comes great responsibility. Sometimes the ‘flash and flair’ of animations can be so enticing that you can forget to question if this is really providing a better understanding, connection or emotional resonance for the user. Simply look at slide transitions in presentation software or the flash-based websites from the 2000s as examples. It can be challenging to effectively add this new dimension to screen work, but when done right, we can really elevate a user’s experience with a digital product.

I think we are finally at a point where technology is no longer a hindrance to using movement and transition for designing better and more engaging digital experiences. Our mobile devices are certainly ready to support it and desktop browsers are quickly coming along with advancements in CSS3, HTML, Canvas, and Javascript. As designers, this means we have to consider new dimensions, and it may be challenging to visualize across both time and 3D space.

Tools for better concepting and prototyping transitions will be necessary to design with these new dimensions. There’s always robust tools like AfterEffects, but they can take time and effort to learn. At Moment, we've been exploring how programs like Keynote and Adobe Edge can be re-purposed to quickly explore movement and transition prototypes. Sometimes even paper, pen, and scissors are all you need to get your mind tinkering about transitions.