Hola Habr! Les presento la traducción del artículo "
10 consejos para diseñar formas perfectas ".
Los formularios desempeñan el papel de un portal entre el usuario y el sistema y, a menudo, son la base de la página. La autorización, el registro, la actualización del estado, la entrada de datos de pago o la dirección de entrega están controlados por formularios. Para las tiendas en línea, los formularios bien diseñados juegan un papel importante. Desde mi propia experiencia, el buen diseño duplica las ventas en línea.
Dado que los formularios realizan funciones importantes para la interfaz de usuario, existen reglas para su diseño.
1. Comience ingresando datos
Comience con el elemento más simple: un campo de texto. Este es el componente más común de muchas formas, así que si lo haces bien, estás a medio camino.
Hay 3 elementos principales para el formulario: un campo de texto, un título y un mensaje de error. Independientemente del diseño que elija para crearlos, asegúrese de que el usuario sepa qué información se requiere y, si hay un error, ¿cómo puede deshacerse de él?
Los encabezados deben estar arriba.
Las tendencias nacen y mueren. Ahora está de moda colocar el marcador de posición como encabezado. Su uso, aunque no es erróneo, plantea algunos problemas de UX (nota: "experiencia del usuario"). El hecho es que cuando se completa el campo, el usuario no ve el encabezado.
Los titulares siempre deben ser vistos. Por lo tanto, se colocan en la parte superior.
¿Por qué arriba, y no a la izquierda del campo de entrada de datos?
Cuando el encabezado está a la izquierda del campo de texto, en la pantalla del teléfono los elementos se moverán uno con respecto al otro. Primero piense en cómo se verá todo en la pantalla del teléfono.
Ayude al usuario especificando un ejemplo en el marcador de posición.
Otro argumento a favor de colocar los encabezados sobre el campo de entrada de datos es que el usuario lee la información en una línea vertical, ya que según la investigación, esto es más rápido que mover la vista de la columna izquierda a la derecha.
2. Mensaje de error y advertencia
Para un campo de texto estándar, se necesitan mensajes de error.
Aquí hay 3 consejos para diseñarlos:
El error ocurre tanto por el cliente como por el servidor.
En el lado del cliente, se detectan problemas cuando el campo requerido no se completa o la dirección de correo electrónico se ingresa incorrectamente:
- El servidor verifica si el correo electrónico dado existe;
- El usuario recibe una notificación de un error del cliente antes de enviar el formulario. Los errores son necesarios para evitar el envío de información incorrecta por parte del usuario.
Verificar mensajes de error
Proporcione información sobre en qué campo se encuentra el error. Por razones de seguridad, algunos desarrolladores no indican un error en el correo electrónico o la contraseña durante la autorización, y esto es absolutamente normal. Pero cuando el usuario se suscribe al boletín informativo o ingresa su dirección durante la compra, indíquele qué campo se completó incorrectamente y por qué.
Cada vez que complete un campo de texto, verifique cómo se verá el error antes y después de hacer clic en el botón Enviar.
Usar advertencias
Informe al usuario si el campo requiere ciertos criterios, por ejemplo, si la contraseña debe contener un cierto número de caracteres o combinar números y letras.
Indique qué tan segura es la contraseña, si el correo electrónico está registrado en el sitio o si el inicio de sesión está ocupado.
3. Use formas coincidentes
Visualmente, el formulario se ve más conciso si se usan combinaciones. Considere cómo el usuario usará el formulario desde el teléfono.
Si todos los campos son texto, el usuario tendrá que abrir constantemente el teclado.
Para un cambio, solicite al usuario que cambie de un campo de texto a un menú desplegable (nota: "listas desplegables") o al botón de radio y viceversa.
Piense en cómo el usuario sostiene el teléfono y cómo eliminar los inconvenientes causados por una combinación de los mismos campos para ingresar datos.
4. Botones de radio, menús desplegables y casillas de verificación
A veces hay confusión al elegir el botón de radio, el menú desplegable y la casilla de verificación.
Radiobutton es excelente para proporcionar una pequeña cantidad de respuestas posibles. Elija una posible respuesta por adelantado u omita este campo.
Radiobutton es la mejor solución cuando puede elegir una sola opción.
Cuando se necesitan más elementos, un menú desplegable será la opción más adecuada (en la práctica, más de 5-6 respuestas). También puede seleccionar el elemento predeterminado o establecer el marcador de posición "Seleccionar un elemento".
La casilla de verificación es la mejor opción cuando necesita completar un solo campo (por ejemplo, condiciones y condiciones), o se proporciona más de una respuesta. Si desea elegir qué correos publicitarios enviar al usuario, la casilla de verificación le permitirá hacer más de una elección.
El uso de la casilla de verificación en lugar del botón de radio no debería limitarlo en sus decisiones de diseño de la interfaz de usuario.
Como diseñador, tiene suficiente libertad para elegir cómo se mostrarán en la pantalla los elementos de la interfaz de usuario (nota: "interfaz de usuario"). Incluso si desea cambiar de alguna manera la casilla de verificación para que sean más interesantes, esto no debería afectar la percepción del usuario.
En lugar de escribir texto frente a círculos pequeños, puede crear imágenes o íconos para su selección.
5. Si es posible, excluya los campos opcionales
Si el objetivo de la empresa es vender un producto, su objetivo como diseñador es eliminar tantos inconvenientes como sea posible entre el usuario y el sistema.
Eliminar campos innecesarios permitirá al usuario hacer menos esfuerzo.
Al realizar la solicitud, es importante conocer los diferentes tipos de pago y métodos de entrega.
Si el departamento de ventas desea conocer las preferencias de los clientes, puede hacerlo con un correo electrónico de confirmación.
Siempre busque formas de usar un mínimo de campos visibles.
Si desea optimizar su tienda en línea, minimice el número de campos para la dirección de entrega y el pago.
Si está creando una interfaz para reservar boletos aéreos, muestre al usuario el menor número de campos necesarios para ver los vuelos disponibles.
Entonces puede ofrecer más condiciones: la cantidad de bolsas, etc.
6. Use autocompletar para formularios grandes
Dependiendo del nombre de la calle, completar la barra de direcciones puede llevar mucho tiempo, especialmente desde el teléfono. Escribir la dirección correctamente puede ser aún más difícil.
Considere usar GoogleMapsAPI para que los nombres de las calles se llenen automáticamente. Esto significa que el usuario solo necesita ingresar algunos caracteres y seleccionar la calle deseada de la lista propuesta. También puede completar automáticamente el código postal según el nombre de la calle, pero lo discutiremos más adelante.
7. Usar lógica condicional
Use la lógica para introducir información para que el usuario le facilite la vida.
- Si se conoce el país del usuario, el diseño puede contener campos adicionales ("estado" si se encuentra en los Estados Unidos, "condado" en Irlanda, etc.)
- Use el código postal para ingresar el nombre de una ciudad, estado o provincia
- Si está calculando el país del usuario por la dirección IP, ¿es posible insertar el código del país en el campo de entrada del teléfono?
Si desea completar algunos campos para el usuario, siempre bríndele la oportunidad de ingresar la información él mismo. Existe la posibilidad de que te hayas equivocado en algo.
Por ejemplo, utiliza GoogleMapsAPI para encontrar una calle en Alemania. Conociendo el nombre de la calle, puede obtener el código de área. Sin embargo, algunas calles en Alemania son bastante grandes, por lo que cubren códigos diferentes, por lo que la información puede ser incorrecta en el caso de las calles fronterizas. Siempre proporcione al usuario la capacidad de ingresar datos si es necesario.
El uso de la lógica condicional para todos los países del mundo requerirá demasiado trabajo, por lo que debe ser consciente del significado de sus esfuerzos. Explore los países de donde provienen los pedidos con mayor frecuencia y primero comience a optimizarlos. Si esto conduce a mayores ingresos, haga lo mismo con el resto de los países.
8. Use el marcador de posición correctamente
Anteriormente discutimos que el marcador de posición no siempre se usa, ya que desaparece al ingresar información. Pero no consideramos otras formas de usarlo que pudieran ayudar al usuario.
El marcador de posición es una gran oportunidad para mostrarle al usuario cómo ingresar información. Un buen ejemplo es ingresar a un teléfono. ¿El usuario necesita ingresar un código de país? O código de ciudad?
Cuando necesite un número de teléfono o tarjeta en un formato específico, informe al usuario acerca de esto proporcionando un ejemplo de completar el marcador de posición. Esta es una excelente manera de corregir errores simplemente indicando qué información se necesita: código de país, etc.
9. Informe los siguientes pasos.
Si después de completar otro formulario para entrada, informe al usuario.
En lugar de "Siguiente" o "Pagar", puede escribir "Verificar pedido" o "Pago con PayPal".
Agregue mensajes que indiquen los siguientes pasos después de hacer clic en el botón. ¿Se completará el proceso de pedido o el usuario tendrá tiempo para verificar todo? ¿Irá a pagar?
Siempre busque formas de brindar comodidad al usuario, especialmente si está conectado con su cuenta bancaria.
Me molesto cada vez que compro en Amazon porque no obtengo toda la información, incluidos los costos de envío, hasta el último paso. Sé honesto con tu usuario. Gane credibilidad al proporcionar la información necesaria en cada paso de llenado, explique claramente qué esperar con el uso futuro.
10. Continuar buscando formas de optimizar
Una vez que haya lanzado una nueva forma brillante, continúe analizándola. Si encuentra que muchos usuarios abandonan el sitio, averigüe el motivo. Realice una encuesta para descubrir por qué los usuarios se sienten incómodos, luego trabaje para resolver este inconveniente. Para el diseñador, el trabajo nunca se "termina por completo".
Conclusión
A veces, el diseño de formularios no es tan interesante, pero si se hacen bien, pueden cambiar la percepción del sitio o la aplicación por parte del usuario. Diseñe cuidadosamente los formularios para que sea más fácil para el usuario. Indique claramente más instrucciones, brinde sugerencias con alertas y marcadores de posición, y sugiera que se complete automáticamente para que los usuarios no escriban demasiado.