27 АПРЕЛЯ 2020
Разработка мобильного курса
Как определить приоритетное устройство для обучения, выбрать способ и средство разработки и сэкономить время и деньги
Алексей Козлов
Аккаунт-директор
Отвечает за клиентские отношения в компании, создает и налаживает связь между продажами и производством. Работает в сфере электронного обучения более 5 лет.
Перед компанией стоит задача создать курс, который большая часть людей будет проходить с мобильных устройств. А, может, и не будет, но на всякий случай менеджер обучения на стороне клиента добавляет в технические требования мобильную версию курса. Далее мы получаем запрос от потенциального заказчика, и больше чем в половине случаев видим обязательность мобильной версии, адаптивной верстки или поддержки мобильных устройств. Формулировки могут быть разные, и не всегда они совпадают с реальными потребностями. Давайте разберемся, что кроется за этими формулировками, как определять основные устройства и выбрать средство разработки. А также расскажем, в каких курсах действительно необходима мобильная версия.
Шаг 1. Задаем вопрос: нужна ли нам мобильная версия курса?
Указывать ли в техническом задании разработку мобильной версии курса, если, допустим, со смартфона будет проходить всего пара человек? Или если вы не уверены, что вообще кто-то будет пользоваться смартфоном? Или в компании курсы можно проходить только с компьютеров, которые находятся в офисе?
Мой краткий ответ такой: если вы задумались о мобильной версии — напишите об этом в техническом задании (далее ТЗ). Если есть хоть какой-то шанс, что электронный курс будут смотреть с мобильных — включайте это в требования. Так как чем далее, тем больше и больше мобильные устройства «отъедают» трафик у ПК, m-learning (мобильное обучение) развивается и будет продолжать в том же духе.
Так что пишем поддержку мобильных устройств в ТЗ. Давайте дальше смотреть, как сделать это грамотно и не переплатить.
Мой краткий ответ такой: если вы задумались о мобильной версии — напишите об этом в техническом задании (далее ТЗ). Если есть хоть какой-то шанс, что электронный курс будут смотреть с мобильных — включайте это в требования. Так как чем далее, тем больше и больше мобильные устройства «отъедают» трафик у ПК, m-learning (мобильное обучение) развивается и будет продолжать в том же духе.
Так что пишем поддержку мобильных устройств в ТЗ. Давайте дальше смотреть, как сделать это грамотно и не переплатить.
Шаг 2. Определяем, какое устройство (ПК, планшет или смартфон) в приоритете
Итак, вы указали в ТЗ о необходимости поддержки мобильных устройств. Далее мы стараемся выяснить, что имелось в виду, потому что «поддержка мобильных устройств» бывает разная.
С точки зрения заказчика распределение целевой аудитории и приоритетных устройств обычно выглядит так:
С точки зрения заказчика распределение целевой аудитории и приоритетных устройств обычно выглядит так:
- Основная аудитория проходит курсы с ПК, иногда с планшетов и мобильных
- Целевая аудитория курса разделена примерно 50 на 50 между пользователями ПК и другими устройствами
- Целевой аудитории необходимо или просто удобно обучение со смартфона или планшета, например полевым сотрудникам
- Не нужно доплачивать за мобильную версию (поскольку ее ценность мала, большинство пользователей проходят курсы с компьютеров)
- Нужно доплачивать за мобильную версию, так как необходимы обе (мобильная и для ПК) и в хорошем качестве (ведь аудитория разделена по использованию устройств почти поровну)
- Нужна только мобильная версия / для планшета и можно обойтись без оплаты ПК-версии
Шаг 3. Узнаем три основных способа разработки
Решение двух дилемм выше, скорее, на стороне заказчика. Учитывая это, провайдер может предложить варианты:
- Стандартная «резиновая верстка» в средстве разработки
- Адаптивная верстка
- Две версии курса
Что это? Текст и изображения курса, которые мы видим на экране могут пропорционально увеличиваться и уменьшаться, как резинка. То же самое происходит и на экране гаджета. Чаще всего такой способ используется, когда нужна версия для ПК и нет необходимости доплаты за мобильную версию.
Достоинства. Не нужно доплачивать. Функционал многих редакторов (Articulate Storyline, Captivate и др.) позволяет создавать курсы, которые будут доступны на телефонах и планшетах. Проходить их с телефона не всегда комфортно, но все же возможно.
Если заранее прописать в ТЗ прохождение на мобильных устройствах, то кнопки уже на этапе дизайна можно сделать больше, элементы крупнее. Эти курсы будут лучше смотреться с телефона. Но стоит учитывать, все-таки вариант курса для всех устройств не такой удобный и интерактивный, как версия курса, предназначенная только для ПК или полностью созданная для смартфонов.
Пока на этом решении мы останавливаемся довольно часто, но, думаю, это не навсегда. Технологии развиваются, и потребность в мобильности возрастает.
Недостатки. Пройти курс с вертикальной хваткой не получится. Также на мобильных устройствах кнопки становятся маленькими, это затрудняет нажатие. Изображение может слегка размываться при таком «вытягивании», но все-таки читается. Да, не слишком удобно. Да, часть механик не работает или работает некорректно. Например, упражнение с перетягиванием карточек удобно проходить с ПК, но на смартфоне оно превращается в пытку.
Поэтому лучше предусмотреть заранее прохождение курса с мобильных устройств.
Другой вариант «резиновой верстки». Курс на средстве разработки (Articulate Storyline, Rise, Captivate), предназначенный для прохождения на телефоне или планшете. Такой электронный курс успешно открывается и работает с ПК.
Если заранее прописать в ТЗ прохождение на мобильных устройствах, то кнопки уже на этапе дизайна можно сделать больше, элементы крупнее. Эти курсы будут лучше смотреться с телефона. Но стоит учитывать, все-таки вариант курса для всех устройств не такой удобный и интерактивный, как версия курса, предназначенная только для ПК или полностью созданная для смартфонов.
Пока на этом решении мы останавливаемся довольно часто, но, думаю, это не навсегда. Технологии развиваются, и потребность в мобильности возрастает.
Недостатки. Пройти курс с вертикальной хваткой не получится. Также на мобильных устройствах кнопки становятся маленькими, это затрудняет нажатие. Изображение может слегка размываться при таком «вытягивании», но все-таки читается. Да, не слишком удобно. Да, часть механик не работает или работает некорректно. Например, упражнение с перетягиванием карточек удобно проходить с ПК, но на смартфоне оно превращается в пытку.
Поэтому лучше предусмотреть заранее прохождение курса с мобильных устройств.
Другой вариант «резиновой верстки». Курс на средстве разработки (Articulate Storyline, Rise, Captivate), предназначенный для прохождения на телефоне или планшете. Такой электронный курс успешно открывается и работает с ПК.
Знакомство с мобильным курсом на ПК. Источник: LEVEL
Недостатки:
- Механики, удобные только на смартфоне или планшете
- Различные перетягивания, рассчитанные на движения и траекторию пальцев (не очень комфортно для прохождения на компьютере)
- Все элементы от меню курса до навигации и кнопок слишком крупные
- Визуально курс выглядит вытянутым и пустым по бокам
2. Адаптивная верстка
Что это? Курсы с адаптивной версткой похожи на сайты, сделанные на Tilda. По сути это контент, который меняет внешний вид и адаптируется под экран используемого устройства. Это удобно при переключении меню, перелистывании страниц, то есть в навигации по курсу, легкости чтения и восприятия информации.
Что это? Курсы с адаптивной версткой похожи на сайты, сделанные на Tilda. По сути это контент, который меняет внешний вид и адаптируется под экран используемого устройства. Это удобно при переключении меню, перелистывании страниц, то есть в навигации по курсу, легкости чтения и восприятия информации.
Тестирование с адаптивной версткой по итогам изучения теории по качеству молока. Собрано в Articulate RISE. Источник: LEVEL
Подпишитесь на нашу рассылку и получайте свежие новости два раза в месяц
Если вы нажали на кнопку, вы согласны с политикой конфиденциальности.
Достоинства. Адаптивная верстка комфортна для пользователей и отвечает современным стандартам UX. В том числе тем, что можно начать проходить курс на компьютере и закончить на смартфоне (системы дистанционного обучения обычно сохраняют прогресс прохождения).
Недостатки. Так как курс должен выглядеть хорошо и на большом, и на маленьком экранах, то сложно сделать очень красивые кейсы, упражнения, мини-игры и другой интерактив. Поэтому свойственный электронным курсам привлекательный визуал и механики мы не увидим. В результате получится лонгрид со стандартной версткой, который скроллится вниз, с простыми упражнениями и без интересной анимации.
В ценовом отношении адаптивный электронный курс может быть как со стандартной ценой, если говорить об аскетичном во всех отношениях курсе, собранном в Articulate RISE или Adapt, так и с более высокой стоимостью, если это более продвинутые, симпатичные и кастомизированные курсы, сверстанные в Adapt и с помощью кода.
3. Две версии курса: для мобильных устройств и для ПК
Что это? Это отличное решение, ведь оба курса будут идеально приспособлены ко всем техническим устройствам. Многие сайты имеют две версии, и ими удобно пользоваться с ноутбука, маленького планшета и телефона.
Недостаток. Разработка двух версий — это практически две стоимости разработки. Необходимы разные версии сценария, дизайна, разработки и т. д. Другими словами, это дорого.
Недостатки. Так как курс должен выглядеть хорошо и на большом, и на маленьком экранах, то сложно сделать очень красивые кейсы, упражнения, мини-игры и другой интерактив. Поэтому свойственный электронным курсам привлекательный визуал и механики мы не увидим. В результате получится лонгрид со стандартной версткой, который скроллится вниз, с простыми упражнениями и без интересной анимации.
В ценовом отношении адаптивный электронный курс может быть как со стандартной ценой, если говорить об аскетичном во всех отношениях курсе, собранном в Articulate RISE или Adapt, так и с более высокой стоимостью, если это более продвинутые, симпатичные и кастомизированные курсы, сверстанные в Adapt и с помощью кода.
3. Две версии курса: для мобильных устройств и для ПК
Что это? Это отличное решение, ведь оба курса будут идеально приспособлены ко всем техническим устройствам. Многие сайты имеют две версии, и ими удобно пользоваться с ноутбука, маленького планшета и телефона.
Недостаток. Разработка двух версий — это практически две стоимости разработки. Необходимы разные версии сценария, дизайна, разработки и т. д. Другими словами, это дорого.
Другая сложность. Если разрабатываются два курса, то это два SCORM-пакета. Между ними очень сложно, а порой невозможно наладить и свести единую статистику и сохранение общего прогресса.
Шаг 4. Определяем способ разработки
Для наглядности сделали таблицу, которая поможет сравнить разные способы разработки:
Итак, допустим, вы определились, что вам нужен e-learning курс, который пользователи будут проходить на смартфонах. Мобильная или адаптивная верстка — вы пока точно не знаете. Как разрабатывать — тоже не знаете. Давайте выбирать.
Шаг 5. Выбираем средство разработки для мобильных устройств
Какая мобильная версия подойдет? В этом шаге выбор относительно прост.
1. Если у вас будут смотреть курс только со смартфонов или планшетов, можно выбрать мобильную версию без адаптивности. Плюс будет более красиво и достаточно увлекательно.
Мобильный курс сам по себе может быть сделан так, что он будет похож на приложение. В подобном курсе зачастую добавлена интересная анимация, а информация перелистывается с помощью движения пальца.
1. Если у вас будут смотреть курс только со смартфонов или планшетов, можно выбрать мобильную версию без адаптивности. Плюс будет более красиво и достаточно увлекательно.
Мобильный курс сам по себе может быть сделан так, что он будет похож на приложение. В подобном курсе зачастую добавлена интересная анимация, а информация перелистывается с помощью движения пальца.
Прототип мобильного диалогового тренажера по продаже обоев для сотрудников Леруа Мерлен. Источник: LEVEL
В какой программе разрабатывать мобильный курс?
Сборка мобильного курса может осуществляться в любом редакторе (как в Articulate Storyline, так и в других) и по сути мало отличаться от верстки простого курса. Нужно только внимательно прописать и создать механики, продумать интерфейс, чтобы он был удобен для прохождения с мобильных устройств. Если мы говорим о верстке мобильного курса, то Articulate Storyline дает нам возможность создать стильный кастомизированный дизайн e-learning проекта.
Сборка мобильного курса может осуществляться в любом редакторе (как в Articulate Storyline, так и в других) и по сути мало отличаться от верстки простого курса. Нужно только внимательно прописать и создать механики, продумать интерфейс, чтобы он был удобен для прохождения с мобильных устройств. Если мы говорим о верстке мобильного курса, то Articulate Storyline дает нам возможность создать стильный кастомизированный дизайн e-learning проекта.
2. Если же нужно, чтобы прохождение на ПК и на всех устройствах было одинаково комфортно, тогда делаем адаптивный курс.
Как и на чем разрабатывать? Рассмотрим варианты:
- Делать «руками», то есть на html и javascript (любой back-end), писать курс с нуля
- Делать в средстве разработки для адаптивных курсов (Articulate RISE, Adapt)
Дополнительные варианты
Вариантов больше, чем два. Можно, например, делать в Тильде и встроить то, что сделали, с помощью программирования в средство разработки. VR также можно встраивать в слайдовые курсы. Можно сделать обучающую игру на C++ в Unity и завернуть в SCORM.
Но такие непростые и недешевые в разработке вещи целесообразны только тогда, когда нужно сделать что-то специфичное для нестандартных задач.
В каком средстве разрабатывать адаптивный курс?
Перечислим основные средства разработки, в которых мы пробовали собирать курсы:
- Articilate RISE (https://articulate.com/360/rise)
- Adapt (https://www.adaptlearning.org/)
- Adobe Captivate (https://www.adobe.com/ru/products/captivate.html)
Различия RISE и Adapt в следующем:
- Для работы в RISE требуется меньше специальных навыков. Он более понятный, но одновременно и более простой, аскетичный. В нем задается цветовая схема, но существенно изменить дизайн нельзя. Поэтому курсы получаются стандартными, похожими друг на друга.
- Adapt же, хоть и является бесплатным, чуть сложнее для того, чтобы начать в нем работать. Но при этом он позволяет намного больше менять: помимо дизайна можно дорабатывать компоненты и многое другое. Поэтому разработка в нем хоть и сложнее, но продукт получается более интересный, вовлекающий и разнообразный.
Судя по тому, что курсы все в основном делают в редакторах, те плюсы, которые несет стандартизация (преимущественно легкое внедрение в СДО и сокращение стоимости разработки и поддержки), сильно выигрывают.
Как принять верное решение?
Для наглядности создали онлайн-схему, которая резюмирует сказанное в статье и поможет вам определиться с форматом, видом и средством разработки курса. Доступ к схеме открытый, просто перейдите по ссылке или кликните на нее ниже:
Выбрать бывает непросто. Обращайтесь в LEVEL, мы постараемся помочь!
Авторы: АЛЕКСЕЙ КОЗЛОВ, КАРИНА ОВАНЕСЯН
Статья будет дополняться примерами наших курсов
Статья будет дополняться примерами наших курсов
Поделиться