Всем привет! Меня зовут Саша, и последние 12 лет моя жизнь — это дизайн. Сегодня я руковожу дизайн-командой в KISLOROD, а в прошлом — помогал крупным брендам и миллионным сервисам обрести их уникальный голос и форму.
Если хотите быть в курсе трендов в UX/UI- дизайне, подписывайтесь на наш Telegram-канал. Мы запустили новую рубрику, где разбираем свежие направления в дизайне вместе с экспертами из крупных брендов и дизайн-тусовки.
В этой статье мы собрали 10 интернет-магазинов в сегменте DIY и разобрали, какие UX- и юзабилити-решения делают их сайты удобными и понятными для покупателей. Мы не оцениваем визуальный стиль — фокус именно на функциональных элементах интерфейса и навигации, которые помогают пользователю быстрее находить нужные товары и совершать целевые действия.
Цель материала — показать работающие решения, которые уже используются в крупных интернет-магазинах, и помочь командам e-commerce ориентироваться в актуальных UX-подходах при развитии своих проектов.
Сайты, которые мы изучали:
1. Закрепленная навигация в десктопной версии
При прокрутке страницы основные элементы шапки сайта остаются закрепленными в верхней части экрана. Пользователю не нужно возвращаться к началу страницы, чтобы перейти в каталог, воспользоваться поиском или открыть корзину. Это ускоряет навигацию и снижает количество лишних действий, особенно на длинных страницах с большим объемом контента.
Пример реализации: petrovich.ru
2. Закрепленная навигация в мобильной версии
В мобильной версии сайта фиксированное меню, а также кнопки «Корзина» и «Поиск» остаются доступными при прокрутке. Пользователь может выполнять базовые действия в любой момент, не теряя контекст просмотра и не возвращаясь к верхней части страницы. Такое решение особенно важно для мобильного сценария, где скролл используется постоянно.
Пример реализации: vseinstrumenti.ru
3. Иконки и мини-изображения в меню основных разделов
Использование иконок и небольших изображений в основном меню помогает задействовать зрительную память пользователя. Разделы быстрее распознаются визуально, чем при использовании одного только текста. Это снижает когнитивную нагрузку и делает интерфейс более интуитивным и удобным для быстрого сканирования.
Пример реализации: petrovich.ru
4. Многоуровневое меню
Многоуровневое меню с иерархической структурой позволяет разместить большое количество категорий и подкатегорий, не перегружая интерфейс. Пользователь может последовательно уточнять свой запрос, переходя от общей категории к более конкретному разделу. Такой подход особенно эффективен для DIY-магазинов с широким ассортиментом.
Пример реализации: vseinstrumenti.ru
5. Закрепленное поле поиска на мобильных устройствах
В мобильной версии строка поиска фиксируется в верхней части экрана и остается доступной при прокрутке. Пользователь может начать новый поиск в любой момент, не возвращаясь к началу страницы. Это особенно удобно для каталогов с большим ассортиментом, где поиск используется постоянно.
Пример реализации: vseinstrumenti.ru
6. Поиск по фото
Поиск по изображению работает через загрузку фотографии или съемку объекта на камеру. Пользователь показывает, что ищет, вместо того чтобы подбирать формулировки. Такой подход упрощает поиск товаров, особенно когда точное название неизвестно или сложно сформулировать.
Пример реализации: petrovich.ru
7. Сохранение истории поиска
Поисковая строка запоминает предыдущие запросы и выводит их в списке. Это помогает быстро вернуться к уже просмотренным товарам или повторить поиск без повторного ввода. Сценарий становится короче и спокойнее, без лишних действий.
Пример реализации: lemanapro.ru
8. Группировка результатов поиска по категориям
Поисковая выдача сразу разделена по категориям. Пользователь быстрее понимает, где находится нужный товар, и не тратит время на просмотр нерелевантных позиций. Такое решение особенно заметно работает в каталогах с большим количеством товарных групп.
Пример реализации: vseinstrumenti.ru
9. Иерархия каталога внутри категорий
При переходе в подраздел пользователь сразу видит не только товары, но и структуру каталога: список категорий и подкатегорий в виде навигационного блока или фильтров. Это помогает быстро перейти к нужной группе товаров, не прибегая к поиску, хлебным крошкам или возврату в главное меню.
Пример реализации: petrovich.ru
10. Разные форматы отображения списка товаров
Каталог поддерживает переключение между сеткой и списком. В компактном виде удобно быстро просматривать и сравнивать товары, в развернутом — изучать характеристики и детали. Пользователь сам выбирает формат в зависимости от задачи и этапа выбора.
Пример реализации: vseinstrumenti.ru
11. Фильтрация и сортировка без перезагрузки страницы
Фильтры по цене, бренду и характеристикам, а также сортировка товаров применяются без перезагрузки страницы — обновляется только список товаров. Результат виден сразу, без пауз и потери контекста. Это ускоряет подбор и делает работу с каталогом более плавной.
Пример реализации: https://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
24. Быстрый переход в сравнение из превью
В превью товара есть кнопка «Добавить к сравнению». Пользователь может сразу перейти к сравнению в один клик. Это упрощает выбор: можно быстро собрать несколько товаров и сопоставить характеристики и цены без лишних переходов.
Пример реализации: vseinstrumenti.ru
25. Изменение количества товаров и добавление в корзину без лишних переходов
В превью товара доступны элементы управления количеством товара и кнопка с быстрым переходом в корзину.
Пользователь может изменить количество единиц в корзине и добавить товар, не открывая отдельную страницу. Это особенно удобно при повторных или массовых покупках.
Пример реализации: vseinstrumenti.ru
26. Варианты и дата доставки в превью товара
В каталоге рядом с товаром сразу отображаются доступные способы доставки — курьером, в пункт выдачи или самовывозом — и ориентировочная дата получения. Пользователь заранее понимает, как и когда сможет получить заказ, и учитывает это при выборе товара.
Пример реализации: vseinstrumenti.ru
27. Кнопка «Аналоги» для товаров не в наличии
Если товара нет в наличии, в списке или карточке отображается кнопка «Аналоги». Она ведет к подборке доступных позиций со схожими характеристиками или ценой. Пользователь не упирается в тупик и продолжает выбор, оставаясь на сайте.
Пример реализации: vseinstrumenti.ru
28. Подписка на товар при отсутствии в наличии
В карточке недоступного товара размещена кнопка «Сообщить о поступлении». Пользователь оставляет контактные данные и получает уведомление, когда товар снова появляется в продаже. Это помогает сохранить интерес к конкретной модели без необходимости проверять наличие вручную.
Пример реализации: vseinstrumenti.ru
29. Остатки товара в превью
В превью товара отображается информация об остатках на складе — например, точное количество единиц в наличии. Пользователь сразу оценивает доступность и срочность покупки, не переходя в карточку товара.
Пример реализации: 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. Конкретная дата доставки вместо диапазона
В карточке товара и при оформлении заказа указывается конкретная дата доставки, а не примерный срок. Пользователь понимает, когда именно получит заказ, и может заранее спланировать получение. Такой формат снижает неопределенность и повышает доверие к магазину.
Пример реализации: 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
53. Персональные рекомендации для товаров в корзине
Рядом с каждой позицией в корзине отображаются рекомендации: сопутствующие товары, расходники или популярные сочетания. Пользователь видит полезные дополнения прямо в момент принятия решения, не переходя в каталог и не теряя контекст.
Пример реализации: vseinstrumenti.ru
54. Группировка товаров в корзине по доступности
Товары в корзине автоматически группируются по доступности и срокам доставки. Пользователь может переключаться между вкладками и видеть, какие позиции можно получить быстрее, а какие временно недоступны или отложены. Это помогает разделить заказ, выбрать альтернативы или убрать неподходящие товары.
Пример реализации: petrovich.ru
55. Выбор пунктов самовывоза списком и на карте
При оформлении заказа пункт самовывоза можно выбрать как на интерактивной карте, так и в виде списка с подробной информацией. Пользователь сам выбирает удобный способ — визуально оценить расположение или сравнить параметры в структурированном виде.
Пример реализации: stroylandiya.ru
56. Выбор конкретной даты доставки при оформлении заказа
На этапе оформления пользователь выбирает точную дату доставки, а не ориентировочный срок. Это упрощает планирование и снижает неопределенность при получении заказа.
Пример реализации: vseinstrumenti.ru
57. Автозаполнение адреса доставки
При вводе адреса работает автодополнение с подсказками. Заполнение формы занимает меньше времени, а количество ошибок в адресе заметно сокращается.
Пример реализации: vseinstrumenti.ru
58. Мгновенные подсказки при ошибках в форме
Поля формы проверяются в реальном времени. Если данные введены некорректно или поле пропущено, уведомление появляется сразу рядом с ним, без отправки всей формы. Пользователь быстро исправляет ошибки и не возвращается к форме повторно.
Пример реализации: saturn.net
59. Закрепленная кнопка оформления заказа на мобильных устройствах
В мобильной версии кнопка «Оформить заказ» закреплена в нижней части экрана и остаётся видимой при прокрутке. Пользователь может завершить покупку в любой момент, не возвращаясь вверх страницы.
Пример реализации: vseinstrumenti.ru
60. Оформление заказа без регистрации
Заказ можно оформить без создания аккаунта — достаточно указать контактные данные и адрес доставки. Такой сценарий ускоряет оформление и снижает вероятность отказа со стороны новых или разовых покупателей.
Пример реализации: vseinstrumenti.ru
UX-решения в интернет-магазинах DIY напрямую влияют на то, как быстро покупатель ориентируется в ассортименте, понимает условия и решается на покупку. Когда поиск, фильтры, наличие и доставка работают прозрачно, пользователю не приходится сомневаться или делать лишние шаги. В такой логике даже сложный каталог перестает пугать и начинает работать на бизнес — помогая удерживать внимание, ускорять выбор и повышать конверсию.
