Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Interactivity and motion in your design

Wednesday, December 10th, 2014 by Servage

motion-designWith the introduction of newer operating systems like iOS7 the skeuomorphic design is binned, making room for a modern and minimalist flat design aided by simplistic and helpful motions. The trend is being adopted among many sites and apps, so there are plenty of reasons to have a closer look at how to adopt this on your own projects. There are certain principles to keep in mind while implementing flat UIs and motion design.

With the continuous advent of new and changing technologies, we get a growing arsenal of tools to offer better user experiences and making mobile applications more usable and beautiful than ever before. Touch gestures, voice commands, and air gestures have added many new dimensions in the evolution of mobile apps. Now animation and motion design is proving to be a game changing factor for the success of many high end brands. While this can be a challenging and cumbersome path to follow, it does not necessarily have to be. Incremental improvements to your design can make the difference you need.

Motion design should have a purpose

Animation is often considered just a wow-factor adding interactivity and it is mainly for the purpose of fun. While fun wow-elements are certainly cool, sometimes even impressive, they should not be over prioritized. Remember that you should always have a purpose with your development efforts and at least consider the benefits, before blindly adding motion design to your projects. You will quickly learn, that there are very suitable positions and less suitable ones for such improvements.

Engagement through interactivity

Pinterest has employed the simple gesture of a touch screen swipe in their motion design and thereby made navigation of its iPhone app easier and more user friendly. If you are in a zoomed status just swipe down to return or swipe left to continue in the feed. Swipe up leads you to a new feed. Another example is the Circa app where a scrolling animation simulates a visual timeline and comes up with new stories.

Branding on tiny screens is tough, but adding differentiating design elements including suitable animations will make your app stand out. For example Path and Tumblr have designed their apps with motions in a contextual manner. These approachable and playful animations are underlining their brands by creating brand awareness through active engagement by users.

What to expect from motion design

High standards and well placed motion design can meet desired goals and add significant value to your business. The main aim with motion design should be to provide an excellent user experience by establishing a physical space where objects come and go in smooth flows and guide users towards the final goals of the site, e.g. a signup or other desired action. Excessive graphics should be avoided, but texts to explain things literally are still needed. It is often the subtle elements that make all the difference.

Remember that your motion design needs a good context to be accepted as purposeful instead of just a gimmick. Therefore keep a contextual flow and appropriateness during motion design – particularly on mobile due to the limited screen space available. The purpose should be to give the user an impressive experience instead of a frustration. You can test this by asking users of your site how they feel during various stages of exploring it.

References & More Reading


Interactivity and motion in your design, 4.3 out of 5 based on 3 ratings
Categories: Guides & Tutorials


You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.