Usabilitat i accesibilitat al projecte e-Catalunya

Presentación del tema: "Usabilitat i accesibilitat al projecte e-Catalunya"— Transcripción de la presentación:

1 Usabilitat i accesibilitat al projecte e-Catalunya
Dani Golobart B6-S202 LCFIB Jordi Girona 1-3, Mòdul B6 E Barcelona, Spain LCFIB- 2010

2 Qué és e-Catalunya? Estudi Usabilitat Els 8 principis bàsics
Índex Qué és e-Catalunya? Estudi Usabilitat Els 8 principis bàsics Estudi Accesibilitat

3 Qué és e-Catalunya? Estudi Usabilitat Els 8 principis bàsics
Índex Qué és e-Catalunya? Estudi Usabilitat Els 8 principis bàsics Estudi Accesibilitat

4 Qué és e-Catalunya?

5 Qué és e-Catalunya? Plataforma . . . Portal de Justícia
Portal de Sanitat . . . Grup de Jutges Grup d’Advocats Grup de Metges Grup d’Infermers La idea d’e-Catalunya és crear comunitats de treball. El usuaris formen part d’un o més portals, i dintre d’aquests portals, formen part d’un o més grups. Quan dic que un portal és una unitat estanca, em refereixo a que els usuaris no tenen constància de l’activitat que es realitzin en altres portals. Els usuaris tenen un rol dintre de cada portal. Dintre

6 Qué és e-Catalunya? Dintre de cada portal, l’usuari disposa d’un espai personal (com el nostre racó a la web de la fib) on pot realitzar diverses activitats. Generalment disposa d’un bloc (clic) el qual veurem desrpés, un perfil d’usuari on pot afegir les seves dades i modificar la seva visibilitat, així com un avançat sistema de contactes tipus “messenger”. Els usuaris poden intentar agregar altres persones. Aquesta persona a agregar pot acceptar o no ser un contacte del usuari, com el messenger. Quan una persona

7 Qué és e-Catalunya?

8 Qué és e-Catalunya? A més d’això, l’usuari al seu espai personal disposa d’altres funcionalitats, com l’enviament de novetats per mail, unes estadístiques personals sobre l’activitat de l’usuari, o un petit repositori de fitxers personals. Una de les parts innovadores del projecte és la referent als contactes de l’usuari. Com podeu veure (clic), l’usuari té una serie de contactes. El sistema de contactes funciona semblant al messenger, tu demanes a un altre usuari si vol ser contacte teu i si accepta passa a formar part de la teva “xarxa de contactes”. Tu pots tenir un contacte, i aquest contacte, alhora, pot tenir altres contactes. Això forma un teixit viu que anomenem la “XARXA SOCIAL”.

9 Qué és e-Catalunya? La Xarxa Social és l’aplicació pràctica de la teoria dels sis graus de separació. No sé si algú de vosaltres la coneix.. Bàsicament diu que qualsevol persona a la terra pot estar connectat amb qualsevol altre persona del planeta amb una cadena de no més de 4 intermediaris. A la plataforma implementem aquesta teoria però en petita escala. Imaginem que volgués coneixer a l’administrador d’e-Catalunya. Si veieu el gràfic, jo estaria situat aquí, i l’administrador d’e-Catalunya, aquí. Doncs bé, si algun dia el volgués coneixer, sé que el camí més curt per arribar seria ((clic) passant per la rosa, que coneix la marta, que coneix a l’administrador. Aquesta seria la xarxa que sorgeix de les relacions explicites. Però e-Catalunya compte amb un altre tipus de xarxa, la xarxa de coneixement. Aquesta sorgeix de l’activitat que realitzen els usuaris al portal. Si per exemple, dos usuaris visiten i escriuen normalment als mateixos documents, aquests dos usuaris estaran relacionats entre ells. Bla bla bla (amazon i demés). Per últim, i una mica propaganda, a la propera versió d’e-Catalunya que sortirà en breu comptarem amb un nou disseny de la xarxa social.

10 Qué és e-Catalunya? Com he comentat abans, la unitat bàsica de treball a e-Catalunya són els grups. Un portal el formen diversos grups, dintre dels quals els usuaris es reuneixen i treballen. Els grups d’un portal poden ser publics o privats. Un grup alhora pot definir internament la visibilitat de les seves eines, així que ens podriem trobar per exemple amb grups publics amb tota la informació accesible o d’altres que només tenen una part oberta al públic i altre no. A més d’aquesta clasificació entre grups publics i privats, hi ha altres clasificacions. Els grups poden pertanyer a categories (exemple sanitat i politraumatisme), i alhora, un grup pot tenir subgrups els quals poden alhora tenir més subgrups (exemple sanitat -> metges -> infermeres).

11 Qué és e-Catalunya? Bàsicament un grup es podria definir com una serie d’usuaris que disposen d’una serie de eines per treballar plegats. Aquesta és la página inicial d’un grup, el que podem veure diverses coses. Per una banda, les últimes aportacions que s’han fet en aquest portal

12 Qué és e-Catalunya?

13 Qué és e-Catalunya?

14 Qué és e-Catalunya?

15 Qué és e-Catalunya?

16 Qué és e-Catalunya?

17 Qué és e-Catalunya?

18 Qué és e-Catalunya?

19 Qué és e-Catalunya?

20 Obert al públic desde 2005 + 20.000 usuaris 60 portals 1.500 grups
Qué és e-Catalunya? Obert al públic desde 2005 usuaris 60 portals 1.500 grups eines

21 Qué és e-Catalunya? Estudi Usabilitat Els 8 principis bàsics
Índex Qué és e-Catalunya? Estudi Usabilitat Els 8 principis bàsics Estudi Accesibilitat

22 Els usuaris no s’aclaraven!
Estudi Usabilitat Plataforma molt gran Dirigida a usuaris inexperts Dissenyada per informàtics RESULTAT FINAL: Els usuaris no s’aclaraven!

23 Necessitàvem ajuda externa!
Estudi Usabilitat La plataforma feia “por” als usuaris La Generalitat va demanar que la plataforma fos més “fàcil” de fer servir. L’equip estava massa habituat a la plataforma com per veure defectes Necessitàvem ajuda externa!

24 Usabilitat... Què és? Estudi per millorar l’experiència de l’usuari
Estudi Usabilitat Usabilitat... Què és? Estudi per millorar l’experiència de l’usuari Cada cop cobra més importància (Màsters en usabilitat!) Molt important a l’àrea d’e-Commerce Totes (o gairebé totes) les pàgines tenen algun que altre problema d’usabilitat.

25 Avis textual sobre la limitació del text
Estudi Usabilitat Un exemple de mala usabilitat a paypal Avis textual sobre la limitació del text Limitar longitud màxima permesa a l’input Petit javascript per caràcters restants

26 Estudi Usabilitat Estudi Usabilitat Fases 2.-Preparació del 1.- Estudi
prototip 1.- Estudi Previ Estudi Usabilitat Fases 3.- Laboratori Usabilitat 4.- Aplicació resultats laboratori

27 Estudi Previ Estudi Usabilitat Estudi Usabilitat Fases
2.-Preparació del prototip 1.- Estudi Previ Estudi Previ Estudi Usabilitat Fases 3.- Laboratori Usabilitat 4.- Aplicació resultats laboratori

28 Estudi Usabilitat L’assessor va mirar els problemes més comuns i fàcils de solventar. Encara i els problemes, la navegació era força clara. Ens va donar unes primeres pautes. Estudi Previ

29 Estudi Usabilitat Es va preparar un prototipus per poder realitzar el laboratori. Petits canvis d’usabilitat resultat de l’estudi previ. Canvis ràpids Preparació Prototip

30 Laboratori Usabilitat
Estudi Usabilitat 10 entrevistes individuals a usuaris de la plataforma. Es demanen als usuaris que realitzin diferents tasques a la plataforma. Enregistrament audio/video del seu comportament Estudi i anàlisi d’aquests videos. Laboratori Usabilitat

31 Estudi Usabilitat Després del laboratori, l’assessor va preparar un estudi exhaustiu d’usabilitat. Proposa canvis de disseny, programació, navegació, etc.. Ens proporciona unes pautes d’usabilitat Aplicació resultats

32 Qué és e-Catalunya? Estudi Usabilitat Els 8 principis bàsics
Índex Qué és e-Catalunya? Estudi Usabilitat Els 8 principis bàsics Estudi Accesibilitat

33 LA USABILITAT ES BASA EN ELS DETALLS
Els 8 principis bàsics LA USABILITAT ES BASA EN ELS DETALLS

34 1- Coherència Visual Estructural Comportament Etiquetat
Els 8 principis bàsics 1- Coherència Visual Estructural Comportament Etiquetat Coherència. Ens referim tant a coherència visual, estructural, d’etiquetat i de comportament. És molt important intentar sempre que es pugui fer servir els mateixos texts per donar avisos, fer servir el mateix tipus de menús, que totes les accions es realitzin de la mateixa manera, etc.. etc.. De cara a un projecte com e-Catalunya, on s’integren eines molt diferents entre elles, és un dels punts més importants.

35 1- Coherència visual Els 8 principis bàsics
Coherència. Ens referim tant a coherència visual, estructural, d’etiquetat i de comportament. És molt important intentar sempre que es pugui fer servir els mateixos texts per donar avisos, fer servir el mateix tipus de menús, que totes les accions es realitzin de la mateixa manera, etc.. etc.. De cara a un projecte com e-Catalunya, on s’integren eines molt diferents entre elles, és un dels punts més importants.

36 1- Coherència estructural
Els 8 principis bàsics 1- Coherència estructural Coherència. Ens referim tant a coherència visual, estructural, d’etiquetat i de comportament. És molt important intentar sempre que es pugui fer servir els mateixos texts per donar avisos, fer servir el mateix tipus de menús, que totes les accions es realitzin de la mateixa manera, etc.. etc.. De cara a un projecte com e-Catalunya, on s’integren eines molt diferents entre elles, és un dels punts més importants. Mateixa opció a nivells diferents!

37 1- Coherència en el comportament
Els 8 principis bàsics 1- Coherència en el comportament Coherència. Ens referim tant a coherència visual, estructural, d’etiquetat i de comportament. És molt important intentar sempre que es pugui fer servir els mateixos texts per donar avisos, fer servir el mateix tipus de menús, que totes les accions es realitzin de la mateixa manera, etc.. etc.. De cara a un projecte com e-Catalunya, on s’integren eines molt diferents entre elles, és un dels punts més importants.

38 1- Coherència d’etiquetat
Els 8 principis bàsics 1- Coherència d’etiquetat Correu electrònic Mail Correu etc..! Coherència. Ens referim tant a coherència visual, estructural, d’etiquetat i de comportament. És molt important intentar sempre que es pugui fer servir els mateixos texts per donar avisos, fer servir el mateix tipus de menús, que totes les accions es realitzin de la mateixa manera, etc.. etc.. De cara a un projecte com e-Catalunya, on s’integren eines molt diferents entre elles, és un dels punts més importants.

39 2- Jerarquia de la informació
Els 8 principis bàsics 2- Jerarquia de la informació La funcionalitat més important ha de ser la més notable Els altres elements s’han de jerarquitzar amb recursos visuals 2-4 nivells de jerarquia són suficients -Jerarquitzar la informació. A totes les interaccions amb el sistema, la funcionalitat més important ha de ser la més “notable” (visible). La resta d’elements s’han de jerarquitzar de més a menys importància amb recursos visuals. Generalment amb 2-4 nivells de jerarquia un usuari en té prou.

40 2- Jerarquia de la informació
Els 8 principis bàsics 2- Jerarquia de la informació -Jerarquitzar la informació. A totes les interaccions amb el sistema, la funcionalitat més important ha de ser la més “notable” (visible). La resta d’elements s’han de jerarquitzar de més a menys importància amb recursos visuals. Generalment amb 2-4 nivells de jerarquia un usuari en té prou.

41 3- Transparència del sistema
Els 8 principis bàsics 3- Transparència del sistema L’usuari ha de saber que fa a cada pas. El sistema ha d’avisar del seu estat El sistema ha de confirmar (donar feedback) les accions realitzades. -Jerarquitzar la informació. A totes les interaccions amb el sistema, la funcionalitat més important ha de ser la més “notable” (visible). La resta d’elements s’han de jerarquitzar de més a menys importància amb recursos visuals. Generalment amb 2-4 nivells de jerarquia un usuari en té prou.

42 3- Transparència del sistema
Els 8 principis bàsics 3- Transparència del sistema Abans del test d’usabilitat no mostravem missatges d’error. Per exemple, en aquest cas, intentavem donar d’alta a un usuari. Com que no confirmavem, l’usuari “no s’ho creia” (de fert, una de les entrevistades va dir exactament això).

43 4- Reconèixer VS Recordar
Els 8 principis bàsics 4- Reconèixer VS Recordar No es pot confiar en la memòria de l’usuari. L’usuari ha de reconèixer els elements, no recordar-la. Fer servir standards generalitzats. -Jerarquitzar la informació. A totes les interaccions amb el sistema, la funcionalitat més important ha de ser la més “notable” (visible). La resta d’elements s’han de jerarquitzar de més a menys importància amb recursos visuals. Generalment amb 2-4 nivells de jerarquia un usuari en té prou.

44 4- Reconèixer VS Recordar
Els 8 principis bàsics 4- Reconèixer VS Recordar Abans del test d’usabilitat no mostravem missatges d’error. Per exemple, en aquest cas, intentavem donar d’alta a un usuari. Com que no confirmavem, l’usuari “no s’ho creia” (de fert, una de les entrevistades va dir exactament això).

45 Tots els usuaris s’equivoquen.
Els 8 principis bàsics 5- Prevenció d’errors Tots els usuaris s’equivoquen. Anticipar possibles errors a cada iteració Buscar formes d’impedir-ho -Jerarquitzar la informació. A totes les interaccions amb el sistema, la funcionalitat més important ha de ser la més “notable” (visible). La resta d’elements s’han de jerarquitzar de més a menys importància amb recursos visuals. Generalment amb 2-4 nivells de jerarquia un usuari en té prou.

46 5- Prevenció d’errors Els 8 principis bàsics
Abans del test d’usabilitat no mostravem missatges d’error. Per exemple, en aquest cas, intentavem donar d’alta a un usuari. Com que no confirmavem, l’usuari “no s’ho creia” (de fert, una de les entrevistades va dir exactament això).

47 6- Recuperació d’errors
Els 8 principis bàsics 6- Recuperació d’errors Facilitar la tornada enrere Intentar proposar una manera de solucionar l’error Tractar l’error des d’una perspectiva positiva

48 6- Recuperació d’errors
Els 8 principis bàsics 6- Recuperació d’errors Abans del test d’usabilitat no mostravem missatges d’error. Per exemple, en aquest cas, intentavem donar d’alta a un usuari. Com que no confirmavem, l’usuari “no s’ho creia” (de fert, una de les entrevistades va dir exactament això).

49 6- Recuperació d’errors
Els 8 principis bàsics 6- Recuperació d’errors Abans del test d’usabilitat no mostravem missatges d’error. Per exemple, en aquest cas, intentavem donar d’alta a un usuari. Com que no confirmavem, l’usuari “no s’ho creia” (de fert, una de les entrevistades va dir exactament això).

50 6- Recuperació d’errors
Els 8 principis bàsics 6- Recuperació d’errors Perspectiva d’error negativa :(

51 6- Recuperació d’errors
Els 8 principis bàsics 6- Recuperació d’errors Perspectiva d’error positiva :)

52 Els 8 principis bàsics 7- Ús del color El color pot guiar una interacció, però no ha de ser l’únic codi llegible. No podem controlar el color que veu l’usuari, ja sigui pel seu monitor o per problemes de visió.

53 Els 8 principis bàsics 7- Ús del color

54 No tots els usuaris són iguals.
Els 8 principis bàsics 8- Flexibilitat No tots els usuaris són iguals. L’usuari expert ha de trobar maneres de realitzar accions més avançades perquè treguin profit de la seva experiència.

55 Els 8 principis bàsics 8- Flexibilitat

56 Qué és e-Catalunya? Estudi Usabilitat Els 10 principis bàsics
Índex Qué és e-Catalunya? Estudi Usabilitat Els 10 principis bàsics Estudi Accesibilitat

57 Estudi Accessibilitat
Accessibilitat... Què és? Fer accessible la web per el major número possible d’usuaris. Dissenyar el web pensant en incapacitats físiques i tecnològiques. A vegades provoca conflictes amb temes d’usabilitat Si no es té en compte des d’un bon començament, és molt difícil implantar els standards.

58 Estudi Accessibilitat
L’W3C ha definit uns nivells que defineixen el grau d’accessibilitat d’una web. Nivell A Nivell AA Nivell AAA Les institucions públiques es preocupen cada cop més en complir les directrius definides per la WAI (Web Accessibility Initiative).

59 Estudi Accessibilitat – Exemple Pràctic

60 Estudi Accessibilitat – Exemple Pràctic

61 Estudi Accessibilitat – Exemple Pràctic

62 Algunes directrius bàsiques:
Estudi Accessibilitat Algunes directrius bàsiques: Correcte formació HTML. Correcte visualització de les pàgines sense necessitat de fulles d’estil. Mida i forma de les lletres modificable des de qualsevol navegador. Descripcions alternatives per totes les imatges i elements no textuals Ús de javascript/flash/etc.. no obligatori.

63 MOLTES GRÀCIES PER LA VOSTRA ATENCIÓ!
Dani Golobart B6-S202 LCFIB Jordi Girona 1-3, Mòdul B6 E Barcelona, Spain LCFIB- 2008