Kuidas teha kasutajasõbraliku disainiga koduleht?

Kuidas teha kasutajasõbraliku disainiga koduleht?

Kuidas teha kasutajasõbraliku disainiga koduleht?

04. märts 2013, Maarja Laide, Kodulehed

Pilt: Zsuzsanna KilianKülastaja annab Su kodulehele hinnangu esimeste sekundite jooksul. Esmamulje on ülioluline, see määrab, mida kasutaja Su lehel järgmisena teeb. Mille pärast muidu veebiarendajad nii palju rõhku disainile panevad? Ikka wow-efekti tekitamiseks. See aga ei tähenda, et stiilne koduleht, mis meeldib ka kasutajale, on vilkuv ja super eriline leht. Ei, sugugi mitte. Jutt käib siiski kasutajasõbralikust kodulehest, mis on silmale hea vaadata ja mugav kasutada. Siin on 7 nõuannet kasutajasõbraliku kodulehe tegemiseks.

Navigeerimine ja struktuur

Kujuta ette, et Sa külastad esimest korda suurt kaubanduskeskust, kus on sadu poode. Osteldes oled märkamatult eksinud poodide vahele ega tea täpselt, kuidas tagasi alguspunkti saada. Mida Sa otsid? Keskuse plaani ja viitavaid silte.

Samamoodi käitub külastaja Sinu veebilehel. Kodulehel surfates on oluline hoida loogilist struktuuri ja navigeerimist. See tähendab, et kui külastaja otsib näiteks infot ettevõtte kohta leiab ta selle ilma suurema pingutuseta menüüst.

Pea meeles, et kellelegi ei meeldi eksinud tunne -  see suurendab põrkemäära, ehk inimesed lahkuvad Su lehelt ilma ühegi lisaklikita, kuna nad ei oska kuhugi edasi minna; tekitab negatiivse emotsiooni; vähendab müüki ja päringute arvu.

Ühtlasi oleks viisakas nimetada asju tuntud nimedega. Ehk ettevõttest info menüünupp võiks olla „Meist“, „Firmast“, „Ettevõttest“  vm millega kasutajad on harjunud. Kasuta levinud mõisteid, mida veebis sageli kohtad. See ei ole koht, kus näidata oma loomingulisust. Tulemuseks on segaduses kasutajad.

menüü

Sisu

Liiga sageli mõeldakse, et veebilehe kujundamise ja funktsionaalsuse arendamisega on veebileht põhimõtteliselt valmis. Vaja vaid tekstid sisestada ja ega seal enam midagi valesti ei saa minna. Oi kui vale arusaam.

Tegelikkuses on arvutiekraanilt teksti lugemine silmadele väsitav ja tervelt 25% aeglasem kui prinditud teksti lugemine. See aga tähendab, et kodulehe teksti loetavus otsustab, kas külastaja viitsib Su lehel üldse pikemalt peatuda või mitte.

Sisu puhul loeb nii teksti stiil, pikkus kui liigendamine.

  • Stiil – Kasuta lihtsat stiili, mis on kõigile arusaadav. Väldi tehnilisi mõisteid, lühendeid jm. millest esmakordne külastaja ei pruugi aru saada. Ühe lause kohta piisab ühest mõttest. Jälgi teksti ladusust.
  • Pikkus – Teksti pikkus sõltub sellest, mis Sul öelda on. Ära kirjuta kodulehele entsüklopeediat. Liiga pikka teksti ei viitsi keegi lugema hakata. Mõtle ise, kas Sina viitsid seda uuesti lugeda? Väldi ka teist äärmust. Liiga vähe infot jätab õhku palju vastamata küsimusi.
  • Liigendamine – Selleks, et loodud sisu oleks ka loetav on oluline teksti liigendamine. Lisa tekstile õhuvahesid, see rõhutab olulist infot ning muudab teksti paremini haaratavaks. Sa oled sisu nimel kõvasti vaeva näinud, ära riku seda suurte tekstiblokkidega, mida on võimatu lugeda.

Font ja teksti suurus

Kirjatüübi valikul tasub tähelepanu pöörata fondi loetavusele. Pikemate sisutekstide puhul eelista lihtsa joonega kirjatüüpe nagu Arial, Verdana või Trebuchet.

Levinud viga, mida kodulehe tegemisel tehakse on liiga väikse fondi kasutamine. Väike font võib ju ilus olla, aga kui 20+ vanuses külastajad seda lugeda ei suuda, siis on ikka päris jama. Samas jälgi, et suurem font ei rikuks lehe üldist disaini. Leia kuldne kesktee.

Pildid

Pildid aitavad teksti liigendada ja muudavad selle lihtsamini loetavaks ja elavamaks. Piltide kasutamisel jälgi, et need seostuksid sisuga. Ka kõige ilusam pilt ei lisa väärtust, kui see on täiesti juhuslik ega anna kasutajale mõista, millega ettevõte tegeleb.

Piltide kasutamisel väldi tüüpilisi Istockphoto’sid. Need on ära leierdatud ja keegi ei usu, et Sinu firmas töötab see miljoni dollari naeratusega Aasia neiu. Kasuta päris inimeste pilte ja toodete fotosid. See lisab usaldusväärsust ja eristab Sind teistest sarnastest teenusepakkujatest.

HalbHea

Värvid

Kuum trend veebimaastikul on toon toonis kodulehe disain. Seda näeb päris sageli – helehallil taustal natukene tumehallim tekst.

Kodulehe tegemisel on ilmselgelt oluline, et värvid omavahel kokku sobiksid ja moodustuks ühtne tervik. Toon toonis lahendus on lihtne vastupanutee, mis mõjub stiilselt. Kuid kahjuks kasutajakogemuse arvelt. Madal kontrastsus teeb teksti lugemise keeruliseks. Tuletan meelde, et kõigil internetikasutajatel ei ole kulli nägemist.

Vali veebi jaoks 2-3 põhivärvi, mis ei oleks toon toonis kuid piisavalt kontrastsed ja sobituksid värvipaletti. Vaata värvide sobivust näiteks colourlovers.com kodulehelt. Kujunda terve koduleht ühtselt valitud värvitoonides. Pane paika tausta ja teksti värv. Tekstis määra linkidele erinev toon, et neid oleks kerge muust tekstist eristada.

Arvesta, et tume tekst heledal taustal on oluliselt paremini loetav kui hele tekst tumedal taustal. Viimane tekitab viirastusi ja ajab tundlikumate silmadega inimestel silmad vett jooksma, rääkimata lootusetust katsest tekstist midagi välja lugeda.

Kiirus

Paar aastat tagasi tegi Google uuringu, kas kasutajad eelistaksid 10 tulemuse asemel 30. Vastuseks oli 30. Google testis antud lahendust ja tulemuseks oli 20% külastatavuse langevus lehtedel, kus kuvati 30 otsingutulemust.

Mis oli selle põhjuseks?

Lehe laadimiskiirus oli pool sekundit aeglasem.

Amazon koges sarnast külastatavuse langust, kui nende lehe laadimiskiirus langes murdosa sekundi võrra.

Interneti kasutajad ON kannatamatud. Seega kodulehe laadimiskiirus on kriitilise tähtsusega kasutajamugavuse seisukohalt. Külastajad ei jaksa oodata minut aega, et su leht laeks, isegi paar sekundit on liiga palju. Gomez uuringu kohaselt ootab keskmine internetis ostleja, et leht laeks vähemalt 2 sekundiga. Pikem laadimisaeg kui 3 sekundit tähendab, et 40% külastajatest lahkub lehelt. Seega aeglasel lehel on oma hind – kaotatud külastaja ja kaotatud potentsiaalne tulu.

Pea meeles, mida rohkem sisu Sa oma veebile laed, seda aeglasemaks muutub leht. Lihtsaim viis lehe kiiruse reguleerimiseks on teha pildid väiksemaks. Kuid mitte liiga pisikeseks, et need uduseks muutuks.

Lehe laadimiskiirust saad testida tasuta tööriistadega nagu PageSpeed Insights või pingdom (rohkem valikuid Six Revisions blogis).

Pop-up’id

Iga veebis surfaja teab, et pop-up’id on tüütud. Eriti need, mis ilmuvad kohe lehele sattudes ja blokeerivad terve sisu. Seejuures kutsuvad liituma e-maili listiga, et saada väärt nõuandeid. Idee on ju tore ja võib-olla toobki mõne uudiskirjaga liituja, kuid tõenäosus kümnekordselt rohkem külastajaid välja vihastada on suurem. Kuidas saab kasutaja hinnata, kas ta soovib Su uudiskirjaga liituda, kui talle ei ole antud võimalust sisuga isegi tutvuda?

Pop-up’e on võimalik kasutada ka viisakalt. Näiteks paremast nurgast ilmuv uudiskirjaga liitumise kutse, mis ilmub alles siis, kui külastaja on lehel mõnda aega viibinud. Selliselt kindlustad, et külastaja on jõudnud Sinu ettevõttega tutvuda, mille põhjal saab langetada ratsionaalse otsuse, kas ta soovib Sinuga ka edaspidi kontakti hoida.

Boonus: SEO

Kasutajasõbraliku kodulehega kaasneb väga oluline eelis. Google eelistab kodulehti, mis meeldivad ka kasutajatele. Loogilise struktuuriga koduleht, mis pakub ajalikku sisu ja kasutajale väärtus teenib Google silmis plusspunkte nende kodulehtede ees, mis jätavad külastaja sihitult lehele uitama.

Kokkuvõte

Kodulehte planeerides mõtle eelkõige kasutajale. Mida ta otsib Sinu lehelt ja kuidas ta seda otsib? Hullu disainiga koduleht võib tekitada esialgse wow-efekti, kuid kui see efekt jääb kestma vaid esimesed sekundid, siis ei too see soovitud tulemusi. Koduleht, mis on hästi läbi mõeldud on võrdselt hea nii disainilt, sisult kui kasutajakogemuselt.

Teksti esialgne autor on Jaanika Kivilo.

Google

Vaata kõiki postitusi

© 2016 Kõik õigused kaitstud. Oleme iseseisvalt tegutsev ja õigusi omav WSI frantsiisiäri.