Verkkokäyttöliittymä QR-koodien hallintaan

Abstract

Insinöörityön tarkoituksena oli suunnitella ja toteuttaa verkkokäyttöliittymä QR-koodien luomista ja hallinnointia varten. Työn lähtökohtana oli helpottaa mobiilisivuja ja -sovelluksia tekevän yrityksen tapaa luoda asiakkailleen QR-koodeja. Prosessiin liittyi tiedonsiirto sähköpostin välityksellä ja internetistä löytyvien valmiiden QR-luontityökalujen käyttö. Palvelua tulisivat käyttämään tilaajayrityksen työntekijät ja asiakkaat.

QR-koodit ovat kaksiulotteisia toimintaperiaatteeltaan viivakoodeja muistuttavia kuvioita. Lyhenne QR tulee sanoista quick response eli vapaasti käännettynä nopea vaste. Niitä käytetään useimmiten linkkeinä internetissä olevaan sisältöön, kuten verkkosivuun.

Insinöörityössä kartoitettiin eri käyttäjäryhmien tarpeet suunniteltavan palvelun osalta. Tietojen perusteella suunniteltiin käyttöliittymän helppokäyttöisyys ja toiminnot. Työssä tutustuttiin käyttöliittymäsuunnittelun periaatteisiin, ja näitä periaatteita noudattaen toteutettiin verkkosivujen sivustorakenne, kaikkien sivujen näkymät, navigaatiot ja värit.

Työssä otettiin huomioon tulevaisuuden tarpeet tietokannalta ja sivustorakenteelta. Käytettävyyttä suunniteltiin hyödyntämällä rautalankamallia, ja käytettävyys testattiin lopuksi ääneen ajattelu -testillä. Käyttökokemuksesta tehtiin niin intuitiivinen, että tietotekniikkaa tuntematon käyttäjä osaa käyttää sitä. Palvelu toteutettiin erissä, jotta se saatiin julkaistua nopeasti.

Käyttöliittymän palvelinpuolen toiminta toteutettiin PHP:llä pohjautuen olemassa oleviin kontrollereihin ja avoimen lähdekoodin ohjelmistokehykseen. Sivuilla käytettiin perinteisten WWW-tekniikoiden ja JavaScriptin liitännäisten lisäksi PHP-mallipohjakirjastoa ja käyttöliittymämallinnetta.

Insinöörityön lopputuloksena syntyi palvelun ensimmäinen versio. Palvelu julkaistiin aikataulussaan, ja se on tilaajayrityksen työntekijöiden omassa käytössä. Palvelu vastaa suunniteltua työtä, ja verrattuna vanhaan prosessiin se vähentää työmäärää ja säästää aikaa.

The purpose of this thesis was to design a web based interface for creation and management of QR codes. This interface would be used by the customers likewise the employees of the company the interface was designed for. The need for this interface arose from the increased need of QR codes amongst customers. The goal of this thesis was to increase time efficiency and reduce vulnerability to human errors in the process of ordering, creating and returning the codes to the customers.

QR codes are two-dimensional codes that are more sophisticated versions of bar codes. The abbreviation QR comes from the words quick response. They were developed for industrial use but they are now in common use. They can be used in communication for example to link a mobile user to content on the internet.

With this thesis a study of different user groups and their needs from the interface was done. The implemented features and functions and the level of ease of use is based on the study. Research on the best practices in user interface design was done and those practices were used in making the site and navigation structures, the page layout and planning the color schemes.

The future needs from the site structure and the database were taken into account in making the interface. A wireframe model was used to test the early design and usability and later a think-aloud test was conduced to test the success of usability in the functional interface. The process of making the interface was divided into two parts to enable a quick release. In this thesis work both parts are planned and the first part is done and released.

The backend of the interface is based on an open source PHP framework and some existing controllers. Besides the use of typical web techniques like HTML, CSS and JavaScript, a template engine, a front-end template and JavaScript libraries were also used.

The result of this thesis work was a release of the first version of the interface. It was released on the planned schedule and it is in use of the companies’ employees. The goal of a quicker and easier process of managing QR-codes was achieved.