Diseñar la interfaz de usuario antes de comenzar con el código

Cuando hablamos de diseño de interfaz, el término «diseño» no debe entenderse como el arte final a entregar, sino como un conjunto de situaciones en las que debe involucrarse el equipo de desarrollo. Partiendo de un concepto basado en datos o métricas, esbozado en papel y lápiz, pasando por una serie de validaciones e iteraciones que involucran más métodos como la generación de wireframes (o esquemas iniciales), mockups en baja y alta fidelidad (o representaciones con mayor o menor detalle del producto final), diseños de interacción (donde se muestren los comportamientos que suceden como consecuencia de las acciones del usuario interactuando con la interfaz), etc., el diseño involucra también la gestión de los contenidos textuales, la arquitectura de información y navegación, la gestión de errores, la gestión de situaciones de ayuda, la gestión de los llamados «blankstates» —situaciones en las que la interfaz se muestra con espacios vacíos de contenido. Como puede notarse, comenzar con el «diseño» es mucho más que comenzar a dibujar en Sketcho o en Photoshop.

El desarrollo de la mayoría de las aplicaciones comienza con la idea de programar primero, y esa es una mala idea. La programación es el proceso que más recursos consume en el desarrollo de una aplicación (o un website, o una tienda en línea, etc.) y es la parte mas cara y difícil de cambiar. En vez de empezar por la programación, siempre conviene comenzar por el diseño.

«Mejor goma de borrar en la mesa de dibujo, que martillo en la zona de obra».

El diseño es un elemento relativamente flexible (y ni qué decir de los bocetos). Un boceto en papel es barato y fácil de modificar, incluso los diseños maquetados en HTML/CSS se pueden cambiar (o desechar) con relativa simplicidad. Pero no se puede decir lo mismo de la programación pura y dura. Diseñar primero te mantiene flexible. Comenzar programando te cierra opciones y conlleva futuros costes adicionales. De ahí que es tan importante trabajar con continuas iteraciones con el equipo de desarrollo, entender que el equipo es «diseñador de producto».

Otra razón por la cual conviene comenzar con el diseño es que la interfaz es el producto, lo que ven las personas, a fin de cuentas es lo que estás vendiendo. Si simplemente colocas la interfaz al final de la programación se podrán ver las grietas. Por ello, también vale tanto comenzar con el enfoque de la funcionalidad del diseño ya que hacer pruebas sobre prototipos es muchísimo más económico y rápido que realizar pruebas de uso en productos terminados. Comenzar con el diseño te mantiene flexible y te proporciona las respuestas antes que después, en el proceso de desarrollo.

Entonces conviene empezar con la interfaz para poder ver desde el principio el aspecto y funcionamiento de la aplicación. La interfaz se revisa continuamente durante el proceso completo de desarrollo. ¿Tiene sentido? ¿Es fácil de usar? ¿Soluciona el problema que tenemos entre manos? Estas son preguntas que solo se pueden contestar de verdad cuando se están trabajando con las pantallas reales.

Pero no todo es diseño por el diseño puro, también se debe involucrar a los usuarios que utilizarán el sistema que se está diseñando. Por ello conviene que el equipo domine los métodos de User Centered Design.¹ Además al trabajar con métodos de AgileUX² o LeanUX³ la perspectiva inicial desde el diseño funcional es, simplemente, la mejor forma de enfocar el desarrollo del producto digital. 

¿Qué te pareció? ¡Comparte tu opinión ahora!

Este video podría interesarte👇👇👇

? Seminario Branding: Diseñador y Cliente (Raúl Belluccia)