Verkkosivun responsiivisuus ja sen vaikutukset käytettävyyteen : case Iloleipuri

Abstract

Mobiililaitteiden kasvava määrä internetin selaamiseen on johtanut siihen, että informaatiota haetaan verkkosivuilta monella erilaisella laitteella. Verkkosivujen toiminta tulisi olla taattu laitteesta huolimatta, ja yksi ratkaisu tähän on toteuttaa verkkosivut skaalautumaan laitteelle kuin laitteelle. Tätä ominaisuutta kutsutaan responsiivisuudeksi.

Iloleipuri-tuotemerkille toteutettiin responsiiviset reseptihaku-verkkosivut, josta kirjoitettiin kaksi erillistä opinnäytetyötä. Tämä työ tarkasteli verkkosivujen responsiivista toteutustapaa sekä tutki responsiivisuuden vaikutuksia käytettävyyteen. Responsiivisen suunnittelun ja toteutuksen vaiheita käytiin läpi sekä tutkittiin käytettävyyttä graafisten elementtien ja mobiililaitteiden osalta. Lisäksi esitettiin konkreettisia keinoja, joilla Iloleipuri-verkkosivujen käytettävyyttä parannettiin.

Iloleipuri-verkkosivujen ulkoasuun vaikutettiin ainoastaan responsiivisessa osuudessa, koska asiakas tarjosi työpöytäversion ulkoasun kokonaisuudessaan. Verkkosivun responsiivisuutta suunnitellessa otettiin huomioon seikkoja, jotka vaikuttavat sekä positiivisesti että negatiivisesti käytettävyyteen. Tavoitteena oli luoda mahdollisimman hyvä käyttäjäkokemus monelle erilaiselle päätelaitteelle.

Aikataulurajoitteiden takia sivut jouduttiin julkaisemaan ensin ilman responsiivista toteutusta. Responsiivisuuden kehitys jatkui sivuston taustalla ja saatiin lopulta myös sivuille käyttöön. Lopputuloksena asiakas sai toimivat responsiiviset verkkosivut, jotka testatuilla laitteilla toimivat moitteettomasti.

The increasing number of mobile devices used for browsing the web has led to information being searched by multiple different devices. The functionality of websites should be guaranteed regardless of the users’ device and one solution is to make websites automatically scale for different devices. This method is called responsive design.

Iloleipuri brand were implemented a responsive recipe search website from which has been written two separate theses. This thesis studied responsive web design and its impact on website usability. Responsive design and implementation phases together with usability were studied in terms of mobile devices and graphical elements.

The Iloleipuri website layout was only affected in this project by its responsive parts because the customer provided a full desktop layout. When designing the responsiveness of the website, some facts were taken into account which affected usability both positively and negatively. The aim was to create as good user experience as possible for many different devices.

Due to time constraints, the website needed to be published first without the responsive implementation. Responsive development continued in the background and it was eventually fitted to the website. As an end result, the customer received a responsive website which functioned properly on the devices tested.