информационно-справочный портал, иллюстрации для учебных и справочных материалов, пошаговые инструкции по работе с программным обеспечением (ПО)
Отличный способ сделать веб-шпаргалку (веб-справку с краткой пошаговой инструкцией) нагляднее - использовать в качестве иллюстраций анимированные изображения в формате gif.
Такое решение идеально подходит для веб-шпаргалок по работе с ПО. Вот пример типичной веб-шпаргалки, в которой описание каждого этапа операции сопровождается скриншотом:
Некоторые этапы операции в ПО можно расписать в 3-5 шагов. В отдельных же случаях лучше будет сразу продемонстрировать их в одной анимации.
Рекомендации
1) В gif-ке лучше отобразить 3-5 этапов, но не больше.
Во-первых, gif-файл, как правило, весит значительно больше простой png-шки, что означает возможную длительную скорость её загрузки на странице, особенно, если таких gif-ок будет много (вес одной gif-ки примерно от 1 до 2,5 Мб). С плохой инет-связью gif-ка может и не загрузится вовсе.
Во-вторых, если пользователь обращается к веб-шпаргалке с тем, чтобы вспомнить один из этапов выполнения операции, то ему проще будет отыскать описание конкретного этапа, если описание будет разбито на этапы (ведь одним из основных преимуществ веб-шпаргалки в отличие от прочих способов информирования на рабочем месте является "быстрый доступ к актуальной информации").
2) Каждое действие (шаг) имеет смысл пронумеровать (к примеру, 1/3, 2/5).
3) Демонстрации каждого действия желательно завершать непродолжительной паузой (2-х секунд более чем достаточно).
4) Скорость демонстрации в gif-ке не должна быть высокой.
5) Gif-ку следует "зациклить" (бесконечный повтор воспроизведения).
6) Последний кадр следует отделить от начального вставкой с чёрным или белым экраном (чтобы после демонстрации для пользователя было очевидно, где её начало, а где - конец).
7) Для акцентирования внимания на каком-либо объекте интерфейса ПО следует выделить его, например, цветной стрелкой.
Минусы данного способа
1) На изготовление таких демонстраций уходит больше времени, чем на снятие (и редактирование) скриншотов (примерно в 2-3 раза).
2) Как уже было сказано, если для большинства пользователей актуальна проблема медленного инета, то эти gif-ки они скорее всего не увидят (либо они тупо не загрузятся, либо пользователи откажутся ждать полной загрузки контента). В этом случае можно предусмотреть альтернативные варианты просмотра контента, например, предоставить пользователям ссылку на скачивание веб-шпаргалки на компьютер.
Пример моей первой "пробной" gif-ки, созданной в программе LICEcam. Вес gif-ки - 1,07 Мб.
