Как собрать электронный курс под смартфон: 10 основных правил

Электронный курс для компьютера и телефона — два разных продукта. Контент выпущенный под ПК неуклюже выглядит в гаджете, даже если адаптируется под размер экрана. И здесь задачу не решить простым увеличением шрифта и картинок. Мобильный курс изначально проектируют по другим правилам. Разберём основные.

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

Правило 1. Разбить курс на модули

Соцсети приучили человека к коротким информационным порциям — сейчас один сеанс работы с гаджетом длится в среднем 72 секунды. Цифру подтвердило исследование американской аналитической компании Nielsen Norman Group, специалисты которой изучили пользовательский опыт жителей 8 стран. Среди них США, Австралия, Китай и Великобритания.

Из исследования можно сделать вывод — большой формат не для мобильных устройств. Объемные курсы лучше делить на маленькие съедобные кусочки — модули, чтобы пользователь учился на ходу в удобное время.

Модуль — маленький курс в составе большого. Он раскрывает одну тему, как раздел в книге.

На модули программу обучения разбили авторы Google Primer — мобильного приложения по азам цифрового маркетинга.

В приложении Google Primer модуль — это колода из 5—7 карт с советами по маркетингу

В каждой колоде разобрано одно правило. За 2 минуты пользователь получает небольшую порцию знаний и тут же может закрепить их на практике.

В том, сколько должен длиться модуль, нет строгих законов. Главное — раскрыть тему и не утомить пользователя.

Правило 2. Сохранять учебный прогресс

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

Курс тоже умеет сохранять прогресс. Это подходящий вариант для тех, кто не хочет делить контент на части.

Если прогресс сохраняется, продолжить обучение можно в любой момент

В конструкторе электронных курсов iSpring Suite настроить сохранение прогресса можно за пару шагов. Для начала на панели инструментов iSpring Suite нажмём «Плеер».

В появившемся окне откроем вкладку «Навигация».

Затем в разделе «Продолжение просмотра» выбираем «Запрашивать продолжение».

Правило 3. Определить, как пользователи держат мобильное устройство

Люди по-разному берут в руки телефон — всё зависит от модели устройства, ситуации и задачи, которую нужно решить. Это доказало исследование Стивена Хубера. Дизайнер мобильных приложений компании Cummins провёл 1333 наблюдения за тем, как люди пользуются телефонами на улице, в аэропорту, кафе и других местах. Исследование показало:

49% пользователей держат телефон в одной руке. Как правило, они просто прокручивают страницу на экране устройства и при этом занимаются другими делами: несут сумку, держат детей за руку или открывают дверь.

Зеленая область — пользователю удобно дотянуться до объекта. Источник: uxmatters.com

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

36% пользователей держат телефон в одной руке, а нажимают на экран другой. Так удобнее выделить объект на экране или перейти по ссылке.

При таком положении пользователю удобно работать со всей областью экрана

15% пользователей держат телефон в двух руках одновременно. Так удобнее набирать текст, показало исследование.

Двумя руками пользователю удобнее всего набирать текст

Когда создаёте мобильный курс, определите, какие действия будет совершать пользователь. Если он прокручивает страницу, подойдёт лонгрид. Кликает по объектам на экране — слайдовый курс. Пользователю придётся прокручивать страницу, кликать на объекты, печатать текст — подойдёт для курса с тестом и диалоговым тренажёром. 

От привычек людей зависит под какое положение экрана проектировать курс — вертикальное или горизонтальное.

Чтобы не путать пользователя, в самом начале покажите, как нужно взять в руки телефон

Правило 4. Поставить всё важное в центр экрана

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

При чтении поисковой выдачи Google пользователи кликают по центру. Источник: Google

В большинстве случаев люди прокручивают контент до центра экрана и только потом кликают по нужному объекту — выбирают контакт в телефонной книге или сообщение в Twitter.

Тепловая карта новостной ленты в Twitter. Источник: uxmatters

Расположите в центре экрана основное сообщение или кнопки, чтобы сразу сфокусировать внимание пользователей на важном.

Фрагмент онлайн-курса «Дом.ру». Кликабельные кнопки находятся в центре экрана

Правило 5. Продумать подсказки

В первый раз открыть мобильный курс — всё равно что оказаться в чужой стране: неясно, куда идти. Чтобы пользователь не терялся вначале, проведите экскурсию — покажите все кнопки и объясните их значение.

В компьютерных онлайн-курсах учеников часто знакомят с функциональностью через подсказки на затемнённом экране — разработчики называют этот приём «оверлей».

Так выглядят стандартные подсказки в электронном курсе

В мобильном курсе многие могут пропустить такое интро, приняв его за баннерную рекламу.

Вместо долгих разъяснений на старте давайте подсказки во время по ходу обучения. Так, нНапример, в приложении по английскому языку Duolingo новичка в  начале встречает наставник и постепенно вводит в курс дела.

В Duolingo пользователя знакомят с интерфесом приложения постепенно. Так выше шанс, что он не забудет важную информацию

Разработчики Lingualeo встроили знакомство с курсом в процесс обучения — новичку последовательно рассказывают, как выполнять каждое задание

Правило 6. Сократить текст на слайде

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

Правило 7. Использовать шрифт 16 кегля или больше 

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

Для курса лучше использовать шрифты без засечек. Для чтения с телефона удобнее Arial, Verdana и Trebuchet.

Правило 8. Добавить в курс индикатор прокрутки

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

Индикатор прокрутки — полоска вверху экрана. По мере скролла она движется слева направо, показывая, в какой части курса находится человек и сколько осталось до конца.

Индикатор прокрутки помогает пользователю ориентироваться в курсе

Правило 9. Увеличить размер интерактивных объектов

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

Правило 10. Отказаться от гиперссылок

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

В электронных курсах для ПК гиперссылки не мешают пользователям

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

В мобильном курсе пользователь при скролле может случайно нажать на гиперссылку

Чтобы пользователь не терялся во время обучения, замените гиперссылки кнопками или вкладками с дополнительной информацией. Даже если человек быстро листает материал, он заметит кнопку и не станет на неё нажимать без необходимости.

Ещё одна сложность при работе над мобильным курсом — размер экрана, который меняется в зависимости от модели и типа устройства. Подстроить контент под каждый экран нереально — всё равно нужно на что-то равняться. Мы проанализировали более 100 000 пользователей мобильного приложения iSpring Learn в России и составили топ-3 популярных устройств. Можете ориентироваться на одно из них при разработке курса.

Топ-3 популярных мобильных устройств по версии iSpring

Готовые шаблоны курсов под смартфон в iSpring Suite

Курс под смартфон можно быстро собрать из готовых шаблонов iSpring Suite — достаточно выбрать подходящий и добавить текст. В коллекции есть макеты вертикальных и горизонтальных слайдов. С ними легко создать красивую обложку, наглядно оформить цели, содержание или разделы курса.

Чтобы собрать курс, достаточно выбрать подходящие шаблоны слайдов и наполнить их контентом

Мобильные курсы под брендбук компании. В шаблоне можно изменить всё — от цветового кода и картинок до формы кнопок и шрифтов. Курс будет выглядеть, как вы захотите.

Слайды курса и кнопки можно оформить в цвета из брендбука

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

Тесты и плеер адаптируются под смартфон пользователя

Как собрать онлайн-курс под смартфон: коротко

1. Делите курсы на маленькие блоки, чтобы пользователь смог учиться на ходу в удобное время.
2. Если на экране много текста, он становится мелким — его сложно читать. Убирайте лишнее и пишите крупно. Оптимальный размер шрифта: 16 кегль и больше.
3. 49% пользователей держат телефон вертикально в одной руке. Учитывайте это при создание контента под мобильный курс.
4. Делайте кнопки крупнее и оставляйте вокруг них больше свободного места, чтобы во время обучения пользователь не нажал ничего лишнего.