Практическое руководство по продуктам в приложениях React

Как указано в Appcues:

«Туры по продуктам — иногда называемые обзорами продуктов — знакомят пользователей с новым продуктом и помогают им сориентироваться».

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

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

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

Но когда все сделано неправильно, туры по продуктам могут закончиться тем, что вы будете ощущать себя водителем на заднем сиденье. И никто не любит водителя на заднем сиденье, не так ли?

В этом руководстве вы узнаете, что такое тур по продукту и типы пакетов туров по продукту в экосистеме React, а также их плюсы и минусы.

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

Мы не будем рассматривать основы синтаксиса React и JavaScript, но вам не обязательно быть экспертом ни в одном из этих языков, чтобы следовать им.

Руководство по туру по продукту

Обзоры продуктов — сложный аспект веб-приложений, требующий определенного опыта взаимодействия с пользователем для достижения результатов. Я бы порекомендовал ознакомиться с советами Appcues для туров по продукту. Ниже приведены несколько рекомендаций, которые следует учитывать.

Никогда лекция

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

Сломай

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

Добавить значение

Вам нравится путешествовать самостоятельно? Как насчет ваших товарищей по команде? Представьте тур так, чтобы пользователи его поняли. Демонстрируйте ценность, а не истории.

Теперь, когда мы знаем ценность туров по продукту и ознакомились с некоторыми рекомендациями по их созданию, давайте рассмотрим некоторые библиотеки React для туров по продукту и узнаем, как их использовать.

Существует всего несколько библиотек на основе React для реализации туров. Двумя самыми популярными являются React Tour и React Joyride.

Реактивный тур

React Tour имеет около 1600 звезд на GitHub и активно развивается. Лучший вариант использования React Tour — это простой тур по продукту, в котором требуется небольшая настройка. Доступна демоверсия.

Как это работает

В React Tour вы передаете компоненту селектор className и содержимое для каждого шага. Библиотека отобразит пользовательский интерфейс тура по нажатию кнопки или после того, как вы смонтируете компонент. Это просто для статических страниц и интерфейсов:

 const steps = [ { selector: '.first-tour', content: 'This is the content for the first tour.', }, { selector: '.second-tour', content: 'Here is the content for the second Tour.', } // ... ]

Плюсы

• React Tour лучше всего подходит для туров, которые не требуют особых настроек.
• Он хорошо работает для статического контента и для динамического контента, метки селекторов которого всегда существуют в пользовательском интерфейсе.
• Поклонникам styled-components может показаться интересным, потому что он имеет жесткую зависимость от styled-components.

Минусы

• Если ваш проект не зависит от styled-components, вам может быть нелегко его реализовать.
• Ваше творчество будет ограничено, потому что оно не поддерживает настройку.

Реагировать на радость

Другой основной библиотекой продуктового тура является React Joyride, которая имеет около 3100 звезд на GitHub и также активно поддерживается.

Как это работает

Мы передаем имя className в качестве цели и содержимого. Государство хранит тур. Компонент Joyride использует шаги в качестве реквизита.

 state = { steps: [ { target: '.my-first-step', content: 'This is my awesome feature!', }, { target: '.my-other-step', content: 'This is another awesome feature!', }, ... ] }; render () { const { steps } = this.state; return (

        
        ...
      
    );
  }
}

Плюсы

• Интеграция React Joyride в веб-приложение менее жесткая, чем в React Tour, и не имеет жесткой зависимости от других библиотек.
• Доступны события и действия, что способствует настройке.
• Его часто улучшают.

Минусы

• Пользовательский интерфейс не такой элегантный, как у React Tour.

Почему React Joyride?

Туры по продукту, особенно для действительно больших веб-приложений, требуют настройки , и это отличает React Joyride от React Tour. Пример проекта, который мы создадим, потребует некоторого творчества и настройки — поэтому мы выберем React Joyride.

Создание простого тура по продукту

Во-первых, мы создадим простой тур React, используя реквизит, доступный нам в React Joyride. Далее мы будем использовать хук useReducer для автоматизации процессов тура.

Клонируйте ветку «standard-tour» в репозиторий GitHub или используйте веб-страницу по вашему выбору, если вы можете следить за ней.

Установите пакеты, запустив npm install .

Чтобы запустить приложение, запустите npm run start .

Мы рассмотрим следующие шаги:

• определить этапы тура;
• включить опцию пропуска на каждом этапе;
• изменить текстовые надписи на кнопках и ссылках;
• настроить стили, такие как цвета кнопок и выравнивание текста.

Затем мы добавим некоторые пользовательские функции:

• автозапуск тура;
• запустить тур вручную (т.е. по ссылке или по нажатию кнопки);
• скрыть мигающий маяк.

Реквизиты в React Joyride позволяют нам выполнять некоторые базовые функции.

Для этого руководства мы создадим обзор продукта с пользовательским интерфейсом, показанным ниже:

Определите этапы тура

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

В папке component создайте файл Tour.js и вставьте в него следующий код. Кроме того, убедитесь, что целевые classNames существуют в вашей таблице стилей. В этой статье мы будем настраивать компонент Tour.js в соответствии с поставленной задачей.

 import React from "react"; import JoyRide from "react-joyride"; const TOUR_STEPS = [ { target: ".tour-logo", content: "This is our tour's logo", }, { target: ".tour-cart", content: "View the cart you've added here", }, { target: ".tour-contact", content: "Contact the developer", }, { target: ".tour-policy", content: "We accept returns after 14 days max", }, ];

Что мы сделали, так это просто определили шаги нашего тура, ориентируясь на classNames , которые сформируют основу нашего контента (текста). Свойство content — это место, где мы определяем text , который мы хотим видеть при запуске тура.

Включить опцию пропуска на каждом шаге

Опция пропуска важна в тех случаях, когда пользователю не интересен конкретный тур. Мы можем добавить эту функцию, установив для параметра showSkipButton значение true , что позволит пропустить оставшиеся шаги. Кроме того, continuous опора пригодится, когда нам нужно показать кнопку « Next » на каждом шаге.

 const Tour = () => { return ( <> <JoyRide steps={TOUR_STEPS} continuous={true} showSkipButton={true} /> </> ); };

Изменить текстовые метки на кнопках и ссылках

Чтобы изменить text метки на кнопках или ссылках, мы будем использовать locale . Свойство locale имеет два объекта: last и skip . Мы указали наш last тур как End tour , а skip — как Close tour .

 const Tour = () => { return ( <> <JoyRide steps={TOUR_STEPS} continuous={true} showSkipButton={true} locale={{ last: "End tour", skip: "Close tour" }} /> </> ); };

Настройка стилей, например цвета кнопок и выравнивания текста

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

Мы видим в нашем коде, что свойство styles является объектом. У него есть другие объекты с уникальными значениями, в том числе:

• tooltipContainer
  Его ключ — textAlign , а значение — left .
• buttonNext
  Его ключ — backgroundColor , а значение — green .
• buttonBack
  Его ключ — marginRight , а его значение — 10px .
• locale
  Его ключи — last и skip , а значения — End Tour и Close Tour соответственно.

 const Tour = () => { return ( <> <JoyRide steps={TOUR_STEPS} continuous={true} showSkipButton={true} styles={{ tooltipContainer: { textAlign: "left" }, buttonNext: { backgroundColor: "green" }, buttonBack: { marginRight: 10 } }} locale={{ last: "End tour", skip: "Close tour" }} /> </> ); };

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

• beaconComponent
• tooltipComponent

использованиередьюсер

Мы увидели, как создать тур по продукту и как настроить его, используя различные реквизиты Joyride.

Проблема с реквизитами, однако, заключается в том, что по мере масштабирования вашего веб-приложения и необходимости в большем количестве туров вы не хотите просто добавлять шаги и передавать им реквизиты. Вы хотите иметь возможность автоматизировать процесс, убедившись, что процесс управления турами контролируется функциями, а не просто props . Поэтому мы будем использовать useReducer , чтобы обновить процесс построения туров.

В этом сегменте мы собираемся управлять туром, используя actions и events , доступные в библиотеке через функцию обратного вызова.

Чтобы сделать этот процесс менее сложным, мы разобьем его на этапы, что позволит нам построить тур по частям.

Полный исходный код доступен, но я бы посоветовал вам следовать этому руководству, чтобы понять, как это работает. Все наши шаги будут выполняться в файле Tour.js в папке components .

Определите шаги

 import React from "react"; import JoyRide from "react-joyride"; const TOUR_STEPS = [ { target: ".tour-logo", content: "This is our tour's logo.", }, { target: ".tour-cart", content: "View the cart you've added here", }, { target: ".tour-contact", content: "Contact the developer", }, { target: ".tour-policy", content: "We accept returns after 14 days max", }, ];

На этом первом шаге мы определяем наши шаги, ориентируясь на соответствующие classNames и устанавливая наш контент (текст).

Определите начальное состояние

 const INITIAL_STATE = { run: false, continuous: true, loading: false, stepIndex: 0, // Make the component controlled steps: TOUR_STEPS, key: new Date(), // This field makes the tour to re-render when the tour is restarted };

На этом шаге мы определяем некоторые важные states , в том числе:

• Установите для поля run значение false , чтобы тур не запускался автоматически.
• Установите для continuous Continuous значение true , потому что мы хотим показать кнопку.
• stepIndex — это номер индекса, который равен 0 .
• Поле steps установлено на TOUR_STEPS , которое мы объявили на шаге 1.
• key поле заставляет повторный рендеринг тура при перезапуске тура.

Управляйте состоянием с помощью редуктора

 const reducer = (state = INITIAL_STATE, action) => { switch (action.type) { // start the tour case "START": return { ...state, run: true }; // Reset to 0th step case "RESET": return { ...state, stepIndex: 0 }; // Stop the tour case "STOP": return { ...state, run: false }; // Update the steps for next / back button click case "NEXT_OR_PREV": return { ...state, ...action.payload }; // Restart the tour - reset go to 1st step, restart create new tour case "RESTART": return { ...state, stepIndex: 0, run: true, loading: false, key: new Date() }; default: return state; } };

На этом шаге, используя оператор switch , когда case — START , мы возвращаем состояние и устанавливаем для поля run значение true . Кроме того, когда case RESET , мы возвращаем состояние и устанавливаем для stepIndex значение 0 . Затем, когда case — STOP , мы устанавливаем для поля run значение false , что остановит обход. Наконец, когда case RESET , мы перезапускаем тур и создаем новый тур.

В соответствии с events ( start , stop и reset ) мы отправили правильное состояние для управления туром.

Слушайте изменения обратного вызова и изменения состояния отправки

 import JoyRide, { ACTIONS, EVENTS, STATUS } from "react-joyride"; const callback = data => { const { action, index, type, status } = data; if (action === ACTIONS.CLOSE || (status === STATUS.SKIPPED && tourState.run) || status === STATUS.FINISHED ) { dispatch({ type: "STOP" }); } else if (type === EVENTS.STEP_AFTER || type === EVENTS.TARGET_NOT_FOUND) { dispatch({ type: "NEXT_OR_PREV", payload: { stepIndex: index + (action === ACTIONS.PREV ? -1 : 1) } }); } };

Используя открытые метки EVENTS , ACTIONS и STATUS , предлагаемые React Joyride, мы прослушиваем события кликов, а затем выполняем некоторые условные операции.

На этом шаге при нажатии кнопки закрытия или пропуска мы закрываем тур. В противном случае, если нажата кнопка «Далее» или «Назад», мы проверяем, активен ли целевой элемент на странице. Если целевой элемент активен, то мы переходим к этому шагу. В противном случае мы находим цель следующего шага и повторяем.

Автоматический запуск тура с помощью useEffect

 useEffect(() => { if(!localStorage.getItem("tour"){ dispatch({ type: "START"}); } }, []);

На этом этапе обзор автоматически запускается при загрузке страницы или при монтировании компонента с помощью хука useEffect .

Нажмите кнопку «Пуск»

 const startTour = () => { dispatch({ type: "RESTART" }); };

Функция на этом последнем шаге start тур при нажатии кнопки «Пуск» на тот случай, если пользователь захочет просмотреть тур еще раз. Сейчас наше приложение настроено так, что тур будет показываться каждый раз, когда пользователь обновляет страницу.

Вот окончательный код функциональности тура в Tour.js :

 import React, { useReducer, useEffect } from "react"; import JoyRide, { ACTIONS, EVENTS, STATUS } from "react-joyride"; // Define the steps const TOUR_STEPS = [ { target: ".tour-logo", content: "This is our tour's logo.", disableBeacon: true, }, { target: ".tour-cart", content: "View the cart you've added here", }, { target: ".tour-contact", content: "Contact the developer", }, { target: ".tour-policy", content: "We accept returns after 14 days max", }, ]; // Define our state const INITIAL_STATE = { key: new Date(), run: false, continuous: true, loading: false, stepIndex: 0, steps: TOUR_STEPS, }; // Set up the reducer function const reducer = (state = INITIAL_STATE, action) => { switch (action.type) { case "START": return { ...state, run: true }; case "RESET": return { ...state, stepIndex: 0 }; case "STOP": return { ...state, run: false }; case "NEXT_OR_PREV": return { ...state, ...action.payload }; case "RESTART": return { ...state, stepIndex: 0, run: true, loading: false, key: new Date(), }; default: return state; } }; // Define the Tour component const Tour = () => { const [tourState, dispatch] = useReducer(reducer, INITIAL_STATE); useEffect(() => { if (!localStorage.getItem("tour")) { dispatch({ type: "START" }); } }, []); const callback = (data) => { const { action, index, type, status } = data; if ( action === ACTIONS.CLOSE || (status === STATUS.SKIPPED && tourState.run) || status === STATUS.FINISHED ) { dispatch({ type: "STOP" }); } else if (type === EVENTS.STEP_AFTER || type === EVENTS.TARGET_NOT_FOUND) { dispatch({ type: "NEXT_OR_PREV", payload: { stepIndex: index + (action === ACTIONS.PREV ? -1 : 1) }, }); } }; const startTour = () => { dispatch({ type: "RESTART" }); }; return ( <> <button className="btn btn-primary" onClick={startTour}> Start Tour </button> <JoyRide {...tourState} callback={callback} showSkipButton={true} styles={{ tooltipContainer: { textAlign: "left", }, buttonBack: { marginRight: 10, }, }} locale={{ last: "End tour", }} /> </> ); }; export default Tour; 

Заключение

Мы увидели, как создать тур по продукту в веб-интерфейсе с помощью React. Мы также рассмотрели некоторые рекомендации по повышению эффективности туров по продукту.

Теперь вы можете поэкспериментировать с библиотекой React Joyride и придумать что-то потрясающее в своем следующем веб-приложении. Я хотел бы услышать ваше мнение в разделе комментариев ниже.

Ресурсы

• Документация, React Joyride
• «Семь исключительных туров по продуктам и лучшие практики, которым они нас учат», Морган Браун, Telepathy
• «The Ultimate Guide to Product Tours and Walkthroughs», Маргарет Келси, Appcues