Аудит юзабилити интернет-магазина оборудования для автозаправок

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

Дата аудита: декабрь 2017 года

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

 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Такая же ошибка наблюдается и в нижнем меню.

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

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

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

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

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

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

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

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

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

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

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

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

Карта кликов: https://yadi.sk/i/W7XvKIVC3Qy6bH.

Карта ссылок: https://yadi.sk/d/AaerwoW-3Qy75N.

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

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

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

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

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

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

https://youtu.be/_R0KMcz5lTA
https://youtu.be/0mtkBBYyWio
https://youtu.be/9qeOxGJc7wI
https://youtu.be/K6FD0OjnVxo
https://youtu.be/1N2m-h1Hn0Y
https://youtu.be/1WF8Stpti6A

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

Некоторый текст оформлен как ссылка, хотя таковым не является. Ниже приведены скриншоты таких элементов.

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

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

Скриншот 1 (ошибка): https://yadi.sk/d/YjwWqrcL3QyNdH.

Скриншот 2 (правильно): https://yadi.sk/d/nGW802Jt3QyNwK.

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

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

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

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

Скриншот: https://yadi.sk/d/3XXV5QfW3QyPhC.

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

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

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

Создается впечатление, что это не ссылки, а обычные текстовые блоки.

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

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

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

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

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

В блоке новостей выводится всего одна новость. Текст обрезан внизу:

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

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

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

Отдельно стоит отметить, что на главной странице сайта отсутствует такая важная информация, как:

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

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

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

Дизайн категории каталога будем рассматривать на примере страницы http://aztgrup.ru/toplivorazdatochnye-kolonki/.

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

 

Рекомендуем выводить на страницах каталога заголовок при помощи тега <h2></h2>.

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

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

При смене типа сортировки все равно выводится текст «Сортировать», а не выбранный тип. Невозможно понять, как отсортирован каталог в конкретный момент времени.

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

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

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

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

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

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

Скриншот: https://yadi.sk/d/eKX4pufo3QyaTF.

Кроме этого, наблюдается баг при переключении вида просмотра. Одна часть каталога выводится в виде списка, вторая – в виде плитки.

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

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

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

Если выбрать конкретного производителя (например, «ТРК Топаз» http://aztgrup.ru/toplivorazdatochnye-kolonki/trk-topaz/ ), то вывод блока с брендом не имеет смысла.

Для большого количества товарных категорий фильтр вообще не выводится. Например, на странице http://aztgrup.ru/gazorazdatochnye-kolonki/grk-tekhnoproekt-uzsg/kolonki-vysotoy-1250-mm/

Скриншот: https://yadi.sk/d/DqHQdiCZ3Qyj9W.

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

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

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

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

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

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

На странице просмотра подкатегории (например, http://aztgrup.ru/toplivorazdatochnye-kolonki/trk-kvant/) данное меню отсутствует. Это отрицательно сказывается на юзабилити, т.к. невозможно быстро перейти к просмотру другого производителя.

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

Страница просмотра товара

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

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

Рекомендуем по возможности публиковать 3-4 фото каждого товара каталога.

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

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

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

В блоке вспомогательной навигации не выводится название выбранного товара:

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

Под заголовком расположен текст с артикулом товара, при этом несколько раз выводится «Арт:».

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

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

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

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

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

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

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

Рекомендуем выводить маркер “Товар в корзине”

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

Не согласовано взаимное расположение фотографии товара и его названия. В результате остается пустая зона в центре блока.

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

Непонятно, что обозначает звездочка. Заголовок находится слишком далеко от поля ввода телефона:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Блок мини-корзины не реагирует на наведение курсора.

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

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

Заголовок «Итого» находится слишком далеко от соответствующей цифры.

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

На следующем этапе оформления заказа открывается страница https://aztgrup.ru/checkout/

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

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

Не согласовано взаимное расположение полей ввода:

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

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

Ссылка «Назад» оформлена как обычный текст.

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

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

После оформления открывается страница подтверждения заказа https://aztgrup.ru/checkout/success/. Ее дизайн проработан достаточно качественно, замечаний по юзабилити нет.

О компании

Адрес страницы: http://aztgrup.ru/o-kompanii/.

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

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

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

Техцентр

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

Непонятно, почему текстовый контент страницы сверстан при помощи изображения https://aztgrup.ru/wa-data/public/shop/img/%D0%BC%D0%B0%D0%BA%D0%B5%D1%82%20%D1%83%D1%81%D0%BB%D1%83%D0%B3-2.png . Это отрицательно сказывается не только на юзабилити, но и на поисковой оптимизации сайта.

Рекомендуем верстать весь текст с помощью соответствующего HTML-кода, а не картинок.

Новости

Адрес раздела: http://aztgrup.ru/news/.

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

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

Заголовок смещен вверх и пересекается с главным навигационным меню.

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

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

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

Блог

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

Главная страница блога имеет заголовок «Новости», а не «Блог».

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

В целом ей присущи те же недоработки и рекомендации, что и для страниц раздела «Новости».

Дилерские сертификаты

Адрес страницы: http://aztgrup.ru/dilerskie-sertifikaty/.

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

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

Компоновка страницы выполнена не оптимально. В результате она имеет избыточную высоту и большие пустые зоны без полезного контента.

Скриншот: https://yadi.sk/d/cYMmwSvk3R2v49.

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

Прайс-листы

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

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

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

Акции

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

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

При этом дизайн не проработан. И текстовая и графическая информация сделана при помощи одного изображения https://aztgrup.ru/wa-data/public/shop/img/%D0%9B%D0%B8%D1%81%D1%82%D0%BE%D0%B2%D0%BA%D0%B0-DIXON-Final-6.jpg, предназначенного для печатной продукции, а не сайта.

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

Контакты

http://aztgrup.ru/kontakty/.

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

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

Скриншот: https://yadi.sk/d/0SlXiXVv3R2wdY

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

Регистрация пользователя

Адрес страницы: https://aztgrup.ru/signup/.

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

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

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

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

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

REGRU-logo-color-3 Крупнейший регистратор доменных имен REG.RU

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

static100x100_6 Ведущий хостинг-провайдер BEGET.RU

Хостинг, аренда серверов, регистрация доменов.

Сервис тестирования юзабилити реальными пользователями

Отбор и анкетирование целевой аудитории сайта.

Сервис мониторинга, анализа и оценки эффективности поискового продвижения.

Съем и отслеживание позиций сайта, работа с семантическим ядром.

Сервис копирайтинга и рерайтинга текстов. Заказ текстов для сайта любой сложности.

Покупка готовых текстов и заказ уникальных статей на нужную тему.

SeoPult Сервис автоматизации продвижения сайта и рекламы в интернете.

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

300x60_1 26 000 готовых премиум-шаблонов для сайтов

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

Крупнейшая фриланс-биржа

Сервис удаленной работы.

Get new case studies by email:

More Case Studies

See all