Usabilitat Web1
Perception Technologies S.L.• Disseny (web, imatge corporativa, ...)• Internet (dominis, allotjament, programació, ...)• C...
Que veurem avuiAvantatge d’un web usable.Com fer/plantejar un web.Fases en el procés de creació d’una web.Test d’usuaris i...
Usabilitat webLa usabilitat indica la facilitat amb que la gent pot usar una eina, peraconseguir un objectiu concret.Tradi...
La usabilitat ens permet  • Mes eficiència; amb menys temps es pot acabar una tasca concreta.  • Facilitat daprenentatge; ...
Com fer un webhttp://www.nuvoldigital.cat/com-es-fa-una-web/ 6
Procés de creació d’un web7
Estudi de necessitats: Reuniópersonal amb el client perconèixer en profunditat lesseves necessitats, desitjos iesperances ...
Prototips: Després de l’estudi denecessitats, es realitza un estudi defuncionalitats que es plasma en elsprototips. En un ...
Propostes gràfiques: En base a lesnecessitats i les funcionalitats, esdesenvolupa un disseny on haurand’estar contemplades...
Desenvolupament del codi: Un cop el dissenyestà definit, podem començar amb eldesenvolupament del codi, on la teoria anter...
Proves de càrrega i navegació:Un cop finalitzada la programació,és important validar que el webcompleix les expectatives i...
Llançament: Un cop acabades aquestes proves ja tenim el nostre webdisponible per al seu llançament a Internet.Seguiment i ...
Test d’usuaris i avaluació heurísticaTest d’usuaris: És una prova d’usabilitatque es basa en l’observació i anàlisis decom...
Quan fer un test d’usuarisQuan més tard, PITJOR, degut al cost que té arreglar els errors trobats. Ésmolt millor fer-ho en...
Criteris per a l’avaluació heurística • Generals     o Quins són els objectius del web? Són concrets i ben definits?     o...
o Es reconeix el disseny general del lloc web?     o El lloc web sactualitza periòdicament? Indica quan sactualitza?17
• Identitat i informació     o Es mostra clarament la identitat de la empresa-lloc a través de totes       les pàgines?   ...
• Llenguatge i redacció     o El lloc web parla el mateix llenguatge que els seus usuaris     o Sutilitza un llenguatge cl...
• Estructura i navegació     o Lestructura d’organització i navegació és la més adequada?     o En el cas destructura jerà...
o Sha evitat la redundància denllaços?     o Sha controlat que no hi hagi pàgines "orfes"? • Layout de la pàgina     o Sap...
• Cerca     o És fàcilment accessible?     o És reconeixible com a tal?     o Permet la cerca avançada?     o Mostra els r...
• Ajuda     o Si hi ha una secció dajuda, és necessària?     o Lenllaç a la secció dajuda està col·locat a una zona visibl...
o Les imatges inclouen atributs "alt" que descriuen el seu contingut?     o És compatible el lloc web amb diferents navega...
Perquè una bona usabilitat? • Les millores en rendiment mitjançant un disseny d’interfície usable, són 3   o 4 vegades sup...
Alguns cassos realshttp://www.nerv.es/blog/10-pesadillas-de-la-usabilidad-que-deberias-evitarhttp://www.youtube.com/watch?...
Bibliografia i enllaços d’interés:Usability - Jacob Nielsen • http://www.useit.com - Pàgina del gurú de la usabilitat Jaco...
Alguns exemples de pàgines amb bona usabilitat: • http://www.amazon.com • http://www.imaginarium.es • https://www.bankinte...
Lectura recomanada29
Upcoming SlideShare
Loading in …5
×

Usabilitat Web

703 views
589 views

Published on

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

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
703
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
12
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Usabilitat Web

  1. 1. Usabilitat Web1
  2. 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 web2
  3. 3. Que veurem avuiAvantatge 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. 4. Usabilitat webLa usabilitat indica la facilitat amb que la gent pot usar una eina, peraconseguir un objectiu concret.Tradicionalment lligada al disseny de panells de control o interfícies per partdels enginyers, sha popularitzat amb larribada de gran quantitat dedispositius 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 dutilitzar, poden requerir disciplines tant diversescom enginyeria, psicologia, disseny i comunicació visual, informàtica,etnografia, estudis de mercat, etc... By Wiki 4
  5. 5. La usabilitat ens permet • Mes eficiència; amb menys temps es pot acabar una tasca concreta. • Facilitat daprenentatge; el funcionament dun objecte es pot deduir observant-lo. • Més satisfacció de lusuari.Jakob Nielsen i Steve Krug, són dos dels experts destacats en usabilitat. By WikiExemples de mala usabilitat aplicats al món real:http://www.soypelopo82.blogspot.com/2008/11/sealizaciones-raras-que-podemos-ver-en.html 5
  6. 6. Com fer un webhttp://www.nuvoldigital.cat/com-es-fa-una-web/ 6
  7. 7. Procés de creació d’un web7
  8. 8. Estudi de necessitats: Reuniópersonal amb el client perconèixer en profunditat lesseves necessitats, desitjos iesperances sobre el seuprojecte web. 8
  9. 9. Prototips: Després de l’estudi denecessitats, es realitza un estudi defuncionalitats que es plasma en elsprototips. En un prototip podrem veurecom s’organitzen els elements i quinesfuncionalitats tindrà el web sense havercomençat la tasca de disseny. 9
  10. 10. Propostes gràfiques: En base a lesnecessitats i les funcionalitats, esdesenvolupa un disseny on haurand’estar contemplades totes les pantallesdel web (llibre d’estil).10
  11. 11. Desenvolupament del codi: Un cop el dissenyestà definit, podem començar amb eldesenvolupament del codi, on la teoria anteriorpassa a la pràctica a mà d’un o mésprogramadors que desenvoluparan totes lesfuncionalitats requerides.11
  12. 12. Proves de càrrega i navegació:Un cop finalitzada la programació,és important validar que el webcompleix les expectatives i queresolt totes les necessitats per lesquals ha estat dissenyada.Ens cal també realitzar provesamb usuaris per veure si elssistema suporta la navegació i noes carrega amb excés.12
  13. 13. Llançament: Un cop acabades aquestes proves ja tenim el nostre webdisponible per al seu llançament a Internet.Seguiment i actualització: Tan important sónels passos previs al desenvolupament del webcom el seguiment que li fem a aquest i lesseves posteriors actualitzacions.13
  14. 14. Test d’usuaris i avaluació heurísticaTest d’usuaris: És una prova d’usabilitatque es basa en l’observació i anàlisis decom un grup d’usuaris reals utilitza el llocweb, anotant els problemes d’ús amb elsque es troben per a poder solucionar-losposteriorment i és la manera méspropera d’aproximar-se a l’ús real del llocweb.Aquest tipus de test es complementa perfectament amb l’avaluacióheurística.14
  15. 15. Quan fer un test d’usuarisQuan més tard, PITJOR, degut al cost que té arreglar els errors trobats. Ésmolt millor fer-ho en la fase de desenvolupament de prototips.Sempre, després d’una avaluació heurística, ja que elimina els errorsmés bàsicsAvaluació heurística: Guia en forma de checklists per a la avaluació en base adimensions com: identitat, llenguatge, redacció, accessibilitat, layout,elements multimèdia,...15
  16. 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 URLs 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 Lestructura 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. 17. o Es reconeix el disseny general del lloc web? o El lloc web sactualitza periòdicament? Indica quan sactualitza?17
  18. 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 lempresa i quins serveis ofereix? o Hi ha algun enllaç sobre lempresa, lloc web, "webmaster",...? o Shan proporcionat mecanismes per a posar-se en contacte amb lempresa? o Es proporciona informació sobre la protecció de dades de caràcter personal dels clients o els drets de lautor dels continguts del web? o En els articles, notícies, informes...Es mostra clarament informació sobre lautor, fonts i dates de creació i revisió del document?18
  19. 19. • Llenguatge i redacció o El lloc web parla el mateix llenguatge que els seus usuaris o Sutilitza 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 dorganització, 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. 20. • Estructura i navegació o Lestructura d’organització i navegació és la més adequada? o En el cas destructura 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ó, sha controlat el nombre delements? o És pot predir al resposta del sistema abans de fer clic sobre lenllaç? o Sha 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. 21. o Sha evitat la redundància denllaços? o Sha controlat que no hi hagi pàgines "orfes"? • Layout de la pàgina o Saprofiten les zones dalta jerarquia informativa de la pàgina per a continguts de major rellevància? o Sha 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 lespai visual de la pàgina? o Sutilitza correctament la jerarquia visual per expressar les relacions del tipus "part de" entre elements de la pàgina? o Sha controlat la longitud de la pàgina?21
  22. 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 lusuari? o La caixa de text és suficientment ample? o Assisteix a lusuari en el cas de no tenir resultats a la cerca realitzada? • Elements multimèdia o Les fotografies estan ben retallades? Són comprensibles? Sha cuidat la seva resolució? o Lús de imatges o animacions proporciona alguna valor afegit? o Sha evitat lús danimacions cícliques?22
  23. 23. • Ajuda o Si hi ha una secció dajuda, és necessària? o Lenllaç a la secció dajuda està col·locat a una zona visible? o Sofereix ajuda contextual en tasques complexes? o Si té FAQs, és correcte tant lelecció com la redacció de les preguntes? i les respostes? • Accessibilitat o La mida de la font sha 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. 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 lusuari consultar tots els continguts sense la necessitat de descarregar i instal·lar plugins addicionals? o Sha 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. 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 dutilitzar, 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 dentendre, és com un comerç amb una bona il·luminació.25
  26. 26. Alguns cassos realshttp://www.nerv.es/blog/10-pesadillas-de-la-usabilidad-que-deberias-evitarhttp://www.youtube.com/watch?v=7GFXk-5tEhg26
  27. 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. 28. Alguns exemples de pàgines amb bona usabilitat: • http://www.amazon.com • http://www.imaginarium.es • https://www.bankinter.com28
  29. 29. Lectura recomanada29

×