РАЗРАБОТКА ИНТУИТИВНО ПОНЯТНОГО ИНТЕРФЕЙСА ДЛЯ ОБУЧЕНИЯ ШКОЛЬНИКОВ ПРОГРАММИРОВАНИЮ Текст научной статьи по специальности «Компьютерные и информационные науки»

УДК 004

Васильев В.И. студент 3 курса

факультет «Информационные системы и технологии» Северный Арктический федеральный университет Высшая школа информационных технологий и

автоматизированных систем Россия, г Архангельск

РАЗРАБОТКА ИНТУИТИВНО ПОНЯТНОГО ИНТЕРФЕЙСА ДЛЯ ОБУЧЕНИЯ ШКОЛЬНИКОВ ПРОГРАММИРОВАНИЮ

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

Ключевые слова: ДизайШ, Figma, JavaScript, HTML, CSS.

Vasilyev V.I. student 3 year

faculty "Information Systems and Technology" Northern Arctic Federal University Graduate School of Information Technology and Automated Systems

Russia, Arkhangelsk

DEVELOPMENT OF AN INTUITIVE INTERFACE FOR TEACHING SCHOOLCHILDREN PROGRAMMING

Abstract: The article is devoted to the development of an interface for teaching children the basics of website writing. JavaScript was chosen as the language for training. The application also teaches CSS and HTML for children.

Keywords: Design, Figma, JavaScript, HTML, CSS.

Сегодня сфера образования меняется стремительными темпами, все больше и больше информации можно найти на просторах интернета. Среди обучающихся 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, который обладает понятным и современным дизайном. Так же интерфейс понятен и удобен для использования обычным пользователям.

Использованные источники:

1. Голден К. Хороший интерфейс - невидимый интерфейс // ПИТЕР, 2016 256с

2. Особенности разработки пользовательского интерфейса для мобильного приложения:

https://cyberleninka.ru/article/v/osobennosti-razrabotki-dizayna-polzovatelskogo-interfeysa-dlya-mobilnogo-prilozheniya

3. Мобильный дизайн UX. Ошибки, которых стоит избегать при создании мобильных приложений:

https://cyberleninka.ru/article/v/mobilnyy-dizayn-ux-oshibki-kotoryh-stoit-izbegat-pri-sozdanii-mobilnyh-prilozheniy