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/