🎿 📺 🏣 Flujo de usuarios: cómo crear aplicaciones y sitios populares 🤾🏻 🌕 🛌🏻

¡Hola a todos!

Soy Maxim Skvortsov, diseñador de UX / UI de Omega-R, una compañía internacional para el desarrollo e integración de soluciones de TI. Diseño y visualizo las interfaces de aplicaciones móviles y web.

En base a mi experiencia en el campo de la tecnología de la información y la experiencia de la compañía, quiero compartir mi visión y enfoque sobre el uso de una de las herramientas de diseño de diseño: el flujo de usuarios. ¿Por qué se usa y por qué es un valioso asistente para un diseñador? ¿Cómo puede verse el flujo de usuarios y cómo crearlo?

imagen

¿Qué es el flujo de usuarios?

Situación: ha encontrado una nueva aplicación que promete hacer exactamente lo que desea y presiona ansiosamente el botón de descarga. Después de un momento, se inicia la aplicación y ya está listo para comenzar. Pero primero debe registrar una cuenta, luego dar permiso a la aplicación para acceder a su ubicación y enviarle notificaciones automáticas, después de eso debe desplazarse por todo el tutorial, el acuerdo sobre el uso de datos personales, etc. La amarga verdad es que es más probable que el usuario en esta interacción cierre y desinstale la aplicación, sin importar cuán funcional sea. Por eso es tan importante optimizar la ruta del usuario en la aplicación con el flujo de usuarios.

El flujo de usuario es una representación visual de la secuencia de acciones.que el usuario realiza para lograr su objetivo . Puede cubrir una función particular o el producto completo.

Para hacer una secuencia, es necesario realizar un estudio y responder tres preguntas básicas :

Quien es el usuario?
¿Cuál es su propósito?
¿Qué pasos debería tomar para lograr esto?

Estas son las preguntas principales que a veces pueden ser difíciles de dar respuestas claras, por lo que las preguntas de apoyo pueden ayudar:

¿Para qué utilizará la aplicación el usuario?
¿Qué motiva al usuario a lograr este objetivo?
¿Cómo te ayuda la aplicación a alcanzar tu objetivo?
¿Qué puede evitar que un usuario use la aplicación?
¿Qué cualidades de un producto o servicio son más importantes para el cliente y los usuarios? ¿Cuáles son las preguntas, dudas y dudas?
¿Qué cualidades de la aplicación son más importantes para el usuario?
¿Qué información necesitan los usuarios para completar una acción?
¿Qué tipo de disparador emocional los impulsa a la acción?

En el proceso de diseño, siempre deben surgir muchas preguntas. La búsqueda de respuestas les brinda la oportunidad de considerar cada pequeña cosa desde todos los lados. Solo en este caso el resultado puede ser un producto realmente conveniente.

El flujo de usuarios es una historia sobre un usuario.

El flujo de usuario le permite observar la interacción del usuario y la aplicación a través de los ojos del usuario.

Si los sitios completos proporcionan suficiente espacio para la creatividad, entonces el desarrollo de aplicaciones móviles siempre nos obliga a buscar un equilibrio entre funcionalidad y usabilidad. Por un lado, los usuarios deben acceder fácilmente a las funciones más importantes desde la pantalla principal de la aplicación sin muchos pasos adicionales, haciendo clic fácilmente en los botones grandes. Por otro lado, cuando hablamos de aplicaciones, no se trata solo de botones.

Supongamos que está creando una aplicación para un reproductor de música. Por un lado, desea que el usuario pueda reproducir sus canciones favoritas con un solo toque. Por otro lado, necesitan una forma de determinar las pistas favoritas, buscar música nueva (posiblemente en varios lugares), controlar el volumen y ajustar el ecualizador, ordenar música, barajar la lista, leer la biografía del artista, realizar compras y tener todas las demás funciones del reproductor a mano. El usuario querrá compartir recomendaciones y listas de reproducción en las redes sociales y ver qué están escuchando sus amigos.

Si el usuario navega por la tienda en línea mientras escucha la lista de reproducción y decide omitir la pista actual, no necesita cerrar la tienda y volver a pasar por varios pasos del menú: el acceso a este botón de omisión debe estar en la misma pantalla.

Crear la aplicación más funcional no es tan difícil, pero ponerlo todo junto de la manera más atractiva y fácil de usar es una tarea mucho más difícil. Si la empresa desarrolladora no se las arregló y no creó la aplicación intuitivamente, permanecerá sin reclamar en las historias. Siempre es más fácil para el usuario descargar una aplicación más comprensible que pasar tiempo leyendo manuales y tutoriales o deambular sin parar en busca de significado.

Rol de diseñador

Imagine que está trabajando en un producto en un equipo, donde hay desarrolladores de proyectos, backend y web. Supongamos que incluso hay algún tipo de tarea técnica del cliente, que está escrita con suficiente detalle y de manera sólida. Solo queda tomar y hacer un producto.

¿Qué debe hacer un diseñador? A juzgar por el resultado esperado, dibuje todas las pantallas necesarias para que el producto final sea conveniente y hermoso, y déselo a los desarrolladores.

En general si. Pero hay una parte submarina de un iceberg. Allí se esconden muchas cosas en las que pocas personas piensan. Todos amamos las interfaces convenientes e intuitivas, amamos cuando todo funciona lógicamente y el resultado de cualquier interacción es predecible. Y para que todo esto suceda, debe resolver cuidadosamente cada detalle.

Solo para esto necesita flujo de usuarios: ayudará a determinar las formas en que los usuarios pueden lograr el objetivo, calcular escenarios positivos y negativos en la ruta elegida para lograr los objetivos de nuestros usuarios potenciales. Permite comprender si todos los procesos en el producto tienen una conclusión lógica y se construyen de manera eficiente, de modo que el usuario pase un mínimo de tiempo para lograr el objetivo.

Importante: cuanto mayor es el problema y más funciones, más escenarios necesita resolver.

Por lo tanto, el flujo de usuarios ayuda a eliminar un error común al crear una lista de funciones requeridas y simplemente al diseñar interfaces basadas en ellas. Tal enfoque es, por supuesto, posible. Pero esto puede llevar a escenarios de interacción con la interfaz que provocan que el usuario siga demasiados pasos para realizar operaciones simples.

Valor para el equipo del producto.

El flujo de usuarios ayuda en el nivel superior a coordinar escenarios con el cliente para el producto o la funcionalidad. Especialmente cuando los clientes no tienen requisitos específicos y detallados (cuando ellos mismos no entienden bien lo que quieren). En este caso, el flujo de usuarios puede dar alguna dirección a los clientes, y ya le dirán en qué lugares les gustaría cambiar la lógica al proporcionar sus comentarios, ya sea en forma de un comentario o ajustando de forma independiente el esquema actual. A pesar de que la creación de flujo de usuarios parece un proceso complicado y lento, ayuda a eliminar muchos errores durante el desarrollo del producto. Con su ayuda, como dicen, "aprovecha lentamente, pero rápidamente cabalga".

Para PM, basado en el flujo de usuarios, es conveniente iniciar tareas para los desarrolladores: es bastante obvio y transparente qué cambios deben realizarse en la lógica actual o qué nuevas funciones se agregarán.

Los probadores pueden preparar casos de uso (pruebas) y listas de verificación, ya que demuestran scripts fáciles de usar en un formato conveniente.

El flujo de usuarios es muy útil para el equipo, especialmente cuando la composición del equipo es lo suficientemente grande; no es necesario que explique por separado la lógica del trabajo. Por lo tanto, el flujo de usuarios involucra al cliente en el proceso de diseño, motiva al equipo, dirige todos los procesos de trabajo en una sola dirección, ya que cada miembro del equipo ve la imagen como un todo.

Valor del cliente

Un usuario es casi siempre el que compra o usa un producto o servicio o está potencialmente listo para hacerlo. De lo cómodo que se construya este proceso, su lealtad del usuario depende. No importa cómo compre un producto o servicio, en la oficina, por llamada, con un especialista que visite la casa, a través del sitio, a través de la aplicación, la forma de adquirirla y usarla debe ser lo más simple posible.

En cuanto a los sitios y las aplicaciones móviles, el flujo de usuarios es cómo el usuario navegará por el contenido (texto, imágenes, audio, video). El flujo de usuarios incluye la priorización de los requisitos de contenido, las barreras para la navegación y la búsqueda de las rutas más rápidas e indoloras para la acción objetivo. Esencialmente, el flujo de usuarios está directamente conectado al embudo de conversión, y la compañía de TI que usa el flujo de usuarios desarrolla automáticamente un embudo de conversión efectivo u optimiza un embudo existente.

El resultado de la asistencia que se le brindó para lograr el objetivo incorporado en el diseño gracias al flujo de usuarios es un usuario feliz e interesado. Un usuario feliz e interesado significa más tiempo en la aplicación o en el sitio, tasas de rebote más bajas, tasas de conversión más altas y una mejor experiencia del usuario.

Por lo tanto, el flujo de usuarios afecta directamente el éxito del sitio o la aplicación móvil y las ganancias del cliente. El usuario se convierte en el centro del diseño, y esto coincide completamente con el principio de la atención al cliente en el negocio.

Cómo se ve?

Nunca he visto un estándar claramente definido de acuerdo con el cual se lleva a cabo el diseño del flujo de usuarios. La representación del flujo de usuarios puede ser diferente y depende de cuán minuciosamente se necesite resolver todo. Es importante lograr su objetivo como diseñador, para que el cliente y el equipo del producto entiendan cómo el usuario tendrá acceso a una función en particular, dónde se ubicarán y cómo trabajarán.

El flujo de usuarios se puede representar como combinaciones de:

flujo de tareas
flujo de alambre (lo-fi)
flujo de pantalla (alta fidelidad)

Miremos cada uno de ellos y veamos cómo se pueden ver. Como ejemplo, tomamos la tienda en línea de electrodomésticos. Defina el usuario, su objetivo y los pasos para lograrlo.

Permita que nuestra usuaria sea una madre joven cuyo objetivo es comprar un procesador de alimentos multifuncional. Un escenario en la secuencia de pasos puede verse así:

abrir el sitio web de la tienda;
escriba en la búsqueda "procesador de alimentos";
Compara múltiples productos de los resultados de búsqueda
pon el producto que te gusta en la cesta;
realizar una compra;
pagar;
cerrar el sitio

Flujo de tareas

El flujo de tareas es una representación simple de lo que hace el usuario en cada paso para lograr un objetivo o tarea. Este es esencialmente un diagrama de flujo clásico que define esta secuencia.

imagen

Este esquema no refleja las convenciones y otros problemas que deben abordarse. ¿Y qué sucederá si los resultados de búsqueda no encuentran nada? ¿Y qué sucederá si el pago no es exitoso? Aquí, solo se presentan pasos generales que pueden involucrar muchas acciones: por ejemplo, la búsqueda se puede ampliar con muchos filtros, la ruta de pago depende de la elección de la herramienta de pago, etc.

Para dibujar un diagrama, puede usar la lista de elementos necesarios y suficientes de los diagramas de bloques clásicos que se muestran en la imagen, o usar el estándar BPMN - Está dirigido tanto a especialistas técnicos como a usuarios empresariales.

imagen

Flujo de alambre (lo-fi)

El flujo de cables es una combinación de un diagrama de flujo y tramas de alambre. Wireframe es un boceto poco detallado del diseño de la pantalla, cuyo énfasis no está en el componente visual, sino en la ubicación de los elementos, la estructura y el contenido de la pantalla.

En el flujo de cables, en lugar de elementos de diagrama de flujo, se presentan diseños de pantalla esquemáticos, con los cuales el usuario interactúa en el camino para lograr el objetivo. No es necesario centrarse en los detalles visuales y dibujar cada botón e icono. Muy a menudo, el énfasis está en los elementos de navegación en el diseño de cada página individual.

Los flujos de cables son especialmente útiles al crear pantallas móviles: los tamaños relativamente pequeños de pantallas móviles se utilizan fácilmente para reemplazar elementos más abstractos de diagramas de flujo. Los flujos de alambre son cómodos para la formación y el refinamiento de las especificaciones técnicas, pero apenas son adecuados para la fase de prueba.

Un ejemplo de tal esquema:

imagen

Flujo de pantalla (alta fidelidad)

Aquí estamos hablando de pantallas elaboradas que son comprensibles tanto para los usuarios como para los desarrolladores. Por lo general, se hace hincapié en los elementos de navegación y algunos matices de comportamiento. Se puede utilizar como documento reglamentario para aprobar el diseño de diseños.

El flujo de pantalla se puede llamar esencialmente un prototipo si le agrega interactividad. Su característica es la alta precisión o la coincidencia perfecta de píxeles: tiene en cuenta el tamaño físico de la pantalla y presenta todos los detalles visuales y tipográficos del producto. Los elementos de flujo de pantalla son en realidad diseños de pantalla de una aplicación terminada.

El cliente de la aplicación puede sorprenderse gratamente por la velocidad de desarrollo cuando le muestra el flujo de la pantalla, y puede pensar que el desarrollo está cerca de completarse. Como regla, informamos al cliente de antemano que no hay código detrás del flujo de pantalla, pero la presencia del flujo de pantalla le da al cliente una garantía de que UX y UI bien preparados serán seguidos por un código igualmente perfecto.

Ejemplo de flujo de pantalla: a

imagen

continuación se muestra un ejemplo de cómo se vería un híbrido de diagramas de flujo clásicos, imágenes esquemáticas y diseños finales en conjunto.

imagen

Como saben, lo que requiere más tiempo es lo más elaborado: el flujo de pantalla. Parece una aplicación que funciona y está lista para prototipos interactivos, pruebas, nuevas iteraciones, aprobación y transferencia a desarrolladores. Existen muchas herramientas de automatización para el diseño del equipo de flujo de usuarios, incluidas Overflow, Miro, Flowmapp y otras.

Por lo tanto, el flujo de usuarios, que cubre todo el producto, sistematiza y estructura el proceso de su creación, orienta al equipo del producto a las necesidades del usuario y su comprensión común, y le permite crear un producto extremadamente comprensible e intuitivo mediante el análisis de escenarios de usuario. Todo esto no solo acelera significativamente la velocidad de desarrollo, sino que también profundiza la interacción con el cliente. El flujo de usuarios hace que una empresa de TI siempre piense en los requisitos comerciales del cliente para crear una aplicación más eficiente y exitosa de lo que es posible dentro del presupuesto y el tiempo asignados sin usar el flujo de usuarios.

Flujo de usuarios: cómo crear aplicaciones y sitios populares