Käyttäjäkokemuksen parantaminen monimutkaisten konfiguraatioiden käsittelyssä

Abstract

Tämä opinnäytetyö käsittelee JSON-muotoisen konfiguraatiotiedoston pohjalta moniosaisen verkkolomakkeen graafista suunnittelua. Opinnäytetyön kehitystyön taustalla oli Telenor Maritimen radioiden konfiguraatiotiedostojen käsittelyn haasteet, joissa konfiguraatioita oli mahdollista luoda ja muokata vain JSON-tiedostona. Tämä prosessi oli ongelmallinen, koska se vaati käyttäjältä aiempaa kokemusta JSON-datamuodosta, mikä rajoitti käyttäjäkuntaa lähinnä ohjelmistokehittäjiin. Kehitystyön tavoitteena oli parantaa konfiguraatioiden tuottamisen käyttäjäkokemusta ja laajentaa konfiguraatioiden käyttäjäkuntaa radioiden peruskäyttäjiin asti.

Toteutuksessa keskityttiin pitkän ja monivaiheisen lomakkeen graafiseen suunnitteluun, käyttäjäkokemukseen sekä lomakkeen ennalta arvattavaan käyttäytymiseen käyttäjän näkökulmasta. Lomakkeen graafinen suunnitelma toteutettiin käyttäen Figmaa, selainpohjaista suunnittelutyökalua, joka mahdollisti graafisen suunnittelun sekä toiminnallisen prototyypin toteuttamisen. Lomakkeen suunnitteluprosessi aloitettiin jaottelemalla konfiguraatiotiedoston sisältö loogisesti ja käyttäjälähtöisesti. Lomakkeen kysymysten ja vastauskenttien suunnittelussa hyödynnettiin konfiguraation dokumentaatiota, joka määritteli vastausten säännöt ja rajoitukset. Näitä vastausten sääntöjä ja rajoituksia tuotiin esille reaaliaikaisilla tarkistuksilla, jotka ilmoittavat käyttäjälle mahdollisista kentän virheistä käyttäjän poistuessa vastauskentästä. Lomake jaettiin kymmeneen aihealueeseen, joista muodostui moniosaisen lomakkeen osat. Lomakkeen täytettävien tietojen antaminen progressiivisesti auttaa käyttäjää keskittymään käsillä olevaan osioon ja vähentää työkuormaa. Lomakkeessa käytetään askelindikaattoria, joka auttaa käyttäjää hahmottamaan hänen sijaintinsa moniosaisessa lomakkeessa.

Lomakkeen ulkoasun ja komponenttien suunnittelussa käytettiin Googlen kehittämää Material Design 2 -ohjeistusta käyttöliittymien suunnitteluun. Kyseisen ohjeistuksen käyttämisen tavoitteena oli yhdenmukaistaa lomakkeen ulkoasu radioiden web-käyttöliittymän kanssa. Lomakkeen ulkoasun suunnittelussa hyödynnettiin myös yrityksen brändiohjeistusta, joka määritteli lomakkeella käytettävän väripaletin, fontin ja logon.

Opinnäytetyö on rakenteeltaan ja järjestykseltään jaettu lukuihin niin, että se toimii vaiheittaisena oppaana konfiguraatiotiedoston muuntamiseksi käyttäjäystävälliseksi, moniosaiseksi lomakkeeksi. Kukin luku käsittelee eri osa-alueita ja vaiheita prosessissa, jolloin lukija voi seurata ohjeita soveltaen niitä käytännössä työhönsä. Opinnäytetyön johtopäätöksenä todettiin, että käyttäjäkokemusta voi merkittävästi parantaa muuntamalla konfiguraatiotiedosto käyttäjäystävällisemmäksi ja visuaalisemmaksi verkkolomakkeeksi, mutta kehitystyön onnistumista voidaan arvioida vasta, kun lomaketta testataan sen loppukäyttäjillä.

This thesis focuses on designing the interface and user experience for a multi-step web form created from what was originally a JSON configuration file. Initially, Telenor Maritime’s radio configuration files could be created and modified only as JSON files, a process problematic because of its requirement of prior JSON data format experience. This had limited the configuration’s user base to primarily software developers. The objective of this development was to enhance the user experience in producing configurations and to expand the user base to include the average radio user.

The implementation concentrated on the graphical design, the user experience, and the predictability of user actions of an extensive multi-step form. The graphic design was created using Figma, a browser-based design tool that enabled both graphical design and functional prototyping of the created design.

The form’s design process began by viewing the contents of the original JSON-formatted configuration file and segmenting its contents of it to an order that was more user-centric. In designing the form’s answer fields, the configuration’s documentation was utilized to define the rules and restrictions for the user’s input for each input field. Implementation of real-time validation was designed to the input fields so that when the user exits an input field with errors, the field is highlighted, and a descriptive error message is given under the field. The form was divided into ten categories, which form the steps for the multi-step form. Providing the fillable information of the form progressively helps the user in focusing on the current section and reduces the workload when filling the form. The multi-step form includes a step indicator that makes it possible for the user know their location on the form.

The form’s appearance and components were designed using Google’s Material Design 2 guidelines. These guidelines were used to unify the user interface with the web interface of the radios. The form’s appearance was also designed by using the company’s brand guidelines, which dictated the colour palette, font, and logo to be used on the form.

The chapters of this thesis are structured and ordered so that the thesis can be used as a step-by-step guide for transforming a configuration file into a user-friendly multi-part form. Each chapter addresses different areas and stages of the process, allowing the user to follow the instructions and apply them practically. The conclusion of this development process is that user experience can be significantly enhanced by converting the configuration file into a user-friendly and visually appealing web form, though the success of the development can be accurately determined after testing the form with real end-users.