Улей: Интерактивные подсказки, 2.0.2

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

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

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


Пользовательский интерфейс

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

Если подсказка имеет Шаги, то у подсказки могут появляться кнопки Далее и кнопка Пропустить.



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

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

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

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




Интерфейс редактора модуля

Процесс создания подсказки на странице включает в себя два этапа:

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

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

В публичной части, на любой из страниц портала, редактору подсказок доступна кнопка в панели управления “Подсказки” с вложенными подпунктами:

• Создать подсказку (инициация создания подсказки);
  
• Список подсказок (вызов поп-ап окна со списком созданных групп подсказок)
  

Тип подсказки – доступны два типа Пошаговая и Обычная.

• Пошаговая подсказка дает возможность создать несколько объединённых между собой шагов, для демонстрации разных действий привязанных к разным html зонам на одной странице.
  
• Обычная – привязывается к одной html зоне на странице и демонстрирует одно действие.
  

Привязка к странице – на какой странице будет доступна данная подсказка. По умолчанию подставляется текущая. Данное поле поддерживает разделить вида #USER_ID#, #GROUP_ID#, #TASK_ID#,  который определяет в каком месте ссылки используется динамический идентификатор.

Пример: /company/personal/user/#USER_ID#/tasks/  – подсказка будет показана для каждого пользователя страницы списка Задач.


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

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




Название – название подсказки, служит для удобства редактирования и просмотра в списке созданных подсказок.

Подсказка – привязка к Группе подсказок.

Текс подсказки – описание которое будет выводиться пользователю в момент показа подсказки.



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

Событие – при каком событие должна отработать подсказка (При клике на привязанный html объект, при нажатии на Далее).

Форма для выделения – область фокусировки на html объекте (Круг/Прямоугольник).

Радиус скругления – если выбран Круг, то радиус скругления Круга.

Таймаут(сек) – задержка в мс перед показом подсказки.

Скрыть кнопку Далее – скрывает кнопку перехода на следующий Шаг.

Надпись на кнопке Далее – задает название кнопки, для перехода на следующий шаг.

Скрыть кнопку Пропустить – скрывает кнопку завершения подсказки на данном Шаге.


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