Píndola d' iMàrqueting impartida el 13 de febrer al centre Tecnològic i Universitari de Granollers Ponent: Jordi Moragas de Perception Tecnologies

1. Usabilitat Web
1

2. Perception Technologies S.L.
• Disseny (web, imatge corporativa, ...)
• Internet (dominis, allotjament, programació, ...)
• Consultoria (usabilitat, serveis legals, ...)
• Màrqueting a Internet
o Posicionament web
o Pagament per clic
o Newsletter (email màrqueting)
• Usabilitat web
2

3. Que veurem avui
Avantatge d’un web usable.
Com fer/plantejar un web.
Fases en el procés de creació d’una web.
Test d’usuaris i avaluació heurística.
Cassos reals.
3

4. Usabilitat web
La usabilitat indica la facilitat amb que la gent pot usar una eina, per
aconseguir un objectiu concret.
Tradicionalment lligada al disseny de panells de control o interfícies per part
dels enginyers, s'ha popularitzat amb l'arribada de gran quantitat de
dispositius electrònics (mòbils, caixers automàtics, ordinadors, automòbils,
...) i l'ús de la informàtica (sistemes operatius, programari, pàgines web... ).
Per a fer-los intuïtius i fàcils d'utilitzar, poden requerir disciplines tant diverses
com enginyeria, psicologia, disseny i comunicació visual, informàtica,
etnografia, estudis de mercat, etc...
By Wiki
4

5. La usabilitat ens permet
• Mes eficiència; amb menys temps es pot acabar una tasca concreta.
• Facilitat d'aprenentatge; el funcionament d'un objecte es pot deduir
observant-lo.
• Més satisfacció de l'usuari.
Jakob Nielsen i Steve Krug, són dos dels experts destacats en usabilitat.
By Wiki
Exemples de mala usabilitat aplicats al món real:
http://www.soypelopo82.blogspot.com/2008/11/sealizaciones-raras-que-
podemos-ver-en.html
5

6. Com fer un web
http://www.nuvoldigital.cat/com-es-fa-una-web/
6

7. Procés de creació d’un web
7

8. Estudi de necessitats: Reunió
personal amb el client per
conèixer en profunditat les
seves necessitats, desitjos i
esperances sobre el seu
projecte web.
8

9. Prototips: Després de l’estudi de
necessitats, es realitza un estudi de
funcionalitats que es plasma en els
prototips. En un prototip podrem veure
com s’organitzen els elements i quines
funcionalitats tindrà el web sense haver
començat la tasca de disseny.
9

10. Propostes gràfiques: En base a les
necessitats i les funcionalitats, es
desenvolupa un disseny on hauran
d’estar contemplades totes les pantalles
del web (llibre d’estil).
10

11. Desenvolupament del codi: Un cop el disseny
està definit, podem començar amb el
desenvolupament del codi, on la teoria anterior
passa a la pràctica a mà d’un o més
programadors que desenvoluparan totes les
funcionalitats requerides.
11

12. Proves de càrrega i navegació:
Un cop finalitzada la programació,
és important validar que el web
compleix les expectatives i que
resolt totes les necessitats per les
quals ha estat dissenyada.
Ens cal també realitzar proves
amb usuaris per veure si els
sistema suporta la navegació i no
es carrega amb excés.
12

13. Llançament: Un cop acabades aquestes proves ja tenim el nostre web
disponible per al seu llançament a Internet.
Seguiment i actualització: Tan important són
els passos previs al desenvolupament del web
com el seguiment que li fem a aquest i les
seves posteriors actualitzacions.
13

14. Test d’usuaris i avaluació heurística
Test d’usuaris: És una prova d’usabilitat
que es basa en l’observació i anàlisis de
com un grup d’usuaris reals utilitza el lloc
web, anotant els problemes d’ús amb els
que es troben per a poder solucionar-los
posteriorment i és la manera més
propera d’aproximar-se a l’ús real del lloc
web.
Aquest tipus de test es complementa perfectament amb l’avaluació
heurística.
14

15. Quan fer un test d’usuaris
Quan més tard, PITJOR, degut al cost que té arreglar els errors trobats. És
molt millor fer-ho en la fase de desenvolupament de prototips.
Sempre, després d’una avaluació heurística, ja que elimina els errors
més bàsics
Avaluació heurística: Guia en forma de checklists per a la avaluació en base a
dimensions com: identitat, llenguatge, redacció, accessibilitat, layout,
elements multimèdia,...
15

16. Criteris per a l’avaluació heurística
• Generals
o Quins són els objectius del web? Són concrets i ben definits?
o Els continguts i serveis que ofereix es corresponen amb els objectius?
o Té una URL correcta, clara i fàcil de recordar? I les URL's de les seves
pàgines internes? Són clares i permanents?
o Es mostra de forma precisa i complerta quins continguts o serveis
ofereix realment el lloc web?
o L'estructura en general del lloc web està orientada al usuari?
o El look & feel general es correspon amb els objectius, característiques,
continguts i serveis del lloc web?
o És coherent el disseny general del lloc web?
16

17. o Es reconeix el disseny general del lloc web?
o El lloc web s'actualitza periòdicament? Indica quan s'actualitza?
17

18. • Identitat i informació
o Es mostra clarament la identitat de la empresa-lloc a través de totes
les pàgines?
o El logotip, és significatiu, identificable i suficientment visible?
o El eslògan o tagline, expressa realment què és l'empresa i quins
serveis ofereix?
o Hi ha algun enllaç sobre l'empresa, lloc web, "webmaster",...?
o S'han proporcionat mecanismes per a posar-se en contacte amb
l'empresa?
o Es proporciona informació sobre la protecció de dades de caràcter
personal dels clients o els drets de l'autor dels continguts del web?
o En els articles, notícies, informes...Es mostra clarament informació
sobre l'autor, fonts i dates de creació i revisió del document?
18

19. • Llenguatge i redacció
o El lloc web parla el mateix llenguatge que els seus usuaris
o S'utilitza un llenguatge clar i concís?
o És amigable, familiar i proper?
o 1 paràgraf = 1 idea?
• Títols de les pàgines
o Els títols, són significatius?
o Utilitza títols standard HTML?
o Utilitza un únic sistema d'organització, ben definit i clar?
o Utilitza un sistema de títols controlat i precís?
o El títol de les pàgines és correcte, ha estat planificat?
19

20. • Estructura i navegació
o L'estructura d’organització i navegació és la més adequada?
o En el cas d'estructura jeràrquica, manté un equilibri entre profunditat
i amplada?
o Els enllaços són fàcilment reconeixibles com a tal? Estan definits els
diferents estats (visitats, actius,...)?
o En els menús de navegació, s'ha controlat el nombre d'elements?
o És pot predir al resposta del sistema abans de fer clic sobre l'enllaç?
o S'ha controlat que no hi hagi enllaços que no portin a cap lloc?
o Existeixen elements de navegació que orientin al usuari de on està i
com desfer la seva navegació?
o Les imatges enllaç, es reconeixen com a clicables? Inclouen un atribut
'title' descrivint la pàgina de destí?
20

21. o S'ha evitat la redundància d'enllaços?
o S'ha controlat que no hi hagi pàgines "orfes"?
• Layout de la pàgina
o S'aprofiten les zones d'alta jerarquia informativa de la pàgina per a
continguts de major rellevància?
o S'ha evitat la sobrecàrrega informativa?
o És una interfície neta, sense soroll visual?
o Existeixen zones en "blanc" entre els objectes informatius per a poder
descansar al vista?
o Es fa un ús correcte de l'espai visual de la pàgina?
o S'utilitza correctament la jerarquia visual per expressar les relacions
del tipus "part de" entre elements de la pàgina?
o S'ha controlat la longitud de la pàgina?
21

22. • Cerca
o És fàcilment accessible?
o És reconeixible com a tal?
o Permet la cerca avançada?
o Mostra els resultats de cerca de forma comprensible per l'usuari?
o La caixa de text és suficientment ample?
o Assisteix a l'usuari en el cas de no tenir resultats a la cerca realitzada?
• Elements multimèdia
o Les fotografies estan ben retallades? Són comprensibles? S'ha cuidat
la seva resolució?
o L'ús de imatges o animacions proporciona alguna valor afegit?
o S'ha evitat l'ús d'animacions cícliques?
22

23. • Ajuda
o Si hi ha una secció d'ajuda, és necessària?
o L'enllaç a la secció d'ajuda està col·locat a una zona visible?
o S'ofereix ajuda contextual en tasques complexes?
o Si té FAQs, és correcte tant l'elecció com la redacció de les preguntes?
i les respostes?
• Accessibilitat
o La mida de la font s'ha definit de forma relativa, o almenys, és lo
suficientment gran com per no dificultar la lectura del text
o El tipus de font, efectes tipogràfics, ample de línia i alineació emprats,
faciliten la lectura?
o Existeix un alt contrast entre el color de la font i el fons?
23

24. o Les imatges inclouen atributs "alt" que descriuen el seu contingut?
o És compatible el lloc web amb diferents navegadors? Es visualitza
correctament amb diferents resolucions de pantalla?
o Pot l'usuari consultar tots els continguts sense la necessitat de
descarregar i instal·lar plugins addicionals?
o S'ha controlat el pes de la pàgina?
o Es pot imprimir la pàgina sense problemes?
o Quan es produeix un error, s’informa de forma clara i no alarmista a
l’usuari del que ha passat i de com solucionar el problema?
24

25. Perquè una bona usabilitat?
• Les millores en rendiment mitjançant un disseny d’interfície usable, són 3
o 4 vegades superiors.
• El cost d’aconseguir un client/usuari nou, és 10 vegades superior que
fidelitzar-ne a un que ja tens i a internet la competència és molt gran de
manera que si frustrem als nostres usuaris, aquests no tardaran en dirigir-
se a un altre lloc.
• El cost de nous desenvolupaments i el seu manteniments és inferior.
• Si alguna cosa és complicada d'utilitzar, simplement no es fa servir.
• No hi ha una única manera de dissenyar un lloc web, depèn de moltes
coses però si que el podem fer usable per als usuaris.
• Un web fàcil d'entendre, és com un comerç amb una bona il·luminació.
25

26. Alguns cassos reals
http://www.nerv.es/blog/10-pesadillas-de-la-usabilidad-que-
deberias-evitar
http://www.youtube.com/watch?v=7GFXk-5tEhg
26

27. Bibliografia i enllaços d’interés:
Usability - Jacob Nielsen
• http://www.useit.com - Pàgina del gurú de la usabilitat Jacob
Nielsen.
• http://www.webword.com - Informació sobre usabilitat.
• http://www.usability.gov
• http://www.zdnet.com - Notícies sobre usabilitat.
• http://www.usableweb.com - Informació sobre usabilitat.
27

28. Alguns exemples de pàgines amb bona usabilitat:
• http://www.amazon.com
• http://www.imaginarium.es
• https://www.bankinter.com
28

29. Lectura recomanada
29