3 cool ideas to make CAPTCHA less annoying
Do you like captcha? You don't need to be a clairvoyant to know that the answer is no. However, as an understanding web designer or developer, you know that this…

Continue reading →

UX design concept: splitting the Instagram feed into groups
Many Instagram users follow accounts of different types. Here and friends, and celebrities, and accounts "on interests": food, sports, and so on. What to do if you log in to…

Continue reading →

What program to use for CSS3 / HTML5 lessons
While learning CSS 3 / HTML 5 lessons, you will need to use some program, namely an editor. Theoretically, you can write, create HTML or CSS files in Notepad. In…

Continue reading →

Improving the usability of landing pages with animation

Today, many designers consider animation to be something that makes the design more beautiful and bright, and rarely use it to improve usability. To improve the usability of the landing page, the animation should be a functional element, not just a decoration. If you want to learn how to use animation to make a design both attractive and convenient, then this article is for you.

1. Create a concept
Every designer is a storyteller. When he creates a website, he tells a story to his visitors. Using animation, we can make this story even more interesting.

Animation breathes life into the content, making it more attractive and memorable. A good example of this animation can be found on the Ikonet website. The animation captures the user from the first second of being on the page.


The animation can also act as a guide, explaining to the user how to interact with the interface or site. Thus drawing the user’s attention to important things. For example, if you need to focus on some information or action, make it slip out from somewhere and be quite noticeable. Take a look at the Preston Zeller example below. Elements appear on pages in turn, thus drawing users ‘ attention to certain areas on the page.

When users view the Preston Zeller page, items appear on the page in turn.
When users view the Preston Zeller page, items appear on the page in turn.
2. Provide feedback
Human-computer interaction is based on two main principles: user input and system feedback. All interactive objects must respond to user input with an appropriate visual or audio signal. Thus providing feedback.

The following is a custom Checkbox effect created using the Slides framework. The subtle Bouncing animation that the user sees when using the switch enhances the sense of interactivity.


With slides, you can create nice animations that are activated when you hover, thus encouraging users to interact with objects. Take a look at Berry Visual. When you hover the cursor over “Send message” or the menu in the upper-right corner, a nice animated effect appears. This creates a sense of interactivity of the elements.


Buf Antwerp is another great example of how animated feedback can improve the user experience. When users hover over a tile, a semi-transparent overlay appears with text that provides additional information about the object.

63. Establish communication
A great place to add an animation to a landing page is when you click through. Often, the transition moments seem abrupt, for example, when users click on a link and a new window appears. These changes usually lead to a loss of context. the brain needs to scan a new page to understand how it is related to the previous one, so it can be difficult for users to perceive such transitions.

Read also: Learning new tools: how to go from pencil to gouache
Consider an example of a sharp transition:

This sudden transition seems abrupt and unnatural. Such transitions once again involve the brain, it needs to scan the entire layout to understand what is happening.
This sudden transition seems abrupt and unnatural. Such transitions once again involve the brain, it needs to scan the entire layout to understand what is happening.
Compare this to the following example, where a smooth animated transition directs the user to different parts of the screen:

A simple animated transition makes it easy to understand what has changed on the screen.
A simple animated transition makes it easy to understand what has changed on the screen.
The second transition is softer. It clearly demonstrates the process of switching between sections, helping users understand what is happening and see the relationship between them.

Animated transition between preview and details.
Animated transition between preview and details.
It is also used when creating a transition between stages. The smooth transitions between slides in the example below create a sense of consistency, so the information doesn’t look coherent.

Animation helps you determine object relationships and position in the hierarchy.
Animation helps you determine object relationships and position in the hierarchy.
4. Make boring tasks interesting
It’s probably hard to imagine how you can add playful elements to your daily routine. But by adding a bit of surprise to the animation, we can turn a familiar interaction into something fun and memorable.

If you open the Tympanus’ 3D Room Exhibition website, at first glance you will see that It is no different from other web galleries. But your impression will change immediately after you interact with the page. If you move the cursor, you will see how the page moves, and this effect will create a sense of 3D space. This feeling is amplified when you move from one page to another. It’s like you’re traveling from one room to another in three-dimensional space.


Now let’s talk about something more familiar than 3D effects-shapes. Who likes to fill out forms? Probably no one. However, filling out forms is one of the most common tasks on the Internet. How do I make this activity fun?

Look at the image below, the Yeti closes its eyes when the user starts entering their password. This animated effect is surprising and uplifting, especially if you see it for the first time.

The Character Of Darin Senneff
The Character Of Darin Senneff
Last but not least, you can make scrolling not only visually interesting, but also useful for readers. Below is the Storytelling Map, an interactive journey in which the route on the map is animated according to the content on the page. The connectivity of the idea, visual effects, and location allows users to read information and observe movement on the map.

Storytelling Map
Storytelling Map
6 best practice tips for animating a landing page
Determining the place on the page where the animation will be most useful is only half the story. The implementation of animation is also very important. In this section, you will learn how to properly animate objects on a professional level.

1. Don’t animate multiple objects at the same time
When several objects are moving simultaneously, it is difficult for the user to concentrate. Because the human eye will run from one object to another, and the brain will need extra time to sort out what is happening (especially if the movement is very fast). Therefore, it is very important to implement the animation correctly.

Read also: How to take beautiful pictures of sunset and dawn
It is extremely important to understand the concept of transitional choreography, which consists of a sequence of movements that maintain focus when changing the interface. Minimize the number of simultaneously moving elements. Use no more than two or three moving elements at a time. If you want to move more than three objects, group them and animate them as a whole, rather than separate elements.

Don’t animate all objects at the same time.
Don’t animate all objects at the same time.
Slides are extremely useful for web design, they allow you to use not too many movements. Each animated effect present in the slides has been carefully designed to present the content effectively.

2. The animation should not conflict with the individual characteristics of the landing page
Every time you add animation to a design, you make it more expressive. Its appearance will largely depend on the selected animated effect.

When people interact with a product, they have certain expectations. Imagine that when you create a landing page for a banking service, you decide to use a Bouncing animation for the data collection form. Many users will be afraid to provide their data because the form doesn’t look serious enough.

Do not use Bouncing animation in forms that are official in nature.
Do not use Bouncing animation in forms that are official in nature.
The Slides framework provides 10 animated styles, such as Stack, Zen, Film, Cards, and Zoom. Experiment with different effects and choose the one that best fits all the criteria.

3. Set the timing
When it comes to creating animations, timing is everything. It literally decides the fate of animation. When you’re working on an animation, you usually spend a third of your time searching for the right animated effects, and the rest of your time choosing the timing to make the animation look elegant.

The optimal animation speed for the user interface is between 200 and 500 milliseconds. An animation that lasts less than 1 second is considered instantaneous, while an animation that lasts more than 5 seconds can create a sense of tightness.

When it comes to creating an animated effect, time synchronization has a direct impact on the perception of the animation. It helps designers make animation more natural and natural.


4. Don’t forget about availability
Animation is a double-edged sword. It can improve usability for one group of users while creating problems for another group. The release of Apple iOS 7 was an example of how not to do it. Shortly after the release of the operating system, iPhone users reported that animated transitions cause dizziness and eye strain.

5 common mistakes in web design that infuriate users
Developing an interactive interface or website is not an easy task. You need to collect everything about your audience, analyze and plan their behavior. New technologies make the research process…


7 useful Chrome extensions for designers
If you are looking for convenient tools for your workflow, congratulations: you have come to the right place. The Dribbble team offers you seven extensions for Chrome. They will help…


Customer and web designer: how to reach a common denominator?
So, You have clearly set a goal-to create a website and you need a web designer to make Your goal a reality. This will be the company's website or your…


Web designers created the worst UI in history
Web design has come a long way over the years, but that doesn't mean it's perfect. We are constantly writing about how to make the UI better, how to fix…