Аудит юзабилити и SEO сайта интернет-магазина светильников
Аудит юзабилити №411
Дата аудита: май 2016 года
Объем отчета: 26 страниц
Комплексный аудит интернет-магазина по продаже бра, люстр, светильников, ламп и торшеров. Анализ работы каталога светильников, страницы просмотра, работы корзины и оформления заказа.
Позиционирование сайта
Согласно тексту рядом с логотипом, сайт позиционируется как интернет-магазин предметов интерьера.
Но, к сожалению, в данный момент в основном каталоге представлены только различные виды светотехники для интерьера (люстры, бра, светильники, торшеры и т.д.). Товары другого направления в каталоге отсутствуют.
Это подтверждается структурой меню каталога и дополнительной навигации по сайту.
Кроме этого, при переходе на главную страницу каталога выводится заголовок «Светильники» и соответствующая вспомогательная навигация.
Информация о других группах товара (шторах, жалюзи и т.д.) размещена только в виде статей в разделе «Энциклопедия» http://discontelle.ru/articles/.
Скриншот этой страницы представлен по ссылке https://yadi.sk/d/IX6U4ewPrwkJ3.
Рекомендуем либо пересмотреть позиционирование сайта как интернет-магазина светотехники, либо представить и другие категории элементов для декора интерьера.
Навигация по сайту
Качественная навигация является базой для построения эффективного юзабилити сайта.
Она должна обеспечивать быстрый и простой переход на любую страницу или раздел сайта.
Кроме того, она должна информировать пользователя о его текущем положении относительно главной страницы.
Рассмотрим, как выполняются эти требования в данный момент.
При переходе в разделы «Каталог» и «Энциклопедия» не подсвечивается соответствующий пункт главного меню. Это продемонстрировано на видео по ссылке https://yadi.sk/d/tKTpWjH1rww7Q
Рекомендуем явно выделять текущий раздел сайта с помощью изменения фонового цвета.
Большое количество ссылок на сайте оформлены как обычный текст и не реагируют на наведение курсора. Ниже представлены скриншоты таких элементов.
Рекомендуем явно выделять ссылки с помощью подчеркивания или соответствующих графических маркеров.
На сайте есть вспомогательная навигация по типу «Хлебные крошки». Это правильное решение, которое позитивно влияет на юзабилити и поисковую оптимизацию сайта.
Но, к сожалению, в данный момент допущены ошибки в оформлении этого элемента.
Последний пункт должен быть обычным текстом, а вся остальная цепочка – ссылками. Сейчас и текст и ссылки оформлены одинаково.
Рекомендуем выделить ссылки в навигационной цепочке при помощи подчеркивания.
В меню каталога не выделяется текущий раздел сайта. Невозможно понять, где находится посетитель сайта в конкретный момент времени.
Для примера, ниже показан вид меню каталога при переходе на страницу http://discontelle.ru/3-svetilniki/5-nastennye-bra/26-bra-markt-de/
Рекомендуем явно выделять текущий радел каталога с помощью изменения цвета, начертания шрифта либо графических маркеров.
Главная страница сайта
Данная страница является одной из самых важных. Она должна информировать посетителя о ключевых преимуществах компании и вовлекать его в дальнейшую работу с сайтом.
Основное пространство первого экрана занимает блок прокрутки баннеров с информацией о коллекциях.
Именно эту часть главной страницы просматривает максимальное количество посетителей сайта. Это подтверждается и данными карты скроллинга (вертикальной прокрутки) страницы. Полная карта скроллинга приведена по ссылке https://yadi.sk/d/AtlhlDgvrxdPp.
Но, к сожалению, в данный момент эти баннеры являются обычными картинками без ссылок на страницы с соответствующими коллекциями. Это ухудшает юзабилити сайта и снижает эффективность данного блока. Клики по баннерам практически отсутствуют. Это подтверждается и данными карты кликов главной страницы по ссылке https://yadi.sk/d/Jk3D0PqBrxeGZ.
Рекомендуем сделать всю площадь баннеров ссылками на соответствующие страницы сайта.
Блок с логотипами производителей, который согласно данным карты кликов привлекает достаточно большое внимание пользователей, расположен в самом низу и, чтобы его увидеть, надо полностью прокрутить страницу.
Рекомендуем переместить данный блок в верхнюю часть страницы, чтоб они были видны без использования прокрутки страницы.
Данные блоки выполнены в виде единых статичных картинок. Картинкой является в том числе заголовок и текст. Это не соответствует стандартам и отрицательно сказывается не только на юзабилити, но и на SEO.
Адреса соответствующих картинок:
- http://discontelle.ru/image/catalog/f3e0a698eefdda545f13a739f5b0a893cd2aa256_1-main-v206.gif
- http://discontelle.ru/image/catalog/b009b163c20796f4aa542fa45e4a034a30040fd0_1-main-v208.gif
- http://discontelle.ru/image/catalog/0386f79bc317dcfa4fe17c020140b12ab689a1bd_1-main-v211.gif
Все текстовые элементы на сайте рекомендуем делать в виде HTML текста, а картинки использовать только для иллюстраций и фото.
В заголовке допущена ошибка.
Разные вертикальные отступы в одинаковых блоках с одинаковым количеством контента.
Рекомендуем использовать единую модульную сетку во всех типовых блоках сайта.
Не согласовано взаимное расположение правых границ блоков.
Отдельно стоит отметить, что дизайн главной страницы полностью разваливается при уменьшении ширины окна браузера. Этот вопрос будет подробно рассмотрен далее в разделе «Верстка».
Кроме этого, при прокрутке сайта вниз верхняя часть с меню, поиском, корзиной и главным меню исчезает с экрана. Это не оптимально с точки зрения юзабилити, особенно учитывая большую высоту некоторых страниц сайта. Общепринятым на сегодня является использование хедера, который постоянно «приклеен» к верхней границе окна браузера. Например, как на сайте-конкуренте http://magazinlustr.ru/.
Каталог товаров
При выводе главной страницы каталога непонятно, по какому принципу выполнена сортировка по умолчанию.
Рекомендуем явно указать, по какому принципу отсортированы товары каталога при загрузке страницы.
Блок с постраничной навигацией расположен внизу ленты товаров. Учитывая, что страница имеет достаточно большую высоту (особенно при выводе по 30 и 75 позиций), это отрицательно сказывается на юзабилити, т.к. пользователю необходимо полностью прокрутить страницу вниз.
Полный скриншот каталога при выводе 75 товарных позиций на страницу показан по ссылке https://yadi.sk/d/9NnQmX9DrxkYG.
Это подтверждается и данными карты кликов.
Рекомендуем продублировать данный элемент и в верхней части вывода каталога товаров.
Заголовок меню каталога сделан ссылкой.
Но при нажатии на него ничего не происходит. Это продемонстрировано на видео по ссылке https://yadi.sk/d/aGCLXVwarxmNV.
В ходе тестирования также были выявлены категории каталога, не содержащие товаров. Например, http://discontelle.ru/3-svetilniki/111-svetilniki-mw-light/. На данной странице выводится обще тематический текст и сообщение «Товаров нет». Скриншот данной страницы представлен по ссылке https://yadi.sk/d/nZR70-jorxnQp.
Аналогичная проблема на странице http://discontelle.ru/3-svetilniki/107-svetilniki-colosseo/ и других. Рекомендуем скрыть от посетителей пустые либо находящиеся в разработке страницы.
С помощью меню каталога невозможно просмотреть все товары в категориях, обозначенных на скриншоте ниже. Можно увидеть только коллекции конкретного производителя.
Это продемонстрировано на видео по ссылке https://yadi.sk/d/Nt_AhyaQrxo22
Рекомендуем сделать возможность просмотра всех товаров от всех производителей в категориях верхнего уровня.
Не совсем оптимально сделан модуль подбора товаров по параметрам.
Если развернуть все фильтры, то высота страницы выходит за все разумные рамки. Основную часть высоты занимает блок подбора по высоте.
Это продемонстрировано на скриншоте по ссылке https://yadi.sk/d/N7aUooW9rxoVb
Рекомендуем пересмотреть функционал и компоновку элементов фильтра:
- Фильтр производителей сделать с помощью выпадающего списка;
- Фильтр подбора высоты и количества лампочек реализовать с помощью двух слайдеров как в блоке подбора цены;
- Фильтры стиля и цоколя сделать также с помощью выпадающих списков.
Ссылка для закрытия открывающегося блока с параметрами фильтра выполнена на английском языке:
Рекомендуем использовать только русский язык во всех элементах сайта.
Сокращенное название «рублей» должно быть после числового значения соответствующего цифрового поля.
Не совсем понятно, какую смысловую нагрузку несет пустой белый блок под постраничной навигацией.
Страница детального просмотра товара
Для большинства товаров на сайте есть только одна фотография. Этого недостаточно для выбора и заказа товара.
При нажатии на нее открывается окно с просмотром увеличенного фото и прокруткой. При этом постоянно прокручивается одна и та же фотография. Это показано на видео по ссылке https://yadi.sk/i/8IlV7uNdryGRr.
Рекомендуем выводить для каждой товарной позиции 3-4 изображения. Это позитивно скажется на юзабилити и конверсии сайта.
Данные блоки выполнены в виде обычных картинок. Это не соответствует стандартам верстки и отрицательно сказывается не только на юзабилити, но и на поисковой оптимизации сайта.
Рекомендуем все тексты сайта выполнять с помощью HTML-верстки.
В форме заказа обратного звонка не указано, какие данные и в каком формате необходимо вводить во втором поле.
Рекомендуем явно указать в каком формате и какие данные должны быть введены в поле.
Также не указано, какие поля являются обязательными для заполнения. Об этом пользователь узнает только после попытки отправки формы. Кроме этого, при выводе сообщения об ошибке дизайн формы полностью разваливается.
Рекомендуем явно указать, какие поля формы обязательны для заполнения.
Кроме этого, отслеживание цели для заказа обратного звонка в данный момент, к сожалению, не установлено. Поэтому оценить эффективность данного инструмента в рамках аудита не представляется возможным.
Отдельно стоит отметить, что на странице детального просмотра отсутствуют следующие элементы, положительно влияющие на юзабилити и конверсию:
- Ссылки на предыдущий и следующий товар в категории. Для того чтобы посмотреть следующий товар необходимо возвращаться на страницу каталога с помощью кнопки браузера «Назад».
- Отсутствует лента с похожими товарами.
- Отсутствует информация о рекомендованных и сопутствующих товарах.
- Не возможности добавить в список и сравнить несколько похожих товарных позиций.
Корзина и оформление заказа
Далее рассмотрим процесс покупки и оформления заказа.
При отсутствии товаров в корзине ссылка на ее страницу является активной. После нажатия пользователь переходит на страницу с заголовком «Страница недоступна». Это продемонстрировано на видео по ссылке https://yadi.sk/i/tP-mcSnOryJnM.
Рекомендуем при отсутствии товаров в корзине деактивировать соответствующую ссылку.
В списке наиболее популярных разделов опубликована ссылка на несуществующий раздел сайта.
Рекомендуем скрывать все ссылки на пустые или отсутствующие страницы сайта.
Эта же страница появляется и при удалении товаров из корзины https://yadi.sk/i/Xd_AiSylryKJo
После добавления товаров в блоке мини-корзины выводится информация о количестве добавленных товаров. При этом наиболее важной для пользователя информации о сумме покупке в нем нет. Это отрицательно сказывается на удобстве работы с сайтом.
Рекомендуем выводить в блоке мини-корзины информацию о сумме покупки.
Ссылки не реагируют на наведение курсора и оформлены как обычный текст.
Рекомендуем явно выделять ссылки с помощью подчеркивания.
Непонятно, какие условия для бесплатной доставки, в какие регионы она осуществляется, т.к. заказ на сайте может оформить покупатель из любого города. Слово «Доставка» должно быть написано с маленькой буквы. Также некрасиво выглядит перенос обозначения «руб» в нижнюю строку.
Непонятно, чем отличается бесплатная доставка и доставка с фиксированной стоимостью 5 рублей.
Рекомендуем явно указать особенности доставки по Москве и в другие регионы. Эта информация частично представлена на странице http://discontelle.ru/delivery.
Непонятно, как в корзине можно использовать бонусные баллы и как они начисляются. Также не удалось выяснить, как узнать стоимость доставки.
Одновременно используется два заголовка. Непонятно, это обычное оформление заказа или быстрое и чем отличаются эти варианты.
Рекомендуем придерживаться единого наименования элементов и избегать дублирования информации на сайте.
Если не заполнить поля формы и нажать на кнопку «Оформить заказ», то страница перезагружается и нет никаких информационных сообщений. Непонятно, какие ошибки допущены и как успешно завершить заказ. Это продемонстрировано на видео по ссылке https://yadi.sk/i/rRIItyoMrye4M
Если допустить хотя бы одну ошибку в заполнении формы и нажать кнопку отправки, то страница перезагружается, все поля формы очищаются и никаких информационных сообщений не выводится. Это крайне отрицательно сказывается на юзабилити и конверсии, т.к. с высокой вероятностью пользователь не будет повторно пытаться оформить заказ и покинет сайт. Это продемонстрировано на видео по ссылке https://yadi.sk/i/yMlKmmWnryeoA
Фактически, в ходе тестирования так и не удалось получить сообщение об успешном оформлении заказа.
Это подтверждается и данными Яндекс.Метрики. Конверсии по соответствующей цели полностью отсутствуют.
Поле «Комментарии к заказу» сделано слишком маленьким и в нем невозможно полностью увидеть длинный текст комментария.
Отдельно стоит отметить, что в форме отсутствует общепринятое поле для ввода email пользователя, на который можно выслать подтверждение заказа с информацией о составе, стоимости и сроках доставки.
Рекомендуем обеспечить корректную работу формы заказа:
- Необходимо явно указать, какие поля формы обязательны для заполнения, а какие нет.
- Рядом с каждым полем необходимо указать формат ввода данных, минимальное количество символов и другие необходимые параметры.
- Оптимальным является проверка правильности ввода данных непосредственно во время заполнения полей формы пользователем.
- После отправки необходимо открывать страницу с подтверждением успешного получения заказа.
- Также необходимо на email пользователя отправлять детальную информацию с подтверждением заказа, его составом, стоимостью и контактными данными менеджера магазина.
Страница «Производители»
При переходе на страницу просмотра товаров конкретного производителя отсутствует заголовок. Например, http://discontelle.ru/18-blitz.
Рекомендуем выводить в верхней части страницы заголовок с названием производителя.
Нет возможности сразу перейти на страницу другого производителя.
Рекомендуем разместить ссылки на предыдущего и следующего производителя.
На главной странице «Производители» http://discontelle.ru/brands/ выводится алфавитный список, состоящий всего из 8 букв. Учитывая небольшое количество производителей, такое решение является избыточным.
В списке присутствует всего 9 производителей. Их логотипы можно разместить в одну-две строки и они будут сразу видны при загрузке страницы. К сожалению, в данный момент этот список сильно растянут по вертикали и страница имеет избыточную высоту, что отрицательно сказывается на юзабилити сайта. Полный скриншот страницы показан по ссылке https://yadi.sk/i/a0IBbJlTryjEf
Рекомендуем пересмотреть компоновку данной страницы и выводить логотипы производителей в один-два ряда в верхней части страницы.
Страница просмотра товаров производителя
Компоновку данной страницы рассмотрим на примере раздела http://discontelle.ru/3_de-markt
На странице в явном виде отсутствует заголовок с полным называнием производителя.
Рекомендуем выводить название производителя в верхней части страницы.
Верхнюю часть страницы занимает большой текстовый блок, который в большей степени предназначен для поискового продвижения сайта, а не посетителей.
Рекомендуем оставить видимым 2-3 абзаца наиболее важного для пользователя текста, а остальной скрыть под открывающимся спойлером.
Товары на данной странице выводятся по 4 в один ряд. Поэтому в блоке выбора количества выводимых товаров должны быть числа, кратные 4 (16 по умолчанию). К сожалению, в данный момент используется вывод, кратный 3, что приводит к некорректному выводу последнего ряда товаров.
Рекомендуем исправить функционал выбора количества выводимых товаров для корректной работы при выводе 4 товаров в один ряд.
Страница «Контакты»
На данной странице нет привычной для большинства пользователей формы обратной связи.
Рекомендуем разместить форму для отправки сообщения прямо со страницы контактов.
Нет альтернативных способов связи с менеджером с помощью онлайн-чата и мессенджеров. Например, skype, viber и т.д.
Нет возможности заказать обратный звонок со страницы контактов или подкатегорий каталога. Данная функция реализована только на странице детального просмотра товара.
Рекомендуем расширить количество и качество каналов связи с посетителем сайта. Для этого можно использовать комплексные решения, например, сервис krible.com.
Страница «Обратная связь»
В форме обратной связи не указано, какие поля являются обязательными для заполнения. О необходимости обязательного заполнения поля с адресом email и текста сообщения пользователь узнает только после попытки отправки формы. Это продемонстрировано на видео по ссылке
Рекомендуем явно указать, какие поля формы являются обязательными для заполнения.
В одном случае используется строчная буква, во втором – заглавная.
Рекомендуем использовать единые обозначения на всех страницах сайта.
Согласно правилам, после тире необходимо использовать строчное написание букв.
Поиск по сайту
Учитывая достаточно большой размер ассортимент товаров в каталоге, данный модуль является важным элементом для построения качественного юзабилити сайта.
Рассмотрим, насколько качественно реализована его работа на сайте в данный момент.
Поисковый алгоритм работает не совсем корректно. Для примера, был осуществлен поиск по запросу «люстра». При этом в результатах поиска выводятся точечные светильники. Это показано на скриншоте по ссылке https://yadi.sk/i/fkHna-OHrykk2
Рекомендуем обеспечить максимальную релевантность результатов поиска запросу.
Найденные товары выводятся по 4 ряд, при этом сортировка привязана к выводу по 3 в ряд, что приводит к ошибкам. Это показано на скриншоте по ссылке https://yadi.sk/i/8pnx_3rirynYg.
Верстка сайта
Качественная верстка сайта является основой эффективного юзабилити сайта и успешного поискового продвижения сайта.
Она должна соответствовать современным стандартам и обеспечивать корректную работу сайта в любом браузере на любом компьютере, планшете или мобильном телефоне.
Рассмотрим, насколько выполнены эти требования в данный момент.
Согласно данным Яндекс.Метрики пользователи сайта используют такие браузеры:
При этом максимальный показатель отказов при просмотре в браузере Internet Explorer.
Это связано с тем, что сайт практически не работает в данном браузере. Демонстрация приведена на видео по ссылке https://yadi.sk/i/dC891Nd7rypHm.
Ширина экрана пользователей распределена следующим образом:
При этом наблюдается резкий рост показателя отказа на экранах шириной менее 1920 пикселей.
Это продемонстрировано на видео по ссылке https://yadi.sk/i/mmzSv6zRrytdR.
Рекомендуем провести полную ревизию верстки сайта и обеспечить корректную работу всех страниц и элементов сайта при любом разрешении экрана во всех браузерах.
В данный момент на сайте одновременно установлено два счетчика Яндекс.Метрики. Не совсем понятно, для чего сделано такое дублирование.
Внутренняя оптимизация сайта
Качественная внутренняя оптимизация сайта является базой успешного поискового продвижения сайта.
Рассмотрим наиболее критичные ошибки, допущенные на сайте.
Часть страниц практически не содержит текстового контента. Например, http://discontelle.ru/3-svetilniki/4-lyustry/5654-liustra-blitz-1000-46
На большом количестве страниц не заполнен метатег description. Сводная таблица приведена по ссылке https://yadi.sk/i/PLodJVpKryuhu.
Одинаковый description присутствует на 135 страницах сайта. Дубликаты показаны по ссылке https://yadi.sk/i/gKCDiAeFrzHsH
Метатег keywords отсутствует практически на всех страницах сайта (594 из 619).
Тег заголовка первого уровня H1 отсутствует на 32 страницах сайта. Их список приведен по ссылке https://yadi.sk/i/Yw_6mASBrzJNi
Стоит отметить, что в данный момент на сайте также отсутствует служебный файл sitemap.xml с полной картой страниц сайта, который позитивно сказывается на поисковой оптимизации сайта.
Все это приводит к тому, что уровень поискового трафика минимальный (порядка 5-10 человек в день).
Кроме этого следует отметить, что большинство поисковых запросов, по которым посетители заходят на сайт, напрямую не связаны с ассортиментом предлагаемых товаров. Сводная таблица представлена по ссылке https://yadi.sk/i/qqvZ71u0rzK6e
Рекомендуем провести весь комплекс работ по внутренней поисковой оптимизации сайта.
С радостью отвечу на Ваши вопросы по результатам аудита по email, skype или телефону.