Описание и заголовок шага

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

Свойство title (Заголовок шага)

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

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

  • Строка текста: Заголовок задаётся в виде строки.
  • Локализация: Поддерживает любые языки, включая кириллицу, специальные символы и HTML-теги при использовании шаблонных строк.
  • Стилизация: Можно применять кастомные стили через CSS или через глобальные настройки Driver.js.
  • Рекомендации по длине: Оптимально использовать 3–8 слов, чтобы заголовок оставался легко читаемым и не перегружал интерфейс.

Пример конфигурации заголовка:

const steps = [
  {
    element: '#submit-button',
    title: 'Отправка формы',
    description: 'Нажмите эту кнопку для отправки всех введённых данных на сервер.'
  }
];

Свойство description (Описание шага)

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

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

  • Поддержка HTML: Позволяет использовать теги <b>, <i>, <a> для выделения ключевых моментов.
  • Длина текста: Должно быть достаточно информативным, но не перегружать интерфейс. Обычно 1–3 коротких абзаца.
  • Многострочность: Driver.js автоматически переносит текст, но для сложных описаний рекомендуется использовать <br> для явных разрывов строк.
  • Локализация: Как и заголовок, описание может быть на любом языке, что важно для мультиязычных приложений.

Пример описания с HTML:

const steps = [
  {
    element: '#profile-picture',
    title: 'Загрузка фото профиля',
    description: 'Нажмите на изображение, чтобы <b>загрузить новое фото</b>.<br>Формат должен быть JPG или PNG.'
  }
];

Сочетание title и description

Правильное использование заголовка и описания создаёт логичную и понятную последовательность действий. Рекомендуется:

  1. Сначала заголовок: кратко обозначает цель шага.
  2. Затем описание: объясняет, как достичь цели и какие ограничения существуют.
  3. Выделение ключевых слов: с помощью <b> или <i> повышает читаемость.
  4. Минимизация перегруженности: длинные тексты лучше разбивать на несколько шагов.

Пример полной конфигурации шага:

const steps = [
  {
    element: '#nav-settings',
    title: 'Открытие настроек',
    description: 'Перейдите в раздел <b>Настройки</b>, чтобы изменить параметры профиля и уведомлений.'
  }
];

Дополнительные параметры для заголовка и описания

Driver.js позволяет гибко управлять отображением текста:

  • popoverClass — добавление кастомного класса для поповера, где находятся заголовок и описание.
  • position — позиционирование подсказки относительно элемента (top, bottom, left, right, auto).
  • padding — отступы внутри поповера для удобного отображения текста.
  • onNext / onPrevious — функции обратного вызова, которые можно использовать для динамического изменения заголовка или описания на следующем шаге.

Пример динамического изменения описания:

const steps = [
  {
    element: '#save-button',
    title: 'Сохранение изменений',
    description: 'Нажмите для сохранения данных.',
    onNext: () => {
      steps[1].description = 'Теперь перейдите к следующему разделу для проверки результата.';
    }
  }
];

Советы по UX при создании заголовков и описаний

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

Эти элементы (title и description) являются ядром каждого шага в Driver.js. Их грамотная конфигурация обеспечивает понятные и эффективные пользовательские руководства, минимизирует ошибки и повышает удовлетворённость интерфейсом.

Оглавление