11 Mar Putting Motion to Work – Part One

Most clients we’ve interacted with are always keen on having some sort of motion element or animated transition on their project, website or application – but when asked why, they rarely have an answer past “it looks cool”. It does look cool, but why should you invest in it? In modern web and app based media, words like “slick”, “flow” and “intuitive” are King, Queen and Court. It means your experience is easy to use, looks great, and generally impresses everyone who comes in contact with it. Companies pride themselves on their “slick” interface, and many agencies hang their hats on their ability to create them.

 

So why isn’t everyone doing it?

 

The Basics of Motion Elements

The theory behind animation is that through use and repetition, you can help define how a user experiences your website or app, and allow them to create cognitive connections to better understand and explore your content and/or products. Which items change in shape, colour, and position – and why do they do it?

 

motion-one

 

Does it all make sense and can the user predict and flow with it? Larger animations and transitions (like a page change or something moving on the screen) and smaller interactions, like how a button reacts to a click – these all add up to form how a user subconsciously connects with your animations, transitions and interactions.

Transitions are the space between two different states. For example if you click a button to head to a new area on a website, the animation that happens between the new pages (like a fade), is the transition. These help hide load times, and draw connections between pages. Animations will be items that readily create motion and draw attention on a page – like a moving piece, or something that slides into screen.

Interactions are the smallest and least noticeable of the bunch. This is what happens when you click a button, or fill out a form. These tend to go unnoticed, but cause the largest cognitive connections because we don’t register them openly – but we will subconsciously miss them if they were taken away, or never there to begin with.

 

motion-two

 

An example of this would be when you click the “like” heart on the Instagram app. The small heart doesn’t just fill in with colour – it shrinks and grows slightly on top of the image. This is something we’re used to and works as a cue to the user that their interaction has been completed. If the interaction became just a colour fill, you may not notice but it would leave a break in your established flow, or possibly seem broken to the average user.

 

Why do they matter?

In theory, what we’ve laid out above seems easy to grasp. “Make things move, people will look at them and like them”. The problem with this approach, is that it ignores why we like them, and how they form connections with us.

Motion is a huge part of the overall User Experience (UX) of a site or application, but a great creator will actually split these apart, and allow one to influence the other. If an interface is well thought out with great interactions and animations, it will make the UX even greater than if it was all boiled in the same pot.

 

motion-three

 

If each thought out piece is designed on it’s own, and then brought together as a group, it will ensure a greater overall experience. This means instead of designing how a page transitions into another, you would design how EACH page would transition into EACH other page. The sum of all of these parts is how we end up with super slick apps like Facebook, Instagram and Youtube. Nothing has been skimmed over on these apps, and every part of the experience has a tailor-made piece to help users along.

 

Check back next week for the back half of our exploration on Motion in Design.