UX y HTML5: Ayudemos a los usuarios a completar su formulario móvil (Parte 2)

En esta segunda parte, quiero centrarme más en las capacidades específicas de los dispositivos móviles. HTML5, por ejemplo, nos ha traído muchas funciones realmente geniales para ayudar a los usuarios a completar formularios móviles y formatear sus datos. Veremos en detalle cómo los atributos de HTML5 pueden ayudarlo con eso. Luego, iremos más allá de los elementos de formulario "clásicos" y veremos cómo usar las capacidades móviles, como la cámara, la geolocalización y los escáneres de huellas dactilares, para llevar su experiencia de formulario móvil al siguiente nivel en sitios web y aplicaciones nativas.

Ayudar al usuario a formatear el contenido con HTML5

En la primera parte de esta serie, vimos algunos consejos generales sobre cómo mostrar campos. Ahora es el momento de profundizar un poco más y ver cómo unas pocas líneas bien diseñadas de código HTML5 pueden mejorar sus formularios móviles.

Bondad optimizada para dispositivos móviles de HTML5

HTML5 abre todo un mundo de posibilidades para optimizar formularios para dispositivos móviles y táctiles. Muchos tipos de entrada nuevos e interesantes pueden activar diferentes teclados para ayudar a los usuarios. También podemos hacer algunas cosas interesantes con la captura de medios directamente en el navegador.

Introducción de datos numéricos

input type= number

El atributo HTML5 <input type=number> restringe un campo de entrada a números. Tiene un sistema de validación incorporado que rechaza cualquier cosa que no sea un número.

En algunos navegadores de escritorio, esta entrada se presenta con pequeñas flechas a la derecha en las que el usuario puede hacer clic para incrementar el número. En dispositivos móviles, abre un teclado con números , lo que reduce los errores tipográficos y de validación de formularios. La apariencia de la entrada depende del sistema operativo.

La entrada debe permitir decimales y números negativos (pero pocos teclados respetan eso). Como se explica en las especificaciones del W3C, “una forma sencilla de determinar si se debe usar type=number es considerar si tendría sentido que el control de entrada tuviera una interfaz de cuadro de número (por ejemplo, con flechas 'arriba' y 'abajo')”. Esto significa que no se supone que la entrada se use para tarjetas de crédito o códigos de área.

El pattern y inputmode atributos del modo de entrada

Para agregar algunas restricciones a sus entradas de números, puede usar el atributo de pattern para especificar una expresión regular contra la cual desea controlar los valores.

Esto es lo que parece:

 <input type="number" name="quantity" pattern="[0-9]*" inputmode="numeric" />

Puede usar este patrón para mostrar el teclado numérico de botones grandes en el iPhone (pero no en el iPad). Este teclado no tiene el signo menos ni la coma, por lo que los usuarios pierden la posibilidad de utilizar números negativos y decimales. Además, no pueden volver a cambiar a otro teclado aquí, así que tenga cuidado al usar esto.

Además, tenga en cuenta que los patrones se pueden aplicar a cualquier otro tipo de entradas.

Usar solo este patrón no funcionará en la mayoría de los teléfonos Android. Aún necesitará una combinación de input type=number y el atributo para que esto funcione.

inputmode

Si solo desea activar el teclado numérico móvil pero no quiere lidiar con el type=number y el desorden pattern , puede usar una entrada de texto y aplicar el atributo inputmode = numérico. Se vería así:

 <input type="text" name="quantity" inputmode="numeric" />

Desafortunadamente (en el momento de escribir este artículo), solo Chrome 67 móvil admite esto, pero debería llegar a Chrome 66 de escritorio sin una bandera.

Para obtener más información sobre cómo ingresar números en un formulario, lea "Quería escribir un número".

input type=tel

Si desea que los usuarios ingresen un número de teléfono, puede usar el tipo de entrada = tel. Como puede ver en la captura de pantalla a continuación, activa los mismos dígitos en el teclado de iOS que el atributo de patrón descrito anteriormente. Debido a la complejidad de los números de teléfono en todo el mundo, no existe una validación automática con este tipo de entrada.

Introducción de fechas

Aunque técnicamente sean datos numéricos, las fechas merecen su propio apartado. Hay algunos tipos de entrada HTML5 para ingresar fechas. El más utilizado es input type=date . Activará un selector de fecha en los navegadores compatibles. La apariencia del selector de fecha depende del navegador y del sistema operativo. Para obtener más información sobre cómo los navegadores procesan input type="date" , le recomiendo que lea "Complicar input type=date ".

También hay type=week para elegir una semana, type=time para ingresar una hora (hasta la hora y el minuto) y type=datetime-local para elegir una fecha y una hora (usando la hora local del usuario). ¡Tantas opciones!

input type=date funciona bien para las interfaces de reserva, por ejemplo. Sin embargo, es posible que tenga algunas necesidades que requieran que construya su propio selector de fechas (como ya vimos en la sección sobre valores predeterminados sensibles). Pero input type=date siempre es una buena opción si necesita un selector de fecha y no desea traer una biblioteca de JavaScript completa al sitio web para el trabajo.

Sin embargo, a veces es mejor no usar type=date para las fechas. Tomemos el ejemplo de una fecha de nacimiento. Si nací en 1960 (no soy, esto es solo un ejemplo), me tomaría muchos toques elegir mi fecha de nacimiento si estuviera comenzando en 2018. En Android, descubrí recientemente que si presiono el año en el selector, obtengo una especie de rueda desplegable con todos los años. Un poco mejor, pero aún requiere una buena cantidad de desplazamiento.

Un usuario me dijo en Twitter:

"Nací en 1977 y puedo confirmar la molestia. Cuanto más tiempo se tarda en desplazarse, más viejo te sientes :-("

Entonces, tal vez las fechas de nacimiento no sean las mejores candidatas para los selectores de fechas.

URL, correo electrónico, teléfono y búsqueda

Los teléfonos móviles esconden algunas otras bondades del teclado y la optimización de entrada que mejoran la experiencia del usuario al completar un formulario. El diablo está en los detalles, como dicen.

El uso del campo input type=url abrirá un teclado optimizado en el móvil, con / (la tecla de barra) directamente accesible. Según el sistema operativo, también puede otorgar acceso rápido a dominios comunes de nivel superior, como .fr en la captura de pantalla a continuación. Si mantiene presionado este botón, aparecerán accesos directos a otros dominios de nivel superior. Esto también viene con la validación automática del navegador que verifica que el formato de la URL sea válido.

El campo input type=email abre un teclado optimizado para correo electrónico que brinda acceso rápido al símbolo @ . Esta entrada requiere la presencia de @ en algún lugar del campo para que sea válida. Esa es la única verificación que hace.

El campo input type=search muestra un teclado optimizado para búsqueda. El usuario puede lanzar directamente la búsqueda desde un botón en el teclado. También hay una pequeña cruz para borrar el campo y escribir una nueva consulta.

gama y color

Los últimos dos tipos de entrada que vimos no están particularmente optimizados para dispositivos móviles, pero al usarlos, podemos evitar tener que cargar pesadas bibliotecas de JavaScript personalizadas, lo cual es una buena idea para los usuarios de dispositivos móviles.

input type=range proporciona un control deslizante de interfaz de usuario visual para ingresar un número. La interfaz de usuario de este control depende del navegador.

input type=color proporciona una manera fácil para que el usuario ingrese un valor de color. En muchas implementaciones de navegador, esto viene con un selector de color.

Captura de medios HTML: tomar y cargar imágenes y grabar sonido

Recuerdo la época del iPhone 3, cuando Apple ni siquiera permitía el uso de un simple input type=file en un sitio web, por razones de seguridad. Esos tiempos se han ido. Con la API de captura de medios HTML, ahora es posible acceder a diferentes sensores de un dispositivo. Podemos capturar fotos y videos, e incluso podemos grabar voz directamente en el navegador.

El atributo de aceptación le permite especificar qué tipo de medios aceptar en la entrada: audio, imagen, video. El usuario puede dar al navegador acceso directo a su cámara, por ejemplo.

El código se ve así:

 <input type="file" accept="image/*">

El atributo de captura le permite especificar el modo de captura preferido. Si agrega el atributo de capture encima del atributo de accept , puede hacer que el navegador abra la cámara o la grabadora de voz directamente.

 <input type="file" accept="image/*" capture> // opens the camera>

 <input type="file" accept="video/*" capture> // opens the camera in video mode

 <input type="file" accept="audio/*" capture> // opens the voice recorder 

Para obtener más detalles sobre cómo usar medios directamente en el navegador, lea la sección "Acceso y manejo de imágenes, video y audio directamente en el navegador" en mi artículo sobre los poderes secretos de los navegadores móviles.

HTML5 Autos: Autocorrección, Autocompletar, Autocompletar, Autocapitalización y Autoenfoque

HTML5 viene con una gran cantidad de atributos automáticos. Para mejorar la experiencia móvil, querrá saber qué se puede automatizar y qué no. Aquí hay algunas reglas generales:

• Deshabilite la autocorrección en cosas para las que el diccionario es débil : direcciones de correo electrónico, números, nombres, direcciones, ciudades, regiones, códigos de área, números de tarjetas de crédito.
• Deshabilite las mayúsculas automáticas para los campos de correo electrónico y otros campos cuando corresponda (por ejemplo, URL de sitios web). Tenga en cuenta que type=email hace el trabajo por usted en la versión reciente de iOS y Android, pero desactívelo de todos modos para versiones anteriores o si type=email no es compatible.
• Puede configurar el atributo de mayúsculas automáticas para que las words escriban automáticamente en mayúsculas la primera letra de cada palabra que escriba el usuario. Esto puede ser útil para nombres, lugares y similares, pero, de nuevo, tenga cuidado y pruébelo.

• Para input type=tel , configure autocomplete="tel" .
• Puede usar el autofocus para enfocar un elemento de control cuando el usuario carga la página. Pero el hecho de que el usuario abra la página de "contacto" no significa que esté listo para saltar directamente al primer campo de su formulario. Así que, de nuevo, úsalo sabiamente.

Si desea más opciones de autocompletar, hay una lista completa en WhatWG Wiki. Solo asegúrate de usar los correctos. Implementar, probar y volver a probar.

Validación de formulario HTML5

No entraré en los detalles técnicos aquí, pero debe saber que HTML5 tiene una API de validación de formularios integrada para muchos campos. Es bueno si no desea utilizar una biblioteca de JavaScript para mostrar mensajes de validación en línea. Estas son las cosas principales que necesita saber como diseñador de UX sobre la validación de formularios HTML5:

• El mensaje de validación es un control del navegador. No puede diseñarlo en CSS, y es diferente para cada navegador.
• Puede cambiar el texto del mensaje en JavaScript utilizando setCustomValidity .
• CSS3 proporciona :invalid, :valid y :required y otras pseudoclases para la validación de formularios HTML. Estos se activan en el desenfoque, por lo que son bastante inútiles por ahora.

En "Validación de formularios nativos, parte 1", Peter-Paul Koch detalla por qué la validación de formularios HTML y CSS no mejora realmente los formularios en este momento.

Soporte fuera de línea para guardar datos de usuario

Muchas cosas pueden salir mal, especialmente en dispositivos móviles. Los errores suceden. Un usuario podría tocar por error el botón Atrás en el navegador y perder todos sus datos.

Si el usuario vuelve a la página, sería bueno mostrar sus datos nuevamente . Lo mismo ocurre si el navegador falla o el usuario cierra la pestaña. Puede almacenar los datos del usuario en el almacenamiento local o de sesión para asegurarse de que no se pierda nada si algo sale mal. Geoffrey Crofte ha escrito una biblioteca JavaScript para ayudarte con eso.

Si se pierde la conexión mientras el usuario envía el formulario, también podría perder los datos. Para evitar esto, puede usar una combinación de la ** API fuera de línea de HTML5** y la API de Service Workers para:

• almacenar los datos en el caché,
• intente enviarlo automáticamente de nuevo cuando se restablezca la conexión.

Para aprender a codificar esto, consulte el artículo sobre "Formularios compatibles sin conexión".

Las capacidades de los dispositivos móviles pueden llevar la experiencia al siguiente nivel

En la parte 1, nos ceñimos a los elementos y atributos de formulario HTML comunes básicos para mejorar los formularios móviles. Pero las capacidades de los dispositivos móviles ahora van mucho más allá de mostrar páginas web HTML, CSS y JavaScript. Esos pequeños dispositivos vienen equipados con muchos sensores . Y podremos usar muchos de ellos en aplicaciones nativas y en la web para hacer la vida de nuestros usuarios mucho más fácil.

Detección de la ubicación del usuario

En la sección anterior, escribí sobre el llenado previo de información para lugares y direcciones. Ese es un buen comienzo. Podemos ir un paso más allá. En lugar de pedir a los usuarios que escriban una ubicación, podemos detectarla . Conoce la API de geolocalización para la web. También hay API de geolocalización nativas para iOS, Android y Windows Phone.

Citymapper es un sitio web y una aplicación que ayuda a los usuarios a planificar sus viajes. Cuando el usuario ingresa al primer campo, ve la opción "Usar ubicación actual". Si lo seleccionan, se les pide que permitan que el navegador acceda a sus datos de geolocalización. Esta es la API de geolocalización. Luego, el navegador completa automáticamente la ubicación que encontró y el usuario puede continuar con el campo de destino. La aplicación nativa funciona más o menos de la misma manera.

Sea inteligente al solicitar el permiso del usuario

Es posible que haya notado en el video anterior que tuve que aceptar dar acceso a mi posición al sitio web de Citymapper. En el navegador, el usuario maneja los permisos sitio por sitio, API por API.

También debe tener cuidado con la forma en que pide permiso . El usuario puede rechazar el acceso a la geolocalización, notificación u otra API si lo solicita demasiado pronto. También pueden negarse si no entienden por qué necesita el permiso. Tienes una oportunidad; úsalo sabiamente . Después de eso, será casi imposible recuperarse. Soy un usuario avanzado de Android, e incluso tengo que buscar las opciones en mi navegador cuando quiero restablecer los permisos que le he dado a un sitio web. Imagina los problemas que tendrán tus usuarios.

Aquí hay algunos consejos generales sobre cómo solicitar permisos en la web:

• No seas el espeluznante geolocalizador o acosador de notificaciones: no pidas permiso tan pronto como el usuario llegue a tu sitio web . Es posible que aún no sepan sobre usted o su servicio.
• Deje que el usuario descubra su sitio web y servicio. Luego, pide permiso en contexto . Si quieres acceder a su ubicación, pregúntaselo solo cuando lo necesites (Citymapper es un buen ejemplo).
• Explique por qué necesita el permiso y qué hará con él .

Si quieres ir más allá, Luke Wroblewski (sí, él de nuevo) ha creado un buen video para ayudarte con el proceso de solicitud de permiso.

Una mejor experiencia de pago

Una gran área de mejora para los formularios es toda la experiencia de pago de pago. Una vez más, los sensores en el dispositivo pueden hacer que esta sea una experiencia casi indolora. El único dolor será la cantidad de dinero que gaste el usuario.

Escáner de tarjetas de crédito iOS

En la sección anterior, escribí sobre la detección automática de tarjetas de crédito y las funciones de autocompletado basadas en la entrada anterior del usuario. Esto todavía significa que el usuario tiene que escribir los datos de su tarjeta de crédito al menos una vez.

Apple ha llevado esto al siguiente nivel con su escáner de tarjetas de crédito . Desde iOS 8 en Safari, los usuarios pueden usar su cámara para escanear y completar automáticamente la información de su tarjeta de crédito. Para realizar esta magia, deberá agregar el atributo cc-number autocompletar y algún nombre para identificarlo como un campo de tarjeta de crédito. Apple no tiene mucha información oficial al respecto, pero algunas personas hicieron algunas pruebas y pusieron los resultados en StackOverflow.

Safari también tiene opciones de autocompletar que los usuarios pueden usar para agregar su tarjeta de crédito, lo que les permite reutilizarla en múltiples sitios web.

Lleve el proceso de pago un paso más allá con la API de Google Pay

Google lanzó algo similar: la API de Google Pay. Cuando se implementa en un sitio web, la API elimina la necesidad de ingresar manualmente la información de pago . Va un paso más allá: también puede almacenar direcciones de facturación y envío.

El usuario obtiene un cuadro de diálogo en Chrome que muestra la diversa información de pago que ha almacenado. Pueden elegir cuál usar y pueden pagar directamente a través del diálogo .

Una versión estandarizada de la API de solicitud de pago es actualmente una recomendación candidata del W3C. Si esto se implementa en los navegadores, permitiría a los usuarios pagar con un solo botón, lo que solicitaría la API. Cada paso a partir de entonces sería manejado por diálogos nativos del navegador.

Haciendo la autenticación más fácil

Los teléfonos móviles son, en la mayoría de los casos, dispositivos personales que las personas no suelen compartir con los demás. Esto abre algunas oportunidades interesantes para la autenticación.

Enlace mágico

Yo uso un administrador de contraseñas. No sé el 99% de mis contraseñas. Todos son generados aleatoriamente. Para iniciar sesión en un nuevo espacio de trabajo de Slack, debo:

1. abrir mi administrador de contraseñas,
2. ingrese mi contraseña maestra,
3. buscar el espacio de trabajo,
4. copie y pegue la contraseña en la aplicación Slack.

Es un proceso tedioso, pero Slack fue lo suficientemente inteligente como para ofrecer una mejor opción.

Muchos usuarios tienen su correo sincronizado en su teléfono. Slack lo entendió. Cuando agrega un nuevo espacio de trabajo de Slack en la aplicación, puede iniciar sesión con la contraseña o solicitar la opción "enlace mágico". Si optas por lo segundo, Slack envía un enlace mágico a tu buzón . Abre el correo, haz clic en el botón verde grande y ¡ta-da! — estás conectado.

Detrás de escena, este enlace mágico contiene un token de autenticación. La aplicación Slack detecta esto y lo autentica sin solicitar la contraseña.

Huella digital para identificación inteligente

Hago casi todas mis operaciones bancarias en mi dispositivo móvil. Y cuando se trata de iniciar sesión en mis cuentas bancarias, hay una gran diferencia entre mi aplicación bancaria francesa Societe General y la aplicación alemana N26.

Con Societe Generale, tengo una cadena de inicio de sesión y una frase de contraseña. Puedo pedirle a la aplicación que recuerde la cadena de inicio de sesión, que tiene 10 dígitos aleatorios. No soy capaz de recordar ese; Yo uso un administrador de contraseñas para ello. Todavía debo recordar e ingresar la frase de contraseña de seis dígitos en un teclado personalizado. Por supuesto, las posiciones de los números cambian cada vez que inicio sesión. Seguridad: sí, lo sé. Además, debo cambiar esta contraseña cada tres meses. La última vez que me vi obligado a cambiar la frase de contraseña, hice lo que hace la mayoría de la gente: elegir casi la misma frase de contraseña, porque no quiero tener que recordar otro número de seis dígitos. Y, por supuesto, estaba muy seguro de que lo recordaría, así que no lo ingresé en mi administrador de contraseñas. Error de principiante. Dos semanas después, traté de iniciar sesión. Por supuesto, lo olvidé. Hice tres intentos fallidos y luego mi cuenta fue bloqueada. Afortunadamente, solo uso esta cuenta para ahorros. En la aplicación, puede solicitar un nuevo código de acceso. El banco tardó casi una semana en enviarme una nueva contraseña de seis dígitos por correo postal a mi domicilio en Luxemburgo. Si.

N26, por otro lado, usa mi dirección de correo electrónico como cadena de inicio de sesión. Puedo recordar eso sin un administrador de contraseñas. Cuando quiero iniciar sesión, pongo el dedo en el botón de inicio de mi teléfono Xperia y listo. En segundo plano, mi teléfono escanea mi huella dactilar y me autentica. Si eso no funciona, puedo recurrir a una contraseña.

Mismo dispositivo, dos aplicaciones, dos experiencias totalmente diferentes.

Cada vez más aplicaciones, tanto en Android como en iOS, ahora ofrecen al usuario la posibilidad de autenticarse con una huella digital . No más contraseñas: es una solución interesante y elegante.

Por supuesto, la gente ha expresado algunas preocupaciones de seguridad sobre esto. Para el Instituto Nacional de Estándares y Tecnología (NIST), la biometría no se considera lo suficientemente segura. Aconseja combinar la biometría con un segundo factor de autenticación.

Los sensores de huellas dactilares también se pueden engañar, sí, como en las películas de espías. ¿Te enteraste del avión que se vio obligado a aterrizar porque una mujer se enteró de la infidelidad de su esposo después de usar su pulgar para desbloquear su teléfono mientras dormía?

Reconocimiento facial e identificación facial

En 2018, Apple lanzó el iPhone X con el nuevo Face ID. Los usuarios pueden desbloquear su iPhone X usando su rostro . Por supuesto, algunos otros teléfonos con Android y tabletas y computadoras con Windows habían propuesto esta función anteriormente. Pero cuando Apple lanza algo, tiende a convertirse en “una cosa”. Por el momento, esta tecnología se usa principalmente como autenticación para desbloquear teléfonos y computadoras.

Hay algunos desafíos bastante grandes con la tecnología de reconocimiento facial. Primero, algunos algoritmos pueden ser engañados por una imagen de la persona, que es fácilmente pirateable. Otra preocupación mayor es la diversidad. Los algoritmos de reconocimiento facial tienden a tener dificultades para reconocer a las personas de color. Por ejemplo, una investigadora negra tuvo que usar una máscara blanca para probar su propio proyecto. La investigadora es Joy Buolamwini y dio una charla TED sobre el tema.

Algunos servicios de aduanas también utilizan algún software de reconocimiento facial para acelerar el procesamiento fronterizo. Se usa en Nueva Zelanda y se usará en Canadá.

La mayoría de nosotros hemos visto suficiente ciencia ficción para ver los posibles problemas y consecuencias de los sistemas que utilizan el reconocimiento facial a gran escala. Este tipo de tecnología utilizada fuera del espacio privado de desbloqueo de teléfonos puede ser controvertida y aterradora.

Google: registro con un solo toque

Si un usuario tiene una cuenta de Google, puede beneficiarse del registro con un solo toque de Google. Al visitar un sitio web y se le solicita que cree una cuenta en un cuadro de diálogo en línea, el usuario no necesita ingresar una contraseña. Google proporciona una cuenta segura sin contraseña basada en un token, vinculada a la cuenta de Google del usuario. Cuando el usuario regresa, inicia sesión automáticamente. Si almacena sus contraseñas en Smart Lock, también inicia sesión automáticamente en otros dispositivos.

Nota : Esta es una solución interesante sin contraseña. Eso sí, al utilizarlo, los usuarios se vinculan a Google, con lo que no todo el mundo se sentirá cómodo .

Conclusión

Puede hacer muchas cosas realmente geniales cuando comienza a usar las capacidades móviles para ayudar a los usuarios a completar formularios. Necesitamos una mentalidad centrada en los dispositivos móviles al crear formularios ; de lo contrario, nos quedaremos atascados en las capacidades de escritorio con las que estamos familiarizados.

Nuevamente, tenga cuidado con las capacidades del dispositivo: siempre tenga una solución alternativa en caso de que un sensor falle o el usuario rechace el acceso. Evite hacer que esas capacidades sean las únicas opciones para esas funciones (a menos que esté creando una aplicación de mapas que se base en la geolocalización).

Este es el final de una serie de dos artículos realmente largos en los que les he dado algunos consejos y mejores prácticas generales de UX y usabilidad. Al final, lo que importa son tu formulario y tus usuarios . Es posible que algunas cosas descritas aquí ni siquiera funcionen específicamente para sus usuarios, ¿quién sabe? Entonces, hagas lo que hagas, no confíes en mi palabra (o la de Luke). Pruébelo, con usuarios reales, en dispositivos reales. Mídelo. Y vuelve a probar. Realice algunas investigaciones de usuarios y pruebas de usabilidad . La experiencia del usuario no se trata solo de mejores prácticas y recetas mágicas que copia y pega. Necesitas adaptar la receta para que funcione para ti.

Así que, en resumen: Pruébelo. Pruébalo en dispositivos reales. Pruébalo con usuarios reales.