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

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

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

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

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

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

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

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

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

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

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

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

Аналогичная проблема наблюдается и при переходе по ссылкам в подменю.

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

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

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

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

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

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

	https://youtu.be/ps2tvOKPKz8
	https://youtu.be/3t2as4r_ELk
	https://youtu.be/g3dUwXzw3qI
	https://youtu.be/kcLm8d9yJkQ
	https://youtu.be/bDvYYiMvzVU
	https://youtu.be/lG0JhGuGyd8
	https://youtu.be/Hz9BUawTGp0
	https://youtu.be/kc4vMvrAYaM
	https://youtu.be/1nj8xzK0ZrI

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

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

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

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

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

В данный момент эти требования выполнены.

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

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

При этом на сайте-конкуренте http://ecrystal.ru/ есть слоган, размещенный под логотипом.

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

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

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

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

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

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

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

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

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

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

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

Аналогичная проблема с недостаточной контрастностью иконок и фона наблюдается в блоке «Наши партнеры».

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

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

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

Рекомендуем уменьшить общий размер окна с формой.

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

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

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

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

Мини-карточки товаров выводятся в два ряда. При этом второй ряд содержит всего 2 товара. Из-за этого дизайн блока выглядит незавершенным.

В трех следующих блоках выводится только один неполный ряд.

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

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

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

Не согласован размер фото и положение текстов для разных товаров в блоке «Хиты продаж».

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

Далее на странице размещен блок «События в мире кристаллов Swarovski». Но в его юзабилити допущен ряд существенных ошибок.

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

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

На странице с детальным просмотром события размещено минимальное количество текста, не представляющего особого интереса для пользователей. Например, на странице https://crystalland.ru/blog/aromat-lancome-swarovski-plate размещен только один абзац текста.

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

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

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

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

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

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

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

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

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

Юзабилити данных разделов будем рассматривать на примере раздела https://crystalland.ru/elements/fbnohf/.

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

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

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

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

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

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

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

Дизайн элементов этого блока не проработан. В результате страница имеет избыточную высоту и пользователю достаточно сложно найти нужный товар. Полный скриншот страницы приведен по ссылке https://yadi.sk/d/TfctUQRn3XEM7h

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

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

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

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

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

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

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

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

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

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

При прокрутке изображений в блоке они пересекаются с текстовыми элементами.

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

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

Вместо этого происходит перенаправление пользователя на страницу детального просмотра товара.

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

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

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

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

В некоторых категориях товаров дизайн ленты с товарами разваливается. Например, https://crystalland.ru/elements/fancy/

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

Просмотр выбранного товара

Юзабилити страницы детального просмотра товара будем рассматривать на примере https://crystalland.ru/elements/fbnohf/2058-2088/.

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

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

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

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

Карта скроллинга: https://yadi.sk/i/XY_0iJHo3XFnWe

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

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

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

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

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

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

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

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

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

Обрезано изображение в галерее компонентов.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

После нажатия кнопки «Оформить заказ за 2 минуты» открывается страница https://crystalland.ru/order для завершения покупки.

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

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

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

Ее цветовое решение недостаточно контрастно и плохо заметно при беглом взгляде на экран.

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

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

Нет проверки правильности ввода ФИО. Удалось успешно перейти к следующему этапу оформление, указав три числа в поле.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Но некоторые товары выводятся некорректно.

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

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

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

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

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

Контактные данные

Адрес страницы: https://crystalland.ru/pages/contacts.

Используются разные форматы написания телефонного номера (со скобками и без).

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

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

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

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

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

Также нет возможности оперативного общения в распространённых мессенджерах Viber, WhatsApp, Telegram.

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

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

Скриншот: https://yadi.sk/i/vc8I18z-3WwXvj

Рекомендуем добавить соответствующую информацию на страницу «Контакты».

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

Ссылка закрытия окна не реагирует на наведение курсора.

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

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

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

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

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

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

Дизайн кнопки отправки не проработан. Она не реагирует на наведение курсора.

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

Не согласована взаимная ширина элементов формы.

Общие итоги и выводы

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

1. наблюдается существенное падение и отрицательная динамика поискового трафика как из Яндекса, так и из Google с ноября 2017 года по настоящий момент;
2. основным источником рекламного трафика в мае был Google Adwords. Трафик из него носит нестабильный характер с резкими всплесками и падениями количества показов;
3. рекламный трафик из Яндекс.Директа существенно ниже. При этом он имеет лучшие показатели по отказам, глубине и времени просмотра;
4. на сайте нет обязательного файла sitemap.xml. robots.txt заполнен с ошибками;
5. в URL-ах используются коды товаров. Полные названия товаров с учетом подкатегорий в URL-ах не выводятся;
6. допущены существенные ошибки в заполнении метатега title. Выявлены дубликаты на 61.74% страниц сайта. На большинстве страниц он имеет избыточное количество символов. Часть страниц содержит в title служебный код;
7. метатег description не заполнен практически на всех страницах сайта;
8. используются не уникальные заголовки первого уровня H1;
9. на большинстве страниц опубликовано два или три заголовка H1;
10. допущены ошибки в юзабилити и компоновке элементов главной страницы;
11. на странице детального просмотра товара не проработано взаимное расположение элементов интерфейса, в частности – модуля просмотра увеличенных фото, выбора размера кристаллов и т.д.;
12. очистить корзину можно только при помощи сброса cookies;
13. при возврате на предыдущий шаг оформления заказа сбрасывается список товаров в корзине. Пользователю приходится заново набирать товары для покупки;
14. по умолчанию некорректно рассчитывается итоговая стоимость заказа. В ней не учитывается стоимость доставки;
15. модуль поиска в данный момент фактически не работает.

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

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

	Крупнейший регистратор доменных имен REG.RU Регистрация и продление доменных имен в любых зонах.
	Ведущий хостинг-провайдер BEGET.RU Хостинг, аренда серверов, регистрация доменов.
	Сервис тестирования юзабилити реальными пользователями Отбор и анкетирование целевой аудитории сайта.
	Сервис мониторинга, анализа и оценки эффективности поискового продвижения. Съем и отслеживание позиций сайта, работа с семантическим ядром.
	Сервис копирайтинга и рерайтинга текстов. Заказ текстов для сайта любой сложности. Покупка готовых текстов и заказ уникальных статей на нужную тему.
	Сервис автоматизации продвижения сайта и рекламы в интернете. Подбор и покупка ссылок, оптимизация контекстной рекламы.
	26 000 готовых премиум-шаблонов для сайтов Высококачественные шаблоны для любых сайтов, материалы для дизайна сайта.
	Крупнейшая фриланс-биржа Сервис удаленной работы.