Что делают картинки в ваших курсах?

Автор: Владислав Швецов

Большинство курсов представляют собой довольно-таки проблемный формат "текст + картинка". Однако из-за того, что мы (разработчики эл.курсов в корпоративном секторе), как правило, сильно ограничены в ресурсах, то очень часто прибегаем именно к этому формату.

Рассмотрим, как можно этот формат улучшить, не затрачивая при этом сверхусилий.

Для начала вспомним, какие "проблемы" при выборе и размещении картинок в курсе видит типичный разработчик?
   1) сложность найти картинку по теме (предел мечтаний - найти в гугле условно-тематическую картинку),
   2) сложность найти картинку в хорошем качестве,
   3) сложность запихивания over 9000 картинок в пределах 1-го кадра,
   4) сложность подбора картинок с учетом общей стилистики курса.

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

Плохой пример:

Итак, основная проблема: картинка утрачивает смысл (если он был заложен в ней изначально). Вот текст, а вот – картинка. Какой бы простой картинка не была, ее смысл придется как-то трактовать – пользователь должен сделать ряд интеллектуальных усилий по дешифровке того смысла, который картинка несет в конкретном контексте. Иллюстрирует ли картинка то, что содержится в тексте? А что конкретно она иллюстрирует? Есть ли там то, на что стоит обратить внимание? Так вот – такой мыслительной работы никто делать не будет. Даже, если смысл в картинке есть, стандартный (читай: ленивый) пользователь его, скорее всего, не увидит. Не распознав смысл несколько раз подряд, пользователь будет подсознательно игнорировать любой посыл, заложенный во всех остальных картинках в курсе.

Итак,  чтобы улучшить формат "текст-картинка", нужно сделать так, чтобы вставленные картинки были не только со смыслом, но и позволяли бы этот смысл донести до пользователя.

Далее о том, как это сделать.

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



2) Использовать картинки, которые будут изменяться при определенных условиях (например, при наведении указателя мыши на ссылку в тексте), чтобы показать описываемое в тексте изменение, результат и пр.

3) Использовать картинку с целью акцентирования внимания пользователя на ключевой мысли слайда, либо на отдельных моментах, которые проще не объяснить словами, а показать, как это выглядит.

Как это сделать?  По первому пункту вроде всё очевидно. Последние два пункта реализуются следующим образом: текст на слайде нужно сопроводить ссылками, наведение указателя мыши на которые или щелчок по котрым будет приводить к чему-нибудь такому, что привлечет внимание пользователя.



Примеры:

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



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



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


Ещё несколько примеров (подчеркивание красной пунктирной линией означает то, что на ссылку наведен указатель мыши):



Источник: Что делают картинки в ваших курсах (по ссылке больше примеров)