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

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

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

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

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

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

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

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

Преподаватель Радевич С.П.

Студент (ка) гр. ИСТ-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: Частный клиент

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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 стр.