1

Usabilitat Web

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

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.

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

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

6

Com fer un web

http://www.nuvoldigital.cat/com-es-fa-una-web/

7

Procés de creació d’un web

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.

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.

Després de l’estudi de

necessitats, es realitza un estudi de

funcionalitats que es plasma en els

prototips. En un prototip podrem veure

elements i quines

funcionalitats tindrà el web sense haver

començat la tasca de disseny.

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

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.

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.

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.

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.

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

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?

17

o Es reconeix el disseny general del lloc web?

o El lloc web s'actualitza periòdicament? Indica quan s'actualitza?

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?

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?

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í?

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?

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?

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?

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?

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

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

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.

28

Alguns exemples de pàgines amb bona usabilitat:

• http://www.amazon.com

• http://www.imaginarium.es

• https://www.bankinter.com

29

Lectura recomanada