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

Как проверить, что кнопки и ссылки на сайте спортивного магазина понятны покупателю

Разбираем, как без сложной аналитики понять, ждёт ли покупатель от кнопки именно того, что она делает. Есть пример карточки кроссовок и чек-лист.

Раздел: Дизайн — статьи о сайтах

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

Какую кнопку или ссылку считать непонятной

Непонятна та, после нажатия на которую происходит не то, чего ждал человек. Типичные случаи для спортивной розницы: «Подробнее» ведёт не к описанию товара, а в общий раздел бренда; «Купить» нажимается, хотя размер не выбран; «Быстрый заказ» не объясняет, оформится ли заказ сразу или менеджер перезвонит; «Размеры» открывает то таблицу, то форму подбора. Отдельная зона риска — наличие в магазинах, комплекты («куртка + брюки»), сезонные подборки и условия обмена.

Условный пример: карточка беговых кроссовок

Представим фрагмент карточки. Название: «Кроссовки для бега мужские». Ниже ряд размеров с 40 по 46, затем элементы: кнопка «Купить», кнопка «Быстрый заказ», ссылки «Наличие», «Размеры», «Подробнее» и «Возврат».

Что здесь вызывает вопросы:

  • «Купить» без выбранного размера: после нажатия либо ничего не происходит, либо всплывает ошибка. Лучше показать текст «Выберите размер», а после выбора — «Добавить в корзину».
  • «Быстрый заказ»: непонятно, нужна ли регистрация и оплата. Точнее: «Заказать без регистрации» — если это действительно так.
  • «Наличие»: не ясно, речь о складе или о магазинах. Вариант: «Проверить наличие в магазинах».
  • «Размеры»: лучше назвать результат — «Как подобрать размер по длине стопы».
  • «Подробнее» рядом с блоком доставки: заменить на «Сроки и стоимость доставки».
  • «Возврат»: уточнить — «Условия обмена и возврата».

Принцип простой: на кнопке пишется действие или то, что человек увидит после нажатия.

Как провести проверку за один день

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

Затем сделайте проверку «вне контекста». Покажите коллеге или знакомому, не работающему с сайтом, только список подписей и спросите, что случится после каждого нажатия. Расхождения между ответом и реальностью — первые кандидаты на правку.

Следующий шаг — задания для 5–6 человек, похожих на ваших покупателей. Например: «Узнайте, есть ли эти кроссовки в вашем размере в магазине рядом с домом» или «Найдите, как вернуть товар, если не подошёл размер». Не подсказывайте, а наблюдайте: куда пошёл первый клик, где была пауза, где человек вернулся назад. Такая выборка не даёт статистики, но хорошо показывает повторяющиеся затруднения.

Что отдельно проверить на телефоне

Многие покупатели открывают магазин со смартфона, и там проблемы проявляются сильнее.

  • Закреплённая кнопка «В корзину» не перекрывает выбор размера и текст условий.
  • Соседние ссылки («Размеры», «Отзывы», «Наличие») не расположены так плотно, что палец попадает не туда.
  • После нажатия есть видимая реакция: смена текста, индикатор загрузки, сообщение «Товар добавлен».
  • Кнопка «Назад» возвращает в каталог с сохранёнными фильтрами, а не в начало списка.

Короткий проверочный список

  • Подпись начинается с глагола или называет результат.
  • Нет одинаковых подписей («Подробнее») с разными переходами.
  • Недоступное действие объясняет причину: «Выберите размер», «Нет в наличии — сообщить о поступлении».
  • Ссылки на размерную сетку, доставку и возврат находятся рядом с моментом выбора.
  • Главное действие на экране одно, второстепенные оформлены заметно слабее.
  • Ссылка читается без окружающего текста: «Условия возврата», а не «здесь».
  • У кнопки продуманы состояния: обычное, неактивное, загрузка, ошибка.

Как внести правки и убедиться, что стало лучше

Составьте таблицу из трёх колонок: «Что написано», «Что ожидал человек», «Что предлагаем». Меняйте подписи группами, например сначала карточку товара, затем корзину, и повторяйте те же задания с новыми участниками. Если люди перестали задерживаться на нужном месте и выбирают верный путь с первого клика, правка сработала. Если нет, проблема может быть не в тексте, а в расположении или оформлении элемента.

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

Все статьи блога

Заявка

Расскажите о проекте

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

Форма обратной связи

Отвечаем в рабочие дни с 10:00 до 19:00

Написать в Telegram