Юзабилити-аудит интернет-магазина климатического оборудования Проходимся по сайту и исправляем ошибки 

Решили, что давно у нас не было статей-аудитов по юзабилити. Исправляемся. =) На примере нашего клиента рассмотрим, как лучше доработать основные страницы сайта, чтобы пользователям было легче выбрать товар и оформить заказ.

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

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

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

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

Первый экран Главной страницы сайта клиента

Цифрами отмечены основные блоки, которые следует доработать.

  1. Шапка сайта – не хватает информации. Пользователь только зашел на сайт и ему важно определить, чем занимается компания и в каких регионах.

    Логотип недостаточно ориентирует, поэтому стоит добавить соответствующую надпись о направлении деятельности компании. Например, «Магазин климатического оборудования».

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

    Пример, как лаконично указать данную информацию в шапке сайта:

    Шапка сайта с информацией о компании

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

    Два горизонтальных меню в шапке сайта

    Подробнее о том, как должны выглядеть основные элементы навигации, рассказали в данном материале.

  3. В слайдере визуально перегруженные баннеры. Контрастный фон с большим количество элементов тяжело воспринимается, из-за этого основной текст предложения теряется. Лучше затемнить фоновое изображение или выбрать более однотонный и спокойный фон, как в примере ниже:

    Лаконичный баннер для слайдера

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

    Пролистываем страницу вниз и видим всего пару блоков и подвал сайта:

    Остальная часть Главной страницы сайта клиента

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

    Блок с преимуществами для Главной страницы

  5. Нужен блок с обзором категорий каталога, услуг. На Главной, чтобы сориентировать новых посетителей сайта, стоит показать клиенту, какое оборудование продает компания и какие сопутствующие услуги имеются. Пример лаконичного блока с обзором категорий каталога:

    Блок с обзором категорий каталога

    Дополнительно можно рассказать о схеме работы, способах оплаты и доставки:

    Схема работы

    Способы оплаты и доставки

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

    Блок о компании

Общее впечатление от страницы: мало информации и скромный обзор возможностей. Есть сведения об акциях и товарах со скидкой, но ни слова о преимуществах, дополнительных возможностях, условиях работы. Пользователю придется искать данную информацию самостоятельно.

Больше советов по оформлению и наполнению Главной страницы можно найти здесь.

Страница каталога

Допустим, мы ищем кондиционер в офис. Переходим в соответствующую категорию каталога:

категория каталога

Страница помогает найти необходимый товар, но есть некоторые недочеты:

  1. Немного подкатегорий. Сейчас удается перейти только в категорию с акционными или настенными кондиционерами, что не упрощает поиск. Если зайти к конкурентам, то можно найти гораздо больше видов кондиционеров:

    Список подкатегорий

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

    Список популярных подкатегорий

  2. Нет кнопок добавления товара в избранное и список сравнения. В основном меню и над списком товаров есть ссылки на разделы избранного и сравнения, но не ясно, как добавить в них товары. После доработок клиенту вывели соответствующие кнопки:

    Кнопки добавления товара в избранное и список сравнения

  3. Ссылки на страницы пагинации и общее количество товаров показано только под списком товаров. Лучше продублировать данную информацию перед списком товаров, чтобы сориентировать пользователей.

    Общее количество товаров и страницы пагинации над списком товаров

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

В дополнение вот наша подборка рекомендаций по оформлению каталога.

Страница товара

Например, нам понравился следующий кондиционер, и мы бы хотели побольше узнать о нем, поэтому переходим на страницу товара:

Страница товара на сайте клиента

Информативная страница, но вот что стоит добавить для упрощения работы с пользователями:

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

    Выбор сопутствующих услуг на странице товара

  2. Пустые вкладки. Если пройтись по вкладкам, то нет никакой информации на вкладке гарантий и отзывов.

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

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

    Дополнительно для кондиционеров стоит добавить вкладку с видеообзорами товаров и/или документацией:

    Пример вкладки с документацией

  3. Нет подборок товаров. Чтобы пользователю было легче выбирать товары, можно добавить блок с похожими товарами или подборкой товаров выбранного бренда.

    Пример блока с похожими товарами

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

Страницы оформления заказа

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

Всплывающее окно с содержимым корзины

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

Переходим на страницу оформления заказа:

Страница заказа

Шаг 1. Хорошее начало – видим возможность оформления заказа с регистрацией и без нее. Также удобно разделен процесс заказа по шагам. Выбираем оформление заказа без регистрации и идем дальше:

Ввод контактных данных

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

способ доставки

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

Информация о доставке

Шаг 4. И тут мы натыкаемся на отсутствие варианта оплаты для юридических лиц, а именно оплаты по безналичному счету:

Способы оплаты

Для физических лиц проблем нет, Яндекс.Касса позволяет платить разными вариантами. Открываем последний шаг:

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

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

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

Рекомендуем еще прочитать туториал по созданию удобных форм.

Итоги

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

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

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

© 1PS.RU, при полном или частичном копировании материала ссылка на первоисточник обязательна.

Понравилась статья?

8 чел. оценили, средняя оценка 4.9

Чек-лист «Как создать репутацию с нуля»

Что делать, если вы на рынке новичок и о вас ничего не говорят? Если репутации еще нет, то ее нужно создать. Наш чек-лист вам в помощь.

Получить чек-лист

Популярные статьи

Все популярные статьи »

Комментарии (0)

Правила комментирования блога

Проверить позиции сайта

Запросы для проверки
Регион для проверки
Оставить коммент к статье

Полетели к ТОПу прямо сейчас!

Подпишитесь на рассылку и первыми получайте полезный контент без воды и банальностей. Иногда с котиками. =)

Летим с нами в ТОП

Подписывайтесь на рассылку и получайте практические советы по продвижению сайта

Ваш email

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

Я уже с вами

Мы понимаем, что всплывающие окна – это зло =( Но пока по-другому не получается предупредить вас об использовании куки-файлов на нашем сайте. Так мы с каждым днем будем становиться лучше и полезнее для вас!

×

Тяните за рычаг
и выигрывайте классные подарки

Главный приз – бесплатное продвижение сайта в течение 1 месяца!

Введите свой email и нажмите на кнопку

Да вы настоящий везунчик!

Активировать выигрыш

Повезет в любви! =)

Но не вешайте нос – попытайте удачу еще раз.

Сыграть заново

Закрыть и не показывать больше