Анализ социальной составляющей систем дистанционного обучения

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

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

В таблице 8 представлены возможности систем дистанционного обучения Moodle и Blackboard в области социального взаимодействия. Выбраны были те функции, которые планируется реализовать в проектируемой системе. В таблице знаком «+-» отмечены функции, которые реализованы, но их трудно обнаружить и настроить в системе

Таблица 8. Социальные возможности систем Moodle и Blackboard

Обзор средств прототипирования

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

PowerPoint и Keynote

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

Visio и OmniGraffle

Microsoft Visio и OmniGraffle (Omni Group) часто используются для создания макетов. Обе программы позволяют создавать прототипы, реагирующие на действия мыши, благодаря поддержке экспорта в форматы HTML и PDF. При экспорте из OmniGraffle возможно с легкостью назначить действие и задать точку перехода внутри PDF-документа или по указанному URL-адресу (если используется формат HTML). Для Visio в Интернете имеются готовые пакеты прототипирования, позволяющие легко экспортировать в HTML или PDF документы с активными областями для постраничной навигации.

Visio и OmniGraffle поддерживают также экспорт в ряд популярных форматов векторной и растровой графики (такие как EPS, GIF и JPEG), благодаря чему возможно запросто импортировать модели во Flash, использовать их как графику в прототипах HTML и т. д.

Автор данной дипломной работы выбрал Microsoft Visio в качестве средства прототипирования, так как данная программа подходит как для разработки статичных прототипов (концептуальное проектирование), так и интерактивных (детальное проектирование). Для представления интерактивного прототипа проект MS Visio экспортирован в формат HTML.

Axure RP

Сокращение «RP» в названии Axure RP означает «быстрое прототипирование» (Rapid Prototyping); именно это обусловило популярность данного инструмента в сообществе UX-проектировщиков. По своим графическим возможностям программа сходна с Visio и OmniGraffle, но она дополняет их относительно простыми в освоении инструментами для организации навигации в различном стиле, построения форм, создания всплывающих окон и добавления других типичных интерактивных элементов уровня страниц. Кроме того, гибкий механизм встраивания спецификаций, комментариев, поручений и маркеров степени готовности позволяет создавать документы спецификаций прямо на базе прототипа.

Adobe Fireworks

Пакет Fireworks от компании Adobe в последнее время пользуется популярностью как инструмент для создания разнообразных компонентов проектирования — от макетов до визуального дизайна. Он содержит стандартный набор компонентов форм и управляющих элементов Windows и Mac, которые позволяют легко задавать интерактивные взаимодействия для демонстрации функциональности без привлечения внешних разработчиков. Элементы библиотеки Common Library можно добавлять и использовать в различных документах; тем самым появляется возможность повторного использования компонентов. В Fireworks предусмотрена также возможность создания наборов элементов, общих для всех страниц определенного документа, — по аналогии с директивами include, которые используются разработчиками, или с шаблонами страниц в некоторых системах документирования. Эта функция упрощает определение общих областей контента страничного уровня (шапка сайта (header), подвал (footer), навигация) с сохранением областей уникального контента на каждой странице.

Balsamic Mockups

Mockups (Balsamic Studios) — программа построения макетов и прототипирования, работа в которой напоминает рисование макетов на бумаге, только в данном случае используется компьютер. В ней уже предусмотрено много разных заранее разработанных элементов пользовательского интерфейса (свыше 60), которые перетаскивать мышью в рабочую область и настраивать под свой проект.

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

Flash и Flash Catalyst

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

·  Система должна предоставлять преподавателям средства для публикации научных работ непосредственно внутри системы (статьи, доклады, тезисы).

Навигация

Система состоит из нескольких взаимозависимых частей (для каждой из системных ролей), каждая из которых требует отдельного пользовательского интерфейса, так как каждая пользовательская роль предназначена для выполнения различных задач. Как следствие вышесказанного, информационная структура системы зависит от роли текущего пользователя. Однако навигация по системе должна быть построена на единых для всех системных ролей принципах.

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

Модель навигации для роли «Преподаватель»

Рисунок 4. Модель навигации для роли «Преподаватель»

Модель навигации для роли «Студент»

Рисунок 5. Модель навигации для роли «Студент»

Для сравнения ниже приведена части модели навигации в системе дистанционного образования Moodle (они общие для студента и преподавателя).

Рисунок 6. Модель навигации LMS Moodle для ролей "Студент" и "Преподаватель"

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

Концептуальное проектирование

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

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

Общая компоновка экранных форм

Рисунок 7. Общая компоновка экранных форм

1.  Header (или «шапка» сайта) содержит логотип и название системы, а также информацию о текущем пользователе системы и функционал для завершения работы в системе.

2.  Главное меню предоставляет собой ссылки на разделы системы, доступные пользователю. В зависимости от роли, выполняемой пользователем в системе, разделы главного меню могут по-разному конструироваться. Ниже будут показаны варианты главного меню для ролей «Студент» и «Преподаватель».

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

4.  Рабочая область содержит функционал текущего контекста (раздела меню или состояния экрана). Внутреннее содержимое рабочей области может гибко меняться в зависимости от требований к конкретному контексту при сохранении общих принципов построения пользовательского интерфейса.

Header

В «шапке» обычно располагается логотип учреждения, которому принадлежит сайт, а также, в случае если пребывание пользователя в пределах ресурса требует его авторизации, персонализированное приветствие. Это необходимо для того, чтобы у пользователя складывалось впечатление, что ему оказывается внимание, и он чувствовал себя более комфортно. К тому же, это позволяет видеть, что учетная запись, используемая пользователем, принадлежит именно ему.

Логотип (или название сайта) выполняет роль, аналогичную вывеске на входе в какое-либо учреждение [Ошибка! Источник ссылки не найден.]. То есть логотип является своего рода ориентиром для пользователя, которому необходимо знать, на каком сайте он находится. При переходе с веб-страницы по ссылке на другую страницу в пределах одного ресурса пользователь должен быть уверен, что не покидал пределов сайта. По этой причине логотип должен постоянно присутствовать на любой странице сайта. Как правило, ему отводится место в левом верхнем углу страницы. Хорошим тоном считается использование логотипа в качестве ссылки на главную страницу сайта.

Структура «шапки» сайта представлена на рисунке 8.

Рисунок 8. Структура «шапки» проектируемой системы.

Главное меню

Иногда его также называют панелью разделов или основной навигацией. Главное меню содержит ссылки на основные разделы сайта, представляющие верхний уровень иерархии сайта. Также в главном меню должен быть предусмотрен пункт для возврата на главную страницу ресурса (ссылка «Домой»).

Рисунок 9. Главное меню

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

Главная страница

Так как в данной дипломной работе проводится проектирование интерфейса системы, которая, в первую очередь, направлена на поддержку очного образования, то вполне естественно, что на главной странице будут представлены последние новости, посвященные учебному процессу, ближайшие события из расписания и представлены названия учебных курсов, которые читает преподаватель или прослушивает студент (в зависимости от роли пользователя в системе). Таким образом, главная страница — один из двух разделов сайта, в котором отсутствует боковое вспомогательное меню. Вторым является раздел «Моя страница».

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

1.  Новости представлены в хронологическом порядке — последняя добавленная новость располагается сверху. Здесь отображаются только те новости, которые имеют непосредственное отношение к учебе.

2.  Представлен список грядущих учебных активностей, таких как тесты и задания, доступных к прохождению. Указывается название теста/задание, его краткое описание (если есть), крайний срок сдачи. Из этого списка можно сразу перейти непосредственно к выполнению теста или задания. В данном блоке используется цветовое кодирование для отделения одного типа активностей от других. Это поможет пользователям на интуитивном уровне определить, о каком типе активностей идет речь в той или иной строке блока.

3.  Представлен список курсов. Для преподавателя это читаемые курсы, для студента — прослушиваемые. Каждая карточка курса сопровождается названием курса, его описанием (если есть) и пиктограммой, которая позволяет наряду с названием уникально идентифицировать курс пользователем. Из этого списка пользователь может попасть к интересующему его курсу.

Раздел «Учеба»

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

Во вспомогательном боковом меню представлены подразделы раздела «Учеба», которые перечислены ниже.

Для преподавателя:

·  Мои курсы — список курсов, которые читает преподаватель. Если преподаватель читает один курс, то при выборе данного подраздела он увидит его сразу в развернутом виде. Необходимо предусмотреть возможность отображения всех читаемых курсов с фильтрацией по факультетам и кафедрам.

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

·  Мои задания — список заданий, созданных в рамках курсов, читаемых преподавателем с возможностью создания нового задания с последующей привязкой к конкретному предмету. Доступ к созданию задания также можно получить из экрана просмотра курса. В подраздел данная активность была вынесена на основании тех же соображений, что были применены к тестам.

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

·  Мое расписание — просмотр расписания в виде календаря. Возможен просмотр расписания только по своим предметам, так и в контексте других предметов. Должна быть предусмотрена возможность создания дополнительных лекций. Стоит предусмотреть возможность отображения в календаре, как очных занятий, так и активностей в системе поддержки очного обучения.

·  Мои студенты — просмотр списка студентов, прослушивающих курсы преподавателя, и списка групп. Просмотр успеваемости каждого студента. Возможность назначения определенным студентам индивидуальных заданий, что также возможно в подразделе «Мои задания»

Для студента:

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

·  Мои тесты — список тестов, как грядущих, так и прошедших. Доступ к просмотру и прохождению тестов также можно получить из экрана просмотра курса.

·  Мои задания — список заданий, прошедших или грядущих тестов. Доступ к просмотру и прохождению заданий также можно получить из экрана просмотра курса.

·  Мое расписание — просмотр расписания в виде календаря для текущего семестра. Стоит предусмотреть возможность отображения в календаре, как очных занятий, так и активностей в системе поддержки очного обучения.

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

·  Мои преподаватели — просмотр списка преподавателей, читающих курсы у пользователя в текущем семестре. Необходимо предусмотреть механизм отправки студентов тем курсовых и прочих работ на согласование с преподавателем.

Мои курсы

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

Структура подраздела «Мои курсы» для роли «Преподаватель» представлена на рисунке 11. Для роли «Студент» данная форма имеет незначительные отличия, связанные с изменением некоторых пунктов в боковом вспомогательном меню, поэтому она не приводится.

Рисунок 11. Структура раздела «Мои курсы»

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

2.  Название текущего подраздела должно быть выделено цветом по аналогии с п. 1. Данный подраздел активен по умолчанию при выборе раздела «Учеба».

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

Рисунок 12. Структура экрана представления курса

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

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

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

При создании нового задания или редактировании старого, добавления ссылки на внешний ресурс или при добавлении нового файла, поверх экрана просмотра курса появляется новый слой (см. Рисунок 13), представляющий собой форму, содержание которой зависит от создаваемого элемента курса.

Рисунок 13. Экран создания нового задания

Формы для создания теста и заполнения лекции контентом являются более громоздкими и демонстрируют более сложное взаимодействие, поэтому их было решено оставить в качестве самостоятельных страниц системы (см. Рисунок 14.)

Рисунок 14. Форма создания теста

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

Рисунок 15. Форма заполнения лекции.

Структура экрана, предназначенного для прохождения теста студентами, представлена на рисунке 16.

Рисунок 16. Структура экрана прохождения теста студентом.

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

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

3.  Некоторые типы вопросов не имеют вариантов ответов (например, вопросы, в которых правильные ответ необходимо ввести самостоятельно). В таких случаях варианты ответов заменяются полями ввода или другими необходимыми элементами интерфейса.

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

Мои тесты

В подразделе «Мои тесты» пользователю доступен список всех тестов по всем предметам. Для преподавателей это читаемые предметы, а для студентов — прослушиваемые. С помощью фильтра можно просмотреть тесты, относящиеся к определенному предмету.

Рисунок 17. Подраздел «Мои тесты» для роли «Преподаватель»

1.  Ближайшие доступные для прохождения тесты должны быть выделены цветом.

2.  Изначально в списке представлены тесты, которые только предстоит выполнить или просмотреть. Однако необходимо дать пользователю возможность просмотра уже прошедших тестов.

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

4.  При нажатии на кнопку «Редактировать» открывается форма, аналогичная форме создания нового теста, но с уже заполненными полями.

Рисунок 18. Раздел «Мои тесты» для роли «Студент»

1.  Доступных для прохождения тестов может быть несколько. И все они должны быть выделены цветом.

2.  При нажатии кнопки «Пройти тест» студент попадает в форму, представленную на рисунке 7. Данная кнопка отображается только для тестов, доступных для прохождения.

Мои задания

Структура подраздела «Мои задания» аналогична структуре подраздела «Мои тесты» поэтому более подробно будет рассмотрена на этапе детального проектирования.

Мое расписание

Так как обычно в учебном процессе необходимо просмотреть расписание на текущую неделю (преподавателю — проверить тему грядущей лекции и посмотреть дату, когда она состоится, студенту — узнать аудиторию и время начала того или иного занятия), то было решено при переходе к подразделу «Мое расписание» отображать расписание на текущую неделю с функцией автоматической подгрузки контента при прокрутке страницы. Однако опционально стоит оставить возможность просмотра расписания в виде календаря, в котором текущая учебная неделя располагается в верхней строке.

Из за большого объема этот материал размещен на нескольких страницах: 1 2 3 4 5