"Tavallisten" websivujen ulkoasuissa nähdään välillä, ja viime aikoina yhä useammmin, trendejä, jotka tosin tulevat Suomeen hiukan jälkijunassa. Verkkokauppojen käyttöliittymällä ei kuitenkaan aina ole mahdollista toteuttaa uusimpia villityksiä, sillä tuotteiden myynnin lainalaisuudet(esimerkiksi metadatan, kuten hintojen kappalemäärien jne esitys) asettavat tiettyjä rajoituksia asettelulle.

Silti myös verkkokauppojen käyttöliittymätekniikat ja ulkoasut ovat kehittyneet eteenpäin suurin harppauksin. Tässä kirjoituksessa teemme katsauksen uusimpiin tekniikkoihin ja suunnittelumalleihin.

 
 
Moniportainen navigaatio

Verkkokauppojen, varsinkin sellaisten, jotka tarjoavat suuren tuotevalikoiman, täytyy järjestää kaikki data huolella. Perinteisesti alasvetovalikossa voi olla muutama alalinkki. Verkkokaupoissa saattaa kuitenkin olla todella paljon katgorioita, ja valikko tuntuu loputtomalta. Tähän auttaa ns. jättimenu, jossa kaikki alakategoriat on esitetty yhdellä silmäyksellä. Lisäksi näihin velikoihin voidaan upottaa muuta tietoa tai vaikkapa tarjouksia.amazon

Kuvassa on malliesmerkki Amazonin verkkokaupasta, jossa viemällä hiiren pääkategorian päälle saa eteensä kaikki alakategoriat. Myös navigaation tyhjä tila on käytetty esimerkillisesti hyväksi promootioille.

 
 
Sivuston animoidut elementit

Todettakoon alkuun, että tämä on monien verkkokauppojen kompastuskivi. Liikuvilla osilla ainoastaan häiritään asiakkaan ostokokemusta, vaikka tarkoitus olisi helpottaa sitä. Oikein toteutettuna animattiot ja liike edistävät käytettävyyttä ja helpottavat informaation esittämistä. Menut ja tuotteiden päälle ilmestyvät lisätiedot ovat esimerkkejä ensisilmäyksellä piilossa olevasta hyödyllisestä sisällöstä.
threadlessLoistava toteutus tästä on Threadless.comin beta-sivustolla. Animaatiot eivät todellakaan pelota käyttäjiä pois, vaan itse asiassa houkuttelevien tuotekuvien päälle ilmestyy alakategoriat, kun niiden päälle vie hiiren. Tämä oivallus on esimerkki yksinkertaisuuden voimasta, ja käyttäjää avustavasta suunnittelusta, jolla kuitenkin säilytetään graafisuus ja mielenkiintoisuus.

 

Asiakkaalle ehdotettavat tuotteet

Jotkut asiakkaat tietävät verkkokauppaan tullesssaan, mitä he etsivät ja ostavat varmasti. Ainutlaatuinen tilaisuus tehdä lisämyyntiä ja nostaa keskitilauksen arvoa on kuitenkin tarjota kävijöille ristiinmyyntituotteita, liittyviä tuotteita tai ehdotettuja tuotteita jonkin muun kriteerin perusteella. Nämä voivat olla ennalta valittuja tuotteita, tai sitten automaattisesti poimittuja jonkin algoritmin perusteella.
korsMichael Korsin verkkokauppa tarjoaa meille malliesimerkin. Varsinaisen tuotteen alapuolella on pelkistetty valikoima päätuotteeseen liittyviä tuotteita. Ne eivät kuitenkaan häiritse liikaa päätuotteen olemusta, vaan ovat selkeästi toissijainen elementti.

 

Tuotearviot ja arvostelut

Varsinkin uusille käyttäjille verkkokaupasta ostaminen voi olla epäluuloinen kokemus. Ihmiset eivät mielellään luovuta maksutietojaan vähänkään epäluotettavalta vaikuttavalle taholle. Yksi todella yksinkertainen keino parantaa luotettavuutta on näyttää, että muutkin ostavat täältä, ja tarjota käyttäjille mahdollisuus arvosteluihin ja palautteeseen, jotka näkyvät tuotekohtaisesti.
quirkyKuten ylläoleva Quirky-verkkokauppa havainnollistaa, palautteen antamisesta kannattaa tehdä mahdollisimman suoraviivaista ja helppoa. Lisäksi tätä tietoa voidaan käyttää lisäämään myyntiä listaamalla parhaimman arvosanan saaneita tuotteita.

 

Tuotteiden zoomaus

Välillä kannattaa palata perusasioihin, tässä tapauksessa tuotekuvien laatuun. Vaikka tuotekuvasi olisivatkin jo huippuluokkaa, on parasta tarjota käyttäjälle myös hyvät työkalut niiden tarkastelemiseen.
bohemiaYläpuolella olevassa Bohemian verkkokaupassa tuotezoom on toteutettu juuri oikeaoppisesti. Kuvan päälle hiiren viemällä käyttäjälle tarjotaan yksityiskohtainen näkymä, jota voi itse liikutella. Lisäksi kuvaa klikkaamalla saa koko kuvan auki eteensä. Tällä tavoin käyttäjän ei tarvitse alkaa rullaamaan tuotekuvaa mihinkään, jos kyseessä on isohko tiedosto.  Tuotteen itsensä olemus on kuitenkin yksi myynnin pääargumenteista, joten tämän takia kuvat on tuotava esille korostetusti.

 

Tässä kirjoituksessa käytiin läpi keskeisiä elementtejä verkkokauppojen käyttöliittymistä. Niistä muutamia muita, varsinkin vielä edistyneempiä ratkaisuja jäi mainitsematta, joten palaamme asiaan varmasti piakkoin. Suosittelemme sillä välin tutkimaan oheiset esimerkit rauhassa läpi, ja miettimään, voisiko omassa verkkokaupassasi(tai tulevassa sellaisessa) hyödyntää näitä ideoita!

 

Lisätietoa löydät sivuiltamme: http://lamia.fi/