УДК 004

Особенности формирования UI-дизайна цифровых продуктов образовательных систем

Пушкина Елена Александровна – оператор ЭВМ кафедры Практической и прикладной информатики МИРЭА – Российского технологического университета.

Кесельман Борис Михайлович – студент кафедры Практической и прикладной информатики МИРЭА – Российского технологического университета.

Солозобов Евгений Дмитриевич – студент кафедры Практической и прикладной информатики МИРЭА – Российского технологического университета.

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

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

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

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

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

UI-дизайн (User Interface — «пользовательский интерфейс») отвечает за то, как интерфейс выглядит. Пользовательский интерфейс — посредник между платформой и пользователем, который с помощью простого и понятного языка помогает сориентироваться в интернет-ресурсе. [1] Роль пользовательского интерфейса — удобство, то есть облегчение взаимодействия. Существует ряд правил, который направит на путь создания хорошего интерфейса: [2]

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

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

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

Для того, чтобы разобраться в том, на сколько сильно влияет UI-дизайн, наглядно рассмотрим образовательную платформу Moodle по его наполнению, внутренней составляющей для работы «изнутри» платформы, сделанной для Российского Технологического Университета МИРЭА. Система дистанционного обучения (СДО) создана для грамотной организации и автоматизации процессов, связанных с обучением.

Для того, чтобы попасть в свой личный кабинет, необходимо перейти на сайт https://online-edu.mirea.ru и войти под личным логином и паролем (Рисунок 1).

Рисунок 1. Вход на платформу.

В данном случае, основной смысл представленной страницы — авторизация пользователя. С точки зрения дизайна, сам процесс авторизации является главным, следовательно, на нем должен быть акцент, который тут отсутствует. Форма авторизации находится в правом углу, она непримечательна своим размером и расположением. Первое, что мы видим при посещении страницы это «Доска объявлений», что не логично, ведь суть страницы в авторизации. Для того, чтобы UI-дизайн страницы был правильный, необходимо увеличить и вынести область авторизации в центр.

Далее обучающийся попадает на главную страницу, или как она называется в данной системе – «Домашняя страница».

Рисунок 2. Главная страница.

Главная страница платформы содержит в себе информацию о дисциплинах, по которым обучается студент, сводку по курсам, которая отражает на сколько были выполнены задания по конкретной дисциплине, показывает наличие страниц «Личный кабинет», «Календарь», «Оценки» и «Все курсы». Помимо этого, в правом верхнем углу есть функция «Настроить страницу», которая дает возможность студенту самому организовать удобную для него систему. Индивидуальный подход очень важен, это дает понимание того, что разработчик позаботился о предпочтениях будущего пользователя и дал возможность самостоятельно структурировать страницу. Но не все пользователи при пользовании платформы пытаются ее изменить.

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

Так же для сравнения рассмотрим образовательную платформу Политехнического университета. После анализа страницы авторизации (Рисунок 3), можно заметить сразу, что отсутствуют поля для ввода данных. Чтобы зайти в систему, пользователю необходимо перейти на другую страницу. Помимо этого, надписи после названия окна «Авторизация» должны быть выровнены по левому краю в отношении от заголовка, чтобы это выглядело структурированно. Представленное выравнивание текста является непонятным, сам текст выровнен по левому краю, кнопка для перехода к авторизации расположена по центу, а в совокупности это выглядит будто элемент просто добавили, не задумываясь о внешней составляющей. В целом на данной странице необходимо проработать расположение текста и элементов. Выбранный цвет является очень ярким, его надо использовать в небольших количествах, но в данном случае он занимает фоновое пространство и отвлекает пользователя своей насыщенностью. Для области «Авторизация» добавлены серые затемнения, для добавления визуального объема, но так как акцентный цвет – зеленый, то и затемнение должно быть однотонным и неярко выраженным.

Рисунок 3. Страница авторизации.

После авторизации пользователь попадает на страницу «Новости» (Рисунок 4). Сразу можно подметить, что новости в образовательном процессе не всегда играют большую роль и занимают приоритетные места. Обучающимся первоначально необходимо получать информацию о дисциплинах, об оценках. При переходе на страницу, акцент на себя сразу берет время, которое вынесено почти в центре на верхней панели. Оно достаточно большого размера и неуместно в данном случае. Для того, чтобы попасть на платформу – необходим браузер, который есть на компьютере, а у самого компьютера точно показано время. Все элементы верхней строки отличаются по размерам, шрифтом и жирностью.

Рисунок 4. Начальная страница.

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

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

Список литературы

1. Что значит термин интерфейс и 18 видов его реализации [Электронный ресурс] Режим доступа: URL: https://neiros.ru/blog/code/chto-znachit-termin-interfeys-i-18-vidov-ego-realizatsii (Дата обращения 25.05.2023).
2. Книга «Не заставляй меня думать» /Стив Круг [Электронный ресурс] Режим доступа: URL: https://seoskills.ru/wp-content/uploads/2014/07/ved-dizain_kniga_stiva_kruga_ili_ne_zastavlyaite_menya_dumat.pdf (Дата обращения 25.05.2023).
3. Система дистанционного обучения для РТУ МИРЭА [Электронный ресурс] Режим доступа: URL: https://online-edu.mirea.ru (Дата обращения 25.05.2023).
4. Понятный ли у вас интерфейс: 8 правил как создать удобный сайт [Электронный ресурс] Режим доступа: https://lpgenerator.ru/blog/ponyatnyj-li-u-vas-interfejs-8-pravil-kak-sozdat-udobnyj-sajt (Дата обращения 25.05.2023).