{"id":752,"date":"2017-03-01T12:09:59","date_gmt":"2017-03-01T11:09:59","guid":{"rendered":"https:\/\/capturly.com\/blog\/?p=752"},"modified":"2023-09-21T11:41:35","modified_gmt":"2023-09-21T09:41:35","slug":"animating-the-right-way-in-ux","status":"publish","type":"post","link":"https:\/\/capturly.com\/blog\/animating-the-right-way-in-ux\/","title":{"rendered":"Improve User Experience with these Animation Tools and Tips"},"content":{"rendered":"
\n
<\/div>
<\/figcaption><\/figure>\n

I<\/span>n <\/em>the past few\u00a0years, UX has changed. A lot. Not only the techniques but also the user’s expectation. This has an effect on UI design as well. The constantly developing background technologies made animation finally viable. It\u2019s not considered a curse sent upon users by some witches of Salem, something that holds back people.<\/em><\/p>\n

In fact, it has become a real cornerstone of User Experience since if something moves, it appears to be more alive and responsive. But this is just the tip of the iceberg since animation has many other benefits.<\/p>\n

As I mentioned, there were times when animations slowed down devices turning out to be a terrible idea for UX. Since those days are gone, now you have the opportunity to pimp up your site\/app with fancy animations and effects.<\/p>\n

Wrong.<\/p><\/blockquote>\n

UX isn\u2019t about making a website or app that feels like a movie directed by Micheal Bay.<\/p>\n

\"animation<\/p>\n

\n
\n
<\/div>\n<\/div>\n<\/figure>\n

Always keep in mind that a\u00a0coin has two sides and sometimes less is more! With these pieces of information, let\u2019s get into the process itself.<\/p>\n

Be responsive! – The ultimate UX tip<\/strong><\/h2>\n

Google\u2019s search app on iOS uses several animations to make the interface appear more responsive\u00a0during the loading process.<\/p>\n

\n
\n
\"responsive<\/div>\n<\/div>
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0<\/figcaption><\/figure>\n

Due to the immediacy of these transitions, you get the sense that the app is reacting to your input despite the fact that nothing has actually loaded yet.<\/p>\n

\"app<\/p>\n

\n
\n
<\/div>\n<\/div>
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0<\/figcaption><\/figure>\n

\u201eIt\u2019s the interface\u2019s responsibility to mediate an information exchange which makes it so important. The challenge for designers is to determine when their design gets in the way of this central UI tenet.<\/span>\u201d Sophie Paxton<\/a><\/em><\/p><\/blockquote>\n