Справочный центр как продукт, или Как мы улучшаем пользовательский опыт через Справку

Почти у каждого сервиса есть справочный центр или какой-то набор инструкций по тому, как им пользоваться. Это снижает нагрузку на поддержку и помогает пользователям самостоятельно разобраться в продукте. В статье наш опыт работы над Справочным центром Топвизора и советы по тому, как сделать Справку любого сервиса понятнее и лучше.

Писали Справку для пользователей Топвизора и статью для читателей vc Юля Федотова, директор по продукту, и Аня Шитикова, технический писатель. Все скриншоты реальные и сделаны в нашем Справочном центре.

Справочный центр как продукт, или Как мы улучшаем пользовательский опыт через Справку

Справочные центры относятся к self-service-системам, то есть системам самообслуживания, которые позволяют пользователю получить ответ на свой вопрос без обращения в службу поддержки.

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

Но и это не все. Справочный центр, как правило, высоко ранжируется в поисковиках и может приносить сайту неплохой трафик. Это делает его негласным лицом продукта — сущностью, с которой клиент начинает знакомство с продуктом, — наравне с лендингами и постами в соцсетях.

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

Раньше мы занимались Справкой по остаточному принципу: обновляли ее тогда, когда на это хватало времени у остальных сотрудников. Несмотря на то что Топвизор существует с 2013 года, первого технического писателя мы наняли только в 2022 году. В тот момент она уже рассказывала просто про другой продукт, не тот, который существовал на самом деле, — такие в ней накопились различия.

Теперь мы подходим к Справке как к продукту. Что это значит?

Относимся к обновлению Справки не как к какой-то конечной задаче по добавлению описаний отдельных фич, а как к бесконечному процессу, бесконечность которого — это благо. Необходимость постоянно обновлять Справку означает, что в Топвизоре появляются новые функции и разделы, а продукт развивается. Ведь всегда найдётся, что улучшить.У вас же наверняка бывало такое: вы смотрите на то, что сделали год назад и считали верхом своего профессионального успеха, и сейчас это уже не кажется вам чем-то впечатляющим? Конечно, это не значит, что тогда вы сделали плохо! Просто вы выросли и смотрите на результат под другим углом. Живем по принципу кайдзен, Continuous Improvement 🤘
Добавляем разноформатную информацию для разных пользователей — как совсем новичков, так и тех, кто хочет использовать продукт по максимуму. Раньше Справка была просто набором инструкций, а теперь это мультиформатный гайд, в котором есть и лайфхаки, и FAQ, и подстелена соломка на случай возможных казусов, и даже можно сразу написать в чат, если что-то не получается.
Работаем отдельной командой — командой Справки. Пусть пока это всего один технический писатель и директор по продукту, но это стабильный тыл, который на постоянной основе поддерживает актуальность Справки и улучшает её.
Работаем в связке с другими продуктами и командами: Топвизор-Журналом, соцсетями, агентами Поддержки. Откуда бы клиент ни начал знакомство с Топвизором, у него должно сложиться однородное положительное впечатление о продукте. В Справке мы ссылаемся на подробные гайды в Топвизор-Журнале, в Журнале — на понятные инструкции Справки, где есть каждая кнопочка. А Поддержка ссылается и на то, и на другое, чтобы каждый пользователь точно решил свою задачу в сервисе, плюс помогает писать Справку: рассказывает, с какими проблемами чаще всего встречаются пользователи и где они могут оступиться.

По структуре Справка Топвизора состоит из разделов, посвященных разным инструментам. И каждый раздел начинается с исчерпывающего объяснения, зачем пользователю может понадобиться этот инструмент, какие у него есть преимущества и какие данные он получит на выходе. Преимущества оформлены как маркированный список, и их удобно воспринимать визуально.

Вот как, например, изменилась статья про один из инструментов Топвизора — Снимки выдачи:

Или статья про Радар:

Понятно ли было, зачем нужно отслеживать изменения на сайте? Почему это может быть полезно? Не сказали бы.

Пользователь, у которого стоит цель собрать сайты в ТОПе или следить за падениями своего сайта, сразу поймет, что эти инструменты ему пригодятся. А пользователь, который никогда об этом не задумывался, заинтересуется инструментом и попробует внедрить его в работе.

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

Пишем инструкции так, чтобы их можно было прочитать без слов — только по иконкам и названиям кнопок, которые мы выделяем жирным.

А теперь попробуйте прочитать так:

Согласитесь, инструкция всё еще понятна.

Раньше мы делали кучу скриншотов и почти ничего на них не отмечали. Справка не становилась проще из-за этого, только увеличивалось время для скролла статьи.

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

У нас в Справке есть блоки «Обратите внимание» — это желтый блок с роботом и текстом. В нем мы обращали внимание пользователя на какие-то особенности сервиса. Как изменились эти блоки:

Мы перестали писать фразу «Обратите внимание!». Камон, он желтый, с картинкой — разве этого недостаточно, чтобы на него обратили внимание?
Вместо нее стали выделять жирным заголовок в повелительном наклонении. В этом заголовке суть того, что мы советуем сделать в блоке. Так зачем прятать этот посыл дальше по тексту? Если пользователь заинтересуется, он прочитает блок полностью.
Чтобы совет не смотрелся уж очень агрессивно, добавляем в заголовок эмодзи. Он смягчает повелительное наклонение. Сравните:
Иди копай канаву.
Иди копай канаву 😉
Теперь мы используем этот блок не только для предупреждения пользователя и предотвращения возможных проблем, но и для рекламы других инструментов сервиса и лайфхаков.

Кроме блоков «Обратите внимание», у нас в Справке есть FAQ — обычный блок «вопрос — ответ», какие вы могли видеть даже в поисковике.

Мы используем FAQ, чтобы предупреждать вопросы пользователей. Эти вопросы мы берем от агентов Поддержки, а еще позволяем себе немного «оторваться»: ToV Справки немного сухой, но в FAQ мы пишем вопросы, максимально приближенные к реальным вопросам пользователей, которые часто не стесняются в выражениях.

Забавный факт — сначала был написан этот FAQ:

А потом нам написали такой тикет:

Понимаем пользователей с полуслова 😇

Self-service-системы могут иметь неприятный эффект: если пользователь не может найти ответ на свой вопрос, он начинает закипать и искать способ связи с Поддержкой. Самое худшее в этой ситуации — если он вообще не найдет, как связаться с нами, или будет искать очень долго и напишет уже раздосадованным.

В Топвизоре можно написать в Поддержку с каждой страницы сайта через конвертик в шапке. Но на страницы, которые вызывают самое большое количество вопросов, мы вставляем блок взаимодействия с тикетницей, чтобы при необходимости пользователь сразу написал нашей Поддержке.

Иногда это может быть просто ссылка, которая открывает окно с тикетами:

Еще один повод запомниться — смешные примеры на скриншотах. Чтобы пользователь подумал: «А, этот тот сервис, где пример про то, как помыть кота?» Этим мы вызываем положительные эмоции и улыбку, которые будут связаны с Топвизором.

Хороший продукт хорош во всем, но отличным его делают приятные мелочи. Мы подсмотрели, как оформляют ссылки лидеры рынка, и стали делать так же. Например, эту стрелочку взяли у Figma. Мелочь, которая сильно меняет восприятие ссылки.

Чтобы делать Справочный центр понятнее и лучше, мы:

во вступлении статьи рассказываем, зачем нужен инструмент и какие данные в нём можно получить;
в заголовках используем союз «как» и конкретное действие, чтобы пользователю было понятно, есть на странице ответ на его вопрос или нет;
в инструкциях вставляем кнопки так, что интерфейс становится понятен даже без чтения текста;
в скриншотах показываем, куда нужно нажать, чтобы получить желаемое;
используем блоки FAQ и «Обратите внимание», чтобы предугадать проблемы, отработать возражения и рассказать о best practices по использованию сервиса;
добавляем кнопку чата в особо сложные статьи, чтобы пользователь все-таки написал, если не удалось разобраться с одной Справкой;
уделяем внимание приятным мелочам: в примерах используем забавные фразочки про то, как помыть кота, а у ссылок ставим стрелочку, чтобы выглядело круто.

Делитесь в комментариях, нашли ли вы среди этих советов что-то полезное для себя? И как сами работаете над справочным руководством?

А если вы хотите больше узнать о внутрянке небольшой IT-компании, подписывайтесь на Юлин канал «Продакт тётя Юля». Там она пишет о том, что происходит в Топвизоре и с чем приходится сталкиваться в процессе управления продуктом.