Микровзаимодействия в веб-дизайне: как сделать интерфейс удобным для пользователя
Каждую минуту, каждую секунду мы совершаем микровзаимодействия с окружающим миром. Мы включаем любимые песни, отвечаем на сообщения в соцсетях, заходим на сайты, чтобы заказать товар. Все эти маленькие действия есть и в веб-дизайне. Сегодня расскажем, как сделать интерфейс удобным для пользователя и мотивировать его на совершение целевого действия.
Это отдельные небольшие действия, которые совершает пользователь, заходя на сайт. Например, найти меню, добавить товар в закладки, нажать на кнопку, заполнить веб-форму - все это они, микровзаимодействия. Выражаются они через отдельные мелкие элементы дизайна. Каждое действие решает свою небольшую задачу, а в целом они складываются в то, насколько удобно человеку находиться на сайте. Да это же основы UX, товарищи!
Задача веб-дизайнера - сделать эти взаимодействия удобными для посетителя. А в идеале - подтолкнуть его к тому, чтобы он совершил целевое действие. Например, если страница долго грузится - сделайте веселую анимацию, чтобы ждать загрузки было не скучно. Если у вас интернет-магазин и конечная цель захода посетителя на сайт - сделать покупку, настройте удобные кнопки СТА, корзины, закладок, постоянно напоминайте о скидках и акциях. Ну и тому подобное.
Если схематично нарисовать процесс микровзаимодействий, это будет выглядеть так. Действия (триггеры) пользователя и изменение состояния системы приводят к совершению микродействий, ответом на которые будет обратная связь - изменения в интерфейсе системы. И далее - реакция на них пользователя. Наше с вами дело, чтобы эта реакция стала положительной.
Микровзаимодействия помогают пользователю:
Конечно, можно обойтись и без этого. Многие и обходятся: считают эти фишечки баловством и зряшной тратой денег. Пока они это делают, пользователи уходят к конкурентам - тем, кто заботится о них.
Да, без анимации никуда - именно с ее помощью и совершаются микровзаимодействия. Подумайте сами, как передать изменения в системе с помощью статичных элементов? А вот с помощью изменяющихся - самое то.
Рассмотрим, как работает анимация (и микровзаимодействия в целом):
Далее мы подробно расскажем об основных видах микровзаимодействий и научим, как их грамотно использовать. Поехали!
Такое микровзаимодействие дает пользователю представление, где он находится, и чувство контроля над ситуацией.
Вот зашел человек на сайт интернет-магазина, выбрал товар и пытается сделать заказ. Как правило, это действие происходит в несколько этапов. Сначала нужно подтвердить заказ, затем указать данные, потом выбрать способ доставки и оплаты и только потом - нажать заветную кнопку “Заказать”. Чтобы пользователь не запутался, покажите ему, что вообще происходит, сколько уже сделано и сколько осталось.
Еще пример: человек проходит тест, который состоит из 10 вопросов. Можно просто пронумеровать вопросы, но лучше отобразить, на каком этапе он находится. Чем больше вопросов в тесте, тем это микровзаимодействие более важно.
И самое простое: интерактивная шкала, которая показывает, на сколько процентов загрузился сайт и когда уже откроется. Или полоса прокрутки, которая показывается при скроллинге страницы. Такие микровзаимодействия есть уже на многих отечественных сайтах.
Поскольку мы говорим о микровзаимодействиях, простая кнопка призыва к действию (СТА) к ним не относится. А вот если при нажатии на нее возникает обратная связь - совсем другое дело! Это может быть радостный смайлик в виде письма, который счастлив, что вы выполнили действие. Или изменение цвета - с красного на зеленый (знаковые цвета, мессендж которых понимают все владельцы смартфонов). Или небольшая кнопка на ваших глазах превратится в развернутую форму для заполнения. Чудно же!
Этот способ часто используют крупные банки. Например, вводите вы номер карты и видите, как они появляются на экране. Или того лучше - прямо на нарисованной карте на странице сайта. Так пользователь точно не ошибется и введет все цифры правильно. Это так же дает ему чувство контроля над ситуацией и чувство облегчения от того, что все сделал правильно.
Порой пользователю приходится подождать, пока на сайте ничего не происходит. Например, вы нажали на кнопку запуска видео или ждете, пока загрузится прайс. Да просто на телефоне нажали на иконку приложения и ожидаете, когда оно откроется. Хорошие веб-дизайнеры продумывают эти моменты и не оставляют пользователя скучать в одиночестве. В iOS, например, при открытии приложения система будто встряхивает остальные иконки. Тем самым владельцу айфона подается сигнал: все в порядке, все под контролем, система работает, мы про вас помним. Пустячок, а приятно!
Сделали вы что-то - упс, не то! Это не должно быть катастрофой, и уж тем более поводом пугаться и убегать с сайта. Для этого помогите пользователю быстро отыграть все обратно. Например, если он по ошибке добавил товар в корзину, нажав на значок - дайте ему возможность нажать на значок еще раз - будто ничего и не было.
Знакома ситуация: вы заполняете форму, делаете ошибку и… все сбрасывается, и вам нужно писать все сначала. В этом случае велика вероятность, что пользователь плюнет и закроет ваш сайт, будет искать другой, более лояльный. Чтобы исключить возможные ошибки, можно сразу показывать посетителю, соответствуют ли заполненные поля требованиям сайта.
Мало облегчать задачу пользователю - важно еще с ним общаться. Делается это посредством той же анимации. Посмотрите на “Фейсбук”: он не забудет напомнить, с кем вы дружите уже ровно год или два, создаст видео из ваших общих фото и предложит поделиться с другими друзьями. Такая забота приятна любому пользователю.
“ВКонтакте” тоже активно использует коммуникационные взаимодействия. Например, на каждое первое апреля разработчики готовят новые анимации, которые доступны всем пользователям соцсети. В 2014 году при каждом лайке в углу экрана появлялся забавный песик, в 2015 - привидение, которое восклицало “Ничоси!”, в 2016 - улыбчивый (нет) персонаж Гарольд.
Игра - это то, с помощью чего дети познают мир. Взрослым тоже по душе играть в игры, и это с удовольствием используют веб-дизайнеры. Как вам идея сайта кафе поиграть в пазлы? Посетителю ресурса предлагается собрать пазл, выбрав несколько вариантов блюд на свой вкус. Потом заказ оформляется и едет с доставкой на дом.
Еще один яркий пример - примерка одежды на виртуальном манекене. Или лайфхак от “ИКЕИ”: мобильное приложение, с помощью которого можно поместить выбранную мебель в интерьер вашей квартиры и наглядно увидеть, как она там будет смотреться. Или квест: вот как это сделано на сайте компании по продаже охранных сигнализаций.
Продажи от использования таких вот “несерьезных” фишек значительно поднимаются.
С помощью юмора можно вытянуть даже самую неприятную ситуацию, которая возможна при заходе посетителя на сайт. Например, прошел он по ссылке, а там вот незадача - ошибка 404. Если покреативить, можно обернуть даже такую оплошность в позитив.
Также можно предложить пользователю вернуться на главную страницу или перейти по другим ссылкам - все для того, чтобы он не покидал сайт.
Юмор, позитив или искренние извинения - вот то, что спасет даже такую незавидную ситуацию и прибавит лояльности вашему бренду.
Собственно, это относится и к основным принципам веб-дизайна в целом. Простым должен быть как дизайн любого микровзаимодействия, так и вся его суть. Золотое правило - микровзаимодействие должно состоять только из одного движения. Например, пользователю предлагается кликнуть по кнопке, открыть баннер. Если вы придумали креативную, но слишком сложную фишку - лучше сразу отказаться от этой идеи. Помните: главное - не переборщить.
Мы бы назвали это словом “ненапряжность”. Если при совершении микровзаимодействия человеку приходиться думать, а что это такое вообще и зачем нужно что-то делать - это плохо. Действия пользователя должны быть словно автоматическими, естественными. Не заставляйте его думать!
Любые фантазии дизайнера можно смело отправить на помойку, если они не преследуют главную цель. Какую - мы уже говорили. Совершить покупку, оставить контактные данные, оформить подписку, добавить товар в корзину и так далее. Если анимация мешает пользователю выполнить задуманное и нужное вам действие - в топку ее. Действия пользователя должны быть простыми: причина - следствие.
Микровзаимодействия - на то и микро, что происходят очень быстро. Скорость совершения действия не должна превышать 300-400 мс. Если больше - значит, пользователь задумался (смотри пункт 2). Учитывайте это правило при юзабилити-тестировании.
Микровзаимодействия должны быть однозначными. Если кнопка заказа - то кнопка заказа, а не регистрации. Если движущийся человечек - он должен не просто бежать, а привести пользователя на нужную страницу. В противном случае человек будет озадачен и запросто покинет сайт.
При всех требованиях простоты и однозначности не забывайте про детали. Продумывайте каждую мелочь - цвет, шрифт, контрастность, градус юмора и так далее. Наш совет - смотрите западные сайты, которые вовсю используют эти возможности.
Студия IDBI разрабатывает дизайн сайтов, в том числе универсальный и индивидуальный. Обращайтесь - поможем отстроиться от конкурентов и сделать красивый, удобный и функциональный сайт!