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

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

3.9.14 Засечки

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

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

3.9.15 Длина строки

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

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

Пример использования различных вариантов написания текста представлен на рисунке 19.

Рисунок 19 – Пример использования различных вариантов написания текста

На рисунке видно, что наиболее удобным для чтения текстовым блоком является второй блок.

3.9.16 Интерлиньяж

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

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

Пример работы с интерлиньяжем представлен на рисунке 20. В данном примере используется разный интерлиньяж для разных размеров шрифта.

Рисунок 20 – Пример работы с интерлиньяжем

3.9.17 Оформление текста

Для большего удобства работы пользователя с текстом, его нужно разбить на отдельные группы: заголовки, подзаголовки, абзацы, списки (рисунок 21).

Рисунок 21 – Группировка текста

3.9.18 Обратная пирамида текста

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

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

Данный прием удобно использовать в презентациях и в тех случаях, когда поставлена задача – упростить восприятие информации для пользователя [43].

Пример подобной структуры представлен на рисунке 22.

Рисунок 22 – Пример обратной пирамиды текста

Таблица 10 – Основные положения психофизиологии графических интерфейсов

3.11 Выводы по 3 главе

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

4 Проектирование демонстрационной версии гсистемы тестирования

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

Система тестирования работает в двух режимах:

– режим пользователя;

– режим администратора.

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

Режим администратора представлен на двух уровнях:

– front end – пользовательский интерфейс;

– back end – программно-административная часть.

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

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

4.1 Техническая информация о приложении

Система тестирования является web-приложением. Данное приложение может размещаться на локальном сервере или в сети Internet.

Для создания системы тестирования использовались:

– язык гипертекстовой разметки HTML (версия HTML5);

– каскадные таблицы стилей CSS (версия CSS3);

– сценарный язык программирования JavaScript (версия ECMAScript 7);

– фреймворк для разработки web-приложений Bootstrap (версия 3);

– библиотека JavaScript jQuery (версия 1.11.3).

4.2 Структура приложения

Работа с системой тестирования начинается со страницы авторизации (рисунок 23).

Рисунок 23 – Страница авторизации

Затем после входа в систему происходит переход на стартовую страницу работы с приложением в режиме пользователя (рисунок 24) или в режиме администратора (рисунок 25).

Рисунок 24 – Стартовая страница работы с приложением в режиме пользователя

Рисунок 25 – Стартовая страница работы с приложением в режиме администратора

В режиме пользователя доступны разделы:

– основная информация;

– информация о тестированиях;

– статистика.

В режиме администратора доступны разделы:

– основная информация;

– информация о тестированиях;

– группы пользователей.

4.2.1 Структура режима пользователя

В разделе «Основная информация» представлена персональная информация о пользователе с указанием даты регистрации в системе, количеством пройденных тестов, должностью и статусом в системе тестирования (рисунок 26). Информация доступна только для просмотра. Редактирование информации осуществимо только в режиме администратора.

Рисунок 26 – Информация о пользователе в режиме пользователя

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

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

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

В разделе «Информация о тестированиях» представлена информация о тестированиях, которые пользователь уже прошел и доступна информация о новом тестировании, которое необходимо пройти (рисунок 28).