Подзаголовки, ломающие переключатель

Встретил в магазине такой переключатель:

С первого раза не осилил. Тут вроде нормальная структура: подзаголовок + радиокнопка для каждого элемента. Но выбрать пункт, не читая его подзаголовок, не получится. Выписал проблемы, чтобы понять что мешает.

В тексте:

  • пара «подзаголовок — лейбл к радиокнопке» в разных пунктах согласована по-разному (2-й лейбл вообще выглядит ошибкой, как будто не оттуда скопировали);
  • в 1-м пункте повторяются «Самовывоз» и во 2-м — «Доставка», скорее всего, дубли навязывает структура.

В вёрстке:

  • подзаголовки ближе к предыдущим лейблам;
  • подзаголовок предполагает, что пункты внутри него не связаны с пунктами внутри других подзаголовков, но тут это не соблюдается.

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

После перевёрстки повторы и рассогласованность ушли сами:

Способ получения Стоимость
Бесплатно
Сообщает оператор
300 рублей
Поделиться
Отправить
Запинить
3 комментария
Роман Ключкович 2018

Кажется, можно упростить ещё: убрать заголовок «Стоимость» к «сообщает оператор» и поменять 2 и 3 строки местами. Табличность тут лишняя же

Никита Дворников 2018

Согласен с Романом. Зачем все так сложно то?
То, что в заголовках, перенести в надпись напротив радио-кнопки, а стоимость написать второй строкой, как нибудь приглушенно: серым шрифтом или мельче.

Таша 2018

Вот это кейс! Но согласна с предыдущими:

Способ получения:

  • Самовывоз (бесплатно)
  • Доставка в регионы (стоимость по запросу)
  • Доставка по Санкт-Петербургу (300 руб.)
Популярное