Vartotojo interfeisas

Projektuojant tinklapių vartotojo interfeisą, dažniai tenka apmąstyti, kur geriausia įterpti navigacijos ar valdymo elementus. Konkrečiu atveju pabandysiu papasakoti apie elementų įterpimą tekstinio turinio atžvilgiu, pvz.: naujienos straipsnio, produkto aprašymo arba tiesiog blogo įrašo.
Ankstesniame straipsnyje apie Fitt‘o taisyklę pasakojau, kad kuo veiksmas yra paprastesnis ir jam sugaištama mažiau lauko, tuo labiau vartotojai jį yra linkę atlikti.

Tyrimas

Nesenai atlikau mini-tyrimą (apklausą), kurios esmė buvo išsiaiškinti, kur vartotojai laiko pelės kursorių, kai skaito tekstą. Šis tyrimas remiasi tuo, jog vartotojai skaitydami tekstą, nevalingai įgauna įprotį laikyti kursoriu tam tikroje vietoje ar varinėti jį palei skaitomą tekstą (Remiantis popieriuje atspausdinto teksto modeliu).
Apklausos klausimas skambėjo taip: „Kai skaitai turinį interneto naršyklėje, kurioje teksto pusėje paprastai laikai pelės kursorių?“, o štai rezultatai yra tokie:

Rezultatuose matoma, jog daugiau nei pusė vartotojų atsakė, jog kursorių paprastai laiko dešinėje pusėje – tai yra logiška, nes dešinėje pusėje yra pateikiamas scrollbar‘as puslapio pozicijos valdymui, be to dauguma žmonių yra dešiniarankiai.
Ant paties teksto kursorių laiko apie trečdalis žmonių, kaip ir minėjau aukščiau, tai siejasi su realaus pasaulio, knygos skaitymo modeliu, kai pirštu vedame per skaitomą tekstą. Tuo tarpu, tų kurie skaitomą tekstą pasižymi yra palyginti mažai, nors tokia praktika padeda sukoncentruoti dėmesį į skaitomą teksto dalį. Galbūt to priežastis yra tai, kad pagal nutylėjimą pažymėtas tekstas įgyja invertuotas fono ir teksto spalvas ir taip yra sudaromas „akį pjaunantis“ aukštas kontrastingumas, kurį tiesiog nemalonu skaityti.
Kairėje pusėje laikančių kursorių yra apie 10%, o tai sutampa su kairiarankių santykiu (8-15% pasaulio populiacijos yra kairiarankiai)

Praktika

Remiantis tokiais rezultatais ir bendromis informacinio dizaino taisyklėmis galima sudaryti kelis dėsnius, kuriuos įmanoma pritaikyti projektuojant vartotojo interfeisą:

• Palikti tarpą, laisvos vietos puslapio kraštuose, kad vartotojas turėtų kur „laikyti“ kursorių, kai skaito tekstą ir nevalingai nepaspaustų kokių nors aktyvių elementų – Geriausiai tinka taikyti 960px puslapių šabloną.

• Kita vertus, jeigu dešinėje pusėje yra išdėliotos reklaminės pozicijos (banneriai) – nevalingi/valingi paspaudimai tik į nauda tinklapio savininkams, tačiau vartotojui – tai yra nepatogumas.

• Pateikti vartotojui navigacinius komponentus, bei kvietimus imtis veiksmų (call for action) dešinėje tinklapio pusėje, kad vartotojui būtų patogu juos paspausti ir jis baigęs skaityti tekstą nepaliktų tinklapio, o turėtų savo veiksmų tęstinumą.
  Pvz.: patogus sprendimas yra įgyvendintas tinklapyje www.thenextweb.com: ten baigus skaityti straipsnį, apačioje, dešinėje su animacija išvažiuoja blokelis, kviečiantis paskaityti ankstesnį straipsnį, tokia pačia tema (aš asmeniškai ant jo dažai užkimbu ir paspaudžiu ant nuorodos į kitą straipsnį)

• Sukurti teksto pažymėjimo stilių, kad jis nebūtų toks priešiškas vartotojui. Tai galima padaryti su CSS pseudo-klase :selection, o jeigu dar panaudojus javascript, būtų galima padaryti, jog skaitomo paragrafo stilius pasižymėtu automatiškai pagal dešinėje esančio kursoriaus  poziciją (Žinoma tokia funkcija kai kuriuos vartotojus gali erzinti, todėl turėtų būti galimybė ją išjungti)

• Padaryti funkcija, kuri invertuotų puslapio struktūrą horizontaliai. Taip vartotojas visada galėtų pasirinkti kokia struktūra jam labiausiai patinka – pvz.: „sidebar“ blokas dešinėje ar kairėje.

Tai tik keli iš praktiniai patarimai paremti vartotojų veiksmų dėsningumu. Jeigu žinote daugiau variantų kur galima pritaikyti šiuos dėsningumus – pakomentuokite :)

Fitt’o taisyklė tai – žmogaus / kompiuterio sąsajos modelis, kuris apibrėžia, kiek maždaug vartotojui trunka laiko, nusigauti nuo pradinio taško ekrane iki tam tikro tikslo naudojantis manipuliatoriumi (mūsų atveju: lietimui jautriais paviršiais arba pele).

Fitt’o taisyklė yra apibrėžiama matematine formule:

T – vidutinis laikas nukakti nuo pradinio taško iki tikslo.
a – aplinkos užsikrovimo greitis, matuojant nuo tada, kai vartotojas inicijuoja aplinką iki tada, kai jis gali pradėti daryti veiksmą (mūsų atveju, tai yra puslapio užsikrovimo greitis.)
b – reiškia būdingą prietaiso greitį (mūsų atveju šis parametras gali būti proporcingas vartotojo nustatytam pelės jautrumui – sensitivity)
D – atstumas nuo pradinio taško iki tikslo (Galima matuoti jį pikseliais, pasitelkiant Pitagoro teoremą :) )
W – yra tikslo plotis, matuojamas išilgai pelės kursoriaus judėjimo krypties (Taip past matuojamas pikseliais)

Iš lygties aiškiai matosi tokia tendencija: Kuo tikslas yra mažesnis ir kuo toliau – tuo į jį sunkiau nukakti ir atvirkščiai.
Dabar prisiminkime vieną iš UX matavimo vienetų, tai – laikas skirtas užduočiai įvykdyti. Kuo trumpesnis laikas įvykdyti užduočiai, tuo labiau vartotojas yra motyvuotas ją įvykdyti ir tuo labiau jis yra linkęs vykdyti tą užduotį.

Kur šią taisyklę galima pritaikyti?

Šios taisyklės esmė yra paprasta – kuo labiau Mygtukas yra vartotojui po ranka, tuo labiau jis yra linkę jį paspausti. Pateiksiu realių pavyzdžių, kur tai galėtų būti naudinga:

• Prekių “Dėjimo į krepšelį” mygtukus pateikti prekių puslapio viršuje – kad atsidarius puslapį, mygtukas iš karto būtų po pelės kursoriumi.
• Naujienlaiškių prenumeratos formas įterpti į tinklapio meniu.
• Straipsnių vertinimo elementus pateikti arti straipsnių turinio.

Išvardinau tik kelis pavyzdžius vaizdui susidaryti, tačiau tai tik maža dalis, kur galima pritaikyti šią taisyklę. Mano manymu, šią taisyklę galima pritaikyti ne tik manipuliatoriaus judėjimui modeliuoti, bet ir vizualios informacijos grupavimui – pvz.: tinklapio optimalių bannerių pozicijų išdėstymui.

Jei norite pasiskaityti plačiau, galite aplankyti straipsnį Wikipedijoje: http://en.wikipedia.org/wiki/Fitts%27s_law

Ilgą laiką įdomesnės nuorodos buvo žymimos įvairiose sistemose: uždedant žvaigždelę arba paspaudžiant mygtuką “Share” Google Reader kliente, įkeliant žymę į Deliciuos sistemą, išsaugant žymę naršyklės nuorodų saugykloje. Laikas bėga, nuorodos sensta, o jomis naudojuosi (beveik) aš vienas. Nesąžininga. Taisau klaidą ir dalinuosi geriausias (mano subjektyvia nuomone) nuorodas, kurios gali būti naudingos frontend.lt skaitytojui:

SEO

„Google“ paieškos sistemos optimizavimo pradedančiųjų vadovas – sukurtas naudoti kompanijos Google viduje, tačiau vėliau nuspręsta, jog ten surašytos mintys bus aktualios visiems. Rekomenduojame.

List of Best and Worst practices for designing a high traffic website – sąrašas svetainės savybių, įvertintų balais, pagal tai, kiek tai yra (ne)naudinga kuriant puslapio įvaizdį paieškos robotams (Google, Yahoo!, Microsoft).

HTML

10 HTML Tag Crimes You Really Shouldn’t Commit – pateikiama 10 dažniausiai pasitaikančių nusikaltimų HTML kalbai. Turėtų kas nors bausti nusikaltėlius!

10 HTML Tags that are Overlooked but Should be Used – iš div elemento, CSS pagalba sugebame padaryti bet ką, tačiau galbūt neverta išradinėti dviračio, o imti jau pagamintas žymes ir naudoti savo kode?

CSS

WordPress

Jeigu tenka atlikti interneto projektų analizę, ar kitokį darbą, kuriam atlikti reikia prisiregistruoti prie daugelio tinklapių ar internetinių sistemų, paprastai tenka užpildyti galybę registracijos formų, o tai iš tiesų varginantis procesas.
Kai registruojuosi naujame tinklapyje, kai kuriuose iš jų registracijos formą galiu užpildyti daug greičiau,  jei visiems formos laukams yra priskirti logiški vardai – tada pati naršyklė man pasiūlo užpildyti lauką tokia pačia reikšme, kurią buvau kažkada įvedęs kitoje formoje.

Tai yra labai patogu, jei tenka rankomis pildyti daug panašių formų. Deja ne visuose tinklapiuose tai yra įmanoma, nes ne visur tiems laukams yra priskirti korektiški name atributai ir todėl AutoFill funkcija neveikia.

Viskas ką tokiu atveju reikia padaryti, tai kiekvienam laukui priskirti vardą, kuris atitinką lauko pavadinimą, anglų kalboje.
Pvz.: laukams “Vardas”, “Pavardė” ir “El. paštas” turėtų būti suteikiami tokie vardai:

Kiekvieną kartą žvelgdamas į svetainės išvaizdą susimąstau, juk kiekvienas ją matome skirtingai. Tai vyksta ne vien dėl to, kad naudojame skirtingas naršykles, kitokius kompiuterius ar mūsų interneto greičiai skirtingi. Visa tai daugiausia įtakoja pats žmogus, kuris stebi ir “bendrauja” su Jūsų svetaine.

Dabartiniai interneto projektų autoriai išsprendė daugumą techninių problemų.  Jie sugalvojo kaip keisti svetainės proporcijas, besikeičiant ekrano dydžiams,  kaip prisitaikyti prie mobiliųjų įrenginių. Jie netgi pradėjo optimizuoti programinį kodą bei multimediją, tam, kad sumažinti svetainės užsikrovimo laiką. Bet retai kas bando prisitaikyti prie plačios lankytojų asmenybių įvairovės.

Kur atkreipiame dėmesį tik užsikrovus svetainei? Į puslapio turinį? Išdėstymą? Paveikslėlius? Kas labiausiai patraukia dėmesį?  Manau, bendros nuomonės nebus – tinklapyje besilankantys žmonės labai įvairūs. Jiems įdomi ne tik  informacija, kurios jie ieškojo, bet ir tai, kur ir kaip ji pateikta. Lankytojas mieliau skaitys gražiai suformatuotą, reikalingose vietose išryškintą ir tinkamo pločio tekstą, nei padriką, per visą ekraną besiplečiantį žodžių kratinį.

Sukurti universalią svetainę labai sunku, turbūt, net neįmanoma. Tačiau visada reikia to siekti. Nepraleisti smulkmenų, pamažu tobulinti išvaizdą, klausti lankytojų nuomonės, bendrauti su jais. Dalis dabartinės interneto visuomenės jau supranta kaip veikia internetas ir gali duoti tikrai naudingų patarimų. Tereikia mokėti juos priimti ir pritaikyti savo svetainėje.