Усильте пользовательский опыт при помощи анимированных переходов

36
 

Вы читаете перевод статьи Дейви ХэйзераEnhance Your User Experience with Animated Transitions”. Над переводом работали: Ольга Жолудова и Ринат Шайхутдинов. При поддержке iSpring.

iSpring — решение для запуска дистанционного обучения.

Интересуетесь свежими статьями на эту тему? Вступайте в группу UxJournal на Facebook


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

Хорошая анимация невидима. Ты смотришь на нее — и не замечаешь, что это анимация. — Паскаль Д’Сильва


Анимации и пользовательский опыт

Чтобы дать определение хорошему переходу, необходимо понять связь между анимациями и пользовательским опытом.

Анимации поддерживают контекст

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

Анимации дают обратную связь

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

Несколько анимаций помогают нам лучше понять процесс фотографирования.

Анимации дают фокус

Когда интерфейс состоит из множества элементов, иногда бывает необходимо обратить внимание пользователя на какой-то конкретный элемент на экране. С помощью анимаций дизайнер может экспериментировать с положением, размером и яркостью элемента, чтобы привлечь к нему внимание пользователя. Есть еще одна фишка: сделать отображение анимаций асинхронным. Это привлечет особое внимание к тому элементу, который “анимируется” последним.

Когда мы отключаем анимации, должно казаться, что что-то в интерфейсе “сломалось”. Если этого не происходит, возможно, анимации были излишними. — Майкл Виллар

Анимации не спасут процесс взаимодействия

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

Анимации в проектировании взаимодействия

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

Смягчение

Компьютерные анимации по природе своей линейны, а вот анимации, созданные с применением эффекта смягчения (easing), воспринимаются как более приятные и натуральные. Исследователи Nokia обнаружили: если анимация начинается медленно и ускоряется ближе к концу, людям кажется, что продукт работает медленно. Это происходит потому, что люди получают обратную связь не так быстро, как они того ожидают.

Обратная связь от продукта должна быть максимально быстрой, чтобы создать впечатление, что продукт быстрый и отзывчивый, даже если процесс взаимодействия замедляется ближе к концу. Людям проще ждать завершения процесса, когда они видят, что большая часть пути уже пройдена. Чем быстрее вы покажете прогресс, тем проще вам будет “зацепить” пользователя. Только убедитесь, что реальное время загрузки находится в рамках разумного, и избегайте подобных ситуаций:


Создатель диалога копирования файлов в Windows едет в гости к друзьям: “Я выезжаю из города, так что через 15 минут буду у вас. Вообще-то скорее даже дней через 6. А, нет, подожди, через 3 секунды!” Источник: xkcd.com

Примеры клевых анимированных переходов

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

Календарь на iOS

Чтобы убедиться, что пользователь понимает, на каком уровне “времени” он находится, создатели приложения воспользовались анимациями приближения и отдаления объекта (zoom и scale), чтобы обеспечить контекст при перходе между экранами. Анимация приближения (zoom) имитирует невидимую систему слоев, где годы расположены в нижнем слое, а месяца — в верхнем.

Использование анимации приближения (zoom) для поддержания контекста.

Facebook на iOS

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

Понятный процесс взаимодействия с элементом, на который вы нажали.

Iconjar

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

“Растущие” анимации помогают нам определить, что откуда взялось.

Заключение

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

В завершение, предлагаем вам несколько вдохновляющих ссылок на классные переходы и анимации:

Эта статья написана на основании доклада на голландском языке “Переходы в пользовательских интерфейсах”, который я писал для школьного проекта. Спасибо Винсу из Yummygum за помощь с картинками и переводом на английский.

Ресурсы:

  1. Nokia Research Center, & VTT Technical Research Centre of Finland. (April 10, 2010). Animated UI Transitions and Perception of Time — a User Study on Animated Effects on a Mobile Screen. http://dmrussell.net/ CHI2010/docs/p1339.pdf
  2. Stern, M. User Interface Design for iOS 7 Apps [Video]. https://developer.apple.com/tech-talks/videos/?id=2
  3. D’Silva, P. Transitional Interfaces. https://medium.com/@pasql/transitional-interfaces-926eb80d64e3
  4. Villar, M. Improve the payment experience with animations. https://medium.com/@michaelvillar/improve-the-payment-experience-with-animations-3d1b0a9b810e
  5. D’Silva, P. (November 18, 2013). Pasquale D’Silva — Designing with animation [Video]. https://www.youtube.com/watch?v=TMe0WnkF1Lc


Мобильное приложение «Заметки о психике» | Mental Notes

Подкидывает идеи, как привлечь, удержать и направить внимание пользователя.

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

Скачать приложение в Appstore →

Посты в категории UX-дизайн

40+ способов сделать опросы точнее: чек-лист для ux-исследователей

Ольга Жолудова

18 октября 2019

Посты в категории UX-дизайн

Ген UX/UI дизайнера: 5 жизненных принципов от продуктового дизайнера Atlassian

Ринат Шайхутдинов

18 июня 2019

Посты в категории UX-дизайн

100 вопросов для UX-анализа

Ольга Жолудова

22 апреля 2019