Виды анимаций на сайтах. Кринж, который стоит увидеть и не повторять. Часть 1

Существуют анимации, без которых сайту или приложению не обойтись. Их присутствие — обязательное условие создания качественного продукта, который понравится пользователям и будет конкурентоспособным.

Существует 2 больших лагеря — те, кто любит анимации (в основном — заказчики и пользователи хороших сайтов) и те, кто хочет сжечь их в адском пламени (дизайнеры, некоторые пользователи VC). Но тут все не так однозначно.

Я разделила каждый вид анимации на 3 группы и расскажу подробно про каждый из них:

Пользователям почти всегда нужно ждать загрузки чего-либо — сайта, раздела, оплаты или своего медленного мобильного интернета. Если загрузка длится слишком долго, он может загрустить, разозлиться и уйти с сайта. Чтобы этого не произошло, нужно сделать загрузку частью положительного пользовательского опыта.

Хорошая

Самый лучший вариант — когда известно, сколько еще ждать до окончания загрузки. Для этого идеально подходят:

А если добавить к этому красивую анимацию в фирменном стиле, будет еще лучше.

Можно, но осторожно

Если использовать цикличную анимацию, нужно сделать ее максимально необычной и интересной. Проблема таких анимаций в том, что пользователь не знает, сколько еще ему смотреть на эти «колечки» и «переливашки», поэтому устает от них быстрее, чем от процентной загрузки. Если ваш сайт грузится достаточно быстро, используйте этот вариант.

Остановитесь

С оригинальностью лучше не перебарщивать, иначе загрузка получается максимально долгой и странной. Можно забыть, зачем зашел на сайт. А еще сама анимация может зависнуть из-за своего веса (реальный кейс).

Анимация курсоров когда-то была очень популярна. Сейчас ее почти не используют в коммерческих сайтах. Другое дело, когда из сайта делают произведение искусства или агентства хотят показать все свое мастерство. Мода циклична и свежий взгляд на устаревшие фишки плюс развитие технологий дизайна рождают интересные решения.

Хорошая

Если движение курсора добавят интерактивности сайту (без фанатизма), он запомнится и оставит приятные впечатления.

Можно, но осторожно.

Если анимация слишком массивная, она может оказать такой же эффект, как комар, который летает перед носом. Сильно не мешает, но избавиться от него хочется.

Еще совет — не перебарщивайте с интерактивностью, потому что посетитель сайта может заиграться и отвлечься от того, зачем пришел. А мы ведь создали сайт не для игр, а для конверсий.

Остановитесь

Если вы создали сайт не кринжа для, создавать препятствия просмотру контента и усложнять жизнь юзерам не стоит.

Статичность — это скучно (по крайней мере, так считает большинство заказчиков, когда говорит ну вы поиграйте еще со шрифтом). Движение букв и слов, в некоторых случаях, помогает сконцентрировать внимание на том тексте и очередности восприятия, которых вы хотите добиться.

Хорошая

Можно, но осторожно

Анимированный текст на всем сайте может смотреться красиво при определенных условиях, но делает текст сложнее к восприятию и выматывает читающего, потому что глаза постоянно “прыгают” в разные части экрана. Особенно сложно, если она работает при скроллинге в обе стороны.

Остановитесь

Буквы, которые постоянно мигают, высвечиваются, гаснут и “прыгают” сведут с ума любого. На таких сайтах нужно вешать предупреждения о том, что будет много мерцающих эффектов.

На этом мой кампухтер попытался зависнуть, так что следующая часть анимаций — в следующей статье: )

С вами была Лена, UX/UI/Motion-дизайнер, которая использует хорошую анимацию в своих работах.

А вы уже заметили, что анимации используют почти все сайты и приложения или еще верите, что анимации — зло?