LPgenerator — профессиональная Landing Page платформа для увеличения продаж вашего бизнеса

  • Более 500 шаблонов в галерее
  • Инструменты оптимизации конверсии
  • Статистика и сквозная аналитика
  • CRM для работы с заявками и телефония
  • Визуальный редактор с расширенным функционалом
  • Быстрая техническая поддержка
  • Множество интеграций
  • Окупаемость инструмента — от 7 дней

Индикаторы, валидаторы и уведомления: как выбрать правильный способ коммуникации с аудиторией?

выбрать правильный способ коммуникации с аудиторией

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

Выбор способа коммуникации зависит от нескольких ключевых факторов:

1. От типа передаваемой информации
2. От фактора срочности — насколько важно, чтобы пользователь увидел сообщение немедленно
3. От необходимости действий после получения уведомления

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

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

Индикаторы

Индикатор — это выделение части страницы (контента или элемента интерфейса), чтобы проинформировать пользователя о чем-то особенном, требующем его внимания. Чаще всего индикатор обозначает, что произошли какие-то изменения, касающиеся выделенного им объекта.

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

Есть как минимум три вида индикаторов:

1. Часто, но не всегда, индикаторами становятся иконки. Легко узнаваемые иконки могут быть очень эффективным инструментом коммуникации.

2. Типографические вариации тоже могут служить индикатором. Например, непрочитанные email-сообщения выделяются жирным шрифтом.

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

Индикаторы

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

Перечислим основные характеристики индикаторов:

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

2. Индикаторы условны: они не присутствуют постоянно, а появляются при заданных условиях. Например, индикатор Yelp возникает, только когда проходит акция.

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

Индикаторы

Условный индикатор на сайте American Century Investments, информирующий о динамике курса: когда изменения негативны, индикатор окрашивается в красный цвет, когда позитивны — в зеленый.

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

Дабы понять, уместен ли индикатор, задайте себе следующие вопросы:

1. Насколько важна эта информация, заслуживает ли она место на странице?

  • как часто она используется?
  • соответствует ли контексту?
  • будет ли она заметна без индикатора?

2. Насколько критично, чтобы пользователь получил эту информацию?

Валидаторы

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

Валидаторы

Форма регистрации Cobragolf.com использует сообщение-валидатор с точным указанием поля, где допущена ошибка. Впрочем, само сообщение об отсутствии символа «@» в строке слишком туманно. Лучше было бы написать так: «Пожалуйста, введите правильный email-адрес»

Главные свойства валидаторов:

1. Пользователю необходимо предпринять какое-то действие в ответ на сообщение.
2. Информация, содержащаяся в валидаторе, связана с определенным контекстом и относится к конкретным данным пользователя, вызвавшим проблему.

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

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

валидаторы

Bestbuy.com использует сообщение, подсказывающее пользователям, как исправить ошибку, иконку-индикатор, а также привлекает внимание к полю, в котором требуются исправления, выделяя его другим цветом.

Уведомления

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

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

Уведомления

Facebook App использует контекстуальное уведомление в новостной ленте, чтобы сообщить о новых постах, при этом не требуя от пользователя немедленной реакции

Характеристики уведомлений:

1. Не связаны напрямую с действиями пользователя
2. Сообщают о событиях, которые могут быть ему интересны

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

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

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

уведомление

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

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

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

Adobe Creative Cloud

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

Uniqlo

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

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

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

Например, если при расчете в интернет-магазине требуется указать срок действия кредитной карты, не обязательно писать: «Пожалуйста, укажите срок действия карты, с которой вы хотите оплатить $29.90 за голубое платье без рукавов, которое вы сейчас покупаете на Uniqlo.com». Но оповещение о том, что платье доставлено со склада, должно содержать больше информации, чем просто: «Ваш заказ доставлен».

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

уведомление

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

уведомление

Mint.com вместе с уведомлением, что один из счетов требует внимания пользователя, использует предупреждающие индикаторы: индикатор (1) — рядом с информацией о счете, требующем внимания, и (2) в центре страницы. Само уведомление, впрочем, могло быть и более содержательным

Важно выбрать правильный способ коммуникации

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

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

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

Allmodern

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

Выводы

Помните о трех ключевых отличиях в методах коммуникации с пользователем:

  1. Индикаторы предоставляют дополнительную информацию о динамике элементов пользовательского интерфейса или контента. Они могут появляться или меняться при определенных условиях.
  2. Валидаторы привязаны к действию пользователя или вводу данных.
  3. Уведомления сосредоточены на событиях, связанных с системой.

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

Высоких вам конверсий!

По материалам nngroup.com, image source State Records NSW 

16-10-2015

LPgenerator — профессиональная Landing Page платформа для увеличения продаж вашего бизнеса

  • Более 500 шаблонов в галерее
  • Инструменты оптимизации конверсии
  • Статистика и сквозная аналитика
  • CRM для работы с заявками и телефония
  • Визуальный редактор с расширенным функционалом
  • Быстрая техническая поддержка
  • Множество интеграций
  • Окупаемость инструмента — от 7 дней
blog comments powered by Disqus
copyright © 2011–2017 by LPgenerator LLC. Все права защищены
Запрещено любое копирование материалов ресурса без письменного согласия владельца — ООО "ЛПгенератор".