Fíjate en cualquier formulario que pide al visitante elegir entre una lista de opciones y verás algo. El formulario no fracasa por hacer demasiadas preguntas. Fracasa porque alguien eligió el tipo de campo equivocado para esa pregunta. Un desplegable donde unos botones de opción serían más rápidos. Casillas de verificación donde solo tiene sentido una respuesta. Botones de opción donde un desplegable ahorraría la mitad del espacio en pantalla.
No son detalles menores. Las investigaciones muestran que la elección del tipo de campo es una de las principales causas de que los visitantes abandonen los formularios. Una sola mala decisión entre un desplegable, un botón de opción o una casilla puede disparar un 15 % o más el abandono de tu formulario. El visitante no se confunde porque no sepa decidir. Se confunde porque el tipo de campo que elegiste le da una señal equivocada sobre lo que espera el formulario.
Este artículo recoge las reglas prácticas para elegir entre desplegables, botones de opción y casillas de verificación. Verás qué tipo de campo funciona mejor en cada situación, qué le comunica cada uno a tu visitante y cómo evitar los errores que hacen que los visitantes abandonen. Domina estas decisiones y entenderás por qué algunas marcas logran tasas de envío mucho más altas con el mismo formulario solo con cambiar un tipo de campo.
Por qué el tipo de campo que eliges influye en el envío del formulario más de lo que la gente cree
Un campo desplegable, un botón de opción y una casilla recogen una selección de una lista. A simple vista parecen intercambiables. Las diferencias son sutiles. El impacto no lo es.
Cuando un visitante ve un desplegable, sabe que tiene que hacer clic para ver las opciones. Las opciones están ocultas hasta que pulsa. Eso añade un paso. Cuando ve botones de opción, las opciones se ven de inmediato. Puede repasarlas todas de un vistazo y elegir sin pulsar antes. Cuando ve una casilla, entiende que puede seleccionar varios elementos, no solo uno.
Estas diferencias cambian cómo interactúan los visitantes con tu formulario. Cambian el esfuerzo mental. Cambian la rapidez con la que alguien decide. Cambian que el formulario parezca sencillo o abrumador. Acertar significa que menos personas abandonan tu formulario. Fallar significa que los visitantes se van porque el formulario no les resulta intuitivo, aunque técnicamente funcione.
El peor error es usar el tipo de campo equivocado para la situación. Un desplegable para dos opciones parece excesivo. Botones de opción para 15 opciones resultan recargados y abrumadores. Casillas cuando solo se debería elegir una opción generan confusión sobre qué se puede seleccionar. Cada mala elección te cuesta conversiones.
Los desplegables funcionan mejor en listas largas donde el valor por defecto no importa
Un desplegable es un campo que oculta las opciones hasta que alguien hace clic para abrirlo. La elección queda tras un clic. Por eso los desplegables son perfectos para una situación concreta: tienes muchas opciones y el espacio en pantalla importa.
Usa un desplegable cuando tengas más de siete opciones. A partir de ahí, mostrar todas las opciones como botones de opción o casillas hace que el formulario parezca recargado. Un desplegable reúne todas esas opciones en un solo campo que casi no ocupa espacio vertical. Por eso los desplegables son habituales en los formularios para móvil. La pantalla de un teléfono es estrecha. Los desplegables ahorran espacio.
Los desplegables también funcionan bien cuando la elección es obvia y el visitante tiene clara la respuesta. Piensa en elegir un país o una provincia. La mayoría de la gente sabe al instante cuál quiere. Puede escribir la primera letra para saltar a la opción, o hacer clic y desplazarse para encontrarla. La interacción es rápida porque la pregunta es fácil.
Pero aquí es donde fallan los desplegables. Fallan cuando los visitantes necesitan comparar opciones antes de decidir. Fallan cuando la lista está ordenada de una forma que el visitante no espera. Fallan cuando no hay valor por defecto y el visitante tiene que hacer clic solo para ver qué opciones existen.
Un ejemplo: un formulario que pide elegir una preferencia de menú con un desplegable. Las opciones están desordenadas (marisco, vegetariano, pollo, ternera, vegano, sin gluten). El visitante no sabe qué opciones hay sin hacer clic. Cuando hace clic y ve la lista, tiene que procesarlas todas para decidir. No puede verlas todas a la vez para compararlas. Eso lleva más tiempo que si las opciones se vieran como botones de opción. Una investigación de un grupo de referencia en usabilidad muestra que los desplegables ralentizan la toma de decisiones cuando los usuarios tienen que evaluar varias opciones.
Usa desplegables cuando los visitantes saben lo que buscan y las opciones son muchas. Evítalos cuando los visitantes necesiten comparar opciones o cuando haya menos de siete.
Los botones de opción tienen sentido cuando hay entre dos y cinco opciones
Un botón de opción (también llamado botón de radio) muestra un círculo junto a cada opción. Cuando alguien pulsa uno, los demás se desmarcan solos. Solo se puede seleccionar una opción a la vez. Por eso se llaman botones de "radio", como las radios antiguas de los coches, donde pulsar un botón de emisora nuevo soltaba el anterior.
Los botones de opción funcionan de maravilla cuando los visitantes tienen un conjunto de elecciones claro y pequeño. Si tu formulario pide elegir un plan de suscripción y ofreces tres niveles, los botones de opción son la elección perfecta. El visitante ve los tres a la vez. Puede comparar precios, funciones y ventajas mentalmente al instante. Pulsa uno. Hecho. Sin opciones ocultas. Sin confusión.
Los botones de opción también funcionan bien cuando una opción es claramente la predeterminada o la más popular. Imagina un formulario que pregunta cómo conocieron tu marca. Ofreces cinco opciones y la mayoría elige "Búsqueda en Google". Al ver los botones de opción, los visitantes que buscaron en Google ven su respuesta enseguida y la pulsan. No tienen que abrir un desplegable preguntándose si su respuesta está en la lista.
La investigación sobre usabilidad es clara. Cuando las opciones están visibles, la gente decide más rápido. Cuando las personas ven todas las opciones sin un clic extra, suben las tasas de envío. Por eso los botones de opción rinden más que los desplegables en listas pequeñas.
Los botones de opción empiezan a recargar con cinco o seis opciones. Añade más de siete y el formulario resulta abrumador. Cada botón de opción ocupa espacio vertical. Un formulario con ocho botones de opción para "¿Cuál es tu principal interés?" parece mucho más largo de lo necesario. En ese punto, un desplegable tiene más sentido.
Usa botones de opción cuando tengas de dos a cinco opciones y los visitantes se beneficien de compararlas. Evítalos con más de siete opciones.
Las casillas de verificación sirven cuando varias respuestas son correctas
Una casilla parece un cuadrado pequeño. Al pulsarla, muestra una marca. A diferencia de los botones de opción, varias casillas del mismo grupo pueden estar marcadas a la vez. Esa es la diferencia clave. Las casillas no son alternativas entre sí. Son elecciones independientes.
Las casillas funcionan cuando la pregunta admite más de una respuesta. Un formulario que pregunta "¿Cuáles de estas funciones te interesan?" usa casillas porque un visitante puede marcar analítica de producto, opiniones de clientes e integración de automatizaciones a la vez. Cada casilla es una elección independiente, no una alternativa a las demás.
Las casillas también sirven para declaraciones de conformidad. "Acepto los términos y condiciones" es una casilla porque es una afirmación de sí o no. El visitante acepta o no acepta. Del mismo modo, "Quiero recibir novedades por correo" es una sola casilla porque representa una única elección.
La confusión aparece cuando se usan casillas donde tocan botones de opción, o al revés. Un formulario que pregunta "¿Qué plan quieres?" no debería usar casillas. Nadie puede querer los tres planes. Las opciones son excluyentes. Aquí lo correcto son los botones de opción.
Las casillas también sufren el mismo problema de acumulación que los botones de opción. Más de siete u ocho casillas en un solo grupo hacen que el formulario resulte abrumador. Visualmente, muchas casillas parecen mucho trabajo aunque el visitante solo tenga que marcar una o dos.
Usa casillas solo cuando los visitantes puedan elegir legítimamente varias opciones a la vez. Evítalas en preguntas de elección única y agrupa los conjuntos grandes de casillas en categorías más pequeñas y relacionadas.
Cómo decidir cuando no sabes qué tipo de campo usar
La decisión suele estar clara. Pero a veces una pregunta cae en zona gris. Tienes cinco opciones y no sabes si encajan mejor los botones de opción o un desplegable. Este es el árbol de decisión que funciona.
Paso 1. ¿Puede el visitante elegir más de una respuesta? Si es así, usa casillas. Si no, pasa al paso dos.
Paso 2. ¿Cuántas opciones hay? Si hay menos de seis, pasa al paso tres. Si hay más de siete, usa un desplegable.
Paso 3. ¿Los visitantes necesitan comparar las opciones para decidir? Si es así, usa botones de opción para que todas las opciones se vean a la vez. Si no y la respuesta es obvia, sirven tanto los botones de opción como un desplegable, pero los botones de opción serán algo más rápidos.
Este sencillo árbol de decisión resuelve el 90 % de las dudas sobre tipos de campo que surgen al diseñar formularios. Para los casos en que sigas sin tenerlo claro, prueba las dos opciones con visitantes reales. Ejecuta tu formulario con botones de opción durante una semana y mide tu tasa de envío. Cambia a un desplegable, déjalo otra semana y compara. Los datos reales de tus visitantes valen más que cualquier regla de diseño, porque son ellos quienes rellenan tus formularios.
Errores comunes que hunden el envío del formulario sin que nadie sepa por qué
El primer error es usar un desplegable para dos o tres opciones. Ocurre más a menudo de lo que crees. Un formulario pregunta "¿Cómo nos encontraste?" y las opciones son "Buscador", "Redes sociales" y "Recomendación". Un desplegable oculta esas opciones. El visitante tiene que abrirlo para verlas. No sabe qué opciones hay sin hacer clic. Eso añade fricción sin motivo. Aquí los botones de opción son más rápidos y resultan más intuitivos.
El segundo error es mostrar ocho o nueve botones de opción cuando un desplegable ocuparía una décima parte del espacio. Un formulario pide elegir el país entre 195 países. Los botones de opción tendrían un scroll interminable. Un desplegable con búsqueda autocompletada lo resuelve al instante. Algunos diseñadores se quedan con los botones de opción porque les parecen más intuitivos, sin darse cuenta de que esa intuición desaparece cuando hay que desplazarse por 50 opciones.
El tercer error es usar casillas en una pregunta de elección única. Un formulario pregunta "¿Cuál es tu nivel de suscripción?" y muestra tres casillas, una por plan. Los visitantes se confunden. ¿Pueden marcar las tres? La casilla da la señal equivocada. Los botones de opción son más claros porque transmiten visualmente que solo se puede elegir una.
El cuarto error es no dar instrucciones claras sobre lo que significa un campo. Aparece un grupo de casillas con la etiqueta "Intereses" y sin ninguna explicación. El visitante no sabe si debe marcar solo una o todas las que apliquen. Cuando hay ambigüedad, bajan las tasas de envío. Unas etiquetas claras lo arreglan. "Marca todas las que correspondan" o "Elige una" dice al visitante exactamente lo que espera el campo.
El quinto error es usar mal los valores por defecto. Un desplegable que empieza con "Selecciona una opción" como valor por defecto parece roto. Un desplegable que empieza con "Estados Unidos" por defecto resulta útil si es de donde viene la mayoría de los visitantes. Los botones de opción sin ninguna selección obligan al visitante a pulsar uno. Los botones de opción con la respuesta más común ya marcada ahorran un clic al visitante. Estos pequeños valores por defecto se acumulan a lo largo de un formulario.
Consideraciones para móvil que cambian la elección del tipo de campo
Los teléfonos móviles son más pequeños. Eso cambia la decisión sobre el tipo de campo de forma notable.
En ordenador, tres botones de opción para una elección sencilla resultan naturales y rápidos. En móvil, esos mismos tres botones se apilan en vertical y ocupan más pantalla que un desplegable. La decisión puede cambiar.
Los visitantes en móvil también interactúan de otra forma. Usan los pulgares para tocar, no clics precisos de ratón. Una casilla de 44 por 44 píxeles es el tamaño mínimo cómodo. Algo más pequeño es difícil de tocar con precisión. Los botones de opción y las casillas necesitan suficiente espacio alrededor para que tocar uno no active sin querer una opción contigua.
Los desplegables en móvil suelen gestionarse con el menú de selección nativo del dispositivo. Cuando un visitante toca un desplegable en un teléfono, ve un selector optimizado para móvil. A menudo es más rápido y cómodo que desplazarse por una lista larga en la propia página.
En los formularios para móvil, los desplegables resultan más atractivos a medida que el espacio en pantalla se vuelve valioso. Los botones de opción siguen siendo buenos para dos a cuatro opciones porque son rápidos de tocar. Pero seis opciones como botones de opción parecen un scroll. Las mismas seis opciones en un desplegable quedan más limpias y rápidas en un teléfono.
Prueba tus formularios en móvil. La decisión que te pareció correcta en ordenador puede cambiar cuando alguien rellena tu formulario en una pantalla de cuatro pulgadas.
Requisitos de accesibilidad que todo tipo de campo debe cumplir
Los desplegables, los botones de opción y las casillas deben cumplir los estándares de accesibilidad para que las personas que usan lectores de pantalla o navegación con teclado puedan rellenar tu formulario sin problemas.
Cada grupo de botones de opción o de casillas necesita una etiqueta de fieldset que explique para qué sirve el grupo. Cuando un usuario de lector de pantalla entra con el tabulador en el grupo, oye la etiqueta y entiende de qué está eligiendo. Sin ella, solo oye "Botón de opción uno, botón de opción dos" sin contexto.
Cada opción individual necesita una etiqueta visible y en la que se pueda hacer clic, no solo un botón de opción o una casilla pequeños. Si el visitante tiene que pulsar justo el cuadrado de la casilla para seleccionarla, a quienes tienen menos precisión motriz les cuesta. Si pueden pulsar la etiqueta junto a la casilla, seleccionar resulta más fácil para todos. No es una función de accesibilidad solo para personas con discapacidad. Hace los formularios más fáciles para todo el mundo.
Los desplegables también necesitan un etiquetado claro. La etiqueta debe ir encima o a la izquierda del campo desplegable. La opción seleccionada en cada momento debe verse siempre en el desplegable cerrado. Cuando un desplegable se cierra tras la selección y muestra el valor elegido, el visitante sabe que su elección quedó registrada.
Los usuarios de teclado necesitan moverse por los formularios con el tabulador y las flechas. Los botones de opción deben permitir navegar entre opciones con las flechas. Las casillas deben poder seleccionarse con la barra espaciadora. Los desplegables deben abrirse y cerrarse con comandos de teclado. Si tu formulario exige un clic de ratón para cualquiera de estas acciones, los usuarios de teclado quedan bloqueados.
El color solo no puede indicar el estado seleccionado. Un desplegable con una opción resaltada usa el color para mostrar lo que está seleccionado. Es útil. Pero los usuarios que no ven el color también deben poder saber qué está seleccionado, con una marca, un icono o un indicador visual que no dependa solo del color.
Cómo afectan los tipos de campo a la percepción de tu marca
El tipo de campo que eliges le comunica a tu visitante cuánto lo entiendes.
Un desplegable para dos o tres opciones indica que quien diseñó el formulario no pensó mucho en la experiencia de usuario. Añade un clic innecesario. El visitante lo nota. Se siente como fricción.
Un botón de opción donde un desplegable ahorraría la mitad de la longitud del formulario indica lo mismo. El formulario parece mal diseñado.
Pero un formulario que ha pensado claramente en la experiencia de usuario, que hace que las elecciones rápidas parezcan obvias y las selecciones múltiples resulten claras, transmite algo distinto. Transmite que esa marca valora el tiempo del visitante. Transmite que alguien pensó el formulario con cuidado. No es solo mejor usabilidad. Es mejor percepción de marca.
Las pequeñas decisiones como estas se suman. Un visitante rellena tu formulario y cada campo le resulta intuitivo. Termina más rápido de lo esperado. Se queda con buena sensación de la interacción. Esa sensación se traslada a cómo percibe tu marca.