4 Formularios de UX de diseño de formulario que debe saber (con ejemplos)
Tendemos a pensar en los formularios como un simple medio para recopilar datos de usuarios, pero también son una forma, a veces la única forma, para que nuestros usuarios Conectate con nosotros. Probablemente sea delirante pensar que podemos hacer que los usuarios amor Rellenando formularios, sin embargo es ciertamente posible. Para encontrar soluciones que no les molesten demasiado., Y ayudarlos a lo largo del proceso..
Mientras navega por la red, a veces podemos encontrar soluciones sorprendentes que son correctas por programación, pero que están diseñadas de la manera más probable. Hace que muchos usuarios abandonen el sitio debido a la mala experiencia del usuario..
Si nuestros formularios están bien diseñados, no solo podremos complacer a nuestros usuarios, sino también al equipo backend que puede tratar con mucho menos errores de entrada del usuario. Por lo tanto, en este artículo, vamos a echar un vistazo a cómo podemos minimizar los errores de entrada del usuario y todavía mantener a nuestros usuarios felices.
Anticipar las necesidades del usuario
Sitios web y aplicaciones tienen diferentes bases de usuarios y objetivos, e incluso la misma ubicación puede albergar muchos formularios que recopilan diferentes tipos de datos, solo para nombrar los más frecuentes:
- Formularios de acceso
- Formularios de registro
- Formularios de perfil de usuario
- Boletines de inscripción
- Formularios de pago
- Encuestas de usuarios
- Formularios de contacto
- Formularios de comentarios
- Formularios de búsqueda
Todos estos tipos de formularios. requieren cosas diferentes. Al diseñar un formulario de pago es crucial para garantizar de manera creíble a los usuarios la seguridad, mientras que en el caso de formularios de comentarios es una buena idea agregue emojis u otros métodos que permitan a los usuarios expresar su estado de ánimo real.
Sin embargo, incluso tipos de formularios similares deben diseñarse de manera diferente, ya que todos los sitios tienen su base de usuarios única. Antes de embarcarse en el proceso de diseño, siempre es una buena idea anticipar lo que nuestros usuarios necesitan, y diseño en consecuencia.
Ejemplo: Inicios de sesión sociales dirigidos a las necesidades de los usuarios
El formulario de inicio de sesión de Codepen contiene tres inicios de sesión sociales con Github en la parte superior. Esta elección no sería razonable para la mayoría de los sitios.
Pero es perfecto para codepen, ya que su base de usuarios está formada por desarrolladores, muchos de los cuales querrán iniciar sesión con sus cuentas de Github, o conectar sus cuentas de desarrollo entre sí a la vez.
Think Mobile-First
Los usuarios móviles y de escritorio tienen diferentes necesidades, pero como completar formularios es un desafío mucho mayor en una pantalla móvil, utilizando gestos con las manos que en un teclado físico, un primer acercamiento móvil Nos puede llevar más lejos cuando queremos diseñar formas utilizables..
Además, muchos patrones de UI de formas que funcionan bien en dispositivos móviles también funcionarán bien en computadoras de escritorio..
Ejemplo: Controles Tappable
Formas móviles de alta calidad no se pueden imaginar sin controles visibles en la que los usuarios móviles pueden tocar fácilmente con sus dedos.
El formulario de suscripción al boletín de la conferencia de diseño web An Event Apart se adapta a la forma en que los usuarios móviles acceden a la pantalla: contiene dos campos de entrada fáciles de tocar y un botón del tamaño de un dedo.
Los campos de entrada de texto son más altos como de costumbre, por lo que los usuarios de dispositivos móviles pueden tocarlos fácilmente, y el gran botón naranja con un ícono de marca de verificación los anima a enviar el formulario.
La versión de escritorio del sitio. usa el mismo diseño de formulario, Como también se ve bien y funciona bien en pantallas más grandes.
Ejemplo: Entrada fungible
Al diseñar formularios para dispositivos móviles, siempre es importante considerar cómo podemos minimizar el espacio que utilizamos. los entrada prescindible El patrón de diseño de la interfaz de usuario se ha vuelto muy popular últimamente, y funciona especialmente bien en dispositivos móviles.
Booking.com aprovecha este patrón en el formulario de búsqueda en su sitio móvil. Cuando el usuario toca el campo de búsqueda, se expande para deja mas espacio para gestos, y debajo de ella aparece una lista de selección con recomendaciones..
Cuando el usuario toca fuera del campo, se reduce y la información adicional desaparece..
Ejemplo: Botón Morphing
Botones morphing lleve el patrón de entrada prescindible un paso más allá, ya que los usuarios primero ven un botón, que luego se transforma en una forma cuando lo tocan.
La captura de pantalla a continuación es del brillante artículo de The Startup sobre diseño de formularios innovadores, que también presenta muchas otras soluciones creativas..
Facilitar la entrada de entrada
Las formas largas tienden a disuadir a los usuarios. Lo mejor que podemos hacer es Sólo solicite la entrada que realmente necesitamos. Esto no solo es importante desde la perspectiva de la experiencia del usuario, sino que también puede dudar en proporcionar demasiada información personal debido a preocupaciones sobre la privacidad.
A veces, sin embargo, nosotros todavía Hay que acompañar las formas más largas. En este caso es una buena idea Cortarlos en trozos más pequeños, y Servir los trozos como pantallas sucesivas..
Muchos sitios de comercio electrónico (por ejemplo, Amazon) utilizan esta solución para reducir las tasas de abandono del carro.
Si queremos facilitar la cumplimentación de los campos del formulario, la regla de oro es Reducir tanto las distracciones como las acciones del usuario. cuanto más se pueda.
Ejemplo: Selector de entrada personalizado
Los distintos selectores de contenido, como los selectores de fecha o de color, no solo facilitan la entrada correcta, sino que también forman el formulario más atractivo, y significativamente reducir errores de usuario.
La aplicación para tomar listas de Todoist da consejos personalizados dentro de su selector de fechas cuando el usuario se desplaza durante los días.
Por ejemplo, en la captura de pantalla a continuación, el usuario puede ver que para el 31 de agosto ya tiene 2 tareas pendientes y puede tener esta información en cuenta al momento de decidir la fecha correcta para las tareas. Es una excelente idea para una aplicación donde la productividad es la principal preocupación del usuario..
Ejemplo: Entrada de arrastrar y soltar
Diseños de arrastrar y soltar Por lo general, funciona bien con los campos de carga de archivos, especialmente donde los usuarios deben cargar imágenes..
Es probable que no reduzcan las acciones del usuario tanto en comparación con el botón de carga de un archivo normal, pero hacen que sea mucho más fácil elegir el archivo que el usuario quiere subir, por lo tanto reduciendo la posibilidad de enviar un archivo incorrecto.
WordPress.com proporciona una interfaz de entrada de usuario de arrastrar y soltar elegante e intuitiva en su forma de editor de publicaciones. los pequeñas miniaturas y el Representación visual de los archivos ya cargados. ayuda adicional a los usuarios a ejecutar rápidamente la carga.
Ejemplo: Superposición para eliminar distracciones
Si los usuarios se distraen mientras completan nuestro formulario, son más propensos a errores y también se molestan más fácilmente
Superposiciones de contenido Son una gran alternativa al diseño de formas minimalistas. Son usados por sitios mas complejos que quieren mostrar diferentes tipos de información en la misma pantalla.
En la captura de pantalla a continuación, puede ver la versión de escritorio de Booking.com. Cuando los usuarios se desplazan en el formulario de búsqueda, se obtiene el resto del contenido. cubierto por una capa grisácea para ayudarlos Manténgase enfocado en el proceso de llenado de formularios.
Dar feedback a los usuarios
Dando el comentarios correctos en el momento adecuado puede mejorar significativamente la experiencia del usuario.
En el diseño de la forma, hay dos tipos de comentarios de los usuarios:
- Feedback dado antes de formulario de presentación - a fin de que reducir errores y tasas de abandono de forma, como los rastreadores de progreso, la validación de entrada instantánea que recompensa inmediatamente a los usuarios por la entrada correcta o información sobre herramientas de ayuda
- Feedback dado después formulario de presentación - para que los usuarios sepan cometieron un error, tales como mensajes de error
El tipo de comentarios de los usuarios que nuestros usuarios necesitan depende en gran medida de las características de nuestro público objetivo y del objetivo de nuestro sitio.
Ejemplo: Rastreador de progreso
Los formularios de más de una página, como las encuestas y la mayoría de los formularios de pago electrónico de e-Commerce, pueden aprovechar el rastreador de progreso patrón de diseño. Los rastreadores de progreso dan una retroalimentación visual instantánea a los usuarios sobre su estado, y aliéntelos a seguir adelante con el proceso.
La aplicación web del creador de la encuesta SnapSurveys muestra un pequeño rastreador de progreso justo arriba de los botones de envío para que los usuarios puedan naturalmente, vislumbrarlo.
El rastreador de progreso no usa ninguna etiqueta, sino la forma en que está diseñado aclara su meta - el número de círculos indica el número de pasos, los pasos ya ejecutados se vuelven azules, y los usuarios pueden ver fácilmente cuántos pasos les quedan por delante.
Ejemplo: Validación en tiempo real
El minorista de cosméticos Body Shop utiliza validación en tiempo real en su formulario de perfil de usuario para eliminar errores y mejorar la UX del proceso de finalización del formulario.
Las entradas se verifican mientras los usuarios completan el formulario, y las respuestas correctas e incorrectas se indican inmediatamente con iconos fácilmente distinguibles un poco más a la derecha pero aún en el área visible.
Ejemplo: Tooltips expresivos
Microcopia comprensible También es una parte esencial de los comentarios exitosos de los usuarios en el diseño de formularios. Por definición, la microcopia de un sitio web consiste en pequeños trozos de texto Se utiliza en diferentes elementos: etiquetas, botones, mensajes de error, información sobre herramientas, etc..
En su formulario de inicio de sesión, el grupo bancario de Barclay responde a las preguntas que los usuarios potencialmente pueden hacer con la ayuda de información sobre herramientas bien diseñada que incluye microcopia fácil de entender.
¿La información sobre herramientas se oculta detrás de poco? iconos no distraer a los usuarios que saben completar el formulario de inicio de sesión, pero estar siempre presente para usuarios que no están seguros.
Algunas de las informaciones sobre herramientas incluso contienen Un poco visual de una tarjeta de débito anotada. para que los usuarios puedan encontrar fácilmente los datos que tienen que ingresar en el formulario de inicio de sesión.
