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

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

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

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

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

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

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

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

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

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

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

В данный момент это требование выполнено. Логотип сделан ссылкой на главную страницу.

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

Рекомендуем рассмотреть возможность использования в качестве логотипа названия компании «Услуга переезд» с сохранением общего стиля оформления логотипа.

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

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

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

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

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

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

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

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

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

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

Согласно данным карты ссылок, самый популярный раздел – услуги, но ссылка на него расположена предпоследней в главном меню.

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

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

При переходе по меню услуг не подсвечивается текущий раздел сайта.

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

На странице «Перевозка грузов» http://www.uslugapereezd.ru/gruzoperevozki/ есть меню для выбора автомобиля в соответствии с массой груза. Текущий раздел выделяется изменением фонового изображения, но оно недостаточно контрастно по отношению к обычному. Сложно понять, какой из разделов является активным.

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

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

Например, при переходе в раздел «Отзывы клиентов» http://www.uslugapereezd.ru/pereezd-ofisa/otzyvy/ подсвечивается раздел «Услуги», хотя логически эта страница является подразделом «О нас».

При переходе в разделы «Новости» или «Вопрос ответ» также теряется подсветка ссылки «О нас» в главном меню.

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

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

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

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

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

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

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

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

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

Оформление ссылок

Большое количество ссылок на сайте оформлено как обычный текст. Ниже приведены скриншоты таких элементов.

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

Часть ссылок не реагирует на наведение курсора. Это отрицательно сказывается на юзабилити. Пример можно увидеть по ссылке https://yadi.sk/i/dQQQyg6y3NmpDE. Ниже приведены скриншоты таких элементов.

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

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

Работа форм

Далее рассмотрим юзабилити и работу элементов форм, т.к. именно они оказывают существенное влияние на конверсию сайта.

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

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

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

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

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

Нет проверки правильности ввода данных. Удалось успешно отправить заявку с числовыми значениями в поле «Ваше имя».

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

Дизайн страницы с подтверждением отправки формы не проработан. В центральной части есть только краткое информационное сообщение. Основное пространство страницы не содержит полезной для пользователя информации. Полный скриншот приведен по ссылке https://yadi.sk/i/arYRd3BV3NmrJT.

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

Далее рассмотрим работу формы для создания заявки на переезд. Ее полный скриншот приведен по ссылке https://yadi.sk/i/VquKFMc93NmsSp.

В целом, компоновка страницы выпонена неэффективно. Более половины занимает пустое пространство, не содержащее полезной информации. Скриншот показан по ссылке https://yadi.sk/i/VU2eoNJ_3NnEdW

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

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

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

Ниже приведены скриншоты полей с избыточной шириной:

Поле с адресом сделано слишком маленьким. Например, в него не помещается реальный московский адрес «Центральный проезд Хорошёвского Серебряного Бора, 74, корпус 2, квартира 30».

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

Выбор времени и даты обычно делают с помощью модуля календаря – это позволяет использовать единый формат даты и времени, а также производить дополнительную программную обработку полей формы (например, автоматически вносить заказ в CRM компании).

Пример одного из удачных вариантов модуля выбора даты и времени показано по ссылке https://yadi.sk/i/sqC3zuFr3NnGgM

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

Шрифт в списке имущества отличается от используемого в других элементах формы заказа:

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

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

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

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

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

Дизайн страницы подтверждения заявки не проработан. Основную часть страницы занимает пустой блок, не содержащий полезной информации. Полный скриншот показан по ссылке https://yadi.sk/i/ZmebqlqN3NnJLV.

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

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

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

Калькулятор переезда

http://www.uslugapereezd.ru/calc/

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

Не согласована высота блоков:

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

В списке автомобилей представлены не все варианты автотранспорта, доступного для заказа. Например, на странице «Перевозка грузов» http://www.uslugapereezd.ru/gruzoperevozki/ есть информация о большегрузном транспорте МАЗ, Мерседес и евро-фур.

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

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

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

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

 

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

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

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

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

Нет проверки правильности ввода данных. Удалось успешно отправить заявку с некорректными данными в полях.

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

После отправки форма не закрывается и возможна попытка повторная отправка. Только после этого появляется соответствующее информационное сообщение.

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

Поиск по сайту

Согласно данным открытых источников, например, https://retailrocket.ru/blog/tri-vazhnyih-kpi-vnutrennego-poiska-dlya-internet-magazina/, достаточно большое количество пользователей сайтов предпочитают использовать поиск в качестве основного способа навигации по сайту.

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

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

Например, ссылка на страницу с описанием процесса и ценой перевозки пианино и роялей находится в самом низу страницы «Цены» и ее сложно найти.

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

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

http://www.uslugapereezd.ru/

Далее рассмотрим дизайн, юзабилити и работу элементов главной страницы сайта.

На главной странице есть кнопка «Заказать переезд». Но при ее нажатии открывается страница с адресом http://www.uslugapereezd.ru/pereezd-ofisa/zakazat-ofisnyj-pereezd/. Это форма заказа переезда офиса. Такое решение не соответствует целям клиентов, которым нужен переезд квартиры или дачный переезд.

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

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

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

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

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

При нажатии на акцию открывается страница http://www.uslugapereezd.ru/pereezd-ofisa/skidki/. Ее дизайн также не проработан, вся информация об акциях подается в обычном текстовом виде и сложна для восприятия. Полный скриншот показан по ссылке https://yadi.sk/d/yQ1wJDPk3NnYz4.

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

Цены

http://www.uslugapereezd.ru/price/

Дизайн страницы с ценами в данный момент не проработан.

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

Не выделены заголовки столбцов таблицы:

Не выделены заголовки строк таблицы:

Не согласована величина верхнего и нижнего отступа у заголовков:

В верхней части страницы нет ссылок для быстрого перехода к нужной таблице с ценами (например, «Хранение личных вещей»). Это отрицательно сказывается на юзабилити, т.к. страница имеет достаточно большую общую высоту. Ее полный скриншот показан по ссылке https://yadi.sk/i/KqoCKBgO3NnaQT

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

Контакты

http://www.uslugapereezd.ru/contact/

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

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

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

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

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

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

Кроме этого, на странице нет таких общепринятых элементов как:

1. Ссылки на профили компании в социальных сетях и сервисах;
2. Онлайн-чата для прямого общения с менеджером;
3. Кнопки для заказа обратного звонка;
4. Возможности звонка с сайта;
5. Возможности связи с помощью широко распространенных мессенджеров. Например, Viber, Skype, WhatsApp, Telegram.

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

Услуги (главная страница)

http://www.uslugapereezd.ru/uslugi/

Дизайн этой важной страницы не проработан.

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

При этом на других страницах сайта списки услуг имеют довольно качественное оформление:

Пространство страницы используется неэффективно, ее основную часть занимает пустой блок. Полный скриншот показан по ссылке https://yadi.sk/i/-46uhP533NneqV.

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

О нас

На главной странице есть меню для перехода в подстраницы раздела.

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

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

404-я страница.

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

Сейчас на сайте такой страницы нет. Вместо нее выводится главная страница сайта.

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

Готов ответить на все вопросы по результатам аудита в скайпе, email или по телефону.