Юзабилити-экспертиза: выпуск №3

Ваши заявки на бесплатный аудит юзабилити присылайте по адресу: usability-audit@oborot.ru. Более подробно об условиях участия можно прочитать в выпуске №1 и выпуске №2.

Cегодня в "Юзабилити-экспертизе":

Ваша главная страница – Клондайк. – Покупать или играть в "Морской бой?" – Небыстрый "быстрый заказ".

Сайт: kolomenka.ru

Дежурный эксперт: Барченков Иван, директор по развитию, РА ООО "МедиаНация".

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

Начнем с "шапки"

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

Логотип компании

При клике на логотип происходит перенаправление на главную страницу сайта со следующим адресом: http://kolomenka.ru/#logo

Желательно изменить данную ссылку на следующую http://kolomenka.ru/. Дело в том, что эти страницы являются дублями (о том, чем вредны дублирующиеся страницы, можно прочитать в рубрике "Сеошкола"), и их невозможно закрыть в robots.txt по той причине, что символ # воспринимается как символ комментирования.

Отзывы Яндекс.Маркет

В верхней части сайта размещен блок с отзывами Яндекс.Маркет.

Замечу, его лучше размещать на видном месте только тогда, когда вы уже "заработали" 4 или 5 звезд. С количеством звезд здесь все хорошо, но стоит кликнуть по блоку отзывов – и потенциальный клиент среди благостных отзывов обнаруживает следующую картину:

Сами понимаете, на отзывы лучше оперативно реагировать (это касается не только Яндекс.Маркета, но и соцсетей). За положительный отзыв стоит поблагодарить клиента, ну а на негативные отзывы тем более стоит оперативно реагировать (о том, как это делать, для Oborot.ru подготовил материал известный бизнес-тренер Алекс Левитас).

Главное меню

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

Взглянем на выпадающее меню с подкатегориями товаров.

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

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

Вопрос: что делать с теми товарными категориями, для которых число подкатегорий невелико:

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

Также стоит переименовать пункт Sale в "Скидки" и как-то визуально его выделить: в конце длинного горизонтального меню он остается совершенно (и незаслуженно) незамеченным.

Поиск и выдача

На сайте реализован алгоритм умного поиска:

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

Теперь изучим поисковую выдачу.

В выдаче отсутствуют фильтры по цене и популярности товаров – предлагаю их добавить. После этого стоит исправить фильтр цвета: у многих товаров он работает некорректно.

И конечно, нужно стандартизировать кнопку "Купить": сейчас она у разных товаров выглядит по-разному.

Копнем чуть глубже. Что делать с товарами, которые есть в каталоге, но которых нет сейчас в наличии? Можно удалить их из поисковой выдачи, но как вариант, я бы предложил сформировать для них отдельный блок – "Предзаказ".
Также я бы предложил выводить в выдаче кратное четырем количество товарных карточек. Тогда в нижнем правом углу не будет возникать некрасивое пустое место.

Подвал (футер)

В футере уместно было бы добавить юридическую информацию о фирме, продублировать вспомогательное меню и (или) добавить пункты, которые могут заинтересовать посетителей: "Вакансии", "О компании", "Новости", "Подарочные карты" и т.д.

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

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

Хорошая новость для владельцев сайта: ваша главная страница – это просто Клондайк! В том смысле, что из нее можно извлечь золото, но для этого придется поработать. Здесь много свободного места, которое можно использовать для анонса новых товаров, акций и скидок. Пока же здесь – огромный и при этом неактивный и неинформативный баннер на всю ширину экрана.

Я предлагаю полностью переработать страницу, удалив с нее неактивный баннер на весь экран, SEO-текст и длинный, унылый список регионов, в которые предлагается доставка.

Как рабочий вариант, могу предложить такую блок-схему расположения элементов на странице:

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

Категории товаров

Для начала можно перенести пункт "Сортировать по" в самую верхнюю строку, расположив его правее "количества товаров на странице" (выделено красным прямоугольником). Так мы получим еще свободных полсантиметра под карточки товаров. "Количество товаров на странице" можно сделать в виде выпадающего меню: это также поможет сэкономить место.

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

Также еще раз обращаю внимание на то, как сделан фильтр по цвету:

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

Далее стоит убрать текст "есть в наличии", который то появляется, то нет. Есть смысл добавить фильтр по стране-производителю.

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

Карточка товара

Как я уже отмечал, на разных товарных карточках кнопка "Купить" выглядит по-разному. Конечно, ее надо унифицировать. Я бы выбрал тот вариант, что справа: в зеленый квадратик на картинке слева сложно с первого раза попасть мышкой. Вы хотите, чтобы посетитель купил у вас на сайте – или поиграл с вами в "морской бой"?

Для магазина детских игрушек особенно актуальна возможность в деталях рассмотреть товар. При наведении курсора на фотографию, изображение должно автоматически увеличиваться. В качестве примера: вот как это реализовано у магазина игрушек Korablik.ru.

В блоке "Похожие товары" следует выводить название, цену и кнопку "Купить". Иначе получается, что блок нужен только для красоты и напрасно отвлекает на себя внимание пользователя. Также в этом блоке выводятся товары, которых нет в наличии. Их нужно удалить.

Кнопка "Быстрый заказ"

Когда пользователь нажимает на кнопку "Быстрый заказ", он, как несложно догадаться, хочет купить товар быстро. А что делаем мы? Мы его заставляем заполнять "обязательные" поля, без половины из которых можно обойтись.

Рекомендую оставить здесь только два поля: "Телефон" (обязательное) и "Имя". И большую кнопку "Позвоните мне".

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

Сопутствующие товары

Представьте, что вы мама или папа и хотите купить своему ребенку самокат. Разве вас не заботит то, что ребенок может упасть с него и разбить коленку или удариться головой? И вот тут интернет-магазин должен быть наготове, чтобы предложить вместе с самокатом шлем, наколенники и т.д., при этом комплектом и со скидкой. Предложите клиентам сопутствующие товары – так, как это реализуют Ozon и сотни других интернет-магазинов.

Опция "Сравнение товаров"

Можете ли вы, взглянув на это сравнение товаров, быстро оценить, чем один самокат отличается от другого, кроме цены?

Лично я – нет. Для того чтобы сделать качественное и удобное сравнение, нужно, чтобы у каждого товара появились свои уникальные поля спецификации, которые и будут сравниваться между собой. Так, как это реализовано, например, на Яндекс.Маркете.

Корзина

Для начала удаляем тест "Управление корзиной".

Далее убираем Артикул или выводим его в отдельный столбец.

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

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

Проведите тестирование, в котором сравните исходный вариант и вариант, например, без полей "Комментарии", "Номер домофона", "Станция метро".

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

Удачи и хорошего дня!

Об авторе:

Барченков Иван – директор по развитию в рекламном агентстве "МедиаНация", соискатель MBA.

Раньше работал в "Яндексе", менеджером по работе с ключевыми клиентами. В профессиональную компетенцию входят:

 

• формирование маркетинговой стратегии для интернет-проектов;

 

 

• оптимизация рекламных бюджетов в Интернете;

 

 

• веб-аналитика;

 

 

• юзабилити-анализ сайтов.

 

Читайте также: Что такое onboarding и как лучше подойти к его реализации.