Korrus 02 · Veeb
UI/UX disain. Selged ekraanid, vähem küsimusi.
UX disain ehk kasutajakogemuse disain määrab, kuidas toode töötab, ja UI disain, kuidas see välja näeb: mida kasutaja näeb esimesena, kuidas ta töö tehtud saab ja kus ta kinni jääb. yop kujundab Tallinnas äppe, SaaS-tooteid ja kodulehti uuringust ja kavanditest kuni disainisüsteemini, mille järgi arendajad ehitavad, ning teeb ka oma tooteid.
UI ja UX
UI disain ja UX disain: mida kumbki hõlmab?
UX disain on see, kuidas toode töötab: sammud, mida kasutaja teeb, info igal ekraanil, otsuste järjekord ja see, mis juhtub vea korral. UI disain hõlmab välimust ja tunnetust: paigutust, kirjatüüpi, värve, nuppe, olekuid ja liikumist. Hea UX kehva UI-ga tundub ebausaldusväärne; hea UI kehva UX-iga näeb kena välja ja kaotab ikkagi kasutajaid.
Teeme mõlemat, just selles järjekorras. Voogu testitakse halli kavandina enne, kui lisandub ükski värv, sest voo muutmine on siis odav, pärast arendust aga mitte.
- Uuring. Intervjuud, analüütika ja seansisalvestused, et leida, kus inimesed hätta jäävad.
- Struktuur. Infoarhitektuur, kasutajavood ja kavandid (wireframe'id).
- Liides. Visuaalne disain, komponendid, olekud ja ligipääsetavus.
- Üleandmine. Disainisüsteem ja märkustega failid, mille järgi arendajad ehitavad.
Testige ise
Märgid, et toode vajab UX-tööd.
Märkige, mida olete viimase kuu jooksul näinud. Iga märgi saame jälitada konkreetse ekraanini.
0/ 6
Midagi pole veel märgitud. Valige need, mida olete näinud.
Üks märk: sageli tuleb parandada üks ekraan või silt.
Muster. Lühike UX-audit näitab, kust see algab.
Toode kaotab kasutajaid. Alustage põhivoogude uurimisest.
Mida kujundame
Kuus tulemust, mille järgi ehitada.
UX-audit
Testime praeguse toote või lehe kasutatavust ja ligipääsetavust ning järjestame probleemid selle järgi, kui palju need kasutajaid segavad.
Kasutajauuring
Lühikesed intervjuud ja testid päris kasutajatega ning analüütika, mis näitab, kus inimesed pooleli jätavad.
Kavandid ja vood
Iga põhiülesanne joonistatakse hallis samm-sammult, nii et loogika on kokku lepitud enne kujundamist.
Klikitav prototüüp
Figma prototüüp, mida kasutajad ja teie meeskond klõpsavad läbi nii sülearvutis kui ka telefonis.
UI disain
Ekraanid teie brändis, iga olek joonistatud: tühi, laadimine, viga ja õnnestumine.
Disainisüsteem
Komponendid, tokenid ja reeglid Figmas, koodiga kooskõlas, et uued ekraanid jääksid ühtseks.
Proovige
Kolm menüüd, üks ülesanne.
Puutestis saab inimene ülesande ja ainult menüü, ilma kujunduseta. Tema klikid näitavad, kas sildid on arusaadavad. Vaadake, kuidas üks kasutaja proovib kolme versiooni.
Puutesti illustratsioon. Päris testis saab sama ülesande rühm kasutajaid ja iga tee salvestatakse.
Ülesanne
Kust leiate tagastusreeglid?
Klikid 4
Ei leitud
Vanad sildid: neli klikki ja kasutaja loobub.
Töö käik
Neli sammu toimivate ekraanideni.
Mõistmine
Eesmärgid, kasutajad ja praegune toode intervjuude, analüütika ja auditi põhjal.
Struktuur
Põhiülesannete vood ja kavandid, koos üle vaadatud ja paari kasutajaga testitud.
Kujundus
Liides teie brändis, kõik olekud kaasa arvatud, klikitava prototüübina.
Üleandmine
Disainisüsteem ja märkustega failid ning aeg arendajatega ehituse ajal.
Levinud müüdid
Disainimüüdid, mis peletavad kasutajaid.
Kolm uskumust, mida kohtame peaaegu igal esimesel kohtumisel. Igaüks kõlab mõistlikult ja igaüks teeb toote kasutamise raskemaks.
Sageli kuuleme
„Kasutajad loevad juhendit.“
Mida näeme
Harva. Kui ekraan vajab kasutusjuhendit, on probleem ekraanis; selged sildid ja mõistlikud vaikeväärtused peaksid ise selgitama.
Sageli kuuleme
„Kasutajatega testime pärast avamist.“
Mida näeme
Võib küll, aga siis on iga muudatus kood. Käputäis inimesi, kes prototüübi läbi klõpsavad, leiab suurimad vead ajal, mil parandus võtab Figmas minuteid.
Sageli kuuleme
„Ligipääsetavus on oluline vaid vähestele.“
Mida näeme
Kontrast, fookuse olekud ja selged sildid aitavad kõiki: päikesepaistelisel tänaval, aeglase telefoniga, üks käsi hõivatud. ELis teeb Euroopa ligipääsetavuse akt selle paljude digitoodete ja -teenuste puhul ka seaduslikuks kohustuseks.
Võrdlus
Millele vastab iga etapp.
| UX uuringu, UX disaini ja UI disaini võrdlus | UX uuring | UX disain | UI disain |
|---|---|---|---|
| Küsimus | Mida kasutajad vajavad ja kus nad hätta jäävad? | Kuidas toode peaks töötama? | Milline on välimus ja tunnetus? |
| Tulemus | Leiud ja prioriteedid | Vood, kavandid, prototüüp | Ekraanid, komponendid, disainisüsteem |
| Tavaline kestus | Päevadest paari nädalani | Nädalad | Nädalad |
| Meil | Jah | Jah | Jah |
Algus
Esimesed kaks nädalat UX-auditis.
Audit on tavaline esimene samm ja jääb meelega lühikeseks. Nii kulgevad esimesed kaks nädalat esimesest kõnest kuni järjestatud parandusteni.
1. päev
Avakõne
Eesmärgid, kasutajad ja olulisemad vood lepitakse kokku ühel kõnel. Jagate analüütikat ja salvestusi, kui neid on.
Päevad 2–5
Vaatame ja kuulame
Analüütika, seansisalvestused ja tugipöördumised vaadatakse läbi ning paari kasutajat intervjueeritakse.
2. nädal
Test
Põhiülesandeid proovivad päris kasutajad teie töötavas tootes või kiirel prototüübil.
10. päev
Leiud
Järjestatud probleemide nimekiri, igaühel ekraan, tõendid ja parandusettepanek.
Mitu keelt
Kas kujundate liideseid mitmes keeles?
Jah. Teksti pikkus muutub keelest keelde: saksa ja eesti sildid venivad pikaks ning araabia keel loeb paremalt vasakule, mis peegeldab kogu paigutuse. Kujundame komponendid, mis venivad, murravad rida ja pöörduvad, ning testime põhiekraane enne üleandmist pikimas ja paremalt vasakule loetavas keeles.
See säästab hilisema parandusringi, kui tõlgitud nupp enam ära ei mahu või paremalt vasakule leht laguneb.
Oma toode
Näidake ekraani, kus kasutaja takerdub.
Saatke link või paar ekraanipilti. Kahe tööpäeva jooksul kirjutab üks asutajatest, mida me testiksime esimesena.
Küsimused
Mida küsitakse disaini kohta.
Mida UI/UX disain sisaldab?
UI/UX disain planeerib, kuidas digitoode töötab (UX) ja kuidas see välja näeb (UI), alates uuringust ja kavanditest kuni visuaalse disaini, prototüüpide ja disainisüsteemini. yop teeb seda äppidele, SaaS-toodetele ja kodulehtedele.
Kui palju maksab UX disain?
UX disaini hind on fikseeritud iga etapi kohta, olgu see audit, põhivoogude komplekt või terve disainisüsteem. yop lepib selle kokku pärast lühikest tutvumiskõnet.
Kui kaua võtab UI/UX disaini projekt aega?
Audit võtab paar päeva, kõige rohkem kaks nädalat. Toote põhivoogude ja liidese kujundamine võtab tavaliselt mitu nädalat, suurte ja paljude rollidega toodete puhul kauem.
Mida me lõpuks saame?
Figma failid kõigi ekraanide ja olekutega, klikitava prototüübi ning disainisüsteemi komponentide ja märkustega arendajatele. Kõik failid kuuluvad teie ettevõttele.
Kas teie disain on ligipääsetav?
Jah. yop kujundab WCAG 2.2 AA järgi: kontrast, fookuse olekud, kirja suurus, sildid ja klaviatuuriga kasutamine kontrollitakse enne üleandmist.
Kas saate kujundatu ka valmis ehitada?
Jah. Korrused Tarkvara ja Veeb ehitavad samadest failidest äppe, SaaS-tooteid ja kodulehti, nii et disaini ja koodi vahel ei lähe ükski detail kaduma.
Mitme kasutajaga te testite?
Tavaliselt viie kuni kaheksaga ühes ülesandepõhises testiringis: sellest piisab, et näha probleeme, mis enamikku inimesi takistavad. Eelistame mitut väikest ringi, vahepeal parandades, ühele suurele testile lõpus.
Kiired kodulehed ja e-poed, mis müüvad igas keeles, mida vajate.
Kiired, mitmekeelsed kodulehed ja veebirakendused, mida muudate ise.
WordPressi lehed, mida teie meeskond muudab ja Google loeb.
Poed, mis müüvad, tarnivad ja hoiavad laoseisu korras.
Üks leht, üks pakkumine, tehtud klikke päringuteks muutma.
Uuendused, varukoopiad, turvalisus ja väikesed muudatused igal kuul.
Kiiremad lehed, läbitud Core Web Vitals, vähem kaotatud külastajaid.