Автор: Владислав Швецов
Большинство курсов представляют собой довольно-таки проблемный формат "текст + картинка". Однако из-за того, что мы (разработчики эл.курсов в корпоративном секторе), как правило, сильно ограничены в ресурсах, то очень часто прибегаем именно к этому формату.
Рассмотрим, как можно этот формат улучшить, не затрачивая при этом сверхусилий.
Для начала вспомним, какие "проблемы" при выборе и размещении картинок в курсе видит типичный разработчик?
1) сложность найти картинку по теме (предел мечтаний - найти в гугле условно-тематическую картинку),
2) сложность найти картинку в хорошем качестве,
3) сложность запихивания over 9000 картинок в пределах 1-го кадра,
4) сложность подбора картинок с учетом общей стилистики курса.
Но все эти "подвиги" разработчика сразу же утрачивают свою ценность, если найденная картинка не будет нести какой бы то ни было смысл, будучи размещенной на кадре в качестве декоративного сопровождения текстовой "кашки". Просто так вставленная картинка навряд ли сможет положительно поспособствовать обучающему эффекту, даже если это картинка будет подобрана по теме.
Итак, основная проблема: картинка утрачивает смысл (если он был заложен в ней изначально). Вот текст, а вот – картинка. Какой бы простой картинка не была, ее смысл придется как-то трактовать – пользователь должен сделать ряд интеллектуальных усилий по дешифровке того смысла, который картинка несет в конкретном контексте. Иллюстрирует ли картинка то, что содержится в тексте? А что конкретно она иллюстрирует? Есть ли там то, на что стоит обратить внимание? Так вот – такой мыслительной работы никто делать не будет. Даже, если смысл в картинке есть, стандартный (читай: ленивый) пользователь его, скорее всего, не увидит. Не распознав смысл несколько раз подряд, пользователь будет подсознательно игнорировать любой посыл, заложенный во всех остальных картинках в курсе.
Итак, чтобы улучшить формат "текст-картинка", нужно сделать так, чтобы вставленные картинки были не только со смыслом, но и позволяли бы этот смысл донести до пользователя.
Далее о том, как это сделать.
1) Использовать картинки, полноценно иллюстрирующие конкретную ситуацию (рисованные комиксы, фотокомиксы, диалоги персонажей, механика процесса и т.п.). Динамика, а не статика. Сюжет, развитие событий, описание процесса "схватывается" именно в такой форме подачи, а не в виде набора тематических картинок.
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLh37_SvRjW-0Aw3bjFAY-6ipPTUQ_VKVW3P0sED8CI2aSAu64Fa7EdJCqXPrM3hJ0stf8O4aCYmSCkGgWHWdE4JvZP9EsV2Dzuo6N748QhU0A-hxG2BBjAGusA6wyqknyfOJ1J-DaDInv/s320/sqw3.png)
2) Использовать картинки, которые будут изменяться при определенных условиях (например, при наведении указателя мыши на ссылку в тексте), чтобы показать описываемое в тексте изменение, результат и пр.
3) Использовать картинку с целью акцентирования внимания пользователя на ключевой мысли слайда, либо на отдельных моментах, которые проще не объяснить словами, а показать, как это выглядит.
Как это сделать? По первому пункту вроде всё очевидно. Последние два пункта реализуются следующим образом: текст на слайде нужно сопроводить ссылками, наведение указателя мыши на которые или щелчок по котрым будет приводить к чему-нибудь такому, что привлечет внимание пользователя.
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKRGgOSM5VCx7Nc6bxVeHUdGKkq6KZ7yFONs9XuoshD1kOAGMlhuMwlC51QtXwoqDyVB9gjSxWfamh1v88r0g4HuyB_J89EZVdSn1TAophdXMOij1zRaBlQNu9Iw3krhjGwjg3XT0PLjmv/s320/sqw12.png)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJUvklxBNMmKDWiGUvJIxri1x7IQn0olVlHfDomInyZUKuzyXt9nXL3NMTcryA1SRCfIyDnEULMMI5TaswhkZ_lum0pF_CCO56i21q2luCJLU5RuOTs-sj0KtMI6c5nBELVM2AHHRTtcD8/s320/sqw13.png)
Примеры:
1) Какой-то механизм приводится в действие (не сам по себе, бесцеремонно отвлекая внимание пользователя, а по его желанию – вот пользователь дошел в тексте до ключевого момента → увидел ссылку → щелкнул по ней → увидел изменение в картинке (анимацию)). Таким образом, пользователь получает возможность увидеть, как происходит то, что содержится в описании.
![](http://4.bp.blogspot.com/-KYuqbpcms6E/UXg71D8HA1I/AAAAAAAABTg/qn99KeN5MHc/s320/sqw7.png)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyu3HbgtKhSfth7OJpYU0w0WAq7DjDEOw0JhyFz00t8iYC9evb-esZw2dhkoxiYm_mbQl8GhA8QQp3lX_Xg4_FTeEsuMx9OO_ZxptdWZTt9GIDs64TCFS44G1HR9xxuFU5YiXnIa_BMbhf/s320/sqw9.png)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEge2DW2TuDgxk4uCP7ojX0mD2mh60WXVmgKcLF6IG3XR6Ym_gKMHQEZc5Ke_2J5YX862ReuQ3A-ympkQ1BK2pAqjQ9IWm4szFxEpdmz_V7xcmBIt8J22GaGUeAULE3dOOrC_w71uGEk9gTj/s320/sqw10.png)
2) На картинке выделяется какой-то ее фрагмент (увеличение фрагмента, движение фрагмента, выделение фрагмента цветной рамкой и т.п.). Таким образом, внимание пользователя направляется в нужную нам сторону. Мы обращаем его внимание на нечто важное (буквально тыкаем его туда носом).
![](http://4.bp.blogspot.com/-UpVg1d3B4fQ/UXg13UQ_LOI/AAAAAAAABTI/tiaWhAi_quw/s320/sqw2.png)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7buBU804O5VNvq5lSXa32UuI7N-7xYTGyigt0tLg5mvYaEhe9YtxQiXfpKiwtrhzwq-O9fxU_NucrhJeUdqGvQi4xy3m-HqKFaWOJXMKn5H-jfxvgT66a7Il9GG_hD5WYG_ojsdx06odo/s320/sqw16.png)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPB_hxARfNS0nA-BuBs_GSi43H85LYeuX0Fxto8U1nxfSxUQPyC_jteLhg4HUPoc0zzF1ldfCgsW-PQoBgYQqt7eicHaq2bMol-Gerw7UElFsFDxdGDiqssP0CHZbWsVFr9K4xnfAxg1MF/s320/sqw30.png)
Примечание: тип ссылок, когда требуется наведение указателя мыши, а не щелчок по ней, лучше выделять пунктирным подчеркиванием, а не сплошным.
Ещё несколько примеров (подчеркивание красной пунктирной линией означает то, что на ссылку наведен указатель мыши):
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT__9jgaQLy-2Zt_3L_kLYagJEW455Udjqlzn4954pMeNz8w4zClXknPeVvIXTQRw879svoU3hn8iDzSFto4mDI6rOxeqFLFKx7h19hZ3hOcxtLnmtidTm3qAsxoXS9UpHVN1OjXEJoCvk/s320/sqw22.png)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRGNkSlVbPKi65M1dZ6y630zTkFiaSu_dgLjCS1ALK-l5jHiN34JePMNpwIB883_-iggYTdVrXgwS0i_Fi4gbvhO_LIDcALJtBA6aBGJYdpbxxP06DTYAWGgKeDZ3lMqoyupdmNtM4Wuzc/s320/sqw28.png)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7mfojiTeB6A925E7JKGDakT0HipRgoZ4EEwPVwoVEq7QkgAGmtVTfacb_hWMrBT_vrriJ6dhKB6SWN-DZIMS1ZS3rDHrBV9cxwLX8I0DXDuuOdhDsZ84q3uvURBeDsQIT52jiz4SmU-bH/s320/sqw27.png)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWnHsEO2iskQvPmZbwobll_qx4Btds1jr5upLync0kQ9HXHqBn0h7eUbzAXGnWWu7e23GV94jmqdHy0spCG7CSWF1KnRKLph7-yUDXVT64iu4OjtSgnDg1ElxuKA5NibCFYzJ_-u9pBuCR/s320/sqw26.png)
Источник: Что делают картинки в ваших курсах (по ссылке больше примеров)
Большинство курсов представляют собой довольно-таки проблемный формат "текст + картинка". Однако из-за того, что мы (разработчики эл.курсов в корпоративном секторе), как правило, сильно ограничены в ресурсах, то очень часто прибегаем именно к этому формату.
Рассмотрим, как можно этот формат улучшить, не затрачивая при этом сверхусилий.
Для начала вспомним, какие "проблемы" при выборе и размещении картинок в курсе видит типичный разработчик?
1) сложность найти картинку по теме (предел мечтаний - найти в гугле условно-тематическую картинку),
2) сложность найти картинку в хорошем качестве,
3) сложность запихивания over 9000 картинок в пределах 1-го кадра,
4) сложность подбора картинок с учетом общей стилистики курса.
Но все эти "подвиги" разработчика сразу же утрачивают свою ценность, если найденная картинка не будет нести какой бы то ни было смысл, будучи размещенной на кадре в качестве декоративного сопровождения текстовой "кашки". Просто так вставленная картинка навряд ли сможет положительно поспособствовать обучающему эффекту, даже если это картинка будет подобрана по теме.
Плохой пример:![]() ![]() |
Итак, основная проблема: картинка утрачивает смысл (если он был заложен в ней изначально). Вот текст, а вот – картинка. Какой бы простой картинка не была, ее смысл придется как-то трактовать – пользователь должен сделать ряд интеллектуальных усилий по дешифровке того смысла, который картинка несет в конкретном контексте. Иллюстрирует ли картинка то, что содержится в тексте? А что конкретно она иллюстрирует? Есть ли там то, на что стоит обратить внимание? Так вот – такой мыслительной работы никто делать не будет. Даже, если смысл в картинке есть, стандартный (читай: ленивый) пользователь его, скорее всего, не увидит. Не распознав смысл несколько раз подряд, пользователь будет подсознательно игнорировать любой посыл, заложенный во всех остальных картинках в курсе.
Итак, чтобы улучшить формат "текст-картинка", нужно сделать так, чтобы вставленные картинки были не только со смыслом, но и позволяли бы этот смысл донести до пользователя.
Далее о том, как это сделать.
1) Использовать картинки, полноценно иллюстрирующие конкретную ситуацию (рисованные комиксы, фотокомиксы, диалоги персонажей, механика процесса и т.п.). Динамика, а не статика. Сюжет, развитие событий, описание процесса "схватывается" именно в такой форме подачи, а не в виде набора тематических картинок.
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLh37_SvRjW-0Aw3bjFAY-6ipPTUQ_VKVW3P0sED8CI2aSAu64Fa7EdJCqXPrM3hJ0stf8O4aCYmSCkGgWHWdE4JvZP9EsV2Dzuo6N748QhU0A-hxG2BBjAGusA6wyqknyfOJ1J-DaDInv/s320/sqw3.png)
2) Использовать картинки, которые будут изменяться при определенных условиях (например, при наведении указателя мыши на ссылку в тексте), чтобы показать описываемое в тексте изменение, результат и пр.
3) Использовать картинку с целью акцентирования внимания пользователя на ключевой мысли слайда, либо на отдельных моментах, которые проще не объяснить словами, а показать, как это выглядит.
Как это сделать? По первому пункту вроде всё очевидно. Последние два пункта реализуются следующим образом: текст на слайде нужно сопроводить ссылками, наведение указателя мыши на которые или щелчок по котрым будет приводить к чему-нибудь такому, что привлечет внимание пользователя.
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKRGgOSM5VCx7Nc6bxVeHUdGKkq6KZ7yFONs9XuoshD1kOAGMlhuMwlC51QtXwoqDyVB9gjSxWfamh1v88r0g4HuyB_J89EZVdSn1TAophdXMOij1zRaBlQNu9Iw3krhjGwjg3XT0PLjmv/s320/sqw12.png)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJUvklxBNMmKDWiGUvJIxri1x7IQn0olVlHfDomInyZUKuzyXt9nXL3NMTcryA1SRCfIyDnEULMMI5TaswhkZ_lum0pF_CCO56i21q2luCJLU5RuOTs-sj0KtMI6c5nBELVM2AHHRTtcD8/s320/sqw13.png)
Примеры:
1) Какой-то механизм приводится в действие (не сам по себе, бесцеремонно отвлекая внимание пользователя, а по его желанию – вот пользователь дошел в тексте до ключевого момента → увидел ссылку → щелкнул по ней → увидел изменение в картинке (анимацию)). Таким образом, пользователь получает возможность увидеть, как происходит то, что содержится в описании.
![](http://4.bp.blogspot.com/-KYuqbpcms6E/UXg71D8HA1I/AAAAAAAABTg/qn99KeN5MHc/s320/sqw7.png)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXbZ8Ew82UVtyflMEQhs-SKAFVG8g9v1bogqzgZDw-iSICNLNqbcAZwx9xDPDHhAzUfmAZPIEjnTww2VyRX_ev0D-ErujBPvnUBR540Ns69TpxNzL2zsbKAg8jNxUh824nNqhCvvUh5OH0/s320/sqw8.png)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyu3HbgtKhSfth7OJpYU0w0WAq7DjDEOw0JhyFz00t8iYC9evb-esZw2dhkoxiYm_mbQl8GhA8QQp3lX_Xg4_FTeEsuMx9OO_ZxptdWZTt9GIDs64TCFS44G1HR9xxuFU5YiXnIa_BMbhf/s320/sqw9.png)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEge2DW2TuDgxk4uCP7ojX0mD2mh60WXVmgKcLF6IG3XR6Ym_gKMHQEZc5Ke_2J5YX862ReuQ3A-ympkQ1BK2pAqjQ9IWm4szFxEpdmz_V7xcmBIt8J22GaGUeAULE3dOOrC_w71uGEk9gTj/s320/sqw10.png)
2) На картинке выделяется какой-то ее фрагмент (увеличение фрагмента, движение фрагмента, выделение фрагмента цветной рамкой и т.п.). Таким образом, внимание пользователя направляется в нужную нам сторону. Мы обращаем его внимание на нечто важное (буквально тыкаем его туда носом).
![](http://4.bp.blogspot.com/-UpVg1d3B4fQ/UXg13UQ_LOI/AAAAAAAABTI/tiaWhAi_quw/s320/sqw2.png)
![](http://2.bp.blogspot.com/-l5PSyqTRel0/UXg16E-IoAI/AAAAAAAABTQ/5859hWe7UpI/s320/sqw1.png)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7buBU804O5VNvq5lSXa32UuI7N-7xYTGyigt0tLg5mvYaEhe9YtxQiXfpKiwtrhzwq-O9fxU_NucrhJeUdqGvQi4xy3m-HqKFaWOJXMKn5H-jfxvgT66a7Il9GG_hD5WYG_ojsdx06odo/s320/sqw16.png)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPB_hxARfNS0nA-BuBs_GSi43H85LYeuX0Fxto8U1nxfSxUQPyC_jteLhg4HUPoc0zzF1ldfCgsW-PQoBgYQqt7eicHaq2bMol-Gerw7UElFsFDxdGDiqssP0CHZbWsVFr9K4xnfAxg1MF/s320/sqw30.png)
Примечание: тип ссылок, когда требуется наведение указателя мыши, а не щелчок по ней, лучше выделять пунктирным подчеркиванием, а не сплошным.
Ещё несколько примеров (подчеркивание красной пунктирной линией означает то, что на ссылку наведен указатель мыши):
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT__9jgaQLy-2Zt_3L_kLYagJEW455Udjqlzn4954pMeNz8w4zClXknPeVvIXTQRw879svoU3hn8iDzSFto4mDI6rOxeqFLFKx7h19hZ3hOcxtLnmtidTm3qAsxoXS9UpHVN1OjXEJoCvk/s320/sqw22.png)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8EO3xFTIEdeomsnRTj9JsPYqcglYrlekvoIFwTvo-KMa2j99xhzNsYs80WXHu0WsNz88yJmpy9BLOThghHRuAj_NcUV-K5q6Ls8URmRGkFAtzk-UiR8ERdVOUMtMVEjpscOp_4-psOhRl/s320/sqw23.png)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRGNkSlVbPKi65M1dZ6y630zTkFiaSu_dgLjCS1ALK-l5jHiN34JePMNpwIB883_-iggYTdVrXgwS0i_Fi4gbvhO_LIDcALJtBA6aBGJYdpbxxP06DTYAWGgKeDZ3lMqoyupdmNtM4Wuzc/s320/sqw28.png)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgD8pFbfuSe3jKDYwdnT7hf9Bl_AdqhwCFb3MUr8gEkYaTg1Zn-L6sSuExxOno2GSxhw6o1G5_BbnfeZjchhhRHHu3y9UwnlKrT5I_0X3nLbsw-Z-rtBiOZIJGBBs49OqekTSn_0vMrvvc3/s320/sqw29.png)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7mfojiTeB6A925E7JKGDakT0HipRgoZ4EEwPVwoVEq7QkgAGmtVTfacb_hWMrBT_vrriJ6dhKB6SWN-DZIMS1ZS3rDHrBV9cxwLX8I0DXDuuOdhDsZ84q3uvURBeDsQIT52jiz4SmU-bH/s320/sqw27.png)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWnHsEO2iskQvPmZbwobll_qx4Btds1jr5upLync0kQ9HXHqBn0h7eUbzAXGnWWu7e23GV94jmqdHy0spCG7CSWF1KnRKLph7-yUDXVT64iu4OjtSgnDg1ElxuKA5NibCFYzJ_-u9pBuCR/s320/sqw26.png)
Источник: Что делают картинки в ваших курсах (по ссылке больше примеров)
Для начала вспомним, какие "проблемы" при выборе и размещении картинок в курсе видит типичный разработчик?
ОтветитьУдалить1) сложность найти картинку по теме (предел мечтаний - найти в гугле условно-тематическую картинку),
2) сложность найти картинку в хорошем качестве,
3) сложность запихивания over 9000 картинок в пределах 1-го кадра,
4) сложность подбора картинок с учетом общей стилистики курса.
___________________
Зачем такие подвиги?
Для решения таких проблем есть Ps, Ai, Corel. Разработчик обязан знать и уметь пользоваться графическими редакторами, в противном случае он не разработчик, а обычный "презенташник".
ЗЫ: без обид.
Этот комментарий был удален автором.
УдалитьАнтон, наличие такий умений еще ничего не означает. На практике большинство разрабов, владеющих навыками работы в упомянутых граф.редакторах, не тянут даже до "презенташников". Нужно отметить и то, что такое явление как "декорации ради декораций" в эл.курсах - это отличительный признак тех разрабов, которые пришли в еL из сферы "дизайна". Для них, как правило, хороший курс = красивый курс (т.е., не боле того). Сосбтвенно, об этом я и написал. Что толку от красивых, уникальных картинок, если они просто присутствуют на кадре, но положительно на эффективность обучения не влияют.
УдалитьБольшинство разрабов используют уже готовые иллюстрации, найденные в инете. Ничего зазорного в этом нет. Если под рукой нет дизайнера, если нет времени на разработку новых иллюстраций (а у многих корпоративщиков его реально нет), совершенно ествественно взять иллюстр-й материал из открытых источников. Хороший и эффективный с т.з. обучения курс получается не за счет уникальности использованных в нем картинок, а, в частности, за счет того, какую роль они там выполняют, каким образом они в нем используются. Поэтому для разраба гораздо важнее быть педдизайнером, а не граф.дизайнером (точнее он может со спокойной совестью этим граф.дизайнером не быть и не пытаться им стать).