Veebidisaini trendid 2014Conversion designJaanika Kivilo, WSI Online

Miks hea disain on oluline?

Esmamuljet saab luua vaid 1 kord!Mida hindab kodulehe külastaja?

©2014 WSI. All rights reserved.

Esmamulje ON oluline

• 94% esmamuljest kujuneb disaini põhjal

• Esmamulje kujuneb kiiremini kui 1 silmapilgutus

• Üle 70% internetikasutajatest hindab ettevõtte usaldusväärsust nende kodulehe põhjal

• Üle 65% internetis ostlejatest ei usalda ebaprofessionaalse välimusega kodulehte

©2014 WSI. All rights reserved.

Hea disaini eelised

• Positiivne esmamulje

• Usaldusväärne maine

• Aitab suurendada veebis nähtavust

• Parem SEO• Suurem kodulehe konversioon

Conversion design

Konversioon - kodulehe külastaja täidab kodulehe eesmärgi. Teisisõnu täidab päringuvormi, esitab tellimuse, laeb alla juhendi, registreerub uudiskirjale vm.

Conversion design - kodulehte luues on silmas peetud kodulehe eesmärki. Külastaja suunatakse soovitud tegevusele kasutades selleks erinevaid elemente ja psühholoogilisi mõjutajaid.

Conversion design’i olulisemad tunnused• Sihtrühmale suunatud disain

• Loogiline kodulehe struktuur

• Lihtne navigeerimine

• Negatiivse ala kasutamine (ehk õhuvahed)

• Olulise info rõhutamine

• Müügitunnel

• CTA-de kasutamine

• Kiire kodulehe laadimisaeg

Conversion design disainitrendides

Kuidas teha head, konversioonile suunatud kodulehte?Kasutajamugavus ennekõike:

•usaldus•harjumused•psühholoogilised mõjutajad•meediakasutus kodulehel•värvipsühholoogia•lehe ülesehitus•buyer personas•A/B testimine

Conversion design trendides

• Veebidisaini eesmärk on muuta koduleht kasutajale mugavaks

• Disainitrendid hoiavad kodulehe värskena• 4 olulisemat suunda:

1. vähem teksti, rohkem pilte2. puhtus, selgus, lakoonilisus3. eristumiseks ootamatud võtted4. kasutajamugavus ennekõike

1. vähem teksti, rohkem sisu

Inimesed ei loe vaid sirvivad kodulehti!• Enamik kasutajaid sirvib läbi vaid 50-60%

veebiartiklist (Chartbeat)• Kodulehel loetakse vähem kui 20% tekstist (Jakob

Nielsen)• Hästi struktureeritud koduleht motiveerib rohkem

lugema

• Kasutatakse enam infograafika tüüpi sisu.

Näide: Mac Pro

2. Puhtus, selgus, lakoonilisus

• Lihtne elegants• Minimalistlik graafika• Suured puhtad pinnad• Palju õhku• Hoolega valitud detailid• Web 2.0 on kadumas. • Suund flat disainil

Kasutajakogemus eelkõige!

Näide: WSI Online

Näide: Hea Tava

3. Eristumiseks ootamatud võtted• Parallax• Animeeritud elemendid• Tüpograafia• Single page lahendused

Parallax

• Mänguline, hoiab külastaja põnevil• Mõned pinnad liiguvad, teised jäävad paigale• Tugev visuaalne wow-effekt• Julge ja eristuv lahendus• Suur engagement• Kasutavad ennekõike suured brändid

Näide: Numero10

NB! Efekti tabamiseks vaata lehte lives!! http://www.numero10.ch/fr/home

Animatsioonid

• Populaarsust koguvad HTML5 ja CSS3 lahendused• Erinevad liikuvad lahendused nt:

• elementide hajumine• nihutamine• skaleerimine• pööramine

• Muudavad kodulehe põnevamaks • Tõstab engagementi• Püüab tähelepanu• Toob rõhu erinevatele sisuelementidele

Näide: Väikelinna detektiivid

NB! Efekti tabamiseks vaata lehte lives!! http://detektiivid.ee/

Tüpograafia

• Osa sisudisainist ehk tekst=disain• pealkirjad• sisutekstid• nupud • jne

• Muutunud kirjatüübid, suurused, õhuvahed ja värvid

Näide: Gather.ly

Single page

• Veeb kui presentatsioon, mitte infokataloog• Sisu täies mahus ühel lehel• Eristuvad sektorid - info loogiliselt jaotatud• Navigeerimine käib kerides või läbi ankrumenüü

(eelkõige kasutajamugavuse pärast)• Sobib kompaktse sisuga lehtede jaoks • 50/50 lahendused

Näide: YourDigitalStory

NB! Efekti tabamiseks vaata lehte lives!! http://yourdigitalstory.com/home

Näide: AlterMedia

NB! Efekti tabamiseks vaata lehte lives!! http://altermedia.ee/

4. Kasutajamugavus ennekõike

• Tuttav layout• Läbiv stiil ja bränding• Sisu toetavad elemendid• Müügitunnel• Responsive lahendused

Disain ei tapa kasutajakogemust!

Näide: Kalev Spa

Kokkuvõte

Konversioonile suunatud disain arvestab kasutaja harjumustega ning muudab info kättesaamise lihtsaks.

Lihtne navigeerimine ja arusaadav struktuur suunab külastaja läbi müügitunneli soovitud tegevuseni.

Tulemuseks on koduleht, mis toob ettevõttele reaalset kasu.

Kontakt6 888 098

info@wsionline.eewww.wsionline.ee