Transcript Descarcă prezentarea
Slide 1
Îmbunătăţirea experienţei
utilizatorului
Analiza moldwebului și a tendințelor
internaționale
Gheorghe Lupașcu
RT Design Studio
Slide 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".
Slide 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
Slide 4
Componentele cheie ale UX:
• Uzabilitatea
• Interfața cu utilizatorul(UI) și designul
• Interacțiunea offline cu produsul sau serviciul
Slide 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
Slide 6
Designul NU este artă
• Arta nu are o audiență specifică
• Arta nu are un scop
• Implică două componente: artistul și audiența
Slide 7
Designul
Implică trei componente: compania, designerul și audiența
Slide 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
Slide 9
Erik Reiss: Cele 10 dogme a uzabilității
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
Tot ce există doar pentru a satisface preferințele personale ale proprietarului paginii web, trebuie eliminat.
Tot ce există doar pentru a satisface ego-ul designerului trebuie eliminat.
Tot ce este nerelevant conținutului paginii trebuie eliminat.
Orice funcționalitate sau tehnică care scade abilitatea vizitatorului de a naviga liber trebuie refăcut sau
eliminata.
Orice obiect interactiv care il face pe vizitator să ghicească ce funcționalitate are, trebuie refăcut sau
eliminat.
Browserul trebuie să fie singurul program care să asigure funcționarea corectă a paginii web, fără alt
software adițional.
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.
Uzabilitatea nu trebuie să fie vreodată sacrificată în schimbul ghidului de stil.
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.
Încalcă oricare din aceste reguli, înainte de a ajunge să faci lucruri pur și simplu barbare cu pagina ta web.
Eric Reiss
Slide 10
Studiu de caz - Moldcell
Slide 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.
Slide 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.
Slide 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.
Slide 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
Slide 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ă.
Slide 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
Slide 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.
Slide 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ță.
Slide 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ă.
Slide 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.
Slide 21
Pagina Moldcell după o analiză de Usability
Slide 22
Nic.md - Moldova Internet gate în 2000
Slide 23
Nic.md - Moldova Internet gate în 2011
Slide 24
Name.com - registrator de domenii
Slide 25
Pagina de logare în Internet Bank în .MD
Slide 26
Online banking - Bank of America
Slide 27
Online Banking in Moldova
Slide 28
Online banking - Bank of America
Slide 29
Serviciile fiscale în Moldova
Slide 30
Servicii fiscale în străinătate
Slide 31
L.MD – ideia.
Rezultatul studiului lui Jakob Nielsen referitor la găsirea
problemelor de uzabilitate.
Sursa: useit.com
Slide 32
L.MD - Prima pagină
Slide 33
L.MD - Pachete
Slide 34
L.MD - Adaugă un test
Slide 35
L.MD - Contul meu
Slide 36
L.MD - Rezultatele testului
Slide 37
10x!
Vă mulțumim!
RT Design Studio
www.rt.md
Îmbunătăţirea experienţei
utilizatorului
Analiza moldwebului și a tendințelor
internaționale
Gheorghe Lupașcu
RT Design Studio
Slide 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".
Slide 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
Slide 4
Componentele cheie ale UX:
• Uzabilitatea
• Interfața cu utilizatorul(UI) și designul
• Interacțiunea offline cu produsul sau serviciul
Slide 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
Slide 6
Designul NU este artă
• Arta nu are o audiență specifică
• Arta nu are un scop
• Implică două componente: artistul și audiența
Slide 7
Designul
Implică trei componente: compania, designerul și audiența
Slide 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
Slide 9
Erik Reiss: Cele 10 dogme a uzabilității
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
Tot ce există doar pentru a satisface preferințele personale ale proprietarului paginii web, trebuie eliminat.
Tot ce există doar pentru a satisface ego-ul designerului trebuie eliminat.
Tot ce este nerelevant conținutului paginii trebuie eliminat.
Orice funcționalitate sau tehnică care scade abilitatea vizitatorului de a naviga liber trebuie refăcut sau
eliminata.
Orice obiect interactiv care il face pe vizitator să ghicească ce funcționalitate are, trebuie refăcut sau
eliminat.
Browserul trebuie să fie singurul program care să asigure funcționarea corectă a paginii web, fără alt
software adițional.
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.
Uzabilitatea nu trebuie să fie vreodată sacrificată în schimbul ghidului de stil.
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.
Încalcă oricare din aceste reguli, înainte de a ajunge să faci lucruri pur și simplu barbare cu pagina ta web.
Eric Reiss
Slide 10
Studiu de caz - Moldcell
Slide 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.
Slide 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.
Slide 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.
Slide 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
Slide 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ă.
Slide 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
Slide 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.
Slide 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ță.
Slide 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ă.
Slide 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.
Slide 21
Pagina Moldcell după o analiză de Usability
Slide 22
Nic.md - Moldova Internet gate în 2000
Slide 23
Nic.md - Moldova Internet gate în 2011
Slide 24
Name.com - registrator de domenii
Slide 25
Pagina de logare în Internet Bank în .MD
Slide 26
Online banking - Bank of America
Slide 27
Online Banking in Moldova
Slide 28
Online banking - Bank of America
Slide 29
Serviciile fiscale în Moldova
Slide 30
Servicii fiscale în străinătate
Slide 31
L.MD – ideia.
Rezultatul studiului lui Jakob Nielsen referitor la găsirea
problemelor de uzabilitate.
Sursa: useit.com
Slide 32
L.MD - Prima pagină
Slide 33
L.MD - Pachete
Slide 34
L.MD - Adaugă un test
Slide 35
L.MD - Contul meu
Slide 36
L.MD - Rezultatele testului
Slide 37
10x!
Vă mulțumim!
RT Design Studio
www.rt.md