UX-аудит и доработки сайта для клиники «Медиаль»

Описание

«Медиаль» – современный медицинский центр, который помогает пациентам с проблемами в области урологии, флебологии, гинекологии. Там проводят операции по ОМС для жителей всех городов РФ. Клиника оснащена уникальным оборудованием, не имеющим аналогов в близлежащих регионах, поэтому в медцентр на операции и обследования едут из других городов.

Задачи

До этого мы уже работали с клиникой «Медиаль». Провели исследование аудитории и составили Touchpoint Map. По его результатам порекомендовали медцентру сделать UX-аудит сайта. Это помогло бы определить, насколько сайт удобен и понятен пользователю, внушает ли он доверие, быстро ли загружается. Все эти факторы напрямую влияют на конверсию, то есть помогают решить бизнес-задачу клиента – увеличить число записей на первичный прием онлайн.

Для решения этой бизнес-задачи нужно было:

• проанализировать имеющиеся проблемы с UX;
• выявить, что мешает пользователю эффективно взаимодействовать с сайтом;
• сформировать список рекомендаций для повышения конверсии.

Мы, в свою очередь, определили для себя подзадачи:

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

Решение

Мы разделили аналитику на три этапа:

• анализ скорости загрузки сайта,
• исследование данных в Яндекс. Метрике,
• экспертный анализ страниц.

Анализ скорости загрузки

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

Мы выяснили, что скорость загрузки сайта медиаль.рф на мобильных устройствах была критически низкой – всего 20 баллов из 100.

На десктопной версии скорость составляла 32 балла из 100.

Было важно улучшить скорость загрузки, особенно на мобильных устройствах, так как по данным Яндекс.Метрики мобильный трафик на медиаль.рф составляет около 75%.

Анализ данных в Яндекс. Метрике

Для анализа мы взяли данные за 5 месяцев: с 1 июня 2021 года по 31 октября 2021 года. В кейсе опишем лишь самые важные параметры.

1. Путь пользователя на сайте
   • Мы выяснили, что посетители сайта, в основном, интересуются услугами клиники. 30% аудитории ищут информацию в разделе «Направления», 22% смотрят цены, 12% заходят в раздел «Контакты».
   • Половина пользователей проводит на сайте не дольше 15 секунд. Только 40% открывают две и более страницы.
   • Такие низкие показатели могут быть связаны с долгой загрузкой сайта или некачественным трафиком. Также пользователям может быть неудобна главная страница сайта.
2. Источники трафика

• Основной источник трафика на момент анализа – переходы по рекламе (65%).
• Также много пользователей попадали на сайт из поиска (в равных долях из Яндекса и Google) и по ссылкам на сторонних ресурсах. Трафик шел с igis, 2gis, Яндекс.Карт и prodoktorov.
• Значительную долю трафика составляли переходы по рекламе, что напрямую влияло на показатели метрики. Так как параметры рекламного трафика настраиваются вручную, это искажает представление об органической аудитории сайта. Мы учли это на следующем этапе при анализе количества посетителей из поисковой выдачи.

3. Возраст и пол посетителей сайта

Исключив рекламный трафик, мы получили такой результат:

• Выяснили, что средний возраст посетителей сайта – от 25 до 34 лет.
• Аудитория в равной мере представлена и мужчинами, и женщинами.

4. География

• Клиника «Медиаль» находится в Ижевске.
• Анализ показал, что 56% трафика – это жители Ижевска, 28% – городов с населением свыше 1 млн. (Москва, Казань, Нижний Новгород и т.д.), остальной процент – из малых соседних городов и деревень.
• Большой поток пациентов идет из других регионов. А значит, задача рекламы – продвигать услуги клиники не только в Ижевске, но и за его пределами.

5. Устройства

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

6. Цели

В Яндекс.Метрике были установлены автоматические цели на звонок. Конверсия на момент анализа составляла 2,9%.

Мы рекомендовали для отслеживания событий установить другие цели:

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

7. Вебвизор и карта кликов

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

• Самыми популярными страницами оказались «О нас», «Цены» и «Контакты». Их проработке стоит уделить больше внимания.
• Также анализ обнаружил некоторые востребованные разделы, которые спрятаны в подменю – «Врачи», «Урология», «Хирургия». Их стоит вынести в меню сайта, чтобы они были на виду.

Экспертный анализ страниц

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

К примеру, главная страница на десктопе выглядела так:

Вот некоторые важные моменты, которые мы предложили исправить:

• Перенести иконку с глазом в другую часть хедера, потому что создается ложное впечатление, что глаз является частью логотипа.
• В режиме «Для слабовидящих» большая часть контента становится нечитабельна. Если пользователь переключился на эту версию по ошибке, то, скорее всего, он покинет сайт. Стоит сделать доработки согласно веб-доступности для людей с ограниченными возможностями.
• Убрать ссылку с логотипа на главной странице. При клике происходит ненужная перезагрузка этой же страницы. С точки зрения SEO таких ссылок следует избегать. Но нужно проверить, чтобы на всех внутренних страницах ссылка продолжала работать.
• Добавить поиск в хедер, чтобы пользователь мог быстро найти нужную информацию.
• Отказаться в меню от написания букв в верхнем регистре. Капслок в веб-пространстве воспринимается агрессивно. Кроме того, контрастность шрифта становится меньше, такие слова сложнее читать.
• Переработать информационную архитектуру сайта и пересмотреть страницы в разделе «О нас». Возможно, отказаться от ненужных подразделов, например, «Структура». Раздел «Врачи», наоборот, вынести в основное меню, так как он популярен у пользователей.
• На момент анализа карточка с направлением работы была кликабельна не полностью. Перейти в раздел можно было, только нажав на верхний угол картинки.

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

• Перенести приветственное слово директора в раздел «О нас». Исходя из карты скролла видно, что пользователям не интересна эта информация на главной странице, они пролистывают ее за 0:02 сек. Лучше в этом блоке разместить инфографику. Так будет проще донести информацию о преимуществах и уникальности клиники.

Такие недочеты мы обнаружили на главной странице в мобильной версии:

Наши рекомендации звучали таким образом:

• На первом экране «едет» верстка баннера. Это следует поправить.
• Хедер стоит закрепить наверху страницы, чтобы при скролле он всегда был доступен.
• Баннеры нельзя пролистывать свайпом. Это можно сделать, только нажимая на точки. Стоит исправить недочет, так как пальцем крайне сложно попасть в точку на небольшом экране смартфона.
• В выпадающем меню цвет текста критически низкой контрастности. Нужно повысить ее до адекватных значений, минимум 4,5.
• В футере разместить форму «Подписаться на рассылку», чтобы не отправлять пользователя на другую страницу. Так можно увеличить количество подписок.

А вот выдержки из общих выводов к главной странице:

• Сайту не хватает трастовости, то есть причин, по которым можно доверять клинике и специалистам. Рекомендуем добавить блок с отзывами. Так как услуги специфичны, и пациентам не всегда комфортно писать об этом, можно предлагать им при отправке отзыва оставлять только имя и дату.
• Новости на странице датированы 2018-2019 годами. Желательно разместить актуальные статьи, чтобы сайт выглядел «свежим».
• На сайте нет целевого действия. В конце главной страницы рекомендуем поставить блок с кнопкой CTA, чтобы замотивировать пользователя совершить определённое действие – позвонить либо оставить заявку.

Подобный разбор мы провели по всем остальным разделам сайта: «Направления», «Страница болезни», «Цены» и другим. Составили перечень исправлений и взяли их в работу.

Доработки сайта

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

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

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

Как мы решили эти проблемы:

Неоптимальный код

Сервис Pagespeed, при помощи которого мы проводили аудит сайта, выдал определенные рекомендации по ускорению. Среди них:

• включить сжатие текста,
• устранить ресурсы, блокирующие отображение,
• удалить неиспользуемые коды JS и CSS.

При детальном изучении кода наши разработчики выявили следующее: сайт был создан на конструкторе Wordpress. При разработке использовались стандартные шаблоны и плагины. Все это «тянуло» много неиспользуемого кода JavaScript и CSS, что и задерживало загрузку. По этой причине сайт было трудно поддерживать. Также было сложно внедрять на нем новый функционал.

Артем Охотников, frontend-разработчик:

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

В итоге получили такие результаты.

На декстопе:

На мобилке:

Скорость загрузки сайта на десктопной версии выросла более чем в 2,5 раза, на мобильной версии – более чем в 3 раза.

Отсутствие макетов

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

К примеру, UX-аудит выявил недочеты в форме обратной связи на странице «Урология»:

• «поехала» верстка,
• отсутствовали видимые поля для ввода информации.

На карте кликов было видно, что пользователи пытались кликнуть на «ФИО», но от формы не было отклика, не появлялось поле для ввода информации. Форму нужно было доработать, сделать понятной и удобной для заполнения.

Также на странице сместились вниз карточки с направлениями урологии.

Мы посоветовали уменьшить карточки и сделать их логичным продолжением текста.

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

На исправление этих недочетов дизайнер потратил 3 часа. Имей он на руках рабочие макеты, это заняло бы у него в 2 раза меньше времени.

Результаты

• Мы провели UX-аудит сайта, проанализировали данные Яндекс.Метрики и дали экспертный анализ страниц.
• Выявили основные проблемы и небольшие недочеты, провели доработки сайта.
• Это позволило кардинально улучшить некоторые показатели. К примеру, скорость загрузки сайта на мобильной и десктопной версиях выросла в среднем три раза.

Выводы

• Многие ошибочно считают: если сайт собран из готовых плагинов для Wordpress, это упрощает разработку и сокращает количество часов на его создание. Но по факту желание сэкономить часто выливается в проблемы с UX и скоростью загрузки, влияющей на функциональность сайта и его конверсию.
  При этом также могут страдать дизайн и фирменный стиль бренда.
• В целом, при разработке сайта стоит следовать таким принципам:
  • Если задача сайта – собирать лиды, лучше не использовать плагины для Wordpress, так как это может замедлять работу веб-ресурса, что скажется и на конверсии.
  • Если задача – рассказать о продукте/услуге/компании, то есть это корпоративный сайт или сайт-визитка, то можно безболезненно применять шаблоны.

Над проектом работали

Анна Моисеева
Руководитель проектов

Сумбель Низамова
Руководитель проектов

Мария Стех
Ведущий UX-дизайнер

Дмитрий Стяжкин
Аналитик

Артем Охотников
Frontend-разработчик

Александр Страминский
Дизайнер

Константин Клименко
Backend-разработчик

Отзывы