10 ошибок дизайна, которые испортят онлайн-курс
Неправильное оформление усложнит восприятие даже самого полезного и интересного контента.
Иллюстрация: Cece Kun / Unsplash / lookstudio / Freepik / Дима Руденок для Skillbox Media
Редакция «Образование» Skillbox Media
Онлайн-журнал для тех, кто работает или хочет работать в сфере образования. Рассказываем о трендах, теории и полезных практиках.
Катерина Голомшток
Независимый сценарист-разработчик электронных курсов, работает в сфере обучения с 2012 года. С нуля создала более 200 курсов. Автор телеграм-канала Nova Academy.
Дизайнер Скотт Беркун в своей книге «Дизайн всего. Как появляются вещи, о которых мы не задумываемся» приводит цитату Дугласа Мартина, специалиста по дизайну книг: «Вопрос о том, нужен ли дизайн и есть ли на него бюджет, — совершенно бессмысленный. Дизайн неизбежен. Альтернатива хорошему дизайну — плохой дизайн, а не его отсутствие».
То же самое справедливо и для дизайна электронных курсов. Во-первых, согласно одному из законов UX-дизайна, пользователи часто воспринимают эстетически приятный дизайн как дизайн более удобный. Во-вторых, насмотренность пользователей в digital-пространстве растёт. Нас окружают красивые мобильные приложения и сайты, и когда человек открывает курс, он также ожидает увидеть красивый дизайн.
Поэтому поговорим об ошибках в дизайне электронных курсов, которые иногда допускают даже опытные дизайнеры. И обсудим, как их избежать.
Ошибка 1
Разный размер текста для разных блоков или слайдов
Иногда, чтобы занять всё пространство слайда или экрана, при проектировании курса дизайнеры и разработчики используют на разных слайдах разный размер шрифта. Там, где текста меньше, шрифт увеличивают, а если текста много — уменьшают. А теперь представьте, что вы читаете книгу, где на каждой странице меняется размер шрифта. Будет ли вам удобно воспринимать такой текст? Скорее всего, нет.
Так не стоит делать:
От слайда к слайду меняется размер шрифта заголовков и основного текста
Изображения: личное портфолио Катерины Голомшток
Этого же правила стоит придерживаться при вёрстке слайдового курса — стоит выбрать единый размер обычного текста, заголовков и подзаголовков. Важно ориентироваться на размер самого слайда: например, я использую при разрешении 1920×1080 px размер шрифта не меньше 20–26 кеглей. Если текста на слайде много, чтобы не мельчить, лучше трансформировать его в интерактивный (то есть такой слайд, в котором часть информации скрыта во вкладках) или разделить информацию на два слайда.
Так лучше:
Заголовки и основной текст на разных слайдах сохраняют единые размеры шрифта
Изображения: личное портфолио Катерины Голомшток
Ошибка 2
Обилие разных цветов и шрифтов
Использование большого количества цветов и шрифтов в курсе также затрудняет восприятие информации. Каждый новый элемент добавляет больше визуального шума, и сосредоточиться на содержании становится тяжелее.
Так не стоит делать:
Чтобы избежать этой ошибки, лучше использовать всего два шрифта: для заголовков и для основного текста. Что касается количества цветов, то палитра слайда может быть монохромной или контрастной, но для выделения смысловых акцентов лучше использовать не больше двух цветов.
Так лучше:
Ошибка 3
Центрирование текста
При вёрстке текста лучше всего использовать выравнивание по левому краю. Такой текст читается легче, чем выровненный по центру или расположенный на слайде хаотично. Выравнивание по ширине также может затруднять чтение, так как на слайде появляются неравномерные пробелы между словами и «висячие» предлоги.
Так не стоит делать:
Выравнивание всех блоков текста по левому краю создаёт невидимую прямую линию слева. Читателю не нужно напрягаться, чтобы найти, где начинается следующая строка — достаточно просто перевести взгляд влево. И чтение становится лёгким и быстрым.
Так лучше:
Ошибка 4
Картинки, которые занимают почти весь слайд
Если для проектировщика курса главное — текст, то для дизайнера — визуалы. Иногда это приводит к забавным казусам. Мне, например, приходилось слышать от коллег-дизайнеров, с которыми я оформляла презентации для курса, предложение удалить какую-нибудь информацию не потому, что она несущественная, а просто потому, что «она некрасиво смотрится в вёрстке».
В примере ниже видно, что дизайнер добавил крупную картинку, которая занимает большую часть слайда, и из-за этого не поместилась часть текста под картинкой. Поэтому пришлось использовать прокрутку, и пользователю понадобится совершать дополнительные движения, чтобы прочесть текст целиком. Стоит ли большая картинка этих лишних усилий?
Так не стоит делать:
Конечно, бывают слайды, где главенствует картинка (например, это график, схема, изображение какого-либо процесса, механизма или ещё какого-либо предмета по изучаемой теме), а текст играет вспомогательную роль. В этом случае акцент действительно должен быть именно на картинке. Но если ключевую информацию мы доносим именно текстом, то дизайн и оформление не должны использоваться в ущерб контенту. В таких случаях главное на слайде — это текст, и задача картинки — дополнить его, а не занять его место.
Так лучше:
Ошибка 5
Неправильно обрезанные картинки
В той же книге «Дизайн всего» говорится, что вы не замечаете дизайн, если он хороший. А вот если вы заметили, что что-то не так, то это ошибка дизайнера. Это же относится к картинкам, на которых у персонажей, например, обрезаны ноги. Выглядит это странно, и пользователь точно обратит на это внимание.
Так не стоит делать:
Это, конечно, не значит, что всех надо изображать в полный рост. Часто достаточно добавить персонажу на слайде обводку или фон в виде автофигуры, чтобы картинка воспринималась лучше.
Так лучше:
Ошибка 6
Низкая контрастность
Цвет стоит использовать, чтобы «подсветить» или выделить информацию. Например, в примере ниже в содержании выделяется раздел, в котором находится пользователь. Однако дизайнер выбрал цвет, который практически ничем не отличается от основного, поэтому акцент остаётся не очень заметным, и вообще неочевидно, хотел ли автор курса акцентировать внимание учащегося на этом элементе или это просто ошибка цветокоррекции.
Так не стоит делать:
Контрастность вашего экрана может отличаться от контрастности экрана учащегося. Поэтому для выделения цветом лучше выбирать контрастные цвета, чтобы разница была точно заметна.
Так лучше:
Ошибка 7
Некорректное размещение информации на слайде
Мы читаем слайд в направлении сверху вниз, слева направо. Поэтому информацию необходимо располагать именно в таком порядке.
В примере ниже эта особенность не учтена, и поэтому пользователь сначала видит варианты ответов, а лишь затем — утверждение, к которым они относятся, что вызывает путаницу и затрудняет понимание слайда.
Так не стоит делать:
Чтобы исправить ситуацию, достаточно поменять вопрос и варианты ответов местами.
Так лучше:
Ошибка 8
Мало пространства для текста
Если вы зайдёте в магазин одежды, как быстро вы сможете определить ценовой сегмент: эконом или премиум? Вероятнее всего, почти сразу. В массмаркете вещи заполняют максимум пространства в магазине, вешалки и полки буквально ломятся от одежды. А вот в дорогих брендовых магазинах наоборот — у каждой вещи достаточно пространства, чтобы показать себя со всех сторон целиком.
То же самое относится и к дизайну слайдов. Слайды, в которых мало «воздуха», текст прижимается к краям, выглядят «дёшево». Как будто дизайнер экономил слайды и пытался утрамбовать в каждом из них максимум информации.
Так не стоит делать:
Чтобы дизайн выглядел «дороже», стоит увеличить свободное пространство на слайде.
Так лучше:
Ошибка 9
Разная стилистика оформления элементов
Ещё один признак «дешёвого» дизайна — разная стилистика оформления элементов: разные радиусы скругления элементов, разная толщина линий обводки. На примере ниже текстовый блок и плашка меню имеют больший радиус скругления, чем кнопки слева. Обводка кнопок также отличается. Из-за всего этого слайд выглядит неопрятно.
Так не стоит делать:
Лучше потратить время на то, чтобы выровнять скругления и привести все элементы к единому стилю.
Так лучше:
Ошибка 10
Нет выравнивания между объектами
При первом взгляде на приведённый ниже слайд неискушённый пользователь не сможет точно объяснить, что не так, но он точно почувствует, что что-то не в порядке.
Дьявол кроется в деталях. Вот здесь, например, фрагменты текста в цветных блоках не выравниваются по одной линии, и эта мелочь создаёт ощущение неаккуратности.
Так не стоит делать:
Если выровнять текст в баблах по верхнему и левому краям, слайд будет выглядеть опрятнее.
Так лучше:
Читайте также:
- Создание онлайн-курсов: подборка конструкторов, которые позволяют это сделать
- Большой гайд по созданию презентаций: как сделать убедительный текст, дизайн и структуру
- Что такое карта курса и какой она бывает
- Как сделать текст курса понятным и вовлекающим
- Как создавать курсы в формате лонгридов
Как сделать электронный курс удобнее: 8 принципов LX-дизайна
LX-дизайн (Learning Experience Design) — это подход к созданию образовательного контента. Его ещё называют дизайном учебного опыта. LX-дизайн помогает сделать прохождение электронного курс понятным и удобным. Если курс сделан по правилам LX-дизайна, ученикам проще разобраться, как устроена навигация и какие кнопки нажимать. Выше шанс, что они не пропустят важную информацию. В статье разберём 8 принципов LX-дизайна, которые помогут сделать ваши курсы интереснее и понятнее.
1. Показываем пользу с первого слайда
Чем больше пользы в электронном курсе, тем выше шанс, что он заинтересует сотрудников. Если курс не помогает работать быстрее и эффективнее, сотрудники вряд ли захотят тратить на него время. Например, менеджеры по продажам часто сталкиваются с эмоциональным выгоранием. Курс «Как не конфликтовать со сложными клиентами» их заинтересует, а «Основы продаж» — нет. Как использовать в электронном курсе : чтобы заинтересовать сотрудников, расскажите о пользе курса уже на первом слайде. Например, в названии покажите решение насущной проблемы. Тема курса должна не столько обещать человеку пользу, сколько отражать те задачи, с которыми он сталкивается ежедневно.
Если хотите, чтобы сотрудник погрузился в курс, вложил время и силы, нужно вызвать в нём искреннее желание пройти этот курс, увидев лишь его название
Правильно составленное содержание тоже усиливает интерес к курсу. В первом варианте содержание не объясняет, чем урок будет полезен. А во втором есть практическая польза: сотрудник знает, что курс поможет ему работать лучше
2. Усложняем материал курса постепенно — таксономия Блума
В 1956 году американский педагог Бенджамин Блум разработал таксономию образовательных целей. Согласно его теории, обучение — это последовательный процесс, и состоит он из 6 уровней: запоминание, понимание, применение, анализ, синтез и оценка. Каждый из них опирается на предыдущий: если не запомнить новую информацию, применить её не получится. Так, если сотрудник не выучил характеристики нового автомобиля, он не сможет презентовать его клиенту. Как использовать в электронном курсе : чтобы научить сотрудника новому, двигайтесь от простого к сложному. Сперва раскройте тему и объясните, чем она полезна сотруднику. Потом расскажите, как это работает и где это можно применить. Не стоит бросать на студента сразу большой объём новой информации. Это может отпугнуть и отбить желание продолжать учиться. Чтобы подобного не допустить, курс стоит усложнять постепенно. Таксономию Блума применяют ещё и в тестах. Как всё работает, читайте в статье: «Как составить тест по правилам таксономии Блума» →
3. Большие блоки информации делим на мелкие — закон Хика
В 1952 году британский психолог Уильям Хик и американский профессор психологии Рэй Хайман провели эксперимент, чтобы выяснить, сколько времени пользователи тратят на выбор. Читать полное исследование → Перед участниками поставили 10 ламп, а под каждой из них — клавиши. Лампы включали в произвольном порядке: от 2 до 10 раз. Задача участников — как можно быстрее нажать клавиши, которые соответствуют зажёгшимся лампочкам. Результат эксперимента показал: чем больше вариантов, тем человеку сложнее запомнить информацию и принять решение. Как использовать в электронном курсе : человеку сложно запомнить большой объём информации за раз. Если много текста, стоит разбить его на несколько слайдов. Так сотрудник будет обрабатывать информацию порционно. А значит — у него больше шансов её запомнить.
На слайде «Было» сразу 8 новых для сотрудника блоков информации. Всё запомнить за раз не просто. Чтобы пользователю было удобнее, каждому принципу посвятим отдельный слайд. Так у нас будет место, чтобы раскрыть суть каждого и помочь сотрудникам всё запомнить
4. Используем в дизайне знакомое оформление — закон Якоба
Закон Якоба гласит: «Пользователи проводят большую часть своего времени на других веб-сайтах, а не на вашем». Это значит, если элементы управления вашего курса повторяют дизайн популярных сайтов, пользователям проще в них разобраться. Как использовать в электронном курсе : стоит отказаться от нестандартных иконок и кнопок в оформлении курса. Их значение может быть непонятно пользователю. Лучше использовать классические варианты. Например, мы привыкли, что закрыть окно можно, нажав на крестик. Если вместо него поставить треугольник, это запутает пользователя.
Задача обеих кнопок — перенести обучающегося на следующий слайд. В примере «Было» использована метафора книги: слайды курса можно листать как страницы книги. Но пользователя она бы сбила с толку: на большинстве сайтов используют стрелки
5. Важную информацию располагаем по краям — эффект последовательного позиционирования
В основе принципа лежит открытие немецкого психолога Германа Эббингауза. Учёный выяснил, что элементы, которые расположенные сверху и снизу, лучше откладываются в долгосрочной памяти. Всё потому, что человек неосознанно уделяет им больше внимания. Исследование Эббингауза показало: когда ученик читает список, он постоянно цепляется взглядом за самый верхний и самый нижний элемент. От этого запоминает их лучше. Как использовать в электронном курсе : если создаёте в курсе списки, самые важные блоки разместите внизу и сверху. Так больше вероятность, что пользователь обратит на них внимание и не забудет.
Проверьте себя: прочитайте все принципы, закройте глаза и повторите их по памяти. Какие из них вы пропустили? Где эти принципы расположены на слайде? Если Хик был прав, скорее всего, они расположены посередине
6. Привлекаем внимание с помощью акцентов — эффект Ресторфф
Среди ряда однородных объектов человек обратит внимание на те, что отличаются. Эта особенность нашего восприятия легла в основу эффекта изоляции. Его открыла немецкий психиатр и педиатр Хедвига Ресторфф в 1933 году. В ходе эксперимента участникам давали список однородных слов, но среди них было одно, которое сильно отличалось. Лучше всего запомнилось именно оно. Как использовать в электронном курсе : чтобы обратить внимание на важную информацию, выделите её необычным образом. Например, в однородном тексте выделите название термина жирным. Так на него сразу обратят внимание.
На слайде «Было» весь текст выглядит одинаково — никаких акцентов. На слайде «Стало» мы добавили акценты. Например, выделили заголовки более крупным шрифтом, а этапы дополнительно покрасили в другой цвет. Слайд стал сразу гораздо легче для восприятия
7. Показываем связь элементов через близость
За этот принцип отвечает один из гештальт-законов восприятия. Объекты, которые расположены рядом, группируются в сознании. И кажутся близкими по значению. Как использовать в электронном курсе : если блоки информации связаны друг с другом, поставьте их рядом.
На слайде «Было» не видно связи между подзаголовком и абзацем. Визуально непонятно, что к чему относится. Всё потому, что между ними много свободного пространства. В «Стало» мы его сократили и связали заголовки с текстом
8. Отсекаем всё лишнее — закон Миллера
В 1956 году американский психолог Джордж Миллер выяснил объём кратковременной памяти человека. Для этого учёный провел эксперимент: участникам давали список цифр, букв и слов. Их задача — запомнить как можно больше. В итоге оказалось, что в среднем человек способен запомнить от 5 до 9 элементов. Как использовать в электронном курсе : материал должен быть ёмким и лаконичным. Чтобы обучающийся запомнил больше, содержание слайда стоит ограничить 5-7 элементами. Например, тезис и 4-5 аргументов, которые его доказывают. Так когнитивная нагрузка будет оптимальной, а значит, студент сможет с ней справиться.
Справа — два разных блока с большим количеством пунктов. Их сложно разглядеть, а главное — запомнить. Чтобы упростить студенту задачу, давайте разделим слайд на две части. В одной — преимущества, в другой — недостатки. Так мы визуально разгрузим слайд
8 принципов LX-дизайна: коротко
- Принципы LX-дизайна помогут сделать обучение удобным, приятным и полезным опытом для студента. Так он не будет отвлекаться на недочёты в дизайне и сконцентрируется на главном — материале.
- Чтобы вовлечь сотрудников в обучение, каждый слайд курса должен нести практическую пользу и помогать решать их ежедневные задачи.
- Чтобы пользователю было проще изучить большой объём информации, поделите её на маленькие порции. Например, текст расположите на нескольких слайдах.
- Показать связь элементов на слайде можно через их близость. Так, в лонгриде подзаголовок и абзац стоит расположить ближе друг к другу, чтобы сотрудник понимал, что они связаны.
- Чтобы обратить внимание на важную информацию, подчеркните её необычным образом. Например, в однородном тексте выделите название термина жирным.
- Если использовать в оформлении стандартные элементы популярных сайтов, то студенту будет проще разобраться в интерфейсе с первого раза.
- Если на слайде несколько блоков информации, видео, схем или картинок, то необходимо учитывать, что лучше всего сотрудник запомнит контент по краям.
- Чтобы сделать слайд курса легче для восприятия, стоит сократить объём информации до 5-7 элементов. Например, на одном слайде не более 7 пунктов.
Поможет создать интерактивные курсы и тесты в рекордно короткие сроки. Без дизайнера и программиста.
Что не относится к дизайну слайда
6 января 2014 года я взял интервью у доктора Дона Нормана, автора 12 книг по дизайну, включая ставшую уже классикой «Дизайн привычных вещей». Само интервью еще готовится к публикации, но дело в том, что когда тебе 79 лет и ты написал столько книг и бессчетное количество статей, то отвечая на очередной вопрос, тебе проще сказать, где можно прочитать ответ, чем давать один и тот же ответ снова и снова.
Был такой момент и во время моего интервью, когда я спросил Дона Нормана, были ли презентации лучше до появления PowerPoint, ведь людям приходилось прилагать столько усилий для производства каждого слайда, на что он просто прислал ссылку на свою статью «В защиту PowerPoint», опубликованную у него на сайте.
Так как я понимаю, что не все читатели этого блога готовы сидеть со словариком и переводить с английского оригинал статьи от гуру дизайна, то решил подготовить не то чтобы ее перевод, но скорее вольный пересказ, несколько сократив саму статью по длине, и стараясь сохранить главные мысли автора.
«В защиту PowerPoint», Дон Норман
перевел Глеб Шулишов специально для ProstoPreza.ru
Уже стало обычным делом обвинять PowerPoint во всех смертных грехах. Вы сами много раз это видели: унылая, скучная, бесконечная бубнежка спикера — или лучше сказать «чтеца» — демонстрирующего непрерывный поток слайдов, на каждом из которых длинные маркированные списки, появляющиеся на слайде самыми невероятными способами при помощи самой неожиданной анимации, при этом каждый слайд медленно зачитывается вслух. Толпа скандирует: «Долой PowerPoint!»
Со всем моим уважением, все эти призывы и нападки на PowerPoint я считаю полной чушью. Во-первых, уверен, все согласны, что нет ничего хуже, чем докладчик, который долго и нудно читает нам текст со слайдов, который мы и сами в состоянии прочитать. Да, слайды с «булитами» — маркированными списками — часто становятся причиной скучных выступлений, но проблема кроется в самом выступлении, а не в инструменте.
И скучные выступления существовали задолго до появления PowerPoint. Даже маркерованные списки существовали задолго до появления PowerPoint, они были еще задолго до появления компьютеров. В древние времена люди печатали, выводили по трафарету или рисовали от руки свои слайды на прозрачных пленках, которые потом демонстрировались через кодоскопы. И эти выступления тоже были скучными и мучительными.
Давайте взглянем правде в глаза: большинство людей плохо выступают с презентациями. В лучшем случае в таких выступлениях хотя бы есть логика повествования: предыстория, текущее положение дел, анализ ситуации и рекомендации или выводы. Другими словами скучную часть нам рассказывают вначале выступления, а интересную в конце. Хотя часто до нее дело не доходит, потому что у спикера заканчивается время его выступления.
Весь текст на слайде написан, чтобы помогать спикеру. На них можно встретить оглавление или «напоминалки» о том, что следует сказать. В худших случаях, на слайдах написано вообще все, что должен сказать спикер, чтобы ему совсем не нужно было думать, а оставалось только читать. Но тогда возникает вопрос, если слайды предназначаются для докладчика, почему их показывают аудитории?
Хороший спикер всегда начинает свою презентацию с чего-то интересного, с какого-то кейса или примера. Он старается заинтересовать аудиторию, подогреть ее аппетит, и только после этого переходит к «скучной» части презентации, которая теперь для слушателей вовсе не скучная, ведь на этот раз они знают зачем она им нужна.
Еще один момент, люди не могут «проглотить» слишком большой объем информации за один присест. Задача презентации — донести лишь несколько самых важных моментов, чтобы заинтересовать слушателей более глубоко изучить эту тему, но уже самостоятельно, возможно, через чтение, возможно, через вопросы и общение. Если же «упаковать» в презентацию слишком много информации, то аудитория либо быстро потеряет интерес и впадет в скуку, либо, что еще хуже, заинтересовавшись чем-то в презентации, человек может задуматься об этом, лишь для того, чтобы пропустить все остальное.
У каждого докладчика должно быть три типа документов:
- Личные заметки, которые видны только самому спикеру, и содержат основные положения презентации и, возможно, яркие убедительные фразы, приготовленные заранее.
- «Говорящие» слайды, которые иллюстрируют главные мысли выступления, передают и усиливают то, что хочет рассказать докладчик. Они должы добавлять к выступлению, а не отвлекать от него.
- Раздатка. Вот это то место, где можно выдать все ссылки, источники, материалы. Вот здесь, а не на слайдах, нужно предоставить детальную информацию, которая пригодится тем, кого заинтересовала ваша презентация.
Это три отдельных и очень разных по своей сути документа: личные заметки, «говорящие» слайды и раздатка. Пожалуйста, не путайте их между собой и не вините инструмент (PowerPoint) в плохо подготовленной и плохо проведенной презентации.
Каким инструментом пользуюсь я? Часто совсем никаким: только я сам, просто рассказываю и все. Технологичная аудитория относится к этому с подозрением, но когда моя презентация заканчивается — с благодарностью. Когда у меня есть что-то, что я хочу продемонстрировать, я пользуюсь PowerPoint как эффективным инструментом для показа фотографий и рисунков. Я не использую шаблоны, не использую маркированные списки, и даже не использую слова на моих слайдах. Ну, если только совсем в крайних случаях.
Если мне нужны личные заметки, то они написаны на маленьких карточках или в блокноте, который расположен так, что я его вижу, а аудитория — нет. Раздатка? У меня никогда ее нет. Все что у меня есть сказать, вы найдете в моих книгах, а презентации — только для мотивации.
Плох ли PowerPoint? Нет! На самом деле — это очень полезный инструмент. Вот скучные презентации — это плохо, неправильно структурированные выступления — это плохо. Но не стоит перекладывать вину на инструмент.
Что не относится к дизайну слайда
Прежде, чем переходить к практическим советам, давайте определимся, что вообще такое анимация. Это изменение состояния объекта — таблицы, рисунка, графического элемента, картинки или фотографии.
Чтобы понять, как её использовать, можно подробнее изучить меню панели анимации в PowerPoint. Итак, на вкладке «Главная» есть команды «Вырезать» и «Вставить», с помощью которой можно добавлять элементы. Также есть вкладка «Дизайн». Нажав на неё, можно менять цветовую схему, фон слайда или добавлять тему. В то же время, с помощью вкладки «Переходы» можно установить способ смены слайдов. А вкладка «Анимация» позволяет управлять движениями элементов на слайде. Наведите на команду «Стили анимации» — и вы увидите доступные эффекты. При этом, если нужно проверить орфографию или сравнить несколько версий презентации, используйте вкладку «Рецензирование». В то же время, если презентацию нужно сохранить или предоставить к ней общий доступ, используйте вкладку «Файл».
С помощью специальных эффектов объекты могут не только двигаться, но и исчезать или появляться. Кроме того, можно менять их цвет или размер.
Теперь более подробно остановимся на некоторых возможностях анимации и посмотрим, в каких ситуациях они подойдут лучше всего.
- Эффекты входа
- Эффекты выделения
- Эффекты выхода
- Эффекты пути