Веб-анимации на сайтах. Часть 3

В этой статье — динамическое меню, навигация, скроллтеллинг. Первая часть — анимации загрузки, курсора и типографики. Вторая — приветствия, прокрутки и изображений.

Как и в предыдущих статьях, разделила каждый вид анимации на 3 группы:

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

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

Хорошо

Понятная миниатюрная иконка в углу с приятной анимацией при клике и плавное меню.

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

Яркая анимация, которая забирает на себя все внимание, может стать акцентом, а может испортить интерфейс.

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

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

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

Хорошо

Плавные анимированные иконки указывают

• на что нажать
• что нажато или включено
  
• какое действие выполнено
  

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

В анимации иконок важно не переборщить.

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

В данном случае плохая анимация — это её отсутствие. При наведении и клике ничего не происходит. Или что-то происходит, но остаётся неясно, сделано действие или нет.

Может стать отличной фишкой вашего сайта и вывести эмоциональную связь с пользователем на новый уровень. Скроллтелинг — история, которую вы рассказываете на протяжении всего времени, пока пользователь прокручивает сайт. Главное — непрерывная связь повествования, в которой присутствует три главных элемента:

• Главный герой — это может быть человек, животное, геометрическая фигура и т. д.
• Проблема — то, что не дает покоя главному герою или то, что он хочет вам показать/рассказать.
• Кульминация — решение проблемы благодаря вашему бренду. В этот момент пользователь проявляет эмпатию к герою, иногда ассоциирует его проблемы со своими и видит решение, которое вы с главным героем ему показали.

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

Хорошо

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

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

Длинная история с увлекательной анимацией. Пользователь может устать скроллить и не дойти до конца. Такие сайты могут тормозить, что испортит все впечатление.

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

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

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

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

Вместе с предыдущими частями, это самый полный список анимаций, который я могу выделить. Если что-то пропустила — пишите в комментариях.

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