Размещено на http://www.allbest.ru/

Размещено на http://www.allbest.ru/

ФЕДЕРАЛЬНОЕ АГЕНТСТВО СВЯЗИ

Кафедра Безопасности информационных систем

КУРСОВОЙ ПРОЕКТ

Информационный дизайн

тема: «Разработка web-сайта для интернет-магазина фототоваров»

Круглова Т.А.

Оглавление

• ВВЕДЕНИЕ
• 1. Анализ предметной области
• 1.1 Описание выбранного объекта проектирования
• 1.2 Портреты целевых пользователей
• 1.3 Алгоритмы взаимодействия пользователей с системой
• 1.4 Анализ сайтов-конкурентов
• 2. Проектирование системы
• 2.1 Проектирование структуры сайта
• 2.2 Проектирование навигации
• 2.3 Прототипирование
• ЗАКЛЮЧЕНИЕ
• Список использованных источников

ВВЕДЕНИЕ

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

1. Анализ предметной области

1.1 Описание выбранного объекта проектирования

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

1.2 Портреты целевых пользователей

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

Общая характеристика целевой аудитории

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

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

Таблица 1.1 - Детальное описание целевой аудитории

На основе полученного описания целевой аудитории можно выделить два основных портрета пользователей:

1) Александра Емельяненко

Александре 34 года, домохозяйка, живет в городе в собственной квартире. Замужем. Воспитывает двух детей семи и девяти лет. Покупает через Интернет, так как считает, что это экономит время. Кроме того, Мария, сравнив аналогичные предложения других интернет-магазинов, приобретает самый выгодный (дешевый) товар. Экономна, старается не тратить лишних денег, так как откладывает их на образование своих детей. Приобретает фотоаппарат для семейной фотосъемки.

2) Олег Виденин

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

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

1.3 Алгоритмы взаимодействия пользователей с системой

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

· приобрести вещь

~ ознакомиться с каталогом

~ добавить товар в корзину

~ оформить заказ

· поиск

~ поиск по названию

~ поиск по цене

~ поиск по бренду

· оставить отзыв о работе магазина

· оставить комментарий на отзыв пользователя

В соответствии с представленной иерархией для задачи «Приобрести вещь» сценарии использования будут в соответствии с рисунком 1.1 (сценарий «Ознакомиться с каталогом»), рисунком 1.2 (сценарий «Добавить товар в корзину») и рисунком 1.3 (сценарий «Оформить заказ»).

В соответствии с представленной иерархией для задачи «Поиск» сценарии использования будут выглядеть следующим образом, в соответствии с рисунком 1.4 (сценарий «Поиск по названию»), рисунком 1.5 (сценарий «Поиск по цене»), рисунком 1.6 (сценарий «Поиск по бренду»).

Рисунок 1.1 - Сценарий использования «Ознакомиться с каталогом»

Рисунок 1.2 - Сценарий использования «Добавить товар в корзину»

Рисунок 1.3 - Сценарий использования «Оформить заказ»

Рисунок 1.4 - Сценарий использования «Поиск по названию»

Рисунок 1.5 - Сценарий использования «Поиск по цене»

Рисунок 1.6 - Сценарий использования «Поиск по бренду»

Для задачи «Оставить отзыв о товаре» сценарий использования будут выглядеть следующим образом (рисунок 1.7):

Рисунок 1.7 - Сценарий использования «Оставить отзыв о товаре»

Для задачи «Оставить комментарий на отзыв пользователя» сценарий использования будут выглядеть следующим образом (рисунок 1.8):

Рисунок 1.8 - Сценарий использования «Оставить комментарий на отзыв пользователя»

1.4 Анализ сайтов-конкурентов

Составим список основных конкурентов, проанализировав результаты различных запросов в самых крупных поисковых системах (Таблица 1.2 и Таблица 1.3).

Таблица 1.3 - Ранжированный список

Таблица 1.2 - Список конкурентов

Выберем три, наиболее часто упоминаемых в ранжированном списке (таблица 1.3), сайтов и поместим особенности каждого из них в таблицу 1.4.

Таблица 1.5 - Сравнение конкурентов по критериям

Таблица 1.4. - Особенности сайтов

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

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

2. Проектирование системы

2.1 Проектирование структуры сайта

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

Рисунок 2.1 - Структура сайта

2.2 Проектирование навигации

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

Рисунок 2.2 - Прототип глобальной навигации

Кликабельными элементами являются:

1. Поиск

2. Каталог товаров

3. Доставка и оплата

4. Отзывы

5. Корзина

2.3 Прототипирование

Разработаем модульную сетку для нашего ресурса. Модульная сетка характеризуется наличием как вертикального членения, так и горизонтального. То, что образуется на пересечениях, есть модуль. С помощью сервиса modulargrid.org, исходя из приведенных ниже данных (таблица 2) была разработана модульная сетка, изображенная на рисунке 2.3

Таблица 2 - Данные для модульной сетки

Рисунок 2.3 - Модульная сетка

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

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

Рисунок 2.4 - Прототип главной страницы

На рисунке 2.5 представлен прототип главной страницы с модульной сеткой.

Рисунок 2.5 - Прототип главной страницы с модульной сеткой

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

Рисунок 2.6 - Выпадающее меню

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

Рисунок 2.7 - Прототип страницы «Раздел в каталоге товаров»

Так же данная страница представлена с модульной сеткой (рисунок 2.8).

Рисунок 2.8 - Прототип страницы «Раздел в каталоге товаров» с модульной сеткой

После того как пользователь нажал подробная информация он попадает на страницу товара. Страница товара включает в себя путь (Категория 1->Товар 1), чтобы было понятно к какой категории принадлежит товар. Ниже располагается фотогалерея товара. Справа от галереи располагается название товара, краткое описание, цена. Имеется возможность купить товар и приобрести в кредит. Под кнопкой купить видно информацию о том, что товар сертифицирован. Если смотреть ниже, то пользователь увидит технические характеристики товара. Данная страница представлена на рисунке 2.9, а страница с модульной сеткой на рисунке 2.10.

Рисунок 2.9 - Прототип страницы «Информация о товаре»

Рисунок 2.10 - Прототип страницы «Информация о товаре» с модульной сеткой

ЗАКЛЮЧЕНИЕ

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

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

Так же были приведены алгоритмы взаимодействия с иерархией сайта.

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

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

Четко и грамотно - подготовленная информация позволяет покупателю найти нужный ему товар за довольно короткий срок времени.

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

Список использованных источников

1. Джесс Гарретт. Веб-дизайн: книга Джесса Гарретта. Элементы опыта взаимодействия [Текст] / Джесс Гарретт; пер. С. Иноземцев - Москва: Символ-плюс, 2008. - 192 с.

2. Якоб Нильсен. Веб-дизайн. Книга Якоба Нильсена [Текст] / Якоб Нильсен; пер.И. Вихарева, Т. Морозовой, Е. Пуцима - Москва: Символ-плюс, 2014. - 512 с.

3. Сьюзан Уэйншенк. 100 главных принципов дизайна [Текст] / Сьюзан Уэйншенк; пер. ООО Издательство «Питер» - Спб: Питер, 2012. - 270 с.

4. SECL Group. Серьезное проектирование серьезного магазина. Часть 1. Исследуем и продумываем функционал. [Электронный ресурс] / Хабрахабр - Режим доступа: http://habrahabr.ru/company/SECL_GROUP/blog/204914/, свободный.

Размещено на Allbest.ru