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

Šiuo metu, nemažai tinklapių yra įgyvendintas dinaminis tinklapio užkrovimas, pvz.: Neperkraunant puslapio, galima naršyti po prekių katalogus. Paprastai toks funkcionalumas vartotojui yra daug patogesnis, nei viso puslapio perkrovinėjimas, tačiau jeigu tokiu būdu reikia užkrauti didelį kiekį informacijos ir serveris veikia lėtai, vartotojas gali būti suklaidintas ir nueiti į kitą puslapį. Kad to išvengti, patariame naudoti krovimosi paveikslėlius “Preloader’ius”, kurie yra rodomi vartotojui, kol yra kraunamas turinys. Pvz.:

Tokius dailius paveikslėlius galite pasidaryti patys, su preloaders.net sistemėle. Joje lengvai susikursite norimą paveikslėlį, nurodydami jo išvaizdą, spalvą, dydį, bei animacijos greitį. Taip pat visi šioje sistemoje sukuriami paveikslėliai gali būti su permatomu fonu, todėl tiks bet kokiame tinklapio dizaine.

Turbūt sutiksite, kad kartas nuo karto mums visiems tenka dalintis dideliais failais su draugais, todėl naudojame įvairias jų dalinimo paslaugas (failai.in, Rapid share, etc.) Deja visos šios paslaugos nėra pakankamai patogios, o už pilną funkcionalumą dažniausiai dar reikia primokėti, todėl nusprendžiau papasakoti apie DropBox projektą.

DropBox - tai internetinė failų talpykla, kuri savo patogumu pranoksta visas kitas panašaus pobūdžio paslaugas. Didžiausias privalumas yra tai, kad nereikia sukėlinėti failų per naršyklę – tiesiog užtenka atsisiųsti DropBox programėlę, kuri jūsų kompiuteryje sukuria katalogą, į kurį įdedant failus, jie iškarto patalpinami internete.

Dar keli šios sistemos privalumai:

• Galimybė prieiti prie savo failų iš bet kurio kompiuterio.
• Galima turėti įvairaus privatumo lygmens katalogus: Viešą, Beveik viešą (pvz.: pasidalinimui nuotraukomis su draugais) ir visiškai privatų.
• Darbas su direktorijomis.
• Mini versijų valdymo sistemėlė, kurios pagalba galima valdyti failų revizijas.
• Patogus darbas su nuotraukomis
• Saugumas – Prisijungimui naudojamas HTTPS protokolas.
• 2 GB nemokamos vietos serveryje
• … ir galų galiausiai labai patogi vartotojo sąsaja – puikus pavyzdys, kaip reikia kurti tokio pobūdžio projektus.

Taigi visko tikrai nepapasakosiu, o tiesiog parekomenduosiu šią sistemėlę išbandyti patiems :)

Taip pat būtų įdomu sužinoti jūsų nuomone, taigi nepatingėkit pakomentuoti.

Šiek tiek nukrypsiu nuo Web temos ir parodysiu, kaip dalį interneto atnešti į jūsų darbalaukį. :) Viskas prasidėjo nuo to, kad jau kurį laiką naudojuosi labai šaunia paslauga playlist.com, kurios pagalba galiu turėti internete savo Playlist’ą (liet. grojaraštį) ir klausytis savo mėgiamos muzikos, prie bet kurio kompiuterio. Tačiau ilgainiui iškilo problema, kad klausytis muziką per naršyklę kai yra atidaryta 50 įvairių puslapių yra tikra kankynė, taigi nusprendžiau pasidaryti sau Darbastalio programą su Adobe AIR. :)

Čia pateiksiu trumpą pamokėlę, kaip greitai susikurti savo mini programėlę su AIR’u:

1. Pradžiai jums prireiks parsisiųsti paties AIR varikliuką ir AIR SDK, kuriuos galite parsisiųsti paspaudę ant šių nuorodų:
   Adobe AIR
   AIR SDK
2. Pasidarome index.html failiuką, kuris atvaizduoja tai, ką atvaizduos mūsų programa. Maniškis atrodo taip:
1.        
2. <html xmlns="http://www.w3.org/1999/xhtml">
3.         <head>
4.                 <title>Petras player</title>
5.         </head>
6.         <body>
7.                 <div>
8.                         Mano playlis.com grotuvo embed kodas
9.                 </div>
10.         </body>
11. </html>
12.  
3. Pasiruošiame programos deskriptorių: app.xml failiuką, kuriame nusistato visi programos kompiliavimo parametrai. Šio failiuko turinys turi atrodyti taip:
1.  
2. <application xmlns="http://ns.adobe.com/air/application/1.0">
3.   <id>com.example.appname</id>
4.   <version>1.0</version>
5.   <filename>Petras Player</filename>
6.   <initialwindow>
7.     <content>index.html</content>
8.     <visible>true</visible>
9.     <width>435</width>
10.     <height>400</height>
11.         <maximizable>false</maximizable>
12.         <resizable>false</resizable>
13.         <systemchrome>none</systemchrome>
14.   </initialwindow>
15. </application>
16.  
4. Kad būtų patogiau testuoti programą, pasidarome šią failų/direktorijų struktūrą:
   */programa/source/index.html
   */programa/app.xml
   */programa/build
   */AdobeAIRSDK/ (Čia nukopijuojame visą AIR SDK archyvo turinį) Rekomenduoju įsirašyti direktoriją */AdobeAIRSDK/bin/ į savo Windows aplinkos sisteminius kelius (Environmenth paths), tada rašant komandas, nebereikės vargti su pilnais šio SDK failų keliais.
5. Testuojame :) Pasileidžiame windows shell’ą (komandinę eilutę)
   Einame į */programa/source direktoriją ir įvedame komandą: “adl source/app.xml”
   Maniškė programa puikiai pasileido, o kaip gi jūsų? :)
6. Kai pilnai sukuriame programą belieka ją “subuildinti”, tačiau visos AIR programos reikalauja skaitmeninio sertifikato. Jam sukurti galima panaudoti AIR SDK, toje pačioje eilutėje įrašant:
   “adt -certificate -cn SelfSign -ou Dev -o “Pavyzdinis sertifikatas” -c US 2048-RSA ../sertifikatas.pfx slaptazodis”
   Kai įvykdome šią komandą, direktorijoje */programa/ turėjo susikurti sertifikatas.pfx failas, kurį panaudosime programos sukūrimui (Nepamirškite slaptažodžio ;) )
7. Paskutinis žingsnis: programos build’inimas. Komandinėje eilutėje įrašome šią komandą: “adt -package -storetype pkcs12 -keystore ../sertifikatas.pfx ../build/Mano_programa.air app.xml index.html”
   Įvykdžius šią komandą gauname gražų Mano_programa.air instaliacinį failą, kurį jau galime duoti išbandyti draugams :)

Štai ką gauname, kai pasileidžia ši programa:

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:

Karts nuo karto puslapyje tenka panaudoti sąrašą su keliomis pasirinkimo galimybėmis. Tam geriausiai tinka <input type=”checkbox” /><label>Pasirinkimas</label> html elementų derinys. Naudojant juos dažniausiai užmirštama, kad nerašant jokio JS galima juos apjungti taip, kad checkbox elementas pasižymėtų ne tik paspaudus ant jo, bet ir ant jam priskirto label elemento. Tai padaroma labai paprastai, o toks pakeitimas itin supaprastina vartotojo darbą išrenkant norimą elementą.

Taip veikia checkbox nepriskirtas label elementui:

O taip checkbox elementas priskirtas label:

Toks priskyrimas padaromas labai paprastai, tereikia kiekvienam iš šių elementų priskirti po vieną atributą. Input (type=”checkbox”) elementui atributas id=”elmento_id”, o label elementui atributas for=”elemento_id”.

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.