Аудит юзабилити и SEO сайта интернет-магазина насосоного оборудования

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

Дата аудита: ноябрь 2017 года

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

 

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

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

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

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

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

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

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

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

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

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

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

Сейчас такой функционал есть. Видео показано по ссылке https://yadi.sk/i/WKUuMI9E3NRmtx

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

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

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

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

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

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

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

 

Часть ссылок главного меню содержит выпадающее подменю второго уровня, часть – нет. При этом они оформлены одинаково. Чтобы понять, где есть подменю, необходимо поочередно навести курсор на все ссылки. Видео показано тут: https://yadi.sk/d/Hv_cNtQT3NRowz.

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

Также непонятно, почему нет подменю для наиболее важного раздела сайта – каталога. В данный момент невозможно быстро перейти в нужную категорию (например, http://nasosov.by/catalog/tsirkulyatsionnye_nasosy_dlya_otopleniya/ ) с помощью главного меню. Это отрицательно сказывается на юзабилити и конверсии.

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

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

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

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

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

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

Ссылки в боковом меню и тексте страницы не реагируют на наведение курсора. Видео можно увидеть тут: https://yadi.sk/i/GECf6Rwb3NRtcR

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

В нижнем навигационном меню также не выделяется текущий раздел сайта. Видео показано по ссылке https://yadi.sk/i/qgXOhYar3NRukM.

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

Вспомогательная навигация по типу «хлебные крошки»

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

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

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

Невозможно понять, где ссылка, а где текст. Все элементы, кроме последнего должны быть ссылками на соответствующие разделы сайта. Сейчас используется одинаковое оформление элементов. Видео показано тут: https://yadi.sk/i/J35IiNzH3NRvu6

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

Не совпадают названия ссылок в главном меню и «хлебных крошках». Например, в меню раздел называется «Полезно», а в навигации «Справочная информация».

Аналогично, «Доставка и оплата» выводится как «Помощь».

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

На странице «Монтаж насосов» http://nasosov.by/montazh/ в навигационной цепочке выводится только одна ссылка:

Не выводится название страниц в подразделах «Возврат товара» и «Услуги». Видео показано по ссылке https://yadi.sk/i/x3A5-jn43NRx7B

При просмотре новостной ленты также не выводится заголовок новости. Видео показано по ссылке https://yadi.sk/i/pWOvPeml3NRxS3.

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

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

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

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

Его возможности используются недостаточно эффективно.

В нем есть всего два баннера.

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

Рекомендуем сделать текст в виде HTML-кода.

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

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

Непонятно, по какому принципу отобраны товары в ленте на главной странице. Какой-либо заголовок (например, «Новинки», «Популярные», «Хиты продаж») в данный момент отсутствует. Полный скриншот главной страницы показан по ссылке https://yadi.sk/i/VZTaevfS3NRzFR.

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

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

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

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

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

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

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

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

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

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

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

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

В анонсах новостей также нет каких-либо фото или иллюстраций. Для части анонсов опубликован только заголовок без краткого описания.

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

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

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

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

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

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

Главная страница каталога

Далее рассмотрим юзабилити главной страницы каталога http://nasosov.by/catalog/

Под каждой категорией размещен большой текстовый блок, который содержит общий текст, не представляющий особого интереса для большинства пользователей. Полный скриншот с выделением таких блоков показан по ссылке https://yadi.sk/i/LU3mQFNo3NTuMp

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

Категории на данной странице рекомендуем размещать в соответствии с их востребованностью у посетителей сайта. Наиболее популярные должны быть размещены в начале, менее популярные – в конце. Скриншот карты кликов главной страницы каталога приведен по ссылке https://yadi.sk/i/HPh0opFF3NSFc9

Карта ссылок показана тут https://yadi.sk/i/uWDQc5x13NSFxm, видео с демонстрацией количества переходов в наиболее популярные разделы каталога показано тут https://yadi.sk/i/JiFWZdEr3NSGTs.

Просмотр категории каталога

Юзабилити страниц категорий каталога будем рассматривать на примере http://nasosov.by/catalog/tsirkulyatsionnye_nasosy_dlya_otopleniya/.

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

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

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

Видео показано по ссылке https://yadi.sk/i/3DT6kt0O3NSJrN.

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

Текст сообщения пересекается с иконкой закрытия окна.

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

Ссылка не реагирует на наведение курсора. Видео показано тут: https://yadi.sk/i/WHb0mwCs3NSKDY

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

Непонятно, что обозначают данные названия и для чего они нужны в каталоге. Пользователю сложно догадаться, что эти элементы предназначены для вывода каталога конкретного производителя. Видео показано по ссылке https://yadi.sk/i/6Emy4b3p3NSKnC.

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

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

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

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

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

По умолчанию на странице выводится 40 товарных позиций. В результате она имеет избыточную высоту, что отрицательно сказывается на юзабилити. Полный скриншот приведен по ссылке https://yadi.sk/i/vOG2JGVf3NSM7Y.

Модуль выбора количества товаров на странице расположен в самом низу. Чтоб его найти найти, необходимо полностью прокрутить страницу. Это крайне отрицательно сказывается на юзабилити каталога. Видео показано по ссылке https://yadi.sk/i/b4b2rcPl3NSMzk

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

 

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

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

Фото товаров не реагирует на наведение курсора. Это отрицательно сказывается на юзабилити. Видео показано по ссылке https://yadi.sk/d/uZImVBPH3NSNp7

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

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

Непонятно, как посмотреть список отложенных товаров. В явном виде его найти не удалось. Видео показано по ссылке https://yadi.sk/i/RPuWDall3NSQqc.

При выводе товаров плиткой, кнопки добавления работают с ошибками. Происходит постоянное мерцание курсора, товар не добавляется в соответствующие списки. Видео показано по ссылке https://yadi.sk/i/m8N0pgMB3NSRXD.

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

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

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

Не указано, в какой валюте выводится цена:

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

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

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

Фактически, для насосов может использоваться только два напряжения в сети – 220 или 380 вольт. Сейчас в филоьтре по напряжению используется 3 варианта питания насосов от 220 вольт.

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

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

Детальный просмотр товара

Юзабилити страницы детального просмотра товара будем рассматривать на примере http://nasosov.by/catalog/tsirkulyatsionnye_nasosy_dlya_otopleniya/grundfos_ups_25_60_180/

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

Но при попытке отправки полей с ошибками форма закрывается и весь процесс приходится начинать заново. Видео показано по ссылке https://yadi.sk/i/40GccC3X3NSUPT.

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

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

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

После обновления страницы нет никакой информации о количестве экземпляров товара в корзине и сумме по этому товару. Видео показано по ссылке https://yadi.sk/i/Sldd2jqX3NTx5L.

Не работает кнопка «Вас может заинтересовать». При нажатии на нее ничего не происходит. Видео показано по ссылке https://yadi.sk/i/A47bNtJS3NTJLc

Указано наличие 10 товаров, в блоке выводится только 4.

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

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

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

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

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

Допущены ошибки в форматировании текстов.

Нет отступа между абзацем и заголовком.

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

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

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

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

Крайне отрицательным с точки зрения юзабилити является:

  1. Невозможность перейти к предыдущему или следующему товару со страницы детального просмотра;
  2. Невозможность перейти в другую категорию каталога;
  3. Большая высота страниц детального просмотра и необходимость постоянного использования вертикальной прокрутки.

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

Также в ходе тестирования некоторые страницы каталога не загружались и появлялось сообщение об ошибке. Видео показано по ссылке https://yadi.sk/i/scb_hjM33NTPQ6

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

Корзина и оформление покупки

Далее рассмотрим особенности работы корзины и процесса оформления покупки.

Непонятно, что обозначает «+3» в модуле миникорзины.

Нет автоматического пересчета суммы заказа при изменении количества товаров в корзине. Необходимо вручную использовать кнопку «пересчитать». Видео показано по ссылке https://yadi.sk/d/DhVDxjFg3NTQ8Y

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

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

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

Абсолютно непонятно, для чего сделана данная кнопка. При нажатии на нее ничего не происходит. Видео показано по ссылке https://yadi.sk/d/k4CZnRYh3NTQoz

Рекомендуем убрать данный элемент из корзины.

При попытке отправки быстрого заказа с неправильными данными, форма закрывается и весь процесс приходится повторять заново. Видео показано по ссылке https://yadi.sk/i/IfrbaSUv3NTRGT

Удалось отправить быстрый заказ с неверными данными в полях формы. Видео показано по ссылке https://yadi.sk/i/wmLiX5g_3NTZNo .

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

Непосредственно в корзине ссылки «отложить» работают. Видео показано по ссылке https://yadi.sk/i/betqj-d53NTZqm

При нажатии на кнопку «Оформить заказ» открывается страница http://nasosov.by/order/.

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

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

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

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

Видео показано по ссылке https://yadi.sk/i/5nPXEwzV3NTauR.

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

После регистрации на почту приходит письмо со стороннего почтового ящика zakaz@antarktida.by. Это является отрицательным моментом с точки зрения юзабилити.

Рекомендуем использовать для рассылки всех писем адрес ящика, привязанный к доменному имени сайта. Например, zakaz@nasosov.by.

Верстка информационного письма не проработана. Кроме этого, в нем отсутствует какая-либо информация о логине и пароле для входа в личный кабинет, которые должны быть сгенерированы автоматически при регистрации. Полный скриншот письма показан по ссылке https://yadi.sk/i/BJYiiQTP3NTcMK.

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

Далее рассмотрим страницу оформления заказа.

Используется избыточная ширина для выпадающего списка:

Неправильно выводится имя пользователя:

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

Доступен только один способ оплаты – наличными курьеру. Поэтому, использование данного модуля не имеет логического смысла:

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

Абсолютно непонятно, какую функцию выполняет окно с картой. Видео показано по ссылке https://yadi.sk/i/8OJ9mXcl3NTjwQ.

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

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

Личный кабинет

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

Кроме этого, нет проверки правильности ввода даты. В качестве дня рождения можно выбрать любую дату из будущего времени. Видео показано по ссылке https://yadi.sk/i/Oj79lwL23NTbdk.

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

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

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

Доступность контактной информации.

На странице «Контакты» используется почтовый ящик zakazkelvin@mail.ru, который расположен на стороннем бесплатном почтовом сервисе. Имя почтового ящика не связано с названием сайта и компании. Это отрицательно сказывается на юзабилити.

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

Логин скайпа также не связан с именем компании

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

На странице «Контакты» также отсутствует привычная для большинства пользователей форма обратной связи для быстрой отправки сообщения менеджеру. Это отрицательно сказывается на юзабилити. Полный скриншот страницы приведен по ссылке https://yadi.sk/i/cT8iVHfv3NTkyM.

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

404-я страница

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

Сейчас ее дизайн проработан недостаточно.

Нет информационного сообщения.

В навигационной цепочке выводится название страницы «Контакты», а в заголовке – «Карта сайта»:

Содержатся вставки одинакового текста:

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

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

Get new case studies by email:

More Case Studies

See all