Cómo diseñar un dashboard sin leer la mente de los usuarios

Emiliano Cosenza
Conversaciones de Producto
6 min readMay 26, 2017

Propuesta de una metodología que jerarquiza la información de acuerdo a las necesidades del usuario y ayuda a ofrecer el contenido justo en el momento justo.

Qué fascinante sería diseñar productos digitales con las habilidades de Charles Xavier, ¿no?

El mundo está repleto de dashboards. Son el centro de muchas aplicaciones, servicios y artefactos que usamos a diario. Los consultamos para saber qué pasó con tal o cual cosa y tomar una decisión que se convierte en una acción.

¿Falta mucho para que llegue lo que compré? ¿Cuándo se debitará la cuota del préstamo? ¿Cuánto tengo que correr para alcanzar mi meta semanal? ¿Se me terminará la nafta antes de la próxima estación de servicio?

Cuando nos ponemos a pensar en cómo diseñar un dashboard, la misión suele abrumar: debemos crear una estructura que responda todas las preguntas posibles y ofrezca sólo la información que el usuario necesita, cuando la necesita.

¿Cómo podríamos lograrlo? ¿Y si aprendiéramos a leer la mente? Bueno, sería una excelente opción. Pero, si no tenemos desarrollada esa habilidad, probemos con el Task Map. 😆

El Task Map

Es un mapa de necesidades y tareas, que muestra las preguntas del usuario y las respuestas que necesita para usar la interfaz.

Su objetivo es ofrecer una suerte de arquitectura de información, que nos permita diseñar una estructura con el contenido correcto para cada situación.

El mapa refleja un camino que empieza por lo que el usuario quiere saber, sigue por lo que debe evaluar para satisfacer ese pedido con la información que le damos y, si corresponde, qué acciones podrá hacer en la interfaz.

A quienes les gusta saber un poco más de teoría, el Task Map intenta reproducir el proceso mental que ocurre en la toma de decisiones. Pronto, agregaré aquí el link a otro post que cuente más sobre eso. 🤓

Cómo usarlo, paso a paso

El Task Map acompaña un proceso de diseño que empieza por las necesidades de los usuarios y el contenido.

No exige muchas herramientas:

  • Un Google Doc u otro software para escribir colaborativamente.
  • Algo para prototipar o diseñar en baja fidelidad.

Es una metodología de cuatro pasos:

  1. Hacé una lista de los perfiles de los usuarios, los escenarios y casos de uso.
  2. Armá el Task Map para los casos de uso principales.
  3. Dibujá pantallas para esos casos, que respondan al Task Map.
  4. Dibujá toda la historia de un caso de uso y caminala como si fueras el usuario. Usá el Task Map para revisar si algo no está respondido.

1 — Perfiles, escenarios y casos de uso

Al arrancar el Task Map, necesitaremos tener en claro los tres elementos básicos que componen toda experiencia de uso:

  • Perfiles de los usuarios
    Es el nombre del rol que los usuarios tienen en nuestra interfaz.
    Ej.: Organizador de partidos de fútbol.
  • Escenarios
    Es el contexto, la descripción de una situación que agrupa y determina tareas o casos de uso.
  • Casos de uso
    Tareas que llevarán a cumplir un objetivo concreto, en un contexto o escenario particular.

Para que la lista sea fácil de visualizar, hacela en una tabla.

✏️ Ejemplo:

Esta es una parte de la lista de escenarios y casos de uso de un perfil de usuario de WannaPlay, una app que facilita la organización de partidos de fútbol.

Modelo de tabla con la lista de escenarios y casos de uso. ✏️ Copiala y pegala en tu doc.

2 — Armá el Task map

Llegó el momento de ponerse en los zapatos del usuario y armar el mapa de necesidades y tareas.

El objetivo es pensar qué necesitará y qué información tendrá que obtener para hacer una tarea. Si tenés muchos casos de uso, no te abrumes, enfocate en los principales.

Es muy recomendable que convoques a dos o tres del equipo para hacerlo en conjunto, porque los ayudará a estar alineados en el mismo mindset.

¿Listo?

¡A arremangarse!

Para explicar cómo completar el mapa, iremos de lo abstracto a un ejemplo concreto.

Armá el mapa con este modelo, completá desde el saber al hacer.

Modelo conceptual de la tabla del Task Map. ✏️ Copiá y pegá la tabla en tu doc.

✏️ Ejemplo:

Volviendo al ejemplo del dashboard de WannaPlay, el Task Map para uno de los casos luce así:

Task Map para uno de los casos del dashboard de WannaPlay. ✏️ Copiá y pegá la tabla en tu doc.

3 — Dibujá los casos de uso del Task Map

Espero que en el paso anterior hayas obtenido ideas y definiciones de diseño para armar la estructura de interfaz.

Ahora, es el momento de plasmar esas ideas en un dibujo, en cualquier fidelidad.

Eso puede ayudarte de dos maneras:

  • A cotejar rápido que lo que estás diseñando está alineado con las necesidades del usuario.
  • A presentar ideas al team o a los stakeholders. El Task Map permite discutir, en forma ordenada, la relevancia de la información en cada caso, sin perder el punto de vista del usuario.

✏️ Ejemplo:

Al presentar un mockup o boceto junto al Task Map, podemos evaluar rápido si lo que diseñamos responde a lo que el usuario necesita saber y hacer. Podemos ver lo que falta, lo que sobra y lo que tenemos que iterar.

4 — Probá lo que diseñaste

Llegó el momento de conectar todos los puntos y poner a prueba la interfaz.

Cuando hayas terminado todos los escenarios, prototipá o dibujá de punta a punta las pantallas de cada uno.

Luego, caminá el flujo y, con el Task Map a mano, probá si…

  • El usuario encuentra rápido lo que responde a sus necesidades.
  • La información lo ayuda a evaluar y tomar una decisión.
  • La interfaz brinda la posibilidad de ejecutar la acción que necesita.

✏️ Ejemplo:

Lo más útil (y divertido) es imprimir las pantallas, desplegarlas sobre una mesa y recorrerlas con el Task Map. Podés marcar con Post-its® aquellas cosas que no están respondidas o podrían iterarse.

El ejercicio luce más o menos así:

Así fue la etapa final del Task Map, cuando diseñamos con Ezequiel Salatino el contenido y las pantallas del administrador de créditos para vendedores de Mercado Pago.

Un breve repaso final

La metodología del Task Map es una herramienta para jerarquizar la información de un dashboard o interfaces similares.

Antes de dibujar las pantallas, nos pone primero en la situación de entender cuál es la información adecuada para cada escenario de uso. Luego, nos enfoca en hacer un mapa de las relaciones entre lo que necesita saber el usuario y el contenido que le ofreceremos en cada caso.

Ese mapa nos da la posibilidad de diseñar una estructura y chequear al instante si funciona, porque veremos claramente qué tan allanado está el camino entre la información que ve, la decisión que va a tomar a partir de ella y lo que podrá hacer en la interfaz.

Al final del día, obtendremos un dashboard en el que los usuarios encuentran lo que necesitan, cuando lo necesitan. Como si les hubiéramos leído la mente. 😉

¡A probarlo!

¿Querés opinar sobre el Task Map? Sería genial, tus comentarios son vitales para iterar la metodología.

Si ya sabés que te gustó lo que leíste, recomendá el post con un aplauso 👏 😄.

Gracias infinitas a los colegas UXers que usaron el TM y/o leyeron una versión de este artículo y me dieron feedback: Ezequiel Salatino, Joaquín Lluis, Germán Gallo, Luciano Scala, Sol Degl’innocenti, María Puchuri y Sol Parnofiello.

--

--

Emiliano Cosenza
Conversaciones de Producto

UX Writer and Conversational Designer 🤖. Pannonica and BeBot.design founder. Consultant. Ex UX at Mercado Libre. Journalist and jazz lover.