Mobiilioptimoitu käyttöliittymä

Abstract

Tässä opinnäytetyössä toteutettiin vuoden 2012 syksyn aikana mobiilioptimoidun käyttöliittymän prototyyppi, joka toimii vaihtoehtoisena käyttöliittymänä IMS-toimintajärjestelmän käyttämiseksi. Opinnäytetyö toteutettiin tilaustyönä IMS Business Solutions Oy:lle. Mobiilioptimoitu käyttöliittymä luotiin hyödyntäen uusimpia web-kehitysmenetelmiä. Opinnäytetyö on suunnattu sovelluskehittäjille ja sen ymmärtäminen vaatii osittain tietoteknistä osaamista ja tuntemusta.

Käyttöliittymäsuunnittelu, -toteutus ja -testaus vaativat paljon tutkimustyötä ja osaamista. Tässä dokumentissa kuvataan kuinka projektiryhmä suoriutui tästä monivaiheisesta toteutuksesta. Opinnäytetyössä keskityttiin prototyypin ja sen käyttöliittymän luomiseksi käytettyihin ratkaisuihin ja valittuihin teknologioihin. Käyttöliittymän suunnittelua varten toteutettiin kysely yrityksen asiakkaille. Tämän ohessa suunniteltiin alustava ulkoasu ja toiminnallisuus sekä mietittiin teknologisia ratkaisuja niiden toteuttamiseksi. Sovelluksessa pyrittiin käyttämään uusia, hyväksi todettuja teknologioita, joiden ansiosta se pysyy pitkään kilpailukykyisenä. Tämän vuoksi opinnäytetyössä tutustuttiin useisiin viime vuosina kehitettyihin teknologioihin ja teknologiatrendeihin, kuten JavaScript MVC kehyksiin, CSS-esikäsittelyyn, REST-arkkitehtuurimalliin ja mukautuvaan websuunnitteluun (Responsive Web Design).

Käyttöliittymän käytettävyyden parantamiseksi tehtiin käytettävyystestausta. Testauksen perusteella käyttöliittymästä löydettiin joitakin oleellisia ongelmia, mutta kaiken kaikkiaan käyttöliittymä osoittautui olevan helposti käytettävä ja ymmärrettävä. Hyväksymistesteillä todistettiin prototyypin sisältävän ne toiminnallisuudet, jotka siihen oli luvattu toteuttaa. Tuloksena syntyi odotuksia vastaava prototyyppi mobiilioptimoidusta käyttöliittymästä.

The purpose of this thesis was to create a prototype of a mobile optimized user interface in the fall of 2012. The user interface functions as an alternative for using the IMS Integrated Management System. The thesis work was commissioned by IMS Business Solutions Oy. The user interface was created using the latest web development methods. The thesis is intended for software developers, and you must have some knowledge of these methods to appreciate its contents.

Designing, developing and testing the mobile optimized user interface required a lot of research and know-how. This document describes how the project group accomplished these objectives. The thesis focuses on the technologies and solutions used to create the prototype and its user interface. To assist the design of the user interface, a questionnaire addressed to company’s customers was realized. At the same time, the project group started designing the preliminary appearance and the functions of the interface, and studied technological solutions to implement them. The objective was to use the latest and “best-practice” technologies that help to keep the prototype com-petitive in its field. For this the project group studied several latest technologies and technological trends, such as JavaScript MVC frameworks, CSS preprocessing, REST architecture model and responsive web design.

Usability testing was carried out to improve the usability of the mobile optimized user interface. The test results revealed that there are some essential usability problems in the user interface, but also that the interface is easy to use and to understand. Acceptance tests proved that the prototype contained the functions that had been promised to be implemented in the requirement specification documents. The result of the thesis was a prototype of a mobile optimized user interface that contains all the expected features and functions.