Следите за нами:
Про технологии Про бизнес Про опыт Про книги Прокачай!

Кратко и к месту: как правильно составлять инструкции пользователям

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

Но в большинстве случаев нестандартные решения приводят к потере текущих пользователей и увеличивают стоимость привлечения новых.

Почему после запуска проекта ожидания не равны результатам

Наблюдения за продвижением разных онлайн-сервисов показывают практически одинаковые результаты. Если после запуска сервиса опросить первых 100 пользователей, мы получим примерно такую картину:

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

Большинство пользователей не разбираются в функциях и навигации онлайн-сервиса; 40% пользователей не читают инструкции на сайте и обращаются за помощью к консультантам. Лишь 10% приступают к работе с сервисом без дополнительной помощи, поскольку имеют необходимый пользовательский опыт.

Как сделать сервис более понятным

Известный специалист в области юзабилити Якоб Нильсен утверждает, что “система должна быть равным образом приемлема для двух групп пользователей - новичков и опытных” (принцип гибкости и эффективности, одно из “10 эвристических правил дизайна пользовательского интерфейса”).

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

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

О чем спрашивают начинающие пользователи

Новые пользователи задают два вопроса:

  1. С чего начать, чтобы пользоваться сервисом? (пользователь плохо понимает сервис).
  2. Как выполнить ту или иную задачу? (не понимает последовательности действий, сценария работы).

Эти данные означают, что пользователи не получают нужной информации из инструкций и пособий по работе с сервисом:

  • Пользователь не нашел инструкцию.
  • Пользователь не разобрался в многостраничной документации.

Якоб Нильсен еще в 1995 году сформулировал правило: “лучше всего, если системой можно пользоваться, не читая документацию, но при необходимости нужно обеспечить справочную информацию, которая не должна быть слишком объёмной и должна предлагать список конкретных действий”.

Предоставьте пользователям доступные и понятные инструкции

В “10 эвристических правилах дизайна пользовательского интерфейса” Якоба Нильсена содержится целый ряд рекомендаций и правил по оформлению пользовательских инструкций.

Мы адаптировали эти советы.

Хорошая справочная статья

Плохая справочная статья

Содержит четкие описания шагов, которые приведут пользователя к цели

Предлагает пользователю самостоятельно определить проблему и выбрать решение из списка

Предлагает инструкции для решения только текущей задачи

Нажмите «ОК» и ваше письмо уйдет адресату

Содержит список советов, относящихся к данному этапу работы с системой:

Чтобы написать письмо – нажмите «Создать»
Чтобы удалить письмо – нажмите «В Корзину»
Чтобы отправить письмо – нажмите «ОК»

Размещена на видном месте, появляется, если пользователь зашел на сайт и 10 секунд не выполняет никаких действий

Спрятана в разделе «Помощь по сайту», который никто не читает

Умещается в нескольких предложениях

Содержит много страниц и ссылок

Правила американского юзабилиста дополняет российский специалист, автор книги “Shareware: профессиональная разработка и продвижение программ” Станислав Жарков:

“При описании пути решения проблемы, как и при написании любой документации, нужно избегать составления слишком объемных текстов, т. к. пользователи будут просто пробегать их глазами, не вникая в смысл написанного, подобно тому, как человек, просматривающий газету, сначала останавливает взгляд на коротких заметках, пропуская большие материалы. Лучше всего составить что-то наподобие пошаговой инструкции, каждый шаг из которой составляет 1—2 предложения” (“Shareware: профессиональная разработка и продвижение программ”, СПб., 2001).

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

Создаем инструкции с помощью подсказок

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

Известные компании, например, Google и Facebook, помогают пользователям подсказками. Вы встречали их, если создавали на Facebook страницу компании или работали с текстом в Google Docs.

1.png

А это пример подсказки для пользователей Google Plus.

2.png

Краткие инструкции в подсказках обращают внимание пользователей на новые или дополнительные функции. Система автоматически показывает их новым пользователям в начале работы. Они отображаются лишь один раз, их можно закрыть (пропустить), либо перейти в справочный раздел ресурса и прочитать больше. Чтобы объяснить последовательность действий, разработчики сервисов объединяют такие подсказки в демо-туры. Подобные инструкции предлагают своим пользователям Google Plus и Youtube.

Чек-лист для разработки эффективной инструкции в форме подсказок

1. Опишите подсказками конкретные шаги пользователей.

2. Создайте обучающие туры для сценариев работы.

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

4. Подскажите пользователям, как ускорить выполнение часто повторяющихся действий.

5. Показывайте подсказки автоматически только один раз, при первом посещении пользователя.

6. Разрешите пользователю включать демо-туры в любой момент.

7. Оформите подсказки в едином для сервиса дизайне.

Инструменты для создания подсказок

Для создания одностраничных инструкций (для одного окна интерфейса) подходят готовые библиотеки кода Java Script: Intro.js и Bootstro.js. Для создания кросс-страничных подсказок подойдут сервисы Hintarea и Walkme.com.

Подсказки могут помочь тем, кто:

  • установил новое мобильное приложение;
  • воспользовался онлайн-сервисом (системой бронирования, доской объявлений);
  • оформляет заказ в интернет-магазине;
  • работает с бизнес-приложением (CMS, CRM).

Пример: подсказки для обучения пользователей CMS Wordpress

Представим типичную ситуацию. Веб-студия разработала сайт и передала его компании-владельцу. Наполнять сайт контентом будет менеджер компании. Скорее всего, он не имеет серьезного опыта работы с CMS (пусть в нашем примере это будет WordPress). Панель администрирования вызовет у него ряд вопросов:

  • с чего начать работу;
  • что означают названия и термины;
  • где найти справочную информацию;

3.png

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

Можно придумать десятки подсказок и объединить их в демо-туры, чтобы не заставлять пользователя пролистывать страницы документации или просматривать видео-уроки. Чтобы понять, какие бывают подсказки, напишем пояснения к ключевым задачам.

Объясним пользователю, с чего начинать

Пользователь нажимает на кнопку “Добавить новую”. Появляется окно редактирования новой страницы и следующая подсказка.

4_1.png

Научим правильно заполнять формы

Краткие рекомендации помогут пользователям делать меньше ошибок.

5_1.png

Обратим внимание на важные функции

Формируем понимание работы с контентом

6_1.png

Объясним специальные термины

7_1.png

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

Еще раз о пользе

Ценность подсказок для пользователей очевидна – те, кому раньше требовалась помощь, осваивают сервис или приложение самостоятельно.

Разработчики приложений или сервисов сэкономят на подготовке и публикации технической документации и справочных материалов. Подсказки снизят нагрузку на службу техподдержки.

Владельцы интернет-магазинов, разместившие подсказки, например, на странице оформления заказа, избавятся от части «брошеных корзин», повысят конверсию и доход магазина.

Изучайте реакцию пользователей на продукт, создавайте понятные и доступные инструкции. Это уменьшит потери потенциальных клиентов и сократит расходы на их привлечение.

Автор - Олег Гончаренко, менеджер сервиса Hintarea

---

Это перевод статьи, ранее опубликованной в американском журнале для интернет-предпринимателей sandhill.com.

Специально для онлайн-издания “ПроГрабли” материал значительно расширен, главным образом за счет включения информации по аспектам UX-дизайна при разработке веб-продукта.