Аудит юзабилити мобильной версии медицинского портала

Аудит юзабилити №423

Дата аудита: октябрь 2016 года

Объем отчета: 28 страниц 

 

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

 

Компоновка меню

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

Компоновка меню

Рекомендуем первыми расположить пункты «Главная», «Отделения» и «Цены» первыми в меню.

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

Ошибка в работе меню

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

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

При первой загрузке страницы почти 50% экрана занимает форма с предложением льготной программы.

Ошибки в компоновке формы

При горизонтальной ориентации экрана форма закрывает все окно браузера.

Форма закрывает весь экран

Рекомендуем открывать данную форму не сразу после открытия страницы, а после просмотра определенного количества страниц либо срабатывания таймера (если пользователь на сайте дольше 20-30 секунд).

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

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

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

Ошибки в логотипе

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

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

Ошибки в юзабилити

Ошибки в юзабилити

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

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

Форма на весь экран

Форма на весь экран

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

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

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

Отличается название и информация в верхней части сайта:

Ошибки в текстах сайта

Аудит текстов сайта

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

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

Нет контактной информации

Ошибки в контактнойо информации

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

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

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

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

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

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

Используется разный вертикальный отступ между элементами сайта:

Ошибки в компоновке сайта

Ошибки в компоновке сайта

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

Не выровнено положение левых границ полей формы относительно вертикальной границы:

Ошибки в макете сайта

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

Разный отступ между иконками и границами блока:

Разный отступ

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

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

Ошибки в модуле голосования

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

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

Ошибки в работе формы поиска

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

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

Юзабилити списка отделений клиники

Фото на странице рекомендуем сделать шириной 100% окна браузера. Это придаст дизайну более завершенный и красивый вид.

Ошибки в юзабилити сайта

Ошибки в юзабилити сайта

Нет отступа между фото и текстом в блоке «Врачи».

Нет отступа между фото и текстом

Фото врачей рекомендуем сделать шириной 100% окна браузера.

Ошибки в юзабилити

В нижнем блоке с контактной информацией нет адреса представительства компании в Киеве. Нет отступа между иконками и адресами у email. Сейчас уже конец 2016-го года, а в копирайте указан 2015. Также допущены ошибки в оформлении текстов копирайта. Например, после тире текст написан с большой буквы.

Ошибки в контактной информации

Рекомендуем сделать отступ между иконкой и текстом ссылки в соответствии с модульной сеткой сайта; указать адрес представительства в Киеве (если есть); актуализировать год в копирайте; исправить неверное использование заглавных букв.

Отдельно стоит отметить, что на главной странице расположено очень большое количество текстовой информации, она имеет большую высоту и большую часть контента пользователь просматривать не будет. Рекомендуем рассмотреть возможность сокращения объемов текстов и дизайна страницы в стиле «landing page».

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

Анализ юзабилити формы

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

Далее рассмотрим работу отдельных страниц сайта.

Страница «Врачи»

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

Ошибки в работе вспомогательной навигации

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

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

Ошибки в текстах сайта

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

Страница детального просмотра профиля врача

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

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

Также рекомендуем выводить фото шириной 100% окна браузера.

Нет отступа между нижней границей фото и текстом.

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

Иконка email находится в одной строке, адрес email – в другой. Из-за этого дизайн выглядит неаккуратно.

Номер телефона переносится некорректно.

Аудит юзабилити страницы

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

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

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

Страница «Цены»

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

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

Юзабилити страницы с ценами

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

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

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

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

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

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

Аудит текстов сайта

Страница «Процедуры»

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

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

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

Нет ссылок на страницы с детальным описанием

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

Раздел «ЭКО» не содержит полезной информации:

Пустые разделы сайта

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

Страница «Контакты»

Непонятно, номер факса относится к израильскому офису компании или московскому. Также используется неверный формат номера факса (отсутствует разделитель).

Аудит страницы с контактами клиники

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

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

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

Ошибки в выводе карты

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

Get new case studies by email:

More Case Studies

See all