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

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

Дата аудита: апрель 2017 года

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

 

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

 

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

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

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

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

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

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

Для более точного понимания текущего состояния сайта и возможных источниках проблем ниже приведены важные данные статистики в период 25 марта – 5 апреля 2017 (после запуска контекстной рекламы).

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

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

Динамика по источникам трафика

Основной источник трафика – контекстная реклама.

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

Показатели качества трафика

Абсолютное большинство посетителей заходит на сайт из России:

Регионы посетителей сайта

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

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

Только 24% посетителей из Москвы и области – главного целевого региона сайта.

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

Это связано с тем, что объявления Яндекс.Директа показываются во всех регионах:

Настройки регионов в Яндекс.Директе

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

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

Анализ аудитории сайта

Основную аудиторию сайта составляют женщины от 45 лет и старше.

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

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

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

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

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

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

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

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

Наиболее популярные страницы:

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

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

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

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

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

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

Не выделяется текущий раздел сайта

Аналогичная проблема наблюдается и в нижнем меню:

Не выделяется текущий раздел сайта

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

Не выделяется текущий раздел сайта

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

Не подсвечивается текущий раздел каталога

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

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

Например, актуальная в данный момент ссылка «Коллекция зима-весна 2017» стоит в меню третьей, а не первой.

Ошибки в компоновке меню

Это подтверждается и данными карты кликов.

Анализ данных карты кликов

Коллекция «Зима-лето 2016» (как и ссылка на нее) скорее всего в данный момент потеряла актуальность.

Устаревшая информация на сайте

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

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

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

При переходе по страницам каталога в навигации выводится только название «Интернет магазин». Название категорий, подкатегорий и товаров не выводится. Видео показано по ссылке https://yadi.sk/i/nnilWIkO3GiwoK

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

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

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

Ошибки в текстах сайта

Ошибки в текстах сайта

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

Ссылки оформлены как обычный текст

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

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

Элементы интерфейса не реагируют на наведение курсора

Элементы интерфейса не реагируют на наведение курсора

Элементы интерфейса не реагируют на наведение курсора

Элементы интерфейса не реагируют на наведение курсора

Элементы интерфейса не реагируют на наведение курсора

Элементы интерфейса не реагируют на наведение курсора

Элементы интерфейса не реагируют на наведение курсора

Элементы интерфейса не реагируют на наведение курсора

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

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

Подчеркивание в обычном тексте

Подчеркивание в обычном тексте

Подчеркивание в обычном тексте

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

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

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

В верхней части сайта размещен текст, который не несет особой смысловой нагрузки:

Аудит текстов сайта

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

В данном тексте основное внимание привлекает первая строка:

Аудит текстов сайта

При этом в боковом меню, на которое указывает стрелка, нет раздела «Последние работы».

Аудит текстов сайта

Непонятно о какой одноименной вкладке идет речь.

Аудит текстов сайта

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

Размещение формы поиска на странице

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

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

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

Нижняя кнопка управления галереей не видна на первом экране:

Ошибки в компоновке главной страницы

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

Часть фото является ссылками на страницы с просмотром товара, часть – обычными фото. При этом они оформлены одинаково. Видео показано по ссылке https://yadi.sk/i/RFuEG6Ew3Gj87w

Ссылки или фото

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

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

Нарушение пропорций фотографии

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

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

Основное пространство главной страницы сайта занимает лента с фото и видео.

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

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

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

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

Ошибки в юзабилити сайта

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

Непонятно, к какому фото относится заголовок:

Ошибки в юзабилити сайта

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

Нет отступа между фото и текстом:

Нет отступа между фото и текстом

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

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

Для примера возьмем страницу http://fiffa.biz/magazin/folder/bezrukavka

Непонятно, это ссылка или текст:

Ссылки оформлены как обычный текст

Вывод цены для некоторых товаров разрывается на две строки. Дизайн выглядит неаккуратно:

Ошибки в выводе цен

Кнопки не реагируют на наведение курсора:

Кнопки не реагируют на курсор

Номер телефона размещен в середине текста и его сложно заметить. На некоторых страницах каталога он разорван на две строки.

Ошибки в текстах сайта

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

В некоторых категориях товара текстовое описание и номер телефона отсутствует. Например, http://fiffa.biz/magazin/folder/komplekty-vyazanye

Нет текстового описания каталога

В данный момент на странице просмотра ленты каталога отсутствуют такие важные элементы, как:

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

Это ухудшает юзабилити каталога и усложняет работу с каталогом.

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

Просмотр увеличенного фото

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

Для некоторых товаров выводятся непонятные заголовки http://fiffa.biz/magazin/product/vyazanyy-kardigan-podrobneye-i-video:

Ошибки в заголовках

Не проработано взаимное расположение дополнительного фото товара и текстового описания. Например, http://fiffa.biz/magazin/product/756459601:

Ошибки в юзабилити страницы каталога

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

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

На некоторых страницах (например, http://fiffa.biz/magazin/product/vyazanoye-palto-v-nalichii-r-r-44-46-podrobneye ) есть несколько дополнительных фото. Они просто вставлены в текст страницы, из-за чего ее высота увеличивается. Возможность просмотра фото с помощью скрипта отсутствует. По ссылке https://yadi.sk/i/t–RvgM83Gnopx показан полный скриншот такой страницы.

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

Непонятно, для чего используется сокращение для надписи «Количество»:

Сокращения в текстах

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

Вывод количества товаров

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

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

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

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

Для некоторых товаров полностью отсутствует какая-либо текстовая информация и описание.

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

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

  • Быстрого перехода к предыдущему или следующему товару;
  • Вывода похожих товаров;
  • Вывода новинок или акционных товаров;
  • Вывода сопутствующих товаров;
  • Добавления товара в список сравнения.

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

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

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

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

Ошибки в навигации

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

Ошибки в юзабилити корзины

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

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

Ошибки в юзабилити формы

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

Кнопка не реагирует на наведение курсора и ее дизайн не соответствует общей стилистике сайта:

Кнопка не реагирует на курсор

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

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

Контакты

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

Разные номера телефонов

Разные номера телефонов

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

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

Ошибки в адресе почты

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

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

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

Рекомендуем расширить количество каналов быстрой связи пользователя с менеджером. Для этого можно рассмотреть возможность использования комплексных сервисов, например http://www.ru.zopim.com, http://www.krible.com/. “это позволит кардинально увеличить эффективность и конверсию сайта.

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

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

Для примера, рассмотрим поиск по запросу «шапка».

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

Ошибки в юзабилити модуля поиска

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

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

Настройки Яндекс.Директа

Т.к. в данный момент Яндекс.Директ является основным источником трафика, ниже приведены некоторые вопросы, связанные с его эффективностью.

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

Анализ настроек Яндекс.Директа

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

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

Полный список запросов показан по ссылке https://yadi.sk/i/M_m85b2k3GnsRq

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

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

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

Get new case studies by email:

More Case Studies

See all