[Diseño de interacción] Diseño de formularios para PC y dispositivos móviles
Las aplicaciones móviles han dado vida a una gran comodidad y varias formas de diseño de formularios móviles también han entrado en nuestro trabajo y nuestra vida. Los formularios son donde las aplicaciones móviles interactúan más con los usuarios, incluidos: registro de usuarios, servicios de suscripción, comentarios de los usuarios, formularios de cuestionarios, transacciones de compra y venta, etc.
Un buen diseño de formulario puede ayudar a mejorar la experiencia de usuario de tu producto, aumentar las tasas de conversión y lograr mejores resultados de marketing.
Cada formulario tiene su propio propósito específico, ya sea para atraer registros o cerrar un trato. Un formulario mal pensado o mal diseñado puede provocar la pérdida de usuarios o transacciones fallidas.
Para aprender a diseñar formularios, es necesario comprender los principios básicos del diseño de formularios y evitar los campos minados de la creación de formularios.
Principios básicos del diseño de formularios
1. Lógica clara
Los formularios son el vínculo entre productos y usuarios Al igual que una conversación, el formulario debe ser lógico y ayudar a ambas partes a completar la comunicación.
2. Intente utilizar un diseño de una sola columna.
Los usuarios ignoran fácilmente los formularios de varias columnas y no pueden concentrarse en completar el formulario. Los formularios de una sola columna tienen una ruta de finalización única, directa y más eficiente.
3. Reducir el input
Cuanto más largo y complejo sea el formulario, es menos probable que los usuarios lo completen (especialmente en productos móviles). Minimizar los campos de entrada puede acelerar la finalización de formularios, especialmente cuando se solicita a los usuarios que proporcionen una gran cantidad de información.
4. Proporcione métodos de entrada adecuados
Proporcione diferentes teclados para "cuenta, contraseña, correo electrónico, apodo" para minimizar los errores de entrada y ayudar a los usuarios a completar el formulario rápidamente.
5. Evite el uso de etiquetas como marcadores de posición
Existe un patrón de diseño que utiliza etiquetas como marcadores de posición en los cuadros de entrada y desaparece después de que el usuario hace clic para ingresar. Este diseño es más minimalista, pero puede causar problemas cuando los usuarios escriben, ya que tienden a olvidar qué campos deben ingresar.
Gran ejemplo: ¿diseño de formulario móvil?
↘Dropbox?por Sam Atmore
Análisis del diseño de interacción:
En el inicio de sesión de Sam/ En El formulario de registro, la lógica de inicio de sesión y registro son muy claros.
1. Utilice un diseño de formulario de opción doble de una sola columna. Antes de que el usuario use la aplicación, solo hay dos opciones, con un mensaje con pestañas para el siguiente paso. Los usuarios también pueden volver a pasar por error a otra opción.
2. ¿Los botones principales de las páginas de inicio de sesión y registro son claros y tienen un fuerte efecto guía?
↘ ¿Cambio de ubicación? - Autor Nimasha Perera
Análisis del diseño de interacción: Palabras clave "Opciones de autocompletar inteligentes"
Más automatización en el diseño de formularios. Por ejemplo: función de posicionamiento automático, completando información de forma inteligente en función de la ubicación actual. Ahorra tiempo y esfuerzo a los usuarios al eliminar las operaciones de selección de ubicación geográfica y las operaciones de conversión de moneda.
↘¿Validación de formulario?- por Emmanuel Torres
¿Análisis de diseño de interacción? : Palabra clave "mensaje visible"
El estado ideal del proceso de inicio de sesión y registro del usuario es completar la información y enviarla.
Pero en el funcionamiento real, los errores son inevitables, por lo que el diseño del formulario debe tener en cuenta indicaciones identificables para recordar a los usuarios los errores en tiempo real. En lugar de decírselo después de que todo haya terminado.
Descomponer los estilos de los componentes del formulario
La función principal del formulario es guiar a los usuarios para que completen la información. Al diseñar, debe considerar cómo el contenido de la información principal guía a los usuarios a navegar.
El contenido de información del formulario incluye:
1) Campos de entrada: incluidos campos de texto, campos de contraseña, casillas de verificación, botones de opción, controles deslizantes y otros campos que requieren entrada del usuario
2; ) Etiquetas de campo: describen el significado de los campos de entrada del usuario, como "su nombre" delante del cuadro de texto
3) Apariencia y estructura: incluido el orden de los campos, el estilo del formulario; la interfaz y la relación entre diferentes campos La relación lógica entre
4) Botón de operación: al menos un botón de operación (como el botón de enviar);
5) Nombre de usuario: Describe el significado del nombre de usuario, por ejemplo, delante del cuadro de texto "tu nombre". Por ejemplo: botón enviar);
5) Mensaje de retroalimentación: Notifica al usuario el resultado de la operación. Por ejemplo: "¡Gracias, el formulario se envió correctamente!", "El número que proporcionó es incorrecto". El número que proporcionaste es incorrecto".
l Estilo de formulario convencional
↘ Formulario con título e indicaciones
Ventajas: los títulos y las indicaciones pueden ser muy largos, vista previa Es rápido y puede agregar botones de función (como agregar archivos adjuntos y fotos).
Desventajas: ocupa más espacio vertical
Se usa principalmente para completar contenido de información y mantener. información de orden de trabajo, que puede reducir el costo de salto de página
↘Título izquierdo, contenido derecho (alineación izquierda y derecha)
Ventajas: los componentes comunes se pueden aplicar directamente en el frente. Al final, ahorra espacio vertical, guía a los usuarios para que se muevan hacia la izquierda y hacia la derecha y aumenta el tiempo para pensar, y es más seguro completar información clave.
Desventajas: en comparación con el formulario de estructura de arriba hacia abajo. , la distancia de movimiento visual del usuario aumenta, el número de líneas es mayor y estará visualmente desordenado
Adecuado para escenarios generales de llenado de formularios
↘Título izquierdo y contenido derecho. (todos alineados a la izquierda)
Ventajas: fuerte sugerencia de entrada, navegación visual rápida
Desventajas: el número de campos de título no puede ser demasiado largo ni demasiado corto, de lo contrario provocará efectos visuales. desequilibrio
Principales escenarios de aplicación: adecuado para cantidades numéricas e información de identidad
↘ Formulario de título de categoría (contenido. Pertenece a una categoría)
Combina elementos de formulario similares. en una pequeña parte del contenido para ayudar a los usuarios a clasificar y comprender el contenido que se va a completar. Cumple con los principios Gestalt de similitud y cierre
Se utiliza principalmente para mostrar información detallada. ↘Solo contenido rápido
Ventajas: menos información, no hay necesidad de pensar
Desventajas: cuando hay mucho contenido, los usuarios Es fácil confundirse, "No sé qué va a hacer el producto" (el formulario no tiene título).
Se utiliza para páginas de inicio de sesión o páginas con menos contenido, como cambiar número de móvil/cambiar nombre/completar notas. /p>
Desglose de las interacciones de los componentes del formulario
Las interacciones del formulario tienen dos objetivos principales: acciones guiadas y retroalimentación
Al interactuar con acciones, los formularios tienen 3 etapas de interacción: antes de la entrada, entrada y después input
↘Antes de ingresar
Guía al usuario para ingresar contenido, por ejemplo, escenario de configuración de contraseña
El cuadro de entrada muestra texto en el estado predeterminado, Para guiar el usuario debe ingresar el contenido correspondiente o hay un mensaje fuera del cuadro de entrada, que solo admite la entrada de letras, números y ciertos símbolos
↘Ingresar
Hacer clic en la entrada; Aparecerá el cuadro del teclado y mostrará un cursor parpadeante para localizar la ubicación actual del usuario.
El contenido del formulario generalmente tiene un límite de caracteres. Si se excede el límite de caracteres durante la entrada, aparecerá un mensaje de error en tiempo real. aparece
Como se muestra en la siguiente figura: Al centrarse en la contraseña original, el color de la línea se acentúa obviamente como un mensaje durante la entrada
↘Después de la entrada
Fin de la página web
Ingresar. El marco estará desenfocado para determinar si la información ingresada cumple con las reglas. Si no cumple con las reglas, se mostrará un mensaje de error. Por ejemplo:
Recuerde repetidamente al jugador que el nombre de usuario, la primera letra de la contraseña no están en mayúscula y que la longitud de la contraseña no cumple con los requisitos.
Se considera una entrada exitosa; como comentarios exitosos, por ejemplo:
El ícono en el lado derecho del cuadro de entrada se ilumina
Terminal móvil
Después de ingresar todo el contenido, si el Si el juicio de la regla no se realiza inmediatamente, active el botón primero.
Por ejemplo:
Active los botones Lanzar, Completar y Siguiente
El usuario hace clic en el botón de acción y luego emite un juicio sobre el cumplimiento de la entrada.
Caso: El mejor diseño de formulario para mejorar la experiencia del usuario y la conversión del cliente
Rellenar el formulario es un umbral para los usuarios. Veamos cómo mejorar la experiencia del usuario y la conversión del cliente. Durante el registro, a qué detalles de diseño e interacción se debe prestar atención en el mejor patrón de diseño del formulario de inicio de sesión:
1. Explique el valor del registro
Lo último que quieren los usuarios. lo que hay que hacer es registrarse. Utilice una declaración de valor clara para inspirar el comportamiento de registro. Propuesta de valor expresada: Conéctate con el mundo aquí.
2. Configure un cuadro de inicio de sesión llamativo.
Muestre el cuadro de inicio de sesión directamente en lugar de configurar un enlace de "iniciar sesión" para permitir a los usuarios hacer clic una vez más.
3. Permitir el registro e inicio de sesión de cuentas de terceros
Permitir que los usuarios utilicen cuentas de terceros existentes para iniciar sesión en los productos será muy conveniente, porque recordar una gran cantidad de contraseñas Es un asunto de dolor de cabeza.
4. Utiliza un correo electrónico o un número de teléfono móvil como nombre de usuario
Usar un correo electrónico o un número de teléfono móvil como nombre de usuario es más conveniente que un nombre nuevo (que normalmente ya está en uso) otra persona). Fácil de usar.
5. Distinga las funciones de inicio de sesión y registro
Colocar los enlaces de inicio de sesión/Inicio de sesión y registro/Registro juntos puede confundir fácilmente a los usuarios. Permitir que el formulario recuerde la información de inicio de sesión del usuario
A medida que el usuario escribe en el cuadro de entrada, el cuadro de texto se resaltará para indicar que se está llevando a cabo una acción en el cuadro. Permita que el formulario recuerde la información de inicio de sesión del usuario.
7. Permitir a los usuarios ver sus propias contraseñas
Las contraseñas siempre se muestran en puntos, por lo que es imposible verificar si la contraseña se ingresa correctamente, y permitir que las contraseñas se muestren en El texto claro es un diseño humano.
8. Consejos necesarios
Los consejos para errores tipográficos también incluyen algunos consejos importantes, como los siguientes tres formularios:
9. Mostrar seguridad de la contraseña
10. Reducir la frecuencia de uso de las opciones desplegables
10. Opciones desplegables
Si solo hay 3-4 parámetros disponibles para un elemento determinado en el selección de formulario, entonces es mejor no utilizar el cuadro desplegable, que es más propicio para la experiencia del usuario. No solicite a los usuarios que completen sus direcciones de correo electrónico repetidamente.