La ce sa fim atenti cand testam uzabilitatea unui site

La ce sa fim atenti cand testam uzabilitatea unui site

Sunt patru lucruri importante de care trebuie sa avem grija atunci cand testam uzabilitatea propriei pagini web.

• Testati site-ul si nu userii.
• Bazati-va mai mult pe ce aflati despre performanta decat despre preferinte.
• Folositi-va de ce aflati din testare.
• Incercati sa gasiti solutia cea mai buna avand in vedere ce gandeste majoritatea utilizatorilor vostri.

Testati site-ul si nu userii

Pentru unii utilizatori, termenul "testare" are o conotatie negativa. Ne chinuim sa ne asiguram ca participantii nu se gandesc ca ii testam. Ii ajutam sa inteleaga ca ne ajuta sa testam prototipul sau pagina web. De fapt, nu folositi termenul "testare" in fata participantilor deloc. In schimb, invitati participantii sa ajute la "incercarea prototipului".

Cand utilizatorii intampina greutati in finalizarea unei sarcini, remediem pagina web, nu utilizatorii. Intrebarea care trebuie pusa este: " Cat de bine permite pagina mea utilizatorilor obisnuiti sa isi atinga obiectivele de la intrarea pe site ?" in loc de " Cat de bine se descurca utilizatorii pe site ? "

Bazati-va mai mult pe ce aflati despre performanta decat despre preferinte.

Putem masura atat performanta, cat si preferintele. Indicatorii performantei includ succesul, timpul, erorile etc. Indicatorii preferintelor sunt indici ai satisfactiei si confortului utilizatorilor.

Unii designeri cred ca daca fac designul unei pagini web pentru a satisface cerintele utilizatorilor, site-ul va face ca utilizatorii sa actioneze bine. Realitatea nu sustine acest lucru.
De fapt, performanta utilizatorilor si preferintele lor nu se potrivesc mereu. Un studiu a aflat ca in jur de 70% din utilizatori au avut indicatori ai performantei si ai preferintei care se potriveau.
Asta inseamna ca fie s-au descurcat bine si le-a placut pagina web, fie nu s-au descurcat si nu le-a placut pagina.

Cu toate astea, ramane un procent destul de mare de oameni - 30% pentru care indicii performantei si ai preferintelor nu se potriveau. Asta inseamna ca fie s-au descurcat bine pe pagina web, dar nu le-a placut, fie nu s-au descurcat bine, dar le-a placut.

Diverse motive au fost propuse pentru a explica de ce deseori oamenii dau unui site o nota mai mare decat ne-am astepta din indicii de performanta. Se poate sa dea vina pe ei insisi pentru problemele pe care le au pe site. Se pot gandi ca pot rani sentimentele administratorilor paginii web daca acorda site-ului o nota mica. Poate ca nu au fost constienti de problemele pe care le-au avut pe site, atunci cand le-au avut. Toate aceste motive sustin recomandarea de a va baza mai mult pe ce aflati din indicii de performanta decat din indicii de preferinte.

Folositi-va de ce aflati din testare

Testarea uzabilitatii nu este doar un to-do care trebuie bifat cat mai repede in proiectul paginii web. Un test de uzabilitate nu este terminat atunci cand ultimul participant termina testarea. Echipa trebuie sa se gandeasca la cele aflate, sa seteze prioritati si sa schimbe prototipul sau pagina web pe baza celor intamplate in testarea uzabilitatii.

Incercati sa gasiti solutia cea mai buna avand in vedere ce gandeste majoritatea utilizatorilor vostri.

Creare oricarui produs, inclusiv o pagina web, necesita luarea in considerare a multor utilizatori diferiti cu diferite modalitati de lucru, diferite experiente si diferite intrebari si nevoi. Cele mai multe proiecte, incluzand designul si update-urile paginilor web, trebuie sa faca fata constrangerilor de timp, buget si resurse. Punerea in balanta a tuturor acestor lucruri este o provocare majora a majoratatii proiectelor.

Incercati sa creati pagini web care vor permite unui procentaj foarte mare dintre utilizatorii vostri sa isi raspunda la intrebari si sa isi finalizeze taskurile pentru care au intrat pe pagina web. Cercetarile arata ca acele costuri suportate pentru revizuirea paginii web din cauza utilizatorilor care nu au succes pe site sunt mult mai mari decat costul gandirii paginii web sa corespunda nevoilor userilor inainte ca aceasta sa fie lansata.

Avand in vedere nevoile identificate in timpul testarii uzabilitatii, incercati sa gasiti cele mai bune solutii pentru problemele de design ale paginii web. O interfata web bine gandita asigura succesul utilizatorilor pe site, ceea ce duce la revenirea lor pe pagina si la satisfactie mai mare cu privire la site. sursa: usability.gov

Pentru o testare a uzabilitatii de succes !
Bulent

Validatori CSS ( Cascading Style Sheets )

Pentru a valida sursele CSS pe care le creati, am gasit cateva unelte care va pot fi de folos:

CSSCheckup
Verifica un CSS de pe hard drive pentru a fi in conformitate cu standardele.

"Validate your CSS"
Pentru a valida CSS conform specificatiilor W3C.

CSS Check
Aceasta unealta este utila pentru a verifica acuratetea CSS-ului.

CSS Validator
Un validator CSS in java, care poate fi downloadat.

Pentru coduri CSS frumos scrise :)
Bulent

Interfete Web 101 - CMS

Salut din nou!

Tot din categoria elementelor de baza (101) ce trebuie luate in vedere cand vine vorba de construirea unui site, face parte si termenul de Content Management System, pe scurt CMS.

Ce este un CMS?
Dupa cum ii zice si traducerea mot-a-mot din engleza, un CMS reprezinta un sistem de administrare al continutului unui website. El este format in general din doua componente:
- CMA (Content Management Application): partea ce permite unui manager sau utilizator sa creeze, modifice, sau stearga continutul unui site fara a avea cunostinte specializate (Webmaster, HTML).
- CDA (Content Delivery Application): componenta ce foloseste si compileaza informatiile din CMS pentru a actualiza website-ul nostru.

Functionalitatea unui CMS


sursa photo
Dupa cum se poate observa in figura functiile de baza ale unui CMS sunt:

* Crearea de continut : Un CMS ofera o interfata usoara de adaugare de fisiere text, poze, video, documente unui utilizator care nu are cunostinte de HTML sau Web design. De asemenea are functii de structurare a informatiei, folosind chiar drag-and-drop intre pagini, si de stabilire a legaturilor existente intre ele.

* Managementul continutului : Sunt puse la dispozitie mecanisme ce asigura salvarea tuturor versiunilor unei pagini pe masura ce ea este actualizata, impreuna cu informatii despre cine a facut modificarea si cand. De asemenea se poate asigura accesul userilor doar la anumite parti ale unui website care pot fi editate, si pentru a asigura un control mai bun al continutului fiecare actualizare poate fi notificata unui supervisor pentru a primi o confirmare inainte ca acesta sa fie publicat efectiv de catre CDA.

* Publicarea : Odata ce continutul este gata acesta poate fi publicat foarte usor pe unul sau mai multe site-uri simultan. CMS-ul lasa loc pentru o customizare grafica prin numeroase teme si plug-in-uri, si asigura consistenta paginilor pe website-ul nostru. Aceasta face ca atentia autorului sa fie mai concentrata asupra calitatii continutului, in timp ce partea de look & feel sa revina CMS-ului.

* Prezentare : Un CMS cuprinde numeroase modalitati de imbunatatire a calitatii si flexibilitatii unui site. Asigura o compatibilitate cu numeroase browsere si face ca site-ul sa fie accesibil la un numar cat mai mare de vizitatori. Poate genera automat structura paginilor si meniurile din site si deasemenea il poate face mai interactiv cu vizitatorii si mai dinamic.

In plus fata de cele prezentate mai sus, un CMS mai prezinta si alte avantaje: costuri reduse de mentenanta a site-ului impreuna cu suport pe numeroase forumuri, optiuni de securitate avansate, timp scurt de punere in functiune si un potential mai mare de crestere a site-ului datorita contributiei simultane a mai multor autori la el.

Exemple
Printre cele mai cunoscute CMS-uri se regasesc Joomla!, Drupal, si specializat pe partea de blog-uri, Wordpress. Exista si evaluari ale CMS-urilor anuale iar o lista sumara a premiilor acordate o gasiti aici. Un exemplu de site construit pe Joomla! si cu tutoriale pe partea de interfete web este www.interfete-w3b.com

Va salut si ne reauzim in curand :-)

C# vs. VB - Partea a doua

Revin cu partea a doua a micutei noastre comparatii intre C# si VB, si va voi prezenta in continuare diferentele concrete, la nivel de sintaxa, intre cele doua limbaje.

Structura
Din punct de vedere al organizarii generale, codul C# si cel VB sunt foarte asemanatoare, majoritatea diferentelor fiind pur cosmetice - spre exemplu, C# foloseste acolade pentru a deschide si inchide blocuri, VB - "End ". Ceea ce este, insa, bine de stiut, este faptul ca in timp ce C# permite scrierea mai multor instructiuni pe o singura linie, sau a unei singure instructiuni pe mai multe linii, VB nu permite acest lucru. Cu alte cuvinte, in VB avem "linia si intructiunea", sau putem folosi caracterul "_" (underscore) pentru a continua pe linia urmatoare. Majoritatea tutorialelor de tip "coding style guidelines" chiar recomanda folosirea acestei alternative pentru a face codul cat mai lizibil.

Comentarii
La prima vedere, aceasta sectiune poate parea nu foarte importanta, dar de dragul coding style (din nou) si al documentarii codului (mai ales in cazul lucrului in echipa, sau al unui proiect al carui cod sursa urmeaza a fi inspectat de un superior, client, etc.) - voi discuta si acest aspect. Ce este interesant de observat - si o bila alba pentru C# in defavoarea lui VB - este faptul ca C# ofera o mult mai mare flexibilitate a comentariilor - se pot comenta atat cate o linie intreaga sau o portiune finala de linie ("//"), cat si mai multe linii consecutive ("/*...*/"). In VB, in schimb, nu se pot comenta decat linii intregi sau portiuni finale de linii (prin inserarea unui apostrof), si nu paragrafe. Din fericire, insa, Visual Studio compenseaza acest neajuns prin optiunea de a comenta automat o selectie a cursorului.
O facilitate demna de mentionat (chiar daca nu reprezinta o diferenta, fiind accesibila pentru ambele limbaje) este aceea de adauga un summary oricarei functii sau metode.

Tipuri de date
Tipurile primitive de date sunt aceleasi atat in C#, cat si in VB, singurele diferente fiind de scriere a denumirilor acestora. Ca regula, in VB denumirile sunt scrise cu litera mare, iar in C# cu litera mica, singura exceptie fiind DateTime din C#. Tipurile principale de date la care apar si alte diferente sunt (VB/C#): Boolean/bool, Integer/int, UInteger/uint, Single/float, Date/DateTime.
Ce ar mai fi de mentionat aici este conversia intre tipuri. In VB, cea generala se face prin functia CType(obiect, tip), cu forme particulare, cum ar fi CInt, CStr, etc. Iar in C#, conversia se face prin cast, de forma (tip_nou)obiect.

Constante si enumerari
Nu se pot spune prea multe la acest capitol - declararea si folosirea constantelor si a enumerarilor sunt aproape identice intre cele doua limbaje, iar cuvintele cheie (const, respectiv enum), sunt si ele aceleasi (mai putin capitalizarea).

Operatori
Principalele diferente intre operatorii C# si cei VB sunt faptul ca C#, spre deosebire de VB, foloseste doi operatori diferiti pentru atribuire si comparatie de egalitate (=, respectiv ==), si apropierea de limbajul natural a operatorilor logici in VB, fata de C# - spre exemplu AndAlso/And, fata de &&/&, OrElse/Or, fata de ||/|, etc.

Voi continua in posturile urmatoare cu restul diferentelor. Intre timp, puteti arunca un ochi aici, pentru exemple de cod si pentru detalii suplimentare pe marginea a ceea ce am mentionat de mai sus, dar nu uitati sa va intoarceti pentru explicatii :).

Catalina

C# vs. VB - The Series

Salutare din nou!

Intamplator m-am intalnit zilele trecute cu amic "fellow .NET monkey". Evident, cand conversatia a ajuns la capitolul "cu ce te ocupi?", prima intrebare a fost "VB sau C#?". Cum aceasta pare intrebarea zilei (de cam multe zile), m-am gandit sa incerc sa formulez si propriul meu raspuns.

Prima parte a acestui raspuns va trata aspectul istoric, sa spunem asa, al diferentelor intre cele doua limbaje - mai exact, contextul in care a aparut fiecare si publicul caruia ii era fiecare destinat.

1. Visual Basic

Scopul limbajului Visual Basic a fost de a crea o piata mai larga pentru uneltele de software development. Inainte de aparitia sa, in martie 1991, limbajele de programare erau percepute ca fiind complexe si accesibile numai programatorilor cu multa pregatire si experienta. VB, in schimb, este simplu din punct de vedere sintactic, apropiat de limbajul natural, si permite practic oricui sa creeze aplicatii de baza, dupa numai cateva ore de exercitiu. In contextul in care la momentul aparitiei VB, programarea era vazuta ca un soi de arta elitista, posibilitatea de a se alatura acestei "elite" a generat o adevarata miscare de masa in randurile "calculatoristilor" cu experienta in "butonare", dar nu in programare.

Faptul ca Visual Basic (cel de la vremea aceea, cel putin), nu dispunea de uneltele de baza ale programarii orientate pe obiecte nu a contat foarte mult pe moment. Aplicatiile pentru care exista cerere erau inca suficient de simple - client-server in cel mai fericit caz, iar aplicatiile web nu depaseau stadiul de experimente si improvizatii. Fapt ce a reprezentat o lama cu doua taisuri.

Varful "modei" VB a coincis cu varful fenomenului numit "Internet boom". Armate de programatori cu lacune grave in pregatire si in gandire erau platiti cu sume fabuloase pentru a incropi orice semana cat de cat cu o aplicatie software. Iar limbajul VB, cu lipsa sa de formalitate si de constrangeri, a constituit mediul perfect.

Schimbarea a intervenit in 2000, cand Microsoft a anuntat lansarea .NET, iar tot ceea ce a insemnat pana atunci VB a fost inlocuit cu un model cu totul nou. Engine-ul din spate a fost rescris de la zero, si toate uneltele third party mai mult sau mai putin functionale, elegante, etc. au fost inlocuite cu un framework nou, organizat, si consistent. Cu aceste schimbari, functionalitatea VB a fost adusa la nivelul unui C# si Java.

Cu toate acestea, mentalitatea VB a ramas pana astazi cam aceeasi, si exista o explicatie pentru care, statistic vorbind, programatorul mediu C# da dovada de ceva mai multa disciplina decat cel VB. Evident, cu exceptiile de rigoare.

2. C#

Prin comparatie, C# a pastrat formalitatea si constrangerile specifice C, apoi Java. Efectul indirect a fost perpetuarea mentalitatii oarecum elitiste ce domina aria programarii pana la aparitia VB. Multi programatori C# inca ii privesc cu un anume aer de superioritate pe cei VB. O posibila explicatie a mentalitatii C# ar fi sintaxa putin mai abstracta, fata de cea VB, foarte apropiata de limbajul natural. O alta, dupa cum am precizat mai sus, numarul mult mai mare de programatori VB.

Adevarul este, in proprie experienta, cel putin, ca din punct de vedere functional, cele doua limbaje ofera aceleasi unelte si se pot realiza aceleasi lucruri la fel de bine. Dovada sta faptul ca orice sursa poate fi tradusa dintr-un limbaj in celalalt. Diferenta este ca unele "bucatele" de functionalitate pot fi implementate mai usor/mai repede/in mai putine linii, in C# fata de VB, sau invers.

Iar exact aceste diferente concrete in sintaxa, evaluare, organizare a memoriei, vor constitui subiectul urmatoarelor articole din aceasta mini-serie.

Pe data viitoare,
Catalina

Tutorial 2 - Interfete web

Bine ati venit la tutorialul 2 de interfete web!
Va voi prezenta o mica aplicatie ce combina Ajax,Html,PHP si MySQL, care insereaza intr-un camp select anumite optiuni aflate intr-o baza de date.
Codul sursa il poti lua de la un link specificat de:
www.interfete-w3b.com/index.php?option=com_content&view=article&id=46&Itemid=34
(luati de acolo numele arhivei pentru fiecare tutorial)

Va recomand sa folositi un editor ce va arata numarul liniei, deoarece pentru a nu incarca in mod inutil tutorialul voi specifica mai mult numarul liniei decat codul sursa.(aveti grija doar sa nu modificati textul)

1. MySQL
Pentru tutorialele ce urmeaza va voi ruga sa faceti o baza de date intitulata 'test', prin faptul ca vom lucra doar cu ea.
In cadrul acesti baze de date va trebui sa creati un tabel intitulat 'tutorial2', cu un camp varchar (dimensiunea o alegeti voi in functie de necesitate, la mine este de 33), ce poate avea orice nume va doriti.
Inserati cateva informatii in noul tabel (nume, spre exemplu).

2. Html
Rolul html-ului va fi doar acela de a afisa select-ul cu informatiile luate din baza de date, sa includa codul javascript si sa il apeleze.

3. PHP-ul
In fisierul interogare.php, va trebui sa modificati liniile 2 si 3, astfel incat sa puteti avea o conexiune valida la baza de date (eu am folosit default...localhost,root,fara parola)
Explicatie:
Programul ia toate informatiile din baza de date si le memoreaza in variabila $query.
Pentru fiecare rand valid, voi afisa informatia din acel rand separata de ";". Folosesc acest simbol, prin faptul ca atunci cand Javascript(Ajax) va primi informatia de la server sa stie unde anume se termina o optiune si unde incepe o alta optiune (astfel incat in datele inserate in tabelul tutorial2 nu trebuie sa existe acest caracter special).
Desigur ca am fi putut insera direct informatia in HTML, folosind php-ul, dar acest tutorial foloseste avantajele AJAX, acela de a putea modifica dinamic informatia (scopul fiind cel care face diferenta, in aplicatia pe care o veti dezvolta ulterior).

4.Ajax (Javascript)
Functia ajax() este cea care ne va oferi informatiile necesare pentru campurile din select-ul nostru.
Initial (incepand cu randul 3 si pana la randul 26), se incearca initializarea variabilei xmlHttp. Primul try, incearca sa o initializeze pentru Opera,Safari,Firefox, urmatoarele incercari (ce folosesc ActiveXObject) de initializare sunt specifice pentru Windows Explorer.
Ulterior va fi atasat acestui obiect o functie ce trebuie sa se execute atunci cand starea obiectului se modifica (atunci cand primim informatii de la server). Ne intereseaza apoi ca readyState sa fie 4, adica informatia sa fie trimisa complet de catre server. Dupa ce stim ca server-ul a trimis toata informatie, o putem parsa pentru a o adauga select-ului din html.
Luam elementul select din html, folosind un id, spargem in atomi raspunsul de la server (in functie de caracterul ";", specificat anterior). Acum avand informatia in variabila 'vectorul', putem incepe sa o parcurgem si sa o adaugam. In primul rand, cream un nou nod cu tag-ul 'option' (linia 38), ii setam textul si valoarea ca fiind informatia din vector de pe pozitia corespunzatoare (liniile 39,40) si in final il adaugam in select (tinand cont din nou, de diferentele intre browsere).

Sper ca acest cod sursa sa va fie de folos!
Va astept si la urmatorul tutorial de interfete web.

Interfete Web 101 - Tema

Salutare!
Am sa va vorbesc astazi despre un aspect foarte important ce tine de partea de interfata a unui website, si anume despre tema.
Indiferent daca avem de-a face cu Joomla, Wordpress sau orice alt CMS, task-ul alegerii unei teme potrivite petru site-ul nostru este unul destul de anevoios, deoarece avem sute de teme la dispozitia noastra atat contra cost cat si gratuit.

De ce este tema un element important?
Deoarece conteaza foarte mult la prima impresie pe care o au vizitatorii despre site. Iar prima impresie joaca un rol esential in conditiile in care vrem ca un vizitator sa revina pe site-ul nostru sau sa devina un cititor fidel in cazul in care vorbim de un blog.
Cu ce ne poate ajuta o tema buna?
* Atragerea de trafic pe site.
* Scoaterea in evidenta a anumitor produse.
* Aranjarea informatiei pentru a putea fi usor perceputa de cititori.
* Interactiune intre cititori si proprietarii site-ului sau intre cititori si cititori.

De asemenea ea poate fi privita ca o extensie a ceea ce prezinta site-ul si poate spune multe despre persoana sau firma pe care o reprezinta. Astfel trebuie luate in considerare aspecte de genul 'Ce vrea sa ne vanda/prezinte site-ul?' in cazul in care vorbim de site-ul unei companii, si sa alegem o tema adecvata. Sau daca avem de a face cu un blog, se pune problema daca vrem reclame pe el sau nu. Daca da, putem opta pentru teme cu 3 coloane sau cu un spatiu mai amplu in partea de sus pentru a fi pozitionate banner-ele. Un rol important il joaca aici si plug-in-urile care mai pot fi folosite.

Ca o ultima observatie, dupa ce ne-am hotarat asupra unei teme este nevoie si de o testare amanuntita a ei pe mai multe browsere pentru a evita surprizele neplacute :-).
Atat pentru azi, see you soon.
Vali