Îmbunătățirea experienței utilizatorilor

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

Transcript of Îmbunătățirea experienței utilizatorilor

Page 1: Îmbunătățirea experienței utilizatorilor

Îmbunătăţirea experienţei utilizatorului

Analiza moldwebului i a tendin elor ș ținterna ionaleț

Gheorghe Lupa cușRT Design Studio

Page 2: Îmbunătățirea experienței utilizatorilor

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".

Page 3: Îmbunătățirea experienței utilizatorilor

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

Page 4: Îmbunătățirea experienței utilizatorilor

Componentele cheie ale UX:

• Uzabilitatea• Interfa a cu utilizatorul(UI) i designulț ș• Interac iunea offline cu produsul sau serviciulț

Page 5: Îmbunătățirea experienței utilizatorilor

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

Page 6: Îmbunătățirea experienței utilizatorilor

Designul NU este artă

• Arta nu are o audien ă specificăț• Arta nu are un scop• Implică două componente: artistul i ș audien aț

Page 7: Îmbunătățirea experienței utilizatorilor

Designul

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

Page 8: Îmbunătățirea experienței utilizatorilor

UX.md - o resursă despre uzabilitate

1. Studii de caz2. Articole pe tema UX3. În curând primul manual din Moldova dedicat uzabilită iiț

Page 9: Îmbunătățirea experienței utilizatorilor

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

Page 10: Îmbunătățirea experienței utilizatorilor

Studiu de caz - Moldcell

Page 11: Îmbunătățirea experienței utilizatorilor

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.

Page 12: Îmbunătățirea experienței utilizatorilor

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.

Page 13: Îmbunătățirea experienței utilizatorilor

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. ț ș

Page 14: Îmbunătățirea experienței utilizatorilor

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

Page 15: Îmbunătățirea experienței utilizatorilor

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ă.

Page 16: Îmbunătățirea experienței utilizatorilor

Exemple de meniuri bune de urmat

Pagina oficială Vodafone Marea britanie - www.vodafone.co.uk/personal/

Pagina oficială a companiei Apple – www. apple.com

Page 17: Îmbunătățirea experienței utilizatorilor

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.

Page 18: Îmbunătățirea experienței utilizatorilor

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 ă.ț

Page 19: Îmbunătățirea experienței utilizatorilor

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ă.

Page 20: Îmbunătățirea experienței utilizatorilor

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.

Page 21: Îmbunătățirea experienței utilizatorilor

Pagina Moldcell după o analiză de Usability

Page 22: Îmbunătățirea experienței utilizatorilor

Nic.md - Moldova Internet gate în 2000

 

Page 23: Îmbunătățirea experienței utilizatorilor

Nic.md - Moldova Internet gate în 2011

 

Page 24: Îmbunătățirea experienței utilizatorilor

Name.com - registrator de domenii

 

Page 25: Îmbunătățirea experienței utilizatorilor

Pagina de logare în Internet Bank în .MD

 

Page 26: Îmbunătățirea experienței utilizatorilor

Online banking - Bank of America

 

Page 27: Îmbunătățirea experienței utilizatorilor

Online Banking in Moldova

 

Page 28: Îmbunătățirea experienței utilizatorilor

Online banking - Bank of America

 

Page 29: Îmbunătățirea experienței utilizatorilor

Serviciile fiscale în Moldova

 

Page 30: Îmbunătățirea experienței utilizatorilor

Servicii fiscale în străinătate

 

Page 31: Îmbunătățirea experienței utilizatorilor

L.MD – ideia.

Rezultatul studiului lui Jakob Nielsen referitor la găsirea problemelor de uzabilitate.

Sursa: useit.com

Page 32: Îmbunătățirea experienței utilizatorilor

L.MD - Prima pagină

Page 33: Îmbunătățirea experienței utilizatorilor

L.MD - Pachete

Page 34: Îmbunătățirea experienței utilizatorilor

L.MD - Adaugă un test

Page 35: Îmbunătățirea experienței utilizatorilor

L.MD - Contul meu

Page 36: Îmbunătățirea experienței utilizatorilor

L.MD - Rezultatele testului

Page 37: Îmbunătățirea experienței utilizatorilor

Vă mul umim!ț10x!

RT Design Studiowww.rt.md

;)