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ė 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

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.

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.

Č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:

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:

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”.

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.