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