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

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

Адаптивные системы помощи: всплывающие окна и справка

Адаптивные системы помощи получили развитие еще в конце 1980-х, а линейка продуктов Microsoft Office уже на протяжении многих лет использует небольшие всплывающие окна с подсказками и различной справочной информацией, которые появляются в подходящий (или не очень) момент. Хорошо известные сайты и передовые приложения постепенно заимствуют данную практику, и теперь лишь вопрос времени — когда остальные ресурсы последуют за ними.

В настоящий момент наблюдаются две тенденции:

1. Предложение помощи в небольшом по размеру оверлее, похожем на поп-ап (pop-up), но с той разницей, что его активация происходит по запросу пользователя.

Facebook

Facebook.com: выбор помощи в меню слева вызывает всплывающее окно в правом верхнем углу экрана

Google AdWords

Google AdWords: аналогичный выбор в меню настроек (слева) вызывает окно помощи (справа)

2. Адаптивная, соответствующая ситуации справка, основанная на текущих действиях пользователя или его расположения.

Facebook

Facebook.com: адаптивная система помощи предсказывает наиболее вероятные вопросы пользователя, находящегося на странице событий — предлагает 4 топика, связанных с управлением событиями

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

Золотые правила виджета помощи

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

  1. Доступность без навязчивости. Тот или иной вид помощи обязательно должен присутствовать на вашем сайте или приложении, но предлагать ее следует только в том случае, когда у пользователя возникнет такая необходимость.
  2. Простое, но понятное описание. Справочные сообщения обязаны быть максимально лаконичными и использовать язык, понятный широкому кругу пользователей.
  3. Невмешательство. Пользователям должно быть удобно возвращаться к прерванной задаче после получения справки.

Небольшое окно помощи

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

1. Менее раздражающий, чем поп-ап

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

2. Показываются вместе с контентом

Преимуществом отображения справочной информации в том же окне, что и основной контент, является тот факт, что людям не приходится покидать текущую страницу, чтобы воспользоваться помощью. Это соответствует приведенному выше критерию №3 — минимальная смена контекста и возможность удобного продолжения прерванной работы (если сравнивать с реальным миром: представьте ситуацию, когда специалист из тех.поддержки лично приходит в ваш кабинет, вместо того, чтобы вам самим отправляться в IT-отдел за решением проблемы).

3. Пошаговое руководство

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

4. Блокировка части элементов экрана

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

Блокировка части элементов

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

Совет: сделайте управление оверлеем более гибким, чтобы пользователи могли сворачивать, закрывать или перемещать окно по экрану. Особенно актуальна данная опция для приложений и рабочих столов (dashboard), инструменты которых часто распределены по всей поверхности экрана.

Google Play

Google Play: пользователь может перемещать окно оверлея по странице, таким образом освобождая скрытые элементы интерфейса.

TurboTax

TurboTax: оверлей содержит значок «Свернуть» (minimize), который освобождает заблокированное пространство страницы, сворачивая справку в компактную панель в верхней части окна.

5. Поверхностный характер информации

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

Совет: добавьте ссылку на полную версию страницы помощи.

Google AdWord

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

Адаптивная справка

Адаптивные справочные системы строят предположения о вероятных вопросах пользователей на основании их последних действий или их местонахождения. Также известные как интеллектуальные системы помощи, они предлагают «чувствительную к контексту» информацию. Простейшим примером контекстуальной справки является подсказка (tooltip).

Адаптивная справка

Анимированный помощник-скрепка от Microsoft — одна из наиболее популярных интеллектуальных систем помощи. Если пользователь начинает печатать «Дорогой...», Clippy сразу же предлагает помощь по составлению и редактированию писем.

Предвосхищение вопросов пользователей

Clippy был не самой удачной справочной системой отчасти потому, что он появлялся вне зависимости от желания пользователя. Как и всплывающее окно, непрошенный анимированный персонаж раздражал тех, кто не нуждался в помощи (нарушение 1-го золотого правила).

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

Инструменты помощи, используемые в Google AdWords и Facebook, содержат ссылки на справочный контент, который связан с текущей ситуацией посетителя. В случае удачного предсказания, эти ссылки дают прямой доступ к информации, соответствующей разделу навигации.

AdWords

Google AdWords: если вы находитесь в разделе «Кампании» (Campaign), с выделенной вкладкой «Группы объявлений» (Ad groups), адаптивное меню помощи предложит вам популярные статьи справки, связанные с рекламными кампаниями или группами объявлений.

Система не может предвидеть все, и люди об этом знают

Если система помощи предлагает темы, которые не интересуют пользователей, то люди быстро начинают игнорировать справочные сообщения (еще одна причина, по которой Clippy не заслужил признания). Даже системы с высокой точностью предсказания сталкиваются с данной проблемой, так как не могут учитывать всего, что пользователи уже знают из прошлого опыта, и в результате — люди даже не читают предложенные ссылки, будучи уверенными, что они не найдут там нужный им ответ.

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

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

Справочные ссылки

Слишком длинные заголовки и частичное описание разделов справки TurboTax.com (слева) требует больше времени на просмотр, чем короткий, лаконичный список заголовков Facebook.com (справа)

Совет 3: Оставьте строку поиска в справочном окне как альтернативный способ найти нужную информацию.

Вместо заключения

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

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

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

По материалам nngroup.com 

24 августа 2015

Продающие лендинги от отдела
дизайна LPgenerator

Используем технологии:
4U, AIDA, ХПВ, психология влияния Р. Чалдини, управление взглядом
  • 4U
  • AIDA
  • ХПВ
  • психологии влияния Р. Чалдини
  • управления взглядом
  • нейромаркетинг
Готовность от 7 дней
blog comments powered by Disqus
copyright © 2011–2017 by LPgenerator LLC. Все права защищены
Запрещено любое копирование материалов ресурса без письменного согласия владельца — ООО "ЛПгенератор".