Mukautuvien käyttöliittymien menetelmät web-sovelluksissa

Abstract

Perinteisesti web-sivujen käyttöliittymien ulkoasu, palstoitus ja kuvat on suunniteltu ja toteutettu kiinteän kokoisiksi. Tällöin käyttöliittymät eivät mahdu pienille näytöille kunnolla ja niiden käyttö voi olla hankalaa, mikä heikentää käyttäjäkokemusta. Responsiivinen eli mukautuva web-suunnittelu on menetelmä toteuttaa web-käyttöliittymiä, jotka mukautuvat käyttäjien eri päätelaitteisiin. Mukautuva suunnittelu koostuu kolmesta pääperiaatteesta: mediakyselyistä, joustavasta asemoinnista ja joustavista kuvista. Tällä tavoin pystytään tarjoamaan samat verkkosivut usealle eri päätelaitteelle vain yhdellä toteutuksella.

Mukautuvassa suunnittelussa suunnittelutyö on erityisen tärkeää, koska se määrittelee käyttöliittymäelementtien järjestyksen sekä niiden uudelleen järjestymisen mentäessä isoilta näyttöko’oilta pienemmille. Menetelmä on niin uusi, että siitä puuttuvat tekniset standardit sekä toteutustavat, ja siksi se aiheuttaa erilaisia haasteita kehitystyössä. Keskisuurella, ketterällä ohjelmistoalan yrityksellä Evolvit Oy:llä on havaittu tarve selvittää näitä mukautuviin käyttöliittymiin liittyviä haasteita. Kohdeyrityksessä toteutetaan paljon erilaisia räätälöityjä web-sovelluksia asiakkaiden tarpeisiin, minkä takia vaatimukset ja ominaisuudet vaihtelevat runsaasti. Diplomityön tarkoituksena on kartoittaa mukautuvan suunnittelun haasteita ja kehittää niihin sopivia, kohdeyrityksen käyttöön soveltuvia ratkaisuja.

Tässä diplomityössä suunniteltiin kohdeyritykselle soveltuva mukautuvien käyttöliittymien EVO-UI-menetelmä, joka ohjeistaa, kuinka mukautuva suunnittelu tulisi ottaa projekteissa huomioon. EVO-UI-menetelmä koostuu ohjeistuksesta, tarkastuslistasta ja kehitysympäristön projektipohjasta, jonne on esivalittu erilaisia komponentteja helpottamaan mukautuvan suunnittelun kehitystyön aloittamista web-sovelluksissa.

Menetelmä arvioitiin projektipohjan kautta haastattelemalla ohjelmistokehittäjiä, jotka olivat käyttäneet projektipohjaa asiakasprojektissa. Haastattelutulosten perusteella voidaan todeta, että projektipohjan koettiin nopeuttavan ja helpottavan mukautuvan suunnittelun kehitystyön aloittamista. Projektipohjan sisältämät esivalitut komponentit oli valittu mukautuvaa suunnittelua silmällä pitäen, mikä vähensi projektin alussa komponenttien valintaan käytettävää aikaa. Lisäksi kohdeyrityksessä käytettävän yhteisen projektipohjan todettiin yhtenäistävän työtapoja ja tekniikoita ja helpottavan siten kehitystyötä yleisesti.

Traditionally, layout, columns, and images of the user interfaces of web pages have been designed and implemented for fixed width. In cases where there is not enough space for the user interface elements on screen, this might weaken user experience. Responsive Web Design is a principle for building web sites that work on mobile devices, tablets, and desktop screens. Responsive Web Design contains three key elements: media queries, fluid layout and flexible media with Responsive Web Design. It is possible to use the same code across multiple screen resolutions and devices. The design work of the Responsive Web Design is especially important because it defines user interface’s elements for different screen sizes. Responsive Web Design is so new an approach that technical standards and methods of the implementation are still missing.

Medium-sized agile oriented software company Evolvit Oy needed to clarify challenges regarding design and implementations of responsive user interfaces. The target company builds custom applications for customers’ needs, and their demands and properties vary a lot. The purpose of this thesis work is to survey these challenges and to develop solutions for them, which helps a target company.

In this thesis, general characteristics of Responsive Web Design are covered. As on technical contribution, a Responsive Web Design method called EVO-UI is designed. EVO-UI method gives instructions and directs developers to implement Responsive Web Design applications. The EVO-UI method contains an instruction document, a checklist and a template for integrated development environment for Responsive Web Design.

The EVO-UI method has been evaluated through the template by interviewing software developers who used the template in a customer project. On the basis of the interview results, one can say that the template facilitated and accelerated at the beginning of the project at the target company. A template's pre-chosen components reduced time spent on selection of those components at the beginning of the project. Furthermore, the template is considered to unify principles and techniques in the target company.