Московский многопрофильный клинический центр «Коммунарка»
Удобство с соблюдением всех нужных требований
Московский многопрофильный клинический центр «Коммунарка»
Московский многопрофильный клинический центр «Коммунарка»
Удобство с соблюдением всех нужных требований
К сайтам медицинских центров всегда много требований: это и версия для слабовидящих, и обязательные баннеры от МинЗдрава, и перечень специалистов, привязанных к разным направлениям и отделениям, а ещё формы записи, прайс-листы и прочие нужности для пациентов.
Из-за огромного объема информации на таких сайтах часто получается путаница, от которой в конечном счете страдает пользователь. Старый сайт ММКЦ «Коммунарка» — не исключение. Поэтому на проекте для этого заказчика мы прокладывали путь сквозь тернии к звездам, собирая структуру заново и максимально улучшая юзабилити.
Из-за огромного объема информации на таких сайтах часто получается путаница, от которой в конечном счете страдает пользователь. Старый сайт ММКЦ «Коммунарка» — не исключение. Поэтому на проекте для этого заказчика мы прокладывали путь сквозь тернии к звездам, собирая структуру заново и максимально улучшая юзабилити.
- ММКЦ «Коммунарка» — многопрофильный медицинский центр в Москве с внушительным штатом докторов, которые принимают пациентов по направлениям из поликлиник бесплатно и всех желающих — платно. Основной профиль — онкология, но также есть диагностика и лечение других заболеваний, женские консультации, стационарное лечение и даже перинатальный центр для малышей.
Чистый дизайн
Современный и стильный логотип заказчика задал цвета и формы всего проекта. За основу мы взяли светло-голубой, добавили немного ярко-розовых акцентов и приправили всё это большим количеством свободного пространства. Получилось свежо, ненавязчиво и в соответствии с лучшими традициями сайтов медицинской сферы.
дизайн сайта медицинского центра
Глеб
Дизайнер
— Элементы логотипа задали стиль проекта — даже 404-ю страницу мы сделали на их основе в брендированных цветах.
Заказчик предоставил масштабные фотографии зданий всех своих подразделений, которые мы использовали для промо-экранов. В качестве дизайн-приема использовали переход неба на фото в фон самого сайта, тем самым легко и эффектно интегрируя изображения в интерфейс.
Заказчик предоставил масштабные фотографии зданий всех своих подразделений, которые мы использовали для промо-экранов. В качестве дизайн-приема использовали переход неба на фото в фон самого сайта, тем самым легко и эффектно интегрируя изображения в интерфейс.
Соблюдение требований
Диана
Руководитель проекта
— Требования к сайтам медицинских организаций — данность, с которой приходится идти на компромиссы. Нам было важно учесть эти требования, но при этом не превратить сайт в кашу, сохранить юзабилити, не пестрить разношерстными баннерами от МинЗдрава (которые нельзя изменять) и не плодить лишних информационных страниц.
Чтобы сайт смотрелся аккуратно, но при этом соответствовал всем нормативам, мы:
- Отправили обязательные баннеры в специальные мини-слайдеры внизу главной страницы: один из них кликабельный, второй нет. Это решило проблему визуального шума.
- Детально проработали форму поиска специалиста среди перечня из 2000+ врачей, медсестер и других работников клинического центра.
Диана
Руководитель проекта
— На странице с поиском специалиста мы предусмотрели фильтр с 4 параметрами и поиск по ФИО. На детальной странице доктора есть подробная информация о нем: должность, образования, специализация. Всё по требованиям!
Понятная навигация для пользователей
Чтобы пользователь смог легко разобраться в услугах медицинского центра «Коммунарка», найти нужного специалиста и прийти на приём точно по адресу, мы хорошенько поработали над структурой и навигацией на сайте.
Чёткая структура
На главной странице сайта пользователя встречает перечень направлений, по клику на каждое из которых он проваливается в отдельную карточку. Внутри — список подразделений и отделений с точными адресами.
Диана
Руководитель проекта
— У заказчика — сложная структура отделений, подразделений и направлений. Примерно такая же, как в старой сказке о Кащее, где в зайце — утка, в утке — яйцо, в яйце — игла. В подразделениях есть направления, в направлениях — отделения, но отделения также есть и в подразделениях. Такая вот медицинская задачка со звёздочкой, которую мы всё-таки решили :)
Вместе с заказчиком мы составили огромную таблицу соответствий — чтобы ничего не забыть и всё структурно связать. В итоге у нас есть сущность «Отделение», которую можно сгруппировать либо по «Подразделениям», либо по «Направлениям».
Чтобы не путать пользователей, список отделений мы отдельно не показываем. Найти нужное отделение можно внутри подразделений или направлений.
Вместе с заказчиком мы составили огромную таблицу соответствий — чтобы ничего не забыть и всё структурно связать. В итоге у нас есть сущность «Отделение», которую можно сгруппировать либо по «Подразделениям», либо по «Направлениям».
Чтобы не путать пользователей, список отделений мы отдельно не показываем. Найти нужное отделение можно внутри подразделений или направлений.
На сайте много вложенных разделов, которые нужны для соблюдения требований к сайтам медицинских организаций. Их мы сгруппировали и предусмотрели дополнительное меню на родительской странице, которое не загромождает основное меню сайта и не дает запутаться в контенте ни пользователям, ни проверяющим органам.
Евгений
Разработчик
— Меню для текстовых страниц настраивается контент-менеджером: он может группировать любые страницы в аккуратные группы, количество групп при этом не ограничено.
Дополнительную навигацию предусмотрели даже в прайс-листе: по клику на раздел открываются конкретные виды услуг с привязкой к отделениям. Там же легко записаться на приём, заполнив простую форму.
Интерактивная карта
Чтобы пользователь не заблудился на внушительной территории центра, мы сделали интерактивную карту сразу на главной странице. По клику на здание появляется его карточка, в которой есть информация: что это за подразделение, как с ним можно связаться и какие часы работы, а также какие отделения внутри.
Диана
Руководитель проекта
— На этапе дизайна мы получили классный рендер от заказчика, на основе которого сделали карту. На интерактивной карте точками и цветом отмечены корпуса центра, по клику на них открывается подробная информация о подразделении. Поскольку на территории центра несколько входов, опираясь на карту, пользователь ни за что не заблудится.
Евгений
Разработчик
— В админке сайта можно добавлять/удалять/перемещать пины на изображении, задавать цвета самих пинов и цвет выделения здания. А еще без проблем можно менять саму картинку-подложку.
«Умная» страница контактов
Не все подразделения и отделения ММКЦ «Коммунарка» находятся в одном месте: некоторые разбросаны по городу (например, женские консультации). Чтобы пользователи не путались, карта на странице контактов меняет положение при скролле, показывая пином точное расположение каждого подразделения и отделения. Не заблудишься!
Диана
Руководитель проекта
— Чтобы контент-менеджерам «Коммунарки» было удобно добавлять и редактировать данные на странице контактов, мы сделали гибкие настройки для вывода отделений и подразделений на этой странице. Например, все отделения стационара находятся по одному адресу — поэтому их можно не выводить по отдельности, а задать им один общий адрес стационара. А вот для женских консультаций, разбросанных по Москве, легко указать отдельные контакты.
Готовый проект
