Käyttökokemus ja web-suunnittelu : case Zeeland Turku Oy:n esittelysivu

Abstract

Opinnäytetyössä pyritään selvittämään, mitä käyttökokemus tarkoittaa ja löytämään web-suunnittelulle ominaisia käyttökokemusratkaisuja sekä käydään läpi havainnollisten esimerkkien avulla, mistä käyttökokemus koostuu. Yksi web-suunnittelun ajattelua muuttava kehitysaskel tulevaisuudessa ja osittain jo vuonna 2012 on selauslaitteiden osuuksien jakautuminen tasaisemmin tietokoneiden, mobiili- ja viihdelaitteiden kesken. Sen lisäksi opinnäytetyö käsittelee suunnittelua ammattina ja millaista se käytännössä on. Tutkimuksen rinnalla suunniteltiin uutta esittelysivua mainostoimisto Zeeland Turku Oy:lle. Zeeland Turku on osa suurempaa Zeeland Oyj -konsernia. Toimeksiantona oli viestiä Turun toimiston henkeä ja tietoa henkilöstöstä. Esittelysivu on yksittäinen pystysuunnassa vieritettävä kokonaisuus, josta puuttuu tarkoituksella alasivut. Suunnitelma sisälsi teknisen puolen lisäksi luovempaa sisällön suunnittelua. Esittelysivu suunniteltiin toimimaan laitteesta riippumatta ja mahdollisimman hyvin myös puutteellisella modernin web-teknologian tuella. Rakenne on niin sanotusti responsiivinen ja ottaa siten huomioon sekä kapean että leveänkin selainnäkymän. Sivu on toteutettu WordPress-julkaisujärjestelmän päälle. WordPress-teemakehitys perustuu standardiin HTML:n ja CSS:n yhdistelmään, mutta sivupohjatiedostot sisältävät myös PHP-kieltä. Käyttökokemusta rikastettiin asteittain lisäämällä lopuksi sivua esitysmäisemmäksi muuttavan javascript-kerroksen ja CSS3-animointia. Sivun toimivuus ja pääsy sisältöön eivät kuitenkaan vaadi selaimelta tukea kummallekaan tekniikalle. Opinnäytetyön tuloksena syntyi teknisesti valmis esittelysivu odottamaan sisällöntuottoa suunnitelman mukaan. Ihannetapauksessa kehitys jatkuu tulevaisuudessakin, kun sisältö ja käyttö nostaa esiin potentiaalisia ongelmia tai parannusideoita. Tutkimus paljasti web-suunnittelun muuttuvan entistä haasteellisemmaksi, kun laiteriippumattomuuden filosofia otetaan käyttöön laajemmin ja syvemmällä web-projekteissa. Responsiivisen suunnittelun toimintamallit ja teknisen toteutuksen standardisointi ei ole vielä valmis, joten siirtymävaihe vaatii paljon lisätutkimusta ja –työtä.

A recent advancement is reshaping the way we are going to approach web design in the future, and partly today too. It’s the rising share of web usage among mobile and other media devices. This thesis tries to find out about user experience in web design and discover what problems lie in designing for any imaginable web capable device. The material used for designing a new introductory site for Zeeland Turku consisted of the author’s observations and studies. The company is a part of a bigger group called Zeeland. They needed a site that communicates the spirit of their local office and introduced their staff. The site consists of a long single page that’s meant to be scrolled rather than navigated from subpage to subpage. The design work contained both visual and technical design concerning the implementation phase. The site was designed to work well on any device and be backwards compatible in case the visitor’s browser doesn’t support modern web technologies. The structure of the site is responsive and thus takes into account even the narrowest of viewports and grows fluidly laying out elements on the page to suit different widths. The site is implemented on a content management system called WordPress using Themble’s custom theme “Bones”. WordPress theme development is basic HTML markup and CSS style attributes, but it also includes a lot of PHP code in the theme template files. The purpose of WordPress is to make regular content updates easy with just a couple of quick lessons. The site enhances progressively by adding CSS3 animations and javascript in the last stage. An own javascript file was developed to improve the site by making it feel more like a presentation. Because this was made honoring the philosophy of progressive enhancement, support for the modern web technology used in the last stage is not required for the site to work and for content to be visible. Finalizing the technical phase was successful and it’s ready for content to be produced according to the plan made during visual design. Ideally the development of the site is going to continue in the future when problems and new ideas come into play through production and actual use.