Дизайн — статьи о сайтах
Карточка пальто или платья быстро разрастается: фотографии, описание, состав, размерная таблица, условия доставки и возврата, отзывы, рекомендации. С телефона на такой странице легко потеряться, и главный вопрос покупателя «подойдёт ли мне эта вещь?» остаётся без ответа. Разберём, как выстроить страницу, чтобы её было удобно читать.
В каком порядке покупатель одежды ищет ответы
Страницу почти никто не читает подряд, по ней ищут ответы на конкретные вопросы. Как вещь выглядит и сколько стоит. Какой размер взять. Из чего она сделана и как за ней ухаживать. Когда привезут и можно ли вернуть. Структуру лучше строить по этим вопросам, а не по тому, как данные хранятся в товарной базе.
В первом экране оставьте фото, цену, выбор цвета и размера и кнопку «В корзину». Сразу под ними поместите две-три строки сути: крой, длину, посадку. Всё остальное идёт ниже, в предсказуемой последовательности.
Условный пример: карточка демисезонного пальто
Возьмём вымышленный магазин и пальто прямого кроя. Фрагмент страницы можно собрать так:
- Верх: галерея, название, цена, выбор цвета, размеры (недоступные помечены) и ссылка «Помочь с размером».
- Суть в три строки: «Прямой крой, длина до колена, свободная посадка. На модели ростом 175 см размер S».
- Размер и посадка: таблица с обхватом груди, длиной изделия и длиной рукава.
- Состав и уход: волокна с процентами и короткие правила стирки.
- Доставка и возврат: сроки и способы в нескольких строках, подробности на отдельной странице.
- Отзывы: если магазин собирает такую оценку, добавьте пометку «маломерит / по размеру / большемерит».
- Похожие товары в самом конце.
Абстрактный рекламный текст вроде «пальто для яркой жизни» лучше сократить: на выбор размера он не влияет и только удлиняет страницу.
Размерная таблица: как не заставлять листать и возвращаться
Именно таблица чаще всего ломает путь к покупке. Если она ведёт на другую страницу, человек теряет выбранный товар. Откройте её в выезжающей панели или окне прямо из блока выбора размера. На телефоне сделайте горизонтальную прокрутку с закреплённым первым столбцом, чтобы не терялась подпись строки.
Подписывайте мерки понятно («обхват груди», «длина изделия») и коротко поясняйте, как их снимать. Показывайте таблицу именно этого изделия, а не общую для всего бренда, и всегда указывайте параметры модели на фото.
Аккордеоны и якоря: что сворачивать, а что нет
Сворачиваемые секции сокращают страницу, но прячут информацию. Раскрытыми по умолчанию оставьте то, что влияет на выбор: посадку и состав. Свёрнутыми могут быть уход, доставка и юридические детали. Заголовок секции должен быть понятен без раскрытия: «Доставка и возврат», а не «Подробнее».
Якорное меню из трёх-пяти пунктов под блоком покупки помогает быстро перейти к нужному разделу. На мобильном оно не должно перекрывать кнопку «В корзину». При переходе по якорю нужная секция должна раскрываться сама, а открываться она должна и с клавиатуры.
Длинный список товаров в каталоге
Категория на сотни моделей тоже длинная страница. Кнопка «Показать ещё» даёт больше контроля, чем бесконечная подгрузка: видно, сколько товаров загружено, и проще добраться до подвала. Главное при возврате из карточки: пользователь должен оказаться на том же месте списка с теми же фильтрами, а не в начале.
Фильтры по размеру, цвету, длине и цене держите в закреплённой панели. Показывайте число найденных моделей и выбранные условия, каждое из которых можно снять отдельно.
Проверочный список перед запуском
- Фото, цена, размер и кнопка покупки видны на первом экране телефона без прокрутки.
- Под ними есть краткая суть: крой, длина, посадка, параметры модели.
- Размерная таблица открывается без ухода со страницы и читается на узком экране.
- Открытыми по умолчанию остаются только блоки, влияющие на выбор.
- Заголовки секций понятны без раскрытия.
- Якорное меню не закрывает кнопку «В корзину».
- После возврата из карточки список и фильтры сохраняются.
- Страница пройдена на реальном телефоне с одной рукой, а не только в окне браузера на компьютере.
