Аудит юзабилити сайта стоматологической клиники

Вводная информация

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

Перед просмотром дополнительных материалов их желательно скачивать на компьютер.

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

Красным текстом и красными маркерами выделены обнаруженные ошибки и важная информация.

Логотип и слоган

Логотип является важным элементом сайта, т.к. он расположен в верхней части экрана, именно с него начинается зрительный путь пользователя по странице.

Он должен быть уникальным, соответствовать фирменному стилю и направлению деятельности компании.

Кроме этого, общепринятым является размещения рядом с логотипом краткого слогана.

Рассмотрим, насколько выполнены эти требования в данный момент.

Логотип расположен в верхнем левом углу.

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

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

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

Над логотипом есть текст «Мы работаем с 1997 г.», который претендует на роль слогана.

Его положение не согласовано с границами других элементов. Из-за этого дизайн выглядит неаккуратно.

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

Кроме этого, текст слогана имеет достаточно обобщенную формулировку. По нему невозможно понять, чем занимается, и какие услуги предоставляет компания.

Рекомендуем пересмотреть текст слогана и привести его в соответствие со сферой деятельности и услугами клиники.

Общая компоновка макета

Далее рассмотрим вопросы, связанные с общей компоновкой макетов страниц.

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

Рекомендуем обеспечить правильный вывод данного блока на всех страницах сайта.

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

Это подтверждается и данными карты ссылок – переходы по ней в течение года отсутствуют.

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

Рекомендуем пересмотреть компоновку макета и выводить в верхней части номера телефонов и адрес клиники.

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

Рекомендуем полностью убрать этот блок со страниц сайта.

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

Рекомендуем избегать дублирования элементов интерфейса.

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

Но в верхней части сайта первым опубликован московский городской телефон, а на втором месте – телефон с кодом Жуковского. У пользователей по году города 495 может возникнуть ложное представление, что клиника расположена в Москве.

Рекомендуем первым публиковать номер клиники в Жуковском.

На сайте используется фиксированная ширина основного макета в 1000 пикселей. Такое решение является устаревшим и не соответствует современным стандартам.

В результате, при ширине экрана более 1000 пикселей по бокам появляются пустые поля, и пространство страницы используется неэффективно.

По ссылке показан скриншот главной страницы с обозначением таких зон.

Скриншот: https://yadi.sk/i/gPyiVDP53RpMky.

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

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

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

Для примера, по ссылке показан полный скриншот внутренней страницы http://www.atakamed.ru/about/ с обозначением таких зон.

Скришот: https://yadi.sk/i/bz9SnRXe3RpP4m.

Рекомендуем оптимизировать макеты для более эффективного заполнения пространства страниц.

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

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

Навигация по сайту

Качественная навигация по сайту является основой для построения эффективного юзабилити сайта.

Она должна обеспечивать быстрый и простой переход на любую страницу или раздел сайта максимум за 3 клика.

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

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

Ссылки в верхнем меню не реагируют на наведение курсора.

Рекомендуем сделать данные элементы интерактивными и менять их оформление при наведении курсора.

При переходе по ним не выделяется текущий раздел сайта. Невозможно понять, в каком разделе сайта находится пользователь в конкретный момент.

Рекомендуем явно выделять текущий раздел сайта в меню.

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

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

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

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

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

Аналогичная проблема наблюдается и с синим фоном в выпадающем меню второго уровня.

Рекомендуем использовать сплошной фон для выпадающих меню.

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

Рекомендуем явно выделять текущий раздел сайта в выпадающих меню.

Далее рассмотрим работу меню «Услуги».

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

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

Рекомендуем полностью пересмотреть дизайн и принцип работы меню услуг. Необходимо обозначить наличие подразделов графическими маркерами и выводить подменю при наведении курсора. Это позволит пользователю видеть список всех услуг и быстро перейти к необходимой странице.

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

Скриншот: https://yadi.sk/i/Zku_7CSL3RqeSC.

На главной странице «Услуги» какой-либо контент в центральной части полностью отсутствует.

Вспомогательная навигация

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

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

Непонятно, для чего первым пунктом в цепочке вместо короткой ссылки «Главная» выводится длинный текст «атака стоматологическая поликлиника».

В результате, на некоторых страницах текст навигационной цепочки получается слишком длинным и разрывается на две строки. Например, на странице http://atakamed.ru/facility/orthopaedy/stationary_prosthesis/zirconia_ceramics/:

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

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

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

Рекомендуем выводить название текущего раздела в виде обычного текста без ссылки.

Главная страница

Адрес страницы: http://www.atakamed.ru.

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

Непонятно, это ссылки или текст.

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

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

Рекомендуем применять подчеркивание только для ссылок.

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

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

Цветовое оформление данных элементов не соответствует общему стилю сайта. В результате дизайн выглядит неаккуратно.

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

Скриншот: https://yadi.sk/i/VB3D-Ylq3Rqmdr.

На странице отсутствует такая критически важная для пользователя информация, как:

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

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

О клинике

Адрес страницы: http://atakamed.ru/about/.

Основную часть страницы занимает большой текстовый блок.

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

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

Скриншот: https://yadi.sk/i/9kl9r8hj3Rqn5Z.

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

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

Рекомендуем перенести блок со ссылками в верхнюю часть страницы.

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

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

Новости клиники

Адрес страницы: http://atakamed.ru/about/news/.

На странице размещено всего 4 устаревших новости за 2010, 2013, 2014 и 2016 года.

Скриншот: https://yadi.sk/i/ghxHH-cW3Rqnnz.

Рекомендуем актуализировать новостную ленту на сайте и убрать старые публикации в архив.

Ссылки и текст оформлены одинаково.

Рекомендуем явно выделять ссылки при помощи подчеркивания.

Текст на изображениях сертификатов невозможно прочитать.

Рекомендуем использовать на сайте только качественные иллюстрации и фото.

Непонятно, для чего дублируется текст в новостях:

На страницах детального просмотра новостей используется совершенно разное оформление основного текста. Из-за этого дизайн раздела выглядит неаккуратно.

Рекомендуем привести оформление всех страниц детального просмотра новостей к единому стилю.

Лицензии и награды

Адрес страницы: http://atakamed.ru/about/licence/.

На странице нет названия и описания каждой конкретной лицензии. Вместо этого просто дублируется текст «Лицензия №1», «Лицензия №2», «Лицензия №3». Это крайне отрицательно сказывается на юзабилити.

Рекомендуем выводить полное название лицензии и ее краткое описание.

Открыть просмотр лицензии можно только при клике на миниатюру. Название лицензии сделано обычным текстом.

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

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

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

Скриншот: https://yadi.sk/i/DgcpyLWi3Rr2kP.

Рекомендуем использовать для просмотра увеличенных фото современные скрипты. Обзор возможных вариантов реализации и их возможности можно узнать по ссылке https://ruseller.com/lessons.php?id=1425&rub=32.

Экскурсия по клинике

Адрес страницы: http://atakamed.ru/about/photo/.

На странице размещено всего 7 фотографий. Дизайн страницы не проработан, не согласован размер изображений. Это отрицательно сказывается на юзабилити.

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

Отдельно стоит отметить низкое качество фотографий и отсутствие детального описания.

Рекомендуем опубликовать на сайте 40-50 профессиональных фотографий клиники с описанием.

Также рекомендуем рассмотреть возможность создания и публикации на сайте виртуального 3D-тура.

Зуботехническая лаборатория

Адрес страницы: http://atakamed.ru/about/laboratory/.

На странице размещено минимальное количество информации.

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

Возможность просмотра увеличенных фото отсутствует.

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

Оснащение

Адрес страницы: http://atakamed.ru/about/equipment/.

На странице присутствует минимальное количество текстовой информации.

Ссылки оформлены как обычный текст:

Рекомендуем явно выделять ссылки при помощи подчеркивания.

На страницах «Оборудование» и «Рентген» опубликован сухой текст без разбивки на логические блоки, заголовков, иллюстраций, характеристик и фотографий оборудования. Это приводит к снижению эффективности страниц.

Страница «Стерилизация» http://www.atakamed.ru/about/equipment/sterilization/ в данный момент опубликована на сайте, но не содержит никакой полезной информации.

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

Наши цены

Адрес страницы: http://atakamed.ru/about/price/.

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

Рекомендуем полностью пересмотреть реализацию раздела и выводить информацию о ценах и форме оплаты на одной странице.

Прайс-лист

Адрес страницы: http://atakamed.ru/about/price/price/.

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

Рекомендуем актуализировать прайс-лист.

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

Рекомендуем опубликовать максимально полный прайс с детальной информацией о ценах и услугах.

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

Скриншот: https://yadi.sk/i/O-hKT-Mq3Rr55x.

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

Рекомендуем выводить прайс в виде таблиц с перечнем услуг, ценой и ссылками на страницы с детальным описанием.

Форма оплаты

Адрес страницы: http://atakamed.ru/about/price/pay/.

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

Как говорилось выше, рекомендуем выводить информацию о формах оплаты непосредственно на странице с прайс-листом.

Реквизиты клиники

Адрес страницы: http://atakamed.ru/about/recvisits/.

Тип и размер шрифта, а также стиль оформления текста не соответствуют общей стилистике сайта.

Скриншот: https://yadi.sk/i/u5OaQFy03Rr5S4.

Рекомендуем привести оформление страницы к общему стилю сайта.

Вопросы-ответы

Адрес страницы: http://atakamed.ru/about/faq/.

В данный момент страница не содержит никакой информации.

Рекомендуем скрыть данный раздел от пользователей сайта.

Услуги

Далее рассмотрим юзабилити страниц раздела «Услуги». Их оформление и функционал являются типовыми, поэтому ошибки, замечания и рекомендации будут верны для всех подстраниц раздела.

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

Кроме этого, нет явного указания цены (или диапазона цен) на конкретный вид лечения. Это крайне негативно сказывается на маркетинговой эффективности сайта.

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

Текст оформлен как ссылка, хотя таковым не является.

На странице «Украшения для зубов» http://atakamed.ru/facility/decoration/ есть только два изображения без какого-либо текстового описания особенностей услуги. Это отрицательно сказывается на эффективности страницы.

Рекомендуем публиковать текстовое описание на всех страницах услуг.

Врачи

Адрес страницы: http://atakamed.ru/dentistry/.

Непонятно, это ссылки или текст:

Рекомендуем явно выделять ссылки при помощи подчеркивания.

Ссылки не реагируют на наведение курсора.

Рекомендуем сделать данные элементы интерактивными.

Страницы просмотра информации о врачах имею ряд недоработок:

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

Рекомендуем унифицировать состав и оформление информации о врачах и опубликовать ее для всех специалистов.

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

Рекомендуем сделать профессиональную фотосессию врачей и специалистов и использовать только высококачественные фото на всех страницах сайта.

Наши работы

Адрес страницы: http://atakamed.ru/projects/.

Не согласована ширина фона заголовков и соответствующих фотографий.

Рекомендуем привести к единому значению ширину фотографий и заголовков.

Нет возможности просмотра увеличенных фотографий.

Рекомендуем добавить скрипт просмотра увеличенного фото.

Ссылки на детальное описание предоставленных услуг есть только для трех нижних работ.

Рекомендуем добавить ссылки на детальное описание всех работ в портфолио клиники.

Пациенту

Далее рассмотрены подстраницы раздела http://atakamed.ru/patient/.

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

Скриншот: https://yadi.sk/i/vbd6djDQ3RrDeh.

Оформление текста на странице http://www.atakamed.ru/patient/guarantee/ не соответствует общему стилю оформления сайта. Одинаковые текстовые блоки оформлены по-разному. Используется разный размер и тип шрифта, выравнивание отступы и т.д. В результате дизайн выглядит не согласованно.

Полный скриншот страницы «Гарантии на лечение» показан по ссылке https://yadi.sk/d/OPYv2Suw3RrED4.

Рекомендуем привести оформление страницы в соответствие с общей стилистикой сайта.

В разделе «Скидки» http://www.atakamed.ru/patient/reduction/ есть только сообщение, что скидки не предоставляются. Публикация такого раздела будет иметь скорее негативный эффект, чем позитивный, т.к. не способствует формированию лояльности потенциальных клиентов к услугам клиники.

Рекомендуем полностью скрыть данный раздел с сайта.

На странице «Статьи» http://www.atakamed.ru/patient/articles/ также допущен ряд ошибок.

Не согласован размер изображений. Дизайн выглядит неаккуратно.

Рекомендуем привести размер изображений к единому формату.

Для части статей отсутствует текст анонса.

Рекомендуем публиковать анонсы для всех статей.

Непонятно, что это за элемент интерфейса и какую функцию он выполняет:

Кроме этого, не проработан дизайн страниц просмотра публикаций.

Например, на странице http://www.atakamed.ru/patient/articles/131/ отсутствует одна из иллюстраций.

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

На странице «Правовая информация» какой-либо контент в данный момент полностью отсутствует.

Рекомендуем либо добавить соответствующую информацию, либо убрать страницу с сайта.

Справочник терминов

Адрес страницы: http://atakamed.ru/guide/.

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

Скриншот: https://yadi.sk/i/uKyiYEBX3RrGSz.

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

Страховым компаниям

Адрес страницы: http://atakamed.ru/insurance/.

На странице размещено минимальное количество контента.

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

Рекомендуем разместить на странице текст объемом 2-3 тысячи символов с описанием ключевых преимуществ сотрудничества с клиникой.

Наши контакты

Адрес страницы: http://atakamed.ru/contacts/.

Для связи используется адрес электронной почты, размещенный на бесплатном почтовом сервисе Яндекса. Такое решение является неоптимальным для официального сайта клиники.

Рекомендуем использовать корпоративный адрес почты, привязанный к доменному имени сайта. Например, info@atkamed.ru.

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

Рекомендуем добавить форму обратной связи на страницу «Контакты».

Неэффективно реализована схема проезда. Используется всплывающее окно с большим текстовым описанием и статичной картинкой. Это отрицательно сказывается на юзабилити.

Рекомендуем использовать современные интерактивные схемы проезда на базе сервиса Яндекс.Карты.

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

Рекомендуем явно выделить номера телефонов, например, при помощи увеличенного размера шрифтов.

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

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

Рекомендуем добавить комплексный сервис онлайн-чата и заказа звонков. Например, https://envybox.io/ или аналогичный.

Общие итоги и выводы

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

1. Дизайн и используемые решения не соответствуют современным тенденциям, требованиям и стандартам.
2. Сайт не оптимизирован для работы на мобильных устройствах.
3. Не проработано информационное наполнение. Большая часть контента устарела либо является неполной.
4. Навигация по сайту неочевидна и сложна.
5. Отсутствуют инструменты для обратной связи с пользователем.

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

Это позволит повысить эффективность сайта, увеличить количество трафика и конверсию посетителей сайта в пациентов клиники.

Полезные ссылки и ресурсы

	Крупнейший регистратор доменных имен REG.RU Регистрация и продление доменных имен в любых зонах.
	Ведущий хостинг-провайдер BEGET.RU Хостинг, аренда серверов, регистрация доменов.
	Сервис тестирования юзабилити реальными пользователями Отбор и анкетирование целевой аудитории сайта.
	Сервис мониторинга, анализа и оценки эффективности поискового продвижения. Съем и отслеживание позиций сайта, работа с семантическим ядром.
	Сервис копирайтинга и рерайтинга текстов. Заказ текстов для сайта любой сложности. Покупка готовых текстов и заказ уникальных статей на нужную тему.
	Сервис автоматизации продвижения сайта и рекламы в интернете. Подбор и покупка ссылок, оптимизация контекстной рекламы.
	26 000 готовых премиум-шаблонов для сайтов Высококачественные шаблоны для любых сайтов, материалы для дизайна сайта.
	Крупнейшая фриланс-биржа Сервис удаленной работы.