Curs usabilitat 17.5.13

CREIX AMB INTERNET

Usabilitat: Fer la web pensant en l’usuari

Índex 1.

Introducció

2.

Les 5 preguntes clau sobre la usabilitat

3.

Tests d’usuari “de guerrilla”

4.

Principis generals d’usabilitat

5.

Els usuaris, l’objectiu de la usabilitat

6.

Com usem la web

7.

Idees clau d’usabilitat

8.

Pràctica: Navegation Stress Test per a pantalles internes

9.

Com dissenyar una bona pantalla d’inici

10. Pràctica: Exemples d’usabilitat bons i dolents

Usabilitat: Fer la web pensant en l’usuari

Introducció

Uxline és una empresa que realitza tests d’usuaris online: https://www.uxline.com

Usabilitat: Fer la web pensant en l’usuari

La usabilitat és un atribut de qualitat i un element clau per a la supervivència en el mercat

Què passa si una aplicació interna o un lloc web són difícils d’usar?

Quines empreses coneixeu que facin servir la usabilitat com argumentari de venda?

Usabilitat: Fer la web pensant en l’usuari

Usabilitat: Fer la web pensant en l’usuari

Què és?

La usabilitat és la facilitat d’ús d’un producte La usabilidad estudia la manera de dissenyar productes perquè els usuaris puguin interactuar amb ells de la forma més fàcil, còmoda i intuïtiva possible, per tal de què aconsegueixin els seus objectius d'una manera ràpida i senzilla.

Usabilitat: Fer la web pensant en l’usuari

Qui l’avalua?

L’usuari decideix si un producte és usable El professional encarregat de dissenyar i avaluar la usabilitat d’un producte és l’expert en usabilitat; persones especialitzades en la interacció Persona – Ordinador.

Quan l’avaluació d’un producte la duu a terme un expert s’anomena avaluació heurística o experta: “Guía de Evaluación Heurística de sitios web”

http://www.nosolousabilidad.com/articulos/heuristica.htm

Estàndars formals d’usabilitat: ISO 9241 i ISO 13407 (orientació procesos) i ISO 9126 i ISO 14598 (producte).

Més informació: http://olgacarreras.blogspot.com.es/2012/03/estandares-formales-de-usabilidad-y-su.html

Usabilitat: Fer la web pensant en l’usuari

Com s’avalua?

Anàlisi heurístic, Tests d’usuari i eines automatitzades com els sistemes de seguiment visual (eye tracking: http://www.nosolousabilidad.com/articulos/eye-tracking.htm) o els logs del servidor que indiquen els recorreguts dels usuaris i el temps en cada pantalla (Analytics o Piwik.org).

Usabilitat: Fer la web pensant en l’usuari

El participant va trigar 90 segons en trobar un producte per a finançar la compra d’una casa.

Club familiar > Catàleg de productes per a particulars > Hipoteques L’usuari va veure Club Familiar al segon 10 d’entrar però no va clicar fins 80 segons més tard.

Per què?

Font: Usolab “La aportación del eyetracking en el sector de usabilidad”

Usabilitat: Fer la web pensant en l’usuari

Programari gratuït de seguiment del clic: ClickHeat http://www.labsmedia.com/clickheat/index.html Altres força econòmics: Crazy Egg o seeVolution.

I un predictor del comportament dels usuaris: AttentionWizard (http://attentionwizard.com/) Exemple: http://attentionwizard.com/Case-Studies/credo-mobile.html

http://blogs.tv3.cat/quequicom.php?itemid=30150 0’ i 7’

Usabilitat: Fer la web pensant en l’usuari

Quan s’avalua?

Quant abans millor •Quan més tard ens adonem d’un error de disseny en el producte més car serà corregir-lo.

•La usabilitat és un element transversal i ha d’estar present en totes les fases i en la ment de l’equip de treball.

•Els tests d’usari han de ser un procés iteratiu: fer petites proves continuament durant el procés de desenvolpament del producte.

•Abans de començar un nou disseny s’ha de testejar l’antic i el de la competència.

Usabilitat: Fer la web pensant en l’usuari

Per a què la usabilitat?

Per a tenir usuaris satisfets Els beneficis de la usabilitat són els següents: • Increment del temps de navegació en un lloc web (+ t. d’exposició al missatge) • Reducció dels costos d'aprenentatge, d’ajuda i assistència a l’usuari.

• Fidelització dels clients.

• Augment de la taxa de conversió -> vendes.

• Optimització dels costos de disseny, redisseny i manteniment.

• Millora la imatge de marca i el prestigi per la percepció positiva de l’usuari.

• Millora la qualitat de vida dels usuaris, ja que redueix el seu estrès, incrementa la satisfacció i la productivitat.

Exemple: Google Video vs Youtube i IBM

Usabilitat: Fer la web pensant en l’usuari

Test d’usuaris “de guerrilla” Preparació •

3 – 4 participants | Un ordinador en una habitació tranquil·la | No més d’un hora.

•

Material: llapis i paper. Algun programari de seguiment de les accions de l’usuari seria perfecte (CamStudio és codi obert ) i micròfon.

•

Elaborar un guió amb el que se li dirà al participant què se li demanarà que faci, com ho farà i quan de temps es necessita per a fer cada pas.

Usabilitat: Fer la web pensant en l’usuari

La proba 1.

Establir un ambient agradable. Explicar que s’avalua l’usabilitat del lloc web, mai el participant. Aconseguir més informació del participant (preferències, experiències i

coneixements). Aconseguir que el participant enraone en veu alta.

2.

Carreguem la web: primer s’ha d’esbrinar el grau de comprensió de la home (funció, objectius i opcions que ofereix el web)  l’usuari no ha de fer res i explicar què li sembla

el lloc, què li crida l’atenció, què és i per a què serveix, què clicaria primer.

3.

Ara analitzarem la facilitat d’ús del lloc mitjantçant la petició a l’usuari de la realització de tasques concretes: què faria per trobar la informació X. Serà útil apuntar el temps.

Tasques possibles en una botiga online?

Material per descarregar: www.sensible.com

Usabilitat: Fer la web pensant en l’usuari

Principis generals d’usabilitat 1.

El control de la situació ha d'estar en mans de l'usuari en tot moment.

2.

Navegació fàcil i ben estructurada per a permetre l’accès a la informació del lloc web.

3.

Disseny consistent de totes les parts del producte i els seus elements.

4.

El disseny d'un producte multimèdia ha de permetre esmenar els errors.

5.

Els missatges que el sistema oferix a l'usuari (feedback) han d’ésser ràpids i clars.

6.

L’entorn gràfic ha d'ajudar a la comprensió de la informació presentada.

7.

El disseny visual és comunicació, per tant ha de ser senzill i efectiu.

8.

Els textos han de ser breus, concisos i directes.

9.

Les pantalles d'un web s’han de descarregar ràpidament.

10. Contenir un bon servei de cerca, que ofereixi resultats ràpids i precisos.

11. Resolució apropiada perquè la majoria d’usuaris visualitzin correctament el lloc (responsive design) 12. Evitar els errors de programació i enllaços trencats o erronis.

13. Evitar tecnologies massa noves.

Usabilitat: Fer la web pensant en l’usuari

Els usuaris, l’objectiu de la usabilitat La usabilitat suposa una metodologia de treball = Disseny Centrat en l’Usuari.

Metodologia que implica els usuaris en totes les etapes de desenvolupament del producte.

Objectiu: assolir els objectius del producte i resoldre les necessitats dels usuaris.

El producte s’ha d’adaptar a l’usuari  UX (User Experience) Usabilitat + Utilitat

El primer que hem de saber és qui són els usuaris del producte o servei: • Hi ha un únic tipus d’usuari (usuari principal) o hi ha diferents tipus (usuaris secundaris)?

• Quines necessitats tenen? (Utilitat del producte) • Quins objectius buscarà aconseguir l’usuari en el nostre producte o servei?

• En quin context consumiran el producte/servei?

Usabilitat: Fer la web pensant en l’usuari

Com usem la web?

1.

Sempre tenim pressa i tolerància 0 a les esperes.

2.

No llegim, escanegem la pantalla en funció de les paraules que capten la nostra atenció. Les pantalles finals les mirem més però si tenen molt de text les imprimim.

3.

Normalment triem la primera opció que sembla raonable, és a dir, no triem la millor opció possible. Escollim el primer vincle que ens sembla interessant o se sembla al que estem cercant.

4.

No entenem ni intentem esbrinar la lògica de funcionament de les coses, simplement ens les apanyem per a fer funcionar o trobar allò que ens interessa.

Usabilitat: Fer la web pensant en l’usuari

Conseqüències pel disseny web: No em facis pensar!

Una pàgina web ha de ser obvia, evident, clara i fàcil d’entendre -> L’usuari ha de poder entendre per a què és i com s’utilitza sense haver de pensar en ella.

Hem d’evitar que l’usuari es plantegi preguntes per culpa de: • L’etiquetatge • Enllaços o botons que no són obvis • Eines que no són prou clares (cercadors amb filtres i camps dissenyats en funció de la classificació de l’empresa i no del model mental de l’usuari).

• Disposició poc clara dels elements en pantalla. Costa trobar una cosa determinada.

Usabilitat: Fer la web pensant en l’usuari

Idees clau d’usabilitat • Crear una jerarquia visual clara en cada pantalla per a transmetre el missatge amb claredat (diaris) perquè respon a un ordre de lectura.

• Respectar i aprofitar les convencions de facto (enllaços, elements actius, iconografia...)

• Divisió de la pantalla en zones clarament definides perquè permet a l’usuari centrar-se en aquelles que l’interessen i desestimar la resta. L’espai en blanc és clau (accionatura) • Que sigui molt evident el que es pot clicar.

• Brevetat + brevetat + brevetat

Regla del 7 x 3

• No posar més elements dels necessaris: no saturar d’informació (www.ge.com) • La home ha d’informar clarament sobre què ofereix el lloc web.

• Cercar sempre la interacció més natural, intuïtiva i senzilla possible.

• Eliminar presentacions i pantalles intermitges (integrar-les a la home) • Utilització d’estàndards (gran triomf de la web 2.0) • Programar amb AJAX. Altres evolucions tecnològuiques interessants: RSS, etiquetatge.

Usabilitat: Fer la web pensant en l’usuari

Navegació web: la seva importància 1.

Ens ajuda a trobar el que estem cercant ( Quin element?)

1. Cercador i menú principal.

2.

Ens presenta el contingut del lloc (?)

2. Menú

3.

Ens informa d’on estem (?)

3. Fil d’Ariadna i nom pantalla

4.

Ens ajuda a fer servir el lloc (?)

4. Utilitats (mapa web, contacte…)

5.

Genera confiança (?)

5. Logo

Usabilitat: Fer la web pensant en l’usuari

La navegació global és el conjunt d’elements que apareixen en totes les pantalles, i ha d’incloure:

Imprescindible també en qualsevol web: •Fil d’Ariadna •Títol de pàntalla

•Destacar l’opció on s’està

Usabilitat: Fer la web pensant en l’usuari

Pràctica: Navigation Stress Test (Keith Instone) 1. Seleccionar una pàgina interna d’un lloc que no coneixeu i imprimir-la en blanc i negre sense la URL. 2. Respondre a les següents preguntes encerclant sobre el paper les respostes:

• sobre què tracta aquesta pàgina?

• quin lloc és aquest?

• quines són les seccions principals del lloc?

• dintre de quina secció principal està aquesta pàgina?

• què hi ha un nivell més amunt?

• com vaig a la pàgina d'inici?

• com vaig a la pàgina d'inici de la secció?

• què representa cada grup de vincles?

• com arribes a aquesta pàgina des de la pàgina d'inici?

Usabilitat: Fer la web pensant en l’usuari

Com dissenyar una bona pantalla d’inici 1.

Explicar clarament el propòsit del lloc web: Qui som i Què fem mitjançant un tagline, un títol de finestra amb criteris SEO (el nom de la companyia seguit d’una breu descripció del lloc web) i l’agrupació de la informació corporativa clarament etiquetada (Sobre “nom empresa).

2.

Ajudar els usuaris a trobar el que necessiten: destacant les tasques més importants del lloc, incloure un cercador si el lloc web és mitjà o gran.

3.

Mostrar el contingut del lloc web: mostrar exemples de contingut real i començar el nom dels enllaços amb la paraula clau més important per a facilitar l’escaneig de la informació per part de l’usuari i oferir un llistat de les característiques més recents destacades a la home o un enllaç a l’arxiu permanent.

4.

Fer servir el disseny gràfic per a destacar el disseny de la interacció: no sobrecarregar gràficament àrees de contingut crític com les àrees de navegació, fer servir elements gràfics significatius i evitar les imatges d’arxiu.

Usabilitat: Fer la web pensant en l’usuari

Exemples d’usabilitat bons i dolents •

Webs de professionals: Silvia Altimir vs GdeJoies

•

Web corporatiu: Centre d’estètica vs Gestoria Izquierdo / Perruqueria Tomás i Optmedia

•

Portal d’informació: Ajuntament de Barcelona vs Generalitat de Catalunya

•

Botiga electrònica: Mercadona vs Eroski

•

Aplicació: Tumblr vs Issuu o Wix

Per a més informació sobre el tema disposeu d’un curs al Cibernàrium: Com realitzar proves d'usuari per usabilitat i accessibilitat web (sector Disseny)

Usabilitat: Fer la web pensant en l’usuari

Alejandra, Març 2013