17 Mar 15:25

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

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

Микровзаимодействие — один из ключевых моментов в 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-демо

GIF-демо «потяни вниз» -Песочные часы by от Сергея Валюха

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

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

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

Дизайн и юзабилити: Прелоадер от Кирилла

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

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

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

Дизайн и юзабилити: Потяните для обновления от Кирилла

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

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

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

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

Дизайн и юзабилити: Плеер Juicy от Валентина Хенкина

Плеер Juicy от Валентина Хенкина

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

Понравилась публикация? Поделись с друзьями:

0 комментариев

Зарегистрируйтесь или авторизуйтесь для того, чтобы оставлять комментарии.