UXPUB 🇺🇦 Дизайн-спільнота

Cover image for Анимация интерфейсов. Микровзаимодействия для макрорезультата
Редакція
Редакція

Опубліковано • Оновлено

Анимация интерфейсов. Микровзаимодействия для макрорезультата

Микровзаимодействие - один из ключевых моментов в UI/UX-дизайне. Это, наверное, лучшее доказательство того, что внимание к мелким деталям может дать большой и мощный результат. Большинство книг и статей по UX/UI-дизайну несут одну и ту же базовую идею: то, что получается по окончании процесса дизайна, должно быть не только красивым, но и быть удобным, приносить пользу. В предыдущих постах мы также поддерживаем идею, что UI/UX-дизайнеры не просто создают произведение искусства: они делают продукт, который решает проблему целевой аудитории, желательно более быстрым и простым путем. Мощная основа из досконально продуманных микровзаимодействий может придать дизайну такие ключевые характеристики успешного продукта, как юзабилити, привлекательность и функциональность.

Суть микровзаимодействия

По сути, микровзаимодействие - это один отдельный случай взаимодействия пользователя с продуктом для выполнения конкретной задачи. Например, когда вы нажимаете кнопку like (неважно, как она выглядит) и видите, что ваш лайк отразился в счетчике (изменилось число, кнопка изменила свой цвет или стала неактивна, текст на кнопке отражает, что действие выполнено, текст под кнопкой или другой интерактивный элемент проинформировал вас, что вы в списке тех, кто лайкнул, и т.д.), это тоже пример микровзаимодействия. Когда вы заполняете текстовое поле поисковым запросом и отправляете его в систему, это еще один пример. Микровзаимодействия случаются, когда мы зафрендили кого-то в соцсети или наоборот отписались, когда оцениваем пост блога или настраиваем таймер - сотни действий, в большинстве которых мы не сильно ломаем голову, какие шаги приведут к нужному результату. В целом, несложно понять, что поведение пользователя в интерфейсе включает массу микровзаимодействий, и это и есть те волшебные зерна, которые могут прорасти в прекрасные показатели юзабилити, эффективности и популярности продукта, если о них как следует позаботиться. Возможно, самым глубокопрофессиональным руководством по созданию микровзаимодействий, их идее, структуре, механизмам работы, видам, функциям и роли в эффективонм UI-дизайне, является книга “Microinteractions” Дэна Сэффера. Книга очень рекомендуется к изучению людьми, работающими в сфере UI/UX-дизайне, так как она дает гораздо лучшее понимание дизайн-решений, ориентированных на пользователя. Микровзаимодействия в большинстве случаев даже не фиксируются во внимании пользователя - и это, на самом деле, одна из важнейших задач дизайнера: сделать их максимально естественными, чистыми и быстрыми. Есть множество способов и методов дизайна, как задействовать и улучшить микровзаимодействия. Анимация интерфейса - одно из таких средств. Мы уже начали эту тему в более раннем посте Interface Animation. The Force of Motion, основанном на общих идеях и целях использования анимации на основе практического опыта в дизайне проектов и концептов Tubik Studio. Там мы упомянули, что использование анимаций и улучшение микровзаимодействий похоже на здоровье: люди не замечают, когда оно в порядке, но понимают их важность, когда что-то идет не так.Микровзаимодействия, естесственным образом поддерживаемые движением, также сложно заметить пользователем, до того момента, пока они не сталкиваются с отсутствием таких микровзаимодействий. Сегодня мы бы хотели предоставить вам более детальные размышления и примеры этого типа анимаций интерфейса.

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

Кнопки

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

Анимация “потяните-вниз-чтобы-обновить”

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

Анимация State-of-process

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

Информация для размышления на тему анимации для микровзаимодействий

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

Плеер Juicy от Валентина Хенкина Создавая решения для эффективных взаимодействий, дизайнер должен действовать на пересечении дизайна, психологии, программирования, иногда лингвистики и других сфер науки и человеческой деятельности. Тщательный анализ целевой аудитории, тестирование идей и концептов микровзаимодействий обычно открывают дверь к более высокой юзабилити. Мудро используемая в интерфейсах анимация может стать одним из способов существенно ускорить взаимодействие, сделать его более естественным, приятным в использовании и более стильным в дизайне.


Перевод статьи Tubik Studio

Найновіші коментарі (0)