Desarrollo web basado en transferencias de diseño de interfaces de usuario mediante adaptaciones en el cliente

Abstract

Uno de los actores que ha impulsado el desarrollo web a lo largo de los años ha sido el diseño de la interfaz de usuario (UI) ya que es en esta tecnología donde se pueden combinar aspectos visuales llamativos, pero también funcionales que han sido los orígenes de nuevos enfoques de investigación como la usabilidad y la experiencia del usuario (UX). Por ser importante el diseño de UI, este aspecto es generalmente tratado en etapas tempranas de definición del ciclo de vida del desarrollo de software ya que los requisitos levantados van moldeando la interfaz de usuario que será definida en fases posteriores. Una de las herramientas que permite adelantar la visualización de este diseño son los denominados prototipos que representan la aplicación de los requisitos dispuestos en forma visual. Posteriormente, con este prototipo el usuario ya tiene una idea más aterrizada de sus requerimientos y también esto se convierte en una entrada para la etapa de desarrollo de software. Un reto creciente es el de plasmar en el desarrollo no solo el aspecto visual del prototipo sino también incorporar comportamiento que promueva el uso del prototipo en un insumo listo para ser utilizado en la codificación. Particularmente, esta necesidad ha provocado que al momento del levantamiento de los requisitos sea necesario definir el comportamiento esperado por el usuario, quien con ayuda de los diseñadores puede dotar de un prototipo mayormente elaborado. Los procedimientos manuales para traducir prototipos a código JS, HTML y CSS producen errores, incongruencias y desajustes entre desarrolladores y diseñadores, lo que da como resultado un software que no siempre representa la visión inicial o las expectativas del cliente. Esta tesis doctoral trata este problema a través de un procedimiento sistemático y un instrumento experimental para automatizar la transferencia de diseño, transformando UI en código, incorporando patrones de interacción desde la fase de requerimientos y generando componentes accesibles, semánticos y que pueden ser reutilizados. El propósito principal de la tesis es el de la investigación, el diseño y la puesta en práctica de métodos y herramientas que, a través de la reutilización de componentes de UI y las adaptaciones del lado del cliente hagan más sencillo el desarrollo web. Los objetivos específicos comprenden: identificar las técnicas y herramientas actuales para convertir diseños de UI a código, diseñar métodos para detectar y mejorar elementos de la interfaz de usuario, así como para implementar artefactos de software que implemente este método. El estudio se sitúa en el contexto de la Ingeniería Web que se basa en modelos y métodos de adaptación del lado del cliente con un enfoque en estándares tales como Material Design, WCAG (accesibilidad) y el Lenguaje de modelado de flujo de información (IFML). Las contribuciones de la tesis son las siguientes: una revisión sistemática de la literatura (RSL) que examina los métodos y herramientas para trasladar el diseño de UI a código, estableciendo dos perspectivas: la creación basada en maquetas (por ejemplo, Figma o Sketch) y la detección de componentes visuales mediante redes neuronales (como pix2code o UIED). Esta revisión establece el estado del arte y fundamenta investigaciones futuras sobre la automatización del diseño. También se contribuye con la definición del método PRIM-UI, que incorpora patrones de interacción desde la etapa de requisitos mediante una matriz de correspondencia, mejorando prototipos al enriquecerlos con comportamiento que son plasmados en la UI y que ayudan a crear prototipos de alta fidelidad. Con base en el método, se elaboró una herramienta experimental, con el mismo nombre, que permite convertir prototipos semánticos en código HTML/CSS/JS de alta fidelidad, aplicando metodología BEM, IFML, y estándares de accesibilidad (WCAG) y de usabilidad como Material Design. También se incluye una evaluación empírica a través de un cuasiexperimento y el modelo de evaluación de métodos (MEM), que exhibe ventajas notables en un caso concreto de creación de una aplicación financiera para la actualización de los miembros mediante verificación biométrica. Dentro de la tesis también se destacan las limitaciones y propuestas de trabajos futuros como la aplicación de optimización al código exportado de la herramienta, la resolución de conflictos cuando se integran múltiples patrones de interacción dentro de un mismo elemento de interfaz. Así como el de incorporar aprendizaje automático para automatizar el mapeo de requisitos, ampliar la experimentación en contextos más amplios como salud o comercio para soportar la generalización y adopción del método propuesto. En resumen, este trabajo de tesis desarrolla un método que permite enriquecer patrones de interacción desde la etapa de requisitos para contribuir con la creación de prototipos de UI que además de ser visuales, lleven comportamiento para así ayudar a mejorar los indicadores de calidad de código y reducción de tiempos de desarrollo por brindar un insumo, a través de su herramienta experimental de exportación, que puede ser usado en etapa de escritura de código.