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

19

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

1

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

Федеральное государственное образовательное бюджетное учреждение высшего профессионального образования

«Санкт-Петербургский государственный университет телекоммуникаций им. проф. М. А. Бонч-Бруевича»

Кафедра информационных управляющих систем

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

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

тема:

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

Преподаватель

Радевич С.П.

Студент(ка) гр. ИСТ-21

Казакова А.Р.

Санкт-Петербург 2014

СОДЕРЖАНИЕ

ВВЕДЕНИЕ

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

1.1 Определение целей и типа сайта

1.2 Целевая аудитория сайта

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

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

1.4.1 Создание списка сайтов-конкурентов

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

1.4.3 Анализ сайтов - конкурентов по критериям

1.4.4 Оценка результатов и выводы

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

2.1 Структурирование контента

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

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

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

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

2.4.2 Прототипы типовых страниц

ЗАКЛЮЧЕНИЕ

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

ВВЕДЕНИЕ

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

С каждым годом всё больше людей делают свой выбор в пользу платных медицинских услуг. Множество частных клиник, медицинских центров и лабораторий создают конкурентную сферу. Успех компании в данной области напрямую зависит от удачно разработанного сайта, потому что свой выбор потенциальные клиенты делают именно в Сети. Широкий спектр предоставляемых услуг, огромное количество конкурентов, желание выделиться на их фоне и привлечь посетителей, приводит к тому, что мы видим сотни разнообразных сайтов, пестрящих цветом и рекламой. Потенциальный клиент медицинского центра не ищет развлечений и в большинстве случаев четко знает, что именно ему нужно. Человек уже сделал выбор в пользу платной медицины, желая быстро получить консультацию квалифицированного специалиста, пройти обследование на современном оборудовании. Клиент выбирает простоту, удобство, соответствующее к себе отношение. Но первым делом он сталкивается именно с сайтом компании. Именно сайт, наряду с отзывами других клиентов или рекламой, и, в особенности, при их отсутствии, создаёт первое впечатление о компании. От того будет ли он полезен, информативен, лаконичен, прост и удобен, зависит, в большинстве случаев, выбор пользователя.

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

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

1.1 Определение целей и типа сайта

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

Цели и задачи ресурса:

1. Создание благоприятного впечатления о компании

2. Привлечение новых клиентов

3. Привлечение новых сотрудников

4. Размещение информации об услугах и их стоимости

5. Упрощение процесса записи на приём

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

1.2 Целевая аудитория сайта

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

Определим основные группы и проиллюстрируем их персонажи.

Основные группы посетителей сайта:

1. Частные клиенты

2. Корпоративные клиенты

3. Сотрудники

4. Партнеры/Соискатели

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

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

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

Придавая облик и имя разрозненным элементам данных, полученным в результате исследования и сегментации пользовательской аудитории, персонажи помогут нам помнить о людях в ходе работы над проектом [1].

Персонаж №1: Частный клиент

ФИО: Голубева Ольга Валерьевна Возраст: 37 лет

Цель: Запись на обследование к тому или иному специалисту.

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

Рисунок 1 - Сценарий взаимодействия с системой

Персонаж №2: Корпоративный клиент

ФИО: Иванов Петр Иванович

Возраст: 42 года

Цель: Записать сотрудников своей компании на ежегодное обязательное медицинское обследование.

Этому посетителю будут интересны спец.предложения для корпоративных клиентов.

Схема взаимодействия пользователя с ресурсом приведена на рисунке 2.

Рисунок 2 - Сценарий взаимодействия с системой

Персонаж №3: Сотрудник

ФИО: Морозова Светлана Сергеевна

Возраст: 49 лет

Цель: Узнать расписание приема на интересующий период.

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

Схема взаимодействия пользователя с ресурсом приведена на рисунке 3.

Рисунок 3 - Сценарий взаимодействия с системой

Персонаж №4: Соискатель

ФИО: Светлов Александр Леонидович

Возраст: 54 года

Цель: Узнать о вакансиях в центре, отправить резюме, записаться на собеседование.

Этому посетителю сайта важно наличие раздела с предложениями по сотрудничеству и трудоустройству.

Схема взаимодействия пользователя с ресурсом приведена на рисунке 2.

Рисунок 4 - Сценарий взаимодействия с системой

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

1.4.1 Создание списка сайтов-конкурентов

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

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

Ключевые слова	Google	Yandex	Rambler
Медицинский центр	http://www.medem.ru/	http://medi-center.ru/	http://medi-center.ru/
Мед центр спб	http://www.medem.ru/	http://medi-center.ru/	http://medi-center.ru/
Частные клиники спб	http://www.medem.ru/	http://www.medilier.ru/	http://www.medilier.ru/
УЗИ спб	http://medi-center.ru/	http://almedcentr.ru/	http://almedcentr.ru/
Ведение беременности спб	http://www.avaclinic.ru/	http://mamadeti.ru/	http://www.emcclinic.ru/

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

Сайт	Кол-во упоминаний в списке
http://medi-center.ru/	5
http://www.medem.ru/	3
http://www.medilier.ru/	2
http://almedcentr.ru/	2
http://www.avaclinic.ru/	1
http://mamadeti.ru/	1
http://www.emcclinic.ru/	1

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

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

Таблица 3 - Особенности главных конкурентов

Сайт	Комментарий
http://medi-center.ru/ (Рисунок 5)	- Структурирование услуг для взрослых и детей; - Быстрая запись; - Возможность вызова врача на дом; - Всплывающие окна с пояснениями, при наведении на услугу; -Цены только отдельным пунктом меню, не указаны в каждой услуге отдельно; -При оформлении использовано минимум 4 разных цвета и в данный момент новогодний фон со снежинками, что отвлекает внимание еще больше.
http://www.medem.ru/ (Рисунок 6)	- На первый взгляд аккуратный, лаконичный дизайн, удачное сочетание голубого и бордового цветов, простой белый фон; -Выпадающее меню с услугами, что не очень удобно; -Услуги структурированы по направлениям, но к ним нет пояснений; -Отдельно цены, услуги и запись. Между собой эти страницы никак не связаны, что затруднит пребывание пользователя на сайте; -Нет выбора даты при записи; -Существует пункт меню «Для врачей»; -Англоязычная версия сайта.
http://www.medilier.ru/ (Рисунок 7)	-Простой дизайн. Сочетание белого и голубого цветов; -На главной странице расположена анимированная картинка-план здания, что отвлекает, т.к.при наведении на то или иное отделение, всплывает его название, но оно не кликабельно; -Есть кнопка «Все услуги» и лаконичное меню справа; -Есть расписание, где можно выбрать дату и промежуток времени и узнать, какие врачи принимают в интересующее время; -Очень много лишней информации в описаниях услуг; -Так и не удалось найти цены на услуги, зато есть виртуальный тур, фотографии клиники и врачей, разные цитаты великих мыслителей на разных страницах.

(Рисунок 5 - www.medi-center.ru)



(Рисунок 6 - www.medem.ru)

(Рисунок 7 - www.medilier.ru)

1.4.3 Анализ сайтов - конкурентов по критериям

Составим список критериев, подходящих для направленности наших сайтов. Оценим соответствие ресурсов-конкурентов данным критериям по пятибалльной шкале (Таблица 4).

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

	medi-center.ru	medem.ru	medilier.ru
Навигация	4	3	2
Цветовое решение	3	5	4
Шрифтовое решение	5	5	5
«Личный кабинет»	0	0	0
Контент	4	3	3
Быстрая запись	5	0	0
Структурированность меню и услуг	5	3	2

1.4.4 Оценка результатов и выводы

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

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

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

2.1 Структурирование контента

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

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

	Уровень 1 (Главная)	Уровень 2	Уровень 3
Глобальное меню	Услуги	Все услуги	Отдельная услуга
	Цены	Разделы цен	Цены отдельного раздела
	Отзывы	Все отзывы	Отдельный отзыв
	Коллектив	Список сотрудников	Отдельный сотрудник
	Сотрудничество/ Вакансии	Список вакансий/ Предложений	Отдельная вакансия/ Предложение
	Личный кабинет
Локальное меню	Детям	Услуги	Отдельная услуга
	Взрослым	Услуги	Отдельная услуга
	Будущим родителям	Услуги	Отдельная услуга
	Старшему поколению	Услуги	Отдельная услуга
	Корпоративным клиентам	Услуги	Отдельная услуга
	Акции и скидки	Все акции и скидки	Отельные предложения
	Вызов врача на дом	Форма вызова врача

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

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

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

Структура проектируемого ресурса представлена на рисунке 8.

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

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

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



Рисунок 9 - Навигация

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

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

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

Ширина сайта - 1024 рх,

Ширина сетки - 100 рх,

Кол-во колонок - 8,

Ширина колонки - 118 рх,

Расстояние между колонками - 8 рх.



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

2.4.2 Прототипы типовых страниц

На основании всего вышеизложенного, приступим к созданию прототипов страниц трех уровней. Для этого были выбраны страницы: «Главная», «Детям», «Услуга». В ходе работы были разработано множество вариантов, набросков и зарисовок (Рисунок 11). После, с помощью Adobe Illustrator, были созданы окончательные статические прототипы трех уровней (Рисунки 12, 13, 14).

Рисунок 11 - Наброски прототипов

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



Рисунок 12 - Прототип первого уровня

Рисунок 13 - Прототип второго уровня



Рисунок 14 - Прототип третьего уровня

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

Учитывая специфику данного ресурса, предусмотрено несколько способов нахождения нужной услуги (через список всех услуг - например, для продвинутых пользователей, или через разделы, упрощающие поиск). Так же точно структурированы и цены. Во время поиска и выбора нужной услуги, клиент может сразу же записаться на прием, выбрав удобный способ: позвонить самому, заказать обратный звонок, заполнить расширенную или быструю форму записи. Так же в описании услуги есть ссылки на профили специалистов, ведущих приём в данной компании, что поможет клиенту быть уверенным в своем выборе. Акции и спец.предложения расположены не только отдельным пунктом в меню, но и по каждому разделу и услуге, поэтому мы можем быть уверенными, что все посетители будут в курсе предложений компании. Раздел отзывов так же поможет привлечь клиентов или внести изменения в работу фирмы.

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

профиль пользователь навигация веб сайт

ЗАКЛЮЧЕНИЕ

В данном проекте представлена разработка и проектирование веб-сайта для медицинского центра, предоставляющего платные услуги.

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

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

Разработанный ресурс удовлетворяет современным тенденциям в области веб-разработки, а именно, теории проектирования опыта взаимодействия.

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

1.Д.Гаррет «Веб-дизайн. Элементы опыта взаимодействия»/Символ-Плюс, 2008г, 192 стр.

2.Алан Купер, Роберт М. Рейманн, Дэвид Кронин «Алан Купер об интерфейсе. Основы проектирования взаимодействия»/Сивол-Плюс, 2009г, 688 стр.

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