Выбор из N опций: дизайн UI решения

Действуй как product designer. Выбор из N — это переговоры с paradox of choice. Больше опций ≠ больше свободы. Цель: чтобы 80% юзеров выбрали правильно за 10 секунд, а 20% «продвинутых» могли уйти в детали.

Тип решения: {{decision_type}} Опций: {{option_count}} Юзер: {{user_expertise}}

Закон выбора из N: 4 механики

Структура UI

Card-based (для 2-5 опций)

┌─────────────┐  ┌─────────────┐  ┌─────────────┐
│ STARTER     │  │ ★ TEAM      │  │ ENTERPRISE  │
│             │  │ Recommended │  │             │
│ $9/mo       │  │ $29/mo      │  │ Custom      │
│ For solo    │  │ For 5-50    │  │ For 100+    │
│             │  │             │  │             │
│ ✓ feature 1 │  │ ✓ feature 1 │  │ ✓ everything│
│ ✓ feature 2 │  │ ✓ feature 2 │  │ ✓ + SLA     │
│ ✗ feature 3 │  │ ✓ feature 3 │  │ ✓ + SSO     │
│             │  │ ✓ feature 4 │  │             │
│ [Choose]    │  │ [Choose ▶]  │  │ [Contact]   │
└─────────────┘  └─────────────┘  └─────────────┘
                 ← elevated, accent border, larger CTA

• Recommended — визуально выделен: больше, accent border, badge сверху.
• Каждая карточка: name + price/key-attr + 1-line «для кого» + features list + CTA.
• Features синхронизированы по позиции — чтобы глаз сравнивал по строкам.

Comparison table (для 4+ опций или сложных)

                  Starter    ★ Team      Enterprise
Price             $9         $29          Custom
For               Solo       5-50 users   100+
Storage           10GB       100GB        Unlimited
SSO               —          —            ✓
SLA               —          —            ✓ 99.9%
Custom roles      —          ✓            ✓
API access        Read       Read+Write   Full
Support           Community  Email        Dedicated CSM

                  [Choose]   [Choose ▶]   [Contact]

• Header sticky при горизонтальном скролле на mobile.
• ✓ / — / точечный текст. Не «Yes / No» (длинно).
• Highlight ряда при hover, чтобы взгляд не терялся.
• Колонка recommended — accent background tint.

Wizard / step-by-step (для конфигурации)

Если опции — это не finite list, а конфигурация:

• Шаг 1: «Что ты делаешь?» → 3 high-level варианта.
• Шаг 2 на основе шага 1: уточнение.
• В конце: «Recommended: <option>», но возможность override.

Recommendation как первый класс UI

• Badge: «★ Most popular», «Recommended for you», «Best value». Не «Default» (бухгалтерия).
• Reasoning: под badge'ом — 1 строка почему: «Because you have 5+ team members».
• Если recommendation персонализирован — это намного сильнее, чем «most popular».

Smart default

• Не «ничего не выбрано» — это вопрос вместо ответа.
• Default = recommendation visually. Если юзер не трогает — proceeds with recommended.
• В радио-кнопках / dropdown — первая опция = default (либо явно выделена).

Микрокопия

• Названия опций — короткие. «Starter» лучше «For individuals just getting started».
• Под названием — для кого. «Solo developers», «Growing teams», «Enterprises with security needs».
• Цена / ключевой атрибут крупно. Это первое, что сравнивают.
• CTA на каждой опции. Не один общий CTA внизу — каждая карточка selectable.

Mobile-адаптация

• 2-3 опции → стек карточек, full-width.
• 4+ опций → горизонтальный карусель с recommended сразу первым (а не центральным).
• Comparison table → переключатель «View: Cards / Table» + table со sticky первой колонки.

States

• Selected (после клика): border accent, checkmark в углу, текст «Selected» вместо «Choose».
• Disabled (не подходит юзеру): opacity 0.6, badge «Not available for your account» + ссылка «Why?».
• Loading (после клика, ждём ответ): кнопка → spinner внутри, остальные карточки disable.
• Comparison toggle: «Compare» переключает на табличный вид (можно держать оба).

Помощь юзеру

• Tooltip на каждом feature в comparison table (особенно для exoteric терминов: «SSO», «SCIM», «WORM», «MSA»).
• «Not sure which?» link под карточками → ведёт на quiz («3 questions to find your plan») или на calculator.
• «Talk to sales» как escape для enterprise или сложных случаев.

A11y

• Each option — role="radio" if mutually exclusive, или <button> если каждая — отдельный action.
• Recommended option — aria-label="Team plan, recommended".
• Comparison table — обычная семантика <table> с <th scope="col"> и <th scope="row">.
• Keyboard: Tab по опциям, Arrow keys внутри group, Enter — choose.

Формат вывода

Структура (выбор паттерна)

• Cards / Table / Wizard
• Почему этот паттерн для {{option_count}} опций и {{user_expertise}} юзера

Recommendation

• Какая опция = recommended
• Reasoning (1 строка под badge'ом)
• Default-state

Card spec (если cards)

• Анатомия (что внутри карточки сверху вниз)
• Recommended — как выделен
• CTA copy для каждой

Comparison table (если table)

• Строки (что сравниваем)
• Порядок колонок
• Что highlight'ить
• Mobile-fallback

Микрокопия

• Названия опций
• Под-описания
• CTA-текст
• Recommendation badge

Mobile-spec

Что меняется на 375px.

Help для тех, кто не знает

• Tooltip-стратегия
• «Not sure?» механика
• Escape (sales / quiz)

A11y

Роли, keyboard.

Anti-patterns (НЕ делать)

• ❌ Нет default'а. Каждая опция = вопрос юзеру. Юзер уйдёт.
• ❌ Recommended на самой дорогой опции без обоснования. Юзер чувствует манипуляцию.
• ❌ 7 опций без recommendation. Парализует выбор.
• ❌ Сравнение «Pro lite» vs «Pro» vs «Pro plus» vs «Pro premium». Названия не информативны — pereименуй или укажи «для кого».
• ❌ Feature list разной длины на разных карточках. Сравнить невозможно.
• ❌ Цена в крошечном шрифте под features. Цена — primary attribute, должна быть крупной.
• ❌ «Contact sales» как единственный CTA на одной из карточек, когда у других «Try free». Юзер чувствует, что его футболят.
• ❌ Comparison table из 30 строк features. Утопит. Оставь top-10 + «See full comparison».