7 secretos para diseñar grandes formas
Casi todos los diseños de sitios web incluyen algún tipo de formulario. Desde la simple recopilación de direcciones de correo electrónico para suscribirse a un boletín informativo o la notificación a los formularios de cobro completos, es imperativo que diseñe un formulario que sea fácil de usar y comprender.
Los estándares del diseño de formularios también están evolucionando. Si bien muchos formularios solían incluir varias columnas y solicitar mucha información, la mayoría de las mejores prácticas ahora sugieren mantener los formularios lo más simple posible. Y también hay mucho para el diseño. Una buena forma es escaneable, no requiere mucha escritura e incluye etiquetado y formato inteligentes para ayudar a los usuarios a completar formularios correctamente la primera vez.
Aquí hay algunos secretos para asegurarse de que está diseñando un formulario que los usuarios llenen realmente.
1. Facilita el escaneo y la lectura
Usted sabe que los usuarios escanean sitios web para obtener información y determinar qué acciones tomarán o si el contenido y el diseño les interesan o no. Lo mismo es cierto de las formas. El usuario debería ser capaz de decir qué información se necesita de un vistazo y proporcionar una explicación clara de para qué es el formulario y cómo enviarlo.
Una forma altamente escaneable incluye lo siguiente:
- Contraste: el texto debe ser breve y fácil de leer. Evite mucho color y adhiérase a las combinaciones tradicionales de texto oscuro y claro sobre fondo claro.
- Agrupación y espacio: información de grupo que es similar en formularios más largos. Al recopilar información de pago, por ejemplo, agrupe información del cliente, información de pago e información de envío. Tres bloques más cortos son más fáciles de digerir que uno largo. Use espaciado inteligente para que las etiquetas estén conectadas al campo que explican, en lugar de un espaciado uniforme entre el texto y los elementos del campo.
- Finalizar / llamar a la acción : haga que el botón sea grande y fácil de ver. La microcopia dentro del botón debe decirles a los usuarios qué sucederá, como "enviar", "pagar ahora" o "pasar al siguiente paso". Recuerde cerrar el ciclo de retroalimentación y dejar que los usuarios sepan cuándo se envía un formulario correctamente.
2. Considera las etiquetas flotantes
Se ha debatido mucho sobre si se debe o no utilizar texto de sugerencia dentro de los campos de formulario. El principal problema es que, con demasiada frecuencia, este texto no desaparece con un clic y los usuarios tienen que eliminarlo activamente para comenzar a escribir. Eso es incómodo.
Además, el Nielsen Norman Group encontrado que los campos en blanco pueden llamar la atención y ayudar a los usuarios a ingresar información más claramente.
Si sientes la necesidad de usar pistas, considera una solución interactiva: etiquetas flotantes. Incluya la información de su etiqueta dentro de los campos del formulario para que parezca texto de marcador de posición, pero permita que el texto se anime y cambie a la posición superior izquierda una vez que el usuario pase el ratón o haga clic en el campo. La etiqueta o sugerencia nunca desaparece y no se interpone en el camino del usuario que intenta completar el formulario. (Además, la pequeña animación es una sorpresa divertida para los usuarios).
3. Use máscaras de campo
Las máscaras de campo pueden proporcionar algunas de las mismas pistas y pistas, pero sin obstaculizar la usabilidad. Una máscara de campo solo aparece una vez que un usuario activa un campo y proporciona una pista de escaneo adicional sobre qué información se necesita. La máscara puede ayudar al usuario aún más al formatear automáticamente la información en un esfuerzo por evitar errores que activarán el formulario en el envío.
Un buen ejemplo de una máscara de campo en acción es con números de teléfono. Considere las opciones de formato múltiple:
- (000) 000-0000
- 000-000-0000
- 0000000000
¿Cómo sabe un usuario cuál funcionará? El campo de formulario especificará y ajustará el formato a medida que el usuario escribe, para que no tenga que pensarlo y solo tenga que ingresar los números. (Esto también ahorra la molestia de tener que cambiar entre teclados en un dispositivo móvil).
4. Hacer formularios amigables con el teclado
No tiene forma de saber en qué tipo de dispositivo se encontrará el usuario con su formulario, pero igual debería ser igualmente fácil de completar. Considere todos los diferentes tipos de teclados que podrían enviar información al formulario y ajustar los campos para detectar y usar la opción apropiada.
En los escritorios, los usuarios deben poder ingresar un formulario y completar cada campo sin tener que hacer clic con el mouse. Avance automáticamente de un campo al siguiente al finalizar o use pestañas o ingrese para moverse. W3.org tiene un conjunto sólido de recomendaciones de teclado para que lo sigas
En los dispositivos móviles, haga coincidir el tipo de teclado con los datos requeridos. Si la entrada es para letras, abre el teclado alfabético; para los números, aparece la opción numérica. De Google: "Los usuarios de aplicaciones aprecian las aplicaciones que proporcionan un teclado apropiado para la entrada de texto. Asegúrese de que esto se implemente de manera consistente en toda la aplicación en lugar de solo para ciertas tareas, pero no para otras ".
5. Opta por el formato vertical
Los formularios verticales son más fáciles para los usuarios que los formatos de columnas múltiples. La regla de la mejor práctica es garantizar que todos los campos puedan caber en la pantalla sin desplazarse en un formato de arriba a abajo.
La única excepción son los formularios súper breves en los que un usuario solo necesita ingresar una dirección de correo electrónico o nombre y dirección de correo electrónico. Dos columnas contiguas seguidas de un botón de llamada a la acción pueden funcionar bien en esta situación siempre que el buzón de correo electrónico sea lo suficientemente largo para que los usuarios vean todas las letras de su dirección.
Recuerde ordenar elementos lógicamente en una forma vertical también. Si está recopilando el nombre, el apellido, la dirección de correo electrónico y el color del cabello, organícelos de esa manera.
6. Limitar la escritura
Use tantas soluciones de prellenado como sea posible con formularios. Nada es más agradable que agregar una dirección y después de los primeros toques, la API de Google se activa y sugiere opciones de dirección.
Esto hace tres cosas:
- Hace que sea más fácil para los usuarios, especialmente en dispositivos móviles.
- Ayuda a limitar el número de campos necesarios.
- Puede ayudar a eliminar algunos errores del usuario, como la creación de errores.
Considere lo mismo con las direcciones de correo electrónico, de modo que los usuarios reciban dominios populares de correo electrónico después del símbolo @. Cuando un usuario escribe [correo electrónico protegido] .... el campo sugiere automáticamente [correo electrónico protegido] .
7. Mantenerlo corto y dulce
Tendrá la tentación de pedirles a los usuarios mucha información en formularios. ¡Resiste la urgencia!
Solo solicite información vital en formularios. Hay una mayor probabilidad de que los usuarios completen formularios que requieren menos compromiso. Si necesita más información más adelante, puede enviarlos por correo electrónico desde su lista para solicitar detalles adicionales. (Como alguien que ya ha participado, es más probable que el usuario se comprometa con usted para obtener más información en este momento).
Evita campos opcionales. No solicite información redundante. No use múltiples campos donde podría usar uno (números de teléfono, por ejemplo).
Conclusión
Ofrezca a los usuarios algo a cambio de completar un formulario. Hazlo divertido o interesante. Gracias al usuario
Crear un formulario que sea fácil de leer y fácil de usar aumentará sus posibilidades de recopilar datos y convertir a un visitante en un usuario repetido.