Master Mobile UI: Choosing the Right Selection and Input Controls

Introduction

The article introduces the fundamental principles of choosing UI controls for mobile scenarios, emphasizing cognitive and behavioral efficiency: users should easily understand and use the controls.

Selection Controls Overview

Selection controls let users choose one or multiple options and are mainly used in settings pages.

Switches

Definition: A toggle that turns a single item on or off, mirroring real‑world switches.

Properties: Two states (on/off) plus a disabled state; mutually exclusive.

Usage: Enable/disable a feature, activate immediately, commonly used in list pages.

Design Details: Immediate visual feedback, avoid nesting, use concise wording, and provide instant rollback on failure.

Radio Buttons

Definition: Allows selection of a single option from a group; mutually exclusive.

Properties: 2‑4 options, states: selected, unselected, disabled.

Usage: Choose one item, cannot cancel selection, all options visible.

Design Details: Provide default or empty option, enlarge tap area, avoid nesting, list options vertically.

Checkboxes

Definition: Users can select one or multiple options from a set.

Properties: Independent options, states: checked, unchecked, partially checked, disabled.

Usage: Select one or many items, support toggle, can have nested sub‑options.

Design Details: Parent‑child logic, reduce negative wording, allow batch select/clear.

Sliders

Definition: Controls that let users pick a value or range along a track.

Types: Continuous and discrete (segmented) sliders.

Usage: Adjust volume, brightness, color, or other ranges with flexible precision.

Design Details: Immediate state change, tap to jump, optionally display others' selections.

Other Selection Controls

Includes list selections (dropdowns, pop‑ups, floating layers) and tag selections. Use when screen space is limited, options are numerous, or need to keep options hidden until chosen. Design tips: logical ordering, timely entry updates, set low‑priority defaults.

Input Controls Overview

Input controls let users add or edit content. Common types are text fields, steppers, and voice input.

Text Fields

Definition: Fields for entering or editing text.

Components: Title, required indicator, input container, cursor, helper text, placeholder, icons, feedback messages.

States: Before input, during input, after input.

Design Details: Clear required hints, helpful helper text, segmented placeholder for phone numbers or IDs, expandable containers, visible feedback, avoid keyboard obstruction.

Steppers

Definition: Controls for incrementing or decrementing numeric values.

Design Details: Provide direct input for large ranges, synchronize page content after change, enforce min/max limits with disabled buttons.

Voice Input

Definition: Recognizes spoken words for fast input or Q&A.

Usage: Long text entry, instant queries, accessibility, low‑entry barrier.

States: Inactive, awakened, listening, result, error.

Design Details: Clearly indicate current state, provide audio/visual feedback, show suggestions, allow cancel, compare efficiency vs manual typing.

Chapter Summaries

Tables (omitted here) compare the characteristics of selection and input controls, offering a quick reference for designers.

Conclusion

Although small, UI controls contain many details worth exploring. This article covered common selection and input controls, their properties, usage scenarios, and design nuances, providing a consolidated guide to help designers create simple, perfect, and elegant interfaces.