4.2 Определить цветовую гамму

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

Рис. 25

4.3 Выбрать шрифты

Для сайта были выбраны два основных шрифта: Calibri – основной текст (Рис 12) и Broadway – для логотипа (Рис 13). Первый хорошо подходит для текста, так как не имеет засечек и хорошо читабелен даже при мелком шрифте. Segoe Print хорошо подходит для заголовков своим оформлением с присутствием засечек.

4.4 Определить общие положения сетки и расстояний

Для размера страницы сайта был определен размер в 640 пунктов (примерно 850 пикселей). Этот вариант был выбран для того, что если бы использовался полноразмерный масштаб (1280 пикселей), то сайт со своими всеми составляющими смотрелся пусто и не структурировано. Пользователь просто потеряется в этом открытом пространстве.

Параметры шрифтовой сетки: кегль – 9 пт, ширина строки 16 пт.

Далее было определено число колонок. Сетка на 6 колонок очень неудобная и некомпактная. Увеличим количество модулей вдвое. Теперь зная то, что у нас 12 колонок, можно рассчитать, что ширина колонки будет равна 41 пункт.

Строим вертикальное членение по полученному значению.

Делаем горизонтальное членение

Высоту одного такого пояса берем кратной базовой высоте строки.

Объединяем по 3 строки в один пояс. Просвет между поясами делаем в одну строку, тем самым сохраняем вертикальный ритм (Рис.26).

Рис. 2

Модульная сетка

Распологаем элементы главной страницы на сетке (Рис.27)

Меню

Информация

Логотип

Контакты

Рис.27

Логотип должен быть около 25% в высоту (от всей высоты) и 35% в ширину (от всей ширины). Разместить его нужно только в левом верхнем углу, так как больше он нигде не вписывается)

Блок меню не должен составлять менее 8% в высоту и 50% в ширину, так как при уменьшении этого блока, текст становится плохо видимым.

Информация должна занимать не менее 40% объёма всей страницы так как на неё располагается основная информация.

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

Все остальные страницы имеют аналогичное расположение элементов.

4.5 Создать главную страницу

Теперь можно создать главную страницу(рис.28)

Рис.28

5. Юзабилити-тестирование

5.1 Выбор методов тестирования

Для метода тестирования была выбрана анкета по требованиям контрольного списка. Здесь пользователь под каждым требование поставить свою оценку (0.1-1). Пользователь сможет заполнить анкету после выполнения ряда задач, которые будут ему поставлены для тестирования сайта.

План исследования

Респондентам были поставлены следующие задачи по тестированию сайта металлургического завода:

Задание № 1. Вам надо посмотреть Продукцию. Быстро ли вы нашли нужную информацию?

Задание № 2. Вы хотите Сделать заказ. Отправьте заявку на сайте.

Задание № 3. Вы хотите узнать отзывы других пользователей. Найдите информацию на сайте.

Задание № 4. Просмотрите текущие акции компании. Быстро ли вы их нашли?

1. Заполните небольшую анкету, представленную в табл.

2. Утверждения нужно оценить по степени соответствия в диапазоне от 0 до 1. В случае низкого значения (например, ниже 0,5) рекомендуется дать развернутый комментарий – пояснение или обоснование оценки. 2. Немного информации о вас. Для общей статистики тестируемых необходимо указать: 1) возраст (лет); 2) пол (ж., м.); 3) род деятельности, интересы; 4) пользовались интернет услугами (да, нет) до этого? При отрицательном ответе пропускать п. 5; 5) любите ли вы пользоваться интернет услугами?

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

Характеристики респондентов

Персонаж 1: Дмитрий Коршунов. Возраст - 20 лет. Семейное положение –не женат. Профессия – тренер.

Персонаж 2: Александр Укропченко. Возраст – 25 лет. Семейное положение – не женат. Профессия – бизнесмен.

Персонаж 3: Антон Сучков. Возраст – 36 лет. Семейное положение – женат, детей нет. Профессия – механик.

Итог опроса приведен в табл. 2:

Утверждение	Соответствие
	Дмитрий	Александр	Антон
1. Главная страница дает четкое понимание содержания сайта	0,9	0,8	1
2. Обозначения и функции элементов навигации понятны	1	1	1
3. Ссылки легко различимы	0,9	0,9	1
4. Интуитивно понятный дизайн, который посетители, использующие его в первый раз или которым он понадобился только однажды, могли эффективно использовать его без предварительного обучения или инструкций	1	0,9	1
5. Можете найти необходимую вам информацию за три клика мышкой	1	1	1
6. Читабельность(Readability) – обозначает уровень понятности смысла текста, зависит от сложности предложений и используемых терминов	0,9	0,8	0,9
7. Поиск удобен	1	1	1

Комментарии персонажей

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

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

3. Очень креативно подобран задний фон.