3. Pirmoji programėlė

Kas yra UI/UX


Uždaviniai:

  • Suprasti sąvokas Vartotojo patirtis (user experience/UX) ir Vartotojo sąsaja (User interface/UI) bei skirtumą tarp jų

  • Sukurti pirmąją programėlę - atviruką, kuriame:

  • Būtų mažiausiai 2 ekranai

  • Kiekviename ekrane po mygtuką, leidžiantį pereiti į kitą ekraną

  • Bent vienas įkeltas paveikslėlis

  • Bent vienas tekstas

  • Bent vienas garsas

  • Papildomai: išskleidžiamasis sąrašas (dropdown), sąlyga if...else

  • (Jei yra galimybė) Išbandyti programėlę telefone

  • (Jei yra galimybė) Nusiųsti atviruko nuorodą gavėjui el. paštu

Kas yra UI/UX


Programėles dažniausiai kuriame ne sau, o kitiems - vartotojams, draugams, pirkėjams. Todėl labai svarbus ne tik pats programėlės kodas, bet ir jos išvaizda bei patogumas naudoti. Tai geriausiai apibrėžia du terminai: Vartotojo patirtis ir Vartotojo sąsaja. Dažnai šios sąvokos painiojamos arba naudojamos neteisingame kontekste.


Vartotojo sąsaja (User interface arba UI)


Tai, ką mato/veikia vartotojas, atsidaręs programėlę ar svetainę: mygtukai, spalvos, judėjimas tarp skirtingų langų ir pan. Ar patogi vartotojo sąsaja, gali atsakyti šie klausimai:

  • Ar mygtukas patogus paspausti? Gal jis vartotojo pirštui per mažas?

  • Ar įskaitomas ir gero dydžio tekstas?

  • Ar neblaško paveikslėliai? Ar jie atitinka turinį?

  • Ir pan.

Puikaus UI pavyzdys - google.com. Mygtukų tik tiek, kiek reikia, niekas neblaško dėmesio, visas orientuota į tikslą - kuo greičiau ir patogiau pateikti vartotojui reikiamą informaciją.


Labai prasto UI pavyzdžiai čia. Margi, „rėkiantys“, neišku, kurį mygtuką spausti, per daug/per mažai informacijos ir pan.


Vartotojo patirtis (User Experience arba UX)


Kaip jaučiasi vartotojas, naudodamasis jūsų programėle. Ar rado ieškotą informaciją? Ar pasimetė, sutriko? Kiek laiko jam užtruko rasti ir nusipirkti ieškotą prekę?


Vartotojo patirtis matuojama atliekant eksperimentus, stebėjimus, taikant specialias metodikas ir fiksuojant/apibendrinant rezultatus.


Net jeigu UI yra puikus, vartotojo patirtis gali būti prasta. Pavyzdžiui, patogi prekės paieška, bet reikiama prekė nerasta (nes parduotuvė jos neturi).


Žinių užtvirtinimui.


Priemonės:

  • Atspausdintas užduoties lapas UX vs UI (nuoroda parsisiųsti - žemiau), iškirpti elementai

Eiga:

  • atspausdinkite ir sukarpykite užduoties lapuose esančius elementus

  • pasiskirstykite grupėmis po 2

  • tegul dalyviai grupėse sudėlioja, kuriuos elementus galime priskirti prie vartotojo sąsajos (UI), o kuriuos - prie vartotojo patirties (UX).

  • Kartu aptarkite rezultatus.

Jeigu kils diskusijų - puiku! Kai kuriuos elementus galima priskirti ir vienur, ir kitur. Taip pat paminėkite, kad, kadangi UI gali būti suprantamas kaip UX dalis, todėl ir visi UI elementai gali būti laikomi UX dalimi.


Pastaba. Dokumente elementai priskirti teisingai.


Parsisiųskite užduoties lapą:

UX ar UI
.pdf
Download PDF • 39KB

Tyrimas. Atlik UX testą


Tikslas: nuspręsti, kurios iš pateiktų svetainių UX yra geresnis, patogesnis. Eiga:

  • Mokiniai pasidalina po 2. Vienas bus vartotojas, kuris naršys svetainėse, kitas - tyrėjas, kuris stebės ir fiksuos tam tikrus duomenis.

  • Užduotis vartotojui. Apsilankyti trijose parduotuvių svetainėse ir rasti parduotuvių darbo laiką sekmadieniais. Ieškoti reikia būtent tos parduotuvės svetainėje, google naudotis negalima. Adresai:

  • https://www.senukai.lt/ (bet kurios parduotuvės Vilniuje)

  • https://www.ikea.lt/

  • https://www.ermitazas.lt/ (parduotuvės Vilniuje)

  • Užduotis tyrėjui. Užpildyti šį duomenų lapą (parsisiųskite žemiau). Prireiks laikmačio.

  • Palyginkite skirtingų grupių rezultatus.

Užduotį koreguokite pagal savo pamokos planą - ieškoti galite ir kitų duomenų, tinkančių jūsų pamokos temai, Jums tereikės nurodyti svetainių adresus ir paredaguoti tyrimų lapą.


Parsisiųskite duomenų lapą:

UX_tyrimas
.docx
Download DOCX • 235KB

Techninė užduotis


Pirmoji programėlė


Kartu su mokiniais sukurkite nesudėtingą programėlę. Kurdami dalyviai perpras kelių ekranų veikimo principą, išmoks įkelti paveikslėlį, pasirinkti garsą bei pripras prie pačios programos valdymo.

Programos pavyzdys: https://tinyurl.com/atvirukopvz.


Pavyzdiniame projekte sukurtas atvirukas, tačiau galite temą pritaikyti savo klasei - tai gali būti ir lankstinukas apie mėgiamą šalį ar nykstančią gyvūnų rūšį.

* Po projekto pavadinimu rašoma, prieš kiek laiko projektas buvo išsaugotas. Jei manote, kad pakeitimų buvo ir vėliau, paspauskite Rename, tuomet Save mygtukus.

Parsisiųskite užduočių lapą:

Pirmoji_programėlė_Užduočių_lapas
.docx
Download DOCX • 235KB

Kaip peržiūrėti programėlę telefone?


Nuspaudus Share mygtuką, ekrane pasirodo ilga nuoroda - ji per ilga, jog mokiniai galėtų ją surinkti naršyklės lange telefone. Alternatyvos:


1. Sutrumpinti nuorodą.

  • Yra daug svetainių, kurios leidžia sutrumpinti nuorodas, viena jų - bit.ly:Kompiuteryje nukopijuokite visą nuorodą

  • Naujame naršyklės lange atverkite nuorodą bitly.com. Įklijuokite nukopijuotą nuorodą (jokios paskyros kurti nereikia) ir spauskite Shorten

  • Ekrane pasirodys sutrumpinta nuoroda, kurią jau galima vesti telefone.

2. QR kodas. QR kodas yra tarsi barkodas prekės etiketėje. Jį galima skenuoti išmaniuoju telefonu, šitaip perduodant naudingą informaciją, tokią kaip interneto nuorodas, kontaktiniai duomenys ir pan.

  • Nukopijuokite programėlės nuorodą

  • Paverskite ją QR kodu čia. Įklijuokite nuorodą (1.) ir spauskite Create QR code (2.)

  • Ekrano dešinėje išvysite sugeneruotą QR kodą (3.)

  • Į telefoną atsisiųskite programėlę, skenuojančią kodus. Programėlių parduotuvėje ieškokite QR code reader. Jų yra daug ir nemokamų, atliekančių tas pačias funkcijas. Pasirinkite remdamiesi vartotojų įvertinimu.

  • Atidarykite atsisiųstą programėlę ir nuskanuokite sukurtą QR kodą.

Peržiūrint programėlę telefone, kai kuriuose telefonuose pasiūloma galimybė programą išsaugoti kaip tikrą apps’ą:


7 views