A/B Testing UX para marcos basados ​​en componentes

Familiarizarse con la codificación puede ser de gran beneficio para los diseñadores. En consecuencia, muchos se sumergieron y aprendieron a trabajar con código (o al menos a hablar su idioma hasta cierto punto) como una forma de ser más efectivos al colaborar con ingenieros. JavaScript, posiblemente el lenguaje de secuencias de comandos favorito de la web, tiene una comunidad sólida que está dando forma al futuro de la web con los marcos que está creando.

Como resultado de su estructura y restricciones técnicas, los marcos como Vue.js, React.js y Material UI son importantes para que los diseñadores los consideren porque actúan como bloques de construcción para sistemas de diseño robustos. Además, saber cómo funciona el código también es útil cuando se facilitan técnicas de diseño basadas en datos en un entorno de desarrollo como las pruebas A/B.

En un proyecto reciente para una startup que creaba una plataforma de gestión de pacientes para conectar a las personas con los profesionales de la salud mental, descubrimos que configurar y administrar las cuentas de los pacientes con la menor fricción posible era clave para varios de nuestros asesores clínicos. Centrarse en crear una experiencia de navegación intuitiva para los perfiles de los pacientes fue crucial, al igual que configurar un flujo de usuario óptimo para crear, editar y asignar actividades de bienestar a los pacientes.

Al analizar el proyecto con el líder técnico, se determinó que, fundamentalmente, la aplicación era bastante simple: los médicos necesitaban la capacidad de crear y editar perfiles de pacientes, ver una biblioteca de actividades de bienestar y asignar lecciones a los pacientes.

El equipo decidió alinear el diseño del proyecto con el marco Material UI, utilizando elementos básicos como ventanas emergentes modales, tarjetas gráficas, botones activos/inactivos, listas de acordeón y una serie de notificaciones de advertencia y éxito. Una vez definidos los componentes que conformarían los elementos base, el equipo de producto ofreció diversas opiniones sobre el diseño de la aplicación.

Durante las discusiones sobre el diseño de la interfaz de usuario del proyecto, el desarrollador explicó la diferencia entre los componentes funcionales y de visualización y cómo los componentes funcionales controlan el flujo de datos de una aplicación, mientras que los componentes de visualización son relevantes para la interfaz de usuario y el diseño.

En pocas palabras, los componentes de visualización definen el lenguaje visual de una aplicación y los componentes funcionales ayudan a darles vida .

Esta estructura ofrece posibilidades únicas a los diseñadores porque, por lo general, el código relacionado con la administración de la lógica de una aplicación está aislado en un archivo separado del que controla el diseño de la interfaz de usuario. Si se hace correctamente, este enfoque del diseño de software garantiza una base de código robusta y modular que permite un proceso basado en pruebas.

¿Se podrían probar características idénticas en diseños alternativos con un mínimo esfuerzo de ingeniería? La respuesta es "Sí", y si se hace con un método A/B al principio del proceso, se integrará en un ciclo de vida de desarrollo de productos esbeltos. (El desarrollo de productos Lean es un derivado del concepto japonés de kaizen, la filosofía comercial de realizar mejoras incrementales en los flujos de trabajo, prácticas, técnicas y, en este caso, productos).

Eric Ries, emprendedor en serie y autor, analiza una guía práctica para el ciclo de vida de desarrollo de productos lean en su libro The Lean Startup . El método sigue un flujo de trabajo de creación de productos con una hipótesis clara, prueba de lo que se creó e iteración en función de lo que se aprendió.

El método Lean Startup

Definición del enfoque de prueba A/B

Las pruebas A/B son un componente central del conjunto de herramientas de cualquier profesional de UX experimentado. Su papel en el ciclo de vida del desarrollo de software es ayudar a mejorar la usabilidad de las aplicaciones. En combinación con los datos de mapeo de calor, los equipos pueden obtener información valiosa sobre el comportamiento del usuario, especialmente cuando se trata de puntos de fricción dentro del flujo de una aplicación.

Antes de comenzar con las pruebas A/B, aquí hay algunas preguntas para enfocar el proceso:

• ¿Cómo se utilizan las pruebas A/B en UX?
• ¿Qué métodos de análisis A/B están disponibles?
• ¿Por qué diseñar pruebas A/B durante el wireframing?
• ¿Para qué estamos probando?

El método más común de prueba A/B a escala es una prueba dividida que muestra versiones ligeramente diferentes de una aplicación o sitio web para usuarios reales. Una prueba dividida a menudo está fuera del alcance y/o del presupuesto para una empresa nueva o pequeña. Sin embargo, existen alternativas a las pruebas divididas a gran escala que son más accesibles e incluyen: entrevistas en persona, grupos focales y servicios en línea que lo conectan a una red de usuarios de prueba.

Diseño basado en pruebas A/B

Durante el proceso de wireframing, es importante considerar las posibilidades de las pruebas A/B desde una perspectiva de diseño y navegación. Las variaciones simples de los componentes de la pantalla pueden cambiar fácilmente la forma en que se presenta la información. Los marcos basados ​​en componentes le dan la libertad de experimentar cómo se organiza el contenido sin tener que volver a diseñar la funcionalidad principal de un producto.

Como cualquier esfuerzo de diseño, las pruebas A/B efectivas deben seguir una metodología claramente definida. Primero, decida qué variable está probando. A continuación, defina qué constituye el éxito. Termine evaluando los datos y determine cuál debe ser el siguiente paso.

Por ejemplo, en un caso, se probó la jerarquía de diseño. El diseño A estaba formado por una cuadrícula de dos columnas que tenía el componente de lista de pacientes a la izquierda de la pantalla y el componente de perfil de paciente a la derecha. El diseño B tenía una lista de pacientes de una sola columna en la que se podía hacer clic para acceder al componente de perfil del paciente.

Nuestra primera prueba fue la claridad. Preguntamos a los asesores clínicos en sesiones de entrevista cuál de los dos diseños se sentía más organizado. Contrariamente a las suposiciones internas, se indicó claramente que la cuadrícula de una sola columna era la solución de diseño más intuitiva. Nuestros asesores sintieron que la combinación de una lista de pacientes y un perfil en la misma pantalla se sentía "ocupada" y "desordenada". Por el contrario, las palabras utilizadas para describir el diseño de cuadrícula de una sola columna fueron claras y "limpias".

El "modelo de caja de componentes"

Para esta aplicación web utilizamos React, un framework basado en conceptos de gestión de estados y componentes modulares. React es una biblioteca de JavaScript declarativa, eficiente y flexible para crear interfaces de usuario. Le permite componer interfaces de usuario complejas a partir de piezas de código pequeñas y aisladas llamadas "componentes". Esta modularidad se traduce en flexibilidad cuando se trabaja en un producto que involucra tanto a desarrolladores como a diseñadores.

Llegué a entender este marco con la inspiración del modelo de caja HTML+CSS. El modelo de caja de componentes ofrece una modalidad organizativa con la que crear bloques de construcción para una aplicación. Es especialmente adecuado para desarrollar un sistema de diseño para proyectos en rápida evolución.

Para mantener la agilidad del pensamiento de diseño, se puede seguir un conjunto de principios de diseño especialmente adecuados para un ciclo de vida de desarrollo de productos lean.

• Primer principio: Agrupar contextos y acciones similares .
• Segundo principio: Deje que la arquitectura de la información ayude a simplificar el flujo de "estado" entre los componentes.
• Tercer principio: diseñar sistemas visuales escalables para simplificar la forma en que los desarrolladores entienden e implementan los diseños.

Agrupación de contextos similares

Considere el modelo mental de sus usuarios: agrupe resultados y acciones similares en función de su "contexto de uso". Considere si los usuarios necesitan crear, leer, actualizar y eliminar elementos dentro de cada contexto, y si necesita proporcionar comentarios sobre sus acciones. Al definir una prueba A/B para un escenario de uso específico, tenga en cuenta el diseño, cómo acceder a las entradas y los métodos de navegación.

Simplificar el Flujo de Interacción de “Estado”

En React, el flujo de "estado" se refiere a cómo se mueve la información a través de una aplicación, cómo los componentes ayudan a organizar los datos y cómo se muestran. Por lo general, el estado fluye hacia los componentes de visualización desde los componentes funcionales que actúan como contenedores. Los diseñadores pueden prepararse para las pruebas A/B describiendo de manera preventiva cómo los componentes funcionales pueden alterar el diseño de una aplicación cambiando la forma en que se evalúan los componentes de visualización.

Desarrollar sistemas de diseño robusto

El uso de componentes de visualización para desarrollar estándares para elementos visuales como tipografía, botones, entradas, modales y tarjetas ayuda a proporcionar los componentes básicos para un lenguaje de diseño estandarizado. Los sistemas visuales robustos tienen la flexibilidad de mantener a los diseñadores y desarrolladores de UX en la misma página sobre los componentes a los que se hace referencia dentro de los wireframes.

Resumen

El éxito del diseño basado en pruebas A/B está ligado a la sinergia entre el producto y los equipos técnicos. Los diseñadores que busquen adoptar este método deben ser precisos sobre dónde y cómo realizar las pruebas. Dedique tiempo a desarrollar una hipótesis y determinar lo que espera descubrir. No te distraigas. Apéguese a él, es muy fácil desviarse de su método.

Este proceso nunca termina realmente y evoluciona a medida que crecen los productos. Los diseñadores que emplean una estrategia de desarrollo de productos basada en pruebas deben aprovechar las oportunidades de aprendizaje que surgen a lo largo del ciclo de vida de desarrollo de un producto.

Los componentes, al igual que los sistemas de diseño, tienen que ver con la modularidad y la reutilización de patrones, no con el diseño o el estilo. Desde la perspectiva de un diseñador, la flexibilidad para probar, refinar y mejorar productos con pruebas A/B puede ayudar a desarrollar productos más centrados en el usuario, lo que en última instancia conduce a un mayor éxito.

•••

Lecturas adicionales en el blog de diseño de Toptal:

• Aprovechando los modelos mentales en el diseño de UX
• Pruebas de UX para las masas: manténgalo simple y rentable
• La guía fundamental para la usabilidad móvil
• El valor de la investigación de usuarios
• Comprender los sistemas y patrones de diseño