Guided Tour: обучающие туры по интерфейсу

Задача

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

Что сделано

• Тур поверх любой страницы. Подсказки подсвечивают нужный элемент и объясняют его, шаги листаются кнопками или стрелками на клавиатуре.
• Приглашение вместо навязчивого автозапуска. Тому, кто открыл страницу впервые, через пару секунд предлагается короткое обучение. Можно пройти его или отказаться, и отказ запоминается.
• Режим сборки. Автор щёлкает по элементу на странице, и шаг привязывается к нему сам. Панель показывает, какие шаги нашли свой элемент на этой странице, а какие нет.
• Точечные подсказки. Значок вопроса рядом с отдельным полем объясняет только его, без запуска всего тура.
• Цвета на выбор. У каждого тура своя тема, чтобы обучение по разным разделам различалось.
• Учёт прохождения. Видно, кто прошёл тур, кто бросил и на каком шаге. Это помогает найти перегруженные шаги.
• Первый тур по конструктору дашбордов: 14 шагов на русском и английском.
• Инструкция для автора туров и техническое описание.

Как устроено

• Тур хранится записями, а не кодом. Виджет сам определяет, на какой странице открыт, находит подходящие туры и их шаги. Страницу, по которой идёт тур, менять не нужно: конструктор дашбордов не потребовал ни одной правки.
• Шаг не ломает весь тур. Если элемент на странице не нашёлся, например панель свёрнута, шаг можно пропустить, и тур пройдёт остальные.
• Привязка выбирается устойчивая. При сборке щелчком предпочтение отдаётся признакам элемента, которые не меняются при перевёрстке, поэтому туры не ломаются от каждой правки интерфейса.

Скриншоты