Как Мы Находим Неочевидные Ошибки В Интерфейсах Онлайн-Заданий Для Детей

Каждый новый урок на платформе — это плод совместной работы методистов, дизайнеров, иллюстраторов, программистов и тестировщиков.

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

Но некоторые проблемы могут остаться незамеченными в небольших выборках.

И здесь на помощь приходит изучение детальных действий учеников – куда они нажимали, какие цифры вводили, какой ответ выбрали.

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

Улучшения могут касаться как интерфейса задач, так и формулировок пояснений и вопросов.



Как мы находим неочевидные ошибки в интерфейсах онлайн-заданий для детей



Что мы знаем и чего не знаем

Для всех задач у нас есть следующие события: «ученик приступил к решению задачи», «задание выполнено, решение правильное», «задание выполнено, возникли ошибки».

Каждый сеанс решения оставляет журнал таких событий, на основании которого мы можем узнать, сколько детей допускают ошибок в задании и сколько времени они тратят на решение.



Как мы находим неочевидные ошибки в интерфейсах онлайн-заданий для детей

Это пример статистики для конкретной задачи.

Графики слева показывают количество правильных и неправильных решений и процент ошибок.

Справа распределение времени, необходимого учащимся для решения задач.

Некоторые термины Каждый фрагмент контента имеет рабочее название.

Уроки состоят из карточек.

Мы назвали их так же, как бумажные карточки, которые учителя в школах раздают в классе.

Карточки разделены на смысловые части — чанки (от англ.

chunk — кусок, кусок), каждая из которых состоит из нескольких заданий — бусинок.

Иногда возникают вопросы по поводу некоторых заданий – например, почему дети чаще других оставляют их, не доведя до конца? Почему они тратят так много времени на какую-то, казалось бы, простую задачу? Почему в ряду одинаковых задач доля ошибок различается в несколько раз? Чтобы ответить на такие вопросы, нам нужно заглянуть внутрь решения — увидеть не только «верный/ложный» результат, но и действия, которые к нему привели.

Какую конкретно ошибку допускает ученик? Как вы формируете свой ответ? Здесь на помощь приходит анализ действий.



Первые попытки

В своих первых попытках провести такой анализ JS-программисты модифицировали код первых карточек из курса математики первого класса.

В каждую карту были добавлены дополнительные события, специфичные для каждого типа задач.

Например, у нас есть задания на решение примеров со схемой «кубики».

Здесь ребенок должен нажать на кубик, который лопнет. Затем нужно посчитать, сколько кубиков осталось, и записать ответ.

Как мы находим неочевидные ошибки в интерфейсах онлайн-заданий для детей

Вот как сначала выглядит задача на вычитание

Как мы находим неочевидные ошибки в интерфейсах онлайн-заданий для детей

После того как ученик «лопнет» кубик, ему необходимо ввести ответ в окошко.

В задачах такого типа были добавлены события типа «включил голос задачи», «нажал на кубик номер i», «ввел число во входные данные».

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

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

В результате процент безошибочного выполнения заданий увеличился с 65% до 75%, и первоклассникам больше не придется задаваться вопросом, что они сделали не так.



Как мы находим неочевидные ошибки в интерфейсах онлайн-заданий для детей

На графике показано, насколько уменьшилось количество неудачных завершений карточки, включающей измененную задачу.

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

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

  • Тестировщик должен проверить, что изменения ничего не портят в функционале карты.

  • Аналитик должен получать логи решений, понимать события и делать выводы о происходящем.

Это решение невозможно было масштабировать и применить ко всем картам.

Поэтому мы разработали вариант с общими для всех карт событиями.



Вторая попытка

Все карточки содержат общие события, такие как клики, перетаскивания или ввод значений во входные данные.

Был создан специальный компонент, который отслеживает эти элементарные события и отправляет их на сервер.

Примеры этих событий и дополнительные данные, которые они содержат:

  • click — (x, y)-координаты клика, css-класс и текст элемента, по которому щелкнули
  • input to input - введенное значение, правильное оно или нет
  • начало перетаскивания - координаты, текст перетаскиваемого элемента
  • конец драги - аналогично
Компонент отслеживания действий включается в карточку одной строкой и не требует дополнительных усилий со стороны JS-программистов и тестировщиков.

Компонент добавлен в математические карточки для 5-9 классов.

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



Барабан

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

Дети нажимают на стрелки и меняют варианты ответа, пока не найдут правильный.

Смена опций анимирована – барабан прокручивается вверх или вниз.



Как мы находим неочевидные ошибки в интерфейсах онлайн-заданий для детей

Задача с элементом «барабан» Карта кликов из такой задачи, как и ожидалось, содержит множество кликов в области треугольных стрелок.

Однако не все эти клики были одинаковыми — существовало два разных типа классов CSS. Эксперимент в карточке показал, что кликабельным и некликабельным состояниям стрелок соответствуют разные значения.

Некликабельное состояние появляется во время анимации вращения барабана.

Мы обнаружили клики по заблокированным стрелкам у 85–90% студентов.

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

Карта игнорировала такие щелчки.

Анимация в это время длилась 800 мс, но некоторым детям удавалось сделать новый щелчок через 100-200 мс.



Как мы находим неочевидные ошибки в интерфейсах онлайн-заданий для детей

Тут я почувствовал, как детей раздражает неактивная кнопка Чтобы сделать интерфейс более отзывчивым, мы значительно ускорили прокрутку.

Это ускорение распространилось на все карты с «барабанами».



Классифицировать

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

Вот пример задания, где детям нужно отметить цифру в заданном месте.



Как мы находим неочевидные ошибки в интерфейсах онлайн-заданий для детей

Задача определения званий сегодня выглядит так Здесь на карте кликов мы увидели клики по прямоугольникам с цифрами.

По координатам клика можно понять, на какую цифру нажал ученик.

Также следует учитывать, что первый щелчок по номеру выделяет его, а второй щелчок снимает выделение.

Затем из журнала событий можно отобразить, какие категории выбрал студент перед нажатием кнопки «Готово».

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

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

Например, 7% детей отметили и десятки, и десятки тысяч.

Еще 5% — основательно добавили в этот список десятые.

1,5% детей отметили все цифры.

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

В новой версии задания процент ошибок снизился до 20%, а учащиеся лучше понимают, что название категории однозначно коррелирует с положением цифры в обозначении числа.



Фракции

Другой пример – задание, знакомящее детей с основными свойствами обыкновенных дробей.

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



Как мы находим неочевидные ошибки в интерфейсах онлайн-заданий для детей

Так раньше выглядело начало задания Дети должны указать, какая часть фигуры заштрихована.

88% детей справляются с этим этапом без ошибок, записывая в числителе цифру «3».

9% студентов пишут «1»: серый им, наверное, нравится больше, чем зеленый.

Еще 3% детей пишут «4» — ну правда, все эти части не белые! В обновленной версии карточки вопрос был изменен и теперь звучит так: «Какая часть зеленаяЭ» В результате количество ошибок сократилось в три раза, теперь 96% детей переходят к основному содержанию карточки, не спотыкаясь здесь на ровном месте.



Результаты второй попытки

Мы получили интересную информацию и внесли полезные улучшения.

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

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

Во-вторых, понять логику работы – где ученик выбирает элемент, где снимает с него выделение, где переставляет элементы.

Фактически вам придется буквально дублировать функционал карты.

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

Но все же задачи настолько разнообразны, что полностью автоматизировать этот процесс невозможно.

Кроме того, чаще всего изучение конкретной карты заканчивается выводом «все идет по плану» — детские ошибки примерно такие же, как и ожидалось, да и с интерфейсом сложностей тоже нет. Это, с одной стороны, говорит о хорошей работе продуктовой команды, но с другой – может демотивировать, так как кажется, что собственные усилия потрачены зря.

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

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

Это привело к идее создания отдельного мероприятия «Ответил студент».



Какие логи мы собираем сейчас и что они дают?

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

Событие содержит следующую информацию:

  • правильный ответ или неправильный
  • сам ответ, то есть текущее состояние активных элементов карты (что вводится на вход, какой переключатель выбран, какие точки отмечены на плоскости и так далее – в зависимости от текущей задачи)
  • опционально — на каком этапе задания в данный момент находится ученик
Важно, чтобы код карты явно содержал проверку ответа студента и было известно все состояние на данный момент. Остается только добавить строку, которая отправляет этот ответ на сервер.

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

Информация об этапе задания необходима в картах с нелинейной прогрессией.

Например, у учащегося может быть выбор: сразу записать ответ на задачу или решить ее шаг за шагом.

Накопленная статистика таких событий дает нам:

  1. Карта движения учащихся по этапам выполнения задания.

    Мы понимаем, какие этапы даются детям легко, а какие вызывают трудности.

  2. Статистика ответов с каждого этапа.

    Это помогает увидеть, какие именно ошибки допускают ученики.

Поскольку события имеют единый формат, возможна их автоматическая обработка.

Теперь, выпустив новую карточку, мы уже на следующий день можем увидеть в специальном приложении, как дети справляются с заданиями.



Как мы находим неочевидные ошибки в интерфейсах онлайн-заданий для детей



Как мы находим неочевидные ошибки в интерфейсах онлайн-заданий для детей

Типичные орфографические ошибки очевидны.

Мы включаем отправку событий с ответами во все новые карточки, а также добавляем их в старые по мере их доработки.

Теперь все сотрудники, участвующие в процессе создания заданий, могут видеть, что дается ученикам легко, а что сложно.

Теги: #ux/ui #интерфейсы #Инженерия данных #анализ данных #Юзабилити

Вместе с данным постом часто просматривают:

Автор Статьи


Зарегистрирован: 2019-12-10 15:07:06
Баллов опыта: 0
Всего постов на сайте: 0
Всего комментарий на сайте: 0
Dima Manisha

Dima Manisha

Эксперт Wmlog. Профессиональный веб-мастер, SEO-специалист, дизайнер, маркетолог и интернет-предприниматель.