Daca ai trecut vreodata pe la vreo agentie de webdevelopment, atunci cu siguranta ai dat peste wireframes. Acele scheme care detaliza fiecare bucatica a sitului.

De ce sunt ele folosite?

Pentru ca in general, coordonatorul proiectului sau content managerul are o idee foarte clara despre cum ar trebui structurata informatia in site, ce contine mai exact aceasta informatie si cum trebuie ea prezentata. Chiar daca nu stie asta de la inceput, cu siguranta isi va da seama pe parcurs sau din brieful clientului si discutiile cu acesta.

Ei bine, dupa ce isi da el seama bine ce si cum, trebuie sa comunice acest knowledge si celorlalti, atat colegilor sai designeri si progamatori, cat si clientului, astfel ca nu trebuie sa existe nici un dubiu si nici neintelegeri atunci cand se purcede la constructia evectiva a sitului.

Sigur ca exista discutii atunci cand se intocmeste, dar ele sunt inerente si chiar ajuta atunci cand toti membrii echipei contribuie cu idei, dar in orice caz e responsabilitatea content managerului si tot el are dreptul de decizie.

Odata facute si aprobate cu clientul, ele vor fi implementate. Dar, cum ne putem asigura ca reprezinta cea mai buna alegere pentru acel proiect. Cum pot fi evaluate aceste wireframes?

In primul rand, trebuie sa tinem cont de faptul ca clientii vor intelege foarte greu modul de reprezentare al acestora, isi vor putea reprezenta foarte greu ce este desenat acolo. Trebuie deci sa avem grija ca desenele sa fie reprezentate la scala, sa aiba un design unitar si sa explice foarte bine tipul de informatie continut. De exemplu, in boxurile cu imagini trebuie sa scriem ca sunt imagini, la fel si in zonele de text. Foarte inspirata e si folosirea culorilor. Se poate folosi verde sau albastru pentru a indica o actiune si rosu pentru a mentiona mesajele de eroare.

Apoi trebuie sa folosim axioma designului centrat pe utilizator: utilizator-folosire-informatie. Ea poate fi exprimata si punand urmatoarele intrebari:

1. de ce se afla utilizatorul pe aceasta pagina?
Una dintre cele mai mari probleme de navigatie este legata de faptul ca designerii nu pot renunta la meniuri incarcate atunci cand utilizatorul se afla intr-o actiune ce nu necesita prezenta meniului principal, de exemplu.

2. ce informatii trebuie sa cunoasca utilizatorul pentru a termina o actiune?

3. ce informatii trebuie sa furnizeze sistemul pentru a-l ajuta sa o termine cu succes?

4. sunt bine reprezentate cauza si efectul?
Este important ca utilizatorul sa inteleaga ce se intampla atunci cand apasa pe un buton si unde il va duce acesta. De exemplu, butonul de cumpara. De asemenea, trebuie pastrata o consistenta a modului de reprezentare si functionare atunci cand se folosesc elemente sau functionalitati asemanatoare in diferite parti ale sitului.

5. ce vede utilizatorul atunci cand intra intr-o pagina?

6. ce actiuni sunt reprezentate pe acea pagina?

Foarte importanata este testarea acestor wireframes. Pentru a-ti da seama daca sunt probleme, ele ar trebui testate folosind o versiune low-fi, in varinata HTML, folosind CSS. Acest lucru este in general costisitor, iar in Romania nu se intampla aproape niciodata. Ce am folosit eu si cateodata cu mare eficienta este discutia cu colegi din alte departamente. E foarte usor sa incerci sa prezinti informatia pe care o ai altor colegi care nu sunt familiari cu proiectul. Pentru ei este mult mai usor sa observe anumite gafe ce s-ar putea strecura in navigatie sau functionalitati. Cea mai eficienta metoda este sa le printati si sa le distribuiti la 5-6 colegi. Veti putea obtine un feedback foarte bun in urma acestor discutii.

Pentru cei care vor sa fie cu adevarat rigurosi se poate folosi si MS Visio, un program care simuleaza dinamicitatea din spatele wireframe-urilor. Acesta poate fi folosit cu succes in locul clasicului PowerPoint.

Odata construite, trebuie sa ne asiguram ca ele urmaresc foarte aproape obiectivele de business, de marketing si in acelasi timp ale potentialilor utilizatori.

Ce ar mai fi util atunci cand se realizeaza wireframe-urile:

- puneti notele si comentariile pe aceeasi pagina cu wirefreme-urile

- incorporati text acolo unde este posibil si relevant, clientul va intelege mult mai bine despre ce e vorba.

Mai multe info puteti citi despre Paperprototyping, despre cum puteti testa prototipuri folosind hartia.

De curand am citit un articol scris de Jakob Nielsen, renumitul guru al usability for web. Am ramas putin socata. Da, recunosc, designul de situri din Romania se face la ghici si putini sunt cei care stiu cum sa construiasca un site corect. Dar nu ma asteptam ca asa ceva sa se intample si afara, si mai ales in state, unde hai sa recunoastem, sunt atat de multe firme de webdesign si cu o asa de mare experienta, incat parca ti-e jena pentru ei.

Credeam ca numai la noi se fac situri pe genunchi, ca numai noi ghicim cam ce ar fi bine pentru utilizatori, iar programatorul face designul sau designerul se da cu parerea despre cum se fac wireframes sau cum trebuie gestionat proiectul. Se pare insa ca e o practica generala si doar acolo unde exista ani buni de experienta intr-o companie de webdevelopment si ceva formare teoretica si practica in ceea ce-i priveste pe specialistii care fac siturile.

Asupra acestui aspect al ghicitului se axeaza si Nielsen in articolul pe care l-am citit. El spune ca 75% dintre cei care ghicesc sunt pe langa si doar o simpla observatie asupra a 2 utilizatori poate determina o acuratete mult mai mare asupra informatiilor ce trebuie prezentate in site sau a asupra functionalitatilor ce trebuie dezvoltate.

Un alt lucru ce este extrem de important este subiectii care testeaza aceste functionalitati si date. Este extrem de important ca acestia sa nu fie cunoscatori in domeniu (de exemplu, asa cum se practica adesea, colegi de birou) si nici sa nu fie rude, deoarece este un lucru stiut ca cei in imediata vecinatate devin de-a lungul timpului cunoscatori ai mediului mult mai buni decat utilizatori obisnuiti.

Concluzia articolului este ca nu trebuie sa presupunem ca datorita dezvoltarii internetului si utilizatorii sunt mai priceputi si deci stiu cum sa foloseasca un site mai bine si mai eficient. Aceasta perceptie e total gresita. Cu siguranta ca exista utilizatori din ce in ce mai priceputi, dar acestia sunt destul de putini si nu intra in targetul unui site obisnuit. Restul utilizatorilor sunt formati din oameni mai in varsta care sunt putin obisnuiti cu noile functionalitati si gadgeturi si tineri care abia acum invata.

Chiar si eu, care ma declar un expert in domeniu am intalnit dificultati in utilizarea unor situri romanesti. Si aici ma refer in special la situri care tin neaparat sa arate spectaculos in detrimentul functionalitatii, dar si la situri care au fost concepute pornind de la o baza gresita.

Poate ca ar fi bine ca designerii, si aici ma refer la cei care construiesc situl sa ia in considerare mai mult utilizatorul si sa tina mai putin la tehnicile noi si la moda.

Ce bine a fost cand am descoperit ca exista Firefox!!! Toate chinurile mele cu Ie au incetat si am avut o viata mult mai usoara. Apoi am descoperit Thunderbird si am fost de 2 ori mai fericita

Un alt motiv de fericire simpla aparu azi-dimineata cand citeam alene de pe Reader. Am descoperit la Denisuca o lista grasana de add-onuri pentru Firefox! Am pus rapid mana si mi-am instalat vreo 4 :

- Copy Plain Text
Pentru ca asa cum bine zicea si Denisuca, ce bine e sa copiezi ceva de pe online si sa nu mai trebuiasca sa il treci prin notepad ca sa scapi de formatare

- FireFTP Pentru testing. Eu folosesc WinSCP si Total commander, dar in ultima vreme dau rateuri grave la blog si trebuie sa gasesc altceva rapid si eficient (mai bun ca Ie si Chrome)

- Screengrab Pentru ca in viata de content / account / pm ai nevoie orican de un printscreen sanatos Eventual o pagina mult mai lunga decat imi afisaza mie laptopul. Si el va fi in teste, sa vedem ce poate.

- StumbleUpon Tot de test, asa, dupa recomandarile Denisucai.

Marturisesc ca mai folosesc si alte add-onsuri, dupa cum urmeaza:

- Cooliris Un tool spectaculos care iti transforma orice site cu poze intr-o galerie foto superba.
- Firebug A developers tool.
- Google Gears Asta l-am folosit pentru un site misto care iti dadea posibilitatea sa testezi in toate browserele live pe net. Super misto. http://www.xenocode.com/
- Microsoft .NET Framework Assistant Nici nu stiu ce face asta. Oricum ajuta si el la navigare sau ceva de genu.
- Move Media Player Nici asta nu stiu. Cred ca se va sterge
- ReloadEvery Iti face refresh la toate paginile pe care esti. E foarte practic pentru bloguri sau siturile de stiri, ca sa nu mai stai sa dai tu refresh
- Romanian Spelling Dic Asta e destul de evident pentru ce il folosesc.
- Xenocode ClickStart Se leaga evident de Google Gears si de testarea in browsere.

Cam asta ar fi

Multumiri Denisucai pentru sfaturi pretioase

iata o solutie ingenioasa. Am auzit ca o sa apare ceva pe la jumatatea lui 2009. Abia astept sa vaz la ce preturi.

Happy Birthday!!! Asta e un foarte bun motiv sa petrec some quality time cu iPodul meu generatia 6.
Pentru toti posesorii de iPod, enjoy!

Thank you, Steve Jobs.