Cada vez es más común ver cómo las empresas adoptan metodologías ágiles que permiten minimizar costos, riesgos y desperdicios, valiéndose de diferentes herramientas que apoyan la construcción de productos o servicios. Pero en ocasiones, confundimos un proceso ágil con velocidad o llegamos al punto de volver el proceso como un paisaje en el que nos volcamos a construir historias de usuario o seguir herramientas, solo por cumplir o decir que estamos actualizados con el mundo ágil.
Y la definición de experiencia de usuario no se escapa de esto, pues muchas veces en el afán de poder entregar rápidamente un producto, olvidamos una de las bases más importantes que existen para la correcta definición y es el boceto. Esta herramienta tan simple, pero tan poderosa, desde tiempos primitivos ayudaban a comunicar ideas y generar valor de forma rápida.
El boceto es la expresión más temprana de una idea y tiene características como:
Desechable, rápido, oportuno y barato.
Trasladándonos al mundo digital, nos encontramos con que en un proceso creativo, esta herramienta no debería de faltarnos pues brinda la suficiente flexibilidad para que cada una de las etapas, sea cual sea la metodología que estemos utilizando, nos brinde la retroalimentación oportuna que permita generar valor constante.
La bocetación deberá contar con la cualidad de ser iterativa, y nos deberá permitir generar hipótesis que puedan ser probadas en el mundo real, incluso llegando al punto en el que podamos tomar decisiones para mejorar o incluso abandonar la idea; no es lo mismo contarle a alguien una idea y describirla con la imaginación (por más detalles y tonos que le coloquemos), que expresarla en un código universal que todos entendemos, como lo son los grafismos…
Es por esto que siempre que queramos validar alguna idea o definir cualquier tema, podemos valernos del boceto para tener esas pequeñas victorias tempranas, con las que no invirtamos más de lo necesario. Y esta validación consta de 4 momentos:
Pensar
Es donde empezamos a generar una lluvia de ideas, identificamos realmente qué queremos plasmar y definimos un alcance inicial, no hay que abarcarlo todo. Recordemos que el hacer una acción pequeña de la mejor forma, siempre termina dando como resultado un conjunto impecable.
Dentro de esta definición es crucial identificar cómo vamos a construir nuestro boceto, pues contamos con diferentes formas de plasmar, como es el caso del boceto a mano alzada, un wireframe o un prototipo funcional.
Plasmar
En este momento de la bocetación ya hemos definido nuestra herramienta de trabajo, por lo que es hora de poner manos a la obra, la principal idea es poder valernos de las figuras más básicas que logren plasmar nuestra idea, y de convenciones que agilicen el flujo de trabajo como por ejemplo el utilizar un cuadro con una x en la mitad para referenciar las imágenes, o líneas continuas para representar cuadros de texto. Lo más importante aquí no es velar por la estética, sino por la comunicación.
¿Pero qué pasa si no sé dibujar? ¿qué pasa si mis dibujos son palitos y bolitas?. Pues es aquí es donde viene el mayor reto y es eliminar de nuestra mente la idea de que todo debe ser extremadamente pulido para representar. Y es que al final nuestro objetivo no es hacer un cuadro realista, nuestra meta es hacer que los prototipos hablen, te cuenten una historia y te hagan pensar en nuevos elementos.
Y no hay mejor comunicación que la que es exitosa utilizando la menor cantidad de adornos, las ideas reales no tienen decoraciones para ser buenas, son buenas porque realmente cumplen un objetivo y para eso te aseguro que con las bolitas y palitos tenemos más que de sobra.
Detallar
A medida que trabajes en tus bocetos te darás cuenta de que querrás agregar más características y más complejidad y es por ello que es muy importante que cuando estemos en el momento de detallar el boceto, continuemos con la idea inicial de ser lo más simples posibles y valernos de referentes que nos permitan apoyar el discurso.
Un ejemplo es el tema de animaciones o efectos demasiado complicados: a menos de que sea totalmente necesario plasmarlo, podemos referenciar proyectos que utilicen ya el efecto que queremos, de este modo no construimos algo muy tedioso que luego puede que no utilicemos y bajamos desperdicios.
Un ejemplo de donde pueden encontrar referentes de transiciones y comportamientos complejos son: https://dribbble.com/ y https://www.awwwards.com/awwwards/collections/animation/; es tan simple como buscar la referencia y agregar el link a la sección que queramos presentar.
Refinar
Finalmente llegamos al momento más crucial; ya tenemos nuestras bolitas y palitos en la herramienta que elegimos, tenemos nuestras notas de referencias y detalles; luego pasamos a validar internamente lo construido. Lo que podemos hacer a través de laboratorios con usuarios o espacios con nuestro equipo de trabajo, que nos darán el suficiente feedback para volver a iniciar el proceso de bocetación o ir a alguno de los momentos anteriores.
En conclusión, no requerimos construir todo nuestro producto en un solo esfuerzo para estar tranquilos, ni requerimos gastarnos todo el presupuesto en sofisticados prototipos con animaciones, colores y todos los juguetes. Podemos realizar etapas pequeñas de validación que realmente nos permitan tener victorias tempranas, que en el peor de los casos nos habrán costado no más de una barra de grafito y un par de hojas de papel.
“La creatividad y la habilidad de plasmar ideas a través de gráficos es una habilidad humana que todos tenemos, no le temas a expresar y a ahorrar.”
Glosario de términos
El boceto, es básicamente la representación de una idea valiéndonos de la forma más básica de expresión contando con un lápiz y un papel. Para esto hoy en día contamos con diferentes plantillas base que no son más que guías que nos facilitan plasmar los elementos en el papel, pero podemos hacerlo en un libro o incluso una servilleta.
El wireframe, es una representación un poco más fiel de la idea que tenemos y puede contener, en ocasiones, detalles que nos permiten exponer transiciones o microinteracciones. Para este caso contamos con diferentes herramientas tanto en la nube como lo es Invision, balsamiq o cacoo; o aplicaciones instalables como es el caso de AXURE.
Por su parte, el prototipo funcional es la representación viva de nuestra idea a un nivel de detalle que integra funcionalidades. De los tres es el más costoso pero nos sirve cuando ya tenemos definiciones más claras o cuando requerimos entregar ideas muy completas a las diferentes áreas dependientes. Puede ser creado en html con CSS.
