Краткий юзабилити-аудит интернет-магазина prirodatela.ru

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

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

Главная

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

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

• На главной странице не показан ни один товар или раздел. Для главной страницы интернет-магазина это неправильно. Можно добавить традиционный блок «Популярные товары» или «Новые поступления». Как минимум стоит вывести в ряд список разделов каталога.

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

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

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

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

• Карточка товара предельно простая, содержит минимальный необходимый набор блоков. Это характерно для универсальных решений.
• Плохо, что нет блоков «Похожие товары» и/или «С этим товаром покупают». В другом аудите, я уже давал подобный совет. Вот выдержка оттуда:

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

• Серый цвет усложняет чтение текста, описывающего товар.

Корзина

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

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

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

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

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

Рецепты красоты (раздел со статьями)

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

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

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

Пара советов по SEO

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

• Для карточек товара это уже сделано. Хорошо.
• Дублируется текст на разных страницах пагинации. Прочитайте заметку об самых частых SEO-ошибках в пагинации.

• Не закрыты от индексации раздел «Поиск» и раздел с результатами фильтра по тегам. Желательно закрыть их в robots.txt, чтобы не создавать дубли страниц в индексе поисковика.

Выводы

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

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

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