Crear Diagrama de Flujo UX Usuarios e Interacción. Vamos a mostrarte todas las ventajas de organizar y gestionar la experiencia del usuario de manera adecuada. Para así potenciar y llevar al éxito tus proyectos de desarrollo web y apps.
Anticipe los movimientos de los visitantes y cree una mejor experiencia de usuario en sus sitios web y apps desde el principio.
Crear Diagrama de Flujo UX Usuarios e Interacción.
¿Qué es exactamente un flujo de usuarios? Visualmente, es un poco como una alfombra de baile. Pie derecho aquí. Pie izquierdo por allí. Ahora juntalos, voltearlos y repitelos. Sin saber bailar, todavía puedes pararte en esta colchoneta y moverte con tus pies caminando en los lugares correctos en el orden correcto. Un flujo de usuarios es solo eso. Un baile suelto pero coordinado con tu web. Es importante que sepa por dónde va a caminar un usuario y en qué orden para que el baile salga bien.
Trabajar a través de las expectativas de los usuarios y crear una experiencia de usuario positiva en general puede ser una mezcla complicada de puntos de datos, casos de uso, esquemas y prototipos para conectar los puntos antes de que el proyecto esté completamente desarrollado. Con tantas partes móviles, es fácil que se tropiece o que se entienda mal la visión del proyecto.
A diferencia de un diseño que muestra con que interactúa un usuario después del desarrollo, la función del flujo de un usuario es establecer las reglas básicas de lo que representarán los esquemas y diseños posteriores. Es el documento de estrategia para diseñar cómo fluye el usuario de un punto a otro.
Lo que Necesitas para un Flujo de Usuario Perfecto.
Ya sea que trabaje para una agencia o directamente con un cliente como freelancer, probablemente no sea ajeno a la confusión que conlleva compartir diseños iniciales con un cliente. En su cabeza, comprende las complejidades de cómo cada bloque de contenido se ajusta a la experiencia general y es glorioso. Entonces le muestra a otra persona o, peor aún, al cliente y no lo consiguen ver igual.
Se cuelgan de los detalles equivocados, a menudo porque todavía no tienen la visión completa frente a ellos. Allí es donde los documentos de estrategia que describen el propósito, como el flujo de un usuario, son útiles para que las cosas sigan avanzando.
Para hacer eso, necesitarás lo siguiente:
Objetivos de Negocio. Crear Diagrama de Flujo UX.
¿Por qué quieres que alguien visite tu sitio web? Por lo general, puede obtenerlos desde su punto de contacto con una breve conversación. ¿Están lanzando un nuevo servicio, producto o tratando de generar tráfico para un área específica del sitio? Cuanto más granular puedas ser, mejor. Los objetivos conducen a la responsabilidad de todos los lados y beneficiarán a los usuarios.
Objetivos del Usuario.
¿Por qué alguien visita su sitio web? Sea reacio a tomarlos directamente del cliente a menos que hayan realizado pruebas de usuario o algún tipo de investigación basada en datos para respaldarla. De lo contrario, terminará con los mismos objetivos comerciales con un giro diferente.
Puntos de Entrada y Tipos de Usuarios.
Según los datos, ¿dónde están aterrizando los usuarios en este momento? ¿Los usuarios suelen aterrizar en una publicación de blog? ¿En una pieza de cartera o un producto destacado? Más importante aún, ¿cómo están llegando?
Si el tráfico orgánico se dirige principalmente al blog, esos usuarios pueden fluir entre páginas secundarias o terciarias de manera diferente a la de alguien que viene de un sitio web de referencia, redes sociales o una campaña de correo electrónico. Es posible que deba mapearlos de manera diferente para mostrar adecuadamente el flujo.
Yellow Brick Roads.
¿Cuál es el camino ideal para que los usuarios viajen entre páginas para cumplir con los objetivos comerciales y de los usuarios? ¿Para obtenerlos desde el punto de entrada hasta el destino basado en resultados? A medida que los usuarios fluyen de manera no lineal, ¿cuáles son los casos en los que los usuarios pueden fluir?
Por ejemplo, si su objetivo es una página de destino de una entrada de blog que hace clic en una página de servicio y luego en la página de contacto, ¿dónde podrían perderse algunos usuarios? ¿Algunos usuarios terminan en la página acerca de? ¿A dónde van desde allí? Haga un mapa de esos casos extremos y cómo se derivan de sus escenarios ideales.
Puede extraer los dos últimos puntos con Google Analytics y la función de Explorador de usuarios para las rutas de flujo de usuarios individuales o la sección Flujo de usuarios para ver una vista de las rutas de tendencias para todos los usuarios del sitio. Vale la pena familiarizarse con ambos.
Piensa en la alfombra de baile. ¿Donde los usuarios colocan sus pies primero (página de destino)? ¿A dónde va cada pie a continuación (página dos, tres, cuatro, etc.)? Demuestre eso en un diagrama de flujo para cada tipo de usuario u objetivo.
Complementos.
Hay muchos complementos, marcos o soluciones de software que pueden usarse para crear diagramas; echemos un vistazo a lo que debe de ser en un flujo de usuario.
- Fácilmente compartido e impreso. Esto puede parecer una obviedad, pero le sorprendería la frecuencia con la que las personas imprimen diagramas que no se pueden leer. Si hay demasiados pasos o demasiado texto para caber claramente en una impresión de 8.5 x 11 pulgadas, está complicando las cosas.
- Cerrar la brecha de comunicación entre clientes, partes interesadas, diseñadores y desarrolladores. Los flujos muestran cómo un usuario navegará e interactúa con el sitio saltando entre páginas. Esto es importante para proporcionar un marco para que todos puedan unificar su comprensión hacia adelante.
- Muestre las rutas hacia cada negocio prioritario y objetivo del cliente. Las rutas comunes de puntos de entrada y una ruta optimizada que ofrece oportunidades perdidas para contenido clave. Para mayor claridad, esto no sucede en un solo flujo. Esto será múltiples flujos independientes.
Con la participación de las partes interesadas, puede tomar estos documentos de flujo de usuario y usarlos para informar a los diseñadores que crean esquemas para asegurarse de que sigan las estrategias de experiencia del usuario principal. Se pueden tratar como una lista de verificación para validar que el proyecto cumple los objetivos en cada paso.
Expandir los Flujos de Usuarios en Wireframes. Crear Diagrama de Flujo UX.
La mayoría de nosotros tenemos experiencia con wireframes de alguna forma. Los wireframes se utilizan para representar la estrategia detrás del diseño de un sitio web. A veces, se entregarán a los desarrolladores para comenzar a construir los huesos de la infraestructura. Son el plano para el construcción. Ayudan a las partes interesadas a comprender el «por qué» de la estrategia sin que se le enreden en detalles como fuentes, colores o contenido.
Muchas veces, alguien responsable de la experiencia del usuario o del diseño de un proyecto saltará directamente a la estructura alámbrica porque construyen su propio modelo mental de flujo de usuario. El problema con eso es que corren el riesgo de internalizar la estrategia, aplicar sesgos imprevistos, reutilizar ideas antiguas y pueden convertirse en un cuello de botella entre el diseño y la comunicación del diseño.
La comunicación clara es primordial. Los flujos de usuarios ayudarán a mitigar esos riesgos porque transmiten una comunicación estructurada. Añade una capa de puntos de control.
Hay varios niveles de fidelidad visual cuando se trata de wireframes. Algunos prefieren wireframes con plantillas de baja fidelidad que pueden colocar en su lugar para representar la arquitectura de información general de una página determinada.
Otros prefieren wireframes de alta fidelidad que son muchos diseños pero sin la fuente, copia, colores e imágenes adecuados en su lugar. Es importante conocer a su audiencia y qué usar. Siendo realistas, si está trabajando con flujos de usuarios, debería pasar a una estructura de mayor fidelidad que luego se convierte en un prototipo más fácilmente.
Comenzar en Papel.
Es una buena idea comenzar en papel, pizarra o alguna herramienta de dibujo. Esto le permite concentrarse en la ideación rápida de soluciones potenciales para áreas problemáticas y mantener al usuario en el camino ideal.
Para comenzar, necesitará una lista de cada página para diseñar y construir en el sitio web: inicio, acerca de, lista de servicios, etc. Eso actúa como su lista de verificación para asegurarse de que no se pierda nada. Comience con bocetos aproximados para cada uno de ellos según los objetivos que haya descubierto anteriormente.
¿A dónde va la navegación? ¿Cómo vas a transmitir los objetivos de negocio en la página de inicio? ¿Está siguiendo una cuadrícula de 12 columnas para la velocidad de comprensión de la estructura con un determinado grupo demográfico o es un sitio interactivo más progresivo que puede proporcionar un poco más de libertad expresiva? Aquí es donde se determina la mejor manera de alcanzar los objetivos y se construye sobre una base sólida
Bocetos.
Una vez que se hayan completado esos bocetos, seleccione uno de sus flujos de usuarios. Por ejemplo, si la ruta ideal es una página de destino de una entrada de blog en la que el usuario haga clic en una página de servicio y luego en la página de contacto, pruébelo con sus wireframes. Mire la página de destino de su blog: ¿cómo encontraría un usuario la página de servicio según su estructura? ¿Está limpio? ¿Es realmente una prioridad en el diseño de esa página o es simplemente otro enlace escondido en la barra lateral, pie de página o navegación?
El flujo de usuarios se convierte en un auditor para su trabajo, el comprobador de hechos imparcial para sus wireframes. Aún mejor, cuando puede mostrar a un cliente que ha conectado todos los puntos que consideró una prioridad, se sienten muy satisfechos con el trabajo en cada paso. Les recuerda por qué lo contrataron para hacer esto en primer lugar. Es un alivio y es probable que comiencen a establecerse en su proceso completo.
Si no demuestra que ha proporcionado una solución para esos objetivos o una manera de aliviar los puntos débiles existentes, cada fase de su proyecto dependerá en gran medida de la confianza. Incluso con los mejores de nosotros, eso solo puede llevarte hasta el momento de comentarios como ‘¿por qué no nos dimos cuenta de eso?’ aparezcan en tus conversaciones.
Es por eso que seguir un proceso como este y apoyar decisiones con datos y enfoque es tan crucial.
Prototipos Interactivos. Crear Diagrama de Flujo UX Usuarios e Interacción.
Ahora que ha validado la implementación de Wireframe con flujos de usuarios, es hora de convertirlos en prototipos interactivos. Básicamente, se trata de archivos de imagen estática en los que se puede hacer clic que le permiten saltar a otro archivo de imagen para dar la impresión de navegar por un sitio web.
No solo son excelentes para que los clientes experimenten, sino que también es muy importante asegurarse de que sus desarrolladores y diseñadores estén en la misma página. Esa gran idea de diseño en realidad puede agregar 100 horas de tiempo de desarrollo y estar fuera del alcance.
Es posible que usted o su equipo de diseño tengan una visión muy clara de cómo evolucionará este conjunto de tramas en las próximas semanas. Tal vez incluso esté utilizando los esquemas en un diseño y prototipado completos. Eso no es raro. Pero un problema persiste.
Esos estados flotantes sutiles y microinteracciones que apoyan una experiencia de usuario intuitiva están ocultos dentro de la mente de alguien. Un actor no ve esa visión todavía, pero los prototipos pueden ayudar.
Software Fundamental.
Los prototipos pueden venir en varias fases. Una opción es Wireframe.cc debido a la simplicidad de crear prototipos que se pueden compartir y que se centran en las rutas de los usuarios entre las páginas y las interacciones clave o superposiciones.
Suelta las imágenes existentes y dibuja puntos calientes sobre los enlaces. La creación de interacciones de baja fidelidad le permite compartir un prototipo en una hora, dependiendo de la complejidad.
Otros pueden sugerir el uso de Mockflow, que es también una gran opción para mostrar elementos interactivos de un diseño más allá de las transiciones de página. Lo importante es conectar las páginas para crear una experiencia en la que alguien puede hacer clic y comprender la visión.
Nuevamente, conoce a tu audiencia. Incluso con clics básicos en InVision, algunos clientes lo confunden con un sitio web incorporado. Es importante establecer expectativas. Comunique exactamente qué es lo que le está mostrando a un cliente con el prototipo y, lo que es más importante, qué tipo de comentarios está buscando en esta etapa.
¿Está buscando comentarios sobre el flujo entre esas páginas clave en el flujo de usuarios? ¿Está buscando comentarios sobre las animaciones de transición de página en el prototipo? ¿El contenido que encaja en los espacios y de dónde vendrá? Comunicar eso.
Le ayudará a crecer como profesional muy rápidamente y la calidad de su trabajo aumentará exponencialmente. Crear Diagrama de Flujo UX Usuarios e Interacción.
Conclusión. Crear Diagrama de Flujo UX Usuarios e Interacción.
Puede juzgar el éxito de este proceso al comenzar la revisión del prototipo en una página de destino clave como la del blog anterior. Pídale a alguien en la revisión del equipo de partes interesadas que haga clic en una página específica del prototipo y vea qué caminos toman.
Incluso en los casos en los que el usuario viaja por otro camino, ya que los usuarios viajan de forma no lineal, deberían poder ubicar las páginas clave que reflejan un objetivo comercial. Tu trabajo debe ser responsable de eso.
Su capacidad para mostrar el pensamiento crítico y la implementación detrás de las decisiones clave, así como la forma en que usted o su equipo han adaptado sus objetivos a una experiencia intuitiva, es crucial. Eso es lo que le permite replantear perspectivas, alejarse de las tendencias a corto plazo y obtener apoyo de las personas más importantes de la sala. Estrategia paso a paso.
¿Que opinas? Comenta y comparte. Si necesitas ayuda, contacta con nosotros. Será un placer colaborar contigo y potenciar tu proyecto… Crear Diagrama de Flujo UX Usuarios e Interacción.
