Design 7th - Sep - 2018

Buoyancy of UI/UX – It’s not what you think it is


Well the title of this article might trigger questions and that’s exactly what i am looking for. I start with questions, questions that might end up with many more questions, here is one such topic. We as designers think, when and how do i use animation to make the UI look smooth but also take usability into factor? or Do i start planning for UX motion at the start of design or at the end ? Some even question if UX motion is required!

UI animation is very young, It has been approximately 21 years since UI animation domain emerged and it has been growing strong and smooth. Animation helps the design in four ways Expectation, Continuity, Narrative and Alliance. It’s almost similar to the 12 animation principles of Disney but not the same, It’s not what you think it is! UI animation does not go according to the physical organic bodies as supposed to Disney’s 12 principles and that’s a huge difference i see.

With the diffrence I have listed above I come to conclusion that UI motion can be listed down to 3 very important principles and this might help you to realise how its close but not similar to 12 global animation principles.

  1. Parenting
  2. Timing
  3. Continuity/Transformation
Parenting –

The most important basic animation principle of user interface, its as simple as the name describes, when an object is scaled or positioned to its parent when interacted. All the basic object transitions like scale, opacity, value etc. can be used for better user interface which acts as one of the best real time interactions.

Timing –

Timing is the priority in any kind of animation, if the motion isn’t seamless and lags then there is no value in using animation. As important as it is for films, for example if the audio timing is not synced to the footage then the whole footage is of waste. These kind of interactions are seen on a large scale and to implement it in the right way timing is really important.

Continuity/Transformation –

A very obvious, understated yet very vital animation principle, as simple as when you click the upload button and button changing into an upload status bar transformation can be the example. It grabs your attention, continues to give results and gets you waiting for what next to follow. It adds to the continuous series of movements where the user attention is grabbed until he gets a outcome, who doesn’t want to wait for the outcome!?

FInally, the conclusion is here!

I have lot of questions that have been mentioned above, some questions that i think i have answered like buoyancy as smooth as its supposed to be like animation but with creatives we tend to ask more questions. So the next question is here is the conclusion, will only these three principles work for any kind of UI motion? Definitely no! But are they important? Yes for sure.

Related posts

Design 7th - Sep - 2018

Design Myths everyone believes in