Прогресс-бар на 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% и т.д. Цифры можно округлять, чтобы выглядело более аккуратно.
На моем примере, каждый прогресс бар — это овал, на который сверху наложен еще один овал другого цвета и вручную добавлены цифры. Мы делаем столько прогресс-баров, сколько нам нужно, в зависимости от количества уроков. А потом просто добавляем картинку прогресс-бара в каждом уроке на учебной платформе.
И учащийся, переходя из урока в урок будет видеть, сколько процентов курса он уже изучил, сколько осталось. Это мотивирует идти дальше, ведь все мы любим опираться на цифры, пусть и не всегда себе в этом признаемся.
Вы можете делать так, как позволяет ваша фантазия: либо простыми геометрическими фигурами, либо добавлять стрелку на одном конце, либо играть с цветом и делать более ярким процент прохождения ближе к финалу обучения, да вы даже можете начертить диаграмму: как вам нравится, мы всегда ограничены только идеями в нашей голове.
Да, несомненно в этом способе есть свой минус — если ученик возвращается в предыдущий урок, то он опять видит прошлый процент прохождения курса, это не автоматизация, но и мы выбрали самый простой путь, помните об этом��
Прогресс-бар
Прогресс-бар — это индикатор, который отображает прогресс выполнения задачи.
В библиотеке элементов Контура прогресс-бар имеет горизонтальный вид, но вообще он может быть любой формы. Например, Microsoft использует круглый индикатор и называет его ProgressRing:
Используйте прогресс-бар, если процесс в среднем длится дольше 10 секунд. Понимание того, когда процесс завершится, дает ощущение контроля и улучшает пользовательский опыт.
Если это уместно, дайте возможность отменить задачу и сделайте прогресс-бар не модальным, чтобы он не блокировал работу в сервисе.
Если процесс происходит на стороне сервера и можно закрыть окно браузера — сообщите об этом пользователю.
Создание прогресс-бара требует больше усилий, чем подключение спиннера, и оправдано, если сценарий частотный.
Если получить данные о ходе выполнения задачи невозможно, лучше использовать спиннер. Имитировать работу прогресс-бара можно, только если он носит дополнительный и иллюстративный характер. Например, глобальный лоадер сопровождает загрузку контента, его задача ― заполнить паузу до появления первых элементов страницы, а не дать точную обратную связь.
Принцип работы
Прогресс-бар делится на отрезки по количеству подзадач пропорционально среднему времени их выполнения. Например, чтобы выполнить команду пользователя, нужно сделать три подзадачи. Известно, что первые две в среднем занимают по 10 секунд, третья — 5 секунд. Значит, должны получиться такие отрезки:
0 % → 40 % → 80 % → 100 %
Отрезок заполняется с постоянной скоростью, равной: длина отрезка / среднее время. Если отрезок заполнился, а подзадача все еще выполняется, прогресс-бар останавливается и ждет завершения подзадачи. Если подзадача выполнится раньше среднего времени, отрезок заполняется с ускорением easeOutQuint.
Последний отрезок заполняется до 75 % и ждет, пока завершится подзадача, затем заполняется с ускорением.
Если среднее время выполнения задач неизвестно, то прогресс-бар следует разделить на отрезки равной длины, а за среднее время взять минимально ожидаемое время.
Если задача не имеет подзадач, то прогресс-бар может равномерно заполняться до значения 75 %, после чего ждать информации о завершении задачи. Фактически такой прогресс-бар является имитацией и малоинформативен для пользователей, лучше, когда есть три и больше подзадач.
Заполнение прогресс-бара всегда должно только расти, но не уменьшаться. Откатывающийся назад прогресс-бар путает пользователей и снижает доверие к интерфейсу.
Цвет
Прогресс-бар можно красить в цвет продукта или ссылок в интерфейсе.
Подпись
Быстрые процессы не нужно сопровождать подписью. Но чем дольше процесс, тем больше подробностей о ходе выполнения задачи нужно сообщать.
Укажите, сколько времени осталось до конца задачи. Округляйте в большую сторону: если процесс завершится раньше, пользователю будет приятно. Обратная ситуация вызовет негативные эмоции и снизит доверие к интерфейсу.
Укажите, какой именно шаг выполняется в данный момент. Это объяснит пользователю, почему процесс такой долгий, и поможет скоротать время.
Самая воспринимаемая механика для обучения и закрепления материала
Как разработчики электронного обучения, у нас есть возможность сделать свои индикаторы прогресса красивыми, забавными и даже поучительными. Небольшое внимание к деталям имеет большое значение для создания уникального опыта.
Показывать учащимся их успехи в прохождении курса — это умный способ помочь им почувствовать мотивацию и расширить свои возможности. Это связано с тем, что индикаторы прогресса (или шкалы, или индикаторы) служат удобной визуальной подсказкой для занятых учащихся, чтобы они могли отслеживать, как далеко они продвинулись в вашем курсе, и видеть, как далеко им еще предстоит пройти.
Если вы раздумываете над идеей добавить индикатор прогресса в свое электронное обучение, вам также может быть интересно, как интегрировать его в дизайн вашего курса, тогда это статья будет вам полезной.
Вы играете, меняя тему каждого проекта, или создаете один дизайн, который будет полностью функциональным и будет работать везде?
Тогда вот вам причины использовать индикатор прогресса страницы.
4 причины использовать индикатор прогресса страницы.
1. Обеспечьте учащимся лучший пользовательский опыт.
Вы делаете это, давая им возможность пропускать контент, как им заблагорассудится. Индикатор выполнения страницы позволяет учащимся легко находить точную информацию, которую они ищут.
2. Продемонстрируйте полный объем доступного контента.
Выступая в качестве меню всего вашего контента, индикатор выполнения страницы гарантирует, что ваши учащиеся знают, что доступно больше контента, чем тот, который изначально загружается на экран. и побуждает их читать дальше сгиба страницы.
3. Позвольте учащимся оценивать свой прогресс.
Индикатор выполнения страницы может быть визуальным контрольным списком для ваших учащихся, снабжая их инструментом для отслеживания разделов, которые они уже завершили, и тех, которые им еще предстоит сделать.
4. Сделайте свой контент более интересным.
Установление ожиданий ваших учащихся с самого начала означает, что они с большей вероятностью прочитают весь ваш контент, так как они будут знать, сколько еще нужно пройти. В результате индикатор выполнения страницы помогает сделать их обучение более управляемым.
Что такое прогресс бар обучения
�� Регистрируйтесь в партнерской программе GetCourse ��
�� Бесплатно зарегистрируйте GetCourse на 30 дней! ��
Прогресс-бар этапа обучения
Этот скрипт добавляет на страницу тренингов панель с тремя прогресс-барами, которые позволяют ученикам отслеживать, на каком этапе обучения они находятся. Благодаря такой нехитрой геймификации, повышается доходимость учеников до конца курса и общая результативность обучения.
Что отображается в прогресс-барах:
1. Количество пройденных уроков.
2. Время обратной связи, которое осталось у ученика после покупки.
3. Оставшееся время доступа к урокам тренинга.
Стоимость 6 000 руб.
В неё входит сам код и видеоинструкция по установке.
При необходимости, возможна услуга установки скрипта нашим специалистом (оплачивается отдельно).
Инструкция по установке
Вы покупаете скрипт у наших партнёров.