Сегодня уже просто невозможно представить сайт без дополнительных эффектов, движения картинок и увеличения кнопок или надписей. Современный сайт разительно отличается от тех, которые мы видели 10 лет назад, ведь раньше были только гифки и мигающие изображения. Сейчас это полноценная анимация всех страниц сайта, которая не просто украшает, а улучшает юзабилити и качественно преподносит визуальную составляющую.
Анимацию можно разделить на три вида:
Анимированные объекты – самые простые варианты анимации. Это могут быть кнопки призыва к действию, курсор, который двигается, кнопка со стрелкой «вверх-вниз».
Анимированные изображения – это рекламные баннеры в движении.
Обычно, такие баннеры ведут на внутренние страницы сайта, перенаправляют в блог или в карточку товара. Также, это может быть слайд-шоу из нескольких фото.
Анимированный текст – это анимированный заголовок или текст в виде бегущей строки.
Это эффект используют для первоочередного привлечения внимания посетителей сайта, так как элементы, которые движутся человек распознает в первую очередь.
Для чего используют анимацию
Даже когда время загрузки невелико, забавная анимация способна добавить ожиданию развлекательный момент
Автор: Thomas Bogner
Стоит отметить, что не все страницы сайта могут загружаться одинаково быстро. Страницы, которые содержать большое количество информации и видео могут загружаться дольше. И в этот момент нам на помощь приходит анимация, ведь она может отвлечь человека от времени ожидания. Когда при загрузке страницы человек видит статичный экран, то создается впечатление, что загрузка длиться долго, а вот с анимацией есть ощущение, что загрузка происходит быстрее, так как есть движение на экране. С анимацией пользователю не скучно ждать и он понимает, что на сайте идет загрузка информации – сайт не завис.
Анимацию стоит использовать для ведения пользователя по пошаговой схеме действий, когда для загрузки данных каждой следующей страницы нужно время. При просмотре анимации у пользователя появляется интерес, и он меньше обращает внимание на длительность загрузки.
Как использовать анимацию в дизайне сайта
1. Всего должно быть в меру
Это главное правило, которое поможет использовать анимацию для создания качественного сайта. Анимация может помогать отвлечь внимание от загрузки элементов, но также может и усложнить ситуация, перенасытив страницу.
Переизбыток анимации снижает скорость загрузки страниц, а пользователь не хочет ждать. Тут стоить склоняться к меньшему количеству эффектов – это улучшит ситуацию. Для анализа скорости загрузки можно использовать онлайн приложения, но понятно, чем больше анимации, тем сложнее и дольше будет проходить загрузка.
2. Анимировать все нельзя остановить
Если перед Вами стоит задача создать анимацию текста, иллюстрации и призыва к действию, то в движение должно быть что-то одно — самое важное. Так пользователь поймет, куда ему нужно дальше идти.
А, например, вариант с мигающим изображением, рекламными баннерами, и анимированными историями – это перебор для одного сайта. Стоит ограничиться одним или двумя элементами, чтобы привлечь пользователя. А если анимировать все вместе, то пользователь запутается и просто покинет сайт.
3. Продолжительность анимации
Рекомендованное время для анимации это всего несколько секунд, не стоит растягивать его. Помните, посетитель сайта должен серфить, а не смотреть анимационные мультфильмы. Также стоит убедиться, что нет обратного эффекта и время анимации не затянуто. Это важно для тех элементов, с которыми пользователь будет взаимодействовать часто. В начале использования, длительна анимация может понравиться пользователю, но при частом взаимодействии станет раздражать.
Основным аспектом для подбора и вариаций использования анимации на сайте является целевая аудитория. Для молодежи анимированные эффекты и креатив будут интересны, а вот старшее поколение скорее будет ждать простоту и экономию времени на покупках, например. Если ваша ЦА — старшее поколение, то идеально использовать анимации при ожидании загрузки. Это как проявление заботы о пользователе, вы просто не даете ему скучать. Также полезно использовать анимацию на объектах, которые приведут посетителя к конечной цели.