Product Craft Bible
Formularios Mobile
Inicio Mobile Formularios Mobile
Mobile

Formularios Mobile

6 reglas investigación 2026
155

Formularios Mobile

6 reglas
1331

Input type nativo para cada campo

Declara el input type correcto en cada campo: `email` (muestra @), `tel` (teclado numérico con guiones), `number` (teclado numérico simple), `url` (muestra punto y slash), `search` (muestra lupa y botón de búsqueda). Un campo de email con type='text' obliga al usuario a cambiar manualmente al teclado con @, generando fricción innecesaria.

investigación 2026
Preferir
Nuevo contacto
Telefono type="tel"
55 1234 5678Numérico
Email type="email"
usuario@mail.com@ incluido
Importe inputmode="decimal"
$1,250.00Decimal
1
2
3
4
5
Teclado numérico para este campo
Evitar
Nuevo contacto
Telefono type="text"
55 1234 5678QWERTY
Email type="text"
usuario@...QWERTY
Importe type="text"
$0.00QWERTY
Q
W
E
R
T
Teclado QWERTY en todos los campos
1332

Picker wheels para opciones limitadas

Para campos con un conjunto limitado y conocido de opciones (estado civil, país, número de tarjeta de crédito mes/año), usa picker wheels nativos en lugar de dropdowns o text fields. Los picker wheels son el patrón nativo de iOS y Android para listas cortas, son más rápidos y menos propensos a error tipográfico.

investigación 2026
Preferir
Registro
Pais de nacimiento
Mexico
Cancelar Listo
Colombia Mexico Peru
Evitar
Registro
Pais de nacimiento
Seleccionar...
Argentina
Bolivia
Chile
Colombia
Ecuador...
Tap targets diminutos, scroll impreciso con el pulgar
1333

Date/time picker nativo siempre

Siempre usa el date/time picker nativo del sistema operativo para campos de fecha y hora. Los pickers custom en JavaScript son más lentos, menos accesibles, y no respetan el formato de fecha regional del usuario. En iOS usa `UIDatePicker`; en web mobile usa `` o `` que delegan al picker nativo.

investigación 2026
Preferir
Agendar cita
Fecha de la cita
15 / Mar / 1990
Cancelar Listo
14 15 16
Feb Mar Abr
1989 1990 1991
Evitar
Agendar cita
Fecha de la cita
Seleccionar fecha
Enero 2026
LMMJVSD 12345 6789101112
Tap targets diminutos, sin accesibilidad para lectores de pantalla
1334

Cámara y galería sin fricción

El acceso a cámara y galería debe requerir un solo tap: un botón que abre el action sheet nativo con 'Tomar foto' y 'Elegir de la galería'. No implementes preview de galería custom antes de la selección, el selector nativo es más rápido y familiar. Muestra el permiso de cámara/galería solo cuando el usuario intenta usarlo, no al cargar el formulario.

investigación 2026
Preferir
Verificación de identidad
Toca para agregar foto
Tomar foto
Elegir de galeria
Cancelar
Evitar
Verificación de identidad
Paso 1: Subir documento
Paso 2: Elegir origen del archivo
Paso 3: Confirmar selección
3 toques antes de abrir la camara
1335

Biométrica reemplaza, no duplica

Face ID, Touch ID o la autenticación biométrica del sistema debe reemplazar el campo de contraseña, no añadirse junto a él. Si el usuario tiene biométrica configurada, el campo de contraseña en cada inicio de sesión es redundante. Usa la biométrica como método principal y el password como fallback cuando la biométrica falla.

investigación 2026
Preferir
Face ID
Mira la pantalla para entrar
Usar Face ID
O usa tu contrasena
Evitar
Iniciar sesión
ana@email.com
●●●●●●●●
Entrar
Face ID (adicional)
Ambos obligatorios. Face ID no simplifica nada
1336

Auto-avance entre campos fijos

En formularios con campos de longitud fija y conocida (código postal, número de tarjeta, código de verificación), al completar el último carácter del campo mueve el foco automáticamente al siguiente. Esto elimina la necesidad de que el usuario haga tap en el siguiente campo. Asegúrate de que el auto-avance sea cancelable: si el usuario borra un carácter, el foco debe regresar al campo anterior.

investigación 2026
Preferir
Introduce tu PIN
El foco salta solo al completar cada digito
1
2
3
4
5
6
Evitar
Introduce tu PIN
3
8
El usuario debe tocar cada campo manualmente
1
2
3
4
5
6