Прокачайте ваш онбординг
с навигатором интерфейсов Experrto
Выберите категорию

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

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

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

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

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

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

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

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

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

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

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

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

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

Содержание статьи

Золотые правила юзабилити

Всплывающие подсказки (tooltips)

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

Контекстная справка

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

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

Золотые правила юзабилити

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

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

Всплывающие подсказки (tooltips)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Как превратить ваши справочные статьи в in-app руководства

Контекстная справка

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

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

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

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

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

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

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

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

Контекстный онбординг: что это такое и почему он так важен?

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

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

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

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

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

Искусство онбординга, или Зачем нужен процесс адаптации к продукту?

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

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

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

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

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

Прокачайте свой онбординг!

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

Прокачайте ваш онбординг
с навигатором интерфейсов Experrto