Tā pati Oga Navigate navigācija veikalā, tikai pārlūkā un bez lejupielādes. Preci var atrast un tās eju redzēt jau mājās, nevis stāvot pie plaukta. Lapa ir uzzīmēta divos platumos - darbvirsmas un mobilajā skatā.
LOMADizains un pētījums - viens cilvēks
ILGUMSTrīs mēneši
METODESLietotāja ceļa karte, vietnes struktūra, lietojamības pārbaude
STATUSSPrototips - koncepts, nav publicēts
KONTEKSTSGoogle UX Design Professional Certificate
oga-navigate.lv
1440px / darbvirsma
402px / mobilais
PROJEKTA PĀRSKATS
PROBLĒMA
Nevienā no Latvijas pārtikas veikalu vietnēm, ko apskatīju, nav redzams, kurā ejā prece patiesībā stāv. Darba laiki, adrese un veikala plāns ir izmētāti pa dažādām vietnēm vai vispār nav digitāli. Mobilā lietotne to atrisina tikai tiem, kas ir gatavi to lejupielādēt.
MĒRĶIS
Vietne, kurā jebkuru preci var atrast un redzēt tās eju no jebkuras ierīces, bez lejupielādes - arī iepriekš, mājās pie liela ekrāna, pirms došanās uz veikalu.
MANA LOMA
Pētījuma pārnešana uz jauno kontekstu, vietnes struktūra, skices uz papīra un Figmā uzreiz abos platumos. Augstas detalizācijas maketi, prototips un lietojamības pārbaude.
2platumi vienam dizainam
1labojums no pārbaudes
5,3:1zīmola zaļais uz fona
KO MAINĪJA PĒTĪJUMS
Pētījums ir tas pats, kas mobilajai lietotnei: divas intervijas ar Rīgas pircējiem - strādājošu vecāku un pensionāru. Kad tās pašas atbildes izlasīju no jauna, domājot par pārlūku, parādījās trešais lietošanas gadījums, kura lietotnē nav vispār. Gatavošanās notiek mājās, pie liela ekrāna, pirms iziešanas no mājām.
Tas apgrieza pieņēmumu par to, kurš ir vājākais lietotājs. Pensionārs viedtālruni lieto reti, bet pie stacionārā datora jūtas pilnīgi droši. Vietne viņam nav mazāka lietotnes versija - tā ir vienīgā versija, kuru viņš vispār lietos.
>
Sagatavošanās sākas mājās, ne veikalā. Sarakstu grib salikt iepriekš un mierīgi, tāpēc saraksta ekrānam bija jāstrādā arī bez veikala kartes blakus, ar tastatūru un peli.
>
Informācijai jābūt vienuviet. Veikala lapa vietnē savāc darba laikus, adresi un ejas plānu vienā skatā. Tieši tā ir daļa, ko lietotne nedara labāk.
>
Lejupielāde pati par sevi ir šķērslis. Vietni atver ar saiti un bez konta. Tas ir tas, kas šo projektu atdala no lietotnes visskaidrāk.
VIENS DIZAINS, DIVI PLATUMI
Katrs ekrāns tapa uzreiz abos platumos, ne tā, ka vispirms darbvirsma un pēc tam saspiešana. Abi platumi nav viens izkārtojums divos izmēros - tās ir divas dažādas situācijas, kurās cilvēks atver to pašu lapu, un katrā no tām svarīgākais ir kaut kas cits.
>
Darbvirsma pārlūko. Šeit cilvēks ir mājās un viņam nav jāsteidzas, tāpēc filtri, preču saraksts un veikala karte var stāvēt vienā skatā.
>
Mobilais izpilda. Mobilo atver veikalā, ar grozu vienā rokā. Viss saiet vienā kolonnā: izvēlne paslēpjas burgerī, foto pārceļas virs virsraksta, un zem meklēšanas lauka paliek divas pogas - saraksts un veikala informācija. Pārējais aiziet zemāk.
PLATUMI
// viens ekrāns, divi platumi - mainās nevis mērogs, bet kārtība
NO PAPĪRA UZ EKRĀNU
Pirms Figmas bija papīrs, un pirms izkārtojuma bija vietnes struktūra: cik soļu ir no sākumlapas līdz precei, līdz sarakstam un līdz maršrutam. Katru ekrānu zīmēju reizē platajā un šaurajā variantā, jo tieši šaurajā redzams, kas no ekrāna izkrīt pirmais.
>
Meklēšanas lauks ir redzams bez ritināšanas. Cilvēks atnāk ar jau gatavu nodomu, tāpēc meklēšanu var sākt uzreiz - gan sākumlapā, gan preču lapā. Preču lapā tā stāv pašā augšā, sākumlapā tūlīt zem virsraksta.
>
Saraksts kārtojas pēc ejām, ne pēc pievienošanas secības. Preces salasās grupās ar ejas nosaukumu virsū, un tā saraksts pats kļūst par maršrutu, bez atsevišķas plānošanas.
>
Veikalam ir sava lapa. Darba laiki, kontakti un ejas plāns ir viens skats, uz kuru var aizsūtīt saiti. Lietotnē tā pati informācija ir paslēpta izvēlnē; vietnē tai ir sava lapa.
LO-FI
// zemas detalizācijas skices - četri ekrāni abos platumos, pirms vēl bija kāda krāsa
LIETOJAMĪBAS PĀRBAUDE
Pārbaudei bija viens jautājums: vai cilvēks pats tiek no saraksta līdz maršruta sākšanai, neprasot, kur ko spiest. Atbilde bija nē, un daļa apstājās vienā un tajā pašā vietā.
Poga saraksta beigās
KO DARĪJA DALĪBNIEKI
Mobilajā ar garāku sarakstu daļa dalībnieku maršruta pogu neatrada, kamēr neaizritināja līdz galam. Daži secināja, ka maršruta iespējas šajā skatā vispār nav.
KĀPĒC TĀ NOTIKA
Poga stāvēja saraksta beigās. Saraksta garums ir mainīgs, tāpēc ekrāna galvenā darbība bija atkarīga no tā, cik preču cilvēks tajā dienā bija pievienojis.
risinājums: poga pārcelta virs saraksta, uzreiz zem piedāvājuma joslas. Tagad tā ir ekrānā no paša sākuma, un saraksta garums vairs neizšķir, vai to atradīs.
PIRMS
// poga aiz kopsummas, saraksta beigās
PĒC
tas pats ekrāns, poga virs saraksta
HI-FI
// augstas detalizācijas prototips - tā pati plūsma, ar pārbaudes izmaiņām iekšā
PIEEJAMĪBA
Viens no diviem intervētajiem pie datora jūtas droši un viedtālruni lieto reti. Ja vietne nestrādā viņam, tad viņam nestrādā nekas - tāpēc pieejamība te bija ierobežojums no paša sākuma, ne pārbaude beigās.
>
Kontrasts ir rēķināts, ne novērtēts ar aci. Zīmola zaļais uz siltā baltā dod 5,3:1, balts teksts uz tā paša zaļā - 6,1:1, un tumši pelēkais pamatteksts uz fona - 8,9:1. Visi trīs pārsniedz 4,5:1 slieksni, un tieši tāpēc zaļo drīkst likt uz pogām, ne tikai dekorā.
>
Viens fonts, skaidri atdalīti izmēri. Virsraksts, preces nosaukums, cena un plaukta numurs ir četri dažādi izmēri, un starpība starp tiem ir pietiekami liela, lai hierarhiju redzētu, nesalīdzinot rindas savā starpā. Mazākais ir plaukta numurs - tieši tā rinda, ko vecāks cilvēks pārstāj lasīt pirmo.
>
Skārienmērķi ir lielāki, nekā prasa AA. Mazākais spiežamais elements maketā ir 30x30px ķeksīša rūtiņa, galvenā poga ir 42px augsta. WCAG AA līmenis prasa 24x24 (2.5.8), tātad abi to pārsniedz, bet AAA līmeņa 44x44 (2.5.5) šī lapa nesasniedz. Pelei starpība ir maza; pirkstam veikalā, ar grozu otrā rokā, tā ir starpība starp trāpīt un netrāpīt.
KO ES NO TĀ PAŅĒMU
IETEKME
Vietne ir domāta tiem, kuriem lietotne paliktu neuzinstalēta. Tā piedāvā to, kā nevienā no apskatītajām Latvijas pārtikas veikalu vietnēm nav: preces meklēšanu ar ejas numuru, pārlūkā un bez konta.
KO IEMĀCĪJOS
Pielāgojams dizains nav ekrāna mērogošana, bet prioritāšu pārskatīšana katrā platumā. Un lielākā izmaiņa šajā projektā bija viena no mazākajām: poga, kas pārcēlās par vienu ekrānu augstāk.