Using Information Visualization to comprehend user interface layer: An application to web-based systems

Abstract

Web applications have a complex user interface (UI) structure. The lack of formal documentation for web applications has been noticed in literature. If updated, formal documentation (and its models) would be helpful both to development and maintenance tasks. However, UI models are difficult to understand because they must have all information about UI structure, with levels of abstraction and scattered information across multiple diagrams. We propose an UI presentation using Information Visualization techniques, named ModelUIVIZ, to support understanding UI implementation. For that, we implemented two tools: a reverse engineering tool, named Web- ModelUI Data, to extract data from web applications; and the WebModelUI Tool, to create visual presentations. In order to evaluate ModelUIVIZ, we also conducted a controlled experiment focusing on evaluating the ModelUIVIZ on supporting UI comprehension, what had positive results. In this paper we present both the ModelUIVIZ, its evaluation as well as results obtained.