Микровзаимодействия

Микровзаимодействия в 2021 году — эффективное использование

Как правильно использовать микровзаимодействия в 2021 году. Подробное руководство с примерами. Помощь фрилансеру и веб-дизайнеру.

Если задуматься, наша жизнь — это всего лишь серия взаимодействий — как на микро, так и на макроуровне.

Спросить членов вашей семьи, что они хотят съесть на завтрак — инициировать определенное взаимодействие. Как и сам процесс приготовления завтрака, определенные микровзаимодействия с бытовыми приборами:

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

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

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

На момент написания этой статьи, в сети насчитывалось 1,7 миллиарда веб-сайтов. Их число постоянно увеличивается, создавая недюжинную конкуренцию.

Если вам нужно добиться эффекта максимальной привлекательности и функциональности, то имейте в виду, 2021 год в веб-дизайне — год микровзаимодействий !

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

Содержание:

Что такое микровзамиодействия?

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

В западной индустрии дизайна, принято использовать 4-х уровневую систему микровзаимодействий:

  • первый уровень — «триггер» — это то, что инициирует микровзаимодействие. Например, если вы хотите помыть руки с помощью сенсорного смесителя, вы помашите рукой перед сенсором;
  • Второй уровень — «определение действия», определяют, что должно произойти. Придерживаясь примера с краном, датчик распознает руки человека.
  • третий — «обратная связь» — это проверка микровзаимодействия. В этот момент смеситель начинает работать и вода льется из крана.
  • четвертый — «циклы и режимы». Он определяет метаправила микровзаимодействия. Если микровзаимодействие необходимо повторить, оно будет повторяться — как сигнал тревоги холодильника, который не перестанет подавать звуковой сигнал, пока вы не закроете дверь.

Конечно, все это относится к микровзаимодействиям, инициируемые человеком. Однако, так происходит не всегда. Некоторые из взаимодействий инициируются системой, другими словами, запускаются программным обеспечением.

Например, вы вводите неправильный пароль и видите небольшое смещение окна ввода:

Микровзаимодействия - wordpress login microinteraction

Или вы прокручиваете сайт вниз и видите классную анимацию, которая привлекает ваше внимание:

Микровзаимодействия в веб-дизайн — общее использование

Теперь, когда вы знаете, что такое микровзаимодействия, давайте поговорим непосредственно о веб-дизайн

Прокрутка

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

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

Микровзаимодействия - scrolling microinteraction

Экран загрузки

Экраны загрузки знакомы всем, кто когда-либо играл в видеоигры. С годами они стали более впечатляющими, например, загрузочный экран Skyrim:

На экране загрузки представлены различные 3D-модели, с которыми пользователи могут взаимодействовать, ожидая начала игры.

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

Вы сможете весьма весьма эффектно и эффективно скрасить ожидания пользователей.

namelix loading microinteraction

Загрузка содержимого

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

Микровзаимодействия - fluid download microinteraction

Призыв к действию

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

moon exploration CTA

Уведомления

Исследование New York Post показало, что люди проверяют свои телефоны каждые 12 минут, то есть 80 раз в день! Главным образом это касается уведомлений.

Микровзаимодействия - notification microinteraction

Микровзаимодействия могут сделать уведомления более увлекательными, а также более заметными для пользователей. Небольшое движение (как показано выше) намного привлекательнее, чем статика.

Смахивание, или удаление просмотренного

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

swipe microinteraction

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

Переключение

Переключение с одной части контента на другую или между папками — еще одно микровзаимодействие, которое люди используют ежедневно.

Вот хороший пример:

switches microinteraction

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

Смайлики

Возможно, вы заметили, что при наведении курсора на кнопку «Нравится» в Facebook появляются различные анимированные смайлы, из которых вы можете выбрать подходящий:

facebook microinteractions

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

Выделение или подсветка

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

highlighting microinteraction

Подключение устройства

Какие-то микровзаимодействия «приятно иметь», а некоторые очень нужны. Когда вы подключаете устройства, вам нужна обратная связь, позволяющая узнать, что подключение работает. Возможно, вам знакомо подобное микровзаимодействие:

connected devices

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

Примеры эффективного использования микровзаимодействия

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

Поделиться…

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

Вот хороший пример:

social share microinteraction

Набор текста

Еще одно распространенное микровзаимодействие, которое мы привыкли видеть — это набора текста.

typing interaction

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

Загрузка

О загрузке мы уже говорили выше, но, конечно, некоторые микровзаимодействия выгодно отличаются по сравнению с другими. Вот отличный пример микровзаимодействия при загрузке:

download button microinteraction

Хотя на первый взгляд может показаться, что это не так, но данное взаимодействие насыщено элементами. Есть счетчик, перемещающаяся зеленая полоса, символизирующая прогресс загрузки. После завершения микровзаимодействия кнопка загрузки переключается на «Готово» и становится зеленой.

Это всего лишь один пример того, как создать микровзаимодействие загрузки — существующие возможности практически безграничны!

Сдвиг экрана для обновление

«Потяните вниз для обновления» — это обычное действие на большинстве интеллектуальных устройств, но единственный способ узнать, действительно ли страница обновилась — иметь какого-либо микровзаимодействие, демонстрирующее принятие запроса программой.

Микровзаимодействия - pull to refresh microinteraction

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

Смахивание

Еще одно взаимодействие, к которому мы привыкли как пользователи программного обеспечения, — это «смахивание». Как уже упоминалось выше, смахивания стали почти второй натурой для людей, использующих умные устройства. Вот пример:

liquid swipe interaction

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

Создание микровзаимодействий — 5 важных советов

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

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

  1. Сделайте их функциональными

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

  1. Будьте проще

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

  1. Следуйте структуре

Соблюдайте структуру: триггер — определение действия — обратная связь — циклы и структуры.

  1. Делайте взаимодействия естественными и органичными

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

  1. Проверяйте, проверяйте и еще раз проверяйте

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

Заключение

Можно с уверенностью прогнозировать всплеск требований пользователей к качеству и форме микровзаимодействий. Тому есть много причин. Постепенная интеграция технологии 5G. Как ни странно, выход компьютерной игры Cyberpunk 2077, определяющий развитие вектора мобильных технологий на годы вперед. Постоянно растущая конкуренция на рынке компьютерных и мобильных технологий.

Тем самым, разрабатывая микровзаимодействия, вам придется не только идти в ногу со временем, но и опережать его…

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

Источник

Опубликовано admin

Добавить комментарий