Отчет по юзабилити и внутренней SEO-оптимизации интернет-магазина my-homestyle.ru

Сегодня смотрим на юзабилити и seo интернет-магазина домашнего текстиля «Стиль вашего дома». Сайт сделан на OpenCart. Во многом сайт вполне удачный, но все достоинства слихвой перекрываются недостатками. Пластическими операциями монстру Франкенштейна не поможешь, поэтому на мой взгляд, проще все переделать заново, чем улучшать то что есть.  Но все же попробуем перечислить основные минусы, которые вполне можно устранить.

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

Дизайн

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

Добавить «воздуха» между элементами. Сделать крупнее заголовки. Чтобы на странице сразу было понятно где заголовок и в каком разделе мы находимся.

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

Навигация

Верхнее меню

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

Меню с каталогом товаров

Нужно убрать эту кнопочку, или хотя бы ссылку с нее.

Лишняя ссылка для сворачивания каталога товаров

Не выделяются пункты разделов второго уровня

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

Неправильно оформлены подразделы

Судя по карте кликов посетители кликают сразу по пункту меню первого уровня

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

Поэтому на страницах каталога, где есть ссылки на подкатегории, нужно сделать эти ссылки заметнее.

Блок с подразделами недостаточно заметный

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

Не всегда посетители идут дальше в каталоге

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

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

Получится так же, как это сделано сейчас в разделе «Одеяла и подушки». Там тоже нет товаров, но большинство посетителей понимают, куда кликать дальше.

А здесь все хорошо. Кликают правильно и идут дальше в каталоге

Здесь большинство посетителей не уходит в другие разделы, а выбирают подраздел.

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

Устаревшая акция под списком товаров

Активный раздел (тот в котором находится посетитель) нужно подсвечивать более однозначно. Сейчас активный и неактивный разделы в меню почти неразличимы. Из-за этого посетителю сложнее понять в каком разделе он находится.

Нужно более явно выделять активный раздел

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

Нужно поднять выше пункт в меню

Кнопки соцсетей в шапке сайта - лишние

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

Хлебные крошки

Хлебные крошки мало заметны и расположены слишком низко

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

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

Фильтры по товарам

Нужно сделать кнопку "Сбросить" заметнее.

Кнопка "Сбросить" плохо заметна.

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

Пагинация

Карта кликов использования пагинации в каталоге интернет-магазина

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

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

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

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

О пагинации я писал в блоге в статье «Правильная пагинация в каталоге товаров».

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

Нужно добавить в блоки "Рекомендуем" и "Новые поступления" еще по одному ряду. Или из левого столбца блоки "Акции и скидки" и "Лидеры продаж" поставить в центр (изменив им шаблон отображения на аналогичный блоку "Рекомендуем").

С блока "Преимущества" нужно поставить ссылки

Нужно сделать ссылки с преимуществ на соответствующую страницу.

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

Баннеры нужно переделать. Сейчас они почти незаметны и мало отличаются

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

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

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

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

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

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

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

Нужно увеличить заголовок

Заголовок должен быть ощутимо больше основного текста и сразу виден при переходе в раздел. Нужно сделать его больше и заметнее.

Детальная страница (карточка) товара

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

Нужно убрать лишние блоки с детальной страницы — карточки товара

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

От табов можно отказаться чтобы не заставлять посетителя делать лишний клик

Если есть возможность, то для товаров нужно показывать сколько товаров осталось в наличии. Пусть хотя бы порядок (много — мало). Либо, что проще, просто для всех товаров в наличии писать об этом прямо.

Например так:

Нужно добавить в карточку товара индикатор количества

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

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

Например, для у товара заголовок вместо «Постельное белье поплин 1.5 спальное HOBBY "Istanbul трамвай"» может быть таким: «Полутораспальный набор постельного белья из Паплина с принтом «Стамбульский трамвай».

Бренд в название товара выносить необязательно. Вполне достаточно будет выводит его в  описании товара и title — заголовке окна браузера.

Для этого товара  вместо «Детское стеганое покрывало TAC Winx Fairy» писать более человеческое название «Детское стеганое покрывало с принтом «Феи Винкс».

Изображения нужно сделать ярче, четче и больше (под «больше» имеется ввиду не увеличение размера картинки в карточке товара, а увеличение ее разрешения).

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

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

Малая корзина

Малая корзине не заметна при скроле страницы

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

Нужно сделать малую корзину плавающей

Корзина

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

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

Нужно на странице корзины и оформления заказа убрать лишние блоки

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

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

Нужно ссылку оформить как ссылку

Нужно текст «Я зарегистрирован» оформить как ссылку.

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

Если пользователь зарегистрирован но не авторизован заказ сделать нельзя

Единственный вариант для покупателя сделать повторно заказ (без авторизации) с использованием своего е-мейла  выбрать вариант — не регистрироваться на сайте.

Можно сделать заказ только без регистрации

Нужна дополнительная зависимость полей, когда при выборе способа доставки «Самовывоз» ряд полей, ненужных при самовывозе, будет скрываться. Город, Улица, Дом (корпус), Квартира/офис, Подъезд, Этаж, Домофон — от заполнения всех этих полей можно избавить покупателя, если им выбран способ доставки «Самовывоз».

Взаимозависимость полей в корзине

Нужно их показывать по мере необходимости. Чтобы не пугать пользователя сразу полутора десятками полей, которые он должен заполнить. В идеале сначала он должен указать свои ФИО, е-мейл и регион. Этого уже достаточно чтобы, во-первых, его зарегистрировать, во-вторых, показывать далее только те поля, которые действительно нужны. Например, если покупатель укажет регион «Москва», то в способах доставки показываем доставку курьером и  самовывоз. Если выбрана доставка курьером — отображаем все поля что нам нужны для успешной доставки (Улица, дом, домофон и т. д.). Если выбран «Самовывоз», то наоборот, не показываем. То же самое со способами оплаты. Это логично, просто и удобно.

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

Личный кабинет

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

В хедере не выводится имя пользователя после авторизации

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

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

Информация

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

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

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

Нет раздела "О магазине"

Доставка и оплата

Нужно этому разделу уделить больше внимания.

Контакты

Слишком много способов контактов

Если по всем из них ведется работа — это хорошо. Но если нет, то неиспользуемые способы связи нужно убрать.

Поддержка мобильных устройств

Процент мобильных пользователей в интернет-магазине

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

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

Ошибки на сайте

Вот они:

Первый товар: здесь — «Комплект в кроватку 7 предметов. Бязь, арт. 25.3 (голубой)», второй здесь«15/043-B Постельное белье Cleo 1,5-спальное, бязь.»

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

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

Медленная работа сайта

Вот что говорит PageSpeed Insights — инструмент для проверки скорости загрузки страниц сайта.

Сайт медленно загружается

На мобильных устройствах сайт загружается медленно

Нужно подумать как ускорить работу сайта.

Сео

В целом, на сайте базовый минимум внутренней seo-оптимизации реализован. Но недоработок немало.

Результаты фильтра

Нужно устранить дубли и генерировать title с учетом выбранных параметров фильтра. Дополнительно эти параметры можно указывать в названии страницы — заголовке h1.

Например, если посетитель сайта, выбирая постельное белье, задал следующие параметры фильтрации: Размер: 2-х спальное, Ткань: Бамбук, Рисунок: море и пляж, то title  то title может быть таким:  «2-х спальное постельное белье, бамбук, с рисунком море и пляж в интернет-магазин Стиль вашего дома». Это простейшая схема, реализации, которая вполне жизнеспособна. Правильнее будет постараться чуть больше и добавить склонения к результатам фильтра, чтобы заголовок выглядел еще более человеческим.

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

Детальная страница товара

Нужно поставить другие кнопки для шаринга. Например, от Яндекса или другие.

Добавить к карточкам товара og-теги. Для интернет-магазина нужно заполнять og:title, og:url, og:image, og:description.

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

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

Выше уже была рекомендация изменить заголовки товаров. Теперь речь о том, чтобы сделать более «человеческими» заголовки окна браузера – title. Нужно поработать над шаблонами, по которым генерируется title для страницы с товаром.

Таким образом, title для товара должен быть вместо «Постельное белье поплин 1.5 спальное HOBBY "London"» таким «1,5 спальное постельное белье из паплина, с рисунком "London". Бренд Hobby — интернет-магазин my-homestyle.ru», что будет лучше для SEO и правильнее с точки зрения русского языка.

Каталог

Не все страницы каталога правильно ранжируются в поисковых системах

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

Нет заголовка h1 на странице списка товаров

Нужно поменять местами заголовки. В фильтре сделать заголовок в теге span, а заголовок под фильтром прописать в теге H1.

Нужно поменять заголовки в фильтре и заголовок страницы

Также стоит обратить внимание на страницы, на которых нет фильтра, но сразу выводятся не товары, а разделы. Например «Одеяла и подушки» и «Ортопедические матрасы» и  «Матрасы Lonax».

Отсутствие заголовка H1 у разделов — серьезный недостаток, который может отрицательно влиять на позиции сайта в поиске.

Мелочи

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

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

Нужно или закрыть его от индексации в robots.txt или, если этого делать по какой-то причине не хочется, нужно для пустых страниц с поиском предусмотреть возможность отдавать код 404, а не 200. Так в индексе поисковых систем не появится пустых страниц.

Нужно настроить автоматическое создание карты сайта, прописать ее в robots.txt, указать в Яндекс.Вебмастере и Гугл.Вебмастере.

На всякий случай: не нужно путать sitemap.xml со старой доброй картой сайта, где перечислены все основные разделы.)

Вывод

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

У сайта проблема с дизайном. Цветовая гамма однообразная, важные элементы навигации, выбора товаров, оформления заказа — практически не выделены, сливаются с общим нагромождением элементов.

Несмотря на то, что сайт обновили только в 2014 году, шаблон на котором он сделан, был актуален в 2010-12 году, когда мобильники и планшеты не были так распространены, когда экраны с высоким разрешением не были так распространены как сегодня.

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

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

Если не брать в расчет основную рекомендацию — переделать дизайн интернет-магазина (а заодно и сменить CMS), то приоритеты при устранении недостатков я бы расставил следующим образом:

  1. Небольшие ошибки в дизайне (оформление заголовков, ссылок и т. д.). Это несложная и быстрая работа.
  2. Доработка страниц «Доставка и оплата», «О магазине».
  3. Работы по SEO. Перечисленные рекомендации — не объемные работы, но внедрение их увеличит количество посетителей из поисковиков, поэтому их нужно сделать одними из первых.
  4. Работа с карточкой товара (убрать лишнее, добавить похожие товары и др. рекомендации, которые были даны выше для детальных страниц товаров).
  5. Работа с текстами: названия и описания товаров, тексты для разделов.
  6. Улучшить изображения товаров. Если есть возможность — автоматически, если нет, тогда постепенно вручную.
  7. Доработать корзину в соответствии с рекомендациями. Сначала внести простые правки. Часть рекомендаций по корзине — достаточно сложные (например, взаимозависимость полей и упрощенный шаблон). Их я бы советовал реализовывать в последнюю очередь. Нелишним будет упомянуть, что сделать эти правки нужно так, чтобы корзина не ломалась в самом разгаре заказа.

Статьи по теме

 

Комментарии


Неверный код с картинки

Ваше имя:

Электронная почта:

Комментарий :


Введите код с картинки:

CAPTCHA