Разработка интуитивно понятного интерфейса для обучения школьников программированию

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

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

Для того что бы показывать информацию, содержащуюся в приложении в приятном для пользователя виде, используется UX. UX- это User Experience. Это то, какой опыт получает от работы с интерфейсом. Удается ли ему достичь цели и насколько просто или сложно это сделать[2]

UX/UI дизайн – это проектирование любых пользовательских интерфейсов в которых удобство использования так же важно, как и внешний вид.[1]

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

Adobe Experience Design (Adobe XD) — программа для разработки интерфейсов от Adobe Systems. Поддерживает векторную графику и веб-верстку и создает небольшие активные прототипы.

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

Рисунок 1 - Окна выполнения задания

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

Рисунок 2 - Окно профиля игрока

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

Рисунок 3 - Окно рейтинга игроков

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

Рисунок 4 - Окно выбора уровней

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

В ходе разработки приложения было соблюдено множество правил UI/UX дизайнов таких как:

• 1.    Масштабирование элементов управления [2]

• 2.    Единство дизайна при переносе приложения с одной платформы на другую [2]

• 3.    Проведение исследований UI интерфейса среди пользователей [3]

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