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

Ресурсы дизайна никогда не перестают напоминать нам, как важно быть последовательным при создании любого графического объекта. Как разработчик электронного обучения вы знаете, как сложно поддерживать единый стиль внешнего вида на протяжении всего курса. В душе мы все творческие натуры. К тому времени, как мы просматриваем пару слайдов, наш мозг устает, хочет разнообразия и немного отвлечься. 

Преимущества визуальной согласованности

Есть причина (скорее даже несколько), по которой гуру электронного обучения настаивают на визуальной согласованности материалов. Вот как это может помочь вашему курсу:

• Интуитивное понимание и узнаваемость: визуальная согласованность помогает ученикам понять, как работает курс – как ориентироваться, где искать учебные и навигационные элементы и что делать с различными визуальными элементами. Последовательность делает интерфейс более знакомым, поэтому ученики чувствуют себя уверенно, используя его
• Снижает когнитивную нагрузку: согласованность снижает когнитивную нагрузку курса, облегчая ученику продвижение по обучению, вместо того, чтобы тратить умственную энергию на попытки выяснить, как выполнить задание или получить доступ к материалам
• Демонстрирует профессионализм: беспорядочно размещенные на экране шрифты, набор иконок и элементы придают вашему курсу небрежный вид. «Беспорядок» пахнет непрофессионализмом и ленью
• Создает гармонию: красота находится в равновесии. Когда визуальные элементы спроектированы так, чтобы выглядеть и функционировать согласованно, возникает также ощущение целостности

Как добиться согласованности и не быть скучным

Быть последовательным и придерживаться согласованности не обязательно должно быть скучным. Вот пять правил, которые помогут вам создать визуально согласованный курс электронного обучения, который не вызовет зевоты:

1. Создайте четкую визуальную иерархию

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

Вот показатели, которые помогут вам создать сильную визуальную иерархию:

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

2. Используйте гармоничную цветовую гамму

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

Вот что нужно помнить при использовании цветовой схемы для вашего курса:

• Выберите цветовую схему, содержащую 1-3 основных цвета и 1-3 дополнительных. Это гарантирует разнообразие в курсе
• Выбирайте цвета, которые контрастны, но дополняют друг друга. Это гарантирует, что цветовая палитра не будет раздражать глаз
• При выборе цветов для палитры учитывайте психологию цвета (какие помогают в обучении, а какие цвета будут раздражать и отвлекать учеников)
• Вы можете создать разнообразие, используя различные оттенки одного и того же цвета или регулируя яркость и контрастность
• Используйте одинаковые цвета для связанных элементов
• Не жертвуйте читабельностью ради использования цветов. Убедитесь, что ваш цветной фон не делает текст неразборчивым

3. Повторяйте визуальные элементы для повышения удобства использования

Ниже приведены некоторые общие визуальные элементы, которые приводят к повторению, не превращая курс в раздражающее занятие:

• Иконки: представляют собой сложные идеи и широкие темы в ограниченном пространстве и легко распознаются. Такие значки, как электронная почта или печать, не нуждаются в объяснении. Но убедитесь, что где-то в начале вы конкретизируете тему вашего курса, историю или сценарий,  объясняющие значок, который вы будете использовать позже. Например, если ваш контент посвящен изменению климата, можете использовать иллюстрированный значок земли, на который ученики могут щелкнуть и перечитать полезную информацию. Также неплохо разместить этот значок на странице, где вы конкретизируете информацию, чтобы облегчить ассоциации и распознавание
• Шрифты: не используйте слишком много шрифтов. Рекомендуется выбрать шрифт или семейство шрифтов с большим количеством стилей, которые позволят вам создавать различный вид текста без ущерба для согласованности
• Кнопки и вкладки: не меняйте стили. Ваши кнопки и вкладки могут иметь разные цвета, но они должны выглядеть так, как будто принадлежат одному курсу. Например, если вы используете рельефный стиль, придерживайтесь его на протяжении всего курса. Кроме того, убедитесь, что кнопки или вкладки, имеющие схожие функции, также похожи друг на друга
• Инструменты навигации: навигационные инструменты в идеале должны выглядеть одинаково и располагаться в одном и том же месте на протяжении всего курса. Отличительной чертой эффективной структуры навигации является то, что она позволяет ученикам легко и интуитивно ориентироваться в курсе. Не экспериментируйте с навигационными кнопками; если ваши ученики не могут распознать новую кнопку «Далее» и, следовательно, не могут перейти к следующему уроку, ваш курс не выполняет свою задачу

4. Иногда будьте непоследовательны

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

Главное – найти баланс, а практическое правило таково: будьте непоследовательны в меру и служите определенной цели, а не только потому, что хотите повеселиться. В противном случае вы получите курс электронного обучения, который выглядит хаотичным и запутанным для понимания.

Несогласованность хорошо работает в следующих случаях:

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

5. Создайте руководство по стилю

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

Многие авторы электронного обучения любят создавать руководство по стилю и делиться им со своими клиентами, прежде чем приступить к разработке курса. Это дает клиентам представление о том, как будет выглядеть курс.Согласованность и последовательность лежит в основе отличного (красивого, интуитивно понятного и эффективного) визуального дизайна. Перед вами, как перед дизайнером электронного обучения, стоит непростая задача. Вы должны создавать визуально привлекательные курсы, которые легко увлекают и обучают. Будьте последовательны, чтобы помочь своим ученикам пройти сложный процесс обучения.