Easy to use interface by using subtle animations.

“I don’t need the instructions, let me just fucking do it.”

We often feel that taking time to learn a task seems that we are wasting time.
Something as simple as teaching another person a basic thing might seem trivial in comparison with programming a supercomputer. However, when I was a child and my parents tried to teach me the super simple task of tying shoelaces I had the impression that building and driving a super inter-stellar spaceship was easier and I’m absolutely sure that the same was for my parents. The same applies in designing a product.

Learning is easy just when there is a desire to attain a specific knowledge.

How can we make the learning process more tolerable?

There are two types of motivations, intrinsic like pride or extrinsic like a free cruise to a tropical island.

I’m gonna talk about the intrinsic motivation because this is the most powerful one.
As human beings, we want to feel safe, confident and instinctive.

Some people may think that if you have a great functional product this is all you need. If the people will want to use it they have to learn it. Most of the products come with huge manuals of text containing instructions on how to use it and/or install it. This is the RTFM approach, short for “Read the Fucking Manual”. If someone has any problem you just tell them to RTFM.

Before diving in, a great example which I have in my mind right now is the “Business User Guide” of Dropbox.

They’ve managed to create a truly enjoyable experience of learning how to sync, share, and manage the files. Even if you’re not interested in this it still makes you curious to see that maybe you need it.
Great designers are equally combining function with form to create intuitive, familiar experiences.

Subtle animations to improve the learning experience

We can make the learning process much easier by using subtle animations.
In this example you will see how a subtle change in terms of repetition can drastically improve the way we can learn/understand:

As you’ve already noticed, the first animation is happening “all at once” and the second one it’s happening gradually.

You may say:

“SO WHAT?”

Now, let’s apply the same concept to the digital space:

You see that the animation in the second example is not just fancy/cool/hip, it’s actually making it more obvious, easier to understand and more enjoyable.

Thank you for reading!

Comment

This post doesn't have any comment. Be the first one!

hide comments
Follow
...

This is a unique website which will require a more modern browser to work!

Please upgrade today!