Мини-курс "Как собрать и оформить курс". Урок 7. Соблюдаем принципы юзабилити

Последний урок из этого цикла. В следующий вторник сделаю итоговую статью со всеми ссылками и методичкой в pdf.

Юзабилити – это эффективность и удобство пользования интерфейсом, в нашем случае, электронного курса. Именно за этим понятием скрываются ответы на самые животрепещущие вопросы разработчика:

- как мотивировать ученика пройти курс до конца,

- как сделать обучение в электронном курсе простым и понятным,

- как удержать внимание на протяжении всего процесса обучения,

- где на слайде разместить самую важную информацию, а где подсказки,

- как оформить навигацию, поиск и меню курса и так далее.

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

Основные рекомендации для достижения высокого уровня юзабилити курса:

- правильная однозначно понятная навигация (обеспечивается, в первую очередь, едиными принципами расположения элементов навигации на протяжении всего курса),

- корректность отображения курса и всех его элементов на всех устройствах, которыми будет пользоваться целевая аудитория,

- правильная расстановка акцентов на тот или иной вид информации помогает быстро ориентироваться в курсе,

- простая и логичная структура курса не отвлекает от основной цели обучения,

- минимальные затраты времени на поиск той или иной навигационной кнопки, когда нет необходимости каждый раз задумываться над тем, как перейти на следующий слайд или вернуться к основному меню,

- информационное пространство должно быть лаконичным, в меру наполненным и имеющим свободное место для отдыха глазам,

- минимальные затраты времени на открытие курса и загрузку его элементов,

- демонстрация прогресса в прохождении курса (где я нахожусь, сколько набрано баллов, сколько пройдено слайдов, сколько заданий впереди),

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

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

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

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

Если в меню курса мало пунктов, его можно сделать горизонтальным, если больше 5 — делайте вертикальным. Если меню представляет собой список (например, список продуктов компании), делайте его вертикальным. Сомневаетесь? Тогда делайте вертикальным.

Работая над дизайном или редизайном курса вы можете столкнуться с синдромом утенка (Baby-Duck-Syndrome). Он проявляется в том, что пользователи привязываются к знакомому дизайну, подсознательно хорошо реагируют на похожие варианты и не очень любят другие. Но тут есть и положительный момент: если ваши ученики привыкли к стилю тренинговых презентаций, дизайну корпоративного сайта или операционной системы рабочего компьютера, то используйте их как шаблон для курса. В этом случае знакомство с таким новым форматом, как электронное обучение, будет казаться уже не таким чужеродным и непривычным.

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

Для того, чтобы мотивировать пройти курс до конца, можно воспользоваться эффектом неопределенности (эффект Зейгарника). Мы зачастую стараемся найти ответы на возникающие вопросы как можно скорее. Видео ролики, статьи и сюжеты, использующие эффект неопределенности, обычно заканчиваются внезапно, не разрешая сложную ситуацию и не отвечая на возникающие вопросы. Для электронного курса можно применить отложенную обратную связь, когда ответ на возникший вопрос можно найти в следующем модуле или собрать его постепенно проходя все обязательные элементы курса. Кстати, такой вариант гораздо комфортнее для взрослой аудитории учеников, чем закрытая навигация.

Не добавляйте движения в курсе ради самих движений. Интерактивность, о которой так часто говорят в разработке электронного контента, подразумевает ответную реакцию на действие пользователя. Например, ученик ответил на вопрос, курс дал обратную связь в виде “Да, это действительно правильный ответ, потому что …”. Нажатие на кнопки “далее”, “еще”, “открыть”, “посмотреть” - это не интерактивность, а лишнее движение.

Рассмотренные выше рекомендации в отношении шрифтов, цветов и группировки текста на слайде также влияют на общий уровень юзабилити. Для того, чтобы проверить правильность выбранного дизайна, пригласите коллег оценить демо-версию курса (это может быть 1-2 модуля) и обратите их внимание на такие моменты:

- удобство навигации по курсу и использования различных кнопок,

- удобство чтения текста (размер и высота букв, стиль шрифта, выделение),

- удобство поиска нужной информации,

- удобство получения обратной связи,

- удобство изучения материала,

- скорость загрузки курса.

Предложите разные варианты для сравнения, например, слайд шрифтом Arial и тот же слайд шрифтом Verdana, расположение меню справа на слайде или слева, вертикальное или горизонтальное пунктов меню, зеленый и синий фон, и так далее.

Если вы хотите больше узнать о юзабилити, начните с книги "Веб-дизайн: или не заставляйте меня думать!" (Стив Круг).

Итоги мини-курса: Сборка и дизайн курса имеют множество нюансов, которые нужно учесть, так как визуальная коммуникация не прощает ошибок. Это не тренинг, в котором вы можете по ходу выступления что-то изменить, дополнить или предложить другой вариант. Предусмотрите, как вы будете обновлять курс, так как для этого потребуется быстрый доступ к нужным блокам для внесения изменений. Естественно, что текст проще заменить, чем инфографику или видео.

Совет: Для грамотного выбора дизайна удобно составить своеобразный профиль представителя целевой аудитории - описать типичного персонажа, его навыки и предпочтения. И далее уже разработать концепцию курса. Если у вас пока нет достаточного опыта в сборке и оформлении электронных курсов, то старайтесь проявлять сдержанность во всем, что касается дизайна. Попытки “оживить” контент или добавить ярких красок обычно заканчиваются плачевно. Шрифты, фоны, изображения, анимации - все это должно помогать в достижении учебной цели, а не создавать излишний информационный шум и визуальную нагрузку на мозг. Для каждого элемента, который находится на слайде курса, должно быть объяснение: с какой целью он здесь размещен и отвечает ли это задачам курса. И, на самом деле, ответ на этот вопрос нивелирует большинство ошибок в сборке и оформлении электронного контента.

Все материалы мини-курса смотрите по хэш-тегу: #как собрать и оформить курс