Что такое прогресс бар обучения
Регистрируйтесь в партнерской программе GetCourse
Бесплатно зарегистрируйте GetCourse на 30 дней!
Прогресс-бар для тренинга с редактируемыми этапами
Этот скрипт добавляет прогресс-бар, который наглядно отображает, на каком этапе находится прогресс пользователя в тренинге.
Названия этапов и их кол-во могут быть любыми и задаются в настройках скрипта.
Прогресс-бар имеет анимацию плавного заполнения прогресса при загрузке страницы.
Значение прогресса берётся из блока «Шкала достижений».
Скрипт не продается в GetHelpers!
Вы будете перенаправлены на сайт партнера!
Прогресс-бар на GetCourse своими руками без знания кода
Давайте начнем с понимания, а что такое вообще прогресс-бар? По факту — это шкала, отображающая прогресс/процент выполнения задачи или, в нашем случае, прогресс прохождения обучающей программы.
В основе любой геймификации (а прогресс-бар — это элемент игры) лежит математика. Подсчет процентов/шагов/баллов помогает измерить свой результат и мотивирует двигаться вперед, ведь учащийся может в любой момент остановиться, оглянуться назад и оценить, сколько уже было всего сделано и распределить свои силы на оставшийся путь.
Но я не геймификатор и не методолог, поэтому речь пойдет о том, а как технически настроить эту шкалу в своих курсах.
Итак, все кто сталкивался с платформой GetCourse, знают, что там можно с помощью кодов и скриптов настроить красивые шкалы, как на примере ниже.
Прогресс-бар в тренинге, сделанный с помощью кода
Но будем честны, кодировать могут не все, это стоит денег, для этого нужно обращаться к другим специалистам. А как же всё сделать самому? Легко)) И мой вариант, кстати, подойдет не только пользователям платформы GetCourse, но и других LMS.
Если вы когда-нибудь пользовались сервисами Canva/Figma или похожими, то полдела уже сделано. Как вы уже могли догадаться, делать всё мы будем не кодом, а картинками/изображениями/баннерами.
Прогресс-бар в уроке на Getcourse без использования кода
Всё что нам нужно, так это в удобном сервисе (я делаю в Figma, знаю, что в Canva тоже удобно) создать прямоугольник или овал шириной не менее 1000px (это важно для корректного отображения). Высоту можете определить сами, как вам нравится, на моем примере — 50px, мне кажется, оптимальный вариант. Выбираем подходящий цвет.
Далее простая математика. К примеру, у вас 10 уроков, в каждом должен быть прогресс-бар, отсчитывающий процент прохождения курса. Соответственно мы 1000px делим на 10 уроков, получается 100px — ширина, определяющая из урока в урок прогресс прохождения обучения, как на скриншоте ниже ярким цветом (просто прибавляем по 100px к каждой последующей шкале для равномерного заполнения прогресса).
Далее нам нужно подсчитать сколько процентов от всего курса составляет 1 урок. К примеру, у нас 12 уроков — это 100% от всего курса, значит 1 урок = 100/12 = 8,33%. Соответственно делаем 12 шкал, и шкала первого урока будет соответствовать прохождению 8,33% и т.д. Цифры можно округлять, чтобы выглядело более аккуратно.
На моем примере, каждый прогресс бар — это овал, на который сверху наложен еще один овал другого цвета и вручную добавлены цифры. Мы делаем столько прогресс-баров, сколько нам нужно, в зависимости от количества уроков. А потом просто добавляем картинку прогресс-бара в каждом уроке на учебной платформе.
И учащийся, переходя из урока в урок будет видеть, сколько процентов курса он уже изучил, сколько осталось. Это мотивирует идти дальше, ведь все мы любим опираться на цифры, пусть и не всегда себе в этом признаемся.
Вы можете делать так, как позволяет ваша фантазия: либо простыми геометрическими фигурами, либо добавлять стрелку на одном конце, либо играть с цветом и делать более ярким процент прохождения ближе к финалу обучения, да вы даже можете начертить диаграмму: как вам нравится, мы всегда ограничены только идеями в нашей голове.
Да, несомненно в этом способе есть свой минус — если ученик возвращается в предыдущий урок, то он опять видит прошлый процент прохождения курса, это не автоматизация, но и мы выбрали самый простой путь, помните об этом
Как геймифицировать онлайн-обучение
18 октября: Что такое геймификация и как использовать ее в обучении
- Цели и задачи геймификации.
- Базовые игровые механики.
- Примеры игровой индустрии.
19 октября: Геймифицируй это. Создаем игровые механики в онлайн-курсе
- Интерактивные слайды в PowerPoint.
- Всплывающие подсказки при помощи триггеров.
- Удобная навигация и прогресс-бар.
Подарки участникам вебинара.
- Подарочный сертификат 10 000₽ для обучения на курсе «Разработчик электронных курсов» получит самый активный участник.
- Книга «Геймидизайн. Как создать игру, в которую будут играть все» получит автор самого интересного вопроса.
- Запись вебинара и презентации спикеров направим всем участникам интенсива.
Александр Цветков
Преподаватель Академии iSpring
Владимир Раджапов
Куратор курса «Разработчик электронных курсов»
Татьяна Галкина
Директор Академии iSpring
ДЛИТЕЛЬНОСТЬ
1 час 30 мин
Организаторы
iSpring – ведущий разработчик технологий онлайн-обучения для глобального рынка. Более 22 лет iSpring помогает 59 000 клиентам из 172 стран эффективно решать задачи по онлайн-обучению. Клиентами компании являются зарубежные и российские ритейлеры, банки, фармацевтические концерны, крупные производственные и логистические предприятия, игроки рынка HoReCa и компании, развивающиеся по модели франчайзинга. Решениями iSpring также пользуются ведущие российские и зарубежные вузы. Компания является постоянным участником рейтинга ведущих EdTech-компаний России. по онлайн-обучению.
Запись вебинара
Не пропустите ближайшие вебинары
Подпишитесь на рассылку и получайте анонсы по почте. Нажимая на кнопку «Подписаться», вы принимаете политику конфиденциальности.
Прогресс-бар
Прогресс-бар — это индикатор, который отображает прогресс выполнения задачи.
В библиотеке элементов Контура прогресс-бар имеет горизонтальный вид, но вообще он может быть любой формы. Например, Microsoft использует круглый индикатор и называет его ProgressRing:
Используйте прогресс-бар, если процесс в среднем длится дольше 10 секунд. Понимание того, когда процесс завершится, дает ощущение контроля и улучшает пользовательский опыт.
Если это уместно, дайте возможность отменить задачу и сделайте прогресс-бар не модальным, чтобы он не блокировал работу в сервисе.
Если процесс происходит на стороне сервера и можно закрыть окно браузера — сообщите об этом пользователю.
Создание прогресс-бара требует больше усилий, чем подключение спиннера, и оправдано, если сценарий частотный.
Если получить данные о ходе выполнения задачи невозможно, лучше использовать спиннер. Имитировать работу прогресс-бара можно, только если он носит дополнительный и иллюстративный характер. Например, глобальный лоадер сопровождает загрузку контента, его задача ― заполнить паузу до появления первых элементов страницы, а не дать точную обратную связь.
Принцип работы
Прогресс-бар делится на отрезки по количеству подзадач пропорционально среднему времени их выполнения. Например, чтобы выполнить команду пользователя, нужно сделать три подзадачи. Известно, что первые две в среднем занимают по 10 секунд, третья — 5 секунд. Значит, должны получиться такие отрезки:
0 % → 40 % → 80 % → 100 %
Отрезок заполняется с постоянной скоростью, равной: длина отрезка / среднее время. Если отрезок заполнился, а подзадача все еще выполняется, прогресс-бар останавливается и ждет завершения подзадачи. Если подзадача выполнится раньше среднего времени, отрезок заполняется с ускорением easeOutQuint.
Последний отрезок заполняется до 75 % и ждет, пока завершится подзадача, затем заполняется с ускорением.
Если среднее время выполнения задач неизвестно, то прогресс-бар следует разделить на отрезки равной длины, а за среднее время взять минимально ожидаемое время.
Если задача не имеет подзадач, то прогресс-бар может равномерно заполняться до значения 75 %, после чего ждать информации о завершении задачи. Фактически такой прогресс-бар является имитацией и малоинформативен для пользователей, лучше, когда есть три и больше подзадач.
Заполнение прогресс-бара всегда должно только расти, но не уменьшаться. Откатывающийся назад прогресс-бар путает пользователей и снижает доверие к интерфейсу.
Цвет
Прогресс-бар можно красить в цвет продукта или ссылок в интерфейсе.
Подпись
Быстрые процессы не нужно сопровождать подписью. Но чем дольше процесс, тем больше подробностей о ходе выполнения задачи нужно сообщать.
Укажите, сколько времени осталось до конца задачи. Округляйте в большую сторону: если процесс завершится раньше, пользователю будет приятно. Обратная ситуация вызовет негативные эмоции и снизит доверие к интерфейсу.
Укажите, какой именно шаг выполняется в данный момент. Это объяснит пользователю, почему процесс такой долгий, и поможет скоротать время.