Министерство образования и науки Российской Федерации

НОВОСИБИРСКИЙ ГОСУДАРСТВЕННЫЙ ТЕХНИЧЕСКИЙ

УНИВЕРСИТЕТ

Кафедра экономической информатики

Курсовой проект

по дисциплине

«Проектирование и анализ веб-интерфейсов»

«Проектирование и реализация веб-интерфейсов»

Факультет бизнеса Группа: ФБИМ-82 Студент: Лепешев П. Ю.

Преподаватель: к.т.н., Бакаев М. А.

Новосибирск 2014

СОДЕРЖАНИЕ

ВВЕДЕНИЕ………………………………………………………………………03 ЧАСТЬ I. ОПИСАНИЕ ОБЪЕКТА РАЗРАБОТКИ.....................04 Раздел Выбор объекта для разработки...... ………… ……..…….. 1.1.

Раздел 1.2. Описание целевой аудитории сайта и анализ сайтов конкурентов……………………………………………………………………… Раздел Анализ задач и сценарии использования…......... ……… 1.3.

ЧАСТЬ II. РАЗРАБОТКА ПРОТОТИПОВ ВЕБ-ИНТЕРФЕЙСА……….….. Раздел Прототипирование «на бумаге».........……… ……..…….. 2.1.

Раздел 2.2. Разработка статичных прототипов с использованием программного продукта «Axure RP» ……………………..…………………... Раздел 2.3. Разработка макетов страниц с использованием программного продукта «Photoshop»……………………..…………... ……… ЧАСТЬ III. РЕАЛИЗАЦИЯ ПРОТОТИПА ВЕБ-САЙТА ……………..…..... Раздел 3.1. Создание работающего прототипа веб-сайта……………... Раздел 3.2. Юзабилити-тестирование……………... …………...……….. ЗАКЛЮЧЕНИЕ ……………………………………………………………..…. СПИСОК ИСПОЛЬЗОВАННЫХ ИСТОЧНИКОВ……………………………

ВВЕДЕНИЕ

Цель работы: показать владение методами проектирования и реализации веб-интерфейсов на основных этапах разработки.

На основании цели поставлены следующие задачи:

Выбрать объект для разработки;

1.

Проанализировать контекст использования сайта и 2.

проанализировать сайты конкурентов;

Описать анализ задач и сценарии использования сайта;

3.

Создать первичные прототипы сайта;

4.

Выполнить с помощью программы «Axure RP» прототипы 5.

основных страниц сайта;

Разработать макеты страниц с использованием программного 6.

продукта «Photoshop»;

Описать дальнейшие планы по реализации проекта веб-сайта;

7.

Описать планирующееся юзабилити тестирование сайта.

8.

ЧАСТЬ I. ОПИСАНИЕ ОБЪЕКТА РАЗРАБОТКИ

В данной работе будут описаны этапы разработки и проектирования уже реально созданного сайта под названием «Маршрутами городских легенд».

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

Заказчиком проекта создания ИСВЭ «МГЛ» является творческое объединение Клуб сказочников «Баюшка» и Автономная некоммерческая организация Центр развития личности «Мир на ладони» (далее «Заказчик») во взаимодействии с такими муниципальными учреждениями культуры, как Музей города Новосибирска и Городской Центр истории Новосибирской книги, а также, муниципальными библиотеками, работающими в области краеведения.

Настоящий сайт адресован, в первую очередь, к молодежи и юношеству города Новосибирска. Его цель – повышение уровня интереса к достопримечательностям и памятным местам родного города посредством внедрения современной программной технологии изучения краеведения, стимулирование развития творчества в этой области. Разработка и внедрение интерактивного сайта виртуальных экскурсий «Маршрутами городских легенд» будет способствовать проведению Клубом сказочников «Баюшка»

фестивалей сказочного творчества, а АНО Центр развития личности «Мир на ладони» традиционных конкурсов по истории, географии и культуре г.

Новосибирска на более высоком уровне.

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

Реализация проекта по созданию ИСВЭ «МГЛ» является программнотехнологическим направлением (проектом) внутри более масштабного проекта Заказчика под названием «Маршрутами городских легенд». В содержательной стороны и географии, до масштабов области.

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

Так, например, портал «Новониколаевск-онлайн» (http://nn-online.gsssoft.ru/) выполнен в великолепном дизайне, но кроме, нужно признать, достаточно интересной стилизованной под старину карты (возможно совместный проект с компанией «2ГИС») не дат более никакой информации о городе и области в целом (рис 1.):

Рисунок 1. – Главная страница сайта ««Новониколаевск-онлайн»

«Новосибирский краеведческий портал» (http://kraeved.ngonb.ru/) достаточно информативен, но производит впечатление скорее официального ресурса, без возможности интерактивное общения с пользователем (рис. 2).

(http://www.nasledie-nso.ru/) носит ещ более официальный характер и служит для публикации нормативных и правовых актов в отношении объектов культурного наследия (памятников истории и культуры), находящихся в государственной собственности Новосибирской области (рис 3.).

Рисунок 2. – Главная страница сайта «Новосибирский краеведческий портал»

Рисунок 3. – Главная страница сайта «Культурное наследие Таким образом, не один из вышеперечисленных сайтов, условных конкурентов, не ставит перед собой задачу повышения уровня интереса к достопримечательностям и памятным местам родного города.

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

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

Клубом сказочников «Баюшка» и Автономной некоммерческой организацией Центр развития личности «Мир на ладони» предполагается (планируется) продвижение интерактивного сайта виртуальных экскурсий «Маршрутами городских легенд» среди образовательных учреждений и муниципальных библиотек с целью развития и совершенствования системы дополнительного образования в области краеведения.

Предполагается, что сайт «Маршрутами городских легенд будет решать три основные задачи:

Решение информационной составляющей достаточно традиционно.

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

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

Наибольший интерес представляет обучающий аспект сайта. Для интерактивного ознакомления с памятниками культурного наследия предусмотрена совокупность страниц (блок) объединнных (организованных) по принципу quest’а (путешествия-приключения), переходя по которым и отвечая на задаваемые по мере продвижения по маршруту вопросы, пользователь знакомится с памятниками культурного наследия, достопримечательностями и интересными местами г.

Новосибирска (далее «Блок quest»).

Как наиболее оригинальную, рассмотрим обучающую задачу и в частности то, как реализуется «Блок quest».

С главной страницы сайта, из основного меню (кнопка «Миры»), пользователь попадает на страницу «Миры» где ему предлагается выбрать маршрут прохождения. Маршрут представляет собой совокупность точек маршрута. Маршрут проложен на карте города и состоит из 5-7 точек достопримечательностями по определенной тематике. По мере прохождения маршрута, для успешного выполнения quest’а пользователь, ознакомившись с картой и легендой, которые также представлены на странице, должен верно отвечать на тестовые вопросы, и только в случае верно выбранного ответа пользователь сможет перейти на следующую точку маршрута.

Страница маршрута содержит карту пути в шапке сайта, на текущей странице (точке маршрута) расположено фото, ниже легенда (информирующий текст) и вопрос с 4 вариантами ответа. В нижней части сайта расположена навигация по вопросам. Кнопка активной страницы (точки маршрута, где находится пользователь) имеет стандартный вид (стандартный вид текущей кнопки маршрута). Если пользователь отвечает на вопрос верно, то появляется кнопка с цифрой 2. Эта кнопка чуть крупнее стандартной и подсвечена зелным цветом. Эта кнопка является ссылкой и после клика по ней происходит переход на следующую точку маршрута. Все последующие номера точек маршрута (2, 3, 4, 5, 6, 7…) появляются по мере прохождения маршрута (правильного ответа на вопросы).

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

ЧАСТЬ II. РАЗРАБОТКА ПРОТОТИПОВ ВЕБ-ИНТЕРФЕЙСА

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

«Главная» страница (рис. 4):

Главная страница сайта состоит из следующих частей:

Центральная, контентная часть;

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

приветствие, с краткой информацией о ресурсе, а ниже короткие анонсы новостей. Анонс новости содержит: фото, заголовок, короткий текст, ссылку «подробнее».

В правой колонке расположены следующие элементы:

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

Последняя активность на форуме В блоке активности на форме выводятся последние 5 тем с форума, в которых появились новые сообщения.

Блок содержит кнопки на следующие социальные сети: «Твиттер», «Фейсбук», «Вконтакте», «Одноклассники».

Блок позволяет размещать баннеры от рекламодателей.

Далее покажем первоначальный прототип страницы со списком последних новостей. Страница «Новости» имеет стандартную шапку, стандартную правую колонку и стандартный футер. В центральной части сайта расположены списком новости. Каждый элемент списка имеет:

изображение, заголовок, текст анонса и ссылку «Подробнее». Количество выводимых новостей на страницу может быть настроено по усмотрению Заказчика. Ниже, расположена постраничная навигация для переключения на последующие и предыдущие страницы (рис. 5):

Далее рассмотрим страницу стандартной точки маршрута. Как уже было написано выше, страница маршрута (страница точки маршрута) содержит карту пути в шапке сайта, на текущей странице (точке маршрута) расположено фото, ниже легенда (информирующий текст) и вопрос с вариантами ответа. В нижней части сайта расположена навигация по вопросам. Кнопка активной страницы (точки маршрута, где находится пользователь) имеет стандартный вид (стандартный вид текущей кнопки маршрута). Если пользователь отвечает на вопрос верно, то появляется кнопка с цифрой 2. Эта кнопка чуть крупнее стандартной и подсвечена зелным цветом. Эта кнопка является ссылкой и после клика по ней происходит переход на следующую точку маршрута. Все последующие номера точек маршрута (2, 3, 4, 5, 6, 7…) появляются по мере прохождения маршрута (правильного ответа на вопросы).

Пользователю дается возможность дать два неверных ответа. При третьем неверном ответе пользователь попадает на страницу со списком маршрутов, при верном ответе – на страницу со следующей точкой маршрута (рис. 6):

Рисунок 6. – Страница «Точки маршрута» сайта «МГЛ»

Как уже говорилось ранее «Форум» реализован на стороннем «форумдвижке» «phpBB», поэтому никаких особенностей в интерфейсе не предусмотрено (рис. 7):

использованием программного продукта «Axure RP»

спроектированы уже с использованием программных средств, а именно программного обеспечения для создания прототипов и спецификаций вебсайтов и приложений «Axure RP» (рис 8, 9, 10, 11):

Рисунок 8. – «Главная» страница сайта «МГЛ» реализованная в «Axure RP»

Рисунок 9. – Страница «Новости» сайта «МГЛ» реализованная в «Axure RP»

Рисунок 10. – Страница «Точка маршрута» сайта «МГЛ» реализованная в Для страницы «Форум» прототипа создано не было, т.к. форум реализован на стороннем «форум-движке» «phpBB» и создавать в таком случае отдельный прототип не имело смысла, а пришлось только подобрать подходящий шаблон из уже имеющихся.

Раздел Разработка макетов страниц с использованием Далее все страницы сайта были отрисованы (создан дизайн) в программном продукте «Adobe Photoshop». Покажем, как при этом изменились рассматриваемые нами страницы (рис 11, 12, 13):

Рисунок 11. – «Главная» страница сайта «МГЛ» реализованная в «Photoshop»

Рисунок12. – Страница «Новости» сайта «МГЛ» реализованная в «Photoshop»

Рисунок13. – Страница «Точка маршрута» сайта «МГЛ» реализованная в

ЧАСТЬ III. РЕАЛИЗАЦИЯ ПРОТОТИПА ВЕБ-САЙТА

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

В нашем случае результаты выполнения предыдущих пунктов (прототипирование и создание дизайна ) для сайта «МГЛ» были воплощены в работающем прототипе веб-сайта, реализованном на фреймворкеYii. На данный момент все перечисленные требования выполнены, но сайт, для того чтобы его можно было назвать полноценным web-ресурсом, требует проведения ещ большого количества работ, которые в конечном итоге должны вылиться в полноценно работающий сайт, позволяющий выполнять все основные сценарии использования заложенные при проектировании.

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

ЗАКЛЮЧЕНИЕ

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

В ходе достижения цели цели решены следующие задачи:

1. Выбран объект для разработки;

2. Проанализирован контекст использования сайта, а также проанализированы сайты конкурентов;

3. Описан анализ задач и сценарии использования сайта;

4. Созданы первичные прототипы сайта;

5. С помощью программы «Axure RP» выполнены прототипы основных страниц сайта;

6. Разработаны макеты страниц сайта с использованием программного продукта «Photoshop»;

7. Описаны дальнейшие планы по реализации проекта веб-сайта;

8. Описано планирующееся юзабилити тестирование сайта.

ИСПОЛЬЗОВАННЫЕ ИСТОЧНИКИ

1. К. Гэдди и А. Маркус. Азбука анализа задач в веб-дизайне, 2008.

[Электронный ресурс]. – Режим доступа:

http://online.careerlab.ru/articles/design/азбука-анализа-задач-в-вебдизайне.html 2. Советы для написания хороших сценариев использования.

[Электронный ресурс]. – Режим доступа:

http://ashamray.wordpress.com/2011/03/02/tips_for_writing_good_us e_cases/ 3. Руководство («чеклист») по анализу контекста (англ.).

[Электронный ресурс]. – Режим доступа:

http://usabilitynet.org/papers/UCA_V4.04.doc 4. В. Головач. Юзабилити-тестирование по дешвке. // Usethics, 2005. [Электронный ресурс]. – Режим доступа:

http://usethics.ru/blog/lib/testing_by_the_cheap/ 5. Сайт «Маршрутами городских легенд» [Электронный ресурс]. – Режим доступа: http://www.nsk-legenda.ru/