Формирование базы знаний – типичный кейс для любых компаний. Это идеальный способ аккумулировать, упаковать и тиражировать экспертизу в любой области. Базы знаний нужны для онбординга, подготовки менеджеров по продажам, сопровождения клиентов, формирования коммьюнити вокруг продукта или технологии, поддержки любых обучающих механик. Особый use-case – база знаний о продукте. И сегодня мы расскажем, как на BI-платформе Insight можно собрать кастомизированную, хорошо структурированную и красивую Wiki о любом продукте.
Зачем нужны базы знаний о продукте
База знаний – это, безусловно, показатель зрелости продукта. У вас могут быть отдельные гайды и инструкции и глубокая экспертная поддержка клиентов. Но на определенном этапе вы столкнетесь с тремя важными барьерами:
1. Инструкции сложны для понимания из-за сухого языка и небольшого количества примеров.
2. Любой продукт растет и развивается. Обновлять все источники информации вручную и плодить бесконечное количество небольших инструкций или создавать одну многостраничную PDF – это грустная перспектива.
3. Ресурсы поддержки как нефть – исчерпаемы. А большая часть вопросов пользователей повторяется, отбирая время экспертов на решение сложных или просто нетиповых ситуаций.
Все эти проблемы решаются с помощью структурированной онлайн-системы знаний о продукте, которую можно бесконечно пополнять. Напишите ее живым языком и наполните множеством примеров. Сделайте четкую разбивку контента на фрагменты и настройте систему внутренних линков между разными блоками.
Это идеальный способ оптимизировать поддержку, сэкономив время экспертам внутри команды, и возможность быстро обновлять информацию о продукте сразу для всех пользователей.
Как собирают базы знаний и при чем тут Insight
Есть типовые решения, которые даже не имеет смысла перечислять, поскольку вы о них хорошо знаете. Но если вы хотите кастомизировать свою базу знаний, сделать ее более узнаваемой, вписать в корпоративный стиль, типовые решения вам не подойдут. Собственный дизайн (цвета, шрифты, эффекты), сложная или просто неклассическая компоновка, дополнительные элементы (ссылки, кнопки, блоки, всплывающие окна) – все это типовыми решениями для сборки баз знаний не предусмотрено, поскольку визуализация для них вторична.
А вот Insight с его low-code конструктором и возможностью скомпоновать виджеты как угодно и кастомизировать любой из них – ровно то, то нужно.
И сейчас мы расскажем, как мы собрали Wiki об Insight на Insight. Немного полезной рекурсии в вашу ленту.
1. Структура
Прежде чем задать структуру wiki, расположение элементов на экране и приступить к верстке, мы изучили распространенные варианты баз знаний. Это различные онлайн-курсы, Википедия и другие форматы. Чтобы не уходить от привычного пользователям визуала, мы разбили содержимое на шесть глав-разделов, которые охватывают основные группы вопросов.
- Руководство пользователя — как работать с платформой Insight и пользоваться wiki
- Каталог виджетов — какие виджеты есть и как их настроить
- Видеоуроки — туториалы про систему
- Инструкция по работе с low-code редактором — что и как нужно верстать
- Каталог видов визуализаций — чартчузер визуализации данных в системе
- Библиотека CSS и HTML — все о настройке анимаций и других вау-эффектов из web-разработки
Иерархическое оглавление-меню, занимающее заметную часть страницы, мы решили поставить слева. На верхнем уровне иерархии находятся подразделы. Контент внутри подразделов выводится в ленте, которую можно скроллить.
Сверху мы разместили “шапку” с поиском и выходом в главное меню через логотип Insight. В разделах и подразделах используется 6 базовых вариантов отображения страниц:
1. Разводящий экран — это представление страницы с кратким описанием, названием и тегами:
2. Страницы с виджетами — страницы, на которых выводится плашка с примером виджета. Справа от него расположена кнопка вызова всплывающего окна с видеоуроком, переключение светлого/темного варианта и описание самого виджета. Ниже идет блок с основными особенностями и подробное описание каждой настройки, а также выпадающее окно со скриншотом настройки в действии:
3. Табличные страницы — на таких страницах сперва идёт небольшое описание подраздела, а далее — информация в табличном виде без подложки:
4. Страницы и всплывающие окна с видеотуториалами — включают небольшое описание видео и само видео на подложке:
5. Страницы с инструкциями — текст с картинками и скриншотами, которые его иллюстрируют:
6. Страницы визуализаций — набор визуализаций на все случаи. С названиями, тегами и кнопками на подложках для копирования стилистики. Пользователи могут использовать эти наборы в своих проектах.
2. Поиск
Мы решили, что для удобного поиска пользователю нужно поле ввода, которое занимает большое пространство, есть на всех страницах и не подвержено скроллу, как это часто бывает на других платформах. Мы сделали отдельный поиск для каждого раздела, но если у пользователя нет понимания, какой раздел нужен, то он может искать сразу везде.
Для удобства можно не только вводить символы в поисковую строку, но и просто скроллить все варианты в списке. Каждая страница в меню поиска имеет наименование и иконку, как в боковом меню. Есть название раздела, к которому относится страница, краткое описание содержимого и теги, относящиеся к контенту страницы.
Так как пользователь не всегда знает страницу, которая ему нужна, можно искать по названию, разделу, описанию, тегу, по целому слову и даже по нескольким символам — система подберет все возможные совпадения.
3. Другие детали
Если в каком-либо разделе нужно подсветить основную мысль или что-то важное, мы делаем выноску, попутно выделяя его цветом:
В разделе “Каталог виджетов”, где много скриншотов, настройки виджетов помещаются во всплывающие окна, чтобы не перегружать экран информацией.
Для удобства мы делаем кросс-ссылки на видео в каждом разделе с текстовой информацией, так как текст не всегда усваивается лучше.
Для всех элементов использовалась корпоративная палитра из нашего брендбука, особое внимание мы уделяли тому, чтобы текст нигде не сливался и одинаково хорошо читался на мониторах любого размера и разрешения. Пользователь, который увидит наш сайт или презентации, сразу поймёт, что wiki — тоже наш продукт.
Какие виджеты в Insight можно использовать для создания wiki
- Группа виджетов из раздела “Расположение”: Разметка, Контейнер, Ивент-контейнер, Тайл, Контент шаблона. Они не видны конечному пользователю, но позволяют правильно расположить все элементы на страницах.
- Набор виджетов из раздела “Компоненты”: Текст, Кнопка, Ссылка, Выпадающий список, Картинка, Iframe. Эти виджеты обеспечивают базовые функции и визуал wiki:
- Набор виджетов из раздела “Навигация”: Меню, Фильтр, Кнопочный фильтр и другие.
- Комплекс виджетов “Конструктор таблиц”: позволяют собирать кастомные конструкции в табличном формате.
Wiki-эффект: какой результат мы получили
За два года база знаний об Insight переросла сборник полезной информации для тех, кто верстает в Insight дашборды и приложения. Wiki стала настоящим “лицом” нашей системы, и в нее частенько заглядывают пользователи, партнеры и потенциальные заказчики. Ведь там содержатся ответы на подавляющее большинство вопросов об элементах системы и ее эксплуатации.
В июне мы обновили нашу Wiki, и вот что говорит об этом исследование пользовательского опыта, которое мы провели в конце июля:
- Скорость поиска увеличилась на 50%
- Удовлетворенность пользователей поиском информации выросла на 30%
- В поддержку стало приходить на 17% меньше запросов по стандартному функционалу системы
- После обновления дизайна пользователи стали выполнять свои задачи на 6% быстрее
- Удовлетворенность пользованием вики выросла на 79%
- Число обращений за подпиской и консультацией о покупке системы среди людей, которые видели wiki, выросло на 11%
Скоро на встроенном в Insight маркете готовых к быстрому внедрению шаблонов приложений появится "База знаний". Как и все в Insight, вы сможете кастомизировать этот шаблон и сделать все так, как хочется именно вам. Следите за новостями!
Полезные ссылки
https://partner.goodt.me/wiki/#/ - Вики Insight и видеоуроки
https://goodt.me/ - официальный сайт компании Goodt
https://goodt.me/insight/ - подробнее про Insight / заказать демо
https://t.me/goodt_official - читайте нас в Телеграм.