Анализ UI-анимации: бесшовный переход между экранами
Вы читаете перевод статьи Дейви Хэйзера “Enhance Your User Experience with Animated Transitions”. Над переводом работали: Ольга Жолудова и Анастасия Свеженцева. При поддержке iSpring.
iSpring — решение для запуска дистанционного обучения.
Интересуетесь свежими статьями по дизайну? Вступайте в группу на Facebook | Instagram, Telegram
Новое. Журнал для digital-дизайнеров. Посмотреть, что за зверь.
Сегодня создатели цифровых продуктов все чаще ставят перед собой цель: обеспечить пользователям комфортный опыт взаимодействия с интерфейсом. Современные устройства и программы поддерживают сложные переходы между элементами на экране, и мы, как дизайнеры, должны использовать это для достижения лучшего пользовательского опыта. Но что же такое “хороший переход”?
Хорошая анимация невидима. Ты смотришь на нее — и не замечаешь, что это анимация. — Паскаль Д’Сильва
Анимации и пользовательский опыт
Чтобы дать определение хорошему переходу, необходимо понять связь между анимациями и пользовательским опытом.
Анимации поддерживают контекст
В наше время цифровые продукты позволяют нам делать невероятные вещи: вызвать такси прямо с запястья или приготовить блюдо, вообще не задумываясь о процессе. А это значит, что роль дизайнера интерфейса является ключевой в создании успешного продукта. Со всеми этими сложными взаимодействиями и возможностями, пользователь может быстро потерять контекст и ориентацию в продукте. Когда элементы на экране вдруг резко перемещаются/пропадают, пользователь перестает понимать интерфейс. Когда в фильме кто-то попадает в машину времени, мы не видим ничего необычного в анимациях и звуковых эффектах. Их использование в интерфейсе воспринимается так же естественно.
Анимации дают обратную связь
Анимации обеспечивают пользователю ценный фидбэк, не перегружая его ненужной информацией и не загромождая интерфейс. Отличный пример — приложение Камера на iOS при фокусировке. Видоискатель плавно появляется и сужается по мере установления фокуса, картинка дважды “мигает” и видоискатель пропадает, давая нам понять, что программа готова сделать фото. Подобная анимация предоставляет пользователю очень конкретную информацию, не перегружая его.
Анимации дают фокус
Когда интерфейс состоит из множества элементов, иногда бывает необходимо обратить внимание пользователя на какой-то конкретный элемент на экране. С помощью анимаций дизайнер может экспериментировать с положением, размером и яркостью элемента, чтобы привлечь к нему внимание пользователя. Есть еще одна фишка: сделать отображение анимаций асинхронным. Это привлечет особое внимание к тому элементу, который “анимируется” последним.
Когда мы отключаем анимации, должно казаться, что что-то в интерфейсе “сломалось”. Если этого не происходит, возможно, анимации были излишними. — Майкл Виллар
Анимации не спасут процесс взаимодействия
Анимации совершенно точно способны улучшить ощущения пользователя от работы с интерфейсом, но это лишь одна часть всего процесса взаимодействия. Анимации помогут пользователю понять путь, по которому он идет, а ваша задача — убедиться, что этот путь ведет в правильное место, которое соответствует ожиданиям пользователя.
Анимации в проектировании взаимодействия
Анимации могут улучшить пользовательский опыт вашего цифрового продукта, но не каждая анимация вам подойдет. В 2010 году компания Nokia проводила исследование, в ходе которого выяснилось, что анимированные переходы вызывают у пользователей смешанные чувства. Исследователи поэкспериментировали с разными скоростями и видами анимаций, и им удалось выделить идеальную анимацию.
Смягчение
Компьютерные анимации по природе своей линейны, а вот анимации, созданные с применением эффекта смягчения (easing), воспринимаются как более приятные и натуральные. Исследователи Nokia обнаружили: если анимация начинается медленно и ускоряется ближе к концу, людям кажется, что продукт работает медленно. Это происходит потому, что люди получают обратную связь не так быстро, как они того ожидают.
Обратная связь от продукта должна быть максимально быстрой, чтобы создать впечатление, что продукт быстрый и отзывчивый, даже если процесс взаимодействия замедляется ближе к концу. Людям проще ждать завершения процесса, когда они видят, что большая часть пути уже пройдена. Чем быстрее вы покажете прогресс, тем проще вам будет “зацепить” пользователя. Только убедитесь, что реальное время загрузки находится в рамках разумного, и избегайте подобных ситуаций:
Примеры клевых анимированных переходов
Мы собрали несколько примеров анимаций, при помощи которых дизайнерам удалось усилить пользовательский опыт, не раздражая и не перегружая пользователей.
Календарь на iOS
Чтобы убедиться, что пользователь понимает, на каком уровне “времени” он находится, создатели приложения воспользовались анимациями приближения и отдаления объекта (zoom и scale), чтобы обеспечить контекст при перходе между экранами. Анимация приближения (zoom) имитирует невидимую систему слоев, где годы расположены в нижнем слое, а месяца — в верхнем.
Facebook на iOS
Еще один прекрасный пример того, как анимации улучшают переходы — это процесс открытия/закрытия фотографий в приложении Facebook. Нажмите на фотографию, и она отобразится на весь экран. Благодаря анимированному переходу, уменьшенное фото, на которое вы изначально нажали, остается на экране и начинает увеличиваться у вас на глазах, а интерфейс вокруг фото темнеет. Если вы закроете фотографию, она вернется на свое место в интерфейсе. Благодаря этим небольшим анимациям, очень просто отследить, что сейчас происходит в интерфейсе.
Iconjar
Кто сказал, что анимации могут существовать только на мобильных устройствах? К примеру, на сайте Iconjar выпадающее меню “выпадает” очень стильно и плавно. Поскольку меню “вырастает” из ссылки, пользователю становится понятно, что это обратная связь от его нажатия.
Заключение
Анимации — это не только эстетически приятные фишечки, они также способны усиливать опыт взаимодействия. Очень важно найти баланс между весельем и функциональностью, а также убедиться, что опыт взаимодействия с программой хорош сам по себе, безо всяких анимаций. Хороший переход ненавязчив, усиливает пользовательский опыт и, в то же время, добавляет процессу легкости и веселья.
В завершение, предлагаем вам несколько вдохновляющих ссылок на классные переходы и анимации:
- Gif UX в Instagram
- Capptivate
- UX Archive — Animated
Эта статья написана на основании доклада на голландском языке “Переходы в пользовательских интерфейсах”, который я писал для школьного проекта. Спасибо Винсу из Yummygum за помощь с картинками и переводом на английский.
Ресурсы:
- 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
- Stern, M. User Interface Design for iOS 7 Apps [Video]. https://developer.apple.com/tech-talks/videos/?id=2
- D’Silva, P. Transitional Interfaces. https://medium.com/@pasql/transitional-interfaces-926eb80d64e3
- Villar, M. Improve the payment experience with animations. https://medium.com/@michaelvillar/improve-the-payment-experience-with-animations-3d1b0a9b810e
- D’Silva, P. (November 18, 2013). Pasquale D’Silva — Designing with animation [Video]. https://www.youtube.com/watch?v=TMe0WnkF1Lc
Если вам понравилась статья и перевод, дайте нам знать — нажмите кнопку Recommend
А если у вас есть на примете какая-нибудь классная статья по UX и не только — скиньте нам ссылку, и мы будем рады над ней поработать.
Нас можно найти в Facebook: Nancy Pong и Ринат Шайхутдинов.
Мобильное приложение «Заметки о психике» | Mental Notes
Подкидывает идеи как привлечь, удержать и направить внимание пользователя
Mental notes — это колода из 53 карточек с описанием психофизиологических моделей поведения людей, которые лежат в основе принципов веб-дизайна. Они помогают дизайнерам, проектировщикам лучше понять поведение пользователей и найти эффективные решения при создании дизайна интерфейсов.
