RESUMEN:El objetivo de este Proyecto Fin de Carrera ha sido el de desarrollar una herramienta para la comparación o validación visual de la usabilidad en un sistema informático con interfaz gráfica basada en web. Para ello, se ha creado una herramienta que permita detectar y analizar, de forma visual, diferencias entre dos versiones similares de una misma interfaz web. Con tal fin, la herramienta desarrollada proporciona un editor “Side by Side”, el cual consta de un mosaico de dos ventanas, donde, en cada una de ellas, se visualizan las versiones a comparar. Además, el sistema, de forma automática, detecta diferencias entre ambas versiones, utilizando para ello la estructura interna de ambas interfaces web. A partir del análisis de dichas diferencias, el sistema es capaz de reportar posibles errores de usabilidad existentes en una de dichas versiones. El sistema también proporciona facilidades para controlar e interactuar con este proceso de comparación automática, así como para navegar por la interfaz web con el objetivo de evaluar su usabilidad. Finalmente, los resultados de dicha comparación se incorporan a un informe de resultados integrado con un formato predefinido, el cual se encuentra integrado en la herramienta construida. De forma complementaria, la herramienta proporciona un editor “Pixel by Pixel”, el cual permite al usuario poder comparar dos versiones similares de una interfaz web mediante la superposición de las mismas. La herramienta está desarrollada, por exigencias del usuario final, el Banco de Santander, como un plugin para Eclipse.
ABSTRACT:The goal of this capstone project has been to develop a tool to compare the user interface of two similar web-based information systems, in order to asses the usability of each version. With this purpose, we have built a tool that assists developers in the analysis of differences between two similar web-based user interfaces. To achieve this goal, the developed tool provides an editor, called ”Side by Side”, which shows, in two separate adjacent windows, each one of the web-based user interfaces to be compared. Moreover, the developed tool automatically detects and analyses differences between both versions, by means of comparing their internal structure. Using these reported differences as an input, the system can identify potential usability flaws. In addition, the tool provides facilities to interact with this automatic comparison process, as well as navigating over the web interface in order to evaluate its usability. Finally, the results of this comparison are added to a comparison report, with a normalized format, which is built-in the tool. Moreover, the tool provides another editor, called ”Pixel by Pixel”, which allows designer to superimpose two web-based user interfaces, in order to detect differences by visual matching. This tool has been developed for the Banco de Santander, who requested it were developed as en Eclipse Plug-in.
