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

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

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

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

 

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

 

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

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

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

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

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

Общая информация по статистике сайта.

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

Источники трафика:

Анализ источников трафика

Показатели основных источников трафика:

Анализ показателей качества трафика

Как видно из статистики, основным источником трафика (62,7 процента) является контекстная реклама.

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

Из рекламной сети Google Adwords заходит более 25-ти процентов, при этом показатель отказов – самый высокий среди всех источников.

Рекламный трафик

 

Анализ рекламного трафика

Подавляющее большинство посетителей сайта из России:

Анализ статистики сайта

Распределение пользователей по регионам:

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

Основная целевая аудитория сайта – мужчины в возрасте от 25-ти до 34-х лет.

Анализ целевой аудитории

Анализ целевой аудитории

Популярность страниц среди пользователей распределена следующим образом:

Популярные страницы

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

Используемые устройства

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

Анализ показателя отказов

Используемые браузеры:

Статистика по браузерам

Следует отметить, что при уменьшении разрешения экрана пользователя наблюдается рост показателя отказов:

Анализ показателя отказов

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

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

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

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

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

Размещение логотипа

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

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

Качество логотипа

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

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

Слоган сайта

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

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

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

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

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

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

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

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

Ошибки в навигации по сайту

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

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

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

Неверно работает подсветка активного раздела сайта при переходе по ссылкам подменю «Оплата и доставка». Это продемонстрировано на видео по ссылке 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 или по телефону.

Get new case studies by email:

More Case Studies

See all