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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Неверно работает подсветка активного раздела сайта при переходе по ссылкам подменю «Оплата и доставка». Это продемонстрировано на видео по ссылке https://yadi.sk/i/4Xk2GedRzEbye.

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

В каталоге масел никак не обозначено наличие выпадающего меню для некоторых категорий. Это показано на видео https://yadi.sk/i/xIKXOwLrzEiGQ

Выпадающее подменю занимает всю ширину страницы. Из-за этого появляется большое пустое поле, занимающее фактически половину экрана. Это показано на видео по ссылке https://yadi.sk/i/exvKhMRxzEj7r.

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

При переходе по ссылкам происходит постоянное «мерцание» и изменение размеров меню. Видео показано по ссылке https://yadi.sk/i/e5wGPTRlzJqYU.

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

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

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

Фон иконок белый, а цвет блока меню – сероватый. Из-за этого виден фон иконок и дизайн выглядит неаккуратно.

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

Непонятно, почему оформление данной ссылки отличается от других:

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

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

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

При переходе на страницу «Форум» http://msboy.ru/forum/ выводится неверная навигационная цепочка.

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

Для примера, при переходе на страницу товара http://msboy.ru/catalog/masla_dlya_napravlyayushchikh_skolzheniya/industrialnoe_maslo_gazpromneft_slide_way_68_205l/ навигационная цепочка выглядит следующим образом:

SEO тексты ориентированы сугубо на Екатеринбург и не изменяются при выборе другой страны и города. Это отрицательно сказывается на юзабилити. Видео показано по ссылке https://yadi.sk/i/p9hEqbxDzJwXn

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

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

Такая же проблема и на подстраницах раздела «Оплата и доставка» http://msboy.ru/about/discounts/

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

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

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

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

Это верное решение, но в его дизайне допущено несколько ошибок.

Кнопки управления прокруткой недоступны из-за боковых плавающих блоков с мини-корзиной и чатом:

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

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

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

Второй слайд практически не содержит полезной информации:

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

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

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

Прокрутка иконок не работает. Это показано на видео по ссылке https://yadi.sk/i/cv9FSxfjzQMyx.

В блоке «Рекомендуем» указано наличие 13-ти товарных позиций, а на самом деле выводится только 8. Видео показано по ссылке https://yadi.sk/i/MU7Lh1DzzQNbt.

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

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

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

Размещено всего два отзыва. При этом в одном из них нет текста отзыва.

Рекомендуем выводить 5-7 актуальных отзывов о товарах.

Непонятно, что обозначают две черточки в отзыве:

Каталог товаров

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

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

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

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

Некорректно выводится список выбора количества товаров на странице. Видео показано по ссылке https://yadi.sk/i/T9ObeJFYzQWGL.

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

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

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

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

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

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

Следует отметить, что в разделе каталога «Фильтры» http://msboy.ru/catalog/filtry/ данный модуль работает правильно. Видео показано по ссылке https://yadi.sk/i/nZPY1pMjzQbbT

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

Видео с демонстрацией можно увидеть по ссылке https://yadi.sk/i/xwHwu8U9zQanD.

В каталоге есть возможность быстрого просмотра товаров.

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

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

Рекомендуем пересмотреть компоновку и разместить описание под кнопкой «Купить».

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

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

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

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

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

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

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

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

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

Избыточным является применение проверочного кода:

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

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

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

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

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

В разделе «Фильтры» вместо фото товара выводятся логотипы производителей. Такое решение мало информативно и приводит к выводу ленты товаров с одинаковыми изображениями. Видео показано по ссылке https://yadi.sk/i/VchmQ61ozSSHt .

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

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

На странице есть форма «Сообщить о снижении цены».

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

Аналогичная проблема в форме «Пожаловаться на цену». Видео показано по ссылке https://yadi.sk/i/M8wn7BppzS9nH

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

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

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

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

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

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

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

Неверно указаны характеристики некоторых товаров. Например, рассмотрим страницу http://msboy.ru/catalog/motornye_masla/motornoe_maslo_rosneft_m8v_1l/ . Объем масла – 1 литр, при этом вес указан 180000 грамм.

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

Также в каталоге нет возможности:

• Перейти к предыдущему и следующему товару;
• Сравнить товары.

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

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

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

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

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

Слева выводится плавающий блок мини-корзины. Но в ней нет наиболее важной информации – сумме покупки.

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

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

Для всех товаров в корзине выводится маркер «В наличии». Это создает визуальный шум. Как говорилось выше, все товары, представленные в каталоге, имеют статус «В наличии».

В корзине есть ссылка «Купить в один клик». Указано, что необходимо ввести только номер телефона:

В форме, которая открывается после нажатия на эту ссылку, необходимо ввести еще и адрес email:

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

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

Дизайн и юзабилити страницы с оформлением заказа абсолютно не проработан. Хотя именно на ней происходит процесс ввода данных покупателя и оформления заказа. Полный скриншот страницы и комментарии показан по ссылке https://yadi.sk/i/8dTciRMEzSjoc

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

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

Слишком маленькая ширина поля для ввода ФИО пользователей:

Процесс оформления заказа показан по ссылке https://yadi.sk/i/jz-v_AUqzSnSk.

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

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

Кнопка перехода к оплате заказа. Ее оформление не соответствует дизайну других кнопок на сайте.

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

О магазине

http://msboy.ru/about/

Непонятно, о каких товарах идет речь в данном тексте:

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

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

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

Новости

http://msboy.ru/news/.

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

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

Полный текст новости дублирует ее анонс. Он выводится на всю ширину страницы, что отрицательно сказывается на юзабилити. Оптимальная ширина текста для чтения 600-800 пикселей. Графические элементы, иллюстрации и фото полностью отсутствуют. Это показано на видео по ссылке https://yadi.sk/i/885MA-Z1zNZwd.

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

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

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

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

Оплата и доставка

http://msboy.ru/about/delivery/.

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

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

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

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

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

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

Не совсем понятно, почему данный текст отформатирован как строка списка:

Как заказать

http://msboy.ru/about/howto/

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

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

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

В обоих шагах повторяется слово «оформление».

Термины рекомендуем заключать в кавычки:

Email адрес рекомендуем сделать ссылкой:

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

Также рекомендуем разместить иконки предлагаемых платежных систем и способов оплаты:

Гарантия качества

http://msboy.ru/about/guaranty/.

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

Скидки

http://msboy.ru/about/discounts/.

Не совсем понятно, где и как можно получить такой купон:

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

Наши сертификаты http://msboy.ru/nashi-sertifikaty/.

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

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

Нет возможности просмотра увеличенного изображения сертификата. Это показано на видео по ссылке https://yadi.sk/i/Ar9KtiPozPbUb.

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

Подбор масла за одну минуту

http://msboy.ru/podbor-masla-za-1-minutu/.

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

Плавающий блок справа перекрывает логотипы компаний:

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

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

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

Контакты

http://msboy.ru/about/contacts/.

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

Первым размещен адрес пункта выдачи заказов. При этом на странице в явном виде нет адреса офиса компании.

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

В тексте говорится о доставке в города России, хотя компания доставляет в Казахстан и Белоруссию.

Также нет никаких координат представительств компании в этих странах и возможности бесплатных звонков для клиентов из этих стран.

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

Форум

http://msboy.ru/forum/

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

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

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

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

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

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

Компоновка страницы не проработана. Справа большая пустая зона, которая не выполняет никаких полезных функций. Полный скриншот страницы показан по ссылке https://yadi.sk/i/WMsQVt9rzPmpw

Заказ обратного звонка

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

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

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

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

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

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

Звездочка, обозначающая обязательные поля, обычно пишется после двоеточия:

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

Некорректно выводится текст сообщений об ошибках в полях формы. Это показано на видео по ссылке https://yadi.sk/i/HEzo7__qzQJYK.

Нет проверки правильности ввода данных в поля формы. Например, можно внести в поле имя одно число, а в телефон – буквенные символы. Это показано на видео по ссылке https://yadi.sk/i/_0A-JBXBzQKN2

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

Верстка сайта

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

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

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

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