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

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

GIF — Портретный режим против ландшафтного (Сергей Валюх)
GIF — Портретный режим против ландшафтного (Сергей Валюх)

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

По сути, микровзаимодействие — это один отдельный случай взаимодействия пользователя с продуктом для выполнения конкретной задачи. Например, когда вы нажимаете кнопку like (неважно, как она выглядит) и видите, что ваш лайк отразился в счетчике (изменилось число, кнопка изменила свой цвет или стала неактивна, текст на кнопке отражает, что действие выполнено, текст под кнопкой или другой интерактивный элемент проинформировал вас, что вы в списке тех, кто лайкнул, и т. д.), это тоже пример микровзаимодействия. Когда вы заполняете текстовое поле поисковым запросом и отправляете его в систему, это еще один пример. Микровзаимодействия случаются, когда мы зафрендили кого-то в соцсети или наоборот отписались, когда оцениваем пост блога или настраиваем таймер — сотни действий, в большинстве которых мы не сильно ломаем голову, какие шаги приведут к нужному результату.

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

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

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

Мы уже начали эту тему в более раннем посте Interface Animation. The Force of Motion, основанном на общих идеях и целях использования анимации на основе практического опыта в дизайне проектов и концептов Tubik Studio. Там мы упомянули, что использование анимаций и улучшение микровзаимодействий похоже на здоровье: люди не замечают, когда оно в порядке, но понимают их важность, когда что-то идет не так. Микровзаимодействия, естесственным образом поддерживаемые движением, также сложно заметить пользователем, до того момента, пока они не сталкиваются с отсутствием таких микровзаимодействий.

Сегодня мы бы хотели предоставить вам более детальные размышления и примеры этого типа анимаций интерфейса.

GIF-иллюстрация Tap Bar Concept от Sergey Valiukh
GIF-иллюстрация Tap Bar Concept от Sergey Valiukh

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

Кнопки

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

Взаимодействия в приложении под iPad от Sergey Valiukh
Взаимодействия в приложении под iPad от Sergey Valiukh

Концепт UI-навигации от Людмилы Шевченко
Концепт UI-навигации от Людмилы Шевченко
GIF-демо взаимодействий на панели навигации от Сергея Валюха
GIF-демо взаимодействий на панели навигации от Сергея Валюха
Анимация гамбургер-меню от Валентина Хенкина
Анимация гамбургер-меню от Валентина Хенкина
GIF-демо кнопки Add от Сергея Валюха
GIF-демо кнопки Add от Сергея Валюха

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

Этот тип анимации для интерфейсов является самым популярным сейчас, и пользователи часто просят ее реализовать на первых порах UI-дизайна для мобильных приложений.

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

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

Потяните для обновления от Кирилла
Потяните для обновления от Кирилла

GIF-демо “потяните вниз”  — Космический корабль от Тамар
GIF-демо «потяните вниз»  — Космический корабль от Тамар
GIF-демо “потяни вниз” —Песочные часы by от Сергея Валюха
GIF-демо «потяни вниз» —Песочные часы by от Сергея Валюха

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

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

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

Прелоадер от Кирилла
Прелоадер от Кирилла

Резиновый индикатор от Валентина Хенкина
Резиновый индикатор от Валентина Хенкина

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

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

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

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

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