Не так страшен Moodle: как мы модернизировали LMS для Вышки

Мы не в первый раз сталкиваемся с цифровыми проектами Вышки. Вообще не в первый раз. Но Smart LMS (Learning Management System) стала для нас одной из тех задач, после которой хочется сказать: «Вот это мы молодцы!»

О том, как мы модернизировали многофункциональную образовательную систему на основе Moodle — от дизайна до бэка — читайте в этой статье.

Звучит современно и круто. На практике же LMS выглядел бедненько и совсем не привлекательно. О запутанной структуре и постоянных багах сервиса слагали легенды — есть даже комичное видео одного из вынужденных пользователей.

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

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

Вышка пришла к нам с готовой системой Smart LMS на основе Moodle.

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

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

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

Заказчик прислал нам 1800 страниц технической документации, написанной, признаться, скверно. Нашим разработчикам пришлось самостоятельно вникать в особенности программирования Moodle.

Скоро мы нашли одну лазейку, которая помогла бы нам создать собственный интерфейс и буквально «надеть» его сверху на Moodle. Мы сделали сайт внутри сайта и обернули функционал в яркую обертку современного интерфейса.

Такой лазейкой стал API — возможность привязать мобильное приложение к системе для отображения данных из Moodle в кастомном мобильном интерфейсе.

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

Оказалось, что разницы в подходах практически не было. Так что через месяц у нас было развернутое исследование по методам интеграции данных из Moodle на веб-приложение. До нас этого не делал никто.

А поскольку Moodle универсальная платформа, наше исследование применимо к разным проектам, не только к LMS.

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

Со внутренним наполнением разобрались, пора было заняться интерфейсом.

Главной проблемой в разработке интерфейса стало обновление Moodle: в него постоянно добавляют новые функции и совершенствуют старые.

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

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

Такая хитрая схема, созданная в iFrame, функционирует как сайт внутри сайта.

Новые элементы обрабатываются постепенно и добавляются по мере готовности, что не мешает функционированию LMS.

Помимо этого мы продумали систему быстрого тестирования отдельных элементов дизайна.

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

Это позволило оперативно проверять новый функционал и отправлять на внедрение в актуальный LMS только проверенные элементы.

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

Единый визуальный стиль LMS создан в рамках вышкинской дизайн-системы — ее тоже разрабатывали мы.

Система отступов, цветовое решение в брендовых цветах Вышки, разработка логотипа — мы приобщили LMS к семейству вышкинских онлайн-продуктов.

Помимо этого, мы искали оригинальное решение, которое отличало бы LMS от других сервисов.

Таким решением стал генератор изображений с 10 цветами и 25 текстурами.

Он автоматически создал для каждого учебного курса — будь то Английский язык, Бизнес-информатика, БЖД или История Северной Америки — собственный визуальный паттерн. Паттерн сформирован в зависимости от профиля и направления обучения.

Не обошлось без технических сложностей — Moodle не давал (и все еще не дает) интегрировать картинки. Так что мы написали скрипт, который автоматически генерирует картинки на основе ID курса, заложенного в Moodle.

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

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

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

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

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

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

Эти функции были доступны и в старой версии Moodle, но требовали действий и переходов на разные страницы — мы же собрали главное в одном экране.

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

Информация на странице курса, так же, как и в личном кабинете, распределена по приоритетности.

Во вкладках находятся только важные данные — подробности пользователь может узнать дополнительно. Из-за этого интерфейс не засоряется неинформативными разделами. А если пользователю захочется, он всегда сможет их развернуть или включить в расширенных настройках фильтра.

Smart LMS НИУ ВШЭ запущен в полномасштабном режиме и отлично работает на инструментах, созданных на базе API Moodle.

Точное отображение вкупе с продуманным и красочным визуальным оформлением LMS сделало интерфейс более удобным и привлекательным. А это — в перспективе — значительно продвинет имидж НИУ ВШЭ в глазах студентов и станет дополнительным плюсом для абитуриентов при выборе вуза.

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