Таблица размеров: как связать подсказки с выбором варианта

Какую подсказку покупатель ищет рядом с размером

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

Одной буквы мало. Обозначение размера не рассказывает о посадке, длине и том, какие мерки производитель положил в основу своей сетки, поэтому магазин связывает подсказку с моделью и объясняет, что именно сравнивать. Особенно опасна общая таблица без названия бренда: посетитель видит аккуратные числа, но не может понять, относятся ли они к выбранной одежде или к соседнему разделу каталога.

Мерки человека и замеры вещи

Эти сведения отвечают на разные вопросы. Мерки тела помогают выбрать размер по правилам производителя. Замеры готового изделия позволяют оценить длину и свободное место, но их нельзя автоматически читать как параметры человека. Если ширину вещи сняли на разложенном изделии, рядом объясняют этот способ. Иначе покупатель сравнит полуобхват с обхватом тела и сделает неверный вывод даже при совершенно правильных числах в таблице.

Источник данных важнее оформления. Начните с официальных сведений бренда и назначьте сотрудника, который отвечает за перенос и изменения. Если сведения получены от поставщика в отдельном файле, сохраните его вместе с датой получения, чтобы при вопросе покупателя можно было найти исходник. Интернет-магазин не придумывает новую сетку ради заполнения пустых столбцов и не превращает подпись свободный крой в точную числовую прибавку без данных производителя. Для моделей с разными рекомендациями не стоит автоматически распространять исправление на весь бренд: сначала сотрудник определяет область применения сведений, затем обновляет связанные карточки, сохраняя источник, который объясняет причину изменения опубликованной размерной подсказки.

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

Что писать перед таблицей

Короткое пояснение называет бренд, тип изделия и вид измерений. По нему человек понимает, нужно ли взять сантиметровую ленту или сравнить параметры с похожей вещью, которая уже хорошо сидит. Такое пояснение полезнее длинного общего текста о том, что выбирать одежду через интернет удобно: оно прямо меняет следующее действие покупателя и уменьшает вероятность неправильного чтения данных.

Данные связывают с моделью, а не со всем каталогом

Подходящая таблица открывается из той карточки, где выбирают размер. Для общего справочника оставляют самостоятельный раздел, но рядом с товаром посетитель получает уже нужную подсказку. Если сетки различаются по бренду или категории, связь описывают в содержании карточки. Разработчик не сможет надёжно вывести её из похожего названия товара, поэтому правило назначения задаёт сотрудник каталога. Отдельное название сетки полезно и для редактора: при следующем обновлении он сможет найти связанные товары и понять последствия замены, не открывая каждую карточку по очереди и не пытаясь определить нужную таблицу по внешнему сходству.

Внешний пример показывает разницу. В карточке футболки GATE31 есть столбец «Обхват груди, см». Рядом приведена «Длина изделия, см». Это разные сведения о вещи, которые нельзя заменить одной общей таблицей размеров для любой одежды, особенно если клиент выбирает модель по желаемой длине и свободе посадки. В этом примере полезно само различение параметров: покупатель видит, какую часть изделия описывает значение, а владелец другого магазина получает основание запросить у своего поставщика такие же ясные подписи вместо неподтверждённого пересчёта чужих величин.

Что сохранять в записи подсказки

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

Модель с особыми параметрами получает отдельное объяснение. В ответах GATE31 покупателям советуют смотреть раздел «Обмеры», где указана длина изделий по размерам. Это пример полезной связи общей размерной информации с конкретной вещью. Копировать чужие величины в каталог другого бренда из этого примера нельзя: магазин переносит способ объяснения, а не содержание чужой сетки.

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

Таблица должна читаться и помогать выбрать

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

Смысл заголовков сохраняют. Руководство W3C рекомендует обозначать заголовочные ячейки элементом th. Связь с колонкой задаётся через scope="col", а со строкой — через scope="row". Заказчику не требуется писать разметку, но эти названия полезно передать исполнителю: жирное начертание текста ещё не сообщает программе чтения, к каким числам относится подпись. Если для выбранного товара размер расположен в строке, а мерки — в колонках, человек получает понятное соответствие только при сохранении обеих подписей, поэтому исполнитель показывает чтение значений вместе с заголовками и при увеличении масштаба страницы.

Подсказка возвращает человека в ту же карточку

После закрытия таблицы сохраняют выбранный цвет и положение страницы. Если просмотр подсказки сбрасывает вариант товара, человек вынужден повторять выбор, а связь между чтением и покупкой нарушается. Автоматически выбирать размер по одному совпавшему числу тоже рискованно: для одежды важны несколько параметров и рекомендации производителя. Лучше показать данные и оставить понятный переход к доступным вариантам, чем объявлять точный результат по неполным сведениям. Состояние после закрытия подсказки полезно описать в задании отдельно, чтобы удобство выбора не зависело от способа открытия окна и сохранялось одинаково при переходе с компьютера на телефон, где человек чаще возвращается назад привычным жестом.

Недоступный вариант обозначают отдельно. Его строка в сетке может оставаться полезной для сравнения, но кнопка выбора не обязана обещать наличие, которого нет на складе. Содержание подсказки и список доступных вариантов решают разные задачи. Это различие объясняют, чтобы консультанту не пришлось разбирать претензию о том, что размер был показан в таблице, но исчез при оформлении заказа.

Подпись таблицы помогает понять её назначение без окружающего текста. В руководстве W3C для этого приведён элемент caption. Для размерной сетки в такой подписи полезнее назвать одежду и вид измерений, чем повторить неопределённое слово размеры, особенно когда на странице есть отдельные данные тела и изделия.

Что показать на телефоне

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

Сверьте подсказку с выбором на своей карточке

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

Дальше пройдите путь выбора. Откройте подсказку после смены цвета, закройте её и убедитесь, что исходное состояние сохранилось. Повторите действие для модели с другой сеткой. Это выявит ошибку привязки, при которой таблица выглядит правдоподобно, но относится к предыдущему товару, а посетитель не замечает подмены, потому что общий заголовок никак не называет выбранную одежду.

Признаки, которые можно принять

• Название подсказки называет модель, бренд или понятную группу применения.
• Единицы и способ измерения видны до сравнения значений.
• Длинные подписи и все колонки читаются на телефоне.
• После закрытия остаются прежний цвет и выбранный вариант.
• Размер из справочника не выдаётся за подтверждение остатка.
• Редактор знает источник и место изменения сведений.

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

В задаче на доработку интернет-магазина приложите карточку, источник размеров и запись неудачного действия. Это даст исполнителю конкретный материал для исправления связи и отображения, после которого ту же проверку можно повторить без специальных знаний о работе сайта.