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

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

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

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

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

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

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

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

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

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

Нет подсветки текущего раздела сайта в главном навигационном меню. Невозможно понять, где находится пользователь в конкретный момент времени. Видео показано по ссылке 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 или по телефону.