• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Usabilitat Web
 

Píndola d' iMàrqueting impartida el 13 de febrer al centre Tecnològic i Universitari de Granollers

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

Statistics

Views

Total Views
719
Views on SlideShare
719
Embed Views
0

Actions

Likes
0
Downloads
8
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Usabilitat Web Usabilitat Web Presentation Transcript

    • Usabilitat Web1
    • 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
    • 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
    • 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
    • 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
    • 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 sobre el seuprojecte web. 8
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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? 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
    • • 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
    • • 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
    • 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
    • • 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
    • • 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
    • 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
    • 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
    • Alguns cassos realshttp://www.nerv.es/blog/10-pesadillas-de-la-usabilidad-que-deberias-evitarhttp://www.youtube.com/watch?v=7GFXk-5tEhg26
    • 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
    • Alguns exemples de pàgines amb bona usabilitat: • http://www.amazon.com • http://www.imaginarium.es • https://www.bankinter.com28
    • Lectura recomanada29