Usabilidad Web (tan de moda hoy en día)
-
Upload
adolfo-sanz-de-diego -
Category
Design
-
view
836 -
download
1
description
Transcript of Usabilidad Web (tan de moda hoy en día)
USABILIDADWEBADOLFOSANZDEDIEGO
AGOSTO2014
1ELAUTOR
1.1ADOLFOSANZDEDIEGOAntiguoprogramadorwebJEE(6años)Hoyendía:ProfesordeFP(6años):Hardware,SistemasOperativosRedes,Programación
FormadorFreelance(3años):Java,AndroidJavaScript,jQueryJSF,Spring,HibernateGroovy&Grails
1.2ALGUNOSPROYECTOSFundadory/ocreador:HackathonLovers:TweetsSentiment:MarkdownSlides:
Co-fundadory/oco-creador:PeliTweets:PasswordManagerGenerator:
http://hackathonlovers.comhttp://tweetssentiment.com
https://github.com/asanzdiego/markdownslides
http://pelitweets.com
http://pasmangen.github.io
1.3¿DONDEENCONTRARME?Minick:asanzdiegoAboutMe:GitHub:Twitter:Blog:LinkedIn:Google+:
http://about.me/asanzdiegohttp://github.com/asanzdiegohttp://twitter.com/asanzdiego
http://asanzdiego.blogspot.com.eshttp://www.linkedin.com/in/asanzdiego
http://plus.google.com/+AdolfoSanzDeDiego
2INTRODUCCIÓN
2.1¿QUÉ?Vamosaverqueeslausabilidaddeunsitiowebycomomejorarla.
2.2¿PORQUÉ?(I)Mejoraenlacalidaddelproducto:lossistemasquemejorseajustanalasnecesidadesdelusuariomejoranlaproductividadylacalidaddelasaccionesylasdecisiones.Reduccióndeloscostesdemantenimiento:lossistemasquesonfácilesdeusarrequierenmenosentrenamiento,menossoporteparaelusuarioymenosmantenimiento.
2.3¿PORQUÉ?(II)Reduccióndeloscostesdeproducción:loscostesytiemposdedesarrollototalespuedenserreducidosevitandoelsobrediseñoyreduciendoelnúmerodecambiosposterioresrequeridosenelproducto.Uncasoreal,despuésdeserrediseñadoprestándoseespecialatenciónalausabilidad,elsitiowebdeIBMincrementósusventasenun400%
2.4¿CÓMO?(I)Primerodefiniremosvariostérminosimportantes:usabilidad,accesibilidad,arquitecturadelainformación,experienciadeusuarioydiseñocentradoenelusuario.Luegointentaremosconoceralusuario,sabercomove,comopiensaycomoactúa.
2.5¿CÓMO?(II)Despuésveremoscomoevitandoqueelusuariocometaerrores,ysimplificandoeldiseño,podemosmejorarlausabilidad.Tambiénveremoslametodologíadeldiseñocentradoenelusuario,quesecomponedevariasfases:planificación,diseño,prototipado,evaluación,implementaciónylanzamiento,ymantenimientoyseguimiento.
2.6¿CÓMO?(III)Seguidamenteveremoslosprincipiosdeusabilidadylastécnicasdeevaluación:card-sorting,evaluaciónheurística,testdeusuarios,eye-tracking,feedback,analíticaweb,testsA/B.Paraterminarpropondremosvariosvariosejerciciospararealizarenclaseengruposde3-4.
3GLOSARIODETÉRMINOS
3.1USABILIDAD(I)Lausabilidadserefierealacapacidaddeunsoftwaredesercomprendido,aprendido,usadoyseratractivoparaelusuario,encondicionesespecíficasdeuso.(ISO/IEC9126)Lausabilidadserefierealgradodeeficacia,eficienciaysatisfacciónconlaqueunproductopermitealcanzarobjetivos,ausuarios,enuncontextodeusoespecífico.(ISO/IEC9241)
3.2USABILIDAD(II)Podemosobservarquelausabilidadsecomponededostiposdeatributos:Atributoscuantificablesdeformaobjetiva:comosonlaeficaciaonúmerodeerrorescometidosporelusuariodurantelarealizacióndeunatarea,yeficienciaotiempoempleadoporelusuarioparalaconsecucióndeunatarea.Atributoscuantificablesdeformasubjetiva:comoeslasatisfaccióndeuso,medibleatravésdelainterrogaciónalusuario.
3.3USABILIDAD(III)Losusuariosnobuscanusabilidad,buscanutilidad,entendidacomoelprovecho,beneficioeinterésqueproducesuuso.Unproductoseráusableenlamedidaenqueelbeneficioqueseobtengadeusarlojustifiqueelesfuerzonecesarioparasuuso.Pensemosporejemploenlosautomóviles:sonherramientasquerequierendeungranesfuerzodeaprendizajeyadaptaciónporpartedesususuarios,aunquenoporellosonpercibidoscomoartefactospocousables.
3.4USABILIDAD(IV)Lausabilidadnosóloesrelativaasususuarios,sinotambiénalosusos.Porejemplo,unmicroondaspuedeserusadoparaguardarzapatos,peronosepensóparaeso,porlotantopuederesultarnousableenesecontexto.Además,losobjetivosycontextosprevistosdeterminaránlaimportanciadesuusabilidad.Porejemplo,unteléfonomóvilpuedeserusadopararealizarunallamadadeemergencia,oparaescucharlasdiferentesmelodíasqueincorpora,unobjetivoesteúltimoparaelquelausabilidadpuedequenoseatanrelevantecomoparaelprimero.
3.5ACCESIBILIDADLaaccesibilidadserefierealacapacidaddelsistemaaparafacilitarelaccesoatodaslaspersonasenigualdaddecondiciones,independientementedelatecnologíaosoportequeutilicenydeladiscapacidadquepuedanpresentar.
3.6ARQUITECTURAINFORMACIÓN(I)Disciplinaquebuscaorganizarespaciosdeinformaciónconelfindeayudaralosusuariosasatisfacersusnecesidadesdeinformación.Laactividaddeorganizarcomportalaestructuración,clasificaciónyrotuladodeloscontenidos.LaAIeselelementoquesostieneestructuralmenteelcontenido,portanto,debedefinirseenlasprimerasetapas,yaquedeelladependeránotroselementosdeldiseño.
3.7ARQUITECTURAINFORMACIÓN(II)Elobjetivoprincipalesfacilitaralusuariolarecuperacióndeinformación.Larecuperacióndeinformaciónesunadelastareasdemayorimportanciaparalosusuarios.UnamalaAIdificultalabúsqueda,yalalargarealizarotrastareas(comocomprar).
3.8EXPERIENCIAUSUARIOCapacidaddeunainterfazdegenerarsensacionesyemociones,enelusuario,duranteelprocesodeinteracción.
3.9DISEÑOCENTRADOUSUARIOProcesodediseñoydesarrollo(delsitioweb)conducidoporelusuario,susnecesidades,característicaseintereses.
4CONOCERALUSUARIO
4.1¿CÓMOVE?(I)Decidimosquéqueremosatendervisualmente,peronuestraatenciónseveinterferidainvoluntariamenteydeformaautomáticapordeterminadascaracterísticasvisuales,aúncuandohaganpresenciaenzonasdevisiónperiférica.
4.2¿CÓMOVE?(II)Enlasinterfaceswebsucedeigual:losusuariosescanearánvisualmentelainterfazenbuscadepropiedadesgráficaspropiasdelosobjetosdeseados–enlaces,textos,imágenes,...–,yestaexploraciónpuedeversefacilitadasieldiseñadorenfatizaaquelloselementospotencialmentemásrelevantes,oporelcontrarioentorpecidacuandonadaparecevisualmentemásrelevantequeelresto.
4.3¿CÓMOVE?(III)Lacapacidadquetieneunelementovisualdeatraerlaatencióndelusuarioseencuentraendirectarelaciónconsusdiferenciasgráficasrespectoaloselementoscolindantes.
Nosvemosinvoluntariamenteatraídosporloinusual.Fuente:nosolousabilidad.com
4.4¿CÓMOVE?(IV)Unelementoconmayortamañoqueelresto,conuncolordistintoalosdemás,conunaorientacióndiferente,oenmovimiento,tendrámásprobabilidaddeatraernuestraatención.
4.5¿CÓMOVE?(V)Estoesalgoquecomprendieronlosdiseñadoresdebanners,perolosusuariosaprendieronaignorarautomáticamentetodoaquelloque,porsuspropiedadesgráficas(yubicación),parecierainformaciónpublicitaria(lofueraono).Lapublicidadcontextual,popularizadaporGoogle,intentaatraernuestraatenciónporelcaminocontrario:envezdepormediodesudiferenciacióngráfica,mediantesusimilitud,detalformaqueelusuariotengalaimpresióndequeporsuaspectopuedatratarsedecontenidodeinterés.
4.6¿CÓMOVE?(VI)Mejorareldiseñovisual:
Mejorareldiseñovisual.Fuente:nosolousabilidad.com
4.7¿CÓMOVE?(VII)Enfatizar:implicahacervisiblelorelevante,establecerunaclarajerarquíavisualentreelementosyzonasdelainterfaz,demodoquelaatencióndelusuarioseveaguiadadeformalógicaysecuencialdelomásrelevantehacialosecundario.
4.8¿CÓMOVE?(VIII)Organizar:significaestablecerrelacionesvisualeslógicas,quefacilitendeestemodoalusuariorelacionarodiferenciarelementosautomáticamente.Porejemplo,quelosenlacestengantodosunamismacaracterizacióngráfica(color,tipografía,efectos),facilitaalusuarioque,unavezdetectadounenlace,puedadiferenciarlosautomáticamente.
4.9¿CÓMOVE?(IX)Hacerreconocible:considerarconespecialcuidadoelusodeiconos,encabezados,enlaces...detalformaqueserequieradelusuarioelmenordelosesfuerzosparacomprenderypredecirelfuncionamientointeractivodelainterfaz.
4.10¿CÓMOPIENSA?(I)Cadavezqueaprendemosalgoextraemosnuestropropiomapamental.
Extraccióndenuestropropiomapamental.Fuente:nosolousabilidad.com
4.11¿CÓMOPIENSA?(II)¿Cómoclasificaríamosloscolores?
4.12¿CÓMOPIENSA?(III)¿Primarios,secundariosyterciarios?¿Ocálidosyfríos?
Clasificacióndeloscolores
4.13¿CÓMOPIENSA?(IV)¿Cúaldelas2clasificacionesesmejorparamiinterfaz?Dependerádenuestrosusuarios.Hayqueintentaradaptarnuestroscontenidosalosmapasmentalesdenuestrosusuarios.
4.14¿CÓMOPIENSA?(V)Unusuarioserácapazdeidentificarlafuncióndecadaelementosólosihaaprendidopreviamentesusignificado.Ademáselsignificadodependerádelcontexto.Unmismousuarioasociarásentidosdiferentesaunenlaceconelrótulo“Archivos”,enfuncióndesiseencuentravisitandounsitiowebdenoticias,unrepositoriodesoftwareolapáginawebdeunaasociacióndeBibliotecas,MuseosyArchivos.
4.15¿CÓMOPIENSA?(VI)¿Cualesdeestosformulariosdebúsquedanoutilizaríasparatuinterfazweb?
Formulariosdebúsqueda.Fuente:nosolousabilidad.com
4.16¿CÓMOPIENSA?(VII)¿Cualesdeestoscalendariosnoutilizaríasparatuinterfazweb?
Calendarios.Fuente:nosolousabilidad.com
4.17¿CÓMOACTÚA?(I)Mecanismointuitivo:secaracterizaporsermuyrápido,susceptibleaerroresyfundamentalmenteemocionalsedisparanreglasautomáticasoheurísticas–adquiridasenbaseanuestraexperiencia–quenosofrecenunasoluciónrápida,ynosposibilitanuncomportamientoeficiente.
4.18¿CÓMOACTÚA?(II)Mecanismoracional:esunprocesolineal,lógico,conscienteyquerequiereesfuerzoytiempoesmenospropensoaerrores,ademásdequepodemos–frenteaunerror–modificarelproceso,corrigiendoelresultado.
4.19¿CÓMOACTÚA?(III)Normalmenteempleamoselsistemaintuitivopuesnospermiteeconomizarnuestroesfuerzocognitivo,ysólousamossistemaracionalparalasdecisionesrealmenteimportantes.Estoexplicaporqué,porejemplo,anteunaventanadealertaenlaquesenospreguntaalgoysenosofrecendosposiblesrespuestas(síyno),esfrecuentequeautomáticamentehagamosclicsinleeroprocesarelcontenidodelapregunta.
4.20¿CÓMOACTÚA?(IV)Elusuarioexplorarálosítemsyelegiráelprimeroquecreasecorrespondeconelcontenidodeseado,aúncuandonotodoshayansidovalorados.
4.21¿CÓMOACTÚA?(V)Laordenaciónalfabéticaseríaunasoluciónuniversal,sinofueraporquenosiempresomoscapacesdeverbalizarnuestranecesidadinformativay,aúncuandolosomos,dicharepresentaciónsintácticanotieneporquécoincidirconeltérminoutilizadoenlainterfaz.
4.22¿CÓMOACTÚA?(VI)Lamejorsoluciónesreducirelnúmerodeítems,agrupandoaquellossemánticamentesimilaresbajorótulosdescriptivos,detalformaqueelusuarioprimeroexplorarálosrótulosdecadagrupo,ysólocuandoestimequeseencuentranrelacionadosconsunecesidad,explorarálosítemscontenidosenelgrupo.
4.23¿CÓMOACTÚA?(VII)Losusuariosseanidiotas,sinoquetienenmejoresasuntosenlosqueemplearsuesfuerzocognitivoqueencomprendernuestrodiseño.Notodoaloqueatendemosesprocesadoracionalmente,loquenosllevaacometererroresfrecuentemente.
5EVITARERRORES
5.1LIMITARPOSIBILIDADESSiemprehayquetenerencuentaquecuantasmenosopciones,menosposibilidadesdeerrortendráelusuario.
Limitarposibilidades.Fuente:nosolousabilidad.com
5.2ORIENTARALUSUARIOYaseamostrándolepaulatinamentelasdistintasopciones,omostrándolespequeñosmensajesinformativos.
Orientaralusuario.Fuente:nosolousabilidad.com
5.3SOLICITARCONFIRMACIÓNAntesderealizarunaacciónquenotienevueltaatrás,hayqueinformaralusuario.
Solicitarconfirmación.Fuente:gmail.com
5.4EVITARLAPÉRDIDADEINFORMACIÓNEncasodeerroryvueltaatrás,elusuarionodeberíavolveraintroducirlosdatos.
Evitarlapérdidadeinformación.Fuente:nosolousabilidad.com
5.5PERMITIRDESHACERSiemprequeseaposible,hayqueofreceralusuariolaposibilidaddevolveratrás.
Permitirdeshacer.Fuente:nosolousabilidad.com
5.6OFRECERSOLUCIÓNAUTOMÁTICAALOSERRORES
Nosiempreesposible,perosiesdeseablequeelpropiosistemaseacapazdeofrecersolucionesautomáticas.
Ofrecersoluciónautomáticaaloserrores.Fuente:nosolousabilidad.com
5.7MENSAJESDEERRORPARAHUMANOSSiapareceunmensajedeerrorestetienequeserentendibleporelusuario.
Mensajesdeerrorparahumanos.Fuente:duckduckgo.com
6SIMPLICIDAD
6.1REDUCCIÓNSiprescindimosdeunelemento,yelcambionoafectaalacomprensióndelusuario,entoncessupresencianoeranecesaria.
Reducción.Fuente:nosolousabilidad.com
6.2ESPACIOSVACÍOSCuandoseparamoselementosenpantallaconespaciosvacíos,ocuandoeliminamosinformaciónirrelevantedeciertaszonas,estamosguiandolaatencióndelusuariohaciaaquelloquepermaneceyesrelevante.Alcontarconmenoselementosvaloramosyconfiamosmásenaquelloqueesvisible,reforzandosupercepción.
6.3EQUILIBRIODECARACTERÍSTICASAlincrementarelnúmerodecaracterísticasseobservaunefectopositivosobrelascapacidadespercibidas,perounefectonegativosobrelausabilidadpercibida.
6.4GRÁFICODEROBTANENN
GráficodeRobTanenn.Fuente:nosolousabilidad.com
6.5ORGANIZAR,CLASIFICARYORDENAROrganizar,clasificaryordenarsontambiénformasdesimplificar.Porejemplo,Googlenosimplificalosresultadosdebúsquedaporclasificación,sinoporordenación.
7METODOLOGÍADCU
7.1FASES
Fasesdeldiseñocentradoenelusuario.Fuente:upf.edu
7.2PLANIFICACIÓNSebasaenlarecogida,análisisyordenacióndetodalainformaciónposible,conelobjetivodetenerunabasesólidasobrelaquepodertomardecisionesdediseñoenlassiguientesetapasdelproceso.
7.3DISEÑO(I)Diseñarorediseñar,enbasealconocimientoobtenidoenlaetapadeplanificación,yenlasetapasdeprototipadoyevaluación.
7.4DISEÑO(II)Divididoenvariassubfases:ModeladousuarioDiseñoconceptualDiseñodeinteracciónDiseñovisualDefinicióndeestiloDiseñocontenidos
7.5MODELADOUSUARIO(I)Definicióndearquetiposdeusuariosquerepresentanpatronesdeconducta,objetivosynecesidades.
7.6MODELADOUSUARIO(II)Estosarquetipos,llamados"personas",sondescripcionesdeusuarios,alosqueselesdaunaidentidadinventada:fotografía,nombre,...peroconlosatributos,característicasynecesidadesdelarquetipobasadoseninformaciónrealextraídadelaaudienciaobjetivadelsitioweb.Ademássedebendefinir"scenarios"sobrelosquepodercontextualizarlainteracciónpersona-aplicaciónweb.
7.7MODELADOUSUARIO(III)
Arquetipo'persona'.Fuente:upf.edu
7.8MODELADOUSUARIO(IV)Eldiseñadorsueleimaginarseasímismousandoelsitioyportantosueleserincapazdecomprenderporquéaalguienlepuederesultardifícil,incomodoyhastafrustrantesuuso.Estosarquetiposdeusuariosconseguiránqueeldiseñadortengaenmenteaunusuario'real',conlimitaciones,habilidadesynecesidadesreales.
7.9DISEÑOCONCEPTUALDefinicióndelesquemadeorganización,funcionamientoynavegacióndelsitio.Noseespecificaquéaparienciavaatenerelsitio,sinoquesecentraensuarquitecturadeinformación.
7.10DISEÑODEINTERACCIÓNDefinirelcomportamientointeractivodelsitioweb,esdecir,quéaccionesseofreceránalusuarioencadamomento,ycómoresponderálaaplicaciónalasaccionesquerealice.
Diagramadediseñodeinteracción.Fuente:sopadepixels.com
7.11DISEÑOVISUAL(I)Seespecifica:composicióndecadatipodepágina,aspectoycomportamientodeloselementosdeinteracciónypresentacióndeelementosmultimedia.
7.12DISEÑOVISUAL(II)“lobonito”espercibidoporelusuarioautomáticamentecomomásfácildeusar(aunquedesdeunpuntodevistaobjetivorealmentenoseatanfácildeusar).
Botones.Fuente:nosolousabilidad.com
7.13DISEÑOVISUAL(III)Ahorabien,ofrecerunaspectográficoaparentementetoscoypococuidadopuedeaportarvalorendeterminadoscontextos.Laestética,aligualquelausabilidad,esrelativaasususuariosycontextosdeuso.
7.14DEFINICIÓNDEESTILOEsimportantemantenerunacoherenciayestilocomúnentretodaslaspáginas.Esútilelaborarunaguíadeestiloquesirvadedocumentoreferenciaparatodoelequipodedesarrollo.
7.15DISEÑOCONTENIDOS(I)Seguirunaestructurapiramidal:Lapartemásimportantedelmensajedebeiralprincipio.Evitarserirrespetuoso:Intentarnodañarsensibilidadesculturales,sociales,políticas,religiosas,odecualquierotrotipo.
7.16DISEÑOCONTENIDOS(II)Permitirunafácilexploracióndelcontenido:EllectorenentornosWeb,antesdeempezaraleer,sueleexplorarvisualmenteelcontenidoparacomprobarsileinteresa.Usarlosnivelesdeencabezado(h1,h2,h3,etc.),ponerenrelieve(negritay/odistintocolor)laspartesfundamentales.
7.17DISEÑOCONTENIDOS(II)Unpárrafo,unaidea:Cadapárrafoesunobjetoinformativo.Sedebentrasmitirideas,mensajes...evitandopárrafosvacíosovariosmensajesenunmismopárrafo.Serconcisoypreciso:Allectornolegustaleerenpantalla.Hayqueintentareliminarlostextossuperfluos.Laspáginaswebnosonnovelas.
7.18DISEÑOCONTENIDOS(III)Usarelvocabulariodelusuario:Nosedebeutilizarelvocabulariodelaempresaoinstitución,sinoeldelusuario.Ademásdebesersencilloyfácilmentecomprensible.Tonofamiliarycercano:Asíellectorprestarámásatención.Nohayquecaerenlaordinariez.
7.19PROTOTIPADOAlgunasherramientas:http://moqups.comhttp://gomockingbird.comhttp://pencil.evolus.vnhttp://balsamiq.comhttp://www.mockflow.comhttp://wireframe.cchttp://www.axure.com
7.20EVALUACIÓNLausabilidadlapodemosmediantevariasvariables:facilidaddeaprendizaje(Learnability)eficienciafacilidaddeserrecordado(Memorability)eficaciasatisfacción
7.21APRENDIZAJEDificultadparallevaracabotareasbásicaslaprimeravezqueseenfrentanaldiseño.%tareascompletadasenelprimerintento%deusuariosquecompletanlastareasenelprimerintento%deusuariosquenecesitanayudaenelprimerintento
7.22EFECTIVIDADDificultadparallevaracabotareasconcretasunavezquelosusuarioshanaprendidoelfuncionamientobásico.%tareascompletadas%deusuariosquecompletanlastareas%deusuariosquenecesitanayuda
7.23RECONOCIMIENTODificultadparallevaracabotareasconcretasdespuésdeunperiodosinhacerlo.%tareascompletadaspasadounciertotiemposinusarlainterfaz%deusuariosquecompletanlastareaspasadounciertotiemposinusarlainterfaz%deusuariosquenecesitanayudapasadounciertotiemposinusarlainterfaz
7.24EFICIENCIAEsfuerzoqueunusuariotienequehacerparaconseguirunobjetivo.tiempoencompletarcadatareanúmerodeerrorescometidosniveldegravedaddeloserrorestiempoenrecuperarsedeloserroresclicksparacompletarlatareapáginasvisitasparacompletarlatareanúmerodevecesquesolicitaayuda
7.25SATISFACCIÓNVariablesquetienenquevermásconloemocionalosubjetivo.%deusuariosquelorecomendaríaaunamigonúmerodeadjetivospositivos(onegativos)quecadausuariodaalproducto%deusuariosquelocalificanmásfácildeusarqueeldelacompetencia%deusuariosqueexpresansatisfacción(oinsatisfacción)
7.26IMPLEMENTACIÓNYLANZAMIENTOParacontrolarlacalidaddelaimplementaciónsepuedenutilizarvalidadoresautomáticosdecódigo,asícomovalidadoresparatestardeformasemi-automáticaelcumplimientodedirectricesdeaccesibilidadenelcódigo.
7.27MANTENIMIENTOYSEGUIMIENTOUnsitiowebnoesunaentidadestática,suscontenidosysuaudienciacambian,yporlotantorequieredecontinuosrediseñosymejoras.Estosrediseñosdebensermuysutiles,puesaunqueestoscambiosesténfundamentadosenproblemasdeusabilidaddescubiertospost-lanzamiento,loscambiospuedenresultardramáticosparalosactualesusuariosqueyaestabanacostumbradosyfamiliarizadosconelactualdiseño.
8PRINCIPIOSUSABILIDAD
8.1VISIBILIDADESTADOElsistema(ositioweb)siempredebeinformaralusuarioacercadeloqueestásucediendo,comoporejemplo,cuandoenunainterfaztipowebmailseadjuntanficherosaunmensaje,elsistemadebeinformardelhechomostrandounmensajedeespera.
8.2ADECUACIÓNALMUNDOREALElsistemadebehablarellenguajedelusuario,huyendodetecnicismosincomprensiblesomensajescrípticos.
8.3LIBERTADYCONTROLElusuariodebetenerelcontroldelsistema,serélelquedecida.Sedebeofrecersiempreunaformade"salidadeemergencia",comoporejemplolaopciónpara"saltar"animacionesdeintroducción
8.4CONSISTENCIAYESTÁNDARESConsistenciaenelestilo(enlacesiguales,pestañasiguales,etc.)Seguirestándaresdediseñoampliamenteaceptados:usariconosconocidosyutilizadosiconodelaempresaconenlacealahomearribaalaizquierdamenúenlapartesuperioropcionesalaizquierdaoaladerechapiedepáginaconunresumendelmapadelaweb
8.5PREVENCIÓNDEERRORESMejorqueunbuenmensajedeerroresundiseñoqueprevengaqueocurraelerror.
8.6RECONOCIMIENTOANTESQUERECUERDOHacervisiblesobjetos,accionesyopcionesparaqueelusuarionotengaporquérecordarinformaciónentredistintasseccionesopartesdelsitioweboaplicación.Elusuarionotieneporquérecordardóndeseencontrabaciertainformación,ocómosellegabaadeterminadapágina.
8.7FLEXIBILIDADYEFICIENCIAElsitiodebeserfácildeusarparausuariosinexpertos.Perotambiénproporcionaratajosoaceleradoresparausuariosavanzados.
8.8DISEÑOESTÉTICOYMINIMALISTALaspáginasnodebencontenerinformaciónirrelevanteoinnecesaria.Cadainformaciónextracompiteconlainformaciónrelevanteydisminuyesuvisibilidad.
8.9MANEJODEERRORESLosmensajesdeerrordebenexpresarclaramentecuálhasidolacausadelproblema.Tambiéndebensugerirlasposiblesalternativasosoluciones,comoporejemplomensajesdeltipo"Ustedquisodecir...".Ademássedebeguardarelcontenidointroducidoporelusuarioparaquenotengaquevolverintroducirloypuedasubsanarelerror.
8.10AYUDAYDOCUMENTACIÓNAunqueesmejorqueunsitiowebsepuedautilizarsinnecesidaddeayudaodocumentación,ensitioswebextensosoenprocesosdeinteraccióncomplejossedebeproporcionarinformacióndeayudaalusuario.
9TÉCNICASDEEVALUACIÓN
9.1CARD-SORTING(I)Estatécnicaconsisteensolicitaraungrupodeparticipantesqueagrupenlosconceptosrepresentadosentarjetasporsusimilitudsemántica.
Card-sorting.Fuente:nosolousabilidad.com
9.2CARD-SORTING(II)Enelreclutamientodeparticipantesdebemosasegurarnosdeque:loselegidostienenperfilesacordesconlosusuariosrealesopotencialesdelsitioweb,muestraninterésporeltipodesitiowebaevaluary,aserposible,tienenexperienciausandositioswebdenaturalezasimilar.
9.3CARD-SORTING(III)Elquelosparticipantesesténmotivadosresultacrucialparaeléxitodelaprueba,porloqueserámuyimportanteofrecerlesalgúntipoderemuneraciónorecompensaporsucolaboraciónenlaprueba.
9.4CARD-SORTING(IV)Elcard-sortingabierto(sincategorias)tieneelobjetivodedescubrirquétipodecategorizaciónoagrupacióndelosconceptosresultarámásnaturalyacordeconelmodelomentalcompartidodelaaudienciadelsitioweb.Elcard-sortingcerrado(concategorias)esrecomendableparaevaluarsiunacategorizaciónresultapredecibleparaelusuario.
9.5CARD-SORTING(V)Dadoqueelabiertoayudaenlatomadedecisionesorganizativas,yelcerradoevalúaesasdecisiones,elabiertodebeprecederalcerrado.Ambostienenpropósitosdiferentesycomplementariosysuutilizacióncombinadapuedeofrecernosunaimagenmásfielelmodelomentaldelusuario.
9.6CARD-SORTING(VI)Existenaplicacionesqueautomatizanyfacilitanlarecogidadedatosysuanálisisestadístico,porloquesonrecomendablescuandoelpropósitoeselanálisiscuantitativo.Comodesventajapodemosseñalarquelosparticipantessuelenencontrarmásdivertidoelcard-sortingmanual,yportantosuelenestarmásconcentradosdurantelatarea.
9.7CARD-SORTING(VII)Los"conceptos"suelenrepresentarcategoríasuopcionesdenavegación,yportantoloquesepretendeesextraercuálseríalamejorformadeagruparlasoclasificarlas.Esunapruebadestinadaaadaptarlaarquitecturadeinformaciónalmodelomentaldelusuario,portantotienelugarenetapastempranasdelproyecto.
9.8EVALUACIÓNHEURÍSTICA(I)Métododeinspeccióndeunsitiowebquesebasaenelrecorridoyanálisisdelsitioidentificandoerroresyproblemasdediseño.Normalmentelallevaacaboungruporeducidodeevaluadoresque,enbaseasupropiaexperiencia,fundamentándoseenreconocidosprincipiosdeusabilidad,yapoyándoseenguíaselaboradasparatalfin,evalúandeformaindependienteelsitioweb,contrastandofinalmentelosresultadosconelrestodeevaluadores.
9.9EVALUACIÓNHEURÍSTICA(II)Elnúmeroidealdeevaluadoresdebeserentre3y5:conmenosde3muchosproblemasquedaránsindetectar,yconmásde5aumentaríaelcostesinofrecerresultadosquelosjustificasen.Cadaevaluadosexaminaráeldiseñodeformaindependiente,yunavezfinalicen,hacennunapuestaencomúndelosproblemas,yelaboraránuninformefinalconsensuado.
9.10EVALUACIÓNHEURÍSTICA(III)Cuantomásesperamosparasurealización,máscostosoresultarálareparacióndeloserrores,porloquenosólodebemosrealizarestetipodepruebasunavezimplementado,sinotambién,sobrelosprototipos.
9.11EVALUACIÓNHEURÍSTICA(IV)Tienecomoventajalafacilidadyrapidezconlaquesepuedellevaracabo.
9.12EVALUACIÓNHEURÍSTICA(V)Permiteidentificarmásproblemasdeusabilidadmenores,peromenosproblemasdeusabilidadmayores.Nopuedesustituiraltestdeusuarios,yaqueresultamenoseficazenladeteccióndeproblemasdeusabilidadquemayorimpactotendránenelusuariofinal.Puedereportarfalsasalarmas,esdecir,identificarcomounproblemadeusabilidadaquelloquerealmentenoloes.
9.13TESTDEUSUARIOS(I)Sebasaenlaobservaciónyanálisisdecómoungrupodeusuariosrealesutilizaelsitioweb,anotandolosproblemasdeusoconlosqueseencuentran.
9.14TESTDEUSUARIOS(II)Elnúmerodeparticipantesquesonnecesariosparadetectarlosproblemasmásimportantesdeusabilidaddeundiseñoseencuentraentornoa15.Esmejorllevaracabo3pruebas,con5participantesporcadauna,repartidasendiferentesmomentosdelprocesodedesarrollo.
9.15TESTDEUSUARIOS(III)Elreclutamientodeparticipantes,ysuremuneración,essimilaralatécnicadeCard-Sorting,anteriormentemencionada.
9.16TESTDEUSUARIOS(IV)Laprimeraimpresiónqueselleveelparticipantesuponeunainformacióndegranrelevanciaparaentenderlacapacidadcomunicativadeldiseño."Testde5segundos",conosinobjetivoconcreto:mostrándolelapáginadurante5segundosypreguntándoleposteriormentecuálhasidosuprimeraimpresión,quécontenidoscreequeofreceopuedeencontrarenesesitioweb.
9.17TESTDEUSUARIOS(V)Acontinuaciónsolicitaremosalparticipanteunaseriedetareasarealizar,analizandoloserroresquecometa,eltiempoempleadoysusatisfacción.Esdecir,medimostantolausabilidadobjetiva,comolausabilidadsubjetiva.
9.18TESTDEUSUARIOS(VI)Requisitosdelastareas:Serrazonables:Esdecir,tareastípicasqueunusuariorealllevaríaacabo.Serespecíficas:Latareanopuedesedemasiadogenérica,sinoquedebedescribirobjetivosconcretos.Serfactibles:Encomendaralusuariotareasirrealizablesnoaportainformaciónútilsobrelosproblemasreales.
9.19TESTDEUSUARIOS(VII)Requisitosdelastareas:Estardescritasentérminosdeobjetivosfinales:Latareadebecontextualizarsebajounobjetivoomotivaciónmayor.Duraciónrazonable:Silatarearequieredemasiadotiempo,seríarecomendabledescomponerlaensub-tareas.
9.20TESTDEUSUARIOS(VIII)Unaformavaliosadeobtenerinformaciónconsisteensolicitaralparticipantequeexpreseverbalmentedurantelapruebaquéestápensando,quénoentiende,porquéllevaacabounaacciónoduda.Esteprotocolotienetieneelinconvenientedequeelhechodecontarloqueunohaceyporquélohacealteralaformaenlaquesehacenlascosas.
9.21TESTDEUSUARIOS(IX)Unaalternativaconsisteenqueelparticipanteprimerorealizalatareay,unavezfinalizada,expresaverbalmentecómorecuerdaquehasidosuprocesointeractivo.
9.22TESTDEUSUARIOS(X)Cuantomásesperamosparasurealización,máscostosoresultarálareparacióndeloserrores,porloquenosólodebemosrealizarestetipodepruebasunavezimplementado,sinotambién,sobrelosprototipos.
9.23TESTDEUSUARIOS(XI)Esunapruebacomplementariaalaevaluaciónheurística,peroesmáscostosa,porloqueesrecomendablerealizarlasiempredespuésdeunaevaluaciónheurística.Susresultadossonmásfiables,yposibilitaneldescubrimientodeerroresdediseñoimposiblesodifícilesdedescubrirmediantelaevaluaciónheurística.
9.24EYE-TRACKING(I)Conjuntodetecnologías(hardwareysoftware)quepermitenmonitorizaryregistrarlaformaenlaqueunapersonamiraunadeterminadaescenaoimagen,enconcretoenquéáreasfijasuatención,durantecuántotiempoyquéordensigueensuexploraciónvisuales.
9.25EYE-TRACKING(II)
Eye-tracking.Fuente:nosolousabilidad.com
9.26EYE-TRACKING(III)Resultanmuysimilaresalostestconusuarios,siendodiferentelatecnologíausadapararegistrarelcomportamientodelusuario,ysiendodiferenteloquesepretendeanalizarconmayordetalle:laexploraciónvisualdelusuario.
9.27EYE-TRACKING(IV)Pequeñoscambiosenestosdiseños,puedenhacerquelospatronesdeexploraciónvaríen,porloqueesunatécnicarecomendablesólosobrediseñoselaborados.
9.28EYE-TRACKING(V)Siguesiendounatecnologíacara.Hayquetenerencuentaqueofrecendatoscualitativosescondidosbajolaaparienciadedatoscuantitativos:analizarunainterfazcon5participantesgeneraráunagrancantidaddedatos,perodesdeelpuntodevistaestadístico,siguesiendounamuestrade5sujetos.
9.29FEEDBACK(I)Lainformaciónmásvaliosasobrelausabilidaddeundiseñolaobtenemosobservandoelcomportamientodelosusuarios,nopreguntándoles.Estonoquieredecirqueelfeedbackdeusuarionoseaútil,sinotodolocontrario,puesnosayudaaconocerlasatisfacciónsubjetivadelusuario.
9.30FEEDBACK(II)Estainformaciónpuedeserobtenida:deformapasiva:atravésdelosmensajesenviadosporlosusuariosdeformaactiva:pormediodeentrevistas,cuestionariosyencuestas
9.31FEEDBACK(III)Lasopinionesexpresadasporlosusuariosindicanposiblesproblemasdeusabilidad,peronosonensímismaslarespuestaalosproblemas.SiunusuarioenvíaunemailpreguntandoporquédesdelahomenoencuentraunenlacealrecursoX,nosignificaquedebamosimplementaresteenlace,sinoqueposiblementeelrecursoXseapocovisibleodedifícillocalización.
9.32FEEDBACK(IV)Nosedebenhacerpreguntasdeltipo"¿Preferiríaqueeldiseñofueradetalforma?",sinodeltipo"¿HatenidoalgúnproblemaparalocalizarelrecursoX?"ó"¿LeharesultadofácilelusodelaherramientaX?".
9.33ANALÍTICAWEB(I)Esunatécnicaquesólopuedellevarseacabounavezqueelsitiowebhasidolanzadoyesusadodiariamente.Setratadeunatécnicafiableymuyeconómica,puesnohaysesgoninecesidaddeinvertirenlaidentificaciónyreclutamientodeparticipantes.Setratadeunainformaciónmuyvaliosaquepuedeservirnosparalatomadedecisionessobreelrediseñoensitioswebimplementados.
9.34ANALÍTICAWEB(II)Existenmuydiversasformasdeaprovecharlosdatosafindemejorarlausabilidad:identificarlosusuariosdenuestraweb(edad,sexo,estudios,etc.)analizardóndehacenclic,comprobarlashorasdemayorusodenuestraweb,analizarquepáginasdenuestrositesonlasmásvisitadas,comparardospáginasconlamismafunciónperodiferentediseño(TestA/B),
9.35ANALÍTICAWEB(III)Existenmuydiversasformasdeaprovecharlosdatosafindemejorarlausabilidad:analizarlasrutasdenavegaciónquesiguenlosusuarios,detectardondeseproducenmayornúmerodeerrores,analizarlasconsultasquehacenlosusuariosenelbuscadorinterno,conocerdedondelleganlosusuariosanuestrapágina,etc.
9.36TESTA/B(I)Consisteencomparardosversionesdeunamismapáginayvercuálfuncionamejor.Sedivideeltráficodelapágina,detalformaqueelunporcentajevealaversiónAyelotrolaversiónB.Laalternativaqueconsigaelobjetivobuscadoenmásusuariosgana.
9.37TESTA/B(II)
TestA/B.Fuente:elultimoblog.com
9.38TESTA/B(III)Cualquierelementodeunapáginaweb(versiónA)essusceptibledesercambiadoparagenerarunaalternativa(versiónB).Puedesprobartítulos,subtítulos,oentradillasalternativasparatuscontenidos,puedesjugarcondiferentesversionesdecolorytextodelbotóndecompra,puedesvariareltamañodelasofertas,delosprecios,delordendelmenú...
9.39TESTA/B(IV)Identificaunproblemaounpuntodemejora.“Muypocosusuariosdelosquevienenamiwebacabanvisitandolapáginadepreciosdemiservicio,dondetengoelbotóndecomprar”.Investigaquéhacenlosdemásycómolohacen.Miralaspáginasdeiniciodetucompetenciayaprendecómootrosincitan,desdesupáginadeinicio,avisitarlapáginadeprecios.
9.40TESTA/B(V)Planteaunaposiblesolución.“Sipongounbotónaquíhaciendohincapiéenquelasdosprimerassemanassongratis,creoqueconseguiréaumentarlasvisitasalapáginadeprecios.”Definelamétricaparadeterminareléxitodeltest.Dependiendodelobjetivo,podremoselegir:latasadeconversión,latasaderebote,númerodeclicks,inclusositestamosunapáginadeatenciónalclientepodemosponercomométricaelnúmerodellamadas,oelnúmerodemails.
9.41TESTA/B(VI)Crealaalternativaeiniciaelexperimento.CrealaversiónBconlasoluciónqueintuyesesmejor.Analizalosresultados.Pasadounciertotiempo,silasoluciónalternativa:esmejor,estableceesaalternativacomolaversiónpordefectoiguales,quédateconlaquemástegusteespeor,hasevitadointegrarentuwebuncambioqueteperjudicaría
9.42TESTA/B(VII)UnaherramientagratuitaymuypopularesGoogleWebsiteOptimizer:
Existenotrasalternativasmáscompletas,aunquedepago:
http://www.google.com/websiteoptimizer
http://www.ricardotayar.com/2012/01/15/herramientas-software-ab-testing-multivariante/
10EJERCICIOS
10.1NORMASGENERALESDividirlaclaseengruposde3-4Dividirlosgruposen2:izquierdayderechaCuandohayaquepuntuar:1punto:muymal2puntos:mal3puntos:bien4puntos:muybien
Unavezterminadoelejercicioseharánpúblicoslosresultadosysecomentaránenclase
10.2CARD-SORTINGABIERTOGrupoizquierda:usuariosHacenloquelesdiganlosdiseñadores
Grupoderecha:evaluadoresIdentificaritemsdeunatiendadeinformáticaPoneritemsenPost-ItPasarPost-ItausuariosyquehaganagrupaciónlibreDespuésderesultadosescogercategoríasprincipales
10.3CARD-SORTINGCERRADOGrupoizquierda:evaluadoresPasarcategoríasyPost-ItausuariosyquehaganagrupaciónporcategoríaDespuésderesultadoshacermapamentaldeitems
Grupoderecha:usuariosHacenloquelesdiganlosdiseñadores
10.4CHECKLISTDEUSABILIDADLos2gruposutilizaránlahojadecálculoproporcionadaen:
Grupoizquierda:evaluará
PonerlosdatosdevariosevaluadoresencomúnGrupoderecha:evaluará
Ponerlosdatosdevariosevaluadoresencomún
http://olgacarreras.blogspot.com.es/2011/07/sirius-nueva-sistema-para-la-evaluacion.html
http://www.pccomponentes.com
http://www.latiendadeinformaticaonline.com
10.5EVALUACIÓNHEURÍSTICAGrupoizquierda:maquetadoresHacerprototipodelatienda(laspantallasquehaganfalta)
Grupoderecha:evaluadoresConsensuarpuntosimportantesaevaluarUnavezterminadoslosprototipos,puntuarlosPonerlosdatosdevariosevaluadoresencomún
10.6TESTDEUSUARIOS(I)Grupoizquierda:evaluadoresConsensuarpuntosimportantesaevaluarDarordenesalosusuariosparahacereltestdelos5segundosDespuésdepreguntaralosusuarios,puntuarlosprototiposPonerlosdatosdevariosevaluadoresencomún
Grupoderecha:usuariosHacenloquelesdiganlosdiseñadores
10.7TESTDEUSUARIOS(II)Grupoizquierda:usuariosHacenloquelesdiganlosdiseñadores
Grupoderecha:evaluadoresConsensuarpuntosimportantesaevaluarDarordenesalosusuariosparatestearlosprototiposDespuésdeobservarcomousanlosusuarioslosprototipos,puntuarlosPonerlosdatosdevariosevaluadoresencomún
10.8TESTA/BElprofesorcogeráunprototipoyharáunapequeñamodificaciónElprofesorenseñarálos2prototiposalosalumnosLosalumnosvotaránamanoalzadacuallesparecemejor
11ACERCADE
11.1LICENCIAEstastransparenciasestánhechascon:MarkdownSlides:
EstastransparenciasestánbajounalicenciaCreativeCommonsReconocimiento-CompartirIgual3.0:
https://github.com/asanzdiego/markdownslides
http://creativecommons.org/licenses/by-sa/3.0/es
11.2FUENTESTransparencias:
Código:
https://github.com/asanzdiego/curso-interfaces-web-2014/tree/master/01-usabilidad/slides
https://github.com/asanzdiego/curso-interfaces-web-2014/tree/master/01-usabilidad/src
11.3BIBLIOGRAFÍA(I)DiseñoWebCentradoenelUsuario:UsabilidadyArquitecturadelaInformación
InformeAPIEsobreUsabilidad
UnasnotassobreUsabilidad
http://www.upf.edu/hipertextnet/numero-2/diseno_web.html
http://www.nosolousabilidad.com/manual/index.htm
http://www.slideshare.net/betabeers/usabilidad-18953630
11.4BIBLIOGRAFÍA(II)PruebasdeUsabilidad
MétodosdeUsabilidadyDiseñoCentradoenelUsuario
Prototipado
http://www.slideshare.net/pecesama/pruebas-de-usabilidad-10112899
http://www.slideshare.net/GUINALIU/mtodos-de-evaluacin-de-usabilidad
http://www.slideshare.net/olgacarreras/prototipado-14077585
11.5BIBLIOGRAFÍA(III)Usabilidadydiseñocentradoenlaexperienciadelusuario
¿AquéesperasparausarTestA/Bentuweb?¡Tucompetenciayalohace!
http://www.slideshare.net/laceves/usabilidad-y-diseo-centrado-en-la-experiencia-del-usuario
http://www.elultimoblog.com/test-ab/