Юзабилити-экспертиза: выпуск №3
![Юзабилити-экспертиза: выпуск №3 Юзабилити-экспертиза: выпуск №3](https://oborot.ru/wp-content/uploads/2017/04/usability_logo_1370428165.jpg)
Ваши заявки на бесплатный аудит юзабилити присылайте по адресу: usability-audit@oborot.ru. Более подробно об условиях участия можно прочитать в выпуске №1 и выпуске №2.
Cегодня в "Юзабилити-экспертизе":
Ваша главная страница – Клондайк. – Покупать или играть в "Морской бой?" – Небыстрый "быстрый заказ".
Сайт: kolomenka.ru
Дежурный эксперт: Барченков Иван, директор по развитию, РА ООО "МедиаНация".
Главная страница
Начнем с "шапки"
![](http://oborot.ru/images/articles/usab_kolomenka1.jpg)
Логотип компании
При клике на логотип происходит перенаправление на главную страницу сайта со следующим адресом: http://kolomenka.ru/#logo
Желательно изменить данную ссылку на следующую http://kolomenka.ru/. Дело в том, что эти страницы являются дублями (о том, чем вредны дублирующиеся страницы, можно прочитать в рубрике "Сеошкола"), и их невозможно закрыть в robots.txt по той причине, что символ # воспринимается как символ комментирования.
Отзывы Яндекс.Маркет
В верхней части сайта размещен блок с отзывами Яндекс.Маркет.
![](http://oborot.ru/images/articles/usab_kolomenka2.jpg)
![](http://oborot.ru/images/articles/usab_kolomenka3.jpg)
Главное меню
Не все пользователи просматривают ваш сайт с больших мониторов. В этом легко убедиться, проверив в статистике Google Analytics разрешения экранов, с которых заходят на ваш сайт (это можно сделать во вкладке Содержание-Статистика страницы).
Взглянем на выпадающее меню с подкатегориями товаров.
![](http://oborot.ru/images/articles/usab_kolomenka4.jpg)
Для этого нужно растянуть выпадающее меню и сделать его равным по ширине всему блоку горизонтального меню. За счет этого мы сможем сократить длину списка и стандартизировать все пункты выпадающего меню (красным выделена предполагаемая площадь выпадающего меню).
![](http://oborot.ru/images/articles/usab_kolomenka5.jpg)
![](http://oborot.ru/images/articles/usab_kolomenka6.jpg)
Также стоит переименовать пункт Sale в "Скидки" и как-то визуально его выделить: в конце длинного горизонтального меню он остается совершенно (и незаслуженно) незамеченным.
![](http://oborot.ru/images/articles/usab_kolomenka7.jpg)
Поиск и выдача
На сайте реализован алгоритм умного поиска:
![](http://oborot.ru/images/articles/usab_kolomenka8.jpg)
Теперь изучим поисковую выдачу.
![](http://oborot.ru/images/articles/usab_kolomenka9.jpg)
![](http://oborot.ru/images/articles/usab_kolomenka10.jpg)
Копнем чуть глубже. Что делать с товарами, которые есть в каталоге, но которых нет сейчас в наличии? Можно удалить их из поисковой выдачи, но как вариант, я бы предложил сформировать для них отдельный блок – "Предзаказ".
Также я бы предложил выводить в выдаче кратное четырем количество товарных карточек. Тогда в нижнем правом углу не будет возникать некрасивое пустое место.
Подвал (футер)
![](http://oborot.ru/images/articles/usab_kolomenka12.jpg)
Как вариант – можно продублировать в футере логотипы платежных систем, размещенные сверху.
Главная страница
Хорошая новость для владельцев сайта: ваша главная страница – это просто Клондайк! В том смысле, что из нее можно извлечь золото, но для этого придется поработать. Здесь много свободного места, которое можно использовать для анонса новых товаров, акций и скидок. Пока же здесь – огромный и при этом неактивный и неинформативный баннер на всю ширину экрана.
![](http://oborot.ru/images/articles/usab_kolomenka13.jpg)
Как рабочий вариант, могу предложить такую блок-схему расположения элементов на странице:
![](http://oborot.ru/images/articles/usab_kolomenka15.jpg)
Категории товаров
Для начала можно перенести пункт "Сортировать по" в самую верхнюю строку, расположив его правее "количества товаров на странице" (выделено красным прямоугольником). Так мы получим еще свободных полсантиметра под карточки товаров. "Количество товаров на странице" можно сделать в виде выпадающего меню: это также поможет сэкономить место.
![](http://oborot.ru/images/articles/usab_kolomenka17.jpg)
Также еще раз обращаю внимание на то, как сделан фильтр по цвету:
![](http://oborot.ru/images/articles/usab_kolomenka18.jpg)
![](http://oborot.ru/images/articles/usab_kolomenka19.jpg)
И последнее, что стоит добавить – блок с самыми популярными товарами из данной категории, который должен выводиться либо в начале, либо в конце страницы.
Карточка товара
Как я уже отмечал, на разных товарных карточках кнопка "Купить" выглядит по-разному. Конечно, ее надо унифицировать. Я бы выбрал тот вариант, что справа: в зеленый квадратик на картинке слева сложно с первого раза попасть мышкой. Вы хотите, чтобы посетитель купил у вас на сайте – или поиграл с вами в "морской бой"?
![](http://oborot.ru/images/articles/usab_kolomenka20.jpg)
В блоке "Похожие товары" следует выводить название, цену и кнопку "Купить". Иначе получается, что блок нужен только для красоты и напрасно отвлекает на себя внимание пользователя. Также в этом блоке выводятся товары, которых нет в наличии. Их нужно удалить.
![](http://oborot.ru/images/articles/usab_kolomenka21.jpg)
Кнопка "Быстрый заказ"
Когда пользователь нажимает на кнопку "Быстрый заказ", он, как несложно догадаться, хочет купить товар быстро. А что делаем мы? Мы его заставляем заполнять "обязательные" поля, без половины из которых можно обойтись.
![](http://oborot.ru/images/articles/usab_kolomenka22.jpg)
Также нужно установить ограничения на ввод символов. А поле "Адрес" хорошо бы привязать к геобазе объектов так, чтобы при начале ввода пользователю выводились подсказки с названием города, улицы ит.д.
Сопутствующие товары
Представьте, что вы мама или папа и хотите купить своему ребенку самокат. Разве вас не заботит то, что ребенок может упасть с него и разбить коленку или удариться головой? И вот тут интернет-магазин должен быть наготове, чтобы предложить вместе с самокатом шлем, наколенники и т.д., при этом комплектом и со скидкой. Предложите клиентам сопутствующие товары – так, как это реализуют Ozon и сотни других интернет-магазинов.
Опция "Сравнение товаров"
Можете ли вы, взглянув на это сравнение товаров, быстро оценить, чем один самокат отличается от другого, кроме цены?
![](http://oborot.ru/images/articles/usab_kolomenka23.jpg)
![](http://oborot.ru/images/articles/usab_kolomenka24.jpg)
Корзина
Для начала удаляем тест "Управление корзиной".
![](http://oborot.ru/images/articles/usab_kolomenka25.jpg)
![](http://oborot.ru/images/articles/usab_kolomenka26.jpg)
Что касается поля авторизации, то я бы посоветовал его удалить и значительно сократить количество полей в форме.
Проведите тестирование, в котором сравните исходный вариант и вариант, например, без полей "Комментарии", "Номер домофона", "Станция метро".
Постоянно экспериментируя, вы найдете самые выигрышные варианты и сможете повысить продажи через сайт.
Удачи и хорошего дня!
Об авторе:
Барченков Иван – директор по развитию в рекламном агентстве "МедиаНация", соискатель MBA.
Раньше работал в "Яндексе", менеджером по работе с ключевыми клиентами. В профессиональную компетенцию входят:
- формирование маркетинговой стратегии для интернет-проектов;
- оптимизация рекламных бюджетов в Интернете;
- веб-аналитика;
- юзабилити-анализ сайтов.
Читайте также: Что такое onboarding и как лучше подойти к его реализации.