Что такое прогресс бар обучения
Перейти к содержимому

Что такое прогресс бар обучения

Что такое прогресс бар обучения

�� Регистрируйтесь в партнерской программе 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 октября: Что такое геймификация и как использовать ее в обучении

  1. Цели и задачи геймификации.
  2. Базовые игровые механики.
  3. Примеры игровой индустрии.

19 октября: Геймифицируй это. Создаем игровые механики в онлайн-курсе

  1. Интерактивные слайды в PowerPoint.
  2. Всплывающие подсказки при помощи триггеров.
  3. Удобная навигация и прогресс-бар.

Подарки участникам вебинара.

  • Подарочный сертификат 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 %, после чего ждать информации о завершении задачи. Фактически такой прогресс-бар является имитацией и малоинформативен для пользователей, лучше, когда есть три и больше подзадач.

Заполнение прогресс-бара всегда должно только расти, но не уменьшаться. Откатывающийся назад прогресс-бар путает пользователей и снижает доверие к интерфейсу.

Цвет

Прогресс-бар можно красить в цвет продукта или ссылок в интерфейсе.

Подпись

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

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

Укажите, какой именно шаг выполняется в данный момент. Это объяснит пользователю, почему процесс такой долгий, и поможет скоротать время.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *