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

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

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

Рис. 2

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

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

Меню

Информация

Логотип

Контакты

Рис.27

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

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

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

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

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

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

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

 

Рис.28

 

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

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

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

 

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

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

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

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

5.3 Выявление проблем и разработка рекомендация по их устранению

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

 

Заключение

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

Список литературы

 

1. Купер, А. Об интерфейсе. Основы проектирования взаимодействия / А. Купер, Р. Рейман, Д. Кронин. – СПб.: Символ-Плюс, 2009. – 649 с.

2. Унгер, Р. UX-дизайн. Практическое руководство по проектированию опыта взаимодействия / Р. Унгер, К. Чендлер; пер. с англ. – СПб.; М.: Символ, 2011. – 327 с.

3. Головач, В. В. Дизайн пользовательского интерфейса. Искусство мыть слона / В. В. Головач. – Минск: БГТУ, 2008. – 94 с.

4. Нильсен, Я. Веб-дизайн. Книга Якоба Нильсена / Я. Нильсен; пер. с англ. – СПб.: Символ-Плюс, 2003. – 512 с.: цв. ил.

5. Круг, С. Веб-дизайн: книга Стива Круга, или Не заставляйте меня думать! / С. Круг; пер. с англ. – СПб.: Символ-Плюс, 2008. – 295 с.

6. Калиновский, А. Юзабилити: как сделать сайт удобным / А. И. Калиновский. – Минск: Новое знание, 2005. – 220 с.: ил.

7. Кирсанов, Д. Веб-дизайн: книга Дмитрия Кирсанова / Д. Кирсанов, А. Кирсанова. – СПб.: Символ-Плюс, 1999. – 376 с.: цв. ил.

8. Гринберг, С. UX-дизайн. Идея – эскиз – воплощение / С. Гринберг, Ш. Карпендейл, Н. Маркардт, Б. Бакстон. – СПб.: Питер, 2014. – 272 с.: ил.

9. Макнейл, П. Веб-дизайн. Идеи, секреты, советы / П. Макнейл. – СПб.: Питер, 2012. – 272 с.: ил.

10. Купер, А. Психбольница в руках пациентов / А. Купер. – СПб.: Символ-Плюс, 2004. – 295 с.

11. Бикнер, К. Экономичный Web-дизайн / К. Бикнер; пер. с англ. Д. С. Ремизова. – М.: НТ Пресс, 2005. – 248 с.: ил.

12. Уодтке, К. Информационная архитектура. Чертежи для сайта / К. Уодтке. – М.: КУДИЦ-Образ, 2004. – 256 с.: ил.

13. Нейл, Т. Мобильная разработка. Галерея шаблонов / Т. Нейл. – СПб.: Питер, 2013. – 208 с.: ил.

14. Лунд, М. Измерение юзабилити с использованием вопросника. STC Юзабилити SIG Информационный бюллетень, 8 [Электронный ресурс]. – 2001. – Режим доступа: http://www.hcibib.org/bs.cgi?query= U.lund.2001&searchtype=question. – Дата доступа: 22.01.2016.

15. Контрольный список Веб-интерфейса [Электронный ресурс].– 2000. – Режим доступа: http://ddd.exmachina.ru/web/web_cheklist/, http:// wiki.software-testing.ru/. – Дата доступа: 22.01.2016.

 

Оглавление

1. Введение. 2

2. Начало проекта и анализ требований.. 2

2.1 Предметная область. 2

2.2 Обзор основных аналогов (существующих решений). 3

2.3. Определить цели и задачи проекта. 5

2.4. Описать целевую аудиторию.. 6

2.5. Составить список потребностей пользователей.. 6

2.6. Составить список возможностей на проекте. 6

2.7. Создать персонажей проекта и определить их проблематику. 6

2.8 Составить сценарии взаимодействия персонажей с интерфейсом.. 9

3. Проектирование. 9

3.1 Составить и описать перечень функциональностей.. 9

3.2 Составить информационную структуру приложения (взаимосвязи между страницами и их иерархия) 11

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

3.4 Разработать статистический прототип интерфейса. 12

3.5 Создать связи между страницами и динамический прототип. 17

3.6 Протестировать прототип и доработать его по замечаниям респодентов. 17

4. Дизайн.. 19

4.1 Разработка логотипа и стилистики.. 19

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

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

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

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

4.6 Создать страницы со стилями всех элементов и все остальные страницы и окна. 25

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

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

5.3 Выявление проблем и разработка рекомендация по их устранению.. 33

6. Заключение. 33

7. Список литературы.. 33