Mejores prácticas para el diseño de formularios móviles

(Este artículo está patrocinado amablemente por Adobe). Los formularios son el eje de todas las interacciones móviles; se interpone entre la persona y lo que está buscando. Todos los días, usamos formularios para actividades esenciales en línea. Recuerde la última vez que compró un boleto, reservó una habitación de hotel o realizó una compra en línea; lo más probable es que esas interacciones incluyeran un paso para completar un formulario.

Las formas son sólo un medio para un fin. Los usuarios deben poder completarlos rápidamente y sin confusión. En este artículo, aprenderá técnicas prácticas que lo ayudarán a diseñar un formulario efectivo.

Lo que hace una forma efectiva

El objetivo principal de cada formulario es completarlo. Dos factores tienen un impacto importante en la tasa de finalización:

• Percepción de la complejidad
  Lo primero que hacen los usuarios cuando ven un nuevo formulario es estimar cuánto tiempo se requiere 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 parece un formulario, más probable es que los usuarios abandonen el proceso.
• Costo de interacción
  El costo de interacción es la suma de los esfuerzos, tanto cognitivos como físicos, que los usuarios ponen en interactuar con una interfaz para alcanzar su objetivo. El costo de interacción tiene una conexión directa con la usabilidad del formulario. Cuanto más esfuerzo tienen que hacer los usuarios para completar un formulario, menos útil es el formulario. Un alto costo de interacción podría ser el resultado de datos que son difíciles de ingresar, la incapacidad de comprender el significado de algunas preguntas o la confusión acerca de los mensajes de error.

Los componentes de las formas

Un formulario típico tiene los siguientes cinco componentes:

• Campos de entrada
  Estos incluyen campos de texto, campos de contraseña, casillas de verificación, botones de radio, controles deslizantes y cualquier otro campo diseñado para la entrada del usuario.
• Etiquetas de campo
  Estos le dicen a los usuarios qué significan los campos de entrada correspondientes.
• Estructura
  Esto incluye el orden de los campos, la apariencia del formulario en la página y las conexiones lógicas entre diferentes campos.
• Botones de acción
  El formulario tendrá al menos una llamada a la acción (el botón que activa el envío de datos).
• Realimentación
  La retroalimentación notifica al usuario sobre el resultado de una operación. Los comentarios pueden ser positivos (por ejemplo, que indican que el formulario se envió correctamente) o negativos (que dicen algo como "El número que proporcionó es incorrecto").

Este artículo cubre muchos aspectos relacionados con la estructura, los campos de entrada, las etiquetas, los botones de acción y la validación. La mayoría de los puntos mencionados en este artículo tienen ejemplos visuales de hacer y no hacer; todos estos ejemplos se crearon con Adobe XD.

Campos de entrada

Cuando se trata de diseño de formularios, lo más importante que puede hacer un diseñador es minimizar la necesidad de escribir. Reducir el esfuerzo de entrada es esencial. Los diseñadores pueden lograr este objetivo centrándose en el diseño de campos de formulario.

Minimizar el número total de campos

Cada campo que le pides a los usuarios que completen requiere un poco de esfuerzo. Cuanto más esfuerzo se necesita para completar un formulario, menos probable es que los usuarios completen el formulario. Es por eso que la regla fundamental del diseño de formularios es más corto, mejor : deshágase de todos los campos no esenciales.

El Instituto Baymard analizó los formularios de pago y descubrió que un proceso de pago demasiado largo o complicado es una de las principales razones de abandono durante el proceso de pago. El estudio encontró que el pago promedio contiene casi 15 campos de formulario. La mayoría de los servicios en línea podrían reducir la cantidad de campos que se muestran de forma predeterminada entre un 20 y un 60 %.

Muchos diseñadores están familiarizados con la regla de "menos es más"; aún así, hacen preguntas adicionales en un intento de recopilar más datos sobre sus usuarios. Puede ser tentador recopilar más datos sobre sus usuarios durante el registro inicial, pero resista esa tentación. Piénselo de esta manera: con cada campo adicional que agrega a su formulario, aumenta la posibilidad de perder un usuario potencial. ¿Vale la pena perder nuevos usuarios por la información que obtiene de un campo? Recuerde que, siempre que haya recopilado la información de contacto de un usuario, siempre puede realizar un seguimiento con una solicitud de más datos.

Distinguir claramente todos los campos opcionales

Antes de optimizar los campos opcionales, pregúntese si realmente necesita incluirlos en su formulario. Piense en qué información realmente necesita, no en lo que quiere. Idealmente, la cantidad de campos opcionales en su formulario debería ser cero.

Si después de una sesión de lluvia de ideas, aún desea incluir algunas preguntas opcionales en su formulario, aclare a los usuarios que esos campos son opcionales:

• Marque los campos opcionales en lugar de los obligatorios.
  Si pregunta lo menos posible, la gran mayoría de los campos de su formulario serán obligatorios. Por lo tanto, marque solo aquellos campos en minoría. Por ejemplo, si cinco de los seis campos son obligatorios, tiene sentido marcar solo un campo como opcional.
• Use la etiqueta "Opcional" para indicar campos opcionales.
  Evite usar el asterisco ( * ) para indicar "opcional". No todos los usuarios asociarán el asterisco con información opcional, y algunos usuarios se confundirán con el significado (a menudo se usa un asterisco para indicar campos obligatorios).

Tamaño de campos en consecuencia

Cuando sea posible, utilice la longitud del campo como una posibilidad. La longitud de un campo de entrada debe ser proporcional a la cantidad de información esperada en el campo. El tamaño del campo actuará como una restricción visual: el usuario sabrá cuánto texto se espera que se ingrese con solo mirar el campo. Por lo general, los campos como los de códigos de área y números de casas deben ser más cortos que los de direcciones de calles.

Enfoque de campo de oferta

Enfoca automáticamente el primer campo de entrada en tu formulario. El enfoque automático de un campo le da al usuario una indicación y un punto de partida, para que pueda comenzar a completar el formulario rápidamente. Al hacer eso, reduce el costo de la interacción, ahorrando al usuario un toque innecesario.

Haga que el campo de entrada activo destaque y se centre. El enfoque de campo en sí debe ser muy claro: los usuarios deben poder comprender de un vistazo dónde está el enfoque. Podría ser un color de borde acentuado o un desvanecimiento del cuadro.

No pida a los usuarios que repitan su dirección de correo electrónico

La razón por la que un campo adicional para la dirección de correo electrónico es tan popular entre los desarrolladores de productos es evidente: todas las empresas quieren minimizar el riesgo de rebotes duros (no entregables causados ​​por direcciones de correo electrónico no válidas). Desafortunadamente, seguir este enfoque no garantiza que obtendrá una dirección válida. Los usuarios suelen copiar y pegar su dirección de un campo a otro.

Proporcione la opción "Mostrar contraseña"

Duplicar el campo de entrada de la 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 una contraseña incorrecta. En realidad, un segundo campo para una contraseña no solo aumenta el costo de la interacción, sino que tampoco garantiza que los usuarios procederán sin cometer errores. Debido a que los usuarios no ven lo que ingresaron en el campo, pueden cometer el mismo error dos veces (en ambos campos) y enfrentarán un problema cuando intenten iniciar sesión con una contraseña. Como resumió Jakob Nielsen:

La usabilidad sufre cuando los usuarios escriben contraseñas y la única respuesta que reciben es una fila de viñetas. Por lo general, enmascarar las contraseñas ni siquiera aumenta la seguridad, pero le cuesta a su negocio debido a las fallas de inicio de sesión.

En lugar de duplicar el campo de la contraseña, proporcione una opción que permita a los usuarios ver la contraseña que eligieron crear. Tener un ícono o casilla de verificación que desenmascara la contraseña cuando se hace clic. Una vista previa de la contraseña puede ser una oportunidad para que los usuarios verifiquen sus datos antes de enviarlos.

No dividir campos de datos

No divida los campos cuando solicite un nombre completo, número de teléfono o fecha de nacimiento. Los campos divididos obligan al usuario a hacer toques adicionales para pasar al siguiente campo. Para los campos que requieren algún formato (como números de teléfono o una fecha de nacimiento), también es mejor tener un solo campo emparejado con reglas de formato claras como marcador de posición.

Evite los menús desplegables

Luke Wroblewski dijo que los menús desplegables deberían ser la interfaz de usuario de último recurso. Los menús desplegables son especialmente malos para dispositivos móviles porque los elementos colapsados ​​dificultan el proceso de ingreso de datos en una pantalla pequeña: colocar opciones en un menú desplegable requiere dos toques y oculta las opciones.

Si está utilizando un menú desplegable para la selección de opciones, considere reemplazarlo con botones de opción. Harán que todas las opciones sean visibles y también reducirán el costo de interacción: los usuarios pueden tocar el elemento y seleccionarlo de inmediato.

Use marcadores de posición y entrada enmascarada

La incertidumbre del formato es uno de los problemas más importantes del diseño de formularios. Este problema tiene una conexión directa con el abandono del formulario: cuando los usuarios no están seguros del formato en el que deben proporcionar los datos, pueden abandonar el formulario rápidamente. Hay algunas cosas que puede hacer para aclarar el formato.

Texto del marcador

El texto en un campo de entrada puede indicar a los usuarios qué contenido se espera. El texto de marcador de posición no es obligatorio para campos simples como "Nombre completo", pero puede ser extremadamente valioso para campos que requieren datos en un formato específico. Por ejemplo, si diseña la funcionalidad de búsqueda para rastrear un paquete, sería bueno proporcionar un número de rastreo de muestra como marcador de posición para el campo de número de rastreo.

Es vital que su formulario tenga una distinción visual clara entre el texto del marcador de posición y el valor real ingresado por el usuario. En otras palabras, el texto del marcador de posición no debería verse como un valor preestablecido. Sin una distinción visual clara, los usuarios podrían pensar que los campos con marcadores de posición ya tienen valores.

Entrada enmascarada

El enmascaramiento de campo es una técnica que ayuda a los usuarios a formatear el texto ingresado. Muchos diseñadores confunden el enmascaramiento de campos con el texto de marcador de posición: no son lo mismo. A diferencia de los marcadores de posición, que son básicamente texto estático, las máscaras dan formato automáticamente a los datos proporcionados por el usuario. En el siguiente ejemplo, los paréntesis, los espacios y los guiones aparecen en la pantalla automáticamente cuando se ingresa un número de teléfono.

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

Proporcionar teclado a juego

Los usuarios móviles aprecian las aplicaciones y los sitios web que proporcionan un teclado adecuado para el campo. Esta función les impide realizar acciones adicionales. Por ejemplo, cuando los usuarios necesitan ingresar un número de tarjeta de crédito, su aplicación solo debe mostrar el teclado. Es esencial implementar la coincidencia de teclado de manera consistente en toda la aplicación (todos los formularios en su aplicación deben tener esta función).

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.

Use un control deslizante cuando solicite un rango específico

Muchos formularios solicitan 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 con el pulgar.

Explique claramente por qué está solicitando información confidencial

Las personas están cada vez más preocupadas por la privacidad y la seguridad de la información. Cuando los usuarios ven una solicitud de información que consideran privada, pueden pensar: "Hm, ¿por qué necesitan esto?" Si su formulario solicita a los usuarios información confidencial, asegúrese de explicar por qué la necesita. Puede hacerlo agregando texto de apoyo debajo de los campos relevantes. Como regla general, el texto de la explicación no debe exceder los 100 caracteres.

Tenga cuidado con los valores predeterminados estáticos

A diferencia de los valores predeterminados inteligentes, que el sistema calcula en función de la información que el sistema tiene sobre los usuarios, los valores predeterminados estáticos son valores preestablecidos en formularios que son iguales para todos los usuarios. Evite los valores predeterminados estáticos a menos que crea que una parte significativa de sus usuarios (por ejemplo, el 95 %) seleccionaría esos valores, especialmente para los campos obligatorios. ¿Por qué? Porque es probable que introduzca errores: las personas escanean los formularios rápidamente y no dedicarán más tiempo a analizar todas las preguntas; en su lugar, simplemente omitirán el campo, asumiendo que ya tiene un valor.

Proteger los datos del usuario

Jef Raskin dijo una vez: "El sistema debe tratar todas las entradas de los usuarios como sagradas". Esto es absolutamente cierto para los formularios. Es genial cuando comienzas a completar un formulario web y luego actualizas accidentalmente la página, pero los datos permanecen en los campos. Las herramientas como Garlic.js lo ayudan a conservar los valores de un formulario localmente hasta que se envía el formulario. De esta manera, los usuarios no perderán ningún dato valioso si cierran accidentalmente la pestaña o el navegador.

Automatizar acciones

Si desea que el proceso de ingreso de datos sea lo más sencillo posible, no basta con minimizar la cantidad de campos de entrada; también debe prestar atención al esfuerzo del usuario requerido para el ingreso de datos. Escribir tiene un alto costo de interacción: es propenso a errores y requiere mucho tiempo, incluso con un teclado físico. Pero cuando se trata de pantallas móviles, se vuelve aún más crítico. Más tipeo aumenta la posibilidad de que el usuario cometa errores. Esfuércese por evitar la escritura innecesaria, ya que mejorará la satisfacción del usuario y disminuirá las tasas de error.

Aquí hay algunas cosas que puede hacer para lograr este objetivo:

Autocompletar

La mayoría de los usuarios experimentan el autocompletado 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. El mismo mecanismo se puede aplicar al diseño de formularios. Por ejemplo, un formulario podría autocompletar una dirección de correo electrónico.

Autocapitalizar

Automayúsculas convierte la primera letra en mayúscula automáticamente. Esta función es excelente para campos como nombres y direcciones de calles, pero evítela para campos de contraseña.

Autocorrección

La autocorrección modifica las palabras que parecen estar mal escritas. Desactive esta función para campos únicos, como nombres, direcciones, etc.

Autocompletar datos personales

Escribir una dirección suele ser 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 en función de los valores ingresados ​​previamente. Según la investigación de Google, el autocompletado ayuda a las personas a completar formularios un 30 % más rápido.

Use las funciones nativas del dispositivo móvil para simplificar la entrada de datos

Los dispositivos móviles modernos son dispositivos sofisticados que tienen un montón de capacidades asombrosas. Los diseñadores pueden usar las funciones nativas de un dispositivo (como la cámara o la geolocalización) para agilizar la tarea de ingresar datos.

A continuación, se incluyen algunos consejos sobre cómo utilizar los sensores y el hardware del dispositivo.

Servicios de localización

Es posible preseleccionar el país del usuario en función de sus datos de geolocalización. Pero a veces, completar previamente una dirección completa puede ser problemático debido a problemas de precisión. La API de lugares de Google puede ayudar a resolver este problema. Utiliza la geolocalización y el llenado automático de direcciones para proporcionar sugerencias precisas basadas en la ubicación exacta del usuario.

Con los servicios de ubicación, también es posible proporcionar valores predeterminados inteligentes. Por ejemplo, para un formulario "Buscar un vuelo", es posible completar previamente el campo "Desde" con el aeropuerto más cercano al usuario en función de la ubicación geográfica del usuario.

Autorización biométrica

El mayor problema de usar una contraseña de texto hoy en día 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. La recuperación de contraseña es un gran problema en el comercio electrónico. El 75 % de los usuarios no completarían una compra si tuvieran que intentar recuperar su contraseña al finalizar la compra.

El futuro de las contraseñas es sin 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; deberían poder usar lectores biométricos para la autenticación: iniciar sesión con una huella digital o un escaneo facial.

Cámara

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

Pero recuerda que no importa lo bien que tu aplicación llene los campos, es esencial dejarlos disponibles para editarlos. Los usuarios deberían poder modificar los campos cuando lo deseen.

Voz

Los dispositivos controlados por voz, como Apple HomePod, Google Home y Amazon Echo, están invadiendo activamente el mercado. La cantidad de personas que prefieren usar la voz para operaciones comunes ha crecido significativamente. Según ComScore, el 50 % de todas las búsquedas serán búsquedas por voz para 2020.

A medida que los usuarios se sientan más cómodos y confiados al usar los comandos de voz, se convertirán en una característica esperada de las interacciones móviles. La entrada de voz brinda muchas ventajas para los usuarios móviles: es especialmente valiosa en situaciones en las que los usuarios no pueden concentrarse en una pantalla, por ejemplo, mientras conducen un automóvil.

Al diseñar un formulario, puede proporcionar entrada de voz como método alternativo de entrada de datos.

Etiquetas de campo

Escriba etiquetas claras y concisas

La etiqueta es el texto que les dice a los usuarios qué datos se esperan de ellos en un campo de entrada en particular. Escribir etiquetas claras es una de las mejores maneras de hacer que un formulario sea más accesible. Las etiquetas deben ayudar al usuario a comprender qué información se requiere de un vistazo.

Evite usar oraciones completas para explicar. Una etiqueta no es un texto de ayuda. Escriba etiquetas breves y nítidas (una o dos palabras) para que los usuarios puedan escanear rápidamente su formulario.

Coloque la etiqueta y la entrada juntas

Coloque cada etiqueta cerca del campo de entrada, porque el ojo sabrá visualmente que están unidas.

No utilice texto de marcador de posición que desaparece como etiquetas

Si bien las etiquetas en línea se ven bien y ahorran un valioso espacio en la pantalla, estos beneficios se ven superados por los importantes inconvenientes de 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 puede que no sea un problema para los 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 recordar todas las etiquetas de los campos después de ingresar los datos. No es sorprendente que las pruebas de los usuarios muestren continuamente que los marcadores de posición en los campos de formulario a menudo dañan la usabilidad más que ayudar.

Hay 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.

Etiquetas de alineación superior

Poner etiquetas de campo encima de los campos en un formulario mejora la forma en que los usuarios escanean el formulario. Usando la tecnología de seguimiento ocular para esto, Google demostró que los usuarios necesitan menos fijaciones, menos tiempo de fijación y menos movimientos sacádicos antes de enviar un formulario.

Otra ventaja importante de las etiquetas alineadas en la parte superior es que brindan más espacio para las etiquetas. Las etiquetas largas y las versiones localizadas encajarán más fácilmente en el diseño. Este último está especialmente indicado para pantallas de móviles pequeñas. Puede hacer que los campos de formulario se extiendan por todo el ancho de la pantalla, haciéndolos lo suficientemente grandes como para mostrar toda la entrada del usuario.

Sentencia Caso vs. Titulo del caso

Hay dos formas generales de usar mayúsculas en las palabras:

• Caso del título: Poner en mayúscula cada palabra. “Este es el caso del título”.
• Caso de oración: Escriba en mayúscula la primera palabra. "Este es un caso de sentencia".

El uso de mayúsculas y minúsculas para las etiquetas tiene una ventaja sobre las mayúsculas y minúsculas del título: es un poco más fácil (y, por lo tanto, más rápido) de leer. Mientras que la diferencia para las etiquetas cortas es insignificante (no hay mucha diferencia entre "Nombre completo" y "Nombre completo"), para las etiquetas más largas, el uso de mayúsculas y minúsculas es mejor. Ahora sabe lo difícil que es leer texto largo en mayúsculas y minúsculas.

Evite el uso de mayúsculas para las etiquetas

El texto en mayúsculas, es decir, el texto con todas las letras en mayúsculas, está bien en contextos que no implican una lectura sustantiva (como acrónimos y logotipos), pero de lo contrario, evite las mayúsculas. Como menciona Miles Tinker en su obra Legibilidad de la letra impresa , la letra mayúscula reduce drásticamente la velocidad de escaneado y lectura en comparación con la letra minúscula.

Disposición

Ya sabe que los usuarios escanean páginas web, en lugar de leerlas. Lo mismo ocurre con el llenado de formularios. Es por eso que los diseñadores deben diseñar un formulario que sea fácil de escanear. Permitir un escaneo eficiente y efectivo es crucial para que el proceso de completar un formulario sea lo más rápido posible.

Use un diseño de una sola columna

Un estudio realizado por CXL Institute descubrió que los formularios de una sola columna son más rápidos de completar que los formularios de varias columnas. En ese estudio, los participantes de la prueba pudieron completar un formulario de una sola columna en un promedio de 15,4 segundos más rápido que un formulario de varias columnas.

Múltiples columnas interrumpen el impulso vertical de un usuario; con múltiples columnas, los ojos comienzan a zigzaguear. Esto aumenta drásticamente el número de fijaciones oculares y, como resultado, el tiempo de finalización. Además, los formularios de varias columnas pueden generar preguntas innecesarias en el usuario, como "¿Por dónde debo comenzar?" y "¿Tienen las preguntas de la columna de la derecha la misma importancia que las preguntas de la columna de la izquierda?"

En un diseño de una columna, los ojos se mueven en una dirección natural, de arriba a abajo, una línea a la vez. Esto ayuda a establecer un camino claro para el usuario. Una columna es excelente para dispositivos móviles porque las pantallas son más largas verticalmente y el desplazamiento vertical es un movimiento natural para los usuarios de dispositivos móviles.

Hay algunas excepciones a esta regla. Es posible colocar campos cortos y lógicamente relacionados en la misma fila (como la ciudad y el código de área).

Crea un flujo con tus preguntas

La forma de hacer las preguntas también importa. Las preguntas deben formularse lógicamente desde la perspectiva del usuario, no de acuerdo con la lógica de la aplicación o la base de datos, porque ayudará a crear un sentido de conversación con el usuario. Por ejemplo, si diseña un formulario de pago y solicita detalles como el nombre completo, el número de teléfono y la tarjeta de crédito, la primera pregunta debe ser el nombre completo. Cambiar el orden (por ejemplo, comenzar con un número de teléfono en lugar de un nombre) genera incomodidad. En las conversaciones del mundo real, sería inusual pedir el número de teléfono de alguien antes de preguntar su nombre.

Aplazar las preguntas detalladas hasta el final

Cuando se trata de diseñar un flujo para las preguntas que desea hacer, piense en la priorización. Siga la regla "fácil antes que difícil" y coloque las preguntas profundas o personales al final. Esto facilita a los usuarios el proceso; será más probable que respondan preguntas complejas y más intrusivas una vez que hayan establecido una relación. Esto tiene una base científica: el principio de consistencia de Robert Cialdini estipula que cuando alguien realiza una pequeña acción o paso hacia algo, se siente más obligado a terminar.

Agrupar campos relacionados juntos

Uno de los principios de la psicología de la Gestalt, el principio de proximidad, establece que los elementos relacionados deben estar cerca unos de otros. Este principio se puede aplicar al orden de las preguntas en un formulario. Cuanto más relacionadas estén las preguntas, más cerca deberían estar entre sí.

Los diseñadores pueden agrupar campos relacionados en secciones. Si su formulario tiene más de seis preguntas, agrupe las preguntas relacionadas en secciones lógicas. No olvide proporcionar una buena cantidad de espacio en blanco entre las secciones para distinguirlas visualmente.

Hacer que un formulario largo parezca más simple

¿Cómo se diseña un formulario que hace muchas preguntas a los usuarios? Por supuesto, puede poner todas las preguntas en una pantalla. Pero esto dificulta su tasa de finalización. Si los usuarios no tienen suficiente motivación para completar un formulario, la complejidad del formulario podría asustarlos. La primera impresión juega un papel vital. En general, cuanto más largo o complicado parezca un formulario, menos probable será que los usuarios comiencen a llenar los espacios en blanco.

Minimice el número de campos visibles a la vez. Esto crea la percepción de que la forma es más corta de lo que realmente es.

Hay dos técnicas para hacer esto.

Divulgación progresiva

La divulgación progresiva tiene que ver con dar a los usuarios lo correcto en el momento adecuado. El objetivo es encontrar las cosas adecuadas para poner en la pantalla chica en el momento adecuado:

• Inicialmente, muestre a los usuarios solo algunas de las opciones más importantes.
• Revela partes de tu formulario a medida que el usuario interactúa con él.

fragmentación

La fragmentación implica dividir una forma larga en pasos. Es posible aumentar la tasa de finalización dividiendo un formulario en unos pocos pasos. La fragmentación también puede ayudar a los usuarios a procesar, comprender y recordar información. Cuando diseñe formularios de varios pasos, siempre informe a los usuarios de su progreso con un medidor de integridad.

Los diseñadores pueden usar un rastreador de progreso (como se muestra en el ejemplo anterior) o un indicador de "Paso # de #" tanto para saber cuántos pasos hay en total como para mostrar qué tan avanzado está el usuario en este momento. El último enfoque podría ser excelente para formularios móviles porque la indicación de pasos no ocupa mucho espacio.

Botones de acción

Un botón es un elemento interactivo que dirige a los usuarios a realizar una acción.

Hacer que los botones de acción sean descriptivos

La etiqueta de un botón debe explicar qué hace el botón; los usuarios deberían poder entender lo que sucede después de un toque con solo mirar el botón. Evite etiquetas genéricas como "Enviar" y "Enviar", utilizando en su lugar etiquetas que describan la acción.

No use los botones Borrar o Restablecer

Los botones Borrar o Restablecer permiten a los usuarios borrar sus datos en un formulario. Estos botones casi nunca ayudan a los usuarios y, a menudo, los perjudican. El riesgo de eliminar toda la información que un usuario ha ingresado supera el pequeño beneficio de tener que comenzar de nuevo. Si un usuario completa un formulario y presiona accidentalmente el botón equivocado, es muy probable que no comience de nuevo.

Use diferentes estilos para botones primarios y secundarios

Evite las acciones secundarias si es posible. Pero si su formulario tiene dos llamadas a la acción (por ejemplo, un formulario de comercio electrónico que tiene los botones "Aplicar descuento" y "Enviar pedido"), asegúrese de que haya una distinción visual clara entre las acciones primaria y secundaria. Priorice visualmente la acción principal agregando más peso visual al botón. Esto evitará que los usuarios presionen el botón equivocado.

Diseñe objetivos táctiles amigables con los dedos

Los objetivos táctiles diminutos crean una experiencia de usuario horrible porque dificultan que los usuarios interactúen con objetos interactivos. Es vital diseñar objetivos táctiles amigables con los dedos: campos de entrada y botones más grandes.

La siguiente imagen muestra que el ancho de un dedo adulto promedio es de aproximadamente 11 mm.

De acuerdo con las pautas de diseño de materiales, los objetivos táctiles deben tener al menos 48 × 48 DP. Un objetivo táctil de este tamaño da como resultado un tamaño físico de unos 9 mm, independientemente del tamaño de la pantalla. Podría ser apropiado usar objetivos táctiles más grandes para adaptarse a un espectro más amplio de usuarios.

No solo es importante el tamaño del objetivo, sino que también es importante el espacio suficiente entre los objetivos táctiles. La razón principal para mantener una distancia segura entre los objetivos táctiles es evitar que los usuarios toquen el botón equivocado e invoquen la acción incorrecta. La distancia entre los botones se vuelve extremadamente importante cuando las opciones binarias como "Estoy de acuerdo" y "No estoy de acuerdo" se encuentran una al lado de la otra. Las pautas de diseño de materiales recomiendan separar los objetivos táctiles con 8 DP de espacio o más, lo que creará una densidad de información y usabilidad equilibradas.

Deshabilitar botones después de tocar

Las acciones de formularios comúnmente requieren algún tiempo para ser procesadas. Por ejemplo, es posible que se requiera el cálculo de datos después de un envío. It's essential not only to provide feedback when an action is in progress, but also to disable the submit button to prevent users from accidentally tapping the button again. This is especially important for e-commerce websites and apps. By disabling the button, you not only prevent duplicate submissions, which can happen by accident, but you also provide a valuable acknowledgment to users (users will know that the system has received their submission).

Assistance And Support

Provide Success State

Upon successful completion of a form, it's critical to notify users about that. It's possible to provide this information in the context of an existing form (for example, showing a green checkmark above the refreshed form) or to direct users to a new page that communicates that their submission has been successful.

Errors And Validation

Users will make mistakes. It's inevitable. It's essential to design a user interface that supports users in those moments of failures.

While the topic of errors and validation deserves its own article, it's still worth mentioning a few things that should be done to improve the user experience of mobile forms.

Use Input Constraints for Each Field

Prevention is better than a cure. If you're a seasoned designer, you should be familiar with the most common cases that can lead to an error state (error-prone conditions). For example, it's usually hard to correctly fill out a form on the first attempt, or to properly sync data when the mobile device has a poor network connection. Take these cases into account to minimize the possibility of errors. In other words, it's better to prevent users from making errors in the first place by utilizing constraints and offering suggestions.

For instance, if you design a form that allows people to search for a hotel reservation, you should prevent users from selecting check-in dates that are in the past. As shown in the Booking.com example below, you can simply use a date selector that allows users only to choose today's date or a date in the future. Such a selector would force users to pick a date range that fits.

Don't Make Data Validation Rules Too Strict

While there might be cases where it's essential to use strict validation rules, in most cases, strict validation is a sign of lazy programming. Showing errors on the screen when the user provides data in a slightly different format than expected creates unnecessary friction. And this would have a negative impact on conversions.

It's very common for a few variations of an answer to a question to be possible; for example, when a form asks users to provide information about their state, and a user responds by typing their state's abbreviation instead of the full name (for example, CA instead of California). The form should accept both formats, and it's the developer job to convert the data into a consistent format.

Clear Error Message

When you write error messages, focus on minimizing the frustration users feel when they face a problem in interacting with a form. Here are a few rules on writing effective error messages:

• Never blame the user.
  The way you deliver an error message can have a tremendous impact on how users perceive it. An error message like, “You've entered a wrong number” puts all of the blame on the user; as a result, the user might get frustrated and abandon the app. Write copy that sounds neutral or positive. A neutral message sounds like, “That number is incorrect.”
• Avoid vague or general error messages.
  Messages like “Something went wrong. Please, try again later” don't say much to users. Users will wonder what exactly went wrong. Always try to explain the root cause of a problem. Make sure users know how to fix errors.
• Make error messages human-readable.
  Error messages like “User input error: 0x100999” are cryptic and scary. Write like a human, not like a robot. Use human language, and explain what exactly the user or system did wrong, and what exactly the user should do to fix the problem.

Display Errors Inline

When it comes to displaying error messages, designers opt for one of two locations: at the top of the form or inline. The first option can make for a bad experience. Javier Bargas-Avila and Glenn Oberholzer conducted research on online form validation and discovered that displaying all error messages at the top of the form puts a high cognitive load on user memory. Users need to spend extra time matching error messages with the fields that require attention.

Es mucho mejor colocar los mensajes de error en línea. En primer lugar, esta ubicación se corresponde con el flujo de lectura natural de arriba a abajo del usuario. En segundo lugar, los errores aparecerán en el contexto de la entrada del usuario.

Usar validación dinámica

El momento en el que elige mostrar un mensaje de error es vital. Ver un mensaje de error solo después de presionar el botón Enviar puede frustrar a los usuarios. No espere hasta que los usuarios completen el formulario; proporcionar retroalimentación a medida que se ingresan los datos.

Utilice la validación en línea con comentarios en tiempo real. Esta validación informa instantáneamente a las personas si la información que han ingresado es compatible con los requisitos del formulario. En 2009, Luke Wroblewski probó la validación en línea con la validación posterior al envío y encontró los siguientes resultados para la versión en línea:

• 22% de aumento en la tasa de éxito,
• 22% de disminución de errores cometidos,
• Aumento del 31 % en el índice de satisfacción,
• 42% de disminución en los tiempos de finalización,
• Disminución del 47% en el número de fijaciones oculares.

Pero la validación en línea debe implementarse con cuidado:

• Evite mostrar la validación en línea en el foco.
  En este caso, tan pronto como el usuario toca un campo, ve un mensaje de error. El error aparece incluso cuando el campo está completamente vacío. Cuando se muestra un mensaje de error en el foco, puede parecer que el formulario le está gritando al usuario antes de que haya comenzado a completarlo.
• No valide después de cada carácter escrito.
  Este enfoque no solo aumenta la cantidad de intentos de validación innecesarios, sino que también frustra a los usuarios (porque es probable que los usuarios vean mensajes de error antes de completar el campo). Idealmente, los mensajes de validación en línea deberían aparecer entre 500 y 1000 milisegundos después de que el usuario haya dejado de escribir o después de que haya pasado al siguiente campo. Esta regla tiene algunas excepciones: es útil validar en línea a medida que el usuario escribe al crear una contraseña (para verificar si la contraseña cumple con los requisitos de complejidad), al crear un nombre de usuario (para verificar si hay un nombre disponible) y al escribir un mensaje con un límite de caracteres.

Accesibilidad

Los usuarios de todas las capacidades deberían poder acceder y disfrutar de los productos digitales. Los diseñadores deben esforzarse por incorporar las necesidades de accesibilidad tanto como puedan al crear un producto. Aquí hay algunas cosas que puede hacer para que sus formularios sean más accesibles.

Asegúrese de que el formulario tenga el contraste adecuado

Sus usuarios probablemente interactuarán con su formulario al aire libre. Asegúrese de que sea fácil de usar tanto bajo el sol como en entornos con poca luz. Verifique la relación de contraste de los campos y las etiquetas en su formulario. El W3C recomienda las siguientes relaciones de contraste para el cuerpo del texto:

• El texto pequeño debe tener una relación de contraste de al menos 4,5:1 con respecto a su fondo.
• El texto grande (en negrita de 14 puntos, normal de 18 puntos en adelante) debe tener una relación de contraste de al menos 3:1 contra su fondo.

Medir el contraste de color puede parecer abrumador. Afortunadamente, algunas herramientas simplifican el proceso. Uno de ellos es Web AIM Color Contrast Checker, que ayuda a los diseñadores a medir los niveles de contraste.

No confíe solo en el color para comunicar el estado

El daltonismo (o deficiencia de la visión del color) afecta aproximadamente a 1 de cada 12 hombres (8%) y 1 de cada 200 mujeres en el mundo. Si bien hay muchos tipos de daltonismo, los dos más comunes son la protanomalía, o sensibilidad reducida a la luz roja, y la deuteranomalía, o sensibilidad reducida a la luz verde. Cuando muestre errores de validación o mensajes de éxito, no confíe solo en el color para comunicar el estado (es decir, haciendo que los campos de entrada sean verdes o rojos). Como establecen las directrices del W3C, el color no debe utilizarse como el único medio visual para transmitir información, indicar una acción, provocar una respuesta o distinguir un elemento visual. Los diseñadores deben usar el color para resaltar o complementar lo que ya es visible. Apoye a las personas daltónicas brindándoles pistas visuales adicionales que les ayuden a comprender la interfaz de usuario.

Permitir que los usuarios controlen el tamaño de fuente

Permita que los usuarios aumenten el tamaño de fuente para mejorar la legibilidad. Los dispositivos móviles y los navegadores incluyen funciones que permiten a los usuarios ajustar el tamaño de fuente en todo el sistema. Además, asegúrese de que su formulario haya asignado suficiente espacio para tamaños de letra grandes.

Pruebe sus decisiones de diseño

Todos los puntos mencionados anteriormente pueden considerarse como mejores prácticas de la industria. Pero el hecho de que algo se llame "mejor práctica" no significa que sea siempre la solución óptima para su formulario. Las aplicaciones y los sitios web dependen en gran medida del contexto en el que se utilizan. Por lo tanto, siempre es esencial probar sus decisiones de diseño; asegúrese de que el proceso de completar un formulario sea sencillo, que el flujo no se interrumpa y que los usuarios puedan resolver cualquier problema que enfrenten en el camino. Realice sesiones de prueba de usabilidad de forma regular, recopile todos los datos valiosos sobre las interacciones de los usuarios y aprenda de ellos.

Conclusión

Los usuarios pueden dudar en completar formularios. Por lo tanto, nuestro objetivo como diseñadores es hacer que el proceso de completar un formulario sea lo más fácil posible. Al diseñar un formulario, esfuércese por crear interacciones rápidas y sin fricciones. A veces, un cambio menor, como escribir correctamente un mensaje de error, puede aumentar significativamente la facilidad de uso del formulario.

Este artículo es parte de la serie de diseño de UX patrocinada por Adobe. Adobe XD está hecho para un proceso de diseño de UX rápido y fluido, ya que te permite pasar de la idea al prototipo más rápido. Diseñe, cree prototipos y comparta, todo en una sola aplicación. Puede ver más proyectos inspiradores creados con Adobe XD en Behance y también suscribirse al boletín de diseño de experiencia de Adobe para mantenerse actualizado e informado sobre las últimas tendencias y conocimientos para el diseño de UX/UI.