Usability
să învăţăm din greşelile altora
Alex Morega
De ce venim la wurbe?
De ce venim la wurbe?
- Pentru că facem site-uri
- Aflăm despre tool-uri şi tehnici noi
- Povestiri din tranşee
- Ne măsurăm în .vimrc-uri
Despre vizitatori!
Vizitatori
Vizitatori – ce vor?
Vizitatorii. Ce vor ei?
- Să găsească informaţie
- Să cumpere ceva
- Să configureze ceva
Să se minuneze de ce site mişto am făcut
Să se amuze încercând să-l înţeleagă
Vizitatori – despre
Să nu stăm în calea fericirii vizitatorului.
vizitator, nu user.
Probleme tipice (cover)
Îmi cer scuze autorilor site-urilor pe care le voi arăta.
(dar sunt supărat)
Probleme tipice – basics (cover)
Basics: poate fi accesat site-ul?
Probleme tipice – basics #1
Poate fi accesat site-ul?
- Dns greşit?
- Apache pornit?
- Pagini care dau eroare?
- Server supraîncărcat?
Există tool-uri de monitorizare.
Probleme tipice – basics #2
Poate fi accesat site-ul?
- Certificate ssl expirate / self-signed
- Merge pe browserele comune?
- Pagini "în construcţie"
Probleme tipice ‐ conţinut (cover)
Conţinut
Probleme tipice ‐ conţinut #1
Informaţie corectă
Screenshot orange #1
Screenshot orange #2
Probleme tipice ‐ conţinut #2
Să nu lipsească lucruri evidente:
- locaţia unui eveniment
- telefon pentru comenzi
- informaţie la zi
Screenshot tedxbucharest
Probleme tipice ‐ conţinut #3
Informaţie găsibilă:
- site organizat logic
- cât mai puţin zgomot
- aşezare în pagină
- măcar prin google search
Screenshot romtelecom #1
Screenshot romtelecom #2
Screenshot homebank
Screenshot programatica
Probleme tipice ‐ conţinut #4
Reinventatul roţii:
- elemente vizuale custom?
- vizitatorul le cunoaşte pe cele standard
- muncă şi buguri în plus
- dacă trebuie neapărat: jQuery UI, dojo, etc.
- HTML5 forms
(search, focus, placeholdere, date/time, slidere)
Screenshot ratb #1
Screenshot ratb #2
Screenshot ratb #3
Screenshot ratb #4
Screenshot ratb #5
Screenshot ratb #6
Probleme tipice ‐ user-friendly (cover)
User-friendly
(sau cum să le facem viaţa mai uşoară)
Probleme tipice ‐ user-friendly #1
Conturi? Parole?
- OpenID
- login Twitter/Google/Facebook/etc
- parolă opţională (Instapaper, jottit, djangogigs)
- token prin mail
Probleme tipice ‐ user-friendly #2
Don't make me think!
- vizitatorul nu vrea să înţeleagă gândirea ta încâlcită
- prea multe opţiuni strică
- nu-l lua prin surprindere
Screenshot orange-roaming #1
Screenshot orange-roaming #2
Probleme tipice ‐ browsere mobile
- Use case important
- Limitări
- ecran mic
- lipsesc mouse-ul şi tastatura
- Cum se face
- fără zgomot inutil (informaţie, imagini, interacţiune)
- download mic
- layout special - CSS media queries
Screenshot mobil #1
Emag: 1.82 MB
Screenshot mobil #2
Vodafone: 1.39 MB
Screenshot mobil #3
Orange: 1.28 MB
Probleme tipice ‐ reclame
Reclame
-
Nu incomoda vizitatorul
- Mai ales dacă vrea să-ţi dea bani
-
Poţi să-ţi vinzi încrederea (dar te costă)
Screenshot emag #1
Screenshot emag #2
Screenshot emag #3
Screenshot emag #4
Screenshot emag #5
Screenshot emag #6
Screenshot emag #7
Screenshot emag #8
Cum să facem
Cm să facem?
- Specificaţii
- UI design
- Verificare
- hallway usability testing