UX-Painter: An Approach to Explore Interaction Fixes in the Browser

Usability and user interaction improvement is a central task in web development to guarantee the success of a web application. However, designers are barely able to keep up with the current development cycle because their practices are too costly, while interaction issues accumulate in applications that end-users keep suffering. In this work, we propose a method for designers to rapidly explore solutions through visual programming to the interaction problems of an application under development, even when it has been already deployed. The method is realized by a tool called UX-Painter, an exploratory tool for designers to apply quick fixes to interaction issues at the client-side of a web application without the need of any script programming knowledge. The palette of available fixes in UX-Painter are client-side web refactorings, i.e., changes to web page elements that solve specific user interaction problems without changing the underlying functionality. UX-Painter allows designers to quickly set up new versions of a web application by combining refactorings to create alternative designs for user testing or an inspection review. UX-Painter also provides the means to communicate design improvements, as a sequence of refactorings with clear semantics. We show the feedback provided by interviews with designers about UX-Painter's functionality and the results of a user test about its usability.

[1]  Frank Maurer,et al.  User-Centered Design and Agile Methods: A Systematic Review , 2011, 2011 AGILE Conference.

[2]  Kent L. Beck,et al.  Extreme programming explained - embrace change , 1990 .

[3]  Mary Shaw,et al.  The state of the art in end-user software engineering , 2011, ACM Comput. Surv..

[4]  Gustavo Rossi,et al.  Automatic detection of usability smells in web applications , 2017, Int. J. Hum. Comput. Stud..

[5]  Vagner Figuerêdo de Santana,et al.  WELFIT: A remote evaluation tool for identifying Web usage patterns through client-side logging , 2015, Int. J. Hum. Comput. Stud..

[6]  Mauricio A. Saca.  Refactoring improving the design of existing code , 2017, 2017 IEEE 37th Central America and Panama Convention (CONCAPAN XXXVII).

[7]  Krzysztof Z. Gajos,et al.  Automatically generating personalized user interfaces with Supple , 2010, Artif. Intell..

[8]  Theodore D. Hellmann,et al.  Integrating Agile and User-Centered Design: A Systematic Mapping and Review of Evaluation and Validation Studies of Agile-UX , 2014, 2014 Agile Conference.

[9]  Jeffrey Wong,et al.  Making mashups with marmite: towards end-user programming for the web , 2007, CHI.

[10]  Gustavo Rossi,et al.  Assessing refactorings for usability in e-commerce applications , 2016, Empirical Software Engineering.

[11]  Desirée Sy,et al.  Adapting usability investigations for agile user-centered design , 2007 .

[12]  Vagner Figuerêdo de Santana,et al.  Web Usability Probe: A Tool for Supporting Remote Usability Evaluation of Web Sites , 2011, INTERACT.

[13]  Oscar Díaz,et al.  A language for end-user web augmentation: Caring for producers and consumers alike , 2013, TWEB.

[14]  Alexander Maedche,et al.  Exploring principles of user-centered agile software development: A literature review , 2015, Inf. Softw. Technol..

[15]  Oscar Díaz,et al.  Web Mashups with WebMakeup , 2016, RMC@ICWE.

[16]  Ron Kohavi,et al.  Online Controlled Experiments and A/B Testing , 2017, Encyclopedia of Machine Learning and Data Mining.

[17]  Gustavo Rossi,et al.  Business processes refactoring to improve usability in E-commerce applications , 2014, Electron. Commer. Res..

[18]  Lily Cho.  Adopting an Agile Culture A User Experience Team's Journey , 2009, 2009 Agile Conference.

[19]  Frank Maurer,et al.  The evolution of agile UXD , 2018, Inf. Softw. Technol..

[20]  Moira C. Norrie,et al.  W3touch: metrics-based web page adaptation for touch , 2013, CHI.

[21]  Milene Selbach Silveira,et al.  Artifact-Facilitated Communication in Agile User-Centered Design , 2019, XP.

[22]  Sergio Firmenich,et al.  Personalized Web Accessibility using Client-Side Refactoring , 2013, IEEE Internet Computing.

[23]  Kati Kuusinen,et al.  BoB: A Framework for Organizing Within-Iteration UX Work in Agile Development , 2016, Integrating User-Centred Design in Agile Development.

[24]  Marco Winckler,et al.  Web Augmentation as a Promising Technology for End User Development , 2017, New Perspectives in End-User Development.

[25]  Fabio Paternò,et al.  An environment for End-User Development of Web mashups , 2016, Int. J. Hum. Comput. Stud..

[26]  Lei Shi,et al.  Measuring the Visual Complexities of Web Pages , 2013, TWEB.

[27]  Gustavo Rossi,et al.  Kobold: Web usability as a service , 2017, 2017 32nd IEEE/ACM International Conference on Automated Software Engineering (ASE).