Опыт взаимодействия посетителей с сайтом может быть удачным. И тогда владелец получает лояльных пользователей, рост продаж, трафик. Или неудачным, при котором растет показатель отказов, посещаемость падает, а сам проект становится убыточным. Одним из последних трендов в улучшении опыта взаимодействия с интерфейсами стала анимация. Показываем на примерах, как подвижные элементы улучшают юзабилити.
Рассмотрим семь примеров удачной и очень удачной реализации анимации в интерфейсах. Проанализируем, как можно улучшить юзабилити сайта с помощью движущихся объектов, а также как обращать внимание пользователей на важные детали.
1. Пролистываемый материал внутри вкладок
На примере слева текст исчезает при переключении, а справа – пролистывается.
- Крутое решение скрывает контент при изменении состояния.
- Очень крутое решение показывает, что одна вкладка является логическим продолжением другой.
Используйте пролистывание вместо переключения между вкладками. Решение подойдет и для выпадающего меню. Эту схему можно применять для анимирования положение информации. Добавьте жест смахивания, чтобы пользователь мог легко перемещаться между фрагментами контента.
2. Объединение содержимого карточки товара
Образец слева динамически переходит на новый экран с содержимым карточки. Справа – позволяет содержимому заполнить все пространство.
- Правильно – показываем содержимое карточки товара, сдвигая основной раздел вверх.
- Захватывающе – усиливаем связь между отдельными частями и раскрываем содержимое, заполняя экран.
Прием работает только при схожести объектов. Проанализируйте, есть ли между отдельными частями что-либо общее и соедините их вместе. Например, в InVision Studio объекты, дублирующиеся на двух расположенных рядом экранах, автоматически объединяются при движении перехода (Motion transition). Такой эффект интуитивно понятен.
3. Эффект каскада или водопад
Слева отображение пунктов меню анимировано эффектом затухания и скольжения. Справа используется тот же самый эффект, но каждый пункт показывается с миллисекундной задержкой.
- В первом случае меняется степень прозрачности и положение каждого из пунктов. Это хорошее решение.
- Во втором случае используются те же эффекты, но список раскрывается быстрее, а само движение выглядит динамичней. Это отличное решение.
Эффект каскада еще называют скольжением или водопадом. Достигается с помощью задержки появления каждого из пунктов или групп, объединенных по смыслу. Используйте одинаковое время задержки, чтобы добиться динамичности.
Этот прием не подходит для слишком мелких деталей, но отлично срабатывает на группах контента из 5-10 единиц. Максимальная рекомендуемая задержка – 20 миллисекунд.
4. Расширение пространства вокруг
Слева видно, как одна часть контента появляется поверх другой. Справа же окружающее пространство расширяется, будто раздвигая остальные блоки.
- Стандартное решение – анимировать блоки с оглядкой на контекст и окружение.
- Интерактивное – показывать не только контекст, но и изменение пространства, взаимосвязи.
Пусть каждая часть реагирует на изменение соседних: притягивает или отталкивает элементы вокруг. Такой ход создает ощущение интерактивности.
5. Контекстное меню
Слева – меню раскрывается снизу, справа – из той точки, на которую пользователь нажал.
- Достаточно качественный вариант – раскрывать пункты, отталкиваясь от соответствующего места на экране.
- Отличный вариант – список будто вырастает из точки, на которую нажимает пользователь.
6. Полностью анимированные кнопки
Слева состояния показывает текст: «Подождите», «Готово». Справа состояния отображаются внутри кнопки.
- Хороший вариант имитирует нажатие, а информацию выносит за ее границы.
- Отличный – показывает все нужное внутри кнопки не только текстом, но и движением.
Анимированная кнопка дает визуальную обратную связь о том, что происходит. Например, при установке программ отображается полоса загрузки. Ключевая мысль – подключить то пространство, с которым у пользователя уже есть контакт.
7. Фокусировка внимания на важном
На первом образце – важный значок выделили цветом, на втором – анимацией.
- Удачный дизайн фокусируется на главном и выделяет важные элементы цветом, расположением, призывая пользователя кликнуть.
- Очень удачный дизайн подключает анимацию, чтобы привлечь внимание пользователя наверняка.
Если нужно привлечь внимание посетителей сайта к какому-либо элементу, попробуйте добавить эффект, имитирующий нужное действие. Такой прием нередко используется для callbacker. Чем важнее контент, тем сильнее должна быть анимация. Но важно не отпугнуть чересчур навязчивым движением. Отличный пример реализации – мигающий курсор в строке поиска: просто, понятно, ненавязчиво.
Анимация способна добавить сайту индивидуальности, а также помочь пользователю сориентироваться и выделить важное. Но нужно помнить о главном принципе использования движущихся деталей – умеренности.