Veebidisaini põhimõtted, mis päriselt loevad
Enamik veebidisaini nõuandeid on kas maitseküsimus või trend. Väike hulk põhimõtteid on aga püsivad, sest need tulenevad sellest, kuidas inimesed lehti loevad ja skannivad.
See juhend katab need põhimõtted ja selle, kuidas kontrollida, kas leht neid järgib.
Visuaalne hierarhia#
Kõige tähtsam üksik põhimõte. Külastaja ei loe lehte — ta skannib seda, ja hierarhia otsustab, mida ta näeb.
- Igal lehel on üks kõige tähtsam element. Kui neid on kolm, ei ole ühtegi.
- Suurus, kaal, värv ja ruum loovad järjekorra — kasuta neid koos, mitte eraldi.
- Pealkirjad peavad olema loetavad ilma lugemata: skaneeri ja saad sisu kokkuvõtte.
- Peamine tegevus peab olema visuaalselt tugevaim element.
- Teisesed tegevused peavad olema nähtavad, kuid nõrgemad.
- Test: vaata lehte kolm sekundit ja sulge silmad. Mida mäletad?
Kui iga element on rõhutatud, ei ole ükski rõhutatud. Rõhk töötab ainult kontrastis.
Loetavus#
Tekst on endiselt suurem osa igast veebilehest. Need numbrid on praktilised, mitte teoreetilised.
| Element | Praktiline soovitus | Miks |
|---|---|---|
| Põhiteksti suurus | Vähemalt 16 pikslit | Väiksem väsitab ja mobiilis suumib |
| Rea pikkus | 45 kuni 75 tähemärki | Pikem kaotab rea lõpus järje |
| Reavahe | 1,5 kordne põhitekstis | Tihe tekst on raskem skannida |
| Kontrast | Vähemalt 4,5:1 põhitekstil | Ligipääsetavuse miinimum |
| Lõigu pikkus | Kolm kuni neli rida | Pikad lõigud jäetakse vahele |
| Fontide arv | Üks või kaks | Rohkem lõhub järjepidevuse |
Ruum ja järjepidevus#
Kaks põhimõtet, mis eristavad professionaalset lehte harrastuslikust rohkem kui ükski muu detail.
- Ruum ei ole tühjus vaid rühmitus. Seotud asjad lähemale, seostamata kaugemale.
- Kasuta ühtset vahede skaalat — näiteks 4, 8, 16, 24, 32 — mitte juhuslikke numbreid.
- Sama element peab käituma ja välja nägema igal lehel ühtmoodi.
- Nupud, lingid ja vormiväljad vajavad ühte visuaalset keelt.
- Ära leiuta iga lehe jaoks uut paigutust; korda malle.
- Piira värvipaletti: üks aktsentvärv, üks neutraalne skaala, seisundite värvid.
- Järjepidevus vähendab õppimist — külastaja ei pea iga lehte uuesti mõistma.
Tagasiside ja seisundid#
Kõige sagedamini unustatud osa kujundusest ja kõige sagedasem kasutajate frustratsiooni allikas.
| Seisund | Mida kujundada |
|---|---|
| Hõljumine ja fookus | Nähtav muutus, ka klaviatuuriga |
| Laadimine | Näita, et midagi toimub, ja mille peale oodata |
| Viga | Selgita, mis läks valesti ja mida teha |
| Õnnestumine | Kinnita, et tegevus läks läbi |
| Tühi vaade | Selgita, miks siin midagi ei ole ja mida teha |
| Keelatud | Näita, miks on keelatud, mitte ainult halli nuppu |
Tühjad vaated ja veateated kujundatakse peaaegu alati viimasena või üldse mitte. Just neid näeb kasutaja kõige raskemal hetkel.
Korduma kippuvad küsimused
Kas kujundus peab järgima trende?
Ei, ja trendide järgimine on üks kiiremaid viise lehe vananemiseks. Trend on kolme aasta pärast äratuntavalt oma ajastust; hierarhia, loetavus ja järjepidevus ei vanane. Kasuta trende ainult siis, kui need lahendavad päris probleemi, mitte selleks, et tunduda kaasaegne.
Kui palju värve tohib kasutada?
Üks aktsentvärv, üks neutraalne skaala ja seisundite värvid — see katab peaaegu iga ettevõtte lehe. Piirang ei ole esteetiline reegel vaid praktiline: piiratud palett muudab hierarhia loetavaks, sest aktsentvärv säilitab tähenduse. Kui aktsentvärve on neli, ei tähenda ükski neist midagi.
Kas kujundus mõjutab konversiooni?
Jah, kuid mitte nii, nagu tavaliselt arvatakse. Ilu mõjutab vähe; selgus mõjutab palju. Kõige suurema mõjuga muudatused on tavaliselt tekst, hierarhia ja vormide lihtsustamine, mitte värvipalett. Sellepärast tasub testida sisu ja paigutust enne visuaalset ümberkujundamist.
Kas mobiilikujundus tuleb esimesena?
Enamikul juhtudel jah, sest mobiil on rangem piirang ja sunnib prioriteete paika panema. Kui alustad lauaarvutist, mahub kõik ära ja hierarhia jääb tegemata. Erand on tööriistad ja sisemised süsteemid, mida kasutatakse peamiselt suurel ekraanil.
veebidisaini põhimõttedvisuaalne hierarhialoetavus veebistüpograafia veebkasutajakogemuskujunduse reeglid
