Interaktiivne veebidisain: 12 võtet, millel on oma ülesanne

Hea interaktiivne veebidisain laseb külastajal teha midagi, mida staatiline leht ei võimalda: pöörata toodet, võrrelda kaht valikut, panna kokku oma versioon või lihtsalt mõni sekund mängida. Igal interaktsioonil peab olema ülesanne. Kui sa ei oska seda nimetada, on tegu kaunistusega, mis kulutab eelarvet ja pikendab laadimisaega.

Jagame interaktsioonid nelja ülesande järgi: selgitada, võrrelda, seadistada, rõõmustada. Allpool on 12 võtet koos kasutusolukorra, suhtelise kulutaseme ja ligipääsetavuse peamise nõudega.

Ülesanne 1: selgitada

1. Toote infopunktid. Pildil või 3D-mudelil olevale punktile vajutades avaneb lähem vaade detailile: õmblusele, andurile või hingele. Millal kasutada: tootel on kolm kuni kuus omadust, millele tasub osutada. Kulu: väike. Ligipääsetavus: infopunktid peavad olema sildiga nupud, millele saab viia klaviatuurifookuse, mitte lihtsalt täpid.

2. Kerimisega juhitav selgitav animatsioon. Toode avaneb, pannakse kokku või pöörleb, kui külastaja lehte kerib. Millal kasutada: toote töömehhanism on selle müügiargument. Kulu: keskmine. Ligipääsetavus: kui prefers-reduced-motion on sisse lülitatud, näita põhikaadreid staatiliste piltidena koos pildiallkirjadega. Rohkem kerimisvõtteid leiad animeeritud veebilehtede näidetest.

3. Enne-pärast liugur. Lohista eraldusjoont, et võrrelda vaadet enne ja pärast remonti, fototöötlust või nahahooldust. Millal kasutada: muutus on selgelt nähtav ja suur. Kulu: väike. Ligipääsetavus: liugurit peab saama juhtida nooleklahvidega ning sellel peab olema ekraanilugejale loetav nimi.

Ülesanne 2: võrrelda

4. Variantide lüliti. Vaheta suurust, viimistlust või paketti ja vaata, kuidas lehe sisu kohe uueneb. Millal kasutada: ostja kõhkleb kahe või kolme valiku vahel. Kulu: väike. Ligipääsetavus: teavita ekraanilugejat muutustest ARIA live regioni kaudu.

5. Kohe uuenev filter. Tulemused paigutuvad kriteeriumide valimisel ümber ning lühike animatsioon aitab näha, mis liikus. Millal kasutada: kataloogis on rohkem kui mõnikümmend toodet. Kulu: keskmine. Ligipääsetavus: näita tulemuste arvu tekstina ja anna igale filtriseisule oma URL, et seda saaks jagada.

6. Tegelik suurus ja AR-vaade. Vaata toodet tegelikus suuruses või telefonikaamera kaudu oma toas. Google'i model-viewer veebikomponent toetab AR-i tavalise glTF-mudeli põhjal. Millal kasutada: ekslik ettekujutus suurusest põhjustab tagastusi. Framesixty viidatud NRF/Happy Returnsi andmetel oli e-kaubanduse tagastusmäär 2025. aastal 19,3%. Kulu: keskmine. Ligipääsetavus: esita mõõtmed alati ka tekstina.

Ülesanne 3: seadistada

7. 3D-tootekonfiguraator. Vali materjal, värv ja osad ning näe mudelit reaalajas muutumas. Millal kasutada: valikud muudavad toodet sisuliselt ja selle hind õigustab arenduskulu. Sketchfabi andmetel kasvas 72 tootevariandiga enesekaitsespreide brändi POM konversioonimäär pärast 3D-konfiguraatori lisamist 0,82%-lt 3,65%-le. Framesixty hoiatab, et paljud laialt levinud 3D-näitajad pärinevad vanematest teenusepakkujate uuringutest, nii et võta neid suunanäitajana. Kulu: suur. Hon Trani hinnangul maksab ühe toote jaoks kohandatud konfiguraator 4000-10 000 $ ning mitme valiku ja valikureeglitega lahendus 10 000-30 000 $. Utsubo pakub konfiguraatoreid oma agentuuri Flagship-paketis hinnaga 100 000-200 000 $. Põhjalikuma ülevaate leiad 3D-tootekonfiguraatori hinna artiklist. Ligipääsetavus: iga valik peab toimima ka tavalise vormielemendina.

8. Interaktiivne korterivalija. Liigu kursoriga hoone fassaadile või puuduta seda, et näha korteri tubade arvu, pindala, hinda ja staatust. Ühes meie tehtud Tallinna elamuarenduse projektis avas iga valgustatud aken konkreetse kodu vaate. Millal kasutada: ehitusjärgus kinnisvara müügil, kui kortereid on rohkem kui mõni üksik. Kulu: keskmine kuni suur. Vaata meie interaktiivse korterivalija juhendit. Ligipääsetavus: paku visuaalse valija kõrval samade korterite sorteeritavat tabelit.

9. Kalkulaator või hinnapakkumise koostaja. Kuumakse, energiasääst või projekti hinnanguline maksumus muutub liugurite liigutamisel. Millal kasutada: hind sõltub sisestatud andmetest. Kulu: väike kuni keskmine. Ligipääsetavus: liugurid vajavad klaviatuurituge ja nähtavaid väärtusi; paku alternatiivina välju arvude sisestamiseks.

Ülesanne 4: rõõmustada

10. Kursorile reageeriv avavaade. Osakesed, kiri või 3D-objekt reageerivad kursori liikumisele. Millal kasutada: avavaade peaks mõjuma elavana. Kulu: keskmine. Ligipääsetavus: vähendatud liikumise korral näita staatilist kaadrit ning puuteekraanil rahulikku animatsiooni, mis ei vaja kasutaja tegevust.

11. Füüsikaseadusi järgivad mänguobjektid. Need põhinevad füüsikamootoritel, näiteks Rapieril, ning neid saab lohistada, visata või üksteise peale laduda. Millal kasutada: bränd on mänguline ja külastajal on põhjust lehele kauemaks jääda. Kulu: keskmine kuni suur. Ligipääsetavus: ära peida navigeerimist ega sisu mängu sisse.

12. Peidetud detailid. Väikesed leiud uudishimulikule külastajale, näiteks logo, mis reageerib, kui selle kohale kursori viid. Millal kasutada: brändil on huumorimeelt. Kulu: väike. Ligipääsetavus: ükski oluline teave ei tohi olla kättesaadav ainult seal.

Interaktiivsete veebielementide lühivõrdlus

Põhimõte, millest lähtume

Panusta esmalt seadistamisse ja selgitamisse: need aitavad vastata ostueelsetele küsimustele. Lisa üks rõõmu pakkuv element sinna, kuhu külastaja esimesena vaatab. Kujundusega üle koormatud lehtedel on prioriteedid sageli vastupidises järjekorras.