Read the Beforeitsnews.com story here. Advertise at Before It's News here.
Profile image
By webdesignerdepot (Reporter)
Contributor profile | More stories
Story Views
Now:
Last hour:
Last 24 hours:
Total:

How to delight your users with subtle animation

% of readers think this story is Fact. Add your two cents.


Happy Thanksgiving to all our American readers!

Animation is nothing new in digital interfaces. They have had an interesting history of rising, falling and now rising again in popularity. Subtle animations add personality and empathy into an otherwise dull interface. They make experiences fun, delightful and memorable.

Animation in web design has been around for a long while. They first became popular thanks to the .gif format, and later, .swf. However, with a lot of designs not factoring in usability, animation soon became associated with poor UX.

When Flash was no longer cool and HTML5 became the go-to technology, it was CSS3 that picked up the animation baton; specifically CSS transitions and CSS animations. Simpler implementation and smoother performance than even JavaScript made CSS the ideal tool, and designers have been experimenting with animation in UI ever since. 

Adding personality with animation

Having your navigation fade in on load provides for a very nice touch; it shows off that your website is elegant; that’s personality. When you use a taxi app and provide a big tip, there is confetti falling down the screen; that’s fun, quirky and unexpected; that’s personality. Small things like that allow for your visitor to make a personal connection with you. 

Optimo’s hats do a pretty nice transition on hover, they tip themselves by way of introduction and make room for the hat’s name. It’s beyond subtle, but above all it is a nice touch, this provides a sense of personality, a sense of delight.

Creating an emotional connection with animation

When there is a personal connection, there is an emotional connection. I am now able to like your company and brand; we are now in a relationship because those subtle animations let me see the people—the humans—behind the computer/the machine/the website. These little touches make a company culture shine through. It’s not that hard to see the people behind the company are friendly and probably easy going; it’s therefore easy to connect with them on a personal and emotional level.

Exciting interest with animation

Frankly, quirky animations are fun; they make your website interesting! What’s more, people love it, they will enjoy it so much they will share it with their friends—whether in conversation or a tweet—and they will remember you.

Soleil Noir’s Dream On website is something else. Everything moves, wiggles and what not; but it works very well for the website as it’s fun and supposed to be interesting. Everything is ever so slightly animated; this makes for an instant positive impression.

Conclusion

Not everything is without its downside. There is a fine line between subtle and too much. Animation can also be annoying for users, especially when an animation is placed on every section of a long single page. I had to wait for content once because I scrolled to the bottom of a page and got ahead of the animation which loaded the sections. That’s not good, it disturbs my workflow, it distracts me, it makes me angry.

It might even be inappropriate for some websites to have these animations; when you are a non-profit who wants to be taken seriously, or perhaps a government taxation website, it’s inappropriate for you to have confetti raining down your page when a user logs in or click on a “pay my income tax” button. This could harm your image, making people distrust you. Make sure your animations, whatever they may be, are appropriate for your audience.

 

Source


Source: http://www.webdesignerdepot.com/2016/11/how-to-delight-your-users-with-subtle-animation/


Before It’s News® is a community of individuals who report on what’s going on around them, from all around the world.

Anyone can join.
Anyone can contribute.
Anyone can become informed about their world.

"United We Stand" Click Here To Create Your Personal Citizen Journalist Account Today, Be Sure To Invite Your Friends.

Please Help Support BeforeitsNews by trying our Natural Health Products below!


Order by Phone at 888-809-8385 or online at https://mitocopper.com M - F 9am to 5pm EST

Order by Phone at 866-388-7003 or online at https://www.herbanomic.com M - F 9am to 5pm EST

Order by Phone at 866-388-7003 or online at https://www.herbanomics.com M - F 9am to 5pm EST


Humic & Fulvic Trace Minerals Complex - Nature's most important supplement! Vivid Dreams again!

HNEX HydroNano EXtracellular Water - Improve immune system health and reduce inflammation.

Ultimate Clinical Potency Curcumin - Natural pain relief, reduce inflammation and so much more.

MitoCopper - Bioavailable Copper destroys pathogens and gives you more energy. (See Blood Video)

Oxy Powder - Natural Colon Cleanser!  Cleans out toxic buildup with oxygen!

Nascent Iodine - Promotes detoxification, mental focus and thyroid health.

Smart Meter Cover -  Reduces Smart Meter radiation by 96%! (See Video).

Report abuse

    Comments

    Your Comments
    Question   Razz  Sad   Evil  Exclaim  Smile  Redface  Biggrin  Surprised  Eek   Confused   Cool  LOL   Mad   Twisted  Rolleyes   Wink  Idea  Arrow  Neutral  Cry   Mr. Green

    MOST RECENT
    Load more ...

    SignUp

    Login

    Newsletter

    Email this story
    Email this story

    If you really want to ban this commenter, please write down the reason:

    If you really want to disable all recommended stories, click on OK button. After that, you will be redirect to your options page.