CC BY
25
УДК 378.4
А. И. Горожанов
кандидат филологических наук, доцент, доцент кафедры грамматики и истории немецкого языка факультета немецкого языка МГЛУ; email: gorozhanov@linguanet.ru
ПРИНЦИПЫ ПОСТРОЕНИЯ ИНТЕРФЕЙСА УЗЛОВ ОБУЧАЮЩЕЙ ВИРТУАЛЬНОЙ СРЕДЫ
В статье определяются основные требования к интерфейсу узлов обучающей виртуальной среды, в качестве которых выступают веб-приложения, размещенные в Сети либо локально. Приводятся компоненты графического интерфейса пользователя - виджеты. Анализируется интерфейс популярного программного обеспечения общего и учебного назначения. Приводится пример интерфейса узла обучающей виртуальной среды «ИТВ(и)».
Ключевые слова: интерфейс; виджет; обучающая виртуальная среда; web2py.
Gorozhanov A. I.
Ph. D., Assistant Professor, Assistant Professor of Department of German Grammar and German History of German language, MSLU; e-mail: gorozhanov@linguanet.ru
BASIC CONCEPTS OF DEVELOPING INTERFACE OF VIRTUAL LEARNING ENVIRONMENT NODES
In the paper the basic concepts of developing interface of virtual learning environment nodes are defined. These nodes can be connected to the web or be local web-applications. The GUI basic components (widgets) are listed. The interfaces of popular software for general and learning purposes are being analyzed. The author gives an example of a virtual learning environment node -«ITV(i)».
Key words: interface; widget; virtual learning environment; web2py
Термин «интерфейс» может иметь несколько значений. Согласно «Большому толковому словарю русского языка» под редакцией С. А. Кузнецова, под интерфейсом понимают «совокупность средств, обеспечивающих взаимодействие устройств вычислительной системы и программ (например, Работать с интерфейсом. Подключиться к интерфейсу)» или «часть программного обеспечения, предназначенная для взаимодействия с пользователем» [4].
Поскольку обучающая виртуальная среда (ОВС) [2] по большей части состоит из узлов в виде веб-приложений (размещенных
в Интернете либо в локальной Сети), далее мы будем говорить именно об интерфейсе этих веб-приложений, а формулируя более строго - о графическом интерфейса пользователя (англ. Graphical User Unterface) этих веб-приложений.
Оксфордский словарь определяет термин «графический интерфейс пользователя» как «процесс взаимодействия с компьютером при помощи графических компонентов, таких как окна, иконки, меню, используемых в большинстве современных операционных систем» (перевод наш. - А. Г.) [7]. Эти графические компоненты называют виджетами.
Многие программные продукты, особенно веб-приложения, располагают стандартным набором виджетов, среди которых самыми распространенными являются: окно (включая диалоговые окна), кнопка (включая кнопки радио и флажки), слайдер, список (включая ниспадающий список), меню, полоса прокрутки, надпись, поле ввода, текстовая область и др. [8]. Элементы интерфейса могут быть и индивидуализированы. Например, М. Д. Князева, С. Н. Трапезников и А. С. Трапезников, описывая программно-инструментальный комплекс УРОК (Универсальный Редактор Обучающих Курсов), приводят следующий «перечень объектов интерфейса, которые могут быть созданы - инициированы в формате программно-инструментальной системы:
- блок текстовой информации;
- окно ввода символьной информации или числового значения контроля;
- область предъявления текста в интерфейсе фрагмента (кадра) учебного модуля;
- графический рисунок как объект интерфейса;
- объект в виде кнопки или команды управления сценарием занятия;
- объект как указатель или указанная область в интерфейсе фрагмента (кадра) учебного модуля;
- строка выбора ответа из представленного перечня при контроле знаний;
- обращение к динамическому модулю, созданному в формате редактора динамических модулей комплекса УРОК;
- обращение к видеофрагменту, который следует «подключить» в сценарий учебного занятия;
- предъявление обучаемому блока текстовой информации, представленному в формате *.rtf;
- обращение к области HTML, указываемой как адрес размещения страницы;
- команда, по которой осуществляется вывод в интерфейс фрагмента (кадра) мультимедиа-эффекта, созданного в формате Macromedia Flash» [5, с. 88].
Проблема построения графического интерфейса пользователя программного обеспечения учебного назначения возникла с появлением самого графического интерфейса во второй половине XX в. и скорее всего не может быть решена окончательно ввиду постоянного прогресса в области разработки программного обеспечения. Тем не менее мы можем постараться сформулировать некоторые решения, относящиеся к сегодняшнему состоянию развития компьютерной техники.
Во-первых, интерфейс должен быть хорошо спроектирован, что подразумевает удобство пользования. А. А. Лежебоков и О. В. Коло-мыцева отмечают, что «при грамотно спроектированном интерфейсе пользователь затрачивает намного меньше времени для использования ресурса и в связи с этим быстрее получает необходимый результат» [6, с. 2].
Во-вторых, он должен быть минималистичен и не отвлекать внимание пользователя от учебного материала. Так, Л. В. Зайцева и В. Н. Томко, рассматривая пример портала для просмотра видео, приходят к выводу, что «количество графических элементов оформления должно быть минимальным, так как главная цель пользователей, посещающих такой портал, - просмотр видеофайлов, а не элементов оформления» [3, с. 337].
В-третьих, нужно стремиться к тому, чтобы все содержание одной веб-страницы было компактным, т. е., по возможности, помещалось в один экран, а не требовало долгой прокрутки вниз-вверх и влево-вправо.
Если обратиться к современным распространенным веб-продуктам общего (Wikipedia, Google Drive, Dropbox и др.) и учебного (LMS Moodle, Coursera, edX и др.) назначения, можно обнаружить некоторые характерные черты во внешнем виде входящих в эти продукты веб-страниц:
- преобладание в цветовой гамме светлых тонов;
- отсутствие бросающихся в глаза цветовых контрастов;
- округлость очертаний объектов (контейнеров, кнопок, форм);
- применение шрифтов без засечек.
Перечисленное выше - скорее дань моде, нежели необходимость, но электронные учебные материалы должны выглядеть современно, поэтому мы также выберем для узлов ОВС светлый фон, темный цвет шрифта основного текста и еще один «спокойный» цвет для выделения содержания (например, голубой), виджеты со скругленными краями и шрифты без засечек. Всякое качественное веб-приложение должно также иметь специальный мобильный интерфейс - число пользователей смартфонов и планшетных ПК среди обучающихся очень велико. В качестве примера отметим, что при всех достоинствах ЬМБ МооШе не все ее темы оформления имеют мобильный интерфейс, и это делает работу с курсами затруднительной на смартфонах с небольшими экранами. Зато все веб-приложения, разработанные на фреймворке 'еЬ2ру, уже имеют встроенный мобильный интерфейс, который включается автоматически.
В качестве примера приведем интерфейс веб-приложения учебного назначения «ИТВ(и)», рассматриваемого нами как полноценный узел ОВС [1]. Например, веб-страница управления наборами карточек выглядит следующим образом (см. рис. 1):
Home My Sets My Content My Interface
Sets
select all deselect all
Search Clear
Myset Author
set01 protessor@nnail.my print 50 card(s) statistics / S □ set02 professor@mail.my print 50 card(s) statistics ^ / 5
perform action
Рис. 1. Веб-страница управления наборами карточек 24
Меню веб-приложения присутствует на каждой веб-странице и представляет собой черную полоску, на которой отдельные пункты выполнены серым цветом, не создавая контраста и не отвлекая внимания пользователя от основного содержания. В целом, набор цветов состоит из черного, темно-серого, темно-голубого и серо-голубого оттенков. Таблица не имеет окантовки, но ее каждый четный ряд едва заметно выделен фоном светло-серо-голубого цвета.
Кнопки просмотра, редактирования и удаления записей таблицы представляют собой картинки (лупа, карандаш, мусорный контейнер соответственно). Остальные кнопки скруглены и только незначительно отличаются от фона веб-страницы более темным цветом с легкой градацией. Они крупного размера и отстоят друг от друга, чтобы при активировании мобильного интерфейса не случилось ошибочного нажатия.
Внутри всего веб-приложения используется тип шрифта без засечек «Helvetica». Все содержимое рассматриваемой веб-страницы помещается в один экран при количестве наборов карточек до восьми штук. При большем количестве наборов необходимо применять прокрутку вниз, хотя такое количество наборов достигается только при количестве карточек до 400 штук (при 50 карточках в одном наборе).
Мы рассмотрели пример интерфейса веб-приложения, отвечающего сформулированным выше требованиям (качественное проектирование, минималистичность, компактность). В связи с современными требованиями моды мы оформили веб-страницы в светлых тонах, избегая контрастов. Элементы интерфейса, имеющие границы, получили округлые очертания. В качестве основного шрифта был использован тип «Helvetica» без засечек.
Понятно, что тренды дизайна могут меняться, поэтому первые три пункта следует считать базовыми, а остальные - дополнительными. В любом случае при разработке интерфейса узлов ОВС важно исходить из поставленной перед ними цели, не забывая о том, что не человек должен служит машине, а машина - человеку.
СПИСОК ЛИТЕРАТУРЫ
1. Горожанов А. И. Веб-приложение учебного назначения «ИТВ(и)» // Хроники Объединенного фонда электронных ресурсов наука и образование. - № 11(78). - М. : Ин-т управления образованием РАО, 2015. - С. 45.
2. Горожанов А. И. Обучающая виртуальная среда для изучения иностранного языка: проблемы разработки и развития: Монография. - 113 с.
3. Зайцева Л. В., Томко В. Н. Проблемы визуального дизайна систем электронного обучения // Образовательные технологии и общество. - Т. 13. -№ 1. - Казань : Каз. НИТУ, 2010. - С. 335-347.
4. Интерфейс // Большой толковый словарь русского языка на портале ГРАМОТА.РУ / гл. ред. С. А. Кузнецов. - СПб. : Норинт, 1998 [Электронный ресурс]. - Режим доступа: http://www.gramota.ru/slovari/dic/?lop=x &bts=x&zar=x&ag=x&ab=x&sin=x&lv=x&az=x&pe=x&word=%oD0%oB8 %D0%BD%D1%82%D0%B5%D1%80%D1%84%D0%B5%D0%B9%D1 %81
5. Князева М. Д., Трапезников С. Н., Трапезников А. С. Урок для тех, кто создает компьютерные учебные программы: учебник / под ред. М. Д. Князевой. - М. : РЭУ им. Г. В. Плеханова, 2011. - 286 с.
6. Лежебоков А. А., Коломыцева О. В. Новый подход к средствам разработки пользовательских интерфейсов // Информатика, вычислительная техника и инженерное образование. - 2012. - № 3(10). - С. 37-46.
7. Graphical User Interface // Oxford Dictionaries. - URL: http://www.oxford-dictionaries.com/definition/english/graphical-user-interface
8. Widget (GUI) // From Wikipedia, the free encyclopedia. - URL: https:// en.wikipedia.org/wiki/Widget_(GUI)
