Анимированные переходы в мобильных приложениях

Анимация в мобильных приложениях

Это перевод статьи Animated Transitions in Mobile Apps, автор Nick Babich.

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

Анимация — важный элемент пользовательского опыта (UX — User experience — на мой взгляд, нет удачного перевода этого понятия на русский язык, поэтому дальше буду использовать оригинальное англоязычное сокращение). Когда дело доходит до переходов в мобильных приложениях, есть много тонких приемов, которые вы можете применять, используя анимацию. Отправить сообщение, открыть «Настройки», установить флажок, перейти на другую страницу — все это точки перехода. И анимация является отличным способом усилить воздействие на пользователя.

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

Дайте обратную связь

Когда пользователи совершают какое-либо действие, они ожидают увидеть обратную реакцию — система должна дать понять, что она получила запрос и работает над ним. Вот несколько случаев, когда анимированные отклики могут помочь пользователю:

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


Уведомление пользователей о результатах их действий. Изображение: Colin Garven

Обновляем содержимое на странице, потянув вниз. Визуальная обратная связь в формате индикатора загрузки помогает пользователям понять, что система работает по их запросу.


Плавная анимация помогает пользователям понять, что происходит. Изображение: Ramotion

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


Анимация может поддерживать интерес пользователя до полной загрузки приложения. Изображение: UI8

Соедините разные этапы в многоэтапном процессе

Иногда пользователям необходимо выполнить ряд шагов, чтобы совершить действие. И должно быть понятно, что эти шаги связаны друг с другом. Анимация может помочь вам соединить все этапы между собой, чтобы создать единый процесс.

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


Изображение: Jakub Antalík

Анимация может помочь дизайнерам выстроить поэтапное представление информации. Это делает знакомство с интерфейсом более простым за счет сокращения объема информации, которую пользователь в данный момент видит на экране. Вот два отличных примера использования поэтапного представления информации для отображения значимых элементов:


Изображение: Ramotion


Изображение: Anton Skvortsov

Презентация новых элементов

Когда мы вводим новый элемент на странице, мы стараемся сфокусировать на нем внимание пользователей и помочь им ответить на вопрос «Почему я вижу новый объект?». Анимация помогает вам определять взаимосвязи между объектами и иерархию при появлении новых элементов.


Анимация может показать, откуда появляются новые объекты. Изображение: Virgil Pana

Дайте пользователю ощущение пространственной ориентации

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

Мы можем использовать анимацию как руководство пользователя. Анимация помогает объяснить, как информационные потоки переходят из одного состояния в другое, какая между ними связь. Это не дает пользователям потеряться, предоставляя  информацию о том, на каком они сейчас этапе.


Ориентационная анимация позволяет узнать, где вы сейчас находитесь по отношению к тому, откуда пришли. Изображение: Jae-seong, Jeong

В следующем примере плавающая кнопка действия (FAB — floating action button) преобразуется в заголовок и разъясняет пользователю, как эти два объекта связаны друг с другом.


Анимация может помочь вам выстроить взаимосвязи между элементами. Изображение: Anish Chandran

Минимизировать когнитивную нагрузку

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

Цель дизайнера должна заключаться в создании интерфейса, который прост в использовании. Анимация при правильном использовании снижает объем усилий, необходимых для выполнения задачи.

Практически в любом приложении пользователи должны заполнять какие-то формы. Многие из них имеют текстовые заполнители в качестве названий для полей. И когда пользователи нажимают на такое поле, ярлык исчезает. В результате становится трудно понять, какие данные нужно вводить. Плавающая метка помогает пользователям сохранять понимание и обеспечивает удобство взаимодействия с длинными формами.


Когда дело доходит до ввода данных, не полагайтесь на память пользователя. Пусть вся важная информация будет на виду. Изображение: MDS

Пользователи должны понимать функциональные изменения

Функциональное изменение происходит, когда элемент меняет свою функцию после взаимодействия. Например, когда пользователь нажимает на кнопку, ее значение меняется. Анимация помогает пользователям ответить на вопрос «Каково значение этого элемента в данный момент?»

Одним из распространенных примеров отображения функциональных изменений, который можно увидеть во многих мобильных интерфейсах, является переключение. Анимация помогает пользователям понять, в каком состоянии сейчас находится элемент: включенном или выключенном.

Кнопка двигается при нажатии, чтобы пользователи могли видеть изменения. Изображение: Jurre Houtkamp
В некоторых случаях функциональное изменение одного элемента приводит к изменению всего внешнего вида. Например, гамбургерное меню, которое меняется на «X» и изменяет отображение на экране.

Дайте пользователям понять, что объект изменил свое назначение. Изображение: Tamas Kojo

Заключение

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

Спасибо!

Оставляйте комментарии, вопросы и пожелания. Какие статьи вы хотели бы увидеть в нашем блоге? Какие темы вам интересны? Если нужно перевести какой-то конкретный материал, то пишите, скидывайте ссылки.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *