5 pasos para crear un buen producto

¿Para qué quiero leer esto? Para aprender mi método personal a la hora de crear un buen producto. Son 5 pasos que creo básicos y esenciales.

Actualización: este artículo se convirtió en una presentación para el BarCamp Rosario 2011.

Como sabrán hace rato que desarrollo mis propios sitios web pero no fue hasta hace un tiempo que me listé 5 puntos fundamentales a la hora de crear o modificar uno. Es muy probable que todos, en mayor o menor medida, sigan los mismos pasos pero suele suceder que en el momento nos salteamos alguno o bien no lo tengamos en cuenta.

Aprendí la importancia de las checklist o listas de verificación a los golpes, en particular desde que me desempeño como Arquitecto de producto en Sonico. Es muy frustrante presentar una idea que llevó su tiempo desarrollarla y descubrir luego errores por omitir uno de estos pasos.

La lista es la siguiente:

Cuando ya tenemos la idea de lo que queremos armar es necesario listar punto por punto cada detalle importante de la misma. De que forma va a interactuar el usuario, que información se va a mostrar, las reglas para determinar el contenido, etc. Por ejemplo en una página de música:

El paso del cliente: Para los que trataron con clientes notarán una similitud con, en el mejor de los casos, la descripción del producto que te entregan para que desarrolles.

Nota: Este paso es uno de los más difíciles, por lo general se escuchan muchas ideas pero llegar a especificar los puntos que la componen sucede en menos del 1% de los casos.

Cuando ya tenemos la información que queremos mostrar es necesario ubicarla en la pantalla ¿Dónde va la lista de productos con muchas ofertas? ¿Cuál es el mejor lugar para mostrar los amigos en común con ese usuario? ¿Dónde ponemos el botón para que sea fácil de encontrar?

Suelo utilizar una hoja y una birome para dicha tarea. Con unos simples recuadros que dentro llevan unas palabras que los identifica, flechas y líneas varias es suficiente. El objetivo es empezar a hacerte una imagen mental de la idea, siempre ubicando la información de acuerdo a su relevancia o dónde querés que aparezca, luego el cómo lo trataremos de resolver.

Es estos casos en conveniente armar una lista por importancia de cada recuadro para luego ubicarlo de acuerdo a la misma, por ejemplo en una página de subastas:

Con esa lista probáblemente optemos por darle un lugar de mayor exposición a los productos en oferta y sólo un campo de texto y botón al buscador.

El paso del socio: Hasta acá suelen llegar tus socios, amigos o colegas que te presentan una idea. Habrán escuchados frases como «entonces metemos acá el login, acá aparecen las fotos, ahí un banner y listo». Para ellos no importa COMO se van a meter ahí, que es lo que vamos a ver a continuación.

Nota: En la mayoría de los casos va a variar drásticamente de acuerdo el usuario esté logueado en el sitio o no. Es recomendable bocetar ambas versiones.

Responde a la pregunta ¿Cómo mostramos esa todo eso en pantalla?. Hay que tener en cuenta muchos factores, pero el objetivo final es que toda la información quede bien acorde a lo que bocetamos anteriormete. No nos vamos a preocupar mucho por hacer un gran análisis de usabilidad, solo en incluir todas las opciones e información que creemos importante. Luego tendremos tiempo para mejorarlo.

Es muy común al finalizar este paso que nos encontremos con mucha información en pantalla, texto confuso, opciones difíciles de encontrar y que, al mostrárselo a alguien, nos pregunte cómo hacer tal o cual cosa. En el último paso vamos a dejarlo espectacular, no perdamos tiempo en eso ahora.

El paso del diseñador: Hasta acá, generalmente obviando los pasos anteriores, suelen llegar los diseñadores. Arman un producto «final» sin reglas ni análisis que lo fundamenten, suelen encontrarse errores funcionales, de usabilidad y son en su mayoría diseños muy complejos. Si cuentan con experiencia como usuarios y en desarrollo web van a basar el producto en su sentido común.

¿Qué sucede si el nombre del usuario es muy largo? ¿Qué muestro si no tengo ninguna noticia para hoy? ¿Dónde lleva ese link «ver más»? Son todas preguntas que tenemos que resolver con pantallas diseñadas en detalle.

Uno de los mayores problemas es que se diseña pensando en las pantallas llena de información, cuando el mayor reto está en saber qué mostrar cuando no tenemos contenido.

Suelo armar cada pantalla y guardarla con un número que la identifique según el comportamiento normal del usuario, por ejemplo para un sitio de foros:

El paso del analista funcional wannabe: Acá se termina el producto para un wannabe. Está hecho el análisis, todas las pantallas e instancias. No falta nada ¡Error! Nos vamos a encontrar con un resultado muy similar al del diseñador, pero con más horas de trabajo y mejor fundamentada, pero todavía falta el paso donde más nos vamos a quemar los ojos y la cabeza.

«Un diseñador sabe que ha alcanzado la perfección no cuando no tiene nada más que añadir, sino cuando no le queda nada más que quitar» – Antoine de Saint-Exupéry

¿Realmente es necesario poner el blog del usuario en los resultados de búsqueda? ¿No sería mejor dejar un solo botón al final del formulario que uno en cada conjunto de campos? ¿Hacen falta tantas líneas y colores para diferenciar la información? NO. Esa es la respuesta que tienen que buscar. No es necesario, no suma nada, no mejora la experiencia del usuario, no hace más que confundir y llenar de ruido nuestro diseño.

Menos es más. Más limpieza en el diseño, más espacios en blanco, más opciones realmente relevantes, más información importante. Menos íconos, menos líneas, menos colores, menos recuadros, menos explicaciones, menos ejemplos, menos imágenes, menos obstáculos para llegar a lo que realmente importa.

Por cada pixel de nuestro diseño tenemos que preguntarnos ¿es esto realmente necesario? ¿es lo que yo quiero que el usuario vea? ¿le va a sumar algo? ¿puedo obviar esta información? ¿puedo sacrificar este dato para darle más relevancia a otros más importantes?. Si no suma, resta.

Es súmamente necesario ponerse en la piel del usuario y tener en claro qué es lo que ofrecemos. Si vamos a tener un módulo de noticias de último momento ¿es necesario incluir el nombre del autor, un recorte del contenido, una imagen y la cantidad de comentarios? Quizás con el titular y la hora sea más que suficiente, luego en la versión ampliada tendremos espacio de sobra para todo lo demás. Como dice el principio KISS: Keep it simple, stupid.

El paso del analista contento: Ahora sí, podemos estar seguros que abarcamos la totalidad del producto. No nos falta nada, estamos listos para enmarcarlo y comenzar a programarlo. ¡Enhorabuena tío!

Esto hay que tenerlo en cuenta siempre. Si otro sitio lo resolvió bien, lo copiamos. Si podemos mejorarlo, lo hacemos. Si no asquerosamente calcamos su solución. No tratemos de reinventar la pólvora, confiemos en nuestra capacidad y experiencia cuando nos dice «esto mejor no se puede hacer» y dejemos de perder tiempo en algo que otros ya invirtieron suficiente.

Claro que es necesario usarlo con mucho sentido común y amor propio. Al fin y al cabo aquellas personas que no suman nada a su producto y sólo se dedican a copiar van a estar siempre en la estela del cometa. Nunca van a alcanzar o superar a nadie porque siempre están detrás de lo que otros hicieron primero. No existe la innovación ni nada que los distinga, el usuario no va a encontrar motivos para elegir la copia (a excepción de las copias de productos extranjeros, buen curro).

Ahí terminaron los 5 pasos para crear un buen producto. Los ataques, la soberbia y el humor, así como cualquier semejanza con la realidad, es intencional.

Nota final: Como verán no incluí ningún tipo de análisis técnico, personalmente considero que cualquier restricción técnica tiene una solución inteligente. ¡A buscarla en el momento que se presente! (procurando sea antes de lanzar el producto)