Мешкова М.А. Диссертация Методология разработки системы тестирования (1194684), страница 12

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

Текст из файла (страница 12)

Рисунок 46 – Статистика за определенную дату

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

Рисунок 47 – Дополнительная информация об участнике тестирования

Под диаграммой (рисунок 46) расположена таблица с более подробным отчетом о тестировании с указанием ФИО тестируемого, результатом тестирования, затраченном времени, количеством неверных ответов и отчетом детализации, при нажатии на который открывается информация об ответах испытуемого с указанием верных и неверных ответов (рисунок 48). При нажатии на фамилию тестируемого можно осуществить переход на страницу с его персональной статистикой (рисунок 39). Также на странице реализован переход на статистику тестирования за другие даты.

Рисунок 48 – Детализация ответа пользователя

При переходе в третий раздел в режиме администратора «Группы пользователей» происходит переход на страницу групп пользователей (рисунок 49).

Рисунок 49 – Группы пользователей

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

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

Рисунок 50 – Группа пользователей

На данной странице доступна информация о каждом пользователе: ФИО, должность, дата регистрации в системе, статус в системе, логин. При нажатии на кнопку «Добавить нового пользователя» или на ссылку «Внести изменения» происходит переход в программно-административную часть приложения, где можно выполнить данные операции.

4.3 Особенности интерфейса системы тестирования

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

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

Интерфейс является лаконичным, не перегружен лишними деталями и элементами дизайна.

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

Навигация в приложении является достаточно простой и выполнена в виде навигационной цепочки или ссылок для перехода к необходимым разделам (рисунок 51).

Рисунок 51 – Навигационная цепочка

При завершении тестирование предусмотрено оповещение для исключения ошибок пользователя (рисунок 52).

Рисунок 52 – Оповещение

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

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

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

Рисунок 53 – Кнопки

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

4.4 Особенности дизайна интерфейса

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

Структура окна приложения разделена на несколько областей (рисунок 54):

– верхняя часть (шапка);

– навигационная область;

– основная область содержимого;

– нижняя часть (подвал).

Рисунок 54 – Структура окна приложения

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

В приложении используются основные и акцентные цвета. К основным цветам относится серый и белый, к акцентным цветам относятся зеленый, желтый и красный.

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

Для акцентных цветов были подобраны необходимые оттенки, которые не вызывают раздражения, но в то же время, привлекают внимание. Зеленый цвет используется для новых или активных элементов, для положительных значений результатов тестирования, в шапке приложения. Желтый цвет используется для обозначения элементов, которые больше не являются активными и для средних значений результатов тестирования. Красный цвет используется для обозначения низких результатов тестирования и неверных ответов. Также активно используются другие цветовые акценты для привлечения внимания пользователя к необходимым элементам, например, в вопросе тестирования на установление соответствия (рисунок 55).

Рисунок 55 – Использование цветовых акцентов

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

Рисунок 56 – Пример очевидной группировки элементов

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

Элементами управления приложением являются кнопки (рисунок 57).

Рисунок 57 – Элементы управления

В приложении присутствует три варианта дизайна кнопок:

– неактивная кнопка выполняется серым цветом и при наведении на нее не происходит изменения курсора мыши (рисунок 57 – первая кнопка слева);

– активная кнопка. Цвет шрифта и обводка кнопки выполняется акцентным цветом, кнопка не имеет фонового цвета (рисунок 57 – центральная кнопка);

– активная кнопка при наведении курсора. Цвет шрифта становится белым, заливка кнопки выполняется акцентным цветом (рисунок 57 – первая кнопка справа).

В вопросах тестирования также применяются цветовые акценты и группировки. В закрытом вопросе с изображениями применяются цветные рамки акцентного цвета для обозначения того, что объект был выделен или на него был наведен курсор мыши (рисунок 58).

Рисунок 58 – Использование цветовых акцентов в приложении

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

Рисунок 59 – Использование цветовых акцентов в приложении

В навигации по вопросам тестирования также используются цветовые акценты (рисунок 60). Номер вопроса, на который был дан ответ заливается желтым цветом, номер текущего вопроса выделяется зеленым посредством смены цвета рамки и текста, номер неактивного вопроса выделяется белым посредством цвета рамки и текста.

Рисунок 60 – Использование цветовых акцентов в навигации по приложению

Цветовые акценты присутствуют в результатах тестирования. Результат тестирования выполняется определенным цветом в зависимости от количества набранных баллов (рисунок 61): красным – низкий балл, оранжевым – средний бал, зеленым – высокий балл.

Рисунок 61 – Использование цветовых акцентов в результатах тестирования

Цветовые акценты также используются в детализации тестирования для обозначения верных и неверных ответов на вопросы. Вопросы, на которые был дан верный ответ, обозначаются зеленым, вопросы, ответ на которые был неверен – красным (рисунок 62).

Рисунок 62 – Использование цветовых акцентов в детализации результатов тестирования

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

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

4.5 Выводы по 4 главе

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

Характеристики

Список файлов ВКР