{"id":13465,"url":"\/distributions\/13465\/click?bit=1&hash=1e6228dc4e5e22730d5108e1c30ee96b3462205737e7a3fe7ce4c965aaacfe57","title":"\u041a\u043e\u043d\u0444\u0435\u0440\u0435\u043d\u0446\u0438\u044f Ozon \u2014 \u043a\u043e\u043c\u0443, \u0447\u0442\u043e \u0438 \u043a\u0430\u043a \u043f\u0440\u043e\u0434\u0430\u0432\u0430\u0442\u044c \u0432 \u043a\u0440\u0438\u0437\u0438\u0441","buttonText":"\u0423\u0437\u043d\u0430\u0442\u044c","imageUuid":"6b1e0c55-41d3-56c2-84e2-fe6f447e3825","isPaidAndBannersEnabled":false}
Дизайн
Lena Nexman

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

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

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

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

  • Хорошая и красивая.
  • Можно, но осторожно.
  • Астанавитесь!

Анимация загрузки

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

Хорошая

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

  • Процентная загрузка;
  • Заполняемое поле.

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

Плавная анимация успокаивает и отвлекает от ожидания
Главное чтобы от кручения земного шара не возникла тошнота

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

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

Элемент игры отлично удерживает внимание. Работает также безотказно, как и динозавр от Google.
Еще забаный вариант цикличной загрузки.

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

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

Ну очень уж оригинально

Анимация курсора

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

Хорошая

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

Динамичный фон - ненавязчиво и эстетично.
Показали лучшую часть девушки

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

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

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

Первое время мне хотелось “скинуть” эту анимацию с курсора.
Анимация - интересная. Но интереснее играться с ней, чем смотреть что предлагает сайт.

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

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

Цель анимаций - утрачена
Ну вы поняли...

Типографика

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

Хорошая

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

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

arcr.ru, by Artem Markovsky

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

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

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

Делаем вторую часть статьи про анимации? 
О да, посмотрим на эту дичь
Неа
Показать результаты
Переголосовать
Проголосовать

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

  • Подписывайтесь, вступайте в сообщество Юзабилити, в планах — много интересных материалов.
  • Присоединяйтесь к авторам сообщества. За хорошие статьи по теме Юзабилити я предлагаю 4000-10000 рублей за материал. Свяжитесь со мной, предложите темы, чтобы начать зарабатывать.
  • Всегда рада нетворкингу с UI/Motion-дизайнерами и Frond-end — вы знаете где меня найти.

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

0
44 комментария
Написать комментарий...
Yury Gagarin

Статью надо начинать с ликбеза.
Что такое "Кринж" ??? 🥴

Ответить
Развернуть ветку
Lena Nexman
Автор

Это что-то на дизайнерском...
Но я не сильно уверена :)

Ответить
Развернуть ветку
Yury Gagarin

Лол вообще, омг, фейспалм словил и кринжовую ситуэйшен.
Это лол, вообще лютый кринжовый флекс какой-то.
Зумеры буллят и агрятся показывая баттхерд на вайбе.А вообще этот краш очень криповый и зашкварный. Нужны пруфы, иначе этот рандомный рофл просто факап на флексе!

Ответить
Развернуть ветку
Lena Nexman
Автор

— Здесь, зона с сильным магическим полем!
— Вот именно... — подтвердил проходящий мимо куст.

P.S. Ничерта не поняла, но осуждаю.

Ответить
Развернуть ветку
Платон Щукин

Это когда статьи пишешь не сам и платишь за них от 4к:}

Ответить
Развернуть ветку
Lena Nexman
Автор

Статьи на VC, в основном, я пишу сама :)
Ибо местной аудитории палец в рот на клади.
Иногда только накидываю смыслов копирайтеру и он дописывает за меня, но я потом все равно половину меняю..

Ответить
Развернуть ветку
Офицерский Даниль

это не дизайнерское. кринж, это что-то стыдливое, используется, когда хотят сказать о чём-то из ряда вон плохом или испытывают стыд за действия/контент другого

Ответить
Развернуть ветку
Lena Nexman
Автор

Спасибо, я тоже умею в гугл :) Думаю, как и Юрий, мы так развлекаемся))

Ответить
Развернуть ветку
Аккаунт заморожен

Комментарий недоступен

Ответить
Развернуть ветку
Alex Gurulli

А вы уже заметили, что анимации используют почти все сайты... - на VC.ru не видел ;)
А скиньте ссылку на jimmy simmons сайт - дурака поваляю.

Ответить
Развернуть ветку
Lena Nexman
Автор

А вы на кнопочку создать наведите в шапке и там увидите микроанимацию, ховер :)

А Hover-эффект — это как раз анимация элемента при наведении.

Ответить
Развернуть ветку
Alex Gurulli
Ответить
Развернуть ветку
Elena Sh

Спасибо, довольно исчерпывающая статья :)

Ответить
Развернуть ветку
Lena Nexman
Автор

А будет аж еще 2 части!

Ответить
Развернуть ветку
Artem Markovsky

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

Ответить
Развернуть ветку
Lena Nexman
Автор

О, Артем.
Интересно вас/тебя видеть!
Выйти можно всегда нажав крестик, если пользователь потерялся, что происходит довольно часто по результатам A/B тестов (зависит от ЦА, конечно).
Ты, кстати, тестируешь варианты своих анимаций на конверсии?

Ответить
Развернуть ветку
Artem Markovsky

Рад знакомству, это всегда взаимно!

Выйти можно всегда нажав крестик, если пользователь потерялся, что происходит довольно часто по результатам A/B тестов (зависит от ЦА, конечно).

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

https://penzgidromash.com
https://bewegen.com/en
https://www.hyperframe.com

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

Ты, кстати, тестируешь варианты своих анимаций на конверсии?

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

Ответить
Развернуть ветку
Lena Nexman
Автор

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

"Необычные взаимодействия и связанные с ними анимации, которые не затрудняют опыт, заставляют посетителя потратить больше времени в положительном ключе."

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

Отсюда, вопрос, есть ли у тебя примеры A/B тестов на конверсии с красочной анимацией/без (где "без" означает минимальное наличие анимации типа ховеров) одного и того же сайта?

—--

При этом, я понимаю твою маркетинговую модель. Ты продаешь искусство, а не "собрать максимальную конверсию на высокочастотных запросах с сиюминутными разовыми продажами", специально опошляя желание конверсий.
1) Но, постойте-ка, а разве не естественным желанием бизнеса является получить как можно больше конверсий?
2) Если ты останавливаешься на искусстве и почти не смотришь дальше (маркетинг, продажи) - окей, твое право, у тебя просто своя ниша :)

Ответить
Развернуть ветку
Artem Markovsky
1) Но, постойте-ка, а разве не естественным желанием бизнеса является получить как можно больше конверсий?

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

У меня бывают разные проекты, которые зависят от типа бизнеса. В одном случае лояльность клиента практически невозможна, там все усилия направлены на конверсию. В другом — имидж играет важную роль и массовые разовые продажи не нужны (в основном премиум сегмент, где сайт это просто один из островков контента). В третьем случае нужен баланс между работой по повышению лояльности клиента и текущими продажами. Для каждого из них есть свой подход к разработке. Логично, что для интерфейса сервиса подбора соискателей с помощью ИИ мы не будем использовать сложных анимаций, 3D и WEBGL. Но чтобы получить лидов на спецпроект, который будет конвертировать в клиентов, вполне можем.

Отсюда, вопрос, есть ли у тебя примеры A/B тестов на конверсии с красочной анимацией/без (где "без" означает минимальное наличие анимации типа ховеров) одного и того же сайта?

Что касается конкретно анимаций, то определяем внутри, как изменится отношение и вовлечение при отказе от каких-либо из них. Там, где наличие анимации критично для понимания, как работает продукт - оставляем (как пример, легендарный свайп в тиндере), где незначительно влияет - убираем. Анимация является частью дизайн-концепции, поэтому не тестируется отдельно от контекста (также как отдельно не тестируется шрифт, типографика, графика, фотостиль и цвет) Тестируется вся работа интерфейса. Но это у меня, скорее всего у тебя другой подход и если метод имеет для проекта экономическое значение, то почему бы и нет.

При этом, я понимаю твою маркетинговую модель. Ты продаешь искусство,

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

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

Ответить
Развернуть ветку
Lena Nexman
Автор

Поняла твое мнение. Написала в личку.

Ответить
Развернуть ветку
Алёна Галчинова

А интересная ветка обсуждения получилась =)
Возможно ли в дальнейшем увидеть статью-интервью на подобные темы? =)

Ответить
Развернуть ветку
Lena Nexman
Автор

Подумаю, обсудим с Артемом.

Ответить
Развернуть ветку
Artem Markovsky

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

Ответить
Развернуть ветку
Михаил Корнышев

Пока смотрел уже забыл что и зачем я смотрю. Ждемс продолжения)

Ответить
Развернуть ветку
Lena Nexman
Автор

Сегодня :)

Ответить
Развернуть ветку
Anton

А вы тестируете анимацию, которую делаете?

Ответить
Развернуть ветку
Lena Nexman
Автор

Посмотрела список своих же статей. Так, кажется, этого нет. Ну что ж, добавлю в план :)

Минимальный список устройств:
- Несколько мобильных на iOS - 5, 7, 11, 13 айфоны с разными размерами экранов (как минимум, чаще - больше устройств)
- Несколько планшетов - iOS, Android пара послабее, пара современных, разные диагонали
- Несколько Android телефонов - от слабых Xiaomi до мощных Самсунгов
- Пара маков, в различных браузерах
- 3 ноутбука на Windows (1366x768, 1920x1080, 4k), 1 десктоп ПК с подключенными мониторами от 17" до 27".

Честный тест занимает от 3 часов.
Чаще - больше.

Ответить
Развернуть ветку
unknown

Прикольно) у вас все эти устройства или у сотрудников?

Ответить
Развернуть ветку
Lena Nexman
Автор

Почти всё есть у меня, но на крупные проекты я привлекаю партнеров-тестировщиков, у них своя фирма :)

Ответить
Развернуть ветку
unknown

Вам надо обратиться к художнику или фотографу. Гора техники в виде аргана и вы за работой)

Ответить
Развернуть ветку
Lena Nexman
Автор

Если вдруг художник или фотограф внезапно знают многое о юнит-тестах - может быть :)

Ответить
Развернуть ветку
Андрей Чередниченко

Надеюсь, создатели анимаций из раздела "остановитесь" не наткнутся на эту статью 😅

Ответить
Развернуть ветку
Lena Nexman
Автор

Я сама себя пару раз так в список "остановитесь" вносила, после того как видела как лагает моя же анимация :) ну на то оно и тестирование, чтобы в результате тестов исправлять...

Ответить
Развернуть ветку
Николай Быков

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

Ответить
Развернуть ветку
Lena Nexman
Автор

True story

Ответить
Развернуть ветку
Дарья Павлик

А возможно ли отслеживать скорость подключения устройства клиента и "уменьшать" количество анимации и других "тяжёлых" элементов? Т.е. делать их адаптивными?Часто, пока посмотришь все красивости - забываешь что хотел))

Ответить
Развернуть ветку
Lena Nexman
Автор

Можно! Тоже тисну небольшую статейку на этот счет, ведь благодаря одной талантливой даме, которая, можно сказать, изменила интернет - это стало возможным :)

Ответить
Развернуть ветку
Правый якорь

Очень интересные примеры, спасибо за статью!

Ответить
Развернуть ветку
Lena Nexman
Автор

Подписывайтесь, будет еще :)

Ответить
Развернуть ветку
Леся Сорокина

О, хорошая подача полезной инфы. спасибо)

Ответить
Развернуть ветку
Алина

Еще пример анимации на сайте как НЕ НАДО - vnukovo-outlet

Ответить
Развернуть ветку
Lena Nexman
Автор

Расскажите о вашем опыте подробнее.
Что конкретно не нравится?
Вроде не так много анимации, если смотреть с ПК.

Ответить
Развернуть ветку
Alex

Вы забываете, что одна из целей анимации — создать эмоции.

На каком-нибудь Яндекс.Маркете и VC это не нужно. Но в вашем разделе "Остановитесь" как раз эмоции. Подобная анимация развлекает и завлекает. Как правило, это разовые сайты промо-акций или портфолио, которые не предназначены для повседневного посещения, а должны подцепить с первых секунд. И если это оттолкнет 2-х человек ненавистников анимаций, то других 10 это зацепит.

ps: интерактив с червячком гениален

Ответить
Развернуть ветку
Lena Nexman
Автор

Я и забываю? Почитайте предыдущие статьи :)
У меня сайтов с вау-анимацией, которые вызывают у пользователей VC чаще всего дикое раздражение - полно. Я на них, можно сказать, специализируюсь.

Ответить
Развернуть ветку
Читать все 44 комментария
null