Kasutajakogemus (UX) reeglid ja süsteemi ühtsus
🎧 Kuula kõiki artikleid järjest
Hea kasutajakogemus ei teki sellest, et iga ekraan on eraldi kaunis. See tekib sellest, et kõik ekraanid kuuluvad kokku.
Kasutaja ei loe disainidokumente. Ta õpib süsteemi kasutamise käigus: vajutan siia, juhtub see. Kui sama muster töötab kümnes kohas ühtemoodi, hakkab ta seda ootama ka üheteistkümnendas. Kui seal juhtub midagi teisiti, tekib väike ebakõla. Piisavalt palju selliseid ebakõlasid ja usaldus süsteemi vastu hakkab vähenema.
Hea kasutajakogemus ei tähenda ainult ilusat liidest. See tähendab, et süsteem käitub järjepidevalt ja ennustatavalt.
Ühtsuse kolm taset
Visuaalne ühtsus
See on kõige nähtavam kiht — värvid, fondid, nupud, ikoonid ja vahed.
Visuaalne ühtsus ei tähenda, et kõik peab välja nägema ühesugune. See tähendab, et erinevused on tahtlikud ja tähenduslikud.
Punane nupp võib tähistada ohtlikku tegevust. Suurem vahe võib tähistada sisuplokkide vahelist piiri. Kui sama visuaalne erinevus esineb ilma tähenduseta, muutub see müraks.
Reeglid:
- iga visuaalne eristumine peab vastama hierarhiale, staatusele või tegevuse tüübile;
- sama komponendi variatsioonid peavad olema süsteemsed, mitte juhuslikud;
- värviskeem peab töötama ka kontrastinõuete korral.
Käitumuslik ühtsus
Kasutaja õpib kiiresti, kuidas süsteem reageerib.
Kui otsing töötab ühes sektsioonis ühtmoodi ja teises teisiti, peab kasutaja oma vaimse mudeli ümber ehitama.
See suurendab kognitiivset koormust.
Reeglid:
- sarnased tegevused peavad andma sarnase tulemuse;
- tagasiside peab olema kogu süsteemis ühtne;
- animatsioonide kiirus ja iseloom peavad olema kooskõlalised;
- laadimisolekud peavad olema järjepidevad.
Keeleline ühtsus
Sõnad, märgised, veateated ja kinnitused moodustavad samuti osa kasutajakogemusest.
Kui üks koht kasutab sõna „Salvesta“, teine „Kinnita“ ja kolmas „Rakenda muudatused“, peab kasutaja iga kord mõtlema, kas tegemist on sama tegevusega.
Reeglid:
- üks mõiste = üks sõna;
- kasutaja vaatenurk enne süsteemi vaatenurka;
- veateated peavad ütlema, mida teha edasi;
- süsteemi terminoloogia peab olema järjepidev.
Disainisüsteem kui ühtsuse tööriist
Suuremas veebis ei teki ühtsus juhuslikult.
Selle jaoks luuakse disainisüsteem — kokkulepitud komponentide, mustrite, värvide, tüpograafia ja reeglite kogum.
Disainisüsteemi eesmärk ei ole piirata loovust.
Selle eesmärk on vähendada otsuseid, mida tuleb iga uue lehe või funktsiooni juures uuesti teha.
Mida suurem on meeskond või veeb, seda olulisemaks muutub disainisüsteem.
Ühtsuse saavutamine praktikas
Disainimuutujad
Ühtsus algab muutujate süsteemist.
Mitte:
color: #2563EB;vaid:
color: var(--color-primary);Soovituslik kihistus:
- primitiivsed muutujad →
#2563EB - semantilised muutujad →
color-primary - komponendi muutujad →
button-bg-color
Selline lähenemine võimaldab muuta väärtusi ilma süsteemi loogikat lõhkumata.
Komponentide teek
Iga korduv liidese element peaks olema komponent.
Kui meeskond loob iga sarnase vajaduse jaoks uue komponendi, hakkab süsteem kiiresti killustuma.
Kasulik kontrollküsimus:
> Kas see on uus komponent või olemasoleva komponendi uus variant?
See aitab vältida olukorda, kus süsteemis on kümneid peaaegu identseid komponente.
Dokumentatsioon kui toode
Reeglid, mida teab ainult disainer, ei ole tegelikult reeglid.
Ühtsus nõuab, et otsused oleksid:
- dokumenteeritud;
- leitavad;
- põhjendatud.
Hea dokumentatsioon ei kirjelda ainult seda, mis on lubatud.
See selgitab ka, miks see on nii ja millal teha erandeid.
Ühtsus ja ligipääsetavus
Ligipääsetavuse seisukohalt ei ole ühtsus ainult kasutusmugavuse küsimus.
Kui fookusraamid, navigeerimine või veateated muutuvad lehtede lõikes, peavad klaviatuuri ja abitehnoloogiate kasutajad süsteemi pidevalt uuesti õppima.
WCAG põhimõtted rõhutavad järjepidevust ja ennustatavust.
Mida ühtsem süsteem on:
- seda väiksem on kognitiivne koormus;
- seda vähem eksitakse;
- seda lihtsam on süsteemi kasutada kõigil kasutajatel.
Kuidas aru saada, et süsteem ei ole enam ühtne?
Mõned praktilised märgid:
- sama tegevuse jaoks kasutatakse erinevaid nuppe;
- ühel lehel on mitu erinevat veateate stiili;
- komponentide teegis on mitu peaaegu identset komponenti;
- arendajad ei tea, millist komponenti kasutada;
- disainerid loovad pidevalt uusi variante olemasolevate asemel;
- kasutajad küsivad sageli, kuidas midagi teha.
Need on tavaliselt märgid, et süsteem vajab korrastamist.
Erandid
Ühtsus ei ole absoluutne reegel.
Mõnikord on erand põhjendatud.
Näiteks:
- spetsiaalne kasutajavoog (näiteks makseprotsess);
- A/B testimine;
- erinevad kasutajagrupid;
- administraatori- ja avaliku liidese erinevad eesmärgid.
Oluline on, et erand oleks teadlik otsus, mitte juhuslik kõrvalekalle.
Ühtsus ja kiirus
Sageli kardetakse, et süsteemsus aeglustab.
Praktikas juhtub vastupidi.
Ühtsus kiirendab:
- arendust;
- disaini;
- testimist;
- kasutajate õppimist.
Aeglustab ainult süsteemi loomise algfaas.
Kui süsteem on olemas, muutub iga järgmine muudatus odavamaks ja kiiremaks.
Kuidas Drupal aitab ühtsust hoida?
Drupal sobib hästi süsteemseks lähenemiseks, sest sisu, komponendid ja kujundus on võimalik üksteisest eraldada.
Näiteks:
- Paragraphs võimaldab kasutada korduvkasutatavaid sisukomponente;
- Layout Builder võimaldab kontrollitud paigutuse muutmist;
- Single Directory Components (SDC) võimaldab hallata komponente ühtse süsteemina.
Tulemus on keskkond, kus toimetaja saab sisu muuta ilma kujundust lõhkumata.
Mida rohkem otsuseid tehakse komponentide tasemel, seda vähem tekib juhuslikke erandeid ja seda lihtsam on süsteemi pikaajaliselt hallata.
Kokkuvõte
Süsteemi ühtsus ei ole esteetiline eelistus.
See on funktsionaalne nõue.
Kasutajad usaldavad süsteeme, mis käituvad järjepidevalt. Arendajad töötavad kiiremini süsteemides, kus komponendid on korduvkasutatavad. Organisatsioonid säästavad aega, kui otsuseid ei pea pidevalt uuesti tegema.
Ühtsus on kvaliteedi infrastruktuur — nähtamatu siis, kui see töötab, ja väga märgatav siis, kui seda ei ole.

Vajad Drupal abi?
Kui artikkel puudutab sinu olukorda, ei pea kõike lõpuni lugema. Sinuga suhtleb päris inimene ja aitab järgmise sammuni jõuda.