UX soovitused

Soovime tõsta teadlikkust ja seetõttu avaldame kasutajaliidese UX soovitused, kuidas valida või eelistada kasutajakeskseid lahendusi, mis oleksid loogilised, intuitiivsed ja seejuures mugavad kasutada. Lisaks WCAG 2.1 standardist tulenevatele nõuetele on kokku kogutud ka teised UX head tavad ning suunised.

Vaata ka UX reegleid ja hakka Pure Design Facebook lehe jälgijaks, kuhu postitame perioodiliselt samad kasutajaliidese UX soovitused.

Rippmenüü - mitmikvalik (multiselect)

Kuigi pikad rippmenüüd pole kasutajasõbralikud, siis kasutatavuse tõstmiseks võib rippmenüü valikuid grupeerida.

Rippmenüü - mitmikvalik

Mitmikvalik rippmenüüd kasutatakse siis, kui kasutajal peab olema võimalik valida nimekirjast korraga rohkem kui üks valik.

Rippmenüü - navigatsioon

Rippmenüüs navigeerimiseks tuleb toetada klaviatuurisisendit, mis tähendab, et rippmenüü peab olema ligipääsetav ilma hiirt kasutamata.

Rippmenüü - silt

Rippmenüü - silt (label) peab alati olema nähtaval

Rippmenüü - autocomplete

Kasutajaliidese UX soovitused - Kui rippmenüü valikute arv on rohkem kui 10-15 muutub kasutajatel valiku tegemine keerulisemaks. Seetõttu tuleb sellisel juhul lisada rippmenüüle autocomplete funktsionaalsus.

Rippmenüü - vähe valikuid

Kui rippmenüüs on valikuid vähe, näiteks 2-5, tuleks rippmenüü asendada mõne muu UI elemendiga. Alternatiivsed valikud on raadionupud (radiobutton), märkeruudud (checkbox), nupugrupid (button group) või lülitiga (toggle). Kusjuures enam levinud valik tuleks eeltäita.

Rippmenüü - palju valikuid

Pikad rippmenüüd, mis nõuavad kerimist, ei võimalda kasutajatel näha kõiki valikuid korraga. Kui kasutajale on vajalik näidata palju valikuid korraga, kaaluge nende esitamiseks alternatiivseid viise - tradistioonilisi linke või megamenüüd.

Rippmenüü - mitteaktiivsed valikud

Rippmenüü valikud, mis ei ole aktiivsed ja mida kasutaja valida ei saa tuleb eemaldamise asemel muuta halliks, indikeerides seeläbi mitte-aktiivset seisundit.

Rippmenüü - muutuvad valikud

Vältige interakteeruvaid menüüsid, kus ühe menüü valikud muutuvad, kui kasutajad valivad midagi sama lehe teisest menüüst.

Rippmenüüd (dropdown)

Kasutage rippmenüüsid vaid siis, kui kasutajad teavad ette, millist valikut nad tegema peavad (st nad ei pea tutvuma kõikide valikutega enne valiku tegemist).

Mitteaktiivsed nupud

Mitteaktiivsed nupud ei anna kasutajale informatsiooni, milles seisneb viga, mida on vaja teha, et nad aktiivsesse olekusse saada. Lisaks ei ole mitteaktiivsed nupud tavaliselt fokuseeritavad ja seetõttu ei pääse kasutajad neile ligi klaviatuuriga ega ka ekraanilugeriga. Viimasel juhul ei pruugi kasutaja teada saada, et nupp vormil üldse olemas on. Mitteaktiivsed nupud ei ole tavaliselt ka piisava kontrastsusega.

Vigaselt täidetud väljad

Vigaselt täidetud väljad või täitmata jäetud kohutuslikud väljad peavad olema visuaalselt eristatavad

Tühista valik - nupp või link?

Tühistamine ei ole toiming ja seega ei tohiks see olla nupp. Tühistamisvalik on toimingu katkestamine ja kasutajaliidese eelmisse vaatesse tagasi liikumine ehk oma olemuselt navigeerimine. Navigeerimiseks aga kasutatakse veebis linke.

Värvipimedus

Hinnanguliselt on maailmas ca 8% meestest ja 0,5% naistest värvipimedad. See tähendab Eesti kohta umbes 112 tuhandet teistes toonides värve nägevat kasutajat. Seega ei tohi info edastamisel kasutada ainult värvi. Ligipääsetavust aitab suurendada piisav värvide kontrastsus ning värvide kasutamine koos ikoonide ja tekstilise informatsiooniga.

Esteetiline kasutusmugavus

Kasutajaliidese UX soovitused - Inimesed kipuvad hindama tulemust või toodet selle järgi, kuidas see neile esteetiliselt tundub.

Jadapositsiooni efekt

Kasutajaliidese UX soovitused - Inimesed kipuvad mäletama ainult esimest ja viimast osa sarjast, mida nad just nägid või lugesid, ning jätavad keskosa sageli tähelepanuta.

Info elementide hulk (Millers's Law)

Kasutajaliidese UX soovitused - Info elemendid tuleb jagada kuni üheksasse kategoorisse, kuid eelistatult kuni viite.

Pikkade protsesside käivitamine taustal

Kasutajaliidese UX soovitused - Võimalda pikkade protsesside puhul nende käivitamist taustal, et kasutaja saaks samal ajal oma tööd jätkata.

Edenemise indikaator (progress indicator)

Kasutajaliidese UX soovitused - Kui käsu täitmiseks kulub rohkem kui 10 sekundit, tuleb kuvada edenemise indikaatorit (progress indicator). Ootamise animatsioonid, muudavad protsessi kasutajale meeldivamaks ja vähendavad ebakindlust toimuva osas.

White space

Kasutajaliidese UX soovitused - White space on kujunduselementide vaheline ala.

Breadcrumbs navigatioon

Breadcrumbs on oluline navigatsioonielement, mis toetab kasutaja teekonda

Megamenüü

Megamenüüd pakuvad paremat kasutajakogemust kui loendiga rippmenüüd

Reavahe

Kasutajaliidese UX soovitused - Reavahe peaks olema umbes 140% fondi suurusest.

Teksti värv

Kasutajaliidese UX soovitused - Must tekst valgel taustal on küll väga hea kontrastsusega, aga põhjustab silmade väsimust. Seetõttu ei soovitata kasutada täis musta ja täis valget.

Teksti kaal

Kasutajaliidese UX soovitused - Üks font võib olla erineva kaaluga. Kahe kaalu vahe ei pruugi olla visuaalselt hästi eristatav, seetõttu jäta valikut tehes üks aste vahele.

Kirjasuurus (font size)

Kirjasuurus (font size)

Kirjatüüp

Kirjatüübi valik

Rea pikkus

Reapikkus peab olema 140% fondi suurusest

Teksti joondus

Tekst joondage vasakule

Modaalaknas X valik

Modaalses dialoogi aknas sulgemise X kasutamine annab kasutajale lisavaliku kõhkluse korral

Ikoonide kujundus ja arusaadavus

Kasutajaliidese UX soovitused - Kasutage lihtsa kujundusega ikoone, miis on arusaadavad ka suuruse vähendades

Ikoonide kasutatavus

Ikoonide kasutamisel lisage ikoonile alati tekstisilt

Siltide (labels) paigutus

Sildid (labels) paiguta alati vormiväljade kohale, sest nii on kergem infot leida ja selles orienteeruda ja seega on vormiga töötamine kiirem.

Bänneripimedus

Bänneripimedus - Vältige olulise sisu paigutamist veebilehe paremasse äärde, sest seal on kasutajatel bänneripimedus.

Kasutajaliidese tasandid

Kasutajaliidese tasandid - Vältida tuleks mitmetasandiliste kihtide tekitamist nagu näiteks ühe modaali avamist teise peale, et mitte suurendada rakenduse tajutavat z-sügavust ja visuaalse keerukuse lisamist.

Modaalaknad

Modaalaknad - Vältige kasutajate asjatut segamist modaalakende kuvamisega.. Kasutage oluliste hoiatuste jaoks modaalseid dialooge, et vältida või parandada kriitilisi vigu.

Sisestuskasti silt

Kasutajaliidese UX soovitused: isestuskasti silt (label) peab olema alati nähtav

Nuppude tähtsuse järjekord

Kasutajaliidese UX soovitused:Nuppude tähtsuse järjekorda seadmine on mitme tegevusnupu puhul oluline

Vormiväljade laius

Kasutajaliidese UX soovitused: Vormiväljade laius peab vastama eeldatava sisendi pikkusele