Implementing Frontend Architecture with a Usability Approach

Abstract

Modern web applications are often complex software systems offering a large set of features. To provide these features to the user, the system requires a layer of interaction – the user interface. The user interface is part of the frontend of a system. In context of web applications frontend refers to the client side of the system, which is the part of the system that is executed in user’s browser. Large systems means large amount of frontend components, which sets challenges to frontend developers work: how to maintain the quality and consistency of system’s frontend while the system grows and more developers are involved? A key quality component of a software system is usability. Usability determines how easy and pleasant a software is to use. Usability of a system can be improved by focusing on the frontend of a system, because most interactions between the user and the system are determined in the frontend of the system. This thesis researches a way to standardize frontend development in a way that good usability emerges from these standards. As a solution for this this, the thesis proposes the concept of a frontend architecture, a cohesive set of fundamental structures and patterns in digital product’s frontend. As a case study a model of a frontend architecture is constructed for a modern web application Tehden. The constructed architecture is then tested by applying the patterns to a user interface of a single feature in Tehden, and surveying different stakeholders of the system by perceived improvements in usability and development work. The case study found out that a frontend architecture is expected to improve the usability of the system while making frontend developer’s workflow easier and more efficient.

Nykyaikaiset websovellukset ovat monimutkaisia järjestelmiä, jotka tarjoavat laajan valikoiman ominaisuuksia. Näiden ominaisuuksien käyttämistä varten järjestelmät tarvitsevat käyttöliittymän, väylän järjestelmän kanssa vuorovaikuttamiseen. Käyt- töliittymä on osa järjestelmän frontendiä. Websovellusten tapauksessa frontendillä viitataan järjestelmän osaan, joka suoritetaan käyttäjän koneella internet-selaimessa. Laaja järjestelmä johtaa suureen määrään käyttöliittymäkomponentteja, mikä asettaa haasteita frontendkehitykselle: Kuinka frontendin yhtenäisyyttä ja laatua ylläpidetään, kun järjestelmä kasvaa ja yhä useampi kehittäjä osallistuu järjestelmän kehitykseen? Eräs tärkeä ohjelmiston laadun osa-alue on käytettävyys. Käytettävyys määrittää, miten helppoa ja miellyttävää ohjelmistoa on käyttää. Käytettävyyttä voidaan kehittää kehittämällä järjestelmän frontendiä, sillä suuri osa vuorovaikutuksesta järjestelmän kanssa määritellään frontendissä. Tässä tutkielmassa selvitetään keinoja organisoida frontend-kehitystä sellaisella tavalla, että hyvä käytettävyys syntyy järjestelmään luon- taisesti, kehitykselle määritettyjä standardeja seuraamalla. Ratkaisuna tähän tutkielmassa esitetään frontend-arkkitehtuuri. Frontend-arkkitehtuuri on yhtenäinen kokoelma perustavanlaatuisia rakenteita ja uudelleenkäytettäviä ratkaisuja digitaalisen tuotteen frontendissä. Case-esimerkkinä tutkielmassa luodaan frontend-arkkitehtuurimalli Tehdenille, joka on moderni websovellus. Tehdenille luodun arkkitehtuurin vaikutuksia frontend-kehitykseen ja käytettävyyteen testataan soveltamalla arkkitehtuuria yhteen Tehdenin ominaisuuteen, jonka jälkeen Tehdenin sidosryhmiä ja kehittäjiä haastatellaan kyselyn muodossa. Case-tutkimus paljastaa, että frontend-arkkitehtuurin voidaan odottaa parantavan sekä ohjelmiston käytettävyyttä että ohjelmistokehittäjien työskentelytehoa.