Graafiset käyttöliittymät Sivunparantelu

Transkriptio

1 Graafiset käyttöliittymät Sivunparantelu Johdanto Tarkoituksenamme on parantaa Konebox.fi-verkkokaupan nettisivuja. Ensivaikutelman perusteella sivusto tuntuu todella kömpelöltä ja ahdistavalta. Sivu on täynnä mainosmateriaalia ja shokkivärejä, jotka suorastaan räjähtävät silmille. Näemme tässä kohdassa tarpeelliseksi muuttaa sivun ulkoasua radikaalisti. Sivusto on riisuttava kaikesta ylimääräisestä, jotta käyttö helpottuisi ja ulkoasu olisi tyylikkäämpi sekä puoleensavetävämpi. Ensimmäinen toimenpiteemme oli sivuston keskittäminen. Näyttöjen koko kasvaa nykyään todella kovalla vauhdilla. Koneboxin yhtenä suurimmista ongelmista on sivun sijoittuminen vasempaan reunaan, jolloin varsinkin korkearesoluutoisella näytöllä oikeaan reunaan jää todella suuri musta tyhjä tila. Sivua on huomattavasti mukavampi lukea, kun se on keskitettynä.

2 Konebox.fi-verkkokaupan etusivu

3 Konebox.fi-verkkokaupan etusivu johon on merkitty paranneltavat kohteet

4 Paranneltu Konebox.fi-verkkokaupan etusivu 1. Header Huomasimme Koneboxin headerin olevan melko ahdas ja hieman vaikeaselkoinen. Ensiksi muutimme headerin elementtien paikkoja sijoittamalla yhtiön logon vasempaan reunaan, joka on hieman perinteisempi ja helpommin lähestyttävämpi kuin oikeassa reunassa oleva logo. Sivu on kuitenkin tarkoitettu kaikenikäisille ihmisille ja vanhat ihmiset eivät välttämättä osaa lukea firman nimeä niin nopeasti oikealta puolelta. Päätimme lisätä kirjautumisikkunan oikeaan reunaan luontevaan paikkaan, joka on myös käytössä hyvin monella muulla hyvällä nettisivulla. Saimme aikaan tyylikkään ja elegantin lopputuloksen, joka on selkeä ja rauhallinen. Muutoksien ansiosta värimaailmaan ei tarvinnut koskea lainkaan.

5 2. Mainokset vasemmassa laidassa Mitä vähemmän mainoksia, sen parempi käyttäjäkokemus. Päätimme karsia lähes kaikki mainokset sivulta. Todellisuudessa tämä ei välttämättä olisi mahdollista erilaisten yhteistyö- ja/tai sponsorisopimusten takia, jotka vaativat aatiettyjä mainoksia näytettävän sivulla. Ajattelemme kuitenkin tässä tapauksessa äärimmäisen ideaalista tilannetta, jossa mainoksia ei tarvittaisi lainkaan. Kun mainoksia on vähän, käyttäjän katse ei vaeltele turhaan, vaan pysyy olennaisessa. 3. Mainos ja yhteistyökumppanit Jälleen kerran poistimme yhden mainoksen selkeyttämisen vuoksi. Tällä kertaa kohteena oli sivun keskelle sijoittuva kilpailumainos. Sivuston tarkoituksena on myydä erilaisia tuotteita. Käyttäjän kannalta suurehko yhteistyökumppaneiden lista keskellä sivun tärkeimmässä paikassa on huono idea, joten siirsimme sen alas ja laitoimme tilalle tuotteiden näyteikkunan, jossa tarjoukset näkyvät. Kun sivustolla vieraileva asiakas etsii esim. USB-muistitikkua, häntä tuskin kiinnostaa etsiä sitä merkin perusteella. Käyttäjä ei myöskään pidä tällaista listaa kovin kiinnostavana seikkana. Ongelma ilmenee vahvasti nykyään kovin yleistyneillä miniläppäreillä, joiden näyttöjen resoluutiot ovat melko pieniä. Tällöin aukeavalla sivulla ei näy tuotetarjouksia, vaan tuo ko. Lista. 4. Pudotusvalikko Pudotusvalikoita on vaikea käyttää etenkin silloin, kun ne rönsyilevät ja otsikoita on paljon. Koneboxin pudotusvalikon tilanne on juuri tällainen. Otsikoita on todella paljon ja valikoiden välillä hyppely on vaikeaa. Suurin ongelma tässä on se, että ko. Valikko on sivustolla kahteen kertaan. Kaikki ylhäällä olevat otsikot ovat jo sivun vasemmassa laidassa luonnollisessa menun paikassa, josta valitseminen on huomattavasti helpompaa ja luontevampaa. Päätimme poistaa kokonaan Ylälaidassa olevan pudotusvalikon käytön helpottamiseksi, kahden asian moneen kertaan esittämisen ja tilan säästämisen takia.

6 5. Infovalikko ja tiedotuspalkki Huomasimme, että infovalikossa olevat linkitkin ovat kahteen kertaan sivulla. Ne sijaitsevat myös sivun alareunassa footerissa. Päätimme poistaa ne ja sijoittaa tiedotuspalkin kohdalle. Vasemmassa laidassa olevan pystyvalikon tilalle laitoimme ostoskorin, jotta tuotteisiin liittyvät asiat olisivat mahdollisimman lähellä toisiaan ja helposti löydettävissä. Tiedotuspalkin rullaava teksti on todella vanha tapa käyttää. Se on käyttäjän kannalta jopa ärsyttävä. Nykyisen etiketin mukaan rullaavan tekstin käyttö on suorastaan kiellettyä. Liikkuvaa tekstiä on inhoittava lukea. Jos tiedotteita välttämättä haluaa julkaista niin ne olisi hyvä sijoittaa samaan paikkaan kuin tuotetarjouksetkin esim. Varata pari tuotetarjous ruutua tiedotteita varten. Tekemällä tällaisen toimenpiteen sivusto säästää taas hieman tilaa ja käyttö selkiytyy entisestään. 6. Shokkituotenäkymä Shokkituotenäkymästä otettiin pois puolet näkyvistä tuotteista, sillä alkuperäinen shokkituotenäkymä oli aivan liian massiivinen. Tätä pienentämällä sivustosta tulee selkeämpi ja helppolukuisempi varsinkin pieniresoluutioisilla näytöillä. Alkuperäisellä sivulla shokkituotteiden valikkolinkki oli ylhäällä ja alhaalla, parannellussa versiossa se on vain ylhäällä johtuen shokkituotteiden pienemmästä määrästä. 7. Oikean reunan bannerit Turhat bannerit poistettu jolloin käyttöliittymä on selkeämpi ja helppolukuisempi. Bannereista suurin osa oli samoja tuotemerkkejä jotka löytyvät jo mainos- ja yhteistyökumppanilistasta, joten niitä on turha pitää näkyvissä monessa paikassa. 8. Asennuspalveluhaku Asennuspalveluiden saatavuushaku poistettu etusivulta. Tämä tieto ei kuitenkaan ole mikään erityisen tärkeä, joten se voitaisiin sijoittaa infovalikon alle, josta kyseistä tietoa etsivä sen löytäisi helposti.

7 9. Footer Footerin infovalikot ovat jo kertaalleen näkyvillä, joten niitä on turha pitää myös alatunnisteessa. Nämä onkin korvattu Konebox-logolla, jolloin ei jää epäselväksi millä sivulla on.