или заполните форму
UX/UI
ТОП-10 интернет-магазинов «Товаров для строительства и ремонта (DIY)»: 60 лучших решений UX-дизайна и юзабилити
Владимир
Аналитик
В статье мы собрали топ-10 интернет-магазинов в сегменте DIY и разобрали их UX-решения. Показываем, какие элементы дизайна и навигации делают эти сайты удобными и понятными для покупателей. Наша цель — помочь вам оставаться в курсе последних тенденций и вдохновить на новые достижения в вашем интернет-бизнесе.
Исследуемые сайты:
- vseinstrumenti.ru
- petrovich.ru
- lemanapro.ru
- sdvor.com
- msk.saturn.net
- baucenter.ru
- www.maxidom.ru
- obi.ru
- megastroy.com
- stroylandiya.ru
Отправьте заявку на юзабилити-аудит сайта прямо сейчас и увеличьте конверсию минимум на 20%! Найдём точки роста конверсии и выявим барьеры на пути пользователей сайта.
ТОП-60 функций для интернет-магазинов «товаров для строительства и ремонта (DIY)»
Навигация
1. Закрепленная навигация на десктопной версии
При прокрутке основные элементы шапки сайта остаются закрепленными вверху экрана.Пользователю не нужно возвращаться в начало страницы.
Пример реализации на сайте petrovich.ru
2. Закрепленная навигация на мобильной версии
На мобильных устройствах фиксированное меню, кнопки «Корзина» и «Поиск» остаются доступными при прокрутке. Пользователь выполняет базовые действия без лишнего скролла, не теряя контекст просмотра.
Пример реализации на сайте vseinstrumenti.ru
3. Иконки или мини-изображения в меню на основных разделах
Иконки и небольшие изображения в основном меню задействуют зрительную память и помогают быстрее находить нужные разделы, чем один текст.Это снижает когнитивную нагрузку, делая интерфейс интуитивным и легко сканируемым.
Пример реализации на сайте petrovich.ru
4. Многоуровневое меню
Иерархическая организация пунктов меню с раскрывающимися подуровнями вмещает большое количество разделов и категорий в ограниченное пространство навигации, не перегружая интерфейс.
Это дает пользователю поэтапно уточнять свой запрос, следуя от общей категории к конкретному разделу.
Пример реализации на сайте vseinstrumenti.ru
Поиск по сайту
5. Закрепленное поле поиска на мобильных устройствах
На мобильных устройствах строка поиска фиксируется вверху экрана и остается доступной при прокрутке страницы. Это ускоряет поиск товаров из любой точки сайта.
Это экономит время пользователя, избавляя от необходимости возвращаться к началу страницы для нового поискового запроса.
Пример реализации на сайте vseinstrumenti.ru
6. Поиск по фото
Возможность загрузить или сделать фотографию объекта для автоматического поиска по каталогу позволяет пользователям находить товары, когда они не знают точного названия или не могут его сформулировать.
Это делает процесс поиска быстрым, естественным и доступным, снижая зависимость от точности формулировок.
Пример реализации на сайте petrovich.ru
7. Сохранение истории поиска
Поиск сохраняет предыдущие запросы и показывает их в выпадающем списке, помогая пользователю быстрее возвращаться к интересующим товарам.Это экономит время и усилия пользователя, позволяя быстро вернуться к ранее искомому без повторного ввода, а также помогает вспомнить точную формулировку.
Пример реализации на сайте lemanapro.ru
8. Результат поиска разбит на категории
Результаты поиска группируются по категориям, помогая пользователю быстрее сориентироваться и выбрать нужный путь.Это экономит время пользователя, позволяя сразу отфильтровать нужный тип информации и избежать скроллинга через нерелевантные позиции.
Пример реализации на сайте vseinstrumenti.ru
Категории товаров
9. Вывод иерархии каталога в категориях товаров
При переходе в подраздел пользователь сразу видит не только товары, но и полный список доступных категорий и подкатегорий в виде навигационного меню или блока фильтров.
Это позволяет быстро перейти на нужную группу товаров без необходимости использовать поиск, хлебные крошки или возвращаться в основное меню.
Пример реализации на сайте petrovich.ru
10. Разный тип отображения списка товаров
Переключение между сеткой и списком позволяет пользователю настроить каталог под свои задачи и удобство просмотра. Это дает возможность быстро сравнить множество товаров в компактном формате или подробно изучить ключевые характеристики каждого в развернутом списке.
Пример реализации на сайте vseinstrumenti.ru
11. Фильтрация и сортировка без полной перезагрузки всей страницы
Применение фильтров по цене, бренду, характеристикам или смена порядка сортировки товаров (например, «по популярности», «по цене») происходит динамически, без перезагрузки всей веб-страницы – обновляется только контентная часть с товарами.
Пользователь сразу видит результат изменений и быстрее подбирает нужный товар.
Пример реализации на сайте lemanapro.ru/catalogue/laminat/
12. Широкий набор фильтров
Предоставление пользователю разнообразных фильтров – от базовых (цена, бренд) до специфичных атрибутов товара (материал, размер, цвет, технические характеристики) — позволяет максимально точно настроить выдачу под индивидуальные потребности.
Это помогает быстро отсечь неподходящие варианты и сфокусироваться только на релевантных товарах, экономя время и усилия на ручной просмотр.
Пример реализации на сайте vseinstrumenti.ru
13. Выбор магазина в фильтре
Фильтр по магазину показывает только товары, доступные в выбранной локации, с учетом реальных остатков.Это экономит время пользователя, исключая ситуации, когда выбранный товар оказывается недоступен в нужном месте, и позволяет сразу планировать покупку.
Пример реализации на сайте vseinstrumenti.ru
14. Все фильтры в отдельном окне
Ключевые и наиболее популярные фильтры отображаются непосредственно на странице каталога, в то время как расширенный и полный набор параметров скрыт за отдельной кнопкой и открывается в модальном окне.
Это позволяет не перегружать интерфейс и сохранять фокус на товарах, одновременно предоставляя продвинутым пользователям доступ ко всем возможностям тонкой настройки.
Пример реализации на сайте stroylandiya.ru
15. Поиск в фильтре
Внутри блока фильтров, особенно с обширными списками (как бренды или производители), присутствует строка поиска, позволяющая отфильтровать сами параметры по названию.
Пользователю не нужно долго скроллить длинный список в поисках нужного пункта, процесс с выбором фильтра делается быстрым и точным.
Пример реализации на сайте vseinstrumenti.ru
16. Общий поиск по всем параметрам фильтра
В блоке фильтров реализована общая поисковая строка, которая ищет совпадения не только по названиям товаров, но и по их характеристикам, брендам, категориям и другим атрибутам, включенным в фильтрацию.
Пользователь может одним запросом применить сразу несколько фильтров — по материалу, цвету или характеристикам — без поиска параметров по отдельности.
Пример реализации на сайте stroylandiya.ru
17. Подсказки в фильтре
Для сложных параметров фильтрации добавлены всплывающие подсказки, которые поясняют характеристики при наведении или нажатии на иконку.
Это позволяет пользователю сразу понять значение фильтра, не покидая страницу и не обращаясь к внешним источникам.
Пример реализации на сайте vseinstrumenti.ru
18. Закрепленные кнопки в фильтре на мобильных устройствах
При работе с фильтрами на мобильных устройствах основные управляющие кнопки («Применить», «Очистить») закреплены в нижней части экрана и остаются видимыми при прокрутке длинных списков параметров.
Это позволяет пользователю удобно завершить настройку фильтров в любой момент, не тратя время на поиск кнопок подтверждения, а также быстро сбросить выбранные параметры.
Пример реализации на сайте stroylandiya.ru
19. Выбранные фильтры над списком товаров
Все активные параметры фильтрации отображаются в виде набора «тегов» или строки условий непосредственно над результатами поиска или списком товаров.
Пользователь сразу видит, по каким критериям отфильтрована текущая выборка, и при необходимости может быстро отключить любой из параметров одним кликом.
Пример реализации на сайте vseinstrumenti.ru
20. Разные цены товара в зависимости от объема или штук
Для товаров, которые можно приобретать в различном количестве или фасовке (сыпучие материалы, жидкости, оптовые позиции), на странице отображается несколько ценовых вариантов в расчете на разные единицы объема (за штуку, за упаковку, за килограмм, за литр).
Покупатель так сразу оценит выгоду от покупки большего объема и примет обоснованное решение, исходя из своих нужд и бюджета.
Пример реализации на сайте petrovich.ru
21. Возможность скопировать артикул товара из превью товара
В превью товара предусмотрена отдельная кнопка или иконка, позволяющая одним кликом скопировать артикул товара в буфер обмена.
Это экономит время пользователя при необходимости сравнить товары в разных вкладках, передать артикул коллеге или менеджеру, или найти товар через поиск по номеру на другом сайте.
Пример реализации на сайте vseinstrumenti.ru
22. Возможность просмотреть все изображения наведением курсора мыши в превью товара
При наведении на превью товара пользователь может пролистать основные изображения прямо в каталоге. Это помогает быстрее оценить товар и решить, стоит ли переходить в карточку.
Пример реализации на сайте lemanapro.ru
23. Возможность создания списка товаров и добавления в него
Это функция создания пользовательских списков (например, «Для ремонта», «Подарки», «Сравнение») с возможностью добавлять в них товары из каталога без необходимости немедленной покупки.
Это помогает пользователю организовать интересующие позиции, вернуться к ним позже, поделиться списком с другими или использовать его как чек-лист.
Пример реализации на сайте vseinstrumenti.ru
Отправьте заявку на юзабилити-аудит сайта прямо сейчас и увеличьте конверсию минимум на 20%! Найдём точки роста конверсии и выявим барьеры на пути пользователей сайта.
24. Быстрый переход в сравнение из превью товара
В превью товара есть кнопка добавления в сравнение, которая позволяет сразу перейти к сравнению в один клик.Это экономит время пользователя при анализе похожих товаров, позволяя быстро набирать выборку для детального сопоставления характеристик и цен.
Пример реализации на сайте vseinstrumenti.ru
25. Смена количества и быстрый переход в корзину из превью товара
В превью товара в каталоге или на странице товара — элементы управления для изменения количества единиц и кнопка для мгновенного добавления в корзину с последующим быстрым переходом в нее.
Это позволяет пользователю совершать целевые действия, не переходя каждый раз на отдельную страницу товара. Это особенно удобно при повторных или массовых покупках.
Пример реализации на сайте vseinstrumenti.ru
26. Варианты и дата доставки в превью товара
Непосредственно в превью товара в каталоге отображается информация о доступных способах доставки (курьер, пункт выдачи, самовывоз) и предполагаемая дата получения заказа.
Это позволяет пользователю сразу оценить доступность и сроки поставки товара, что является критически важным фактором при выборе.
Пример реализации на сайте vseinstrumenti.ru
27. Кнопка «Аналоги» в категориях, если товара нет в наличии
В списке товаров или в карточке позиции, которой нет в наличии есть заметная кнопка «Аналоги». Она ведет к подборке доступных альтернатив со схожими характеристиками, функционалом или ценовым диапазоном.
Это помогает пользователю рассмотреть альтернативы и остаться на сайте.
Пример реализации на сайте vseinstrumenti.ru
28. Кнопка «Подписаться на товар», если товара нет в наличии
В карточке товара, который временно отсутствует на складе, размещена кнопка «Сообщить о поступлении» или «Подписаться». При нажатии пользователь может оставить контактные данные, чтобы получить уведомление, когда товар снова появится в наличии.
Это позволяет пользователю не терять интерес к конкретной модели и вернуться к покупке в момент ее доступности, не проверяя сайт вручную.
Пример реализации на сайте vseinstrumenti.ru
29. Количество товаров в наличии в превью товара
В карточке товара в списке категорий отображается информация об остатках на складе в виде точного числа («100 шт. в наличии.»).
Это позволяет пользователю сразу оценить срочность покупки и принять решение, не переходя на страницу товара.
Пример реализации на сайте vseinstrumenti.ru
30. Ссылка на полезный контент «Как выбрать…»
В разделе с товарами специфичной или сложной категории размещена заметная ссылка или блок, ведущий на статью, гайд или видеоинструкцию, которая помогает разобраться в характеристиках, типах товаров и критериях выбора.
Это упрощает выбор для неопытных пользователей и снижает нагрузку на службу поддержки
Пример реализации на сайте vseinstrumenti.ru
Карточка товара
31. Варианты товары
На странице товара отображаются доступные варианты: цвета, объемы, комплектации или другие ключевые модификации – с возможностью переключения между ними прямо в карточке.
Это позволяет пользователю сразу увидеть весь спектр предложений и выбрать подходящую вариацию, не открывая несколько отдельных страниц.
Пример реализации на сайте stroylandiya.ru
32. Закрепленный блок с кнопками CTA в галерее с фото
В галерее изображений товара на его странице ключевые кнопки призыва к действию (например, «Добавить в корзину», «Быстрый заказ») закреплены рядом с ними и остаются видимыми при горизонтальной прокрутке фотогалереи.
Так пользователь сразу может совершить целевое действие, не выходя из галереи.
Пример реализации на сайте vseinstrumenti.ru
33. Возможность изменить количество товаров в карточке, не переходя в корзину
В карточке товара реализован элемент управления (счетчик «+»/«-»), позволяющий изменить количество единиц товара для заказа прямо на странице, без необходимости перехода в корзину для корректировки.
Это дает пользователю возможность сразу указать нужный объем или количество, что особенно актуально для оптовых покупок или регулярных заказов.
Пример реализации на сайте stroylandiya.ru
34. Ссылка на сопутствующие товары на первом экране
В верхней части страницы товара, еще до полного описания, размещен блок с ссылкой на сопутствующие товары, которые логично дополняют основной продукт.
Пользователь сразу видит подходящие дополнения и может добавить их к заказу.
Пример реализации на сайте vseinstrumenti.ru
35. Ссылка на похожие товары на первом экране
В карточке товара есть ссылка на похожие модели, чтобы пользователь мог быстро сравнить варианты и выбрать подходящий.
Пример реализации на сайте stroylandiya.ru
36. Количество товаров в наличии в штуках
На странице товара указывается не общий статус «В наличии», а конкретное количество оставшихся единиц на складе (например, «В наличии 61 шт.»).
Для пользователя это возможность оценить срочность покупки, спланировать необходимое количество и избежать ситуации, когда товар заканчивается в процессе оформления заказа.
Пример реализации на сайте vseinstrumenti.ru
37. Точная дата доставки, а не срок
В карточке товара и на этапе оформления заказа указывается не диапазон дней («3-5 рабочих дней»), а конкретная ожидаемая дата доставки (например, «Доставка 9 декабря»).
Это позволяет пользователю точно спланировать получение заказа, снижает неопределенность и повышает уверенность в выполнении обязательств магазином.
Пример реализации на сайте obi.ru
38. Закрепленная навигация в карточке товара
При прокрутке страницы товара горизонтальное меню с вкладками (например, «Описание», «Характеристики», «Отзывы», «Сопутствующие товары») фиксируется в верхней части экрана, оставаясь всегда видимым.
Это позволяет пользователю мгновенно переключиться между важными разделами, не возвращаясь в начало страницы, что упрощает изучение информации и принятие решения.
Пример реализации на сайте baucenter.ru
39. Фотоотзывы
Это визуальное подтверждение качества и внешнего вида товара от реальных покупателей.
Это помогает оценить внешний вид и особенности товара в реальных условиях и повышает доверие.
Пример реализации на сайте vseinstrumenti.ru
40. Возможность в один клик отправить фото или видео в раздел с отзывами о товаре
В блоке отзывов есть кнопка для быстрого добавления фото или видео. Это упрощает публикацию визуальных отзывов.
Пример реализации на сайте vseinstrumenti.ru
41. Добавление в корзину при просмотре отзывов в модальном окне
В окне с отзывами сохраняется кнопка «Добавить в корзину», чтобы пользователь мог купить товар, не закрывая отзывы.
Пример реализации на сайте vseinstrumenti.ru
42. Уведомить компанию об ошибке в описании
На странице товара есть ссылка «Нашли ошибку?», через которую пользователь может сообщить о неточности. Это помогает поддерживать актуальность данных и вовлекает клиентов.
Пример реализации на сайте stroylandiya.ru
43. В карточке товара на мобильной версии закрепленная кнопка добавления в корзину
При просмотре карточки товара на мобильном устройстве кнопка добавления в корзину фиксируется в нижней части экрана и остаётся видимой при вертикальной прокрутке страницы, независимо от того, какой раздел (описание, характеристики, отзывы) сейчас просматривает пользователь.
Это гарантирует, что пользователь может совершить целевое действие в любой момент, не тратя время на поиск кнопки и не возвращаясь к началу страницы.
Пример реализации на сайте vseinstrumenti.ru
44. Кнопка быстрого заказа в карточке товара
На странице товара, рядом с основной кнопкой добавления в корзину, есть отдельная заметная кнопка «Быстрый заказ». При ее нажатии товар автоматически добавляется в корзину, а пользователь сразу попадает на страницу оформления заказа (ввода контактных данных и выбора доставки).
Это уменьшает количество шагов для заказа, особенно важно для импульсивных покупок или для опытных пользователей, которые уже определились с выбором.
Пример реализации на сайте vseinstrumenti.ru
45. Просмотр наличия товара на интерактивной карте и списком с возможностью сразу добавить в корзину
На странице товара можно посмотреть наличие в конкретных магазинах: как в виде интерактивной карты с метками, так и в виде списка точек. Дополнительно в окне просмотра присутствует кнопка для мгновенного добавления товара в корзину.
Это дает пользователю полный контроль над выбором точки покупки, позволяя оценить удобство расположения, наличие, и сразу перейти к оформлению.
Пример реализации на сайте stroylandiya.ru
Корзина и оформление заказа
46. В корзине закрепленная блок с основной информацией
При прокрутке страницы корзины со списком товаров, блок с итоговой информацией (общая сумма, кнопка «Оформить заказ» и т.д.) фиксируется в боковой части.
Это позволяет пользователю в любой момент видеть итоговую сумму и сразу перейти к оформлению заказа, не выполняя лишних действий по поиску этого блока.
Пример реализации на сайте saturn.net
47. Выбор отдельных товаров в корзине для покупки
Рядом с каждым товаром в корзине размещен чекбокс, с которым можно выбрать только конкретные позиции для оформления. Итоговая сумма и кнопка оформления автоматически обновляются в соответствии с выбранным набором.
Это позволяет пользователю легко исключить временно ненужные товары или разбить крупную корзину на несколько заказов без необходимости удалять и снова добавлять позиции.
Пример реализации на сайте baucenter.ru
48. Сохранение корзины в смету
В интерфейсе корзины присутствует функция «Сохранить смету», которая позволяет перенести текущий набор товаров в отдельный именованный список в личном кабинете пользователя для последующего использования.
Это позволяет пользователю сохранить все выбранные позиции, цены и конфигурации для быстрого доступа в будущем.
Пример реализации на сайте petrovich.ru
49. Сортировка по категориям в корзине
В корзине реализована опция группировки товаров по категориям. При активации этой опции над каждой группой появляется заголовок с названием соответствующей категории.
Так пользователь быстрее ориентируется в разнородном заказе, легче находит и проверяет нужные позиции, что особенно важно при большом количестве товаров.
Пример реализации на сайте petrovich.ru
50. Быстрое добавление товаров прямо из корзины
В корзине есть поиск по каталогу с автодополнением, который позволяет добавить товар, не покидая страницу оформления.
Пример реализации на сайте petrovich.ru
51. Подтверждение удаления товара из корзины
При попытке удалить товар из корзины появляется плашка с подтверждением действия и возможностью его восстановить.
Это предотвращает случайную потерю выбранных товаров из-за неосторожного клика и дает пользователю возможность мгновенно исправить ошибку.
Пример реализации на сайте vseinstrumenti.ru
52. Поделиться составом корзины
В корзине есть кнопка «Поделиться», которая позволяет отправить список товаров по ссылке или в мессенджере.Это дает возможность легко согласовать покупку с семьей, коллегами или друзьями, получить совет или просто сохранить список для себя на будущее.
Пример реализации на сайте sdvor.com
Отправьте заявку на юзабилити-аудит сайта прямо сейчас и увеличьте конверсию минимум на 20%! Найдём точки роста конверсии и выявим барьеры на пути пользователей сайта.
53. Персональные товарные рекомендации для каждой позиции в корзине
Рядом с каждым товаром в корзине выводятся индивидуальные рекомендации: сопутствующие товары, расходные материалы или популярные сочетания, подобранные на основе поведения других покупателей или логики использования.
Пользователи увидят полезные дополнения непосредственно в момент принятия решения о покупке, не переходя в другие разделы каталога.
Пример реализации на сайте vseinstrumenti.ru
54. Разбивка товаров в корзине по доступности
Если статус доставки товара меняется, то товары в корзине автоматически группируются по вкладкам в зависимости от их текущей доступности и даты возможной доставки. Пользователь может переключаться между этими вкладками, чтобы видеть, какие товары можно получить быстрее, а какие – отложены или временно отсутствуют.
Это позволяет пользователю принимать осознанные решения: оформить срочную часть заказа отдельно, удалить недоступные позиции или выбрать альтернативы.
Пример реализации на сайте petrovich.ru
55. Выбор пунктов самовывоза списком и на карте
На этапе оформления заказа пользователю доступны два параллельных интерфейса для выбора пункта выдачи: интерактивная карта с метками и сортируемый список пунктов с детальной информацией.
Так клиент может выбрать удобный способ поиска: визуально оценить расположение на карте или сравнить параметры в структурированном списке.
Пример реализации на сайте stroylandiya.ru
56. Выбор точной даты доставки, а не срок на странице оформления заказа
При оформлении заказа пользователь выбирает конкретную дату доставки, а не общий срок.Это помогает пользователю точно запланировать получение заказа.
Пример реализации на сайте vseinstrumenti.ru
57. Автозаполнение адреса доставки
При вводе адреса доставки работает автодополнение с подсказками. Это ускоряет оформление заказа и снижает количество ошибок в адресе.
Пример реализации на сайте vseinstrumenti.ru
58. Уведомление, если поля не заполнены или заполнены с ошибкой
При заполнении форм (например, email) система валидации проверяет поля в реальном времени и сразу (после выхода из поля) показывает уведомление об ошибке рядом с проблемным полем, не дожидаясь отправки всей формы.
Пользователь оперативно исправит неточности, не дожидаясь окончания заполнения всех данных и повторной попытки отправки.
Пример реализации на сайте saturn.net
59. Закрепленная кнопка оформления заказа на мобильных устройствах
На этапе оформления заказа на мобильном устройстве кнопка «Оформить заказ» фиксируется в нижней части экрана и остаётся видимой при прокрутке страницы.
Это гарантирует, что пользователь может завершить оформление в любой момент, не тратя время на поиск кнопки подтверждения.
Пример реализации на сайте vseinstrumenti.ru
60. Возможность оформить заказ без регистрации
Пользователю предоставляется возможность оформить заказ, указав только необходимые для доставки и связи данные (имя, телефон, email), без обязательного создания учетной записи или ввода пароля.
Это значительно ускоряет процесс для новых или разовых покупателей, снижая риск отказа из-за нежелания проходить длительную процедуру регистрации.
Пример реализации на сайте vseinstrumenti.ru
UX-решения в интернет-магазинах DIY напрямую влияют на скорость выбора, уверенность покупателя и готовность оформить заказ. Ритейлеры упрощают поиск, снимают неопределенность и позволяют выполнять ключевые действия без лишних шагов — от подбора товара до оформления доставки. Именно такой подход превращает сложный ассортимент и высокую вовлеченность в конкурентное преимущество.
Получайте полезный контент от KISLOROD в любом из мессенджеров
При переходе в одну из указанных социальных сетей вы автоматически даете согласие на обработку персональных данных и согласие на получение рекламной рассылки. Подробнее об обработке данных в Политике конфиденциальности.
Рекомендованные статьи
Скачайте 17 точек роста и 100 + чекеров для роста конверсии и прибыли интернет-магазина
При переходе в одну из указанных социальных сетей вы автоматически даете согласие на обработку персональных данных и согласие на получение рекламной рассылки. Подробнее об обработке данных в Политике конфиденциальности.
Мы проанализировали ведущие интернет-магазины, результаты исследований, свой опыт и собрали важные моменты в одно руководство. Делаем e-commerce лучше, поэтому не только пользуемся сами, но и делимся с вами.
Выберите удобный мессенджер и получите чек-лист прямо сейчас:
