Analiza moldwebului și a tendințelor internaționale (2011)

1. Îmbunătăţirea experienţei
utilizatorului
Analiza moldwebului i a tendin elorș ț
interna ionaleț
Gheorghe Lupa cuș
RT Design Studio

2. Ce este User eXperience?
Termenul de experien ă a utilizatorului adesea este utilizat ca sinonimț
al uzabilită ii, interfa ei cu utilizatorul, experien a de interac iune,ț ț ț ț
design de interac iune, experien a consumatorului, web site appeal,ț ț
emo ii, ‘wow efectul’.ț
La general, experien a utilizatoruluiț include toate aceste concepte.
ISO 9241-210 defineşte UX (User eXperience) ca "percepţia şi
reacţiile unei persoane care rezultă în urma folosirii sau anticipării
folosirii unui produs, sistem sau serviciu".

3. User Experience din diferite perspective
UX ca fenomen
• Descrie ce este i ce nu este UXș
• Identifică diferite tipuri de UX
• Explică circumstan ele i consecintele UXț ș
UX ca domeniu de studiu:
• Studierea fenomenului, de exemplu cum se formează experien a utilizatorilor,ț
care sunt trăirile lor anterioare i care sunt a teptările acestoraș ș
• Găsirea mijloacelor de proiectare a sistemelor care creează UX
• Investigarea şi dezvoltarea de metode de proiectare şi evaluare UX
UX ca practică:
• Anticiparea UX ca parte a practicii de design
• Reprezentarea UX, de exemplu, construirea unui prototip pentru a demonstra
şi comunica UX dorit pentru alţii
• Evaluarea i îmbunătă irea UXș ț
• Oferirea de designuri menite să creeze un anumit UX

4. Componentele cheie ale UX:
• Uzabilitatea
• Interfa a cu utilizatorul(UI) i designulț ș
• Interac iunea offline cu produsul sau serviciulț

5. Ce măsoară uzabilitatea?
Uzabilitatea măsoara calitatea experienţei unui utilizator atunci când el
interacţionează cu un produs, un sistem, fie aceasta un site web, o
aplicatie software, o tehnologie mobilă, sau orice dispozitiv operat de
utilizator.
Uzabilitatea este bazată pe o combina ie de factori:ț
• Uşurin a de învăţareț - Cât de repede poate un utilizator, care nu a văzut interfaţa
înainte, sa o invete suficient pentru pentru a îndeplini sarcinile de bază
• Eficien a în utilizareț - Odata ce un utilizator experimentat a învăţat să folosească
sistemul, cât de repede poate el sa işi îndeplineasca sarcinile?
• Memorabilitatea - Dacă un utilizator a folosit sistemul înainte, poate el sa il
memoreze suficient ca să-l folosească în mod eficient data viitoare, sau utilizatorul
trebuie să înceapă din nou de învăţarea sistemului?
• Frecven a erorilor şi severitatea acestoraț - Cât de des utilizatorii fac erori în timp
ce folosesc sistemul, cât de grave sunt aceste erori şi cât de simplu utilizatorii pot să
corecteze aceste erori?
• Satisfac ia subiectivaț - Cit de tare utilizatorilor le place sistemul?
www.usability.gov

6. Designul NU este artă
• Arta nu are o audien ă specificăț
• Arta nu are un scop
• Implică două componente: artistul iș audien aț

7. Designul
Implică trei componente: compania, designerul iș audien aț

8. UX.md - o resursă despre uzabilitate
1. Studii de caz
2. Articole pe tema UX
3. În curând primul manual din Moldova dedicat uzabilită iiț

9. Erik Reiss: Cele 10 dogme a uzabilită iiț
1. Tot ce există doar pentru a satisface preferin ele personale ale proprietarului paginii web, trebuie eliminat.ț
2. Tot ce există doar pentru a satisface ego-ul designerului trebuie eliminat.
3. Tot ce este nerelevant con inutului paginii trebuie eliminat.ț
4. Orice func ionalitate sau tehnică care scade abilitatea vizitatorului de a naviga liber trebuie refăcut sauț
eliminata.
5. Orice obiect interactiv care il face pe vizitator să ghicească ce func ionalitate are, trebuie refăcut sauț
eliminat.
6. Browserul trebuie să fie singurul program care să asigure func ionarea corectă a paginii web, fără altț
software adi ional.ț
7. Con inutul trebuie să fie în primul rând u or de citit, în al doilea rând posibil de imprimat, iar în al treilea rândț ș
- downloadabil.
8. Uzabilitatea nu trebuie să fie vreodată sacrificată în schimbul ghidului de stil.
9. Vizitatorul nu trebuie for at să se înregistreze sau să dea informa ii personale, decât dacă proprietarulț ț
paginii web este incapabil să ofere un serviciu sau să încheie o tranzac ie cu vizitatorul fără a face aceasta.ț
10. Încalcă oricare din aceste reguli, înainte de a ajunge să faci lucruri pur i simplu barbare cu pagina ta web.ș
Eric Reiss

10. Studiu de caz - Moldcell

11. Design - layout
• În primii 90 de pixeli pe verticală nu este nimic func ional, după care urmeazăț
logo-ul.
• În meniul principal nu este un link spre prima pagină.
• Logo-ul, nu transmite ideia că are func ionalitate de legătură spre primaț
pagină.
Concluzie: Layoutul iroseste spatiul util in zadar fara crearea unui online brand
experience consistent.

12. Fundalul
Acesta are două culori – gri i violet.ș
•un utilizator cu monitorul de rezolu ie 1024px pe orizontală o să perceapăț
pagina web ca fiind cu background violet.
•acela i utilizator de un calculator cu monitor de rezolu ie 1280px în sus o săș ț
vadă că background-ul de fapt mai are i culoarea gri.ș
•Concluzie: o experien ă diferită - intri pe aceea i pagină web, însă de peț ș
diferite calculatoare look-ul este diferit.

13. Sliderul
Are următoarele neajunsuri:
•nu are o navigare efectivă - adică te po i muta doar la stânga / dreapta, însă nu po i vedeaț ț
un scurt rezumat la toate slide-urile i nu po i accesa ceea ce te interesează deodată - trebuieș ț
să cau i folosind butoanele cu săge ile de stânga / dreapta.ț ț
•nici un slide nu are buton de îndemn la ac iune de genul află mai multe sau comandă acum iț ș
utilizatorul ini ial nu tie că de fapt slide-urile au o pagină de destina ie unde poate afla maiț ș ț
multe despre con inutul slide-ului.ț
Concluzie: Să-l faci pe utilizator să ghicească func ionalitatea - este o gre eală de uzabilitate.ț ș

14. Exemplu de slider bun de urmat
Un exemplu bun de slider, care are o navigare intuitiva i butoane de îndemn laș
ac iune:ț
Pagina oficială a companiei Verizon http://www.verizonwireless.com/b2c/index.html

15. Navigarea principală
• Meniul principal nu are elemente de Prima pagină, item care e bine să fie
prezent primul. Nici logo-ul nu e folosit bine pentru a reda func ionalitatea deț
prima pagină.
• Altă problemă a meniului este că elementele din meniu nu sunt relevan i iț ș
omogeni după natura informa iei i ierarhiei:ț ș
• În primul rând: Ce vinde Moldcell? Produse i Servicii. Gruparea lor într-un singur item oș
vedem ca minus de uzabilitate din simplu motiv că dacă vreau să accesez compartimentul
Servicii, trebuie să accesez întai Produse i servicii i apoi click pe Servicii.ș ș
• În acela i timp vedem Roaming, care până la urmă este un serviciu, fiind gre it plasat ca iș ș ș
ierarhie în navigarea principală.

16. Exemple de meniuri bune de urmat
Pagina oficială Vodafone Marea britanie - www.vodafone.co.uk/personal/
Pagina oficială a companiei Apple – www. apple.com

17. Navigarea secundară
Butoanele de mai jos de slider prezintă un mare minus în navigare. De ce?
•Navigarea nu este centralizată i consistentă pe toată pagina web.ș
•Această navigare adi ională nu este prezentă pe celelalte pagini, iar pe primaț
pagină distrage aten ia de la navigarea principală.ț
•Plus nu este vizibilă integral (are doua în plus care devin accesibili doar la
folosirea navigării... în cadrul navigării - săge ile laterale) –din nou e un minus deț
uzabilitate.
•Credem că un utilizator care a cumpărat un număr Moldcell n-o sa găsească
butonul ascuns Am număr nou din acest meniu.

18. Execuția tehnică
Analizând doar câteva elemente de pe prima pagină, am gasit de mai sus care
au urmatoarele probleme:
•diferite raze de rotunjire a col urilor elementelorț , este deranjant vizual
•foarte multe distan e diferite între elemente i raporturi - iară i - creează unț ș ș
disconfort vizual
•efecte i stiluri diferite - umbre, separatoare reliefate, butoane reliefate, etc. -ș
lipsă de consisten ă.ț

19. Structura i algoritmul de funcţionareș pe
care le recomandăm
Acest tip de navigare a primit denumirea de super drop down menus si a devenit
una dintre ultimele tendin e în web design pe care multe companii mari oț
implementează.

20. Recomandări pentru o nouă pagină Moldcell
• Un design func ional.ț
• Mai bine focusat.
• Dă acces la distan ă de 1 click la toate compartimentele.ț
• Are în vedere toate regulile de uzabilitate.
• Are implementate ultimele tendin e i practici ale designului pentru webț ș
(super meniuri, slidere, js lightboxuri i anima ii vizuale interac ionanteș ț ț
(acestea din urmă nu sunt vizibile aici))
• Are o arhitectură bună a informa iei.ț
• Comunică mai bine.

21. Pagina Moldcell după o analiză de Usability

22. Nic.md - Moldova Internet gate în 2000

23. Nic.md - Moldova Internet gate în 2011

24. Name.com - registrator de domenii

25. Pagina de logare în Internet Bank în .MD

26. Online banking - Bank of America

27. Online Banking in Moldova

28. Online banking - Bank of America

29. Serviciile fiscale în Moldova

30. Servicii fiscale în străinătate

31. L.MD – ideia.
Rezultatul studiului lui Jakob Nielsen referitor la găsirea
problemelor de uzabilitate.
Sursa: useit.com

32. L.MD - Prima pagină

33. L.MD - Pachete

34. L.MD - Adaugă un test

35. L.MD - Contul meu

36. L.MD - Rezultatele testului

37. Vă mul umim!ț
10x!
RT Design Studio
www.rt.md
;)