Implementing responsive web design in industrial dashboard editor

Abstract

This master's thesis was conducted to enhance ABB AbilityTM’s product View, a dashboard editor and UI SDK, to implement a responsive design in both its editor and dashboards. Responsive design means creating a web page layout so that it can respond to viewport shape and size change to keep optimal user experience. The main research question is how to implement responsive design in an industrial dashboard editor. For this, systematic mapping study is presented, showing that only a few articles have been written in visualisation dashboard systems in relation to their user interface and layouts. Outcomes of the research are that responsive design is not implementable to more complex systems like View. Other methods are created to mimic this core functionality to create similar results. An evaluation was done in form of usability study, and outcomes are that improvements that were done during the work of the thesis had either increased or held the level of usability of the product.

Tämä lopputyö on tehty ABB AbilityTM:n tuotteen View:n responsiivisuuden tehostamiseksi sekä editorissa että hallintapaneeleissa. View on hallintapaneelien luontiin tehty editori ja UI SDK. Responsiivinen suunnittelu tarkoittaa internetsivun kykyä sopeutua eri näytön kokoihin ja muotoihin samalla pitäen optimaalisen käyttäjäkokemuksen. Tutkimuskysymyksenä on, miten responsiivinen suunnittelu voidaan implementoida teolliseen hallintapanelieditoriin. Systemaattisella kartoitustutkimuksella selvitettiin, että on vain harvoja artikkeleita, jotka on kirjoitettu vastaavista hallintapaneeleista ja niiden käyttöliittymistä. Lopputulos on, että responsiivista suunnittelua on mahdotonta käyttää sellaisenaan järjestelmissä kuten View. Muita metodeja käytettiin, jotta vastaavaan lopputulokseen päästiin. Työstä tehtiin käytettävyystutkimus, jossa saatiin selville, että järjestelmän käytettävyys joko nousi tai ei laskenut muutosten ansiosta.