Когда пользователь впервые открывает ваше приложение, он может чувствовать себя перегруженным новым интерфейсом и не знать, с чего начать. Один из способов помочь пользователям чувствовать себя более комфортно — предоставить подсказки и пояснения к различным частям приложения. Например так устроен гид в Wunjo AI о котором я писал ранее.
Видео о том, как будет выглядеть конечный результат по ссылке.
Вот несколько вариантов реализации подсказок в HTML при первом запуске приложения:
1. Используйте всплывающие подсказки.
Подсказки — это небольшие всплывающие окна, которые появляются, когда пользователь наводит курсор на элемент. Вы можете добавить всплывающую подсказку к элементам, которые необходимо объяснить пользователю при первом открытии приложения. Всплывающие подсказки — отличный вариант для предоставления контекста и быстрых объяснений элементов пользовательского интерфейса, не прерывая работу пользователя.
2. Используйте модальные окна.
Модальные окна — это всплывающие окна, которые могут отображать информацию для пользователя. Вы можете использовать модальные окна для отображения подсказок пользователю при первом открытии приложения. Модальные окна — отличный вариант для предоставления более подробных объяснений элементов пользовательского интерфейса, поскольку они позволяют отображать больше информации в ограниченном пространстве.
3. Используйте плагины гида по приложению.
Доступно множество плагинов гидов, которые позволяют создавать пошаговые гайды для пользователя. Эти гайды могут включать подсказки, примеры и пояснения к различным частям приложения. Плагины гиды — отличный вариант, если вы хотите предоставить исчерпывающий обзор функций и возможностей приложения.
4. Используйте экраны приветствия.
Экран приветствия может предоставить обзор приложения и дать пользователю представление о том, чего он может ожидать. Вы можете использовать этот экран для предоставления подсказок и советов по использованию приложения. Экраны приветствия — отличный вариант, если вы хотите кратко рассказать об основных функциях приложения.
5. Используйте встроенные подсказки.
Встроенные подсказки — это небольшие фрагменты текста, которые можно добавить непосредственно в пользовательский интерфейс приложения. Вы можете использовать встроенные подсказки, чтобы предоставить объяснения или инструкции для определенных элементов в приложении. Встроенные подсказки — отличный вариант, если вы хотите предоставить быстрые и контекстные объяснения элементов пользовательского интерфейса.
Как насчёт практической части, прочитав которую вы сможете сразу перенести в проект? Начнём же!
Разберём самый простой способ создания гида по приложению на примере Intro.js и получим результат как из #видео моего нового open-source проекта для синтеза речи из текста, при помощи нейронных сетей. В отличии от аналогов, в нем можно создавать мульти диалоги на русском и английском, ставить локально на свой ПК и оно полностью бесплатно. Но, вернемся к создания гида по приложению.
Если вы решите использовать плагин гида, одним из вариантов является #библиотека Intro.js. Intro.js — популярная библиотека с открытым исходным кодом для создания пошаговых представлений и экскурсий. Вот как вы можете его использовать:
Включите файлы Intro.js и introjs.css в свой HTML-файл:
```
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intro.js/3.4.0/introjs.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/intro.js/3.4.0/intro.min.js"></script>
```
Добавьте атрибут data-intro к элементам, которые вы хотите выделить или сделайте это в JavaScript, затем введите описание элемента или действия.
Например для HTML:
```
<button data-intro="Нажмите эту кнопку, чтобы создать новый элемент">Создать</button>
```
И для JavaScript:
```
var intro = introJs();
intro.setOptions({
steps: [
{
element: '#button-id', // Указываем id элемента
intro: 'Это кнопка',
},
{
element: '.list-id', // Можем даже указать класс
intro: 'Это лист',
}
]
});
intro.start(); // Запуск гида по приложению
```
В этом примере метод setOptions() принимает объект, содержащий массив шагов. Каждый шаг — это объект, который определяет элемент для выделения и всплывающую подсказку для отображения. Вы также можете изменить название кнопок в setOptions() или добавить некоторые опции, как скрыть шаги, итд. В библиотеке Intro.js доступно множество других опций, которые вы можете использовать для настройки своего гида.
Вот и все! С помощью этих простых шагов вы можете создать простой обзор своего веб-приложения с помощью библиотеки Intro.js. Ссылка на документацию intro.js.
Однако, по умолчанию Intro.js будет показывать экскурсию по приложению каждый раз при загрузке страницы. У трушных программистов конечно есть много решений, например, вы можете использовать файлы cookie, чтобы отслеживать, видел ли пользователь введение, и показывать его только один раз.
Вот пример того, как вы можете добиться этого, используя js-cookie:
```
// Загружаем библиотеку js-cookie
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.2.1/js.cookie.min.js"></script>
```
```
// Проверить, есть ли куки
if (!Cookies.get('introCompleted')) {};
```
Вы также можете принудить браузер хранить специфичный cookie. Вот пример:
```
document.cookie = "introCompleted=true; expires=Fri, 31 Dec 9999 23:59:59 GMT";
if (document.cookie.indexOf('introCompleted=true') !== -1) {
// Интро уже завершено, больше не показывать
} else {
// Интро не завершено, покажите его
}
```
Не хотите использовать Intro.js? Вот, вам ещё 3 альтернативы для создания гида по приложению.
- Shepherd
- Joyride
Эти плагины предлагают различные функции для создания экскурсий по вашему приложению, включая всплывающие подсказки, модальные окна, выделение определенных элементов и многое другое. Вы можете посетить их веб-сайты, чтобы увидеть примеры и документацию для каждого из них.
А теперь точно всё! Так работает гид по приложению Wunjo AI для новых пользователей. Попробуйте и посмотрите как это работает в Wunjo AI.
