UI/UX dizaina kursi: praktisks ceļvedis no lietotāja problēmas līdz pārbaudāmam prototipam

UI, UX un produkta dizains: ko tie patiesībā risina

UX jeb lietotāja pieredze aptver visu ceļu, kurā cilvēks mēģina sasniegt mērķi: ko viņš saprot pirms vietnes atvēršanas, kā atrod vajadzīgo, kas rada šaubas un kas notiek pēc darbības. UI jeb lietotāja saskarne ir šī ceļa redzamā un interaktīvā daļa — izkārtojums, tipogrāfija, kontroles, stāvokļi, paziņojumi un vizuālā hierarhija.

Labs vizuālais slānis nevar izglābt nepareizu struktūru, un laba struktūra var kļūt nelietojama, ja interfeiss nesniedz saprotamu atgriezenisko saiti. Tāpēc mācībās abām disciplīnām jāsatiekas vienā projektā, nevis jāpaliek divās teorijas prezentācijās.

Pirms maketa: formulējiet lietotāja uzdevumu un pierādījumus

Frāze “vajag modernāku mājaslapu” nav pietiekams uzdevums. Aprakstiet situāciju, cilvēka mērķi, šķērsli un pierādījumu, ka šķērslis eksistē. Pierādījums var būt atbalsta jautājumi, meklēšanas dati, analītikas kritums konkrētā solī, intervija vai lietojamības novērojums. Viena metrika bez konteksta vēl nepaskaidro cēloni.

Kad [konkrēts lietotājs] mēģina [pabeigt uzdevumu] situācijā [konteksts],

viņam traucē [novērots šķērslis], ko pierāda [avots vai novērojums].

Mēs pārbaudīsim [izmaiņu], vērojot [uzvedības signālu] un [kvalitātes aizsargmetriku].

Pilns UI/UX darba cikls vienā tabulā

Projektējiet plūsmu, nevis tikai ideālo ekrānu

Portfolio bieži rāda tikai skaisto sākumstāvokli. Reāls produkts dzīvo arī tukšā, ielādes, kļūdas, aizpildītā, nepieejamā un veiksmīgā stāvoklī. Ja forma noraida ievadi, cilvēkam jāredz, kas jālabo, kur tas atrodas un vai iepriekš ievadītais ir saglabāts.

Uzzīmējiet plūsmu pirms augstas detalizācijas maketa. Katram solim pierakstiet lietotāja jautājumu, vajadzīgo informāciju, darbību, sistēmas atbildi un iespējamo atkāpšanās ceļu. Tas ātri atklāj trūkstošu saturu un neizprojektētus izņēmumus.

• Sākuma un atgriešanās punkts
• Galvenā darbība un saprotams rezultāts
• Tukšais, ielādes, kļūdas un veiksmīgais stāvoklis
• Atcelšana, atgriešanās un datu saglabāšana
• Mobilais izkārtojums un garš lokalizēts teksts

Figma ir darba vide; prototips ir jautājums

Figma ļauj veidot komponentes, variantus, auto layout un klikšķināmus prototipus. Taču komponentu skaits nav dizaina kvalitātes mērs. Pirms prototipēšanas nosauciet jautājumu: vai lietotājs atrod cenu, saprot nākamo soli, pamana kļūdu vai spēj salīdzināt variantus? Prototipā iekļaujiet tikai tik daudz ekrānu, cik vajadzīgs šā jautājuma pārbaudei.

Komponentēm dokumentējiet noklusēto, hover, fokusa, aktīvo, atspējoto, ielādes un kļūdas stāvokli, ja tas attiecas uz konkrēto elementu. Handoff izstrādātājam kļūst drošāks, ja makets parāda uzvedības noteikumus, nevis tikai statisku pikseļu attēlu.

Piekļūstamība kā kvalitātes pamats, nevis pēdējais audits

WCAG 2.2 papildina iepriekšējās vadlīnijas ar kritērijiem, kas skar fokusa redzamību, vilkšanas alternatīvas, minimālo mērķa izmēru, atkārtotu datu ievadi un piekļūstamu autentifikāciju. Dizaineram nav jāgaida izstrādes beigas: daudzas problēmas rodas tieši struktūrā, krāsu izvēlē, komponentu stāvokļos un kļūdu tekstā.

Kontrasts nav tikai teksta jautājums. Arī vadīklām, fokusa indikatoriem un nozīmīgām grafiskām daļām jābūt uztveramām. Krāsa viena pati nedrīkst būt vienīgais veids, kā norādīt kļūdu vai statusu. Tastatūras secība un semantika jāapstiprina izstrādē, taču dizaina failam tās jāparedz.

• Skaidra virsrakstu un satura secība
• Lasāms teksta un būtisko interfeisa elementu kontrasts
• Redzams fokusa stāvoklis
• Pietiekami lieli un atdalīti darbību mērķi
• Etiķetes un kļūdu norādes, kas nepaļaujas tikai uz krāsu
• Izkārtojums, kas nezaudē saturu palielinājumā un mobilajā skatā

Testējiet uzdevumu un sargājiet kvalitāti ar otru metriku

Lietojamības testā nedemonstrējiet pareizo ceļu. Dodiet cilvēkam situāciju un mērķi, tad vērojiet, kur viņš apstājas, ko pārprot un ko sagaida pēc darbības. Pieci novērojumi nav statistisks pierādījums par visu auditoriju, taču tie var atklāt atkārtotas strukturālas problēmas, kuras pēc labojuma jāpārbauda vēlreiz.

Konversijas rādītāju vērtējiet kopā ar aizsargmetriku. Ja īsāka forma palielina iesniegumu skaitu, pārbaudiet arī kvalificēto pieteikumu īpatsvaru, kļūdu skaitu, atcelšanu vai atbalsta pieprasījumus. Citādi optimizācija var vienkārši pārvietot problēmu uz nākamo komandu.

Kā izvēlēties UI/UX kursu un ko likt portfolio

Kvalitatīvs kursa projekts parāda ne tikai gala ekrānus, bet domāšanas ķēdi: sākotnējo jautājumu, pierādījumus, svarīgākos kompromisus, prototipa testu, labojumu un nākamo nezināmo. Nav vajadzīgs izdomāt iespaidīgu lietotāju skaitu vai konversijas pieaugumu. Godīgs ierobežojumu apraksts ir profesionālāks par nepierādītu rezultātu.

• Vai būs darbs ar problēmas formulējumu un saturu pirms UI?
• Vai projektā jāizveido kļūdu un citi neideālie stāvokļi?
• Vai prototipu testēs ar uzdevumu, nevis tikai prezentēs?
• Vai saņemsiet kritiku par lēmumiem un piekļūstamību?
• Vai portfolio drīkstēs parādīt procesu, neizpaužot sensitīvus datus?

Nodarbību formāts Hexa Academy

Nodarbības notiek individuāli vai nelielā grupā, klātienē Rīgā vai tiešsaistē. Individuāla 60 minūšu nodarbība maksā €50 + PVN; nelielā grupā — €30 + PVN par personu. Programmu iespējams veidot ap Jūsu mājaslapu: no problēmas formulējuma un plūsmas līdz prototipam, testēšanas plānam un skaidram nākamajam solim.