Итеративное улучшение

Shepherd.js — это библиотека для создания пошаговых интерактивных туров на веб-страницах. Итеративное улучшение в контексте Shepherd.js подразумевает постепенную доработку тура, его шагов, позиции подсказок и поведения на основе тестирования, обратной связи пользователей и анализа пользовательских сценариев. Этот подход позволяет добиться максимальной удобочитаемости и эффективности интерактивного обучения.

Создание базового тура

Для начала необходимо создать объект тура с использованием конструктора Shepherd.Tour:

const tour = new Shepherd.Tour({
  defaultStepOptions: {
    cancelIcon: {
      enabled: true
    },
    classes: 'shepherd-theme-arrows',
    scrollTo: { beh * avior: 'smooth', block: 'center' }
  }
});

Ключевые моменты:

defaultStepOptions задаёт единые параметры для всех шагов, которые можно переопределять на уровне отдельных шагов.
cancelIcon позволяет пользователю закрыть тур в любой момент.
Классы темы (classes) определяют визуальный стиль подсказок.

Добавление шагов

Шаги тура добавляются методом addStep, где определяется текст подсказки, кнопки и поведение при открытии/закрытии:

tour.addStep({
  id: 'welcome',
  text: 'Добро пожаловать в наш интерфейс!',
  attachTo: {
    element: '#header',
    on: 'bottom'
  },
  buttons: [
    {
      text: 'Далее',
      action: tour.next
    }
  ]
});

Выделенные моменты:

attachTo связывает подсказку с конкретным элементом DOM и определяет позицию.
Кнопки (buttons) могут вызывать функции tour.next(), tour.back() или произвольные действия.
Каждому шагу можно задавать уникальный идентификатор (id) для упрощения управления.

Настройка поведения шагов

Для итеративного улучшения важно экспериментировать с поведением каждого шага:

События шага: Shepherd.js предоставляет события show, hide, complete, cancel, которые позволяют отслеживать взаимодействие пользователя.

tour.on('complete', () => {
  console.log('Тур завершён');
});

Позиционирование: Позиция подсказки может изменяться в зависимости от размера экрана. Для адаптивного позиционирования используют динамическую функцию onShow:

tour.addStep({
  id: 'feature',
  text: 'Эта функция облегчает работу.',
  attachTo: { element: '#feature-btn', on: 'right' },
  when: {
    show: () => {
      if (window.innerWidth < 768) {
        tour.getCurrentStep().updateStepOptions({
          attachTo: { element: '#feature-btn', on: 'bottom' }
        });
      }
    }
  },
  buttons: [{ text: 'Далее', action: tour.next }]
});

А/B тестирование шагов

Итеративное улучшение включает проверку разных вариантов текста, расположения и интерактивных элементов:

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

const stepVariantA = {
  id: 'variantA',
  text: 'Вариант A',
  attachTo: { element: '#btn', on: 'top' },
  buttons: [{ text: 'Далее', action: tour.next }]
};

const stepVariantB = {
  id: 'variantB',
  text: 'Вариант B',
  attachTo: { element: '#btn', on: 'bottom' },
  buttons: [{ text: 'Далее', action: tour.next }]
};

Динамическая загрузка варианта на основе условий пользователя позволяет проверить реакцию на разные варианты интерфейса.

Оптимизация визуальной презентации

Shepherd.js позволяет гибко настраивать стили подсказок для улучшения восприятия:

Классы и темы: Использование предустановленных тем (shepherd-theme-arrows, shepherd-theme-dark) или собственных CSS.
Прокрутка к элементу: Опция scrollTo обеспечивает, что элемент будет виден при показе подсказки.
Анимация: Использование CSS-анимаций для плавного появления и исчезновения шагов.

tour.addStep({
  id: 'highlight',
  text: 'Обратите внимание на этот элемент.',
  attachTo: { element: '#highlighted', on: 'auto' },
  classes: 'custom-highlight-step',
  scrollTo: true,
  buttons: [{ text: 'Закрыть', action: tour.complete }]
});

Сбор обратной связи и метрик

Для итеративного улучшения важно интегрировать сбор данных о взаимодействии пользователя с туром:

События show, hide, complete фиксируют прохождение шагов.
Логи и аналитика помогают выявлять узкие места и недопонимания.
Возможна интеграция с внешними системами аналитики, например, Google Analytics:

tour.on('show', (event) => {
  const stepId = event.step.id;
  gtag('event', 'tour_step_show', { step: stepId });
});