Веб-анимации на сайтах. Часть 3
В этой статье — динамическое меню, навигация, скроллтеллинг. Первая часть — анимации загрузки, курсора и типографики. Вторая — приветствия, прокрутки и изображений.
Как и в предыдущих статьях, разделила каждый вид анимации на 3 группы:
- Хорошая и красивая.
- Можно, но осторожно.
- Астанавитесь!
Динамическое меню
Интерактивное меню — один из базовых элементов любого дизайна. Пользователи интуитивно знают, что будет, если нажать на “3 черточки” и часто пользуются этой кнопкой. Поэтому меню должно быть легко найти и приятно использовать.
Хорошо
Понятная миниатюрная иконка в углу с приятной анимацией при клике и плавное меню.
Можно, но осторожно.
Яркая анимация, которая забирает на себя все внимание, может стать акцентом, а может испортить интерфейс.
Остановитесь.
Сумасшедшая анимация меню, которая прыгает, летает и мигает. Долго и дорого создавать, а результат — пользователь быстро устает. Осторожно, видео со звуком :)
Навигация/иконки (анимация обратной связи)
Мелочи важны. Внимание к деталям создаёт у пользователя приятные ассоциации с вашим продуктом. Среди множества равных конкурентов клиент часто выбирает того, у кого приятнее нажимаются кнопки.
Хорошо
Плавные анимированные иконки указывают
- на что нажать
- что нажато или включено
- какое действие выполнено
Можно, но осторожно
В анимации иконок важно не переборщить.
Остановитесь
В данном случае плохая анимация — это её отсутствие. При наведении и клике ничего не происходит. Или что-то происходит, но остаётся неясно, сделано действие или нет.
Скроллтеллинг
Может стать отличной фишкой вашего сайта и вывести эмоциональную связь с пользователем на новый уровень. Скроллтелинг — история, которую вы рассказываете на протяжении всего времени, пока пользователь прокручивает сайт. Главное — непрерывная связь повествования, в которой присутствует три главных элемента:
- Главный герой — это может быть человек, животное, геометрическая фигура и т. д.
- Проблема — то, что не дает покоя главному герою или то, что он хочет вам показать/рассказать.
- Кульминация — решение проблемы благодаря вашему бренду. В этот момент пользователь проявляет эмпатию к герою, иногда ассоциирует его проблемы со своими и видит решение, которое вы с главным героем ему показали.
Подходит очень узкому кругу продуктов, сложна в реализации. Но если получится, даст вам невероятный буст в конкурентной борьбе.
Хорошо
Красивая короткая история, которая подводит пользователя к пониманию главной задумки и дарит положительные эмоции.
Можно, но осторожно
Длинная история с увлекательной анимацией. Пользователь может устать скроллить и не дойти до конца. Такие сайты могут тормозить, что испортит все впечатление.
Остановитесь
Некоторые задумки настолько сложные, долгие в загрузке и навигации, что больше похожи на полнометражные фильмы. Много текста, не всякий пользователь успевает уловить суть. Досмотрят немногие.
Собственно, на этом все
С вами была Лена, UX/UI/Motion-дизайнер, которая использует хорошую анимацию в своих работах.
- Подписывайтесь, вступайте в сообщество Юзабилити, в планах — много интересных материалов.
- Присоединяйтесь к авторам сообщества. За хорошие статьи по теме Юзабилити я предлагаю 4000-10000 рублей за материал. Свяжитесь со мной, предложите темы, чтобы начать зарабатывать.
- Всегда рада нетворкингу с UI/Motion-дизайнерами и Front-end — вы знаете где меня найти.
Вместе с предыдущими частями, это самый полный список анимаций, который я могу выделить. Если что-то пропустила — пишите в комментариях.
Будет интересно, если вы скинете сайты с анимациями, которые вам нравятся или теми, от которых хочется помыть глаза святой водой.
Спасибо за все части. Прочитала с удовольствием. Было интересно узнать о дизайне, юзабилити больше. Интересны статьи о тестировании. Работаю сеошником, делаю юзабилити-аудиты тоже. Но именно А/Б-тестирование дизайна сайта не проводила ни разу)
Спасибо за ваше мнение :) Про АБ тоже будут статьи в скором времени!
Мне кажется сложная анимация в кейсе с операцией по спасению в конце уместна вполне. Сайт явно сделан не для сбора лидов и конверсии, скорее для агитации молодых ребят, вроде такая интерактивная-документалка. Отлично передает силу стихии, с которой столкнулись пилоты при спасении людей. Так что хорошо, как по мне. Кстати, он же вроде SOTM на Awwwards получил, оценка не заслужена, получается? :)
Как интерактивная документалка - имеет место быть, как сайт, который что-то продает - ни в коем случае :)
Мои статьи, в основном, про то, что не стоит делать на своем сайте, если ты точно не знаешь зачем оно надо, как это оптимизировать и что это точно приведет к росту конверсий.
Awwwards вообще часто оторван от реальности, то есть применение увиденных там рефов в нашей с вами реальной жизни, где все еще есть огромное количество откровенно слабых устройств - приводит к откровенно печальным результатам.
Прочитал статьи на одном дыхании, спасибо!)
Очень понравилось обилие примеров. Видно, что работа проделана большая, открыл для себя много интересных сайтов)
Мне кажется, эти статья была полезна и вам. Открыли для себя что-нибудь новое, пока подбирали сайты для статьи?)
Спасибо!
Что восхищаться надо в меру, а реализовывать то, что будет не только красиво, но и юзабельно :)
Скажите эти анимации делаются в афтер эффектс?