Cómo diseñar formas sensibles y agnósticas de dispositivo

Sep 16, 2025

Cómo

[dieciséis]

Ya sea que sea un flujo de registro o un paso a paso múltiple, los formularios son uno de los componentes más importantes del diseño de productos digitales, por lo que debe diseñarlos para que funcionen de manera efectiva en dispositivos móviles.

A continuación, lee cómo diseñar formularios para dispositivos móviles, incluida una mirada rápida a Cómo usar FlexBox .

01. Diseño para el desplazamiento vertical.

Independientemente del tamaño del dispositivo, la forma más fácil de completar un formulario es de manera lineal. Múltiples columnas interrumpen el impulso de un usuario (es probable que los usuarios interpreten los campos de manera inconsistente, lo cual es un factor negativo en términos de usabilidad) y puede resultar en que los usuarios tengan que recurrir al desplazamiento horizontal.

Cuando se trata de establecer formularios, debe diseñar las entradas en una columna: Si un formulario está en una sola columna, la ruta a la finalización es una línea recta hacia abajo en la página.

02. Coloque etiquetas por encima de los campos

Las etiquetas indican a los usuarios lo que significan los campos de entrada correspondientes. Al elegir dónde colocar sus etiquetas, tiene dos opciones: alineado por la izquierda o alineado en la parte superior.

Las etiquetas alineadas a la izquierda funcionan bien si el formulario se está completando en un escritorio o tableta. Sin embargo, son una solución horrible para dispositivos móviles donde hay un patrimonio limitado. Dado que las etiquetas alineadas por la izquierda necesitan sentarse antes del campo, la pantalla estrecha deja muy poco espacio para el campo en sí, especialmente si el dispositivo está en modo retrato. Esto crea dos problemas serios de usabilidad:

El campo de formulario no será lo suficientemente ancho como para mostrar la entrada completa del usuario, lo que los hace más propensos a errores de sus respuestas y llevar a que se envíen más formas erróneas.
Cuando se le notifica a un usuario que han ingresado información errónea, pueden tener dificultades para detectar y solucionar el problema, ya que no podrán ver toda la entrada inválida

Colocación de la etiqueta por encima del campo Formulario Cuando un usuario está navegando desde un dispositivo móvil, se asegurará de que los usuarios puedan ver el ancho máximo para ingresar sus detalles, ya que no necesita usarlo para la etiqueta.

Escribir sus etiquetas por encima de los campos de entrada también facilita que usted escriba etiquetas de campo claras y significativas, ya que no se limitará a una o dos palabras.

03. Use objetivos de toque

Toque Los objetivos deben ser fáciles de usar, sin importar en qué tamaño del dispositivo se muestren. Los objetivos más grandes (campos de entrada y botones) son más fáciles para los usuarios con menor destreza, ya sea que sea una condición permanente o un temporal causado por el medio ambiente.

En este momento, el tamaño objetivo más grande es para dispositivos táctiles, por lo que necesita diseñar toque-primero. Esto garantiza que los usuarios no tengan que hacer zoom para ingresar el texto o seleccionar una opción. Las áreas de clickables deben seguir la regla del dedo gordo y no invadir las áreas circundantes: la almohadilla de dedo humano promedio es de 10 x 14 mm y la punta del dedo promedio es de 8-10 mm, lo que hace de 10 x 10 mm de un buen tamaño mínimo de destino táctil.

Pero no solo debe dimensionar adecuadamente un objetivo del TAP, también debe asegurarse de que haya suficiente espacio entre múltiples objetivos de toque. De hecho, si está obteniendo el error 'TAG TIPO TIPO "en las herramientas de SEO móvil, a menudo se debe a que los objetivos de su toque están demasiado juntos, en lugar de que el objetivo real sea demasiado pequeño.

Puede ser difícil leer el contenido en dispositivos móviles, por lo que hace que las entradas se encuentren al 100% y garanticen que el texto esté configurado en al menos 16px (1EM) hará una gran diferencia. De esa manera, no se requerirá ningún zoom de pellizco ni desplazamiento adicional para leer la información requerida.

04. Utilice campos de formulario HTML5

Los dispositivos móviles ofrecen teclados de software personalizados para diferentes tipos de entrada, y los campos de formulario HTML5 son la forma más fácil de mejorar la experiencia del usuario de sus formularios. Estos tipos de entrada proporcionan sugerencias al navegador sobre qué tipo de diseño de teclado para mostrar para los teclados en pantalla.

Incluir los tipos de entrada de número De Email De Tel De url y fecha , y la entrada del teclado en sus dispositivos móviles se actualizará para que sea más fácil para el usuario que se llene en el formulario. No requiere que agregue clases adicionales a las entradas de forma de estilo, todo lo que necesita hacer es usar tipos de entrada HTML5 válidos:

<input type="email" id="input-email">

05. Usa FlexBox

Vamos a enfrentarlo, es difícil crear un diseño sensible en HTML. La mayoría de nosotros hemos luchado con esto en un momento u otro. Aunque siempre ha sido posible hacer que los diseños se comporten como se esperaba utilizando tecnologías especializadas, el proceso nunca ha sido fácil.

Las tecnologías para lidiar con los diseños estructurados han llegado a los años: los desarrolladores han utilizado marcos HTML, tablas HTML, diseños basados en flotadores y, más recientemente, varios sistemas de cuadrícula popularizados por los marcos CSS, como Oreja .

Pero con la llegada del modelo de caja flexible HTML (o Caja flexible ), HTML finalmente ha ganado un rico motor de formato de caja que aborda diseños complejos, incluidos los formularios HTML.

FlexBox nos da una gran flexibilidad para construir rápidamente hermosas formas. La clave para entender sobre FlexBox es que es una herramienta de manipulación de contenedores: tiene como objetivo proporcionar una forma más eficiente de diseñar, alinear y distribuir espacio entre los elementos en un recipiente, incluso cuando su tamaño es desconocido y / o dinámico (de ahí el palabra 'flex').

Lo que es interesante es que FlexBox nos da una gran flexibilidad para construir rápidamente nuestro formulario sin usar cualquier consulta de medios. Además, todos los navegadores actuales lo apoyan.

Nuestra Guía del diseñador web de FlexBox El artículo le informa más, pero por ahora hagamos cierta práctica y aprende a aprovechar FlexBox para crear un formulario sensible. Lo primero es lo primero, definamos la estructura HTML para nuestro formulario:

 & lt; formando & gt;
& lt; ul class = "flex" & gt;
& lt; li & gt; & lt; etiqueta para = "Nombre" & gt; Nombre y LET & GT & GT & GT; & LT; & LT; & lt; iD = "texto" id = "First-Name" Placeholder = "Ingrese su primer nombre aquí" & gt; & lt; & lt; & lt; & lt; & lt; & lt; / li & gt;
& lt; li & gt; & lt; etiqueta para = "El apellido" & gt; apellido & lt; / llet & gt; & lt; & lt; & lt; & lt; & lt; "texto" id = "El último nombre" Placeholder = "Ingrese su apellido aquí" & gt; & lt; & lt; & lt; & lt; & lt; & lt / li & gt;
& lt; li & gt; & lt; etiqueta para = "correo electrónico" & gt; correo electrónico & lt; / lt & gt; & lt; & lt; & lt id = "correo electrónico" id = "correo electrónico" placeholder = "Ingrese su correo electrónico aquí" & gt; / li & gt; / li & gt;
& lt; li & gt; & lt; etiqueta para = "Teléfono" & gt; Teléfono & LT; / LET & GT & GT & GT; & LT; & LT ID = "TELE" ID = "TELÉFONO" PLADEHOLDER = "Introduce su teléfono aquí" & gt; / Li & GT; / Li & GT;
& lt; li & gt; & lt; etiqueta para = "Mensaje" & gt; Message & Lt; / Label & GT; & lt; & lt; textarea filows = "6" id = "Mensaje" Placeholder = "Ingrese su mensaje aquí" & gt; / TEXTAREA & GT; & LT; & LT; & LT; li & gt;
& lt; li & gt; & lt; button type = "enviar" & gt; enviar & lt; / button & gt; & lt; / li & gt; / li & gt;
& lt; / ul & gt;
& lt; / FORK & GT;

Observe que cada uno de los elementos de la lista en nuestro formulario tiene una clase de flexionar . Esta clase identifica el contenedor FLEX en nuestro formulario. Uno de los grandes beneficios de FlexBox es su capacidad para usar cualquier elemento HTML para definir sus contenedores y elementos.

Puede aplicar FlexBox Styling a cualquier elemento HTML, lo que significa que puede restaurar fácilmente y reflegar elementos independientemente entre sí. Tenga en cuenta que FlexBox es solo un mecanismo de estilo, lo que significa que puede agregarlo y eliminarlo a voluntad.

Identemos los contenedores FLEX en nuestro CSS. Además, queremos centrar verticalmente los elementos flexibles a través del eje cruzado. Es bastante fácil especificar que, solo necesitamos configurar una regla de CSS simple:

 .flex li {
PANTALLA: FLEX;
Flex-Wrap: Wrap;
Alinee-Artículos: Centro;
}

El siguiente paso es especificar los anchos para los elementos FLEX. Los principales requisitos:

Las etiquetas deben tener al menos 100px y, a su mayoría de 200px.
Formar elementos que vienen después de las etiquetas deben ser de al menos 200px

¿Qué nos da esto? Cada etiqueta y su elemento de formulario asociado se mostrarán en una sola fila horizontal cuando el ancho del formulario totaliza al menos 300 px (recuerde, estamos usando etiquetas alineadas hacia el derecho aquí).

 .flex & gt; li & gt; etiqueta {
FLEX: 1 0 100px;
Max-Ancho: 200px;
}
.flex & gt; li & gt; Etiqueta + * {
FLEX: 1 0 200px;
}

Por último, para el botón Enviar, que también es un elemento Flex, definimos algunos estilos básicos:

 .flex li botón {
Margen: Auto;
relleno: 22px 46px;
}

Como puede ver, con un marcado mínimo y la potencia de FlexBox, hemos construido un formulario sensible.

Con más usuarios que llevan dispositivos móviles, es crucial entregar una experiencia fácil de usar en cualquier dispositivo. El punto clave es adaptarse tanto a las necesidades del usuario como a las capacidades del dispositivo.

Este artículo fue publicado originalmente en el número 287 de revista neta , la revista para diseñadores y desarrolladores profesionales web, que ofrecen las últimas tendencias web, tecnologías y técnicas nuevas. Suscríbete a la red aquí.

Artículos relacionados:

Crear formas y tablas sensibles.
Comience con la accesibilidad web
7 grandes herramientas para probar tus diseños web receptivos

Cómo diseñar formas sensibles y agnósticas de dispositivo

01. Diseño para el desplazamiento vertical.

02. Coloque etiquetas por encima de los campos

03. Use objetivos de toque

04. Utilice campos de formulario HTML5

05. Usa FlexBox

Cómo - Artículos más populares

Construye un blog reactivo rápido con Svelte y Sapper

Añadir soporte de varios idiomas a angular

Start Start reacciona nativo con la expo

Crea animaciones de UI Slick

5 consejos para mejorar sus creaciones de VR

15 Puntas de retrato de fantasía

Crea efectos de pintura en Photoshop CC

Cómo crear un carácter 3D estilizado para los juegos

Categorías