Отличие хинтов от обычных туров

В библиотеке Intro.js существует два основных способа взаимодействия с пользователем: хуинты (hints) и туры (tours). Оба механизма служат для пошагового обучения или объяснения интерфейса, однако принцип их работы и назначение существенно различаются.

Хинты (Hints)

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

Особенности хинтов:

  • Постоянная видимость: Хинты отображаются рядом с элементами и остаются видимыми до тех пор, пока пользователь их не закроет. Они не требуют последовательного прохождения.
  • Локальное воздействие: Каждый хинт связан с конкретным элементом страницы через CSS-селектор (element), и его цель — пояснить именно этот элемент.
  • Возможность кастомизации: Intro.js позволяет настроить текст, положение (position), стиль подсказки и события на открытие или закрытие.
  • Интерактивность: Можно назначить обработчики событий, например, при клике на хинт, что позволяет интегрировать подсказки с действиями на странице.
  • Инициализация: Для хинтов используется метод introJs().addHints(), после чего вызывается introJs().showHints() для отображения.

Пример создания хинта:

introJs().addHints([
  {
    element: '#saveButton',
    hint: 'Нажмите здесь, чтобы сохранить изменения',
    hintPosition: 'top-middle'
  }
]);

introJs().showHints();

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

Обычные туры (Tours)

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

Особенности туров:

  • Линейная последовательность: Шаги тура показываются по очереди. Пользователь проходит тур шаг за шагом, перемещаясь между элементами через кнопки “Next” и “Back”.
  • Фокусировка внимания: На каждом шаге текущий элемент подсвечивается, а остальная часть интерфейса затемняется (overlay), что направляет внимание пользователя.
  • Настраиваемость шагов: Для каждого шага можно указать элемент, текст, положение подсказки, а также событие перед или после показа шага (onbeforechange, onafterchange).
  • Полная инициатива Intro.js: Тур запускается полностью программно, чаще всего один раз при первом входе пользователя или при демонстрации нового функционала.

Пример обычного тура:

introJs().setOptions({
  steps: [
    {
      element: '#menu',
      intro: 'Здесь находится основное меню приложения'
    },
    {
      element: '#profile',
      intro: 'Ваш профиль отображает личную информацию'
    },
    {
      element: '#settings',
      intro: 'Настройки позволяют изменить параметры приложения'
    }
  ],
  showStepNumbers: true,
  exitOnOverlayClick: false
}).start();

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

Ключевые отличия хинтов и туров

Параметр Хинты (Hints) Туры (Tours)
Последовательность Нет Да, строго по шагам
Видимость Постоянная, пока пользователь не закроет Временная, шаг за шагом
Фокусировка Нет Подсвечивание активного элемента
Прерывание работы Не мешают работе пользователя Могут отвлекать, фокусируют внимание
Цель Локальное пояснение элемента Обучение интерфейсу, демонстрация функций
Инициализация addHints() + showHints() start() с набором шагов

Практические рекомендации

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

Хинты и туры в Intro.js — это инструменты разной направленности: первый акцентирует внимание на отдельных элементах без прерывания работы, второй создает последовательное, целенаправленное обучение. Понимание различий позволяет строить эффективные интерфейсы с грамотным вовлечением пользователей.

Оглавление