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.
