El papel del Front-end en la experiencia de usuario

Ser Front-end es mucho más que maquetar un diseño, es ser responsable de aumentar el nivel de la experiencia del usuario.

Nos hemos acostumbrado a creer que la labor de un Front-end es únicamente llevar un diseño a la realidad, como si fuera una mera imitación del original, algo casi platónico, pero ser Front-end es mucho más que eso; va mucho más allá del pixel perfect, la cosa va de entender que estás desarrollando un producto final, un producto que lleva detrás un negocio y que, sobre todo, estará al servicio del usuario.

Arquitectura, Visual y Front-end. El ciclo completo de UX.

En Redbility, nuestra metodología de trabajo es transversal. Entendemos que en un proyecto, desde el principio y como parte del proceso, todas las partes están implicadas en el producto final. No hay departamentos aislados. Un desarrollador Front-end tiene mucho que decir y aportar sobre interacciones, ejerciendo un papel fundamentar a la hora de guiar al usuario hacia donde queremos llevarle y culminando su experiencia. De nada nos sirve tener un wireframe o un diseño cuando nuestro producto va a ser 100% digital y finalmente se va a traducir en código. El desarrollador Front-end es responsable de que ese código se construya con los mejores materiales posibles, aportando ideas sobre interacción y soluciones para mejorar la experiencia de usuario.

Componentes y sistemas de diseño: pensar primero

Nuestra metodología se basa en la construcción de componentes a partir de los cuales creamos módulos, reglas y patrones que nos servirán de base para construir un producto. ¿Por qué trabajamos así? Los sistemas de diseño crean una consistencia y una visión global de los elementos que se están usando en un producto, además permiten que cualquiera sea capaz de entender con claridad el uso que se debe hacer de cada componente. Esto es clave por dos cosas: tenemos un producto escalable preparado para crecer y además mejoramos la experiencia de usuario.

Los sistemas de diseño permiten que un producto sea escalable y flexible y que añadir nuevos componentes o cambiarlos no sea un sacrificio en tiempo y costes, sino algo inmediato. Nos permiten hacer crecer un producto de manera rápida y cubrir dos objetivos: por un lado mejorar la experiencia de usuario otorgando una consistencia global de estilo y funcionalidad a todo el producto digital, por ejemplo en los botones o enlaces, y evitar la confusión del usuario con elementos que no sean consistentes mejorando así la conversión. Además, la escalabilidad del sistema de diseño que hemos creado para un producto nos permite crear otros productos nuevos basados en ese mismo sistema de diseño, con lo cual la reducción de costes y tiempo es relevante.

No sólo se trata de listar los componentes, sino que también debemos crear reglas que expliquen cómo y cuándo deben usarse todos los elementos que hemos definido para el producto: módulos, imágenes, colores, tipografías o márgenes.

Una vez que hemos desarrollado nuestro sistema de diseño, es hora de llevar la teoría a la práctica: creamos páginas de referencia que nos permiten ver el resultado de la convivencia de todos estos componentes y patrones, así como mostrar los diferentes casos, contextos y comportamientos de cada elemento.

En resumen, trabajar con un sistema de diseño a la hora de crear un producto digital nos ofrece:

• Principios y fundamentos.
• Contexto.
• Flexibilidad.
• Estabilidad.
• Consistencia.
• Calidad.
• Agilidad.
• Orden.
• Escalabilidad.
• Reducción de tiempos y costes.

UX y la interacción Front. La diferencia entre 6000ms o 3000ms importa

El Front-end es el máximo responsable final de desarrollar las interacciones que el usuario tendrá con nuestro producto digital, por eso su papel es esencial dentro del ciclo UX. Es importante que sepamos cómo crear una narrativa con las interacciones, guiando al usuario y apoyando las funcionalidades que se le presentan en todo momento, enfocado siempre a la conversión.

Otro pilar esencial es el diseño responsive. Hay que entender que el responsive no es sólo poder visualizar el diseño en diferentes dispositivos, sino que es algo más estratégico; es el fruto de un análisis exhaustivo basado en tipos de pantalla o el contexto de uso, mejorando y aumentando la conversión. Debido al contexto de uso, debemos ajustar los elementos y recursos como imágenes, navegación, espacios en blanco, márgenes o tipografías ajustándolos al máximo a ese contexto para generar una mejor experiencia. No se trata sólo de crear tres puntos de corte para tablet, escritorio y smartphone. Se trata de realizar tantos puntos de corte como sean necesarios para optimizar al máximo la experiencia de usuario y la conversión.

Validación y certificación de producto

Que definamos un buen wireframe o hagamos un diseño visual increíble no nos garantiza que nuestro producto digital final esté 100% certificado y con la garantía de haber cumplido con nuestro objetivos. Como hemos comentado un poco antes, al final no se trata de ver cada área (Visual, Arquitectura y Front) de manera aislada en el proceso del producto, todas forman parte del todo, siendo el Front el producto final que llegará al usuario. Es importante que el trabajo de Front se vaya validando en cada momento por sprints o validaciones parciales que establezcamos. No hay que esperar a que tener todo el producto desarrollado para pasar a validarlo, pues se debe tener suficiente margen para identificar posibles errores o mejoras, algo clave para garantizar la calidad y los objetivos del producto.

Hay muchos procesos que nos pueden ayudar a esta validación total: crear páginas de referencia para ver cómo conviven los módulos creando diferentes composiciones y combinaciones, testear en muchos dispositivos, controlar el comportamiento de las imágenes generando un foco de atención para que no se pise con textos o para mejorar la conversión, así como controlar los casos y los distintos escenarios que tendrán los módulos o templates que hemos diseñado.  Estos procesos son esenciales para que todo el equipo que está desarrollando el producto, en cada área y de manera transversal, compruebe que el producto está perfectamente construido. Una vez que tenemos cada parte validada y comprobada, entonces certificamos que el producto ha quedado excelente y que cumple con todos los criterios que definimos.

Ya tenemos nuestro producto final preparado para llegar a los usuarios.