Тендеры и лиды
Информация
С вами команда KISLOROD. Мы занимаемся разработкой и развитием интернет-магазинов.
В новой статье мы собрали 10 интернет-магазинов в сегменте DIY и разобрали, какие UX- и юзабилити-решения делают их сайты удобными и понятными для покупателей. Мы не оцениваем визуальный стиль — фокус именно на функциональных элементах интерфейса и навигации, которые помогают пользователю быстрее находить нужные товары и совершать целевые действия.
Цель материала — показать работающие решения, которые уже используются в крупных интернет-магазинах, и помочь командам e-commerce ориентироваться в актуальных UX-подходах при развитии своих проектов.
При прокрутке страницы основные элементы шапки сайта остаются закрепленными в верхней части экрана. Пользователю не нужно возвращаться к началу страницы, чтобы перейти в каталог, воспользоваться поиском или открыть корзину. Это ускоряет навигацию и снижает количество лишних действий, особенно на длинных страницах с большим объемом контента.
Пример реализации: petrovich.ru
В мобильной версии сайта фиксированное меню, а также кнопки «Корзина» и «Поиск» остаются доступными при прокрутке. Пользователь может выполнять базовые действия в любой момент, не теряя контекст просмотра и не возвращаясь к верхней части страницы. Такое решение особенно важно для мобильного сценария, где скролл используется постоянно.
Пример реализации: vseinstrumenti.ru
Использование иконок и небольших изображений в основном меню помогает задействовать зрительную память пользователя. Разделы быстрее распознаются визуально, чем при использовании одного только текста. Это снижает когнитивную нагрузку и делает интерфейс более интуитивным и удобным для быстрого сканирования.
Пример реализации: petrovich.ru
Многоуровневое меню с иерархической структурой позволяет разместить большое количество категорий и подкатегорий, не перегружая интерфейс. Пользователь может последовательно уточнять свой запрос, переходя от общей категории к более конкретному разделу. Такой подход особенно эффективен для DIY-магазинов с широким ассортиментом.
Пример реализации: vseinstrumenti.ru
В мобильной версии строка поиска фиксируется в верхней части экрана и остается доступной при прокрутке. Пользователь может начать новый поиск в любой момент, не возвращаясь к началу страницы. Это особенно удобно для каталогов с большим ассортиментом, где поиск используется постоянно.
Пример реализации: vseinstrumenti.ru
Поиск по изображению работает через загрузку фотографии или съемку объекта на камеру. Пользователь показывает, что ищет, вместо того чтобы подбирать формулировки. Такой подход упрощает поиск товаров, особенно когда точное название неизвестно или сложно сформулировать.
Пример реализации: petrovich.ru
Поисковая строка запоминает предыдущие запросы и выводит их в списке. Это помогает быстро вернуться к уже просмотренным товарам или повторить поиск без повторного ввода. Сценарий становится короче и спокойнее, без лишних действий.
Пример реализации: lemanapro.ru
Поисковая выдача сразу разделена по категориям. Пользователь быстрее понимает, где находится нужный товар, и не тратит время на просмотр нерелевантных позиций. Такое решение особенно заметно работает в каталогах с большим количеством товарных групп.
Пример реализации: vseinstrumenti.ru
При переходе в подраздел пользователь сразу видит не только товары, но и структуру каталога: список категорий и подкатегорий в виде навигационного блока или фильтров. Это помогает быстро перейти к нужной группе товаров, не прибегая к поиску, хлебным крошкам или возврату в главное меню.
Пример реализации: petrovich.ru
Каталог поддерживает переключение между сеткой и списком. В компактном виде удобно быстро просматривать и сравнивать товары, в развернутом — изучать характеристики и детали. Пользователь сам выбирает формат в зависимости от задачи и этапа выбора.
Пример реализации: vseinstrumenti.ru
Фильтры по цене, бренду и характеристикам, а также сортировка товаров применяются без перезагрузки страницы — обновляется только список товаров. Результат виден сразу, без пауз и потери контекста. Это ускоряет подбор и делает работу с каталогом более плавной.
Пример реализации: https://lemanapro.ru/catalogue/laminat/
В каталоге доступны как базовые фильтры, так и параметры, связанные с конкретными характеристиками товаров: материал, размер, цвет, технические свойства. Пользователь быстро отсекает неподходящие варианты и сосредотачивается на релевантных позициях, без долгого ручного просмотра.
Пример реализации: vseinstrumenti.ru
Фильтр по магазину сразу показывает товары, которые есть в наличии в выбранной локации. Пользователь видит реальные остатки и не сталкивается с ситуацией, когда нужный товар недоступен при самовывозе или срочной покупке. Это упрощает планирование и экономит время на проверку наличия.
Пример реализации: vseinstrumenti.ru
Основные и самые востребованные фильтры отображаются прямо в каталоге. Расширенные параметры вынесены в отдельную кнопку и открываются в модальном окне. Интерфейс остается чистым и не перегруженным, при этом доступ ко всем настройкам сохраняется для тех, кому нужна точная фильтрация.
Пример реализации: stroylandiya.ru
В блоках фильтров с длинными списками — например, брендов или производителей — предусмотрен поиск по параметрам. Пользователь быстро находит нужный пункт без долгого скролла и ручного просмотра списка. Выбор фильтра становится точнее и быстрее.
Пример реализации: vseinstrumenti.ru
В блоке фильтров есть общая строка поиска, которая работает сразу по всем параметрам: характеристикам, брендам, категориям и другим атрибутам. Один запрос сразу сужает выдачу по нескольким условиям — например, по материалу, цвету и типу товара — без ручного перебора фильтров.
Пример реализации: stroylandiya.ru
Для сложных параметров фильтрации добавлены всплывающие подсказки. Они объясняют значение характеристик при наведении или нажатии на иконку. Пользователь быстрее ориентируется в параметрах и принимает решение, не покидая страницу и не обращаясь к сторонним источникам.
Пример реализации: vseinstrumenti.ru
На мобильных устройствах кнопки управления фильтрами — «Применить» и «Очистить» — закреплены в нижней части экрана и остаются видимыми при прокрутке длинных списков. Пользователь может завершить настройку или сбросить фильтры в любой момент, не возвращаясь к началу списка.
Пример реализации: stroylandiya.ru
Активные параметры фильтрации отображаются над списком товаров в виде набора тегов. Пользователь сразу видит, по каким условиям сформирована выдача, и может отключить любой фильтр одним кликом. Это упрощает корректировку выбора и делает сценарий более прозрачным.
Пример реализации: vseinstrumenti.ru
Для товаров с разной фасовкой или объёмом на странице показываются несколько вариантов цен — за штуку, упаковку, килограмм или литр. Такой формат помогает сразу оценить разницу в стоимости и выбрать оптимальный объём с учётом задачи и бюджета.
Пример реализации: petrovich.ru
В карточке превью есть отдельная кнопка для копирования артикула в буфер обмена. Один клик — и номер готов к использованию. Это удобно, когда нужно сравнить товары в разных вкладках, передать артикул коллеге или менеджеру, либо найти тот же товар на другом сайте.
Пример реализации: vseinstrumenti.ru
При наведении курсора на превью товара можно пролистать основные изображения прямо в каталоге. Пользователь быстрее оценивает внешний вид и детали и понимает, стоит ли переходить в карточку товара.
Пример реализации: lemanapro.ru
Сайт поддерживает создание пользовательских списков — например, для ремонта, сравнения или будущих покупок. Товары добавляются в такие списки прямо из каталога, без необходимости сразу оформлять заказ. Это помогает структурировать выбор, вернуться к нему позже или поделиться списком с другими.
Пример реализации: vseinstrumenti.ru
В превью товара есть кнопка «Добавить к сравнению». Пользователь может сразу перейти к сравнению в один клик. Это упрощает выбор: можно быстро собрать несколько товаров и сопоставить характеристики и цены без лишних переходов.
Пример реализации: vseinstrumenti.ru
В превью товара доступны элементы управления количеством товара и кнопка с быстрым переходом в корзину.
Пользователь может изменить количество единиц в корзине и добавить товар, не открывая отдельную страницу. Это особенно удобно при повторных или массовых покупках.
Пример реализации: vseinstrumenti.ru
В каталоге рядом с товаром сразу отображаются доступные способы доставки — курьером, в пункт выдачи или самовывозом — и ориентировочная дата получения. Пользователь заранее понимает, как и когда сможет получить заказ, и учитывает это при выборе товара.
Пример реализации: vseinstrumenti.ru
Если товара нет в наличии, в списке или карточке отображается кнопка «Аналоги». Она ведет к подборке доступных позиций со схожими характеристиками или ценой. Пользователь не упирается в тупик и продолжает выбор, оставаясь на сайте.
Пример реализации: vseinstrumenti.ru
В карточке недоступного товара размещена кнопка «Сообщить о поступлении». Пользователь оставляет контактные данные и получает уведомление, когда товар снова появляется в продаже. Это помогает сохранить интерес к конкретной модели без необходимости проверять наличие вручную.
Пример реализации: vseinstrumenti.ru
В превью товара отображается информация об остатках на складе — например, точное количество единиц в наличии. Пользователь сразу оценивает доступность и срочность покупки, не переходя в карточку товара.
Пример реализации: vseinstrumenti.ru
В категориях со сложными или техническими товарами размещена ссылка на гайд, статью или видео с пояснениями по выбору. Такой контент помогает разобраться в характеристиках и критериях, упрощает принятие решения и снижает нагрузку на поддержку.
Пример реализации: vseinstrumenti.ru
В карточке товара отображаются доступные варианты — цвет, объём, комплектация и другие модификации. Переключение между ними происходит в рамках одной страницы. Пользователь сразу видит весь ассортимент вариантов и выбирает подходящий без переходов между страницами.
Наша система сама подберет вам исполнителей на услуги, связанные с разработкой сайта или приложения, поисковой оптимизацией, контекстной рекламой, маркетингом, SMM и PR.
Заполнить заявку
13322 тендера
проведено за восемь лет работы нашего сайта.
Пример реализации: stroylandiya.ru
В галерее фотографий ключевые кнопки — «Добавить в корзину», «Быстрый заказ» — закреплены рядом с изображениями и остаются видимыми при прокрутке. Пользователь может сразу перейти к действию, не выходя из просмотра фото.
Пример реализации: vseinstrumenti.ru
В карточке товара есть счетчик «+ / −», который дает изменить количество прямо на странице. Пользователь сразу указывает нужный объем, не переходя в корзину для корректировки. Такой сценарий особенно удобен для оптовых и регулярных покупок.
Пример реализации: stroylandiya.ru
В верхней части карточки, до основного описания, размещён блок со ссылкой на сопутствующие товары. Пользователь сразу видит логичные дополнения к выбранному продукту и может добавить их к заказу без дополнительного поиска.
Пример реализации: vseinstrumenti.ru
В карточке товара доступна ссылка на похожие модели. Пользователь может быстро сравнить альтернативы и выбрать подходящий вариант, не возвращаясь в каталог.
Пример реализации: stroylandiya.ru
На странице товара показывается не общий статус наличия, а точное количество единиц на складе — например, «В наличии 61 шт.». Это помогает оценить срочность покупки, спланировать нужный объём и избежать ситуаций, когда товар заканчивается в процессе оформления.
Пример реализации: vseinstrumenti.ru
В карточке товара и при оформлении заказа указывается конкретная дата доставки, а не примерный срок. Пользователь понимает, когда именно получит заказ, и может заранее спланировать получение. Такой формат снижает неопределенность и повышает доверие к магазину.
Пример реализации: obi.ru
При прокрутке страницы карточки фиксируется горизонтальное меню с вкладками — «Описание», «Характеристики», «Отзывы», «Сопутствующие товары». Оно остается на экране и дает быстро переключаться между разделами без возврата к началу страницы.
Пример реализации: baucenter.ru
В карточке товара отображаются отзывы с фотографиями от реальных покупателей. Они показывают товар в реальных условиях, помогают оценить внешний вид и детали и усиливают доверие к покупке.
Пример реализации: vseinstrumenti.ru
В разделе отзывов есть кнопка для добавления фото или видео в один клик. Публикация визуальных отзывов становится проще, а карточка товара — более информативной и живой.
Пример реализации: vseinstrumenti.ru
При просмотре отзывов в модальном окне кнопка «Добавить в корзину» остаётся доступной. Пользователь может принять решение о покупке прямо в момент чтения отзывов, не закрывая окно и не возвращаясь в карточку товара.
Пример реализации: vseinstrumenti.ru
В карточке товара есть ссылка «Нашли ошибку?», через которую пользователь может указать на неточность в описании. Это помогает поддерживать актуальность информации и вовлекает клиентов в улучшение качества контента.
Пример реализации: stroylandiya.ru
В мобильной версии карточки товара кнопка добавления в корзину закреплена в нижней части экрана и остаётся видимой при прокрутке. Пользователь может оформить покупку из любого раздела — описания, характеристик или отзывов — без возврата к началу страницы.
Пример реализации: vseinstrumenti.ru
Рядом с основной кнопкой добавления в корзину размещена кнопка «Быстрый заказ». При нажатии товар сразу добавляется в корзину, а пользователь переходит к оформлению. Такой сценарий сокращает путь к покупке и особенно хорошо работает для импульсивных и повторных заказов.
Пример реализации: vseinstrumenti.ru
В карточке товара доступен просмотр наличия в конкретных магазинах — на интерактивной карте и в виде списка. Из этого же окна товар можно сразу добавить в корзину. Пользователь оценивает расположение, наличие и сразу переходит к покупке.
Пример реализации: stroylandiya.ru
При прокрутке страницы корзины блок с итоговой суммой и кнопкой оформления заказа остается закрепленным. Пользователь в любой момент видит итог и может перейти к следующему шагу без поиска нужного блока.
Пример реализации: saturn.net
В корзине рядом с каждым товаром есть чекбокс. Пользователь может выбрать только нужные позиции для оформления, а итоговая сумма пересчитывается автоматически. Это удобно при больших заказах и помогает разбивать покупки на несколько этапов.
Пример реализации: baucenter.ru
В корзине доступна функция сохранения выбранных товаров в виде сметы. Пользователь может дать ей имя и вернуться к этому набору позже — со всеми позициями, ценами и конфигурациями.
Пример реализации: petrovich.ru
Товары в корзине можно сгруппировать по категориям. Над каждой группой появляется заголовок, который помогает быстрее ориентироваться в заказе и проверять позиции, особенно при большом количестве товаров.
Пример реализации: petrovich.ru
В корзине есть поиск по каталогу с автодополнением. Товары добавляются прямо на странице оформления заказа, без возврата в каталог. Это упрощает комплектацию заказа и экономит время.
Пример реализации: petrovich.ru
При удалении товара появляется плашка с подтверждением и возможностью отменить действие. Это защищает от случайных кликов и помогает быстро восстановить позицию, если удаление произошло по ошибке.
Пример реализации: vseinstrumenti.ru
В корзине есть кнопка «Поделиться», которая формирует ссылку на текущий список товаров или отправляет его в мессенджер. Такой формат удобен для согласования покупки с коллегами, семьей или заказчиком, а также для сохранения списка на будущее.
Пример реализации: sdvor.com
Рядом с каждой позицией в корзине отображаются рекомендации: сопутствующие товары, расходники или популярные сочетания. Пользователь видит полезные дополнения прямо в момент принятия решения, не переходя в каталог и не теряя контекст.
Пример реализации: vseinstrumenti.ru
Товары в корзине автоматически группируются по доступности и срокам доставки. Пользователь может переключаться между вкладками и видеть, какие позиции можно получить быстрее, а какие временно недоступны или отложены. Это помогает разделить заказ, выбрать альтернативы или убрать неподходящие товары.
Пример реализации: petrovich.ru
При оформлении заказа пункт самовывоза можно выбрать как на интерактивной карте, так и в виде списка с подробной информацией. Пользователь сам выбирает удобный способ — визуально оценить расположение или сравнить параметры в структурированном виде.
Пример реализации: stroylandiya.ru
На этапе оформления пользователь выбирает точную дату доставки, а не ориентировочный срок. Это упрощает планирование и снижает неопределенность при получении заказа.
Пример реализации: vseinstrumenti.ru
При вводе адреса работает автодополнение с подсказками. Заполнение формы занимает меньше времени, а количество ошибок в адресе заметно сокращается.
Пример реализации: vseinstrumenti.ru
Поля формы проверяются в реальном времени. Если данные введены некорректно или поле пропущено, уведомление появляется сразу рядом с ним, без отправки всей формы. Пользователь быстро исправляет ошибки и не возвращается к форме повторно.
Пример реализации: saturn.net
В мобильной версии кнопка «Оформить заказ» закреплена в нижней части экрана и остаётся видимой при прокрутке. Пользователь может завершить покупку в любой момент, не возвращаясь вверх страницы.
Пример реализации: vseinstrumenti.ru
Заказ можно оформить без создания аккаунта — достаточно указать контактные данные и адрес доставки. Такой сценарий ускоряет оформление и снижает вероятность отказа со стороны новых или разовых покупателей.
Пример реализации: vseinstrumenti.ru
UX-решения в интернет-магазинах DIY напрямую влияют на то, как быстро покупатель ориентируется в ассортименте, понимает условия и решается на покупку. Когда поиск, фильтры, наличие и доставка работают прозрачно, пользователю не приходится сомневаться или делать лишние шаги. В такой логике даже сложный каталог перестает пугать и начинает работать на бизнес — помогая удерживать внимание, ускорять выбор и повышать конверсию.
***
Совместно с сервисом AskUsers мы провели исследование с участием 1000 респондентов, чтобы выявить ключевые проблемы в интерфейсе интернет-магазинов, а также понять, что отталкивает покупателей на этапе оформления заказа. Изучайте итоги UX-исследования и применяйте эту информацию как основу для генерации гипотез и планирования A/B-тестов, чтобы проверить эффективность предлагаемых решений.
Если хотите быть в курсе трендов в UX/UI- дизайне, подписывайтесь на наш Telegram-канал. Мы запустили новую рубрику, где разбираем свежие направления в дизайне вместе с экспертами из крупных брендов и дизайн-тусовки.
