Пошаговые инструкции с gif-анимацией | welcome to eL

Пошаговые инструкции с gif-анимацией

29.09.2014

информационно-справочный портал, иллюстрации для учебных и справочных материалов, пошаговые инструкции по работе с программным обеспечением (ПО)

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