Upload
wsi-online
View
715
Download
2
Embed Size (px)
DESCRIPTION
Mõni aeg tagasi kirjutas meie disainer Tanel Eero veebidisaini trendidest Best Marketingis. Tanel tõi välja neli trendi kodulehtede välisilme muutumises. Esiteks: üha rohkem püütakse infot edasi anda pildilisel kujul. Teiseks: kujunduses eelistatakse puhtust, selgust ning lakoonilisust. Kolmandaks: eristumiseks kasutatakse üha ootamatumaid võtteid. Ja neljandaks: kõige selle juures peab koduleht jääma kliendile mugavaks ja kiireks info otsimise kohaks.
Citation preview
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.