Mejores entradas de formulario para mejores experiencias de usuario móvil

A continuación se muestra una forma sencilla y práctica de hacer que las aplicaciones funcionen mejor en dispositivos móviles: configure siempre los campos de entrada HTML con los atributos typey inputmodecorrectos autocomplete. Si bien estos tres atributos a menudo se analizan de forma aislada, tienen más sentido en el contexto de la experiencia del usuario móvil cuando se los considera como un equipo.

No hay duda de que los formularios en dispositivos móviles pueden llevar mucho tiempo y ser tediosos de completar, pero al configurar correctamente las entradas, podemos garantizar que el proceso de ingreso de datos sea lo más fluido posible para nuestros usuarios. Echemos un vistazo a algunos ejemplos y mejores prácticas que podemos utilizar para crear mejores experiencias de usuario en dispositivos móviles.

Usar el tipo de entrada correcto

Esto es lo más fácil de hacer bien. Los tipos de entrada, como email, tely url, son compatibles con todos los navegadores. Si bien el beneficio de usar un tipo, como telel más genérico text, puede ser difícil de ver en los navegadores de escritorio, es evidente de inmediato en los dispositivos móviles.

Elegir el tipo apropiado cambia el teclado que aparece en los dispositivos Android e iOS cuando un usuario enfoca el campo. Con muy poco esfuerzo, simplemente usando el tipo correcto, mostraremos teclados personalizados para correo electrónico, números de teléfono, URL e incluso entradas de búsqueda.

Una cosa a tener en cuenta es que ambos input type="email"vienen input type="url"con funcionalidad de validación, y los navegadores modernos mostrarán información sobre herramientas de error si sus valores no coinciden con los formatos esperados cuando el usuario envía el formulario. Si prefiere desactivar esta funcionalidad, simplemente puede agregar el novalidateatributo al archivo form.

Un desvío rápido a los tipos de citas.

Las entradas HTML comprenden mucho más que entradas de texto especializadas: también tiene botones de opción, casillas de verificación, etc. Sin embargo, para los propósitos de esta discusión, me refiero principalmente a las entradas más basadas en texto .

Hay un tipo de entrada que se encuentra en el espacio liminal entre las entradas de texto de formato más libre y los widgets de entrada como los botones de opción: date. El datetipo de entrada viene en una variedad de versiones que son bien compatibles con dispositivos móviles, incluidos date, time, datetime-localy month. Estos aparecen widgets personalizados en iOS y Android cuando están enfocados. En lugar de activar un teclado especializado, muestran una interfaz similar a una selección en iOS y varios tipos diferentes de widgets en Android (donde los selectores datey timeson particularmente ingeniosos).

Estaba emocionado de comenzar a usar valores predeterminados nativos en dispositivos móviles, hasta que miré a mi alrededor y me di cuenta de que la mayoría de las principales aplicaciones y sitios web móviles utilizan selectores de fechas personalizados en lugar de tipos de entrada de fechas nativos. Podría haber un par de razones para esto. Primero, encuentro que el selector de fecha nativo de iOS es menos intuitivo que un widget de tipo calendario. En segundo lugar, incluso la implementación de Android bellamente diseñada es bastante limitada en comparación con los componentes personalizados; no hay una manera fácil de ingresar un rango de fechas en lugar de una sola fecha, por ejemplo.

Aún así, vale la pena comprobar los tipos de entrada de fecha si el selector de fecha personalizado que estás utilizando no funciona bien en el móvil. Si desea probar los widgets de entrada nativos en iOS y Android y, al mismo tiempo, asegurarse de que los usuarios de escritorio vean un widget personalizado en lugar del menú desplegable predeterminado, este fragmento de CSS ocultará el menú desplegable del calendario para los navegadores de escritorio que lo implementen:

::-webkit-calendar-picker-indicator {  display: none;}

Una última cosa a tener en cuenta es que dateel atributo no puede anular los tipos inputmode, lo cual analizaremos a continuación.

¿Por qué debería preocuparme por el modo de entrada?

El inputmodeatributo le permite anular el teclado móvil especificado por el tipo de entrada y declarar directamente el tipo de teclado que se muestra al usuario. Cuando me enteré de este atributo por primera vez, no me impresionó: ¿por qué no utilizar el correcto typeen primer lugar? Pero aunque inputmodea menudo es innecesario, hay algunos lugares donde el atributo puede resultar extremadamente útil. El caso de uso más notable que he encontrado inputmodees crear una mejor entrada numérica.

Si bien algunos tipos de entrada HTML5, como urly email, son sencillos, input type="number"es un asunto diferente. Tiene algunos problemas de accesibilidad, así como una interfaz de usuario algo incómoda. Por ejemplo, los navegadores de escritorio, como Chrome, muestran pequeñas flechas de incremento que son fáciles de activar accidentalmente al desplazarse.

Así que aquí tienes un patrón para memorizar y utilizar en el futuro. Para la mayoría de las entradas numéricas, en lugar de usar esto:

input type="number" /

…realmente quieres usar esto:

input type="text" inputmode="decimal" /

¿Por qué no inputmode="numeric"en lugar de inputmode="decimal"?

Los valores de los atributos numericy decimalproducen teclados idénticos en Android. En iOS, sin embargo, numericmuestra un teclado que muestra números y puntuación, mientras que decimalmuestra una cuadrícula de números enfocada que casi se ve exactamente como el teltipo de entrada, solo que sin opciones extrañas enfocadas en números de teléfono. Por eso prefiero la mayoría de los tipos de entradas numéricas.

Christian Oliff ha escrito un excelente artículo dedicado exclusivamente al atributo inputmode.

No olvides autocompletar

Aún más importante que mostrar el teclado móvil correcto es mostrar sugerencias útiles de autocompletar. Esto puede contribuir en gran medida a crear una experiencia de usuario más rápida y menos frustrante en dispositivos móviles.

Si bien los navegadores tienen heurísticas para mostrar campos de autocompletar, no puedes confiar en ellos y aun así debes asegurarte de agregar el autocompleteatributo correcto. Por ejemplo, en iOS Safari, descubrí que input type="tel"solo mostraría opciones de autocompletar si agregaba explícitamente un autocomplete="tel"atributo.

Puede pensar que está familiarizado con las autocompleteopciones básicas, como aquellas que ayudan al usuario a completar los números de tarjetas de crédito o los campos del formulario de dirección, pero le recomiendo que las revise para asegurarse de conocer todas las opciones. . ¡La especificación enumera más de 50 valores! ¿Sabías que esto autocomplete="one-time-code"puede hacer que un usuario de verificación telefónica fluya de manera súper fluida?

Hablando de autocompletar...

Me gustaría mencionar un elemento final que le permite crear su propia función de autocompletar personalizada: datalist. Si bien crea una experiencia de autocompletar útil, aunque algo básica, en el escritorio Chrome y Safari, brilla en iOS al mostrar sugerencias en una fila conveniente justo encima del teclado, donde generalmente se encuentra la funcionalidad de autocompletar del sistema. Además, permite al usuario alternar entre texto y entradas de estilo seleccionado.

En Android, por otro lado, datalistcrea un menú desplegable de autocompletar más típico, con el área sobre el teclado reservada para la funcionalidad de escritura anticipada del sistema. Una posible ventaja de este estilo es que la lista desplegable se puede desplazar fácilmente, lo que crea acceso inmediato a todas las opciones posibles tan pronto como se enfoca el campo. (En iOS, para ver más de las tres coincidencias principales, el usuario tendría que activar el selector de selección presionando el ícono de flecha hacia abajo).

Puedes usar esta demostración para jugar con datalist:

Y puedes explorar todas las opciones de autocompletar, así como entradas typey inputmodevalores, usando esta herramienta que creé para ayudarte a obtener una vista previa rápida de varias configuraciones de entrada en el móvil.

En resumen

Cuando estoy creando un formulario, a menudo me siento tentado a concentrarme en perfeccionar la experiencia de escritorio mientras trato la web móvil como una ocurrencia tardía. Pero si bien se necesita un poco de trabajo adicional para garantizar que los formularios funcionen bien en dispositivos móviles, no tiene por qué ser demasiado difícil. Con suerte, este artículo ha demostrado que con unos sencillos pasos, puede hacer que los formularios sean mucho más convenientes para sus usuarios en dispositivos móviles.