Kaasahaarav veebidisain kasutab reaalajas 3D-d, animatsiooni, heli või kerimisega muutuvaid stseene, et külastaja saaks toodet justkui ise kogeda. See aitab müüa siis, kui lahendab ülesande, millega tavaline leht sama hästi toime ei tule: selgitab toodet, aitab valida või jätab brändi meelde. Kui ükski neist eesmärkidest ei täitu, jääb alles vaid lehte aeglustav efekt.
Ideed saab hinnata lihtsa kontrolliga. Vaatame, millised võtted selle läbivad ja millised mitte.
Mida kaasahaarav veebikogemus tähendab
Kaasahaaraval veebilehel muudavad külastaja toimingud ekraanil toimuvat: kerimine liigutab kaamerat, kursor painutab pinda, lohistamine pöörab toodet. Tavaliselt kasutatakse WebGL-i, millega brauser joonistab graafikakiibi abil 3D-d, ja teeke nagu Three.js. Määrav on lehe vastus sinu tegevusele. Üksnes 3D olemasolu veel kaasahaaravat kogemust ei loo.
Idee kontroll: kas aitab mõista, osta või meelde jätta?
Enne kaasahaarava lahenduse heakskiitmist küsi kolm küsimust. Vähemalt ühele peaks saama selgelt jaatavalt vastata.
| Küsimus | Kontroll on läbitud, kui... | Näide |
|---|---|---|
| Kas aitab mõista? | Külastaja saab tootest kiiremini aru kui teksti ja fotode abil | Osadeks lahutatud vaade näitab toote ehitust |
| Kas aitab osta? | Vastab ostuküsimusele: suurus, viimistlus, sobivus või saadavus | Konfiguraator; hoonemudel, mille valgustatud aknad näitavad vabu kortereid |
| Kas aitab meelde jätta? | Külastaja oskab sellest järgmisel päeval kellelegi rääkida | Üks toote ideega seotud meeldejääv hetk turuletoomisel |
Ülal näidatud osakeste kujuvahetus on hea piiripealne näide. Kui osakesed moodustavad logo, aitab see vaid veidi brändi meelde jätta. Kui need koonduvad tooteks ja lahknevad siis, et näidata selle sisemisi osi, aitab lahendus ka toodet mõista.
Võtted, millel on selge ülesanne
- Toode, mida saad pöörata. Reaalajas 3D-mudel tõetruude materjalidega laseb vaadata tagakülge, talda või hinge. Nii saab ostja vastused küsimustele, mis fotode puhul lahtiseks jäävad.
- Hoone kui valikuvahend. Meie loodud Tallinna elamuarenduse näidisprojektis tähistab iga valgustatud aken hämaruses kujutatud hoonel korterit. Sellele liikudes näed tubade arvu, pindala, hinda ja staatust. 3D-mudel ise ongi korterite loend. Loe lähemalt kinnisvara 3D-veebilehtedest.
- Kerimisega juhitud lugu. Kaamera liigub läbi toote või ruumi ning lühike tekst selgitab iga peatust. Lugu jääb HTML-i, stseen toetab seda.
- Üks reageeriv avavaade. Pind vastab kursori liikumisele ja jätab seejärel ruumi lehe sisule ning müügile.
Rohkem võimalusi leiad meie WebGL-veebilehtede näidetest.
Millal kaasahaaravus hakkab kasutamist takistama
- Sissejuhatus enne sisu. Kõigepealt laadimisvaade, siis 3D-sissejuhatus ja alles lõpuks menüü. Hinda otsima tulnud külastaja lahkub.
- Navigeerimine avastamise kaudu. Kontaktide leidmiseks peab inimene 3D-ruumis ringi uitama. Hoia tavaline menüü alati nähtaval.
- Liikumine ilma rahulikuma alternatiivita. Suured kerimisega seotud liikumised võivad põhjustada pearinglust või iiveldust. Ühes ülevaates leiti tasakaaluhäirete tunnuseid 35%-l USA vähemalt 40-aastastest täiskasvanutest. Arvesta prefers-reduced-motion eelistusega ja paku staatilist varianti. Ka WCAG 2.2 nõuab võimalust pausile panna, peatada või peita automaatselt algavat liikuvat sisu, mis kestab üle viie sekundi (kriteerium 2.2.2, tase A).
- Google'i jaoks tühi leht. Kui kogu tekst on lõuendi sees, ei näe otsingumootor midagi. Utsubo WebGL-i SEO-juhend soovitab kõigepealt HTML-i ning 3D laisklaadimist pärast esmast kuvamist.
- Ainult arvutile mõtlemine. Enamik külastajaid tuleb telefoniga. Stseen, mis töötab stuudio sülearvutis sujuvalt, võib keskklassi Androidis jõnksutada.
Kuidas hoida kaasahaarav veebileht kiire
Google hindab Largest Contentful Painti heaks, kui see on 2,5 sekundit või vähem. 3D-veebilehel on suurim element sageli canvas. Lehe kiirendamiseks on tuntud võtted:
- Kuva esmalt HTML ja pilt ning asenda pilt 3D-ga, kui see on valmis.
- Tihenda mudelid: glTF, mille geomeetria on tihendatud Draco abil ja tekstuurid on KTX2 vormingus.
- Käivita stseen alles siis, kui see ekraanile jõuab, ja peata, kui see vaateväljast lahkub.
- Lepi iga stseeni jõudluspiirid kokku enne kujundamise algust.
Kaasahaaravad veebilehed ja disainiauhinnad
Kaasahaaravad veebilehed on auhinnagaleriides ülekaalus. See võib suunata meeskonda pelgalt vaatemängu taga ajama. Žüriid hindavad küll teostusoskust, kuid kasutusmugavus moodustab hindest 30%. Arutame seda tasakaalu artiklis Awwwardsi veebidisainist.
