Formularios moviles

Lo primero que hacen los usuarios cuando ven un formulario es estimar cuánto tiempo se necesita para completarlo. Los usuarios hacen esto escaneando el formulario. La percepción juega un papel crucial en el proceso de estimación. Cuanto más complejo parezca un formulario, es más probable que los usuarios lo abandonen. lo más importante que puede hacer un diseñador es minimizar la necesidad de escribir.

MINIMIZAR EL NÚMERO TOTAL DE CAMPOS

Cada campo que pida a los usuarios que completen requiere un esfuerzo. Cuanto más esfuerzo se necesite para completar un formulario, menos probable será que los usuarios completen el formulario. Es por eso que la regla fundamental de diseño de formularios es más cuanto más breve, mejor.

Si después de revisar el formulario desea incluir algunas preguntas opcionales en su formulario, deje en claro a los usuarios que esos campos son opcionales:

• Marque los campos opcionales en lugar de los obligatorios.

• Use la etiqueta "Opcional" para denotar campos opcionales.

• Evite usar el asterisco ( *) para significar "opcional". No todos los usuarios asociarán el asterisco con información opcional, y el significado confundirá a algunos usuarios.

Tamaño

La cantidad de información esperada en el campo. El tamaño del campo actuará como una restricción visual: el usuario sabrá la cantidad de texto que se espera que se ingrese con solo mirar el campo.

Foco

El enfoque automático de un campo le da al usuario una indicación y un punto de inicio, para que pueda comenzar a completar rápidamente el formulario.

NO LES PIDA A LOS USUARIOS QUE REPITAN SU DIRECCIÓN DE CORREO ELECTRÓNICO
Seguir este enfoque no garantiza que obtendrá una dirección válida. Los usuarios a menudo copian y pegan su dirección de un campo a otro.

PROPORCIONAR LA OPCIÓN "MOSTRAR CONTRASEÑA"

Duplicar el campo de entrada de contraseña es otro error común entre los diseñadores de productos. Los diseñadores siguen este enfoque porque creen que evitará que los usuarios escriban incorrectamente una contraseña.
En lugar de duplicar el campo de contraseña, proporcione una opción que permita a los usuarios ver la contraseña que han elegido para crear. Tenga un icono o una casilla de verificación que desenmascara la contraseña al hacer clic.

NO PONGAS MUCHOS CAMPOS

Los campos excesivos obligan al usuario a hacer toques adicionales para moverse al siguiente campo.

EVITAR LOS MENÚS DESPLEGABLES

Si está utilizando un menú desplegable para la selección de opciones, considere reemplazarlo con los botones de radio. Harán que todas las opciones sean fáciles de usar.

La entrada enmascarada también facilita que los usuarios validen la información. Cuando se muestra un número de teléfono en partes, hace que sea más fácil encontrar y corregir un error tipográfico.

PROPORCIONAR TECLADO ACORDE

Los usuarios móviles aprecian que las aplicaciones y los sitios web que proporcionan un teclado acorde con el campo.

Configure los tipos de entrada HTML para mostrar el teclado correcto. Siete tipos de entrada son relevantes para el diseño de formularios:

input type="text" muestra el teclado normal del dispositivo móvil.
input type="email" muestra el teclado normal y '@' y '.com'.
input type="tel" muestra el teclado numérico del 0 al 9.
input type="number" Muestra un teclado con números y símbolos.
input type="date" muestra el selector de fecha del dispositivo móvil.
input type="datetime" muestra el selector de fecha y hora del dispositivo móvil.
input type="month" muestra el selector de mes y año del dispositivo móvil.

RANGOS

Muchas formas piden a los usuarios que proporcionen un rango de valores (por ejemplo, un rango de precios, rango de distancia, etc.). En lugar de usar dos campos separados, "desde" y "hasta", para ese propósito, use un control deslizante para permitir a los usuarios especificar el rango con una interacción de pulgar.

Autocompletar

La mayoría de los usuarios experimentan autocompletar cuando escriben una pregunta en el cuadro de búsqueda de Google. Google proporciona a los usuarios una lista de sugerencias relacionadas con lo que el usuario ha escrito en el campo.

Auto capitalizar

La auto capitalización convierte la primera letra en mayúscula automáticamente. Esta función es excelente para campos como nombres y direcciones de calles, pero evítala para los campos de contraseña.
Auto-llenado de datos personales.

Escribir una dirección es a menudo la parte más engorrosa de cualquier formulario de registro en línea. Facilite esta tarea utilizando la función del navegador para completar el campo.

Autorización biométrica

El mayor problema de usar una contraseña de texto hoy es que la mayoría de las personas olvidan las contraseñas. El 82% de las personas no pueden recordar sus contraseñas , y entre el 5 y el 10% de las sesiones requieren que los usuarios restablezcan una contraseña. El futuro de las contraseñas es el fin de las contraseñas. Incluso hoy en día, los desarrolladores móviles pueden aprovechar las tecnologías biométricas. Los usuarios no deberían necesitar escribir una contraseña; deben poder usar lectores biométricos para la autenticación: iniciar sesión con una huella digital o escaneo facial.

Cámara

Si su formulario solicita a los usuarios que proporcionen detalles de la tarjeta de crédito o del DNI, es posible simplificar el proceso de entrada de datos utilizando la cámara como un scáner. Proporcione una opción para tomar una foto de la tarjeta y completar todos los detalles automáticamente.

Etiquetas de ayuda

Las etiquetas en línea se ven bien y ahorran un valioso estado de la pantalla, estos beneficios son superados por los inconvenientes significativos de la usabilidad, el más crítico de los cuales es la pérdida de contexto. Cuando los usuarios comienzan a ingresar texto en un campo, el texto del marcador de posición desaparece y obliga a las personas a recordar esta información. Si bien podría no ser un problema para formularios simples de dos campos, podría ser un gran problema para los formularios que tienen muchos campos (por ejemplo, de 7 a 10). Sería difícil para los usuarios recuperar todas las etiquetas de campo después de ingresar datos. una solución simple al problema de los marcadores de posición que desaparecen: la etiqueta flotante (o adaptable). Después de que el usuario toca el campo con el marcador de posición de la etiqueta, la etiqueta no desaparece, se mueve hacia la parte superior del campo y deja espacio para que el usuario ingrese sus datos.

Articulo traduccido de https://www.smashingmagazine.com/2018/08/best-practices-for-mobile-form-design/