Įdomi dalis yra HTML formos. Buvau nustebęs kiek specifikacijoje daug visko numatyta, nekantraudamas laukiu, kada bus galima viską drąsiai imti ir naudoti.

Pristatau įdomų įrankį, leidžiantį vizualiai susipažinti su naujųjų HTML formų savybėmis ir esama realizacija naujausiose naršyklių versijose: The Current State of HTML Forms.

Projektuose esu naudojęs El.pašto įvedimo lauką <input type=”email” />, nuorodos įvedimo lauką <input type=”url”> ir paieškos frazės įvedimo lauką <input type=”search” />, bei atributą, skirtą įvedimo lauko prasmės paaiškinimui placeholder. Džiugu, kad šie elementai jau veikia naujausiose Firefox ir Chrome versijose. Senesnėse nemoderniose naršyklėse, naujų žymenų veikimą tenka imituoti, pasinaudojant kitomis priemonėmis: JavaScript, CSS gudrybėmis, dizaino elementais, tačiau, manau, kad verta naudoti kuo daugiau semantiškai prasmingo žymėjimo HTML kode.

Rekomenduoju visiems Web sąsajos kūrėjams susipažinti su standartais ir jų galimybėmis ir, jeigu tik yra sąlygos, imti juos naudoti savo projektuose.

Kokias naujas HTML (“HTML5″) žymas ir atributus naudojate Jūs? Laukiame komentarų, bei balso dešinėje esančioje apklausoje. Ačiū! :)

Nesenai atradau vieną visiems prieinamą šabloną HTML5 BoilerPlate: http://html5boilerplate.com/, kurį čia norėjau pristatyti. Šio šablono esmė, priversti senesnes naršykles palaikyti HTML5 žymas. Nors kol kas tai nėra itin reikalinga funkcija, šiame šablone yra daug įvairių dalykų, dėl kurių jį verta naudoti:

• Iš karto paruošta failų struktūra ir įtraukti reikalingi išoriniai skriptai, su “fallback’ais” į lokalius skriptus. (yra netgi Google Analytics :) )
• Optimizavimas mobiliesiems įrenginiams
• Senesnių naršyklių palaikymas ir visi reikalingi fixai (net IE6)
• .htaccess direktyvos (www peradresavimas, duomenų kompresija)
• Optimizuoti spausdinimo šablonai

Geriausias dalykas yra tai, jog iš šio šablono galima pasiimti tik funkcijas kurių reikia, bei papildyti savo paties naudojamą šabloną :)

Info ir paveikslėlis iš Engadget “Microsoft kicks off effort to rid the world of Internet Explorer 6“

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

Paslauga skirta įmonėms, kurios neturi savo dizaino karpymo specialistų, arba jų darbų krūviai itin nepastovūs.

Kai kurios Lietuvos IT įmonės jau naudojasi šia paslauga.

1.  Pagrindinė savybė – wwf dokumento neįmanoma atspausdinti, o taip yra taupomas popierius ir saugomi medžiai.
2. PDF failo piktograma keičiama į žalią WWF medį.
3. Failo pabaigoje automatiškai sugeneruojamas paaiškinimas įvairiomis kalbomis, kas yra WWF (jį galima ir išimti)

Taip pat šio formato kūrėjai platina nemokamą įrankį, kur bet kokį spausdinamą dokumentą galima išsaugoti į WWF.

Taigi, turbūt įdomu, kuo šis formatas susijęs su front-end? Galiu atsakyti: man asmeniškai teko įgyvendinti daug projektų, kur įvairios ataskaitos, sąskaitos ir pan yra generuojamo PDF ar kokiu kitu formatu, kurį žmonės vėliau gali atsispausdinti. Taigi manau būtų puiki idėja suteikti vartotojams galimybę visus šiuos dokumentus generuoti būtent šiuo formatu (Tiesiog  šalia “Save as PDF” būtų ir “Save as WWF”).

Daugiau informacijos rasite čia: http://www.saveaswwf.com/en/what-is-it.html

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

Jau senokai apleidome šį blogą ir pastaruoju metu nusprendėme vėl jį atgaivinti, kartu įvesdami kelias naujas temas.

Kadangi pastaruoju metu Web kūrėjai orientuojasi į mobiliuosius įrenginius, bei UX (user expierience) pabandysime parašyti daugiau straipsnių ir naujienų šiomis temomis. Taip pat tinklapyje paleidome apklausą (dešinėje tinklapio pusėje), kurioje atliksime trumpus UX tyrimus ir išvadas paskelbsime pačiam tinklapyje.

Iš esmės tinklapį ketiname papildyti šiomis žymomis:

• Usability (Pavadinime šią žymą angliškai, nes į lietuvių kalbą išversta frazė netenka prasmės)
• Mobiliosios platformos
• UX tyrimai
• Dizainas
• Informacijos architektūra

Apie patį funkcionalumą, nepasakosiu, nes jį galite pasižiūrėti šioje prezentacijoje.

Galiu pradėti nuo poros įdomių sprendimų:

1. Visi wave aplinkos blokai yra dinaminiai (Keičiamo dydžio, minimizuojami ir pan. ) Įdomus sprendimas, kad kai blokas yra minimizuojamas, jis pakliūna į įrankių juostą, panašiai, kaip ir Langų mechanizmas operacinėse sistemose. Tą naujove turbūt pavadinti yra sunku, tačiau web srityje šį sprendimą matau pirmą kartą.
2. Darbas su failais, įgyvendintas labai kruopščiai – failą iš savo kompiuterio galiu įmesti tiesiai į naršyklę ir jis iš karto bus nusiųstas į Wave ir tuo pat metu suspaustas į ZIP archyvą.

Kaip jau minėjau visas kitas naujoves galite pažiūrėti Google pateiktoje prezentacijoje.

Kadangi google, skelbiasi, jog wave yra visai naujos kartos komunikacijos ir bendradarbiavimo platforma, teko ją išbandyti su kolegomis. Deja, kol kas funkcionalumu nusivylėme, dėl keleto priežasčių:

• Jeigu bendraujame realiu laiku, wave’as turėtų atstoti Chat’ą, tačiau iki to yra toli gražu: visa bendradarbiavimo sistema veikia nepakankamai greitai ir trūkčioja, net ant greito interneto.
• Norint išsiųsti atsakymą į kolegos postą, turiu su pele paspausti ant po tuo postu esančios, plonos linijos ir neturiu galimybės tai padaryti, naudodamasis vien klaviatūra, todėl dažai sukurdavau įvairių pokalbio šakų to visai nenorėdamas.
• Labiausiai naudojamos funkcijos, tokios kaip “Reply to this message”, “Edit”, “Delete”  yra paslepiamos iššokančiame meniu. Jų daug labiau norėtųsi piktogramų pavidalu, funkcinėje juostoje arba prie paties posto.
• Nėra collapse/expand funkcijų, kurios tikrai pagerintų pokalbio skaitomumą.
• Keblus sprendimas padarytas su blokų slinkties juostomis (ScrollBar’ais) – jie padaryti dvigubi ir labai blaško dėmesį.
• Dar pastebėjau, jog registruodamasis Wave gauni pašto adresą su @googlewave.com galūnę, tačiau jokio pašto į ją siųsti negalimą. Šiuo klausimu, viltingai žvelgiu į ateitį ir tikiuosi, kad toks funkcionalumas bus įvykdytas.

Taigi, apibendrintai galiu pareikšti, jog Google wave yra kur tobulėti, kadangi, juo kaip komunikavimo įrankiu, kol kas efektyviai naudotis tikrai neišeitų. Kadangi aptariau tik “preview” versiją, tikiuosi, kad ateityje šis įrankis tikrai patobulės ir jam šiai versijai skiriu 4,5/10 įvertinimą.