Radio Cards for Complex Decisions: UI Design Optimization #49

1 Requirement Goal

The requirement is to provide two modes for production release: "Automatic Advance" and "Batch Confirmation." The mode names, descriptions, and mutually exclusive selection must be placed together so users can compare execution rules at the decision point.

2 Initial Implementation

The first version used a standard radio group for the two modes, with descriptions placed in a separate area. The default selection was "Batch Confirmation." This separation forced users to visually match each radio button with its corresponding description.

Figure 1: Standard radio list with independent description area.

3 Problem Analysis

3.1 Main Problems

Although the selection semantics were present, the separation of labels and options required users to cross-reference. Because the modes involve actual execution rules, comparison demands simultaneous visibility of both the name and the conditions.

The presentation can be adjusted to bring information closer to the decision point, rather than merely changing circle styles or background colors.

3.2 Design Principles

Component appearance can be restructured for the task. Important mutually exclusive options can be presented as selectable cards, each containing the same dimensions of information.

Restructuring must still preserve group relationships, accessible names, single-selection state, and keyboard operability. Ordinary clickable containers do not automatically provide these behaviors.

4 Optimized Implementation

4.1 Information Arrangement

Place the mode name, rule description, and selection control inside the same card. "Automatic Advance" explains that the process continues by rule after each batch passes; "Batch Confirmation" states that each batch requires owner confirmation before proceeding.

Names must match the execution strategies actually supported by the backend, avoiding card copy that promises non-existent capabilities.

4.2 Structural Implementation

The following HTML uses a fieldset with a legend for the group label. Each option is a label with class "mode-card" containing an input type="radio" (shared name="mode" for mutual exclusion), a strong for the mode name, and a span for the description. The default checked option is "Batch Confirmation."

<fieldset>
  <legend>Production Release Mode</legend>
  <label class="mode-card">
    <input type="radio" name="mode" value="automatic">
    <strong>Automatic Advance</strong>
    <span>After each batch passes validation, continue by rule.</span>
  </label>
  <label class="mode-card">
    <input type="radio" name="mode" value="approval_per_batch" checked>
    <strong>Batch Confirmation</strong>
    <span>After each batch validation, owner confirms before proceeding.</span>
  </label>
</fieldset>

Identical name attributes guarantee mutual exclusion within the group. CSS can change card appearance based on :checked and provide distinct focus outlines.

4.3 Interaction Verification

Switch between the two options using the keyboard, verifying that focus, checked state, card appearance, and submitted value remain consistent. Visual state must not be applied only on click.

On save, the backend validates the mode and permissions; the card handles selection and description. For simpler information, a standard radio list may still suffice.

5 Effect Acceptance

Figure 2: Mode name, description, and selection state concentrated in cards.

This example changes information organization while retaining the underlying same-name radio group. Keyboard behavior and submitted values must be verified in practice.

☐ Each description is placed with its corresponding mode.

☐ Only one item is selected at any time; appearance matches checked state.

☐ Keyboard can complete switching; submitted value matches the mode description.

6 Application and Exercise

Create same-dimension description cards for the two modes, then complete the selection using only the keyboard.

Deliver a card sketch and an interaction record that states the initial value, the result of switching, the submitted value, and an explanation of what information problem the cards solve compared to a regular list.