Краткий юзабилити-аудит интернет-магазина prirodatela.ru
Сегодня на юзабилити-аудите у нас интернет-магазин натуральных продуктов для красоты PrirodaTela.ru, разработанный на конструкторе сайтов Nethouse.ru.

Делать обзор юзабилити такому магазину, все равно, что сравнивать автомобили, которые только что сошли с конвеера. В них отличаться будет только цвет и водитель, все остальное под копирку.
Облачный конструктор не дает тех же возможностей для кастомизации, как интернет-магазин, разработанный на отдельной CMS и размещенный на собственном хостинге. Поэтому я постараюсь давать рекомендации такие же — косметические, чтобы можно было сделать их, используя только мышку.
Оглавление
Главная
- По дизайну заметно, что шаблон стандартный, что это магазин подстраивал свой контент под шаблон, а не наоборот, когда дизайн разрабатывается под задачи заказчика. Большие картинки в хедере ни о чем не говорят, только мешают. На их фоне теряется название и описание магазина, и основное меню. При этом они занимают весь первый экран. Если бы целевым действием главной страницы был просмотр этой большой картинки, то можно было бы сказать, что дизайн решает задачу прекрасно.
- Огромный слайдер с фотографиями выполняет декоративную функцию, это не рекламные баннеры, как часто бывает, а просто картинки, которые предлагается посмотреть посетителю магазина. Так же как и картинка в хедере, слайдер зря занимает место. Даже если что-то на этих фотографиях понравится, непонятно, как этот товар называется, как его найти, чтобы посмотреть подробнее или заказать.
- В блоке «Почему выбирают нас» непонятно куда кликать. При клике на центральную картинку, она просто открывается в большем размере, что совсем не к месту. А зеленые баннеры слева и справа служат для перехода в основные разделы каталога товаров. Но, во-первых, они слишком похожи, чтобы понять, что левая и правая картинки отличаются нужно потратить несколько секунд, во-вторых, и главное, они выглядят как элементы дизайна, на которые не нужно кликать. Сделайте кнопки на них не зелеными, а, например, желтыми или оранжевыми, чтобы кнопки явно отличались от общего фона баннера и сразу были заметны. Тогда клики по ним увеличатся.
- На главной странице не показан ни один товар или раздел. Для главной страницы интернет-магазина это неправильно. Можно добавить традиционный блок «Популярные товары» или «Новые поступления». Как минимум стоит вывести в ряд список разделов каталога.
Каталог товаров
- Слишком большая шапка и слишком мало функций она несет. На всех внутренних страницах шапку нужно уменьшить.
- Маленькие изображения товаров в списке и их названия, написанные мелким шрифтом, выглядят непропорционально всему сайту. То же самое с размером шрифта в названии разделов в правом столбце. Неудобно рассматривать фото товаров, трудно читать мелкий шрифт.
- Изображения разных товаров порой одинаковые. Это плохо и для продаж и для SEO.
- Товаров в разделах не так много (в самом большом всего 27 товаров), поэтому можно обойтись без пагинатора. Это улучшит просматриваемость товаров в списке, даст им больше шансов быть купленными. Подробнее об этом можно прочитать в статье, о правильной пагинации в каталоге товаров.
Детальная страница товара
- Карточка товара предельно простая, содержит минимальный необходимый набор блоков. Это характерно для универсальных решений.
- Плохо, что нет блоков «Похожие товары» и/или «С этим товаром покупают». В другом аудите, я уже давал подобный совет. Вот выдержка оттуда:
В обычном, офлайновом магазине, одно из основных отличий хорошего продавца (который продает больше) от плохого в том, что хороший продавец предлагает покупателю разные варианты, если ему по какой-то причин не подошел товар. Карточка товара, как продавец тоже должна предлагать варианты. К тому же эти блоки упрощают навигацию и увеличивают среднюю глубину просмотра.
- Серый цвет усложняет чтение текста, описывающего товар.
Корзина
- В корзине все в порядке, за исключением, пожалуй, только шапки, которая одна на весь сайт. Для корзины дизайн должен быть упрощенным и такая большая шапка ни к чему.
- В корзине есть интересная фишечка, которой я ни у кого в таком виде пока не встречал. Когда товар из корзины удаляется, он не удаляется полностью, а остается в корзине, но становится полупрозрачным. Сумма заказа при этом, конечно, пересчитывается. Таки образом, если покупатель решит вернуть товар, ему будет это сделать очень просто.
Оформление заказа
- Оформление заказа тоже не вызывает вопросов. Разве что к полям, не помешали бы подписи, с расшифровкой, зачем покупатель заполняет то или иное поле.
- Поля в корзине не взаимозависимые. Если при оформлении заказа, выберем «Самовывоз», то поле «Адрес» заполнять все равно придется. Пользователю будет непонятно, зачем это делать ведь он планирует сам приехать и забрать свой заказ, зачем для этого указывать свой адрес. Если есть возможность в Нетхаусе настроить зависимость полей от способов доставки, это нужно сделать.
- Нигде при оформлении нет возможности выбрать способ оплаты. Сразу оплатить заказ нельзя. На странице, завершающей оформление заказа, говорится, что вся необходимая информация придет на е-мейл. На е-мейл приходит состав заказа и данные, которые указал покупатель при оформлении. Скорее всего, счет для оплаты менеджер выставляет после подтверждения заказа. Об этом желательно написать на завершающей странице и в письме, которое приходит на е-мейл.
Рецепты красоты (раздел со статьями)
- В списке статей, при клике на изображение, оно открывается большего размера, вместо перехода на детальную страницу этой статьи.
- В статьях используется неконтрастный серый текст, который сложно читать. Пользователь будет при чтении испытывать лишнее напряжение.
- Детальные страницы статей не содержат товаров магазина. Если посетитель перешел на статью из результатов поиска, он может вообще не понять, что находится в интернет-магазине. Прочитает статью и пойдет дальше, искать товары, про которые в ней сказано. В идеале товары, о которых идет речь в статье нужно вставлять в текст в качестве иллюстраций, чтобы можно было из статьи легко перейти на карточку соответствующего товара. Скромной ссылки в конце текста – недостаточно. Посмотрите статью о том, как увеличить продающую силу статей в интернет-магазине.
Пара советов по SEO
- Если на всех страницах кроме главной в заголовке окна браузера, название магазина «Природа тела» переместить в конец заголовка, то в поисковике в результатах выдачи сниппет будет смотреться лучше.
- Для карточек товара это уже сделано. Хорошо.
- Дублируется текст на разных страницах пагинации. Прочитайте заметку об самых частых SEO-ошибках в пагинации.
- Не закрыты от индексации раздел «Поиск» и раздел с результатами фильтра по тегам. Желательно закрыть их в robots.txt, чтобы не создавать дубли страниц в индексе поисковика.
Выводы
Мое мнение — магазин на Нетхаусе может быть хорошим вариантом, только если вы решили попробовать, потренироваться и получить опыт, чтобы лучше понять что именно и каким должно быть в вашем настоящем магазине. Сколько-то серьезному проекту в Нетхаусе тесновато.
Дизайн — простейший шаблон, не слишком удобный и функциональный. Каталог, детальная страница товара, оформление заказа — все работает как нужно и свои задачи выполняет. Но ровно настолько чтобы эти же задачи выполнялись в любом другом магазина на Нетхаусе с любыми другими товарами от любого другого клиента.
Изменение функциональности в таком облачно сервисе (как мне кажется) возможны только в пределах имеющихся «кубиков». Основной совет, который я бы дал — разработать собственный дизайн для магазина, чтобы он решал ваши задачи, показывал ваши преимущества, был заточен под ваш товар.
Статьи по теме

Отчет по юзабилити основных страниц интернет-магазина мужского белья incado.ru
Красота — страшная сила!
4 июня 2016
Отчет по юзабилити и SEO интернет-магазина текстиля textile-max.ru
Бохато!
11 февраля 2016

Отчет по юзабилити и внутренней SEO-оптимизации интернет-магазина my-homestyle.ru
256 оттенков коричневого.
4 ноября 2015
Обзор юзабилити интернет-магазина kavkazsuvenir.ru
Что еще можно улучшить, когда все улучшено до нас.
12 августа 2015