Делаем скриншоты правильно: практические советы
Устройство для снимка экрана на первых компьютерах (Command-Shift-3)Если вы когда-либо делали хелп или мануал для своего приложения, наверняка вы отметили, как неожиданно много времени и сил занимает создание скриншотов.
Ведь кажется, что скриншот — это «секунда работы, Alt+PrintScreen и Ctrl+V!». Некоторые клиенты удивляются, когда слышат, что скриншот в мануале может стоить и $2 и даже $5.
В этой статье я расскажу, как правильно делать скриншоты, почему это не просто «два клика» и какие подводные камни встречаются на пути неопытного скриншотера. Рассматривайте ее как чеклист или список практических советов для тех, кто документирует ПО. Надеюсь, это поможет вам избежать разочарований и порадовать юзеров красочными понятными картинками.
Что нужно скриншотитьНужно: схема основных элементов и зон интерфейса с подписями. Например, панель инструментов, панель состояния, главное меню, контекстное меню. Далее по тексту не придётся объяснять: «Кликните на вот ту кнопку на второй сверху панели слева»; один основной скриншот для каждой главы мануала. Вдруг пользователь не читал предыдущие главы, а воспользовался поиском; скриншот для каждого действия, которое значительно меняет состояние системы, интерфейса или данных; всплывающие (модальные) окна. НЕ нужно: мастер установки, удаления (только если совсем что-то нетривиальное с множеством настроек); страницы логина; стандартные диалоговые окна (открыть, сохранить); километровые выпадающие списки (выберите язык или страну); отдельные кнопки (используйте текст); то, что уже подробно описано или есть на других скриншотах — лучше дайте ссылку; панель, содержащую информацию о версии, правах и т.д. Если выйдет новая версия, то может потребоваться поменять циферку или буковку на всех скриншотах; куски кода, конфигов и т.д. Лучше вставить их как форматированный текст — и выглядеть будет лучше, и пользователи смогут скопировать. Главный принцип: пользователь должен знать, где располагается данная страница (диалог, меню), и понимать конечный результат действий. Текст стоит грамотно разбить на абзацы, заголовки должны отражать основные действия. А скриншоты нужны, чтобы облегчить поиск элементов и дать пользователю подтверждение, что он «на правильном пути», то есть на его экране всё выглядит так же, как на скриншоте.Процесс создания скриншотов Настройка окружения. Выберите единый стиль окон и шрифтов в вашей ОС. Если интерфейс «резиновый», определите ширину и высоту окна браузера или программы и не меняйте ее на протяжении съемки.Лайфхак: Если вы случайно закроете окно, его размеры могут сброситься, и, скорее всего, вы не сможете их точно восстановить. Чтобы не «потерять» размеры, сделайте скриншот окна и всего экрана и обведите уголки окна красным, а потом установите полученный файл в качестве обоев рабочего стола.
Может, кто-нибудь знает более простой и изящный способ?
Подготовка данных. Наполните приложение примерами, приближенными к жизни и решающими конкретные пользовательские задачи. Можно продумать несколько случаев: простых, как «хеллоуворлд», и посложнее, для продвинутых юзеров.
Желательно, чтобы имена объектов и настройки не менялись в пределах одного раздела. Например, в 1-й главе пользователь Ипполит создал заметку «Как готовить рыбу». А во 2-й главе нужно рассказать о кастомизации заметок. Естественно, лучше рассказывать про то, как Ипполит применяет к уже созданной заметке красную заливку. Такой нехитрый подход напомнит пользователю о предыдущих действиях, а также обеспечит полноту картины.
Не забудьте наполнить вашу систему «реальными» читабельными данными, сделать предварительные настройки, подготовить шаблоны, сделать бэкапы и т.д.
Если вы делаете скриншоты для документации на иностранном языке, проследите, чтобы в кадр не попали «русские» имена (Andrew — ок, Vanja Babushkin — не ок) или надписи на русском языке.
Съемка. Тут все зависит от ваших инструментов, но основные рекомендации такие: а. По возможности снимайте только значимые зоны интерфейса и делайте скриншот как можно компактнее. Так он и на лист А4 поместится, и будет иметь малый размер.b. Как и при фотографировании, следите за композицией, не отрезайте части элементов по краям скриншота. Постарайтесь делать скриншоты одинаковой ширины и высоты в рамках одного примера.c. Чтобы сэкономить время, делайте сразу серию скриншотов. На всякий случай можно сделать «лишние», незапланированные скрины — вдруг пригодятся при переделках или редактировании.
Редактирование. Не всегда получается подготовить красивые и разнообразные данные, избежать опечаток или смоделировать определённую ситуацию (ошибка, выход из строя, большой денежный баланс). В таких случаях есть как минимум 2 выхода: a. Править код и стили страницы в браузере (правый клик > Inspect element и поехали), если речь идет о веб-приложении.b. Менять надписи, комбинировать блоки из разных скриншотов в графическом редакторе.
Лучше всего уметь и то, и другое и комбинировать эти подходы в зависимости от ситуации.
Хочу отметить, что хотя при редактировании можно добавить к скрину рамку, обрезанные края и тени, лучше это делать стилями в вашем редакторе справки.
Сохранение. Давайте скриншотам говорящие уникальные имена, придерживаясь определённого формата, например, general_settings_privacy. Лучше не использовать пробелы и прописные буквы, а также слишком длинные названия. Такой подход гарантирует универсальность и работоспособность при размещении онлайн-справки на различных серверах.
Хранить скриншоты лучше в облаке с поддержкой шаринга, тэгов и версионности. Для удобства поиска лучше разбить папку со скринами на подпапки, соответствующие структуре интерфейса программы.
Вставка в текст. Об этом — ниже, в разделе «Оформление».
Проверка. Отложите законченный раздел, проверьте его на следующий день. А лучше дайте прочитать текст и посмотреть скриншоты тестировщику или дизайнеру.
Инструменты Десктоп-инструменты Snagit (Win, Mac). Одна из самых популярных программ для снятия скриншотов. Состоит из 2 модулей: — Capturing Tool. Фичи: увеличение области выделения, автоматическое определение зон интерфейса, снятие полноразмерных скринов, задержка по времени для всплывающие элементов, запись видео; — Editor. Фичи: стрелочки, аннотации, эффекты, рамки, шаринг.Из минусов могу назвать только то, что редактор мог бы иметь больше настроек и эффектов; Shutter (Linux). Если коротко, то это Snagit для Linux, естественно, opensource; Adobe Photoshop (Win, Mac). Рекомендую использовать для хардкорного редактирования, сложных эффектов. Скрины одного раздела можно хранить как слои psd файла, а при помощи макросов и скриптов можно творить чудеса с большим количеством файлов; GIMP (Win, Mac, Linux). Бесплатная замена Photoshop. Здесь отличная статья про автоматизацию обработки скринов в GIMP; ImageMagic. (Win, Linux) Набор программ (консольных утилит) для чтения и редактирования файлов множества графических форматов. Отлично подходит для пакетной обработки скриншотов; Visio (Win). А почему бы и нет? Годится в качестве редактора для выделения и аннотирования, особенно, если куплен весь пакет MS Office; Dropbox (Win, Mac, Linux). Десктоп-клиент может автоматически сохранять все ваши скрины на диске и в облаке и копировать ссылку в буфер обмена; Joxi (Win, Mac, Linux, Chrome plugin). Тот же функционал, что и в Dropbox, плюс возможность добавления подписей и эффектов на лету; LightShot (Win, Mac, Chrome, Firefox plugin). Тот же функционал, что и в Joxi, плюс возможность редактирования скриншота в бесплатном онлайн-редакторе Pixlr. Плагины для браузеров Модули HAT программ Во многих HAT (Help Authoring Tools) есть встроенные модули для снятия скриншотов: Dr.Explain. «Интеллектуальное» снятие и аннотирование скриншотов — главная фишка этой программы. Она определяет структуру окна и может автоматически распознать и подписать все элементы интерфейса. В самом редакторе есть много стилей для стрелочек, цифр и так далее; Help+Manual. Дороже, чем Dr.Explain, а модуль для снятия скринов хуже. Но пользоваться можно, тем более, что аннотации к скринам складываются в отдельный xml файл, который можно перевести при локализации; MadCap Flare. Достаточно дорогой редактор, модуль снятия скриншотов не впечатляет, но все основные функции есть. Радует то, что можно задавать свои стили для изображений. Инструменты для создания GIF анимаций Чтобы показать динамические действия (например, тегирование текста, появление автоподсказки, меню), скриншотов и текста бывает недостаточно. Можно снять видеоролик-туториал, но это довольно затратно, да и весит больше, чем изображения. Лучше записать GIF-анимацию (пример). Эти инструменты вам помогут: GifCam (Win) — бесплатно; ScreenFlow (Mac) — платно, также умеет снимать и редактировать видео; LICEcap (Win, Mac) — бесплатно. Утилиты для сжатия изображений ImageOptim (Mac) — бесплатно; RIOT (Win) — бесплатно. Оформление Определите оптимальный формат для ваших скриншотов. Если коротко, то: Каждый скриншот должен иметь id, alt, title, номер в пределах раздела или главы.Выберите ширину и высоту, разрешение:
для печати (ширина не больше A4, помните про деление на страницы и вставляйте разрывы страниц при необходимости); для экрана (как скриншот будет смотреться на планшетах и мобильных, учитывайте особенности скриншотов, сделанных на Retina); комбинированный подход — Conditional Output (Help+Manual, Confluence — Scroll Versions plugin, Flare). При таком подходе можно делать несколько версий каждого скриншота. Помните, что текст на скриншоте должен быть читабельным без увеличения.Продумайте расположение скриншота относительно текста, выравнивание. Если ширина скриншота небольшая, то следует рационально использовать свободное место и настроить обтекание текстом слева или справа.
Чтобы показать динамику, можно сделать комбинированный скриншот:
Если вы вырезали часть окна, то можно показать обрезанный край с неровной кромкой или прозрачностью:
Важные элементы или мелкие детали можно увеличить, чтобы сделать акцент: 
Для акцента можно также использовать выделение с помощью цвета — оставить цвет у целевого элемента (панели), а остальные обесцветить:
Добавьте рамки, тени, стрелки, подписи, размытие по вкусу. Главное — соблюдайте единообразие и придерживайтесь ваших стайлгайдов: 
Используйте интерактивные элементы (для HTML):
лайтбокс как в Confluence, можно с галереей; увеличение (как товары на Ebay); слайдер; image map с тултипами (пример 1, пример 2). И ещё несколько советов… Старайтесь не вставлять иконки и изображения кнопок в текст, так как высота строки может измениться и верстка будет выглядеть непрофессионально. Лучше подпишите кнопки и иконки цифрами на большом скрине или вставляйте иконки и кнопки в отдельный столбец таблицы.Переиспользуйте стандартные компоненты (иконки, панели, диалоги). Хороший пример — Confluence Inclusions Library.
Разместите список основных иллюстраций (лучше — со ссылками на иллюстрации) после содержания или в конце мануала.
Если скриншот содержит слишком много данных, попробуйте заменить его прототипом, схемой, таблицей.
Если вы делаете мануал для мобильного приложения, скорее всего, у вас будет очень много скринов. Покажите навигацию между скринами. Так пользователь легче поймет взаимодействие и переходы, даже не читая текст.
Делайте скрины для всех языковых версий ПО одновременно. Тогда при локализации справки вам не понадобится просить переводчика о дополнительных услугах, а техническому писателю не понадобится учить йиксбара, например.
А еще рекомендую прочесть эту статью с очевидными, но полезными советами.
Заключение Правильные скриншоты улучшают любой хелп или мануал, делают их понятными и наглядными. А чтобы сделать правильные скриншоты, надо хорошо подготовиться и затратить немало единиц времени, внимания и энергии. Например, в нашей практике встречались непростые продукты, скриншоты которых стоили не обычные $1–2 за штуку, а $5 и даже $10.А вообще, идеальный скриншот (и мануал в целом) — это тот, который не надо делать. При правильном подходе к UX и UI можно задействовать привычные и очевидные пользователю паттерны навигации и поведения, не нуждающиеся в описании и пояснении.
Будет круто, если в комментариях вы поделитесь своим опытом по поводу создания скриншотов. Инструменты, процесс, размеры, подписи, стили, хранение, автоматизация — интересны любые практические советы!
P.S: Спасибо за статью нашему гуру создания технической документации Александру Зинчуку
