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

Что такое микровзаимодействия в веб-дизайне

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

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

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

Зачем нужны микровзаимодействия в веб-дизайне

Микровзаимодействия помогают пользователю:

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

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

Госпожа Анимация

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

Рассмотрим, как работает анимация (и микровзаимодействия в целом):

  1. Привлекает внимание пользователя. Возьмем отдельный сайт, любую его страницу. Понятно, что не все элементы одинаково полезны - есть несколько важных, к которым и нужно привлечь внимание. Это могут быть веб-формы заказа, кнопки СТА, важные текстовые блоки. Конечно, можно выделить их с помощью типографики, но анимация тоже не помешает.
  2. Облегчает навигацию по сайту. Помните, в начале говорили про то, как мотивировать пользователя к совершению целевого действия? Вот это оно самое. Ненавязчиво подталкивая человека к переходу по сайту, мы движем его к конечной цели - совершению покупки. Или к подписке на материалы блога. Или оставлению своих контактных данных - все зависит от того, какую цель преследует владелец ресурса.
  3. Показывает наглядно, что делать. Эту функцию часто выполняют иконки или кнопки с текстом (“Заказать”, “Купить”, “Нажмите сюда”, “Пройдите по ссылке”). Если облечь слова в движущиеся рисунки - пользователю будет куда проще уловить смысл. Смотрите только, чтобы анимация была понятной для всех и не двусмысленной.

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

9 основных микровзаимодействий и как их применять

1. Отображение статуса и прогресса системы

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

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

Еще пример: человек проходит тест, который состоит из 10 вопросов. Можно просто пронумеровать вопросы, но лучше отобразить, на каком этапе он находится. Чем больше вопросов в тесте, тем это микровзаимодействие более важно.

Отображение статуса и прогресса системы

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

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

Поскольку мы говорим о микровзаимодействиях, простая кнопка призыва к действию (СТА) к ним не относится. А вот если при нажатии на нее возникает обратная связь - совсем другое дело! Это может быть радостный смайлик в виде письма, который счастлив, что вы выполнили действие. Или изменение цвета - с красного на зеленый (знаковые цвета, мессендж которых понимают все владельцы смартфонов). Или небольшая кнопка на ваших глазах превратится в развернутую форму для заполнения. Чудно же!

3. Визуализация ввода данных

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

Визуализация ввода данных

4. Режим ожидания

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

Режим ожидания

5. Отмена действия

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

Отмена действия

6. Предотвращение ошибок

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

7. Коммуникация бренда

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

“ВКонтакте” тоже активно использует коммуникационные взаимодействия. Например, на каждое первое апреля разработчики готовят новые анимации, которые доступны всем пользователям соцсети. В 2014 году при каждом лайке в углу экрана появлялся забавный песик, в 2015 - привидение, которое восклицало “Ничоси!”, в 2016 - улыбчивый (нет) персонаж Гарольд.

8. Геймификация

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

Геймификация

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

Геймификация

Продажи от использования таких вот “несерьезных” фишек значительно поднимаются.

9. Юмор

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

Юмор на сайте

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

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

6 главных правил в создании микровзаимодействий

1. Простота и лаконичность

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

2. Удобство для пользователя

Мы бы назвали это словом “ненапряжность”. Если при совершении микровзаимодействия человеку приходиться думать, а что это такое вообще и зачем нужно что-то делать - это плохо. Действия пользователя должны быть словно автоматическими, естественными. Не заставляйте его думать!

3. Функциональность

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

4. Скорость

Микровзаимодействия - на то и микро, что происходят очень быстро. Скорость совершения действия не должна превышать 300-400 мс. Если больше - значит, пользователь задумался (смотри пункт 2). Учитывайте это правило при юзабилити-тестировании.

5. Однозначность

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

6. Дьявол в деталях

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

Итак, резюмируем

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

Студия IDBI разрабатывает дизайн сайтов, в том числе универсальный и индивидуальный. Обращайтесь - поможем отстроиться от конкурентов и сделать красивый, удобный и функциональный сайт!