27 АПРЕЛЯ 2020

Разработка мобильного курса

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

Алексей Козлов
Аккаунт-директор

Отвечает за клиентские отношения в компании, создает и налаживает связь между продажами и производством. Работает в сфере электронного обучения более 5 лет.
Перед компанией стоит задача создать курс, который большая часть людей будет проходить с мобильных устройств. А, может, и не будет, но на всякий случай менеджер обучения на стороне клиента добавляет в технические требования мобильную версию курса. Далее мы получаем запрос от потенциального заказчика, и больше чем в половине случаев видим обязательность мобильной версии, адаптивной верстки или поддержки мобильных устройств. Формулировки могут быть разные, и не всегда они совпадают с реальными потребностями. Давайте разберемся, что кроется за этими формулировками, как определять основные устройства и выбрать средство разработки. А также расскажем, в каких курсах действительно необходима мобильная версия.

Шаг 1. Задаем вопрос: нужна ли нам мобильная версия курса?

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

Мой краткий ответ такой: если вы задумались о мобильной версии — напишите об этом в техническом задании (далее ТЗ). Если есть хоть какой-то шанс, что электронный курс будут смотреть с мобильных — включайте это в требования. Так как чем далее, тем больше и больше мобильные устройства «отъедают» трафик у ПК, m-learning (мобильное обучение) развивается и будет продолжать в том же духе.

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

Шаг 2. Определяем, какое устройство (ПК, планшет или смартфон) в приоритете

Итак, вы указали в ТЗ о необходимости поддержки мобильных устройств. Далее мы стараемся выяснить, что имелось в виду, потому что «поддержка мобильных устройств» бывает разная.

С точки зрения заказчика распределение целевой аудитории и приоритетных устройств обычно выглядит так:

  • Основная аудитория проходит курсы с ПК, иногда с планшетов и мобильных

  • Целевая аудитория курса разделена примерно 50 на 50 между пользователями ПК и другими устройствами

  • Целевой аудитории необходимо или просто удобно обучение со смартфона или планшета, например полевым сотрудникам

А с финансовой точки зрения распределение версий можно сформулировать следующим образом:

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

  • Нужно доплачивать за мобильную версию, так как необходимы обе (мобильная и для ПК) и в хорошем качестве (ведь аудитория разделена по использованию устройств почти поровну)

  • Нужна только мобильная версия / для планшета и можно обойтись без оплаты ПК-версии

Шаг 3. Узнаем три основных способа разработки

Решение двух дилемм выше, скорее, на стороне заказчика. Учитывая это, провайдер может предложить варианты:

  • Стандартная «резиновая верстка» в средстве разработки

  • Адаптивная верстка

  • Две версии курса

1. Стандартная «резиновая верстка» в средстве разработки

Что это? Текст и изображения курса, которые мы видим на экране могут пропорционально увеличиваться и уменьшаться, как резинка. То же самое происходит и на экране гаджета. Чаще всего такой способ используется, когда нужна версия для ПК и нет необходимости доплаты за мобильную версию.
Достоинства. Не нужно доплачивать. Функционал многих редакторов (Articulate Storyline, Captivate и др.) позволяет создавать курсы, которые будут доступны на телефонах и планшетах. Проходить их с телефона не всегда комфортно, но все же возможно.

Если заранее прописать в ТЗ прохождение на мобильных устройствах, то кнопки уже на этапе дизайна можно сделать больше, элементы крупнее. Эти курсы будут лучше смотреться с телефона. Но стоит учитывать, все-таки вариант курса для всех устройств не такой удобный и интерактивный, как версия курса, предназначенная только для ПК или полностью созданная для смартфонов.

Пока на этом решении мы останавливаемся довольно часто, но, думаю, это не навсегда. Технологии развиваются, и потребность в мобильности возрастает.

Недостатки. Пройти курс с вертикальной хваткой не получится. Также на мобильных устройствах кнопки становятся маленькими, это затрудняет нажатие. Изображение может слегка размываться при таком «вытягивании», но все-таки читается. Да, не слишком удобно. Да, часть механик не работает или работает некорректно. Например, упражнение с перетягиванием карточек удобно проходить с ПК, но на смартфоне оно превращается в пытку.

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

Другой вариант «резиновой верстки». Курс на средстве разработки (Articulate Storyline, Rise, Captivate), предназначенный для прохождения на телефоне или планшете. Такой электронный курс успешно открывается и работает с ПК.
Знакомство с мобильным курсом на ПК
Знакомство с мобильным курсом на ПК. Источник: LEVEL
Недостатки:

  • Механики, удобные только на смартфоне или планшете

  • Различные перетягивания, рассчитанные на движения и траекторию пальцев (не очень комфортно для прохождения на компьютере)

  • Все элементы от меню курса до навигации и кнопок слишком крупные

  • Визуально курс выглядит вытянутым и пустым по бокам
2. Адаптивная верстка

Что это?
Курсы с адаптивной версткой похожи на сайты, сделанные на Tilda. По сути это контент, который меняет внешний вид и адаптируется под экран используемого устройства. Это удобно при переключении меню, перелистывании страниц, то есть в навигации по курсу, легкости чтения и восприятия информации.
Тестирование с адаптивной версткой по итогам изучения теории по качеству молока. Собрано в Articulate RISE
Тестирование с адаптивной версткой по итогам изучения теории по качеству молока. Собрано в Articulate RISE. Источник: LEVEL
Подпишитесь на нашу рассылку и получайте свежие новости два раза в месяц

Если вы нажали на кнопку, вы согласны с политикой конфиденциальности.
Достоинства. Адаптивная верстка комфортна для пользователей и отвечает современным стандартам UX. В том числе тем, что можно начать проходить курс на компьютере и закончить на смартфоне (системы дистанционного обучения обычно сохраняют прогресс прохождения).

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

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

3. Две версии курса: для мобильных устройств и для ПК

Что это? Это отличное решение, ведь оба курса будут идеально приспособлены ко всем техническим устройствам. Многие сайты имеют две версии, и ими удобно пользоваться с ноутбука, маленького планшета и телефона.

Недостаток. Разработка двух версий — это практически две стоимости разработки. Необходимы разные версии сценария, дизайна, разработки и т. д. Другими словами, это дорого.
Другая сложность. Если разрабатываются два курса, то это два SCORM-пакета. Между ними очень сложно, а порой невозможно наладить и свести единую статистику и сохранение общего прогресса.

Шаг 4. Определяем способ разработки

Для наглядности сделали таблицу, которая поможет сравнить разные способы разработки:
Итак, допустим, вы определились, что вам нужен e-learning курс, который пользователи будут проходить на смартфонах. Мобильная или адаптивная верстка — вы пока точно не знаете. Как разрабатывать — тоже не знаете. Давайте выбирать.

Шаг 5. Выбираем средство разработки для мобильных устройств

Какая мобильная версия подойдет? В этом шаге выбор относительно прост.

1. Если у вас будут смотреть курс только со смартфонов или планшетов, можно выбрать мобильную версию без адаптивности. Плюс будет более красиво и достаточно увлекательно.

Мобильный курс сам по себе может быть сделан так, что он будет похож на приложение. В подобном курсе зачастую добавлена интересная анимация, а информация перелистывается с помощью движения пальца.
Прототип мобильного диалогового тренажера по продаже обоев для сотрудников Леруа Мерлен
Прототип мобильного диалогового тренажера по продаже обоев для сотрудников Леруа Мерлен. Источник: LEVEL
В какой программе разрабатывать мобильный курс?

Сборка мобильного курса может осуществляться в любом редакторе (как в Articulate Storyline, так и в других) и по сути мало отличаться от верстки простого курса. Нужно только внимательно прописать и создать механики, продумать интерфейс, чтобы он был удобен для прохождения с мобильных устройств. Если мы говорим о верстке мобильного курса, то Articulate Storyline дает нам возможность создать стильный кастомизированный дизайн e-learning проекта.

2. Если же нужно, чтобы прохождение на ПК и на всех устройствах было одинаково комфортно, тогда делаем адаптивный курс.

Как и на чем разрабатывать? Рассмотрим варианты:

  • Делать «руками», то есть на html и javascript (любой back-end), писать курс с нуля
  • Делать в средстве разработки для адаптивных курсов (Articulate RISE, Adapt)

Дополнительные варианты

Вариантов больше, чем два. Можно, например, делать в Тильде и встроить то, что сделали, с помощью программирования в средство разработки. VR также можно встраивать в слайдовые курсы. Можно сделать обучающую игру на C++ в Unity и завернуть в SCORM.

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

В каком средстве разрабатывать адаптивный курс?

Перечислим основные средства разработки, в которых мы пробовали собирать курсы:

RISE и Adapt на выходе публикуют SCORM. Также могут публиковать xAPI (Tin Can).

Различия RISE и Adapt в следующем:

  • Для работы в RISE требуется меньше специальных навыков. Он более понятный, но одновременно и более простой, аскетичный. В нем задается цветовая схема, но существенно изменить дизайн нельзя. Поэтому курсы получаются стандартными, похожими друг на друга.
  • Adapt же, хоть и является бесплатным, чуть сложнее для того, чтобы начать в нем работать. Но при этом он позволяет намного больше менять: помимо дизайна можно дорабатывать компоненты и многое другое. Поэтому разработка в нем хоть и сложнее, но продукт получается более интересный, вовлекающий и разнообразный.
Резюмируем, в чем есть разница между средствами разработки в сравнительной таблице:
Судя по тому, что курсы все в основном делают в редакторах, те плюсы, которые несет стандартизация (преимущественно легкое внедрение в СДО и сокращение стоимости разработки и поддержки), сильно выигрывают.

Как принять верное решение?

Для наглядности создали онлайн-схему, которая резюмирует сказанное в статье и поможет вам определиться с форматом, видом и средством разработки курса. Доступ к схеме открытый, просто перейдите по ссылке или кликните на нее ниже:
Выбрать бывает непросто. Обращайтесь в LEVEL, мы постараемся помочь!
Авторы: АЛЕКСЕЙ КОЗЛОВ, КАРИНА ОВАНЕСЯН

Статья будет дополняться примерами наших курсов
Поделиться