Diseño de bloques de construcción: una estrategia de diseño modular para UXers

Un artículo que ayuda a llenar los vacíos de los modelos de diseño modular desde una perspectiva UX.

Comenzaré con una historia

Si odias las historias, deberías saltarte esta parte. Se trata de una diseñadora de experiencia de usuario que se encargó de defender una estrategia de diseño modular para su organización. Ella tiene cabello castaño corto y ojos azules. Si aún no lo ha adivinado, ese diseñador de experiencia de usuario soy yo.

Hace aproximadamente ocho meses, nuestro equipo se unió a una estrategia de diseño modular llamada UX orientada a objetos (OOUX). A diferencia de otros sistemas modulares de amplio alcance, OOUX le pide que se concentre en modularizar sus tipos de contenido principal, lo que OOUX llama objetos, y que analice cómo estos objetos se relacionan entre sí. Este proceso ayuda al equipo de diseño a exponer instancias inherentes de navegación contextual y empujar hacia módulos de IU consistentes.

Bueno ... eso es genial para diseñar arquitecturas de información y bibliotecas de patrones, pero ¿qué pasa con el diseño de experiencias? Después de todo, movilizar tu contenido es solo la mitad de la batalla. Si va a estar en primera línea de UX, debe preguntarse por qué y cómo.

El por qué y el cómo

Puede que te estés diciendo a ti mismo: "¡no me digas por qué y cómo! Soy un investigador de UX, ¡maldito conejo! Yo como por qué y cómo para el desayuno. Así que déjame explicarte.

No estoy hablando de estrategia a nivel de características. No estoy hablando de flujos de proceso, estructuras alámbricas y prototipos. Estoy hablando de la estrategia a nivel de aplicación. ¿Sabes, lo que siempre deberíamos estar haciendo, pero de alguna manera nunca tenemos tiempo? Y estoy hablando de hacerlo una parte integral de nuestro enfoque de nuestras otras estrategias, como el diseño modular.

Para darle un poco más de contexto, hablemos con un ejemplo. Supongamos que estamos diseñando una aplicación de citas donde una de las piezas centrales de contenido es un perfil. Con el diseño modular, nos preguntaríamos: "¿dónde podría aparecer este contenido en la interfaz de usuario?", Y según nuestra respuesta, diseñaríamos módulos para cada uno de esos escenarios. Quizás diseñaríamos un perfil que se pueda mostrar en una lista o un perfil que ocupe toda la pantalla. Arquitectura informacional. Patrones. Cheque cheque.

Un

Pero ahora que hemos decidido qué, ¿qué sucede cuando inevitablemente nos damos cuenta de que debemos pensar por qué alguien quiere ver un perfil en particular en primer lugar? ¿Y cómo aparecería ese perfil para ese individuo? ¿Implementamos esas estrategias después del hecho y esperamos que nada se rompa?

Espero que estés sacudiendo la cabeza, porque la respuesta es un rotundo no.

En lugar de saltar de cabeza al diseño de nuestros módulos, debemos construir un marco estratégico que pueda ayudar a impulsar nuestros esfuerzos de diseño desde todos los ángulos. En lugar de definir la cara de nuestro contenido, lo que aparece en la interfaz de usuario, debemos comenzar definiendo cómo y por qué eso respalda ese contenido. Esto se llama diseño de bloques de construcción.

Ingrese el diseño del bloque de construcción

En lugar de pedirle que piense primero en el contenido de sus módulos, como otros modelos, el diseño de bloques de construcción le pide que se concentre en la estrategia detrás de ese contenido.

En el diseño de bloques de construcción, deje que la estrategia proporcione el marco para el diseño; no de la otra manera.

Solo después de haber definido sus estrategias básicas de UX, el marco que sostiene su contenido, puede comenzar a diseñar cómo se representará ese contenido en la interfaz. La estrategia de "panorama general" para cada pieza de contenido central es su componente básico. Juntos, sus bloques de construcción definen la UX de su producto.

El diseño de bloques de construcción es un diseño modular para UXers.

Bloque de construcción anatomía

Para comprender mejor este enfoque para crear contenido significativo y estructurado, volvamos al ejemplo de la aplicación de citas. Ahora que identifiqué una parte del contenido principal en mi aplicación, un perfil, es hora de analizar e identificar qué estrategias podrían influir potencialmente en cómo se diseña este bloque. Al explorar la relación entre otras iniciativas estratégicas y nuestro contenido, podemos pensar de manera más crítica sobre cómo abordamos el diseño y la entrega de esta información.

La anatomía del bloque de perfil está empezando a tomar forma.

Al explorar las relaciones entre las estrategias de nivel de aplicación, es mejor comenzar en un nivel alto y avanzar hacia abajo. Por ejemplo, si identifico personas como un componente principal de mi estrategia, podría desglosar esta estrategia aún más identificando:

  • las personas específicas que interactúan con los perfiles;
  • donde en la aplicación están interactuando con este contenido;
  • su contexto de uso;
  • las acciones centrales que toman en los perfiles;
  • y con qué frecuencia acceden a este contenido.

Podría verse más o menos así:

La relación persona-perfil proporciona más contexto sobre cómo se ve y se siente la cara de mi bloque de perfil.

Una vez que he dado un poco más de contexto a por qué este contenido es valioso para un tipo específico de usuario, puedo comenzar a pensar de manera más crítica sobre qué acciones deben priorizarse, cómo se debe estructurar el módulo para promover patrones de comportamiento específicos de la persona, y en qué parte de la experiencia se debe entregar este contenido.

Esta técnica permite a los diseñadores centrarse en las cosas que importan y no quedar atrapados en el atractivo visual, la seducción de la interacción y otros patrones de diseño de interfaz que se ven bien, pero no admiten el comportamiento real del usuario.

Si repito este ejercicio en términos de una segunda iniciativa estratégica, se obtendrán ideas adicionales. Dependiendo del número y la complejidad de las iniciativas estratégicas que tenga implementadas, esto puede convertirse rápidamente en un proceso que requiere mucho tiempo. Recomiendo comenzar con no más de dos estrategias.

Entonces ahí lo tienes. Un ejemplo de cómo mojarse los pies con el diseño de bloques de construcción. Si cree que este sería un ejercicio útil para su equipo de diseño, consulte la Guía de inicio rápido a continuación para obtener algunos consejos adicionales. Y, por supuesto, me encantaría escuchar tu opinión sobre todas las cosas modularizadas. Agregue sus comentarios a continuación o comuníquese con LinkedIn.

Guía de inicio rápido

Descubrí que muchos modelos de diseño modular no son suficientes para dar a sus lectores tareas pendientes accionables, así que permítanme aclarar cómo proporcionar esa valiosa información:

Paso # 1: Inventario de estrategia.

Hacemos inventarios de contenido y componentes, entonces ¿por qué no un inventario de estrategia? Haga una lista de todas las estrategias de nivel de aplicación que tenga implementadas. Los ejemplos incluyen: Personas, datos, contexto de uso y diseño del entorno humano, capacidad de respuesta, etc. Esta es una buena oportunidad para hacer una pausa y preguntar "¿tenemos una estrategia sólida para nuestra aplicación?" Si la respuesta es no, es hora para llegar al trabajo.

Para hacer: reunir a los miembros del equipo para crear de forma independiente sus propios inventarios de estrategia.

Paso 2: define tu contenido principal.

Estas son las cosas sobre las que sus usuarios realizan acciones en su aplicación. Para resolver esto, bloquee un tiempo para una sesión de lluvia de ideas con su equipo. Hágase preguntas como: “¿Qué buscan mis usuarios? ¿Ver? ¿Descargar? ”Una vez que identifique un contenido básico, escríbalo en un papel y cuélguelo en la pared.

Para hacer: Realice una sesión de lluvia de ideas inicial con su equipo.

Paso # 3: Defina el cómo y por qué.

¡Ahora que ha identificado sus estrategias de nivel de aplicación y contenido principal, es hora de unir los dos! Regrese a su sala de lluvia de ideas para una reunión de seguimiento y asegúrese de que su equipo traiga sus inventarios de estrategias. Para esta parte del proceso, haga que su equipo coloque notas post-it de estrategia en cualquier contenido central donde esa estrategia pueda tener un impacto.

Para hacer: Realice una sesión de lluvia de ideas de seguimiento con su equipo.

Paso 4: la anatomía de un bloque de construcción.

Es hora de dividir y conquistar. Asigne a los miembros del equipo un puñado de tipos principales de contenido, o bloques de construcción, y pídales que repitan la anatomía de este contenido.

Para hacer: Asigne a cada miembro del equipo con varios tipos de contenido. Ese miembro del equipo debe definir la anatomía de ese contenido.

Paso # 5: alinear, alinear, alinear

Como paso final, reúna a la pandilla en forma de una presentación discreta donde cada miembro del equipo presente la anatomía de sus componentes básicos. Ahorre tiempo al final para preguntas, alineación y decisiones sobre los próximos pasos para impulsar los componentes estratégicos individuales de cada componente básico.

Para hacer: Programe un tiempo para que los miembros del equipo presenten su anatomía de bloques de construcción.

Este artículo es presentado por RUXERS. RUXERS es una comunidad de líderes de experiencia de usuario real que comparten y discuten lo último en diseño, experiencia de usuario, usabilidad e investigación. Estamos en Twitter, ¡únete a nosotros!