Длина и количество шагов

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

Определение шагов

Шаги (steps) в Shepherd.js задаются при инициализации тура через массив объектов конфигурации. Каждый шаг описывает элемент интерфейса, который будет выделен, текстовое содержание, положение подсказки и кнопки управления. Пример базовой структуры шага:

const tour = new Shepherd.Tour({
  defaultStepOptions: {
    classes: 'shepherd-theme-arrows',
    scrollTo: true
  }
});

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

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

Контроль количества шагов

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

Для оптимизации тура важно:

  • Группировать похожие элементы: если несколько элементов выполняют одинаковую функцию, объединять их в один шаг с кратким описанием.
  • Выделять ключевые действия: фокусироваться на элементах, критичных для пользовательского пути.
  • Использовать условные шаги: Shepherd.js позволяет добавлять шаги динамически, проверяя состояние страницы перед добавлением.

Пример условного шага:

if (document.querySelector('#advanced-settings')) {
  tour.addStep({
    id: 'advanced',
    text: 'Расширенные настройки доступны здесь.',
    attachTo: { element: '#advanced-settings', on: 'right' },
    buttons: [{ text: 'Далее', action: tour.next }]
  });
}

Настройка длины шага

Под «длиной шага» подразумевается объем информации, который пользователь получает на каждом этапе. В Shepherd.js текст шага задается через свойство text, которое может быть строкой или функцией, возвращающей HTML-контент.

Рекомендации по длине шага:

  • Краткость и ясность: оптимальная длина текста — 1–3 предложения. Большие тексты следует делить на несколько шагов.
  • Использование форматирования: заголовки, списки и выделение ключевых слов повышают читаемость.
  • Динамическая подстановка данных: при необходимости показывать информацию, зависящую от состояния приложения, текст можно формировать через функцию:
tour.addStep({
  id: 'dynamic-step',
  text: () => `Вы находитесь на странице ${document.title}.`,
  attachTo: { element: '#main-content', on: 'top' },
  buttons: [{ text: 'Далее', action: tour.next }]
});

Навигация и управление длиной тура

Для длинных туров важно предоставить пользователю удобные средства навигации:

  • Кнопки «Назад» и «Далее»: позволяют перемещаться между шагами без пропусков.
  • Прогресс-бар: отображает, сколько шагов осталось до конца.
  • Пропуск шага или завершение тура: предоставление кнопки «Закрыть» или «Пропустить» помогает не перегружать пользователя.

Пример добавления кнопок управления:

tour.addStep({
  id: 'controls',
  text: 'Используйте кнопки для перемещения по туру.',
  attachTo: { element: '#controls', on: 'bottom' },
  buttons: [
    { text: 'Назад', action: tour.back },
    { text: 'Далее', action: tour.next },
    { text: 'Закрыть', action: tour.complete }
  ]
});

Динамическое управление шагами

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

  • Удаление шагов: метод removeStep(id) позволяет убрать шаг, если он больше не нужен.
  • Пересоздание шагов: метод addStep может быть вызван в любой момент, даже после начала тура, что обеспечивает гибкость в управлении длиной тура.
tour.removeStep('intro');
tour.addStep({
  id: 'new-intro',
  text: 'Новый вступительный шаг.',
  attachTo: { element: '#new-header', on: 'bottom' }
});

Оптимизация пользовательского опыта

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

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

Оглавление