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

Существует множество видов предоставления справочной информации пользователю – это и FAQ (frequently asked questions, часто задаваемые вопросы) и онлайн справка и руководство пользователя (user guide) и популярные сегодня подсказки (coachmarks, см. пример ниже), обучающие видео и другие.

Существуют разные причины, по которым требуется написать руководство пользователя системы. Начиная с просьб заказчика (в моей практике был случай, когда заказчику надо было поставлять руководство пользователя после каждой итерации, чтобы с его помощью он смог бы провести приемочное тестирование функциональности итерации) и заканчивая условиями контракта, касающимися поставки готового ПО, если говорить о разработке ПО на заказ. В случае разработки собственного продукта написание руководства пользователя тоже часто имеет место.

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

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

1. Стандарты

Часто бывает нужно написать документ, который бы удовлетворял требованиям действующих стандартов. Это могут быть:

• IEEE Std 1063-2001, «IEEE Standard for Software User Documentation»;
• ГОСТ 19:
  • ГОСТ 19.402-78 ЕСПД. Описание программы;
  • ГОСТ 19.502-78 ЕСПД. Общее описание. Требования к содержанию и оформлению;
  • ГОСТ 19.503-79 ЕСПД. Руководство системного программиста. Требования к содержанию и оформлению;
  • ГОСТ 19.504-79 ЕСПД. Руководство программиста. Требования к содержанию и оформлению;
  • ГОСТ 19.505-79 ЕСПД. Руководство оператора. Требования к содержанию и оформлению.

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

Также может оказаться полезной книга Юрия Кагарлицкого MetaGuide. Руководство для разработчиков технической документации к программному обеспечению.

2. Структура

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

Хорошее руководство пользователя должно содержать:

• Аннотацию , в которой приводится краткое изложение содержимого документа и его назначение. Также рекомендуется писать краткую аннотацию в начале каждого крупного раздела.
• Введение , содержащее информацию о том, как лучше всего использовать данное руководство
• Содержание
• Главы , описывающие, как использовать ПО
• Глоссарий и
• Предметный указатель

Также руководство пользователя может содержать:

• FAQ и ответы на них
• Ссылки на дополнительную информацию по системе
• Раздел , описывающий возможные проблемы и пути их решения

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

3. Пользователи

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

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

Уважайте пользователей системы, не пишите инструкции в пренебрежительном стиле.

4. Особенности изложения

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

Стиль руководства должен быть нейтрально-формальным – использование стилистически окрашенных слов отвлекает пользователя от сути.

Для составления хорошего документа пригодятся знания грамматики и немного психологии.

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

Хорошо : In File menu, select Save item .
Хуже : Select Save item from File menu.

4.2 Используйте повелительное наклонение , не употребляйте вежливые обороты (please, could и т.д.) — излишняя вежливость именно здесь будет помехой.

Хорошо : Click Logout .

Хуже : It is needed to click Logout to log out current user account from the system.

Хуже : If user wants to log out current user account from the system(s)he needs to click Logout.

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

Хорошо:
To create project :

1. Click the Create button on toolbar.
2. On the Create Project overlay fill in all mandatory fields.
3. Click the Save button to save the project.

Хуже : To create project click the Create button on toolbar, on the Create Project overlay fill in all mandatory fields, click the Save button to save the project.

4.4 Не используйте будущее или прошлое время . Например, часто встречаются руководства, в которых реакция системы на действие пользователя передается фразами, сформулированными в будущем времени. У ПО нет прошлого или будущего: всё случается в настоящем как прямой результат конкретного действия пользователя. Как только событие случается, ПО реагирует.

Хорошо : When user clicks the Start button, the program starts the process.

Хуже : When user clicks the Start button, the program will start the process.

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

Например, глагол «press» означает нажатие клавиши на клавиатуре, а «click» – нажатие кнопки или значка в окне программы при помощи мыши, а «hit» вообще является жаргонным словом.

Разумеется, орфографические ошибки недопустимы.

4.6 Не используйте синонимы для одного и того же термина. В IT литературе на английском (или любом другом) языке есть стандартный набор глаголов, обозначающих действия (click, double-click, select, type, press и т.д.) и такой же стандартный набор названий элементов управления. Определитесь с терминологией и придерживайтесь ее в рамках всего документа.

Например, не допускайте, чтобы в одной части документа выпадающий список назывался dropdown, а в другой точно такой же элемент – combobox или dropdown list. Это путает пользователя.

4.7 Разумно используйте сокращения и исключите жаргон .

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

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

5. Внешний вид

5.1 Продумайте стиль документа . Это может быть корпоративный шаблон или цветовая схема ПО или специально сделанный для документа дизайн.

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

5.2 Не экономьте место – разбивайте текст на короткие абзацы, используйте сравнительно крупные заголовки, начинайте новый раздел с новой страницы. Это облегчит восприятие прочитанной пользователем информации.

5.3 Используйте пиктограммы и иллюстрации . Существует мнение, что не стоит увлекаться иллюстрациями, а также включать в текст пиктограммы (icons) в руководстве пользователя. Однако графическая информация всегда лучше воспринимается и запоминается, поэтому снимки экрана и нужные пиктограммы должны присутствовать в хорошем руководстве в достаточном, но разумном количестве.

6. Поддержка

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

Заключение

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

Помните главное: документ должен помогать пользователям.

Статью подготовила

Тарасюк Надежда, участник сообщества сайт,

аналитик с 6-летним опытом в сфере.

Руководство пользователя - это справочник на бумажном или цифровом носителе (в формате PDF или XPS), в котором приводятся инструкции по эксплуатации чего-либо или описывается правильный порядок действий для совершения какого-нибудь процесса. Хотя когда человек слышит словосочетание "руководство пользователя", он обычно представляет руководство по использованию определенной программы, инструкции по эксплуатации есть у компьютерной и бытовой техники (телевизоры, стерео-системы, телефоны, мп3-плейеры, садовая техника и и т.д.). Хорошее руководство пользователя рассказывает об основных функциях прибора или программы и объясняет, как правильно ими пользоваться, при этом информация обычно хорошо структурирована. Эта статья расскажет, о чем важно помнить при создании и оформлении руководства пользователя.

Шаги

Часть 1

Определите, кто ваш читатель. Чтобы создать хорошее руководство пользователя, нужно понимать, какой человек купит то устройство, к которому вы создаете инструкцию. Можно записать свои мысли, а можно просто представить себе этого человека. Это полезно делать, если вы работаете в команде по созданию документации и если вы участвуете в разработке продукта от самого начала до конца. Подумайте о следующем:

• Где человек будет пользоваться инструкцией по эксплуатации: дома, на работе, в машине, в интернете? Это определит не только содержание, но и стиль документации.
• Как человек будет пользоваться инструкцией? Если человеку потребуется лишь изредка заглядывать в руководство пользователя, значит, инструкция должна быть оформлена в сжатой форме. Если руководством будут пользоваться часто, особенно в самом начале, вам следует включить целый раздел о том, как начать пользоваться устройством или программным продуктом, и подробно описать все самые важные функции.
• Как много опыта должно быть у человека? Если ваш товар относительно новый или существенно отличается от похожих товаров, вам нужно будет включить информацию о том, чем этот товар отличается от аналогов, и предоставить пользователю подробные инструкции. Если товар связан с частыми проблемами (например, с большим количеством программ), опишите, что следует делать, когда проблема возникнет.

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

   • Иногда полностью исключить технические термины невозможно (например, если вы составляете инструкцию к программе для создания графиков и диаграмм, где помимо стандартных средств также используются графические инструменты Фибоначчи). В этом случае полезно дать определение термину и краткое описание (то есть что такое графики Фибоначчи и как они используются в анализе финансовых показателей).

2. Часть 2

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

   1. Продумайте обложку и оформление первых страниц разделов. Вам потребуется создать обложку, если инструкция занимает несколько страниц. Необходимо будет также оформить страницы с названием разделов для инструкций, где общее количество информации занимает более 4 страниц.

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

   2. Ссылки на дополнительную документацию разместите в введении. Если руководство состоит из нескольких брошюр, укажите все номера брошюр в начале. Кроме того, здесь также следует разместить раздел "Как использовать эту инструкцию по эксплуатации", если вы решили, что такой раздел необходим.

      Если количество страниц превышает 10 штук, вам понадобится оглавление.

   3. Основу руководства по эксплуатации должны составлять инструкции и информация о составных частях товара. Как правило, инструкции разбивают на блоки, и в каждом блоке можно указать, в каких разделах пользователю стоит искать ту или иную информацию. Так пользователю будет проще и быстрее находить нужные ему сведения.

      • Процессы должны быть описаны четко и последовательно. Начните с общего описания задачи, затем объясните, что пользователю нужно будет сделать и какой результат он должен будет получить. Все шаги должны быть пронумерованы, а начинаться предложения должны с глаголов.
      • Справочные материалы должны включать список функций, способы диагностирования неисправностей и часто задаваемые вопросы. В конце руководства пользователя можно разместить краткий словарь терминов и алфавитный указатель, хотя основные термины часто выносятся в начало. Алфавитный указатель рекомендован для инструкций, чей объем превышает 20 страниц.

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

      • После того, как получите графическое изображение, сохраните его в сжатом формате. Вам также может потребоваться уменьшить размер рисунка, чтобы он помещался на страницу, но размер не должен быть слишком маленьким, так как иначе пользователь не сможет рассмотреть, как и что следует делать. Если потребуется, можно разбить изображение на несколько частей и описать каждую из них.
      • Если вы используете несколько изображений, они должны иметь одинаковый размер, пропорции и разрешение. Такие изображения будут более понятны и приятны читателю. При создании скриншотов убедитесь, что вы используете стандартную цветовую схему (для случаев, когда руководство печатается в цвете).
      • Хотя графические редакторы (например, Photoshop и Paint Shop Pro) удобны для создания скриншотов, лучше пользовать специальными программами (например, SnagIt), поскольку они позволяют сразу же быстро и легко отредактировать, сохранить и подписать все изображения.

      Часть 3

      Оформлении руководства по эксплуатации

      1. Выберите читаемый шрифт. Хотя компьютеры поддерживают разные шрифты, руководство пользователя должно быть хорошо читаемым, поэтому отдавайте предпочтение самым простым. Лучше всего подобрать несколько шрифтов, которые хорошо смотрятся вместе. Есть два типа шрифтов: с засечками и без засечек.

         • У шрифтов с засечками есть небольшие черточки по краям линий. К таким шрифтам относятся Times New Roman, Baskerville и Book Antiqua. Такие шрифты подойдут большим объемам текста, напечатанного 10 или 12 размером и составляющего основу руководства пользователя.
         • Шрифты без засечек имеют простые линии без украшений. Это такие шрифты, как Arial, Calibri и Century Gothic. Шрифты без засечек лучше смотрятся в текстах, напечатанных 8 или 10 шрифтом в руководствах в формате PDF или web-документа. Чем крупнее шрифт, тем сложнее его читать без засечек. Однако эти шрифты можно использовать и для крупного текста - например, для набора заголовков. Шрифты без засечек подходят для набора цифр в таблицах и колонках.
         • Следует выбирать простые шрифты наподобие Arial или Times New Roman, хотя для цитат подойдет какой-нибудь более сложный шрифт. Если вы пишете руководство пользователя для фэнтезийной игры, можно выделить витиеватым шрифтом названия глав. Допускается также выделение цитат курсивом.
         • После того, как выберите шрифты, создайте тестовую страницу, чтобы убедиться, что эти шрифты сочетаются между собой на бумаге. Покажите эту страницу человеку, который одобряет макеты, прежде чем отдать руководство пользователя в печать.

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

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

      3. Подумайте над типом переплета. Если в вашем руководстве пользователя больше 4-х страниц, вам потребуется переплет. Документы для внутреннего пользования обычно скрепляют степлером в углу, но если вы будете вкладывать свое руководство в коробку с товаром, вам нужно будет подойти к этому вопросу более ответственно. Есть три типа переплета:

         • Скрепление скобой. Этот тип подходит для брошюр размерами 21x 27.5 см, 21x35 см или 11 x 27.5x42.5 см. Большинство недорогих инструкций по эксплуатации, которые состоят из 48 страниц и менее, переплетаются таким образом.
         • Переплет внакидку. Так переплетают большинство обычных инструкций по эксплуатации, не считая инструкций к автомобилям, хотя некоторые длинные руководства также переплетаются таким образом. (Paint Shop Pro изначально поставлялся именно с таким руководством пользователя.)
         • Переплет с проволочной спиралью. Таким способом переплетают руководства, которые используются в более суровых условиях, например, на улице, где скобы могут с легкостью сломаться или разойтись. В некоторых инструкциях по применению с таким переплетом также встречаются ламинированные страницы, которые не промокают и не пачкаются в грязи.

      4. Сверстайте документ. В большинстве текстовых редакторов и программ для публикации текста в интернете предусмотрена возможность верстки. По мере того, как вы будете набирать текст, он будет автоматически отображаться в выбранном шрифте. (Эта статья была изначально написана с помощью шаблона в Microsoft Word.) В этих программах также есть уже готовые шаблоны, которые вы можете изменить с учетом своих потребностей, вместо того, чтобы создавать шаблон с нуля.

         • В текстовых редакторах и программах для публикации текста в интернете также есть функция создания "стилей", сохранения шрифтов и задания размеров для оглавлений, колонтитулов и основного текста. Можно выбрать из уже существующих стилей ("Заголовок1", "Обычный", "Цитата") или создать свой собственный стиль и дать ему свое название. Рекомендуется называть стили по такой же системе, как это предусмотрено в программе. (Например, Microsoft Word создает такие названия, как "Заголовок1", "Заголовок2"; кроме того, есть еще подзаголовки.) Настраивайте программу заранее, чтобы вам не пришлось возвращаться к этому, когда вы будете заниматься написанием текста.
      • По возможности пользуйтесь кодами полей или текстовыми переменными. Можно изменять их значения (например, название продукта, название главы руководства пользователя) и помещать их в документ в места, где вы обычно стали бы набирать слова вручную. Когда вы сделаете предпросмотр документа или подготовите его к печати, нужный текст подставится в переменные. Если изменится название товара либо если вы решите изменить название главы, вам будет проще поменять текст, заменив значение переменной.

      Что вам понадобится

      • Текстовый редактор или программа для публикации текста в интернете
      • Графический редактор или программа для создания скриншотов

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

Что нужно для создания справочного файла? Большинство используют для этого кнопку PrntScr и текстовый редактор. Но на самом деле можно отказаться и от того, и от другого. Есть программы и веб-сервисы, о существовании которых многие разработчики (и даже составители технической документации) просто не догадываются. Специализированные решения для создания мануалов, руководств пользователя и прочих подобных документов, как правило, объединяют текстовый редактор с минимальным набором функций, приложение для создания скриншотов, а также средства для экспорта в популярные форматы документов. Более того, некоторые из таких программ делают большую часть работы за пользователя, самостоятельно расставляя снимки экрана в нужной последовательности и даже добавляя описания. Разберем пять наиболее удачных — на наш взгляд.

⇡ Clarify 2.0.5 - быстрые мануалы без дополнительного софта

• Разработчик:Blue Mango Learning Systems .
• Операционная система: Windows/Mac.
• Распространение: shareware, $30.
• Русский интерфейс: нет.

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

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

Чтобы добавить скриншот в любое место документации, достаточно выделить нужный заголовок и нажать на кнопку захвата экрана. Если скриншоты были созданы ранее, можно добавить их в документ, указав путь к ним на диске. Снимок экрана можно сделать как моментально, так и с небольшой задержкой (до пяти секунд), что может быть удобно, если нужно сделать скриншот выпадающего меню или другого элемента интерфейса, который постоянно не отображается на экране. Нажимая клавишу "Пробел", можно переключаться между захватом всего экрана или же текущего окна. Кроме этого, предусмотрены горячие клавиши для включения/выключения отображения курсора и для захвата области того же размера, что и предыдущий скриншот. Последняя функция очень удобна, если нужно делать десятки однотипных снимков экрана, так как при этом экономится время на выделение требуемой области.

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

То, в каком формате будет сохранен скриншот, определяется в настройках приложения. Программа может автоматически генерировать теги ALT для картинок, масштабировать их при вставке в документ до нужного размера (исходная копия при этом тоже сохраняется), добавлять рамку, скруглять края.

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

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

Над проектами Clarify можно работать совместно с другими пользователями. Для этого нужно создать учетную запись на сайте Clarify-it.com. Кроме этого, программа поддерживает сервисы Dropbox и Evernote, дает возможность экспортировать проекты в PDF, Word, HTML и на сайты WordPress. При желании можно также просто скопировать весь текст документа (или же текст с картинками) в буфер обмена.

При экспорте можно выбирать тему оформления, добавлять колонтитулы, управлять разными параметрами отображения (в зависимости от формата). Например, для экспорта в Word доступны три темы оформления, а готовый документ представлен в виде идеально отформатированного файла, со стилями, заголовками, списками, гиперссылками. Работать с таким одно удовольствие, особенно если помнить о том, сколько времени нужно потратить на подобное форматирование в Word вручную.

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

⇡ Dr. Explain 5.3 - полуавтоматические руководства с готовыми аннотациями

• Разработчик: Indigo Byte Systems .
• Распространение: shareware, от 7 500 рублей.
• Русский интерфейс: есть.

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

Если в интерфейсе захватываемого приложения встретится меню, Dr.Explain обязательно раскроет его, сделает снимок всех уровней подменю и добавит выноски для каждого элемента. Более того, все скриншоты будут помещены в проект Dr.Explain с сохранением структуры документа (то есть, скажем, основное окно будет в разделе 1, раскрытое меню - 1.1, а пункты подменю - 1.1.1, 1.1.2 и так далее). Таким образом, вся скучная и монотонная работа выполняется в автоматическом режиме, и пользователю остается только добавить описание всех элементов интерфейса. Понятное дело, что структуру документа можно изменять, перемещая пункты, добавляя новые и удаляя ненужные.

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

Если ранее работа над документацией велась в другом приложении, можно легко импортировать проект и программу. Dr.Explain поддерживает импорт документов CHM, Word, HTML, HLP, RTF, TXT, XML.

Совместная работа над документацией организована через сервис Tiwri.com , созданный специально для обмена данными между пользователями Dr.Explain. Из окна программы можно загружать текущий проект на сервер, отсылать изменения, сбрасывать правки, отслеживать историю.

Для экспорта готовой документации предлагаются форматы CHM, Word, HTML и PDF. При этом еще до выполнения экспорта можно увидеть, как мануал будет выглядеть в одном из этих форматов. Перед экспортом нужно не забыть перейти в настройки проекта и задать дополнительные параметры. Например, при сохранении документа в PDF можно указать ключевые слова, автора, заголовок, тему и формат, настроить колонтитулы и нумерацию страниц, а также создание закладок для разделов. При экспорте в HTML есть возможность настроить карту сайта, добавить комментирование для пользователей Facebook и Disqus, включить показ панели с кнопками социальных сетей, указать данные FTP-сервера, на который будет загружен проект.

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

⇡ Manula - перенос мануалов в онлайн

• Разработчик: Bitz & Pixelz .
• Операционная система: любая.
• Распространение: по подписке (от $10 в месяц).
• Русский интерфейс: нет.

В начале 2009 года Альвин Хогердайк (Alwin Hoogerdijk), создатель семейства приложений для учета коллекций Collectorz.com, решил создать для своих программ онлайновую справку. Ему надоело, что часто приходится откладывать выпуск новых версий программ из-за того, что еще не готовы изменения в пользовательской документации, или же, наоборот, делать новые релизы доступными для скачивания с устаревшими справочными файлами, а затем выпускать новые билды, в которых обновлены только мануалы.

Для того чтобы сделать процесс дополнения документации более удобным для разработчиков, а доступ к ней - более быстрым для пользователей, Альвин хотел перенести все в онлайн. Он начал поиск специализированной системы управления контентом, предназначенной для создания технической документации. И когда оказалось, что ничего подобного не существует, разработчик создал собственную систему для своего семейства приложений. Позже она была превращена в более универсальный коммерческий продукт Manula.com.

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

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

В Manula также встроены инструменты для учета изменений и получения отзывов от пользователей. Им предлагается оценивать отдельные темы справочной документации. Для разработчиков есть наглядная статистика оценок и числа посещений разных разделов мануала. Благодаря этому всегда можно понять, в каком месте мануал необходимо доработать, сделать более подробным или связать с другими разделами.

Мануалы, созданные при помощи Manula, имеют интегрированную систему поиска — учитываются заголовки разделов, содержимое документации, а также заданные разработчиком ключевые слова. Сервис сохраняет историю поисковых запросов и показывает разработчикам популярные запросы, благодаря чему можно легко внести изменения в заголовки и ключевые слова.

Одна из интересных особенностей Manula - функция Topic Sharing. Если у компании есть несколько однотипных продуктов, то отдельные фрагменты справки можно сделать для них общими. Главное отличие от простого копирования готовых фрагментов документации в том, что при использовании функции Topic Sharing вносить изменения нужно лишь в одном месте. При этом во всех приложениях документация будет обновляться автоматически. Еще больше автоматизировать процесс помогают переменные (например, {APPNAME}), которые настраиваются отдельно для каждого руководства пользователя.

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

Встроенного инструмента для создания снимков экрана в Manula нет - придется загружать готовые картинки в библиотеку изображений (она общая для всех проектов) и затем вставлять в нужные места документации. Добавление текста тоже выполняется в онлайновом редакторе, и тут разработчики сервиса смогли придумать кое-что интересное. Наряду с использованием визуального редактора предлагается работать с кодами Textile для ускорения процесса форматирования. Эти коды дают возможность форматировать текст без необходимости обращения к кнопкам редактора. Например, если текст нужно выделить, его просто нужно заключить в две звездочки (*вот так*), а для создания заголовка первого уровня достаточно написать в начале строки h1-.

⇡ StepShot - снимет, расставит по порядку и подпишет

• Разработчик: StepShot .
• Операционная система: Windows.
• Распространение: по подписке ($29 в месяц). Есть полнофункциональная триал-версия на 14 дней, которая затем становится ограниченной.
• Русский интерфейс: нет.

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

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

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

Эта панель, понятное дело, на скриншотах не видна. В зависимости от настроек, захват может выполняться только тогда, когда щелчок совершается при нажатом CTRL (или другой удобной клавише) или, наоборот, во всех случаях, кроме тех, когда пользователь удерживает заданную клавишу нажатой. В настройках программы также можно задать задержку между кликом и созданием скриншота.

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

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

Обычно при создании руководств много времени тратится на то, чтобы выделить область, в которой находится курсор на скриншоте (как правило, место, куда нужно кликнуть). StepShot дает возможность автоматизировать и это рутинное действие. Элемент интерфейса, по которому выполняется щелчок мышью, может быть автоматически выделен красным прямоугольником или же желтым кругом. Кроме этого, программа может автоматически сглаживать края скриншотов.

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

Добавление описаний тоже максимально автоматизировано. Поскольку при написании технической документации чаще всего используются одни и те же словосочетания, программа снабжает скриншоты описаниями вроде "Click on "Skype" button". Для этого она захватывает названия элементов интерфейса, распознает их и затем добавляет в подпись под картинкой. Работает это, правда, только для английского и парочки других европейских языков, а составителям русскоязычной документации придется добавлять все описания вручную.

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

После того как работа над созданием руководства завершена, можно экспортировать его в один из нескольких поддерживаемых форматов: документ Word, PDF, HTML, DITA или XML. При этом для Word доступно несколько разных шаблонов.

Также есть прямая публикация на Wordpress и в Confluence, а все изображения, использованные в проекте, предлагается сохранить в одной папке. К сожалению, при этом можно управлять только качеством картинок, а вот менять названия нельзя. Скриншоты сохраняются с названиями типа image0001.jpg, image0002.jpg, что не всегда удобно (было бы неплохо, если бы была возможность именования изображений на основе заголовков в проекте).

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

⇡ iorad - аналог StepShot, но в браузере

• Разработчик: iorad inc.
• Операционная система: любая.
• Распространение: по подписке ($90 в месяц). Есть ограниченная бесплатная версия.
• Русский интерфейс: нет.

Для начала работы с iorad нужно установить расширение для Google Chrome и открыть веб-страницу, действия на которой должны быть задокументированы. После этого автору нужно нажать на кнопку расширения. В веб-сервисе iorad применён тот же подход, что и в StepShot (автор инструкции выполняет все действия, сервис их сохраняет, разбивает на шаги, которые затем можно отредактировать и опубликовать в виде урока). Однако iorad работает как расширение к браузеру, и все действия по обработке, редактированию и публикации пошаговых инструкций выполняются на сервере. С одной стороны, это удобно, так как сервис доступен на любой платформе, однако есть досадное ограничение - с помощью iorad можно записать только действия, выполняемые в браузере. То есть сервис подходит только для создания мануалов веб-приложений, а для настольных программ не годится.

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

Когда запись будет завершена, iorad восстановит все действия пользователя и разобьет инструкцию на шаги. Все элементы интерфейса, которые были задействованы, будут выделены (например, кнопка, по которой нужно кликнуть). Кроме этого, iorad автоматически добавляет простые текстовые инструкции для каждого шага.

Каждый урок начинается предложением "The first step is to open [название вебс-страницы]", а заканчивается фразой "That"s it. You"re done." Несмотря на то, что описания автоматически составляются только на английском, в готовой инструкции есть возможность увидеть их на других языках за счет интеграции с переводчиком Google. Если не добавлять пространных описаний, а ограничиться простыми фразами, такой перевод работает сносно.

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

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

Готовые инструкции могут быть сохранены в виде файлов Word Doc, PowerPoint и PDF, а также внедрены на сайты или просмотрены в браузере на любых платформах, как настольных, так и мобильных. Используя последние два варианта, можно оценить главное преимущество iorad - интерактивность. Инструкция, полученная с помощью сервиса, запускается в специальном плеере. Пользователь может выбрать один из вариантов работы с ней: просмотр или же самостоятельное повторение всех шагов.

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

⇡ Заключение

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

Работая над документацией, стоит всегда помнить о «принципе Златовласки»: пользователю надо давать не слишком много информации, не слишком мало, а в точности столько, сколько нужно для выполнения задач. Хорошая документация должна работать как навигатор: как только пользователь показал, в каком месте он находится (с какой проблемой столкнулся), он тут же должен при помощи файла справки отыскать правильный путь (решение проблемы). И конечно, не стоит забывать о гиперссылках, при помощи которых нужно обеспечивать свободное перемещение пользователя по мануалу. Если в его руках подробнейший PDF на 100 страниц, в котором нет никаких ссылок, качество такой документации вряд ли может оценить кто-то, кроме ее составителя.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Краткие инструкции в подсказках обращают внимание пользователей на новые или дополнительные функции. Система автоматически показывает их новым пользователям в начале работы. Они отображаются лишь один раз, их можно закрыть (пропустить), либо перейти в справочный раздел ресурса и прочитать больше. Чтобы объяснить последовательность действий, разработчики сервисов объединяют такие подсказки в демо-туры. Подобные инструкции предлагают своим пользователям 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). Панель администрирования вызовет у него ряд вопросов:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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