Существуют анимации, без которых сайту или приложению не обойтись. Их присутствие — обязательное условие создания качественного продукта, который понравится пользователям и будет конкурентоспособным.
Существует 2 больших лагеря — те, кто любит анимации (в основном — заказчики и пользователи хороших сайтов) и те, кто хочет сжечь их в адском пламени (дизайнеры, некоторые пользователи VC). Но тут все не так однозначно.
Я разделила каждый вид анимации на 3 группы и расскажу подробно про каждый из них:
- Хорошая и красивая.
- Можно, но осторожно.
- Астанавитесь!
Анимация загрузки
Пользователям почти всегда нужно ждать загрузки чего-либо — сайта, раздела, оплаты или своего медленного мобильного интернета. Если загрузка длится слишком долго, он может загрустить, разозлиться и уйти с сайта. Чтобы этого не произошло, нужно сделать загрузку частью положительного пользовательского опыта.
Хорошая
Самый лучший вариант — когда известно, сколько еще ждать до окончания загрузки. Для этого идеально подходят:
- Процентная загрузка;
- Заполняемое поле.
А если добавить к этому красивую анимацию в фирменном стиле, будет еще лучше.
Можно, но осторожно
Если использовать цикличную анимацию, нужно сделать ее максимально необычной и интересной. Проблема таких анимаций в том, что пользователь не знает, сколько еще ему смотреть на эти «колечки» и «переливашки», поэтому устает от них быстрее, чем от процентной загрузки. Если ваш сайт грузится достаточно быстро, используйте этот вариант.
Остановитесь
С оригинальностью лучше не перебарщивать, иначе загрузка получается максимально долгой и странной. Можно забыть, зачем зашел на сайт. А еще сама анимация может зависнуть из-за своего веса (реальный кейс).
Анимация курсора
Анимация курсоров когда-то была очень популярна. Сейчас ее почти не используют в коммерческих сайтах. Другое дело, когда из сайта делают произведение искусства или агентства хотят показать все свое мастерство. Мода циклична и свежий взгляд на устаревшие фишки плюс развитие технологий дизайна рождают интересные решения.
Хорошая
Если движение курсора добавят интерактивности сайту (без фанатизма), он запомнится и оставит приятные впечатления.
Можно, но осторожно.
Если анимация слишком массивная, она может оказать такой же эффект, как комар, который летает перед носом. Сильно не мешает, но избавиться от него хочется.
Еще совет — не перебарщивайте с интерактивностью, потому что посетитель сайта может заиграться и отвлечься от того, зачем пришел. А мы ведь создали сайт не для игр, а для конверсий.
Остановитесь
Если вы создали сайт не кринжа для, создавать препятствия просмотру контента и усложнять жизнь юзерам не стоит.
Типографика
Статичность — это скучно (по крайней мере, так считает большинство заказчиков, когда говорит ну вы поиграйте еще со шрифтом). Движение букв и слов, в некоторых случаях, помогает сконцентрировать внимание на том тексте и очередности восприятия, которых вы хотите добиться.
Хорошая
Можно, но осторожно
Анимированный текст на всем сайте может смотреться красиво при определенных условиях, но делает текст сложнее к восприятию и выматывает читающего, потому что глаза постоянно “прыгают” в разные части экрана. Особенно сложно, если она работает при скроллинге в обе стороны.
Остановитесь
Буквы, которые постоянно мигают, высвечиваются, гаснут и “прыгают” сведут с ума любого. На таких сайтах нужно вешать предупреждения о том, что будет много мерцающих эффектов.
На этом мой кампухтер попытался зависнуть, так что следующая часть анимаций — в следующей статье: )
С вами была Лена, UX/UI/Motion-дизайнер, которая использует хорошую анимацию в своих работах.
- Подписывайтесь, вступайте в сообщество Юзабилити, в планах — много интересных материалов.
- Присоединяйтесь к авторам сообщества. За хорошие статьи по теме Юзабилити я предлагаю 4000-10000 рублей за материал. Свяжитесь со мной, предложите темы, чтобы начать зарабатывать.
- Всегда рада нетворкингу с UI/Motion-дизайнерами и Frond-end — вы знаете где меня найти.
А вы уже заметили, что анимации используют почти все сайты и приложения или еще верите, что анимации — зло?
О, хорошая подача полезной инфы. спасибо)
Статью надо начинать с ликбеза.
Что такое "Кринж" ??? 🥴
Это что-то на дизайнерском...
Но я не сильно уверена :)
Лол вообще, омг, фейспалм словил и кринжовую ситуэйшен.
Это лол, вообще лютый кринжовый флекс какой-то.
Зумеры буллят и агрятся показывая баттхерд на вайбе.А вообще этот краш очень криповый и зашкварный. Нужны пруфы, иначе этот рандомный рофл просто факап на флексе!
— Здесь, зона с сильным магическим полем!
— Вот именно... — подтвердил проходящий мимо куст.
P.S. Ничерта не поняла, но осуждаю.
- Это что за гадость?
- Это дизайн гадости.
- Афигено!
Это когда статьи пишешь не сам и платишь за них от 4к:}
Статьи на VC, в основном, я пишу сама :)
Ибо местной аудитории палец в рот на клади.
Иногда только накидываю смыслов копирайтеру и он дописывает за меня, но я потом все равно половину меняю..
это не дизайнерское. кринж, это что-то стыдливое, используется, когда хотят сказать о чём-то из ряда вон плохом или испытывают стыд за действия/контент другого
Спасибо, я тоже умею в гугл :) Думаю, как и Юрий, мы так развлекаемся))
Комментарий недоступен
Да почитайте в инете. Статья самая оптимальное , что видел в последнее время. Без общих фраз типа "давайте жить хорошо". Все с этим согласны, но вот как)
А вы уже заметили, что анимации используют почти все сайты... - на VC.ru не видел ;)
А скиньте ссылку на jimmy simmons сайт - дурака поваляю.
А вы на кнопочку создать наведите в шапке и там увидите микроанимацию, ховер :)
А Hover-эффект — это как раз анимация элемента при наведении.
Спасибо, довольно исчерпывающая статья :)
А будет аж еще 2 части!
Опа, мой сайт в подборке, благодарю)
Еще можно добавить, что подобные анимации преследуют важную особенность пользовательского опыта, а именно "чем необычнее взаимодействие с интерфейсом, тем сложнее пользователю из этого взаимодействия выйти". Это хорошо работает на вовлечение и удержание при адекватном использовании синхронных, анимационных сценариев.
О, Артем.
Интересно вас/тебя видеть!
Выйти можно всегда нажав крестик, если пользователь потерялся, что происходит довольно часто по результатам A/B тестов (зависит от ЦА, конечно).
Ты, кстати, тестируешь варианты своих анимаций на конверсии?
Рад знакомству, это всегда взаимно!
Выйти можно всегда нажав крестик, если пользователь потерялся, что происходит довольно часто по результатам A/B тестов (зависит от ЦА, конечно).Я не про элементы интерфейса и модальные окна, а про яркое, впечатляющее решение, которое формирует нужный образ и заставляет пользователя "залипнуть" на изучении продуктов и услуг. Необычные взаимодействия и связанные с ними анимации, которые не затрудняют опыт, заставляют посетителя потратить больше времени в положительном ключе.
https://penzgidromash.com
https://bewegen.com/en
https://www.hyperframe.com
Но я, конечно же, говорю про случаи, когда цель сайта создать правильный образ, увеличить лояльность и выделиться из категории, а не собрать максимальную конверсию на высокочастотных запросах с сиюминутными разовыми продажами.
Ты, кстати, тестируешь варианты своих анимаций на конверсии?Сначала делаем техническое тестирование на топовых и средних конфигурациях, на этом этапе отсеивается довольно много интерактива, после оптимизации проект уходит на UX тестирование поведенческих и отношенческих метрик: время отклика, время на выполнение задания, успешность выполнения заданий, эмоциональный фидбек и, иногда, индекс удовлетворённости клиента.
Я воюю на твоей стороне и сама создаю необычные и исключительные решения, однако люди постоянно задают один и тот же вопрос, связанный с формулировкой ниже.
"Необычные взаимодействия и связанные с ними анимации, которые не затрудняют опыт, заставляют посетителя потратить больше времени в положительном ключе."
И единственным ответом на него может быть сравнение по показателям в лоб сайта без анимации с сайтом с анимацией. Причем, лучше всего - множественного.
Иначе - это просто слова и бизнес, который верит в цифры, не верит тебе (если только на стороне заказчика нет человека, который любит послушать басни). И это я говорю со всем уважением к тебе, к твоей работе, и зная то, что сама занимаюсь схожей деятельностью.
Отсюда, вопрос, есть ли у тебя примеры A/B тестов на конверсии с красочной анимацией/без (где "без" означает минимальное наличие анимации типа ховеров) одного и того же сайта?
—--
При этом, я понимаю твою маркетинговую модель. Ты продаешь искусство, а не "собрать максимальную конверсию на высокочастотных запросах с сиюминутными разовыми продажами", специально опошляя желание конверсий.
1) Но, постойте-ка, а разве не естественным желанием бизнеса является получить как можно больше конверсий?
2) Если ты останавливаешься на искусстве и почти не смотришь дальше (маркетинг, продажи) - окей, твое право, у тебя просто своя ниша :)
Имиджевая составляющая бизнеса — это нечто долгосрочное, сложно просчитываемое. С натяжкой LTV (время жизни клиента) можно считать одним из показателей эффективности имиджа.
У меня бывают разные проекты, которые зависят от типа бизнеса. В одном случае лояльность клиента практически невозможна, там все усилия направлены на конверсию. В другом — имидж играет важную роль и массовые разовые продажи не нужны (в основном премиум сегмент, где сайт это просто один из островков контента). В третьем случае нужен баланс между работой по повышению лояльности клиента и текущими продажами. Для каждого из них есть свой подход к разработке. Логично, что для интерфейса сервиса подбора соискателей с помощью ИИ мы не будем использовать сложных анимаций, 3D и WEBGL. Но чтобы получить лидов на спецпроект, который будет конвертировать в клиентов, вполне можем.
Отсюда, вопрос, есть ли у тебя примеры A/B тестов на конверсии с красочной анимацией/без (где "без" означает минимальное наличие анимации типа ховеров) одного и того же сайта?Что касается конкретно анимаций, то определяем внутри, как изменится отношение и вовлечение при отказе от каких-либо из них. Там, где наличие анимации критично для понимания, как работает продукт - оставляем (как пример, легендарный свайп в тиндере), где незначительно влияет - убираем. Анимация является частью дизайн-концепции, поэтому не тестируется отдельно от контекста (также как отдельно не тестируется шрифт, типографика, графика, фотостиль и цвет) Тестируется вся работа интерфейса. Но это у меня, скорее всего у тебя другой подход и если метод имеет для проекта экономическое значение, то почему бы и нет.
При этом, я понимаю твою маркетинговую модель. Ты продаешь искусство,Искусство, в моем понимании, это сделать проект каким я его вижу, на основании старого опыта, хотелок, личных амбиций и устоявшихся убеждений. Но это абсолютно тупиковое направление в эпоху, когда клиент разбирается в маркетинге и дизайне и нужна измеримая польза для бизнеса. Поэтому каждый проект, как и сервис начинается с аналитики и заканчивается тестированием с регулярными улучшениями. Все дизайн-решения приходят из позиции "я ничего не знаю о продукте и аудитории", это позволяет абстрагироваться от прежнего мира и генерировать новые идеи, которые представляют из себя компиляцию удачных и актуальных решений из смежных или не связных областей с щепоткой собственных экспериментов.
Разумеется, чаще всего я берусь только за то, что мне интересно: имиджевые проекты, продуктовые, корпоративные сайты и всегда избегаю высоко конверсионные лендинги, стандартные интернет-магазины на миллион позиций и проекты, в которых не сходимся химией с клиентом (сомнения, не вовлеченность, обесценивание).
Поняла твое мнение. Написала в личку.
А интересная ветка обсуждения получилась =)
Возможно ли в дальнейшем увидеть статью-интервью на подобные темы? =)
Подумаю, обсудим с Артемом.
Ну что же, пора сорвать покровы и рассказать о самом правдивом методе тестирования анимаций, который я на днях открыл и взял на вооружение)
Котики победят человечество
Пока смотрел уже забыл что и зачем я смотрю. Ждемс продолжения)
Сегодня :)
А вы тестируете анимацию, которую делаете?
Посмотрела список своих же статей. Так, кажется, этого нет. Ну что ж, добавлю в план :)
Минимальный список устройств:
- Несколько мобильных на iOS - 5, 7, 11, 13 айфоны с разными размерами экранов (как минимум, чаще - больше устройств)
- Несколько планшетов - iOS, Android пара послабее, пара современных, разные диагонали
- Несколько Android телефонов - от слабых Xiaomi до мощных Самсунгов
- Пара маков, в различных браузерах
- 3 ноутбука на Windows (1366x768, 1920x1080, 4k), 1 десктоп ПК с подключенными мониторами от 17" до 27".
Честный тест занимает от 3 часов.
Чаще - больше.
Прикольно) у вас все эти устройства или у сотрудников?
Почти всё есть у меня, но на крупные проекты я привлекаю партнеров-тестировщиков, у них своя фирма :)
Вам надо обратиться к художнику или фотографу. Гора техники в виде аргана и вы за работой)
Если вдруг художник или фотограф внезапно знают многое о юнит-тестах - может быть :)
Надеюсь, создатели анимаций из раздела "остановитесь" не наткнутся на эту статью 😅
Я сама себя пару раз так в список "остановитесь" вносила, после того как видела как лагает моя же анимация :) ну на то оно и тестирование, чтобы в результате тестов исправлять...
Художник увлекся рамой, да про картину забыл.
True story
А возможно ли отслеживать скорость подключения устройства клиента и "уменьшать" количество анимации и других "тяжёлых" элементов? Т.е. делать их адаптивными?Часто, пока посмотришь все красивости - забываешь что хотел))
Можно! Тоже тисну небольшую статейку на этот счет, ведь благодаря одной талантливой даме, которая, можно сказать, изменила интернет - это стало возможным :)
Очень интересные примеры, спасибо за статью!
Подписывайтесь, будет еще :)
Еще пример анимации на сайте как НЕ НАДО - vnukovo-outlet
Расскажите о вашем опыте подробнее.
Что конкретно не нравится?
Вроде не так много анимации, если смотреть с ПК.
Вы забываете, что одна из целей анимации — создать эмоции.
На каком-нибудь Яндекс.Маркете и VC это не нужно. Но в вашем разделе "Остановитесь" как раз эмоции. Подобная анимация развлекает и завлекает. Как правило, это разовые сайты промо-акций или портфолио, которые не предназначены для повседневного посещения, а должны подцепить с первых секунд. И если это оттолкнет 2-х человек ненавистников анимаций, то других 10 это зацепит.
ps: интерактив с червячком гениален
Я и забываю? Почитайте предыдущие статьи :)
У меня сайтов с вау-анимацией, которые вызывают у пользователей VC чаще всего дикое раздражение - полно. Я на них, можно сказать, специализируюсь.
Большое спасибо. Замечательный материал.
Комментарий удален модератором