• Conocer los tipos de campos de formulario y cuándo usarlos mejora la experiencia del usuario y las tasas de conversión.
• Los formularios son esenciales para la interacción en sitios web (búsqueda, contacto, registro, compras).
• Formularios bien diseñados son más intuitivos y agradables, reduciendo el abandono del usuario.

Campo de una sola línea (Single-line input)

• Campo básico que permite escribir una sola línea de texto.
• Útil para: nombre, correo, dirección, contraseña, ocupación.
• Ideal para respuestas cortas.

Campo de múltiples líneas (Multi-line input)

• Permite escribir varias líneas de texto, expandiéndose verticalmente.
• Útil para: comentarios, encuestas, respuestas largas.
• Ahorra espacio en diseños compactos.

Área de texto (Text area)

• Similar al campo de múltiples líneas, pero con altura fija y scroll vertical.
• Fomenta respuestas más largas desde el inicio.
• Consejo: Si hay límite de caracteres, indícalo con texto de ayuda.

Campo de contraseña (Password input)

• Oculta el texto ingresado (puntos o asteriscos).
• Consejo: Permitir mostrar la contraseña para verificarla.
• Consejo: Añadir texto de ayuda con los requisitos de la contraseña.

Campo de búsqueda (Search input)

• Permite buscar contenido en el sitio, a veces con autocompletado.
• Suele incluir ícono de lupa y texto de ejemplo (placeholder).
• Consejo: Colocar la lupa antes del placeholder para mejor reconocimiento.

Texto de ejemplo (Placeholder)

• Muestra un ejemplo de lo que se debe ingresar; desaparece al escribir.
• En formularios complejos, puede causar confusión si desaparece.
• Consejo: Usar siempre junto con etiquetas visibles.
• Consejo: El placeholder debe tener un color más tenue que el texto ingresado.

Campo de fecha (Date input)

• Campo con formato especial para ingresar fechas, a veces con calendario desplegable.
• Útil para: citas, reservas, compras de entradas.
• Consejo: Usar máscaras y placeholders para indicar el formato correcto.

Campo de selección (Select input)

• Muestra una lista de opciones predefinidas para elegir una.
• Útil cuando hay opciones limitadas (país, categoría, estado).
• Ahorra espacio y reduce errores de entrada.

Campo con acción (Action input)

• Combina un campo de entrada con un botón (ej. "Aplicar", "Buscar").
• Valida y procesa datos en un solo paso.
• Útil en: cupones, búsquedas, formularios de envío.
• Simplifica la interacción y ahorra espacio.

Campo obligatorio (Required input)

• Indicado con un asterisco (*) o la palabra "obligatorio".
• Mejora la claridad sobre qué campos deben completarse.
• Consejo: El asterisco puede ir antes del label y no necesita ser rojo.
• Pro Tip: Marcar también los campos opcionales con la palabra "opcional" para reducir la carga cognitiva.

Máscara de entrada (Input mask)

• Ayuda a los usuarios a ingresar datos con el formato correcto (teléfonos, fechas).
• Aplica automáticamente el formato mientras se escribe.
• Ventaja: Reduce errores y la carga cognitiva del usuario.

Material Design Text fields – Material Design 3

Nielsen Norman Group Marking Required Fields in Forms

Baymard Institute Consider Using Localized Input Masks for ‘Phone’ and Other Restricted Inputs (64% Aren’t Taking Advantage of Input Masking) – Baymard

Importancia del uso y estilo de los campos de entrada

• El uso y estilo de los inputs (espaciado, márgenes, etiquetas, etc.) es clave para la usabilidad.
• Formularios mal diseñados pueden ser confusos e inutilizables.
• El objetivo es motivar a los usuarios a completar y enviar los formularios.

Proporciona suficiente relleno (padding) para facilitar la lectura

• El padding da espacio al texto, mejorando su legibilidad y escaneabilidad.
• Formularios con buen padding son más cómodos de leer y fáciles de usar.
• También facilitan el toque o clic en dispositivos móviles.

Agrega suficiente espacio entre los campos

• Márgenes adecuados evitan que los inputs se vean amontonados o desconectados.
• Principio de proximidad: los elementos relacionados deben estar cerca entre sí.
• Pro Tip: En móviles, evita el scroll infinito dividiendo el formulario en varias páginas.

Evita el desorden y agrega espacio entre elementos

• Agrupar demasiados elementos sin espacio crea confusión visual.
• El espacio entre inputs debe ser mayor que el espacio entre elementos internos del mismo componente.
• Pro Tip: Deja al menos 4px entre los bordes del input y el texto de ayuda.

Usa estilos estándar para los campos

• Inputs con relleno semitransparente se reconocen más rápido (según Google).
• Puedes variar colores y bordes, pero sin exagerar.
• Asegura un contraste mínimo de 4.5:1 entre texto y fondo.

Proporciona etiquetas útiles

• Las etiquetas deben guiar al usuario con claridad y brevedad.
• Evita jerga técnica, frases largas o ambiguas.
• Usa lenguaje cotidiano y directo.
• Si se necesita más contexto, añade texto de ayuda o un ícono con tooltip.

Asegura que las etiquetas sean legibles

• Las etiquetas deben ser visibles pero no dominantes.
• Tamaño recomendado: 2px menos que el texto principal (ej. si el cuerpo es 16px, la etiqueta debe ser 13–14px).
• Pro Tip: En móviles, revisa la legibilidad en un dispositivo real.

Elige un estilo de mayúsculas legible para las etiquetas

• Sentence case: más fácil de leer, ideal para etiquetas y frases largas.
• Title Case: da más énfasis, útil para títulos o menús.
• Evita MAYÚSCULAS COMPLETAS: son difíciles de leer y generan ruido visual.

Mantén el texto del input legible

• Tamaño recomendado: 16px como base.
• Puede variar según el tipo de contenido (más grande para texto, más pequeño para interacciones).
• Pro Tip: La legibilidad varía según la fuente, incluso con el mismo tamaño.

Proporciona texto de ayuda conciso pero útil

• Úsalo solo si la etiqueta no es suficiente para explicar el campo.
• Debe ser breve, claro y directo (idealmente una línea).
• Pro Tip: El texto de ayuda debe ser más pequeño y menos destacado que la etiqueta (ej. etiqueta 14px → ayuda 12px).

Proporciona placeholders informativos

• No repitas la etiqueta; da ejemplos del tipo de dato esperado.
• Usa un color más tenue que el texto ingresado para evitar confusiones.
• Consejo: Acompaña siempre el placeholder con una etiqueta o usa etiquetas flotantes para evitar que desaparezca la pista.

Buenas prácticas para diseñar campos de entrada en interfaces (UI Inputs)

• Los inputs son esenciales para la experiencia de usuario (UX).
• Un buen diseño de inputs mejora la usabilidad, reduce errores y aumenta las conversiones.
• Desde la búsqueda hasta los mensajes de error, cada detalle cuenta para una UX exitosa.

No recortes los mensajes de error

• Los errores deben ser claros, útiles y completos.
• Evita truncar los mensajes; si es necesario, usa dos líneas.
• Deben ser escaneables y fáciles de entender a simple vista.

Usa los controles de selección adecuados

• Listas desplegables: útiles para listas largas.
• Botones de opción (radio buttons): mejor para una sola elección en listas cortas.
• Casillas de verificación (checkboxes): ideales para selecciones múltiples.

Simplifica la búsqueda con sugerencias en tiempo real

• Usa auto-sugerencias para filtrar opciones mientras el usuario escribe.
• Útil para listas largas (como países).
• Mejora la velocidad y reduce la frustración.

Resalta los caracteres coincidentes para facilitar la lectura

• En búsquedas incrementales, resalta los caracteres que coinciden con lo escrito.
• Usa negrita para diferenciar lo que el usuario ha escrito del resto del texto sugerido.

Coloca los mensajes de error debajo del campo

• Mejora la asociación entre el error y el campo correspondiente.
• Mejor ubicación: debajo o a la derecha del campo.
• Evita colocarlos arriba o a la izquierda.
• Accesibilidad: usa atributos ARIA para que los lectores de pantalla los detecten.

Evita errores con máscaras de entrada para teléfonos

• Las máscaras permiten ingresar números en cualquier formato y los ajustan automáticamente.
• No confundir máscara con placeholder.
• Las máscaras aparecen al enfocar el campo y escribir.

Evita formatos incorrectos con máscaras de fecha

• Diferentes países usan distintos formatos de fecha.
• Las máscaras aseguran uniformidad y evitan errores.
• Pro Tip: Usa el formato de fecha local del usuario si es posible.

Agrega una etiqueta de moneda para evitar confusión

• Informa claramente la moneda utilizada en el sitio o servicio.
• Es clave para usuarios internacionales y genera confianza.
• Útil en compras, filtros de productos, precios, etc.

Evita errores con máscaras para tarjetas de crédito

• Las máscaras guían visualmente al usuario al ingresar su número de tarjeta.
• Aseguran el formato correcto y reducen errores.
• Mejoran la experiencia de compra y reducen el abandono.

Proporciona mensajes de error útiles

• Usa colores contrastantes (como rojo) e íconos relevantes para destacar errores.
• Explica qué ocurrió y cómo solucionarlo.
• Prefiere validación en tiempo real en lugar de mostrar errores al enviar el formulario.

Introducción a los formularios en interfaces (UI Forms)

• Los formularios son esenciales para la interacción en sitios web (registro, compras, contacto).
• Formularios mal diseñados generan problemas de usabilidad y abandono.
• Formularios bien diseñados mejoran la experiencia, reducen la carga cognitiva y aumentan las conversiones.

Coloca las etiquetas encima de los campos

• Mejora la legibilidad y escaneabilidad del formulario.
• La alineación vertical se adapta mejor a etiquetas de diferentes longitudes.
• Facilita la adaptación a distintos tamaños de pantalla.

Mantén un flujo de lectura natural

• Formularios de una sola columna son más rápidos y fáciles de completar.
• Formularios de múltiples columnas causan errores, confusión y abandono.
• Pro Tip: Agrupa campos relacionados (como tarjeta, fecha y CVV) en una sola fila si tiene sentido.

Agrupa los campos de forma lógica

• Según el principio de proximidad, los elementos cercanos se perciben como un grupo.
• Divide el formulario en secciones (ej. datos personales, facturación).
• Usa tipografía y espaciado para crear jerarquía visual.

Agrega suficiente espacio entre los elementos

• Los márgenes evitan el desorden visual y mejoran la escaneabilidad.
• Elementos relacionados deben estar cerca; los no relacionados, más separados.
• Pro Tip: Mantén el espaciado consistente en todo el formulario.

Deja espacio suficiente alrededor de los botones

• Los botones son claves para completar formularios.
• Necesitan espacio para evitar clics accidentales (ej. “Cancelar” en lugar de “Enviar”).
• Mejora la accesibilidad en pantallas táctiles.

Usa indicadores de progreso para motivar

• En formularios largos (3+ pasos), los indicadores de progreso ayudan a reducir la carga cognitiva.
• Dividir el formulario en pasos lo hace más manejable.
• Motiva al usuario al mostrar cuánto falta para terminar.

Usa etiquetas de acción claras y contextuales

• El botón principal debe indicar claramente la acción (ej. “Registrarse”, “Descargar”).
• Evita términos genéricos como “Enviar” si pueden causar confusión.
• Consejo: Completa la frase “Quiero…” para definir la acción desde la perspectiva del usuario.

Haz que el botón principal destaque

• Usa color, tamaño o posición para darle peso visual al botón principal.
• Debe diferenciarse claramente de otras acciones secundarias.
• Aumenta la probabilidad de clics y finalización del formulario.

Mantén la jerarquía entre botones

• Botones secundarios (ej. “Cancelar”) deben ser visualmente más discretos.
• Usa colores más claros o menos saturados.
• Pro Tip: No los hagas parecer deshabilitados.

Buenas prácticas para diseñar formularios

• Los formularios suelen ser largos o confusos, lo que genera rechazo.
• Un buen diseño reduce la carga cognitiva y mejora la experiencia del usuario.
• Evita etiquetas ambiguas, placeholders que desaparecen, agrupaciones ilógicas y mensajes de error poco claros.

Elimina campos innecesarios

• Formularios más cortos son más rápidos y agradables, especialmente en móvil.
• Un solo campo para nombre completo es más inclusivo y reduce pasos.
• Consejo: Asegúrate de poder identificar correctamente nombre y apellido si usas un solo campo.

Anticipa dudas y usa texto de ayuda

• Usa texto de ayuda para explicar por qué se solicita cierta información o cómo completarla.
• Es útil en campos sensibles (teléfono, contraseña).
• Pro Tip: No ocultes el texto de ayuda en tooltips; debe estar visible.

Usa teclados contextuales para reducir acciones

• Muestra el teclado adecuado según el tipo de campo (numérico para teléfonos, por ejemplo).
• Ahorra tiempo y reduce errores.
• Pro Tip: Combina teclados contextuales con máscaras de entrada para mayor precisión.

Usa indicadores visuales para inputs activos

• Muestra visualmente el estado del campo (activo, enfocado, error, deshabilitado).
• Mejora la retroalimentación y guía al usuario.
• Las microinteracciones también pueden ayudar a destacar el campo activo.

Haz que los botones sean fáciles de pulsar

• Botones grandes y visibles mejoran la interacción.
• Tamaño mínimo recomendado: 38px x 38px (1x1 cm).
• Igualar el ancho del botón al de los campos puede mejorar la estética.

Indica campos obligatorios y opcionales

• Usa un asterisco o la palabra “obligatorio” para marcar campos requeridos.
• Para campos opcionales, añade “(opcional)” junto a la etiqueta.
• Evita colores poco contrastantes para no dificultar la lectura.

Los campos deben ser fáciles de pulsar

• Inputs muy pequeños dificultan la interacción y la lectura.
• Altura recomendada: 32px a 40px.
• Si el formulario es largo, divídelo en pasos lógicos (máximo 5–6).

Usa los placeholders con precaución

• No reemplaces etiquetas con placeholders: desaparecen al escribir y pueden confundir.
• Soluciones:
• Usa etiquetas flotantes que se mueven al escribir.
• Usa etiquetas visibles + pistas externas + máscaras de entrada.

Coloca el mensaje de error cerca del campo con error

• La ubicación más intuitiva para los errores es a la derecha del campo con error.
• La segunda mejor opción es debajo del campo, ideal para móviles.
• Evita colocar errores en la parte superior o inferior del formulario: se pasan por alto y aumentan la carga cognitiva.

Usa íconos como guía visual

• Los íconos son más rápidos de interpretar que el texto (ej. ícono de tarjeta para CVV).
• Los tooltips pueden ayudar, pero requieren interacción adicional y no siempre funcionan bien en móviles.
• Pro Tip: No pongas información crítica (como requisitos de contraseña) solo en tooltips.

Mantén un estilo tradicional en los campos

• Inputs simples y sin adornos reducen el desorden visual.
• Mejora el enfoque del usuario en lo importante.
• Accesibilidad: Asegura buen contraste entre texto y fondo para facilitar la lectura.

Elige el selector de fecha adecuado según la necesidad

• Para fechas conocidas (como fecha de nacimiento), un campo de texto con máscara de entrada es suficiente.
• Para fechas cercanas (reservas, vuelos), usa un calendario desplegable.
• Elige el tipo de selector según el contexto y la frecuencia de uso.

Reduce el número de acciones del usuario

• Evita pedir datos que el sistema puede obtener automáticamente (ej. país por geolocalización).
• Usa valores predeterminados inteligentes o autodetección para simplificar el proceso.
• Menos acciones = mejor experiencia de usuario.

Introducción a los indicadores de progreso en interfaces (Progress Trackers)

• Dividen tareas grandes en pasos pequeños, motivando a los usuarios a completarlas.
• Reducen el abandono y la carga cognitiva.
• Según la ley de Miller, dividir la información en bloques mejora la comprensión y el escaneo.

Indica la posición actual

• El paso actual debe destacarse visualmente (color diferente).
• Ayuda a los usuarios a saber en qué parte del proceso están.
• Funciona como un “Tú estás aquí” en un mapa.

Indica los pasos restantes

• Muestra cuántos pasos faltan para terminar.
• Suelen verse desactivados (gris claro) hasta que se activan.
• Pro Tip: Asegúrate de que los pasos inactivos tengan buen contraste y sean legibles.

Indica los pasos completados

• Ayuda a visualizar el progreso.
• Usa checkmarks o el color verde, símbolos universales de tarea completada.
• Diferencia visualmente los pasos completados de los pendientes.

Indicadores tipo carrusel

• Usados en tutoriales o procesos cortos (onboarding).
• Muestran el número de pasos y la posición actual.
• No indican dirección y permiten saltar pasos fácilmente.

Indicadores verticales

• Organizan los pasos de arriba hacia abajo.
• Útiles para seguimientos (envíos, servicios).
• Pro Tip: Asegura que el indicador sea visible al hacer scroll.

Usa un número razonable de pasos

• Formularios largos desmotivan; lo ideal es entre 5 y 7 pasos.
• Ver que el proceso es corto anima a completarlo.

Usa etiquetas en los pasos para mejorar el reconocimiento

• Las etiquetas ayudan a recordar en qué parte estaban si se distraen.
• Mejoran la escaneabilidad y comprensión del proceso.