Детальное проектирование
Данный этап напоминает стадию концептуального проектирования, но в большей степени сосредоточен на подробностях реализации. На этом этапе более подробно рассматриваются проектные решения, принятые на уровне концепции. Ниже в данном разделе будут представлены детальные прототипы экранных форм социально-ориентированной системы поддержки очного обучения. Особо будут отмечены ключевые моменты, которые не были учтены на этапе концептуального проектирования.
Общая компоновка экранных форм
Общая компоновка экранных форм, разработанная на уровне концепции и представленная на рисунке 11, была соблюдена при разработке детальных прототипов проекта.
Header
В «шапке» сайта на этапе детализации произошло одно важное изменение. Слева от приветственной надписи было решено добавить ссылку на раздел «Люди — Мои сообщения» с индикатором новых непрочитанных писем. Это необходимо было сделать для того, чтобы повысить вероятность прочтения пользователем важных сообщений, пришедших ему. Так как подраздел «Люди — Мои сообщения» не доступен для просмотра с главной страницы, то пользователь не мог узнать, есть ли у него непрочитанные сообщения.
Структура обновленной «шапки» сайта представлена на рисунке 8.
Рисунок 27. "Шапка" сайта
Главная страница
Прототип главной страницы после этапа детального проектирования представлен на рисунке 28.
Рисунок 28. Детальный прототип главной страницы
По ссылке «Все новости» осуществляется переход к разделу «Люди — Новости» (рисунок )
По ссылкам «Перейти к разделу «Мои курсы»» и «Перейти к разделу «Мои задания»» осуществляется переход к соответствующим разделам системы.
Пиктограмма «Редактировать» открывает предзаполненную соответствующими данными форму создания теста.
При нажатии на кнопку «Проверить тест» или «Проверить задание» осуществляется переход к экрану со списком студентов, завершивших данную активность. Если активность на данный момент никто не завершил, то данная кнопка отсутствует.
При наведении курсора мыши на индикатор количества завершивших активность человек, появляется всплывающее окно со списком студентов. Если студентов, сдавших тест слишком много (больше 10), то пользователю предлагается пройти по ссылке «Весь список…». Список откроется в новом окне.
Раздел «Учеба» Мои курсы
Детальный прототип подраздела «Мои курсы» для роли «Преподаватель» представлена на рисунке 11.
Рисунок 29. Детальный прототип подраздела «Мои курсы»
По ссылке «К списку всех курсов» пользователь может просмотреть список всех курсов, представленных в системе. В данной дипломной работе данный раздел не рассматривается
Карточка курса содержит в себе следующую информацию: Название курса; его описание(может отсутствовать); семестр, в рамках которого читается данная дисциплина, продолжительность (с указанием дат начала и конца курса); группы, прослушивающие курс и формы отчетности, предусмотренные по курсу.
При переходе по ссылке, соответствующей определенной группе, в отдельном окне открывается список студентов, состоящих в данной группе.
При переходе по ссылке, соответствующей определенной форме отчетности по курсу, в отдельном окне отрывается список указанных активностей.
При переходе к содержимому курса, отображается экран, представленный на рисунке 30.
Рисунок 30. Детальный прототип экрана представления курса
При нажатии на пиктограмму «Редактировать» происходит переход на страницу редактирования наполнения лекции (см. рисунок 31). Страница представляет собой экранную форму с полями ввода «Название лекции» и «Содержание лекции» (содержит встроенный WYSIWYG-редактор для форматирования контента; позволяет добавлять в лекцию текст, изображения, видеофайлы, аудиофайлы и ссылки). Возможен предпросмотр лекции перед внесением изменений. Окно представляет собой слой, открывающийся поверх основного окна (в данной дипломной работе не рассматривается).
Рисунок 30. Детальный прототип экрана редактирования лекции
Карточка курса. Содержит порядковый номер лекции (семинара, лабораторной работы), ее название, дату, время и аудиторию проведения.
К лекции могут быть приложены дополнительные материалы в виде ссылок или файлов. При переходе по ссылке в новой вкладке браузера открывается ее содержимое. Для каждого файла в скобках указывается его размер и формат. При нажатии на ссылку, ведущую к файлу, автоматически начинается его загрузка на персональный компьютер пользователя.
Формы добавления ссылок и файлов показаны на рисунках 31 и 32 соответственно. При добавлении файлов пользователь имеет возможность указать путь к файлу на своем персональном компьютере вручную или найти его с помощью стандартных инструментов операционной системы, нажав на пиктограмму, располагающуюся внутри поля ввода. При нажатии на кнопку «Добавить» на экране появляется полоса загрузки.
Рисунок 31. Форма добавления ссылки на внешний ресурс
Рисунок 32. Форма добавления нового файла
Форма создания теста представлена на рисунке 33.
Рисунок 33. Детальный прототип формы создания теста.
При создании теста задаются только крайние дата и время его сдачи. Тест становится доступным для прохождения студентами по завершению лекции (время завершения указано в карточке лекции).
Дату завершения можно указать с помощью выпадающего календаря (при нажатии на пиктограмму внутри поля ввода). Прототип календаря изображен на рисунке 34.
Рисунок 34. Детальный прототип выпадающего календаря.
Для каждого теста предлагается выбрать одну из трех шкал оценивания (5, 10, 100 баллов) или задать собственную с помощью указания максимальной оценки за тест.
На данный момент в системе предусмотрено 4 типа вопросов: с одним ответом, с несколькими ответами, эссе и вопрос на соответствие.
Для каждого варианта ответа можно добавить изображение, нажав на соответствующую пиктограмму внутри поля ввода.
По умолчанию, для каждого вопроса можно задать 5 вариантов ответа (заполнять их все не обязательно). Для ввода большего количества вариантов, пользователь может кликнуть по ссылке «Добавить еще 3 варианта ответов», что приведет к появлению на экране дополнительных полей ввода.
При выборе вопроса с несколькими правильными ответами, суммарный бал за правильный ответ (максимальный балл поделенный на количество вопросов) делится между всеми вариантами правильных ответов поровну.
По умолчанию, для заполнения доступно 4 вопроса. Для ввода большего количества вопросов, пользователь может кликнуть по ссылке «Добавить еще 3 вопроса», что приведет к появлению на экране дополнительных форм для ввода вопросов.
Мои тесты
Детальный прототип подраздела «Мои курсы» для роли «Преподаватель» представлена на рисунке 35. Все ключевые моменты для данного экрана были описаны на этапе концептуального проектирования.
Рисунок 35. Детальный прототип подраздела «Мои тесты» для роли «Преподаватель»
Мои задания
Детальный прототип подраздела «Мои задания» аналогичен прототипу подраздела «Мои тесты» и приведена на рисунке 36.
Рисунок 36. Детальный прототип подраздела «Мои задания» для роли «Преподаватель»
Мое расписание
Детальный прототип подраздела «Мое расписание» приведен на рисунке 37.
Рисунок 37. Детальный прототип подраздела «Мое расписание»
Каждый элемент расписания содержит дату проведения занятия для каждого конкретного преподавателя, а также время проведения, тему занятия и ссылку на соответствующую лекцию в системе. Для каждой записи указываются активности, предусмотренные для соответствующего занятия (тест, задание).
Создать тест или задания для определенной лекции можно прямо из ее записи в расписании.
Мои студенты
На рисунке 38 представлен детальный прототип подраздела «Мои студенты». Он представляет собой список студентов, которые прослушивают курс преподавателя – текущего пользователя системы. В списке также указывается краткая информация о каждом студенте (курс, группа, средний балл).
Рисунок 38. Детальный прототип подраздела подраздела «Мои студенты»
Так как карточек студентов в системе может присутствовать довольно большое количество, то была предусмотрена система фильтрации по номеру учебной группы, в которой состоят студенты.
Также предусмотрена возможность сортировки списка студента по группе, курсу и среднему баллу.
Для каждого студента или группы студентов преподаватель может назначить индивидуальное задание. При нажатии на кнопку «Назначить задание» в новом слое поверх основного окна появляется форма создания нового задания.
Любому студенту прямо из списка пользователь может написать сообщение или добавить его в список друзей.
Раздел «Люди» Новости
Детальный прототип экранной формы «Новости» представлен на рисунке 39.
Рисунок 39. Детальный прототип подраздела «Новости»
Фон учебных новостей отличается от фона личных новостей, чтобы пользователю было проще на интуитивном уровне отличать их друг от друга. Как показало юзабилити-тестирование, все респонденты правильно трактовали назначение разных цветов.
Пользователь при желании может скрыть любое новостное сообщение, нажав на соответствующую пиктограмму.
В системе планируется использовать рейтинговую систему для новостных сообщений, с помощью которых пользователь сможет отметить новости, которые ему понравились. Расположение подобных пиктограмм отображено в прототипе.
Для учебных сообщений предусмотрена возможность привязки их к определенному курсу. Для этого используются средства WISYWIG-редактора при создании новости. Ссылка на лекцию или курс, к которой относится новость, будет размещена в теле сообщения.
Для каждой новости указывается пользователь, создавший ее.
Мои сообщения
Детальный прототип экранной формы «Мои сообщения» представлен на рисунке 40.
Рисунок 40. Детальный прототип подраздела "Мои сообщения"
С помощью данной панели пользователь может удалять сообщения и отмечать их как прочитанные или непрочитанные. Это необходимо для того, чтобы отмечать важные письма и впоследствии к ним возвращаться. В зависимости от типа выбранных писем, изменяется надпись и функция кнопки «отметить как непрочитанные»: если пользователь выберет непрочитанные письма, то данная кнопка позволит отметить их как прочитанные.
Каждое письмо должно иметь свой цветовой код в зависимости от типа: для оповещений о заданиях и тестах и для сообщений от других пользователей в качестве фона используются различные цвета.
Для сообщений, содержащих информацию о тестах и заданиях, в качестве отправителя указывается та учебная активность, к которой относится данное сообщение.
Мои друзья
Данный подраздел, имеет структуру аналогичную. представленной на рисунке 38 поэтому на страницах данной пояснительной записки представлен не будет. Однако стоит заметить, что для преподавателей в данном разделе добавляется вкладка «Мои студенты» для быстрого доступа к соответствующему списку.
Поиск людей
Для поиска профилей пользователей и добавления их в список друзей или отправки им сообщений предусмотрен поисковый механизм, который позволит среди большого количества пользователей отыскать необходимых. Поиск пользователей происходит по имени, фамилии, номеру группы и курсу. Структура подраздела «Поиск людей» представлена ниже на рисунке 41.
Рисунок 41. Детальный прототип подраздела «Поиск людей»
Раздел «Моя страница»
Детальный прототип экранной формы «Мои сообщения» представлен на рисунке 42. Все ключевые интерфейсные решения для данного экрана были описаны на этапе концептуального проектирования.
Рисунок 42. Детальный прототип раздела «Моя страница»
Раздел «Настройки» Настройки моей страницы
Детальный прототип экранной формы «Мои сообщения» представлен на рисунке 43. На этапе детального проектирования было решено объединить настройки страницы пользователя с функционалом для смены пароля, так как он непосредственно является настройкой профиля пользователя
Рисунок 43. Детальный прототип подраздела «Настройки моей страницы»
Пользователь может указать контактную информацию (номера телефонов, адреса электронной почты, ICQ, jabber), чтобы предоставить другим пользователям альтернативные средства связи.
При нажатии на пиктограмму «Редактировать» пользователь имеет возможность изменить данные о каждой публикации или награде на личной странице.
При необходимости пользователь может добавить информацию о новых личных публикациях и достижениях.
Непосредственно на странице происходит проверка правильности ввода текущего пароля для входа в систему при его смене. При неправильном вводе, на экране отображается сообщение об ошибке.
Настройки оповещений
Детальный прототип экранной формы «Мои сообщения» представлен на рисунке 44. На представленной ниже веб-странице пользователь может указать, о каких видах активности его стоит оповещать в сообщениях непосредственно в системе, по электронной почте или по sms. Последние два пункта требуют указания соответствующей контактной информации.
Рисунок 44. Детальный прототип подраздела «Настройки оповещений»
|
