Ux formato tec bbva v 3.1

Taller UX BBVAMoiss Cielak & Mauricio Angulo

Un enfoque mas humano para un asunto de seres humanos

1

Objetivos especficos: Que los participantes: Comprendan los conceptos y diferencias en UX (experiencia de usuario) y Usabilidad. Incorporen te cnicas para medir y analizar el uso de una interfaz, lleva ndolas a la pra ctica con ejemplos y ejercicios. Se introduzcan en el conocimiento de las te cnicas de investigacio n de usuarios. Comprendan el concepto de arquitectura de informacio n. Se vera n ejemplos concretos (patrones de disen o) para comprender co mo disen ar la arquitectura de informacio n de un sitio. Se introduzcan en el disen o de Interaccio n, conociendo los principios y patrones de disen o

(formularios, call to actions, entre otros). Incorporen herramientas para utilizar a la hora de disen ar la experiencia de usuario.

2

Modulo I Introduccion a UX. (24 horas) Temario: UX Definicion Diferencia entre UX y Usabilidad Por que implementar UX

en nuestra empresa? UX en el circuito de software Como calcular el ROI? Investigacion de usuarios Needfinding Personas Usabilidad Que es la usabilidad? Que son las heuristicas de usabilidad? Ejemplos de errores de usabilidad Metricas de usabilidad Como medir la usabilidad? Como realizar pruebas con usuarios?

3

Mo dulo II Introduccio n a Disen o de Interfaces (24 horas) Temario: Arquitectura de la Informacio n Que es la AI? Navegacio n Breadcrumb Buscadores Ejemplos de buscadores Tipos de bu squeda Que debe tener un buscador? D I Conceptos Generales Flujos visuales y call to action Principios de disen o de interaccio n D II Diferencia entre Mockups, Wireframes y Prototipos Patrones de IxD Formularios Login Validaciones Ayudas Home Que debe tener una home? Herramientas Balsamiq Axure

4

Mdulo IIntroduccin a UX

UX Definicio n Diferencia entre UX y Usabilidad Por que implementar UX en nuestra empresa? UX en el circuito de software Co mo calcular el ROI?

Investigacio n de usuarios Needfinding Personas Usabilidad Que es la usabilidad? Que son las heuri sticas de

usabilidad? Ejemplos de errores de usabilidad Me tricas de usabilidad Co mo medir la usabilidad? Co mo realizar

pruebas con usuarios?

Qu hace Un Diseador UX todo el da?

https://www.youtube.com/watch?v=Ovj4hFxko7c

9/3/16

6 usabilidad - UX - accesibilidad Jordi Snchez - @jordisan - http://jordisan.net

https://www.youtube.com/watch?v=Ovj4hFxko7c

Usabilidad, palabra de moda

9/3/167 usabilidad - UX - accesibilidad Jordi Snchez - @jordisan - http://jordisan.net

Da Mundial de la Usabilidad

World Usability Day http://www.worldusabilityday.org


https://www.youtube.com/watch?v=Jo91eehaafc

Diseo de experiencia de usuario

Teora, Historia y Mtodo

Disear antes de Construir

Ahorra tiempo, recursos ynos aleja de errores

SOFTWARE

proceso de creacin

Experiencia de Usuario

Diseo de Experiencia de Usuario

User Experience (UX)

User Experience Design (UXD)

Experiencia de UsuarioLa percepcin y respuesta de una persona como resultado de las expectativas ante o el uso de un producto, sistema o servicio Emociones de usuarios, sus creencias, preferencias, percepciones, respuestas fsicas y psquicas, comportamientos y logros obtenidos antes, durante y al finalizar el uso.

* Donald Norman, Jim Miller, Austin Henderson: What You See, Some of What's in the Future, And How We Go About Doing It: HI at Apple Computer. Proceedings of CHI 1995, Denver, Colorado, USA

Experiencia de UsuarioEl trmino fue dado a conocer porDonald Norman alrededor de 1995 porun artculo titulado:

Norman es uno de los pioneros del HCI en los aos 80 y autor del famoso libro El diseo de las cosas cotidianas The Design of Everyday Things, Basic Books (September 17, 2002)

User Experience Architect, in the mid-1990s*

TheDesignofEverydayThingsDrupalConMunich2012

DonaldA.NormanCo-founder & principal of the NielsenNorman group

Tuesday 21 August 12

Technology Changes Rapidly. People Change Slowly

Image: KertasticPlanetMinecrafthttp://www.planetminecraft.com/blog/theories-by-kerr-volume-4/

Presentatienaam2012


Norman Door #normandoorhttp://www.jnd.org/dn.mss/when_bugs_become_fea.html


Small visual cues often improve usabilityTuesday 21 August 12

Yellow note athinge

Embossedledge toopen door

Inset ledgewith hinge

Doors of refrigerated cells at supermarktTuesday 21 August 12

Yellow notenear handle

Handle toopen door

Doors of freezer cells at supermarktTuesday 21 August 12

I never design a building before Ive seen the siteand met the people who will be using it.Frank LloydWright



Remote Controlfor Siemenscartridge type(ceiling)A/C Unit


Locked entry by keycard lockTuesday 21 August 12

CitizenM HotelSchipholAmsterdam


Flight Safety Instructions GaloreOpen Here,The Art of Instructional Design


Roundabout where cars yield


Roundabout where cyclists yield


Google Premium NavigationEULA popup after 30 day trial use


EULAs....



Toerris human


A common mistake that people make when trying todesign something completely foolproof is tounderestimate the ingenuity of complete fools.Douglas Adams


Use metaphors*AND* words



There is nointuitiveinterface, noteven thenipple.It's all learned.

Bruce Edigerhttp://bit.ly/xPHagz


How we reallyuse the webDont Make MeThink bySteveKrug


Presentatienaam2012

Poorusabilityresultsin Anger and frustration

Decreased productivity in the workplace

Higher error rates

Physical and emotional injury

Equipment damage

Loss of customer loyalty

Costs moneyTuesday 21 August 12


GuidelinesforMakingThingsUsable


Know the user and manage his expectations


Progress indicator forOSX Finder Search

Provide Feedback


Provide Constraints


Use affordances when possible

http://www.jnd.org/dn.mss/affordances_and.htmlTheDesignofEverydayThings


Presentatienaam2012

What are my options atthis level? (secondarynavigation)

Where am I in thescheme of things? (Youare hereindicator)

How can I search?

The Trunk Test What website is this?

(site ID)

What page am I on?

What are the majorsections of thiswebsite? (primarynavigation)



ccThis

JonathanIveSeniorVicePresident IndustrialDesign Apple Inc.

FotoEyevineTuesday 21 August 12

Presentatienaam2012

It's the ' nishing the back of the drawer.You can arguethat people will never see it and it's very hard to describewhy it's important but it just seems important.

It's a way that you demonstrate that you care for thepeople that you are making these products for. I think wesee ourselves as having a civic responsibility to do that.It's important. It's right. It's very hard to explain why.

Jonathan Ive

From JonathanIveinterview:simplicityisn'tsimple ontelegraph.co.uk http://bit.ly/JFnLSN


Ingredients:woodpulp,paper,color ink (Pantone292SC & 021C),UV-coating,air bubble bags,some specialskills, a lot of loveand your order ofcourse.

It really tastes likecardboard.CoolBlue



Guy Kawaski: Make Meaning The Art of the Start.http://ecorner.stanford.edu/authorMaterialInfo.html?mid=1171


Presentatienaam2012

Principles of Design Thinking

Know your users and align with users mentalmodels

Provide appropriate feedback

Eliminate the opportunity for error

All things you make will have to make meaning


Experiencia de UsuarioDeviene de varios fenmenos: Ergonoma y Human Factor

HCI (Interaccin Humano-Computadora)

Diseo Centrado en Usuario (User-Centered Design)

Usabilidad

Accesibilidad

Sub-campo o rama de la Experiencia de Usuario.

Diseo de Experiencia de Usuario

Aspecto relacionado con el proceso de creacin de un software basndose en los indicadores que influyen en las experiencias que tiene el usuario cuando interacta con algo.

Diseo de Experiencia de UsuarioTrmino sombrilla que agrupa a varios procesos de diseo; integra varias disciplinas y toma de diferentes ciencias.Por ejemplo algunos procesos: Arquitectura de Informacin Diseo de Interaccin Diseo de informacinPor ejemplo algunas ciencias: Psicologa cognitiva Ciencias de la Informacin Ciencias de la Comunicacin Matemticas

Historia del nfasis en las tecnologas

Juan Francisco Reyeshttp://www.xentido.com/2010/08/diseno-de-experiencia-de-usuario-o-diseno-centrado-en-el-usuario/

Jesse James Garret (2000) traducido por Javier VelascoLos elementos del UX

Nivel 1. Funcionalidad. El producto cumple con una finalidad o funcin, soluciona un problema.

Nivel 2. Usabilidad. El producto es fcil, cmodo y seguro de usar. Es eficiente

Nivel 3. Placer. Cuando un producto ya es fcil de usar, la siguiente necesidad del consumidor o usuario es que el producto le proporcione algo ms, no slo beneficios funcionales sino tambin emocionales. El producto es deseable.

Niveles de necesidad

JORDAN P. W. (2000) Designing pleasurable products. An introduction to the new human factors. Taylor and Francis. London.

Diseo como proceso comunicativo

Tres crculos de la AIPeter Morville

Panal de la Experiencia de UsuarioPeter Morville

Simplicidad como principio de diseoInterfaces sencillas, donde no haya nada superfluo.

No se puede experimentar la experiencia hasta que lo experimenteBill Moggridge, IDEO

Ponerse en la posicin del usuario

Los mejores diseadores son los que son capaces de sufrir como usuarios los errores de diseo.

Qu es UXD?Un enfoque o una filosofa de diseo.

De qu se trata?De disear a partir del estudio de los aspectos que influyen y determinan la experiencia que tienen los usuarios con estos sistemas.

Cmo se hace?Interactuando con los usuarios, investigndolos, estudiando el contexto de uso, modelando, representando, prototipando, etc.

Concepto

Utilidad?Minimiza errores, aumenta la posibilidad del logro del producto, facilita el proceso de creacin del producto y satisface al usuario final.

Dnde se hace?Diseo de software (en el caso de este curso). Aplicaciones para Web, Desktop, Mvil, etc.

Concepto

Disciplina90 % prctica - 10 % terica

Se aprende haciendo

Removing testicles is the way to learn to castrate

Nuestro lema es

Depende (it depends)

No existe nada absoluto en el diseo de software, las cosas pueden cambiar segn el contexto, los contenidos y los

usuarios.

Criterio.

La experiencia est ms basada en la memoria que en la realidad.

Si lo que recuerdas del producto esmaravilloso, sers capaz de perdonar

cualquier situacin problemtica.Donald Norman

METODOLOGACmo hacer diseo enfocado en la

experiencia del usuario?

} Etapas. Responden al tiempo transcurrido cundo?} Actividades o tareas. Responden al proceso qu?} Tcnicas. Responden a lo que se hace para lograr los

procesos y tarea cmo?} Herramientas. Responden a qu se usa para aplicar

las tcnicas con qu?

PROCESO

PROCESO

1 } INVESTIGACIN (obtener toda la informacin posible del proyecto, usuarios y producto a disear)} ORGANIZACIN (proceso cognitivo de procesar toda

la informacin para convertirla en un producto)} DISEO (propuesta del diseo del producto a partir de

lo organizado)} PRUEBA (comprobacin del diseo del producto

propuesto)

2

34

ETAPAS

PROCESO

Informacin relacionada con el proyecto Necesidades generales Temtica del producto Objetivos del producto Intensin comunicativa del producto (Informar, entretener, alertar) Tipologa Definicin general de los usuarios /contexto /contenido

ETAPA INVESTIGACIN1

Estudio de Usuarios (receptores) Caracterizacin (tipologa, roles, etc.)

Perfil de usuarios Necesidades (de informacin, formacin, etc.) Escenarios Tareas de usuarios

ETAPA INVESTIGACIN1

Estudio del contexto. Caractersticas del contexto de uso (culturales, polticas, econmicas, sociales y

tecnolgicas) Definicin del modelo de negocio. DAFO (FODA) Banco de problemas Flujograma de procesos y actividades Escenarios Estudio de mercado, productos similares, etc.EN CASO DE REDISEO DE UN PRODUCTO Anlisis de uso (Ejemplo: Logs, Google Analytic) Evaluacin al producto anterior

ETAPA INVESTIGACIN1

Estudio de los contenidos. Inventario de recursos Mapas de conceptos Mapa de contenido

Estrategia de trabajo, Anlisis de recursos de trabajo, Planificacin del tiempo de trabajo, etc.

ETAPA INVESTIGACIN

Artefactos generados en esta etapa: Informes y Diagramas

Representacin de todas las estructuras posibles de los contenidos, en correspondencia a las necesidades de usuarios y su contexto.

Definicin de todas las formas de jerarquizar los contenidos. Hacer corresponder las estructuras planteadas a las necesidades

tanto de emisores (clientes) como de receptores (usuarios).

ETAPA ORGANIZACIN2

[ARTE]

Artefactos generados en esta etapa: Diagramas manuscritos y digitales

Definicin de la estructura del producto (diagrama de organizacin) (blueprint)(taxonoma)

Definicin del funcionamiento de estas pantallas. (diagrama de funcionamiento) (flow)

Definicin de las pantallas del producto. (diagrama de presentacin) (wireframe)

Definicin de las etiquetas del producto. Definicin de los servicios que ofrecer el producto digital. Creacin de prototipos de bajo y alto nivel

ETAPA DISEO3

Artefactos generados en esta etapa: Diagramas digitales y prototipos, informes del producto

Pruebas de prototipos Revisin de diagramas

q Tcnicas para hacer los test Crtica de diseo (con usuarios y expertos) Test de usuarios (con usuarios potenciales finales) Test heursticos (con expertos) Cardsorting (aplicacin a otra muestra de usuarios)

ETAPA PRUEBA4

Artefactos generados en esta etapa: Modificaciones a los de la etapa de diseo

Las tcnicas se usan segn la necesidad dentro del proceso. No estn obligatoriamente relacionadas con las actividades ni

las etapas. Se pueden usar en cualquier momento. Se pueden mezclar entre s

Cardsorting a expertos Tormenta de ideas con un Diseo Participativo. Encuesta con Anlisis de frecuencia de textos.

Tcnicas

Reunin Entrevista y Encuesta Observacin Revisin bibliogrfica Consulta a experto Representacin y mapeo

Tcnicas bsicas

Tormenta de ideas. (brainstorming) (focusgroup) Crtica de diseo. Diseo participativo. Tormenta de necesidades. Escenarios. Benchmarking. (comparacin)(anlisis de homlogos) Anlisis de frecuencia de texto.

Tcnicas (principalmente para la bsqueda de informacin)

Organizacin de tarjetas (cardsorting) Agrupacin Secuencia Posicin de bloques

Tabulacin de contenidos. Diagramas de afinidad. Validacin de trminos.

Tcnicas (principalmente para la organizacin)

Anlisis de tareas (task analisys). Flujogramas. Caminara cognitiva (cognitive walkthrough)

Tcnicas (principalmente para el funcionamiento)

Diagramacin en papel (paper prototype) Diagramacin del producto:

Diagrama de organizacin (blueprint) Diagrama de funcionamiento (flow) Diagrama de presentacin (wireframe)

Etiquetado Prototipado digital

Tcnicas (principalmente para el diseo)

Todos sabemos sufrimos lo que es


O es como la msica de cmara?

Les Luthiers Entreteniciencia Familiar http://www.youtube.com/watch?v=9tS-OyggjCE


Una definicin formal (ISO 9241-11)

Usabilidad: El grado en que un producto puede ser utilizado por los usuarios para lograr sus propsitos con efectividad, eficienciay satisfaccin en un determinado contexto de uso.oEfectividad: Pueden los usuarios hacer lo que quieren hacer?oEficiencia: Pueden hacerlo con poco esfuerzo/memoria/etc.?oSatisfaccin: Cul es la percepcin de los usuarios acerca del

producto?oContexto: De qu situacin estamos hablando?

oEmpez a drsele ms importancia a los dos primeros aspectos (los msfciles de medir)

International standards for HCI and usability: http://www.usabilitynet.org/tools/r_international.htm


Bsicamente

Productos fciles de usarNo me hagas pensar

Dont make me think: http://www.sensible.com/buythebook.html


Y lleg la UX (User eXperience)

Tenemos que tener en cuenta la experiencia del usuario!Diseador de experiencias? Suena cool!Entonces usabilidad y UX son lo mismo?

Depende:oSi por usabilidad solo entendemos eficacia y eficiencia, y no tenemos en cuenta la

satisfaccin del usuario => NOoSi por usabilidad solo incluimos actividades de evaluacin, y no de anlisis o diseo =>

NOo(entre nosotros S)

Lo importante es Tener en cuenta la experiencia global del usuario Al final, una buena experiencia se consigue con aplicaciones usables


Y la accesibilidad (web)?

Objetivo: que cualquiera tenga acceso a la web, independientemente de sus habilidades o situacin.oNo solo discapacitados; ya lo veremos.Es lo mismo que usabilidad?

No; es un requisito previo:oAccesible: se puede llegaroUsable: se puede usar fcilmente

Cuando hablamos de usabilidad, solemos referirnos a usuarios/situaciones normales (si es que existe tal cosa)Cuando hablamos de accesibilidad, solemos referirnos a usuarios o

situaciones especiales (para quin?)

9/3/1694

En resumen

UsabilidadQue sea fcil de usar

UX (User eXperience)Que el usuario tenga una experiencia satisfactoria(suele conseguirse haciendo que sea usable)

AccesibilidadQue el usuario pueda usarlo(nos solemos referir a situaciones especiales)


Es rentable invertir en usabilidad?

9/3/16


ROI, ROI, ROIAhorro en costos de desarrollo.oMenos costes de formacin.oLos problemas se detectan antes.Mejora la eficacia y eficiencia en las tareas.oImportante en aplicaciones internas e Intranets.Mejora las ventas.oLos clientes tienen menos problemas a la hora de comprar.oMenos clientes descontentos que abandonan.oMs clientes nuevos.Incrementa la satisfaccin de los usuarios.oMenos problemas legales (reclamaciones).


Todo eso est muy bien, pero


Algunos nmeros generales

o"The rule of thumb in many usability-aware organizations is that the cost-benefit ratio for usability is $1 : $10-$100. Once a system is in development, correcting a problem costs 10 times as much as fixing the same problem in design. If the system has been released, it costs 100 times as much relative to fixing in design." (Gilb, 1988)

o"The magnitude of usability improvements is usually large. This is not a matter of increasing use by a few percent. It is common for usability efforts to result in a hundred percent or more increase in traffic or sales." (Nielsen, July 1999)

The ROI of Usability http://www.upassoc.org/usability_resources/usability_in_the_real_world/roi_of_usability.html


Ms nmeros

o"In Jared Spool's study of 15 large commercial sites, users could only find information 42% of the time even though they were taken to the correct home page before they were given the test tasks." (Nielsen, October 1998)

o"IBM's Web presence has traditionally been made up of a difficult-to-navigate labyrinth of disparate subsites, but a redesign made it more cohesive and user-friendly. The company said in the month after the February 1999 re-launch that traffic to the Shop IBM online store increased 120 percent, and sales went up 400 percent." (Battey, 1999)

The ROI of Usability http://www.upassoc.org/usability_resources/usability_in_the_real_world/roi_of_usability.html


Y en la actualidad?

oLuckily, current usability ROI is so stupendously big (spend 10% to gain 83%) that it can decrease much more and still be a favorable proposition for business executives. (Nielsen, 2008)

Pero eso es en entornos ya maduros y con experiencia en temas de usabilidad:

oDuring the last decade, the share of project resources allocated to usability has held steady at around 10% in those enlightened companies that include usability in their design lifecycle. (Nielsen, 2008)

Usability ROI Declining, But Still Strong http://www.useit.com/alertbox/roi.html


Casos concretos

9/3/16


Portal de viajes:

oAnaltica web => Muchos usuarios que iniciaban el proceso de compra no completaban la transaccinoFormulario de pago (reconstruccin):

"After we realised that we just went onto the site and deleted that field - overnight there was a step function [change], resulting in $12m of profit a year, simply by deleting a field.

Expedia on how one extra data field can cost $12m http://www.silicon.com/management/sales-and-marketing/2010/11/01/expedia-on-how-one-extra-data-field-can-cost-12m-39746554/

Name

Company

Address

Muchos usuarios particulares ponan el nombre de su banco

y la direccin de su banco


El botn de los 300 millones de dlares

oEn un popular sitio de comercio electrnico (BB?), los usuarios seleccionaban sus productos, y cuando deseaban confirmar la compra

Los usuarios nuevos guardaran sus datos para posteriores comprasLos usuarios registrados no tendran que volver a introducir sus datosPero

The $300 Million Button http://www.uie.com/articles/three_hund_million_button

Email Address

Password

Login Register

Forgot Password

Por qu tengo que registrarme? Slo quiero comprar

No recuerdo si ya me registr antes

Qu direccin de correo electrnico puse?


El botn de los 300 millones de dlares (y II)

o45% de los clientes se haban registrado mltiples vecesoHasta 160.000 peticiones de contrasea al daDe ellos, el 75% no finalizaban su compra despus.

Solucin:

The number of customers purchasing went up by 45%. The extra purchases resulted in an extra $15 million the first month. For the first year, the site saw an additional $300,000,000

The $300 Million Button http://www.uie.com/articles/three_hund_million_button

Email Address

Password

Login Register

Forgot Password

Email Address

Password

Login Continue

Forgot Password

You do not need to create an account to make purchases on our site. Simply click Continue to proceed to checkout. To make your future purchases even faster, you can create an account during checkout


Aprender a escribir chino/japons

Prueba de una campaa de e-mail (test A/B)oRecibir consejos sobre cmo usar el producto

How One Check Box Lowered Conversions by 17% http://www.georgesaines.com/?p=352


No solo en web

Ford to upgrade MyFord Touch in 250,000 vehicles after taking heat for glitches and design http://www.washingtonpost.com/business/technology/ford-to-upgrade-myford-touch-in-250000-vehicles-after-taking-heat-for-glitches-and-design/2011/11/06/gIQAY4MNtM_story.html


Cmo se consigue?

9/3/16


As, no

109

Una noticia buena y una mala

La mala: no hay trucos mgicos

La buena: no hay trucos mgicos


Evaluando la usabilidad

Muchas veces hay pocos recursos, slo para evaluar la usabilidad de algo ya desarrollado

Discount Usability/Guerrilla Usability (Jakob Nielsen):Tcnicas que ofrecen buenos resultados con pocos recursos:

oEvaluacin heurstica (revisin de un experto)

oTests de usuarioGuerrilla HCI: Using Discount Usability Engineering to Penetrate the Intimidation Barrier http://www.useit.com/papers/guerrilla_hci.html


Evaluacin heurstica

Inspeccin sistemtica de una interfaz por parte de expertos. para comprobar si la interfaz cumple o no determinados principios de usabilidad (las heursticas).

Pasos:1. Determinar objetivos y alcance de la evaluacin.2. Seleccin de las heursticas a utilizar.3. Evaluacin y deteccin de problemas por parte de los expertos.4. Puesta en comn. Informe y recomendaciones.

Heuristic Evaluation http://www.useit.com/papers/heuristic/


Heursticas de usabilidad de Nielsen (1)

Visibility of system statusThe system should always keep users informed about what is going on, through appropriate feedback within reasonable time.

Match between system and the real worldThe system should speak the users' language, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order.

User control and freedomUsers often choose system functions by mistake and will need a clearly marked "emergency exit" to leave the unwanted state without having to go through an extended dialogue. Support undo and redo.

Consistency and standardsUsers should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions.

Error preventionEven better than good error messages is a careful design which prevents a problem from occurring in the first place. Either eliminate error-prone conditions or check for them and present users with a confirmation option before they commit to the action.

http://www.nngroup.com/articles/ten-usability-heuristics/


Heursticas de usabilidad de Nielsen (2)

Recognition rather than recallMinimize the user's memory load by making objects, actions, and options visible. The user should not have to remember information from one part of the dialogue to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate.

Flexibility and efficiency of useAccelerators -- unseen by the novice user -- may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent actions.

Aesthetic and minimalist designDialogues should not contain information which is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility.

Help users recognize, diagnose, and recover from errorsError messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution.

Help and documentationEven though it is better if the system can be used without documentation, it may be necessary to provide help and documentation. Any such information should be easy to search, focused on the user's task, list concrete steps to be carried out, and not be too large.


Ejemplos de heursticas aplicadas (1)


Ejemplos de heursticas aplicadas (2)


Test de usabilidad (thinking aloud):involucrando a los usuarios

Una tcnica evaluacin: testeo con usuariosoObservar a usuarios (representativos) mientras realizan tareas tpicas con la aplicacin (lo

que hacen, NO lo que opinan)oHablan en voz alta sobre lo que estn haciendooNo son necesarios muchos usuarios (tpicamente 5)

Pasos:1. Planificar el test2. Preparar tareas y material3. Preparar lugar de la prueba4. Reclutar usuarios5. Realizar la prueba6. Analizar los resultados y presentar informe

Usability Testing http://www.usability.gov/methods/test_refine/learnusa/index.html


Ejemplo: usabilidad de Joomla!

Ejemplo: usabilidad de Joomla!oTarea: cambiar el aspecto de un sitio web recin instalado

Infraestructura:Desde un simple ordenador y alguien tomando notas en papel (en un entorno tranquilo y

cmodo). hasta un laboratorio de usabilidad con:

Dos habitaciones (pruebas y observacin) Cmaras de vdeo y micrfonos Grabacin de la pantalla del usuario Espejos unidireccionales Eyetracker

La tecnologa ayuda, pero NO es lo ms importanteEs Joomla! Usable? http://www.slideshare.net/jordisan/es-joomla-usable-joomla-day-2010


Haz fcil lo imposible

Cmo personas no expertas en usabilidad pueden hacer sus propias pruebas de usuario internas

Un da al mes durante el desarrollo:oDedicar una maana haciendo

pruebas con tres usuariosoConseguir que haya observadores:

desarrolladores, jefes, oDecidir con observadores

qu problemas son los prioritarios yqu cambios se van a hacerantes de la prxima ronda

Haz fcil lo imposible (Anaya) http://www.anayamultimedia.es/cgigeneral/ficha.pl?id_sello_editorial_web=23&codigo_comercial=2315633#

9/3/16 usabilidad - UX - accesibilidad Jordi Snchez - @jordisan - http://jordisan.net119

Evaluar est bien;pero si esperamos demasiado

http://blogs.mentor.com/johnparry/blog/2010/07/01/sony-vaio-laptop-in-mass-recall/


Qu queremos evitar?

No es lo que necesitoNo lo encuentroNo lo entiendoEn realidad

Estclaro

Usuario (o no)Analista

1. Requisitos 3. Entrega2. Desarrollo


Mejor:tenindola en cuenta desde el principio

oMltiples tcnicas en todas las etapas. Evaluacin de expertos; prototipado; casos de uso; Internamente, o asesoramiento externo.

oSi se hace durante todo el proceso, de modo iterativo:DCU (Diseo Centrado en el Usuario)

UsabilityNet: Methods table http://usabilitynet.org/tools/metho ds.htmEn busca del Diseo Centrado en el Usuario (DCU) http://www.nosolousabil id ad.com/ articu los/dc u.htm


Un paso ms all: DCU

Diseo Centrado en el UsuariooEst orientado a los usuarios

del producto, que participan durante todo el proceso.

oA pesar de denominarse diseo, en realidad se aplica durante todas las fases del desarrollo (planificacin, diseo, desarrollo, evaluacin), desde las primeras etapas.

oEs iterativo.oEs multidisciplinar.oSu objetivo es obtener productos usables y

satisfactorios para los usuarios.

En busca del Diseo Centrado en el Usuario (DCU) http://www.nosolousabilidad.com/articulos/dcu.htm


Ejemplo: prototipado + test usuario

http://www.youtube.com/watch?v=9wQkLthhHKA


Usabilidad NO-WEB (1)

La mayora de la informacin prctica existente sobre usabilidad hace referencia a sitios webHasta dnde es aplicable a otro tipo de aplicaciones?

En general:oTcnicas S son aplicables a cualquier tipo de aplicacin:

evaluacin heurstica, tests con usuarios, prototipado, etc.oPrincipios generales (heursticas) S son aplicables a cualquier tipo de

aplicacin:visibilidad del estado; lenguaje del usuario; oLos checklists y recomendaciones concretas DEPENDE:

escribir para la web; enlaces;


Usabilidad NO-WEB (2)

Algunas diferencias en aplicaciones desktop o mviles:oEntorno hardware/software ms controladooEstndares especficos del sistema (Apple; Microsoft; Google)oMenos libertad de navegacinoPerfiles de usuario normalmente ms delimitadosoExpertos en usabilidad necesitan ms tiempo para conocerlasSe estn acercando?

Windows User Experience Interaction Guidelines http://msdn.microsoft.com/en-us/library/aa511258.aspxApple Human Interface Guidelines http://developer.apple.com/documentation/userexperience/Conceptual/AppleHIGuidelines/


Consejo de mnimos

No se pueden aplicar todas en cada proyectoAdecuarse a objetivos, necesidades, recursos, aspectos crticos,

Pero para empezaroContratar/formar personal especializadooIntegrar usabilidad en el proceso de desarrollo

Subconjunto (mnimo) de tcnicas: Roles de usuarios; personas (quin) Casos de uso (qu) Prototipado de interfaces (cmo) Evaluacin (heurstica/pruebas con usuarios)

UCDmanagerUsability Planner http://www.usabilityplanner.org/UCDmanager http://ucdmanager.net


DISEO CENTRADO EN EL USUARIO,LEAN UXY PROTO-PERSONAS

10 MINUTOS

DISEO CENTRADO EN EL USUARIO

Un enfoque para el diseo y desarrollo de sistemas que tiene comoobjetivo hacer sistemas interactivos ms usables,centrndose enuso del sistema y aplicando factores humanos/ergonoma y losconocimientos y tcnicas de usabilidad*.

*Norma ISO 9241-210:Ergonomics of humansystem interaction Part 210:Human-centred design for interactive systems

Diseo Centrado en el Usuario

Norman & Draper,User Centered System Design:New Perspectives on Human-computer Interaction,1986

QU SE DEFINE EN LA FASE ENTENDER?

Las caractersticas de los usuarios previstos,sus necesidades,comportamientos y metas.

Las tareas que los usuarios realizarn con el producto para cumplirmetas especficas.

El contexto en el que los usuarios ocuparn el sistema.

QU SE DEFINE EN LA FASE ENTENDER

1. Objetivos del producto/servicio

2. Objetivos de negocio

3. Objetivos de los usuarios

4. Definicin de audiencia meta

5. Diseo de Personas,tareas y escenarios

QU SE DEFINE EN LA FASE ENTENDER?

6. Requerimientos funcionales

7. Requerimientos de contenido

8. Anlisis de competencia

9. Mejores prcticas

10.

CARACTERSTICAS DE LOS USUARIOSPREVISTOS,SUS NECESIDADES,COMPORTAMIENTOSY METAS

INICIA EL PROYECTO

Quiero una apppara mi negocio

- El cliente

Actualmente,casi todos los proyectos empiezan considerandouna serie de supuestos,es parte de la incertidumbre.Por lo general,ignoramos los supuestos o peor an,

los tomamos como hechos.

La audiencia meta tambin inicia como un supuesto.

PROTO-PERSONAS

Una Persona es una representacin o arquetipo de un usuario,

normalmente apagado a la investigacin de usuarios reales durante el

proceso de Diseo Centrado en el Usuario.

En Lean UX, se utilizan Proto-Personas cuando no existen

recursos para crear verdaderos personajes basados en investigacin

de usuarios,se basan en investigacin secundaria y supuestos del

equipo.

CUNDO USAR PROTO-PERSONAS

Al inicio del proyecto,cuando se quiera asegurar el alineamiento sobre laaudiencia meta entre el cliente y todas las partes interesadas.

Cuando un cliente decida no invertir en investigacin de usuarios.

Al hacer Lean UX,Proto-Personas representa la mejor conjetura encuanto a quin est utilizando (o va a utilizar) el producto y por qu.Secomienza con suposiciones y luego se realiza investigacin para validarlashiptesis.

Formato Proto-Persona

EJERCICIO #1CREACIN DE PROTOPERSONAS

15 MINUTOS

INICIA EL PROYECTO

Quiero una app paraque cualquier ciudadanodel DF pueda tramitar yobtener un permiso paraconsumo recreativo deMarihuana- Miguel ngel Mancera

ACTIVIDAD

Identifiquen supuestos del proyecto,escrbanlos!

Identifiquen los diferentes perfiles de usuario

Definan una Proto-Persona por cada perfil de usuario

UX RESEARCH10 MINUTOS

Analisis de sitios horribles Experiencia del usuario horrible

147

ESTUDIOCONTEXTUALMtodo etnogrfico para obtenerinformacin sobre el contexto de uso,dondelos usuarios son entrevistados yobservados en sus propios entornos porlo queel anlisis de datos es ms realista quelos datos obtenidos en un laboratorio.

ESTUDIO CONTEXTUAL

Los cuatro principios de la investigacin contextual son: Enfoque - Plan para la investigacin. Contexto - Ir al entorno del usuario y observar sucomportamiento Alianza - Entrevistar a los usuarios acerca de su trabajo yparticipar en el

descubrimiento de sus necesidades y metas respecto al producto. Interpretacin - Desarrollar un entendimiento cualitativo sobrelo observado.

ENTREVISTA

Mtodo de conversacin uno-a-uno para la obtencinde informacin cualitativa deusuarios potenciales del producto.

Recomendaciones para lograr entrevistas exitosas: Establecer expectativas correctas Callar y escuchar Minimizar preguntas sesgadas y escuchar Ser amigables y escuchar Olvidar supuestos y escuchar Evitar generalizaciones y escuchar Atencin a seales no verbales

ENCUESTA

Conjunto de preguntas para evaluar las preferencias, actitudes, caractersticas yopiniones de un usuario sobre un tema determinado. Permite obtener insights,no mtricas.

Recomendaciones para aplicar encuestas: Preguntar sobre eventos y experiencias recientes No sugerir respuestas Una pregunta a la vez Evitar escalas complejas como respuesta Entrevistar,no slo realizar encuesta Acotar correctamente el nmero de participantes

FOCUS GROUP

Debate centrado donde un moderador lidera un grupo de

participantes a travs de un conjunto de preguntas sobre un

tema en particular.

Focus groupno es un test de usabilidad.En un focusgroup se consulta la opinin de un grupo de usuarios,por el

contrario,en un test de usabilidad se observa cmo las personas

utilizan realmente un producto.

Una vez que se ha invertido tiempo en investigacinde campo sobre la vida de los usuarios,susmotivaciones y

ambiente,cmo se utilizan todos estos datosde investigacin para crear el diseo delproducto?

PERSONASAs como los economistas crean modelos para describir elcomportamiento de los mercados,hemos encontrado que el usodenuestra investigacin para crear modelos descriptivos de losusuarios esuna herramienta nica y poderosa para el diseo de interaccin.Llamamos a estos modelos de usuario Personas.About Face:The Essentials of Interaction Design,Alan Cooper

PERSONASSon personajes imaginarios,pero representativos del mercado objetivo y debentener en cuenta los siguientes puntos:

1. LasPersonasrepresentan a los usuarios en todo el proceso dedefinicin,diseo y desarrollo.

2. Son arquetipos hipotticos de usuarios reales.3. A pesar de que son imaginarias,se definen con significativo rigor y

precisin.

DISEAR PARA UNA SOLA PERSONA

Si se desea crear un producto que satisfaga una ampliaaudiencia deusuarios,la lgica sugerira que sea lo ms amplio enfuncionalidadcomo sea posible,para dar cabida a la mayor cantidad depersonas.Esta lgica es errnea.


Tratar de complacer a los diferentes puntos de vista puedematar a un producto.Al restringir el objetivo de diseo para unasola persona, nada se interpone entre esa persona y unaexperiencia completa,ya que le dar las caractersticassuficientes para resolver sus necesidades concretas.

PROCESO PARA CONSTRUIR PERSONAS

1.2.3.4.5.6.7.8.

Grupos de entrevistas personales por rol de usuarioIdentificar las variables de comportamientoMapa de entrevistas por variables de comportamientoIdentificar patrones significativos de comportamientoSintetizar las caractersticas y definir metasRevisar para evitar redundancia y afinar integridadDisear tipos de PersonaDescripcin de atributos y comportamientos

Grupos de entrevistas personalespor rol de usuario

Identificar las variablesde comportamiento

Mapa de entrevistaspor variables de comportamiento

Identificar patronessignificativos de comportamiento

Sintetizar las caractersticasy definir metas

Revisar para evitar redundanciay afinar integridad

Disear tipos de Persona

Descripcin de atributosy comportamientos

EJERCICIO #2CREACIN DE PERSONAS

15 MINUTOS

INVESTIGACIN DE USUARIOS

ACTIVIDAD

Identifiquen comportamientos,necesidades y metas de susentrevistas

Validen los supuestos e hiptesis de su Proto-Persona contra susentrevistas

Definan una Persona

DISEO ORIENTADO A METAS10 MINUTOS

DISEO ORIENTADO A METAS

El Diseo Orientado a Metas es la metodologa empleada enDiseo de Interaccin para comprender el contexto,lasmetas,necesidades y motivaciones del usuario y llevarlo aldiseo de interfaces.

RECONOCIMIENTO DE METAS

Unameta es un punto final deseado en un tiempo finito.

Una tarea es la realizacin de un conjunto de pasosNecesarios para lograr unameta.

ESCENARIOS

Un escenario es una descripcin narrativa concisa de una o mspersonas para alcanzar una meta especfica.El escenario es dnde

est el usuario (la Persona),realizando una determinada tarea para

cumplir una determinada meta.El escenario es aplicar la narrativa

como herramienta de diseo.

EJERCICIO #3CREACIN DETAREAS

15 MINUTOS

ACTIVIDAD

Identifiquen 2 tareas a realizar por su Persona en la app

Definan la meta de cada tarea

Definan los pasos de cada tarea para lograr la meta

EJERCICIO #4CREACIN DE ESCENARIO

10 MINUTOS

ACTIVIDAD

Describan un escenario en donde la Personarealizara una de lastareas identificadas

ESTRATEGIA DE CONTENIDOS10 MINUTOS

ESTRATEGIA DE CONTENIDOS

Una vez que se defina una Persona, sus metas y situada en un escenario con tareas a desempear,queda identificar qu contenidosofrecerles.Para ello se define una estrategia de contenidos.

ESTRATEGIA DE CONTENIDOS

La estrategia de contenidos debe estar centrada en la Persona.

Para dar a las personas el contenido que necesitan,es necesarioidentificar los tipos de contenidos que mejor asistan al usuarioen la ejecucin de sus tareas en cada escenario.

TIPOS DE CONTENIDO

Para definir un contenido es necesario identificar su formato y tipo.

El formato es la unidad bsica del contenido:texto,imagen o video.

El tipo es la aplicacin del formato,por ejemplo,una receta de cocina es

un tipo de contenido de formato texto.

Un tipo de contenido puede estar compuesto por varios formatos,porejemplo,una galera de imgenes (Slider).

MAPA DE CONTENIDO

Son cartografas que se centran en el contenido de un productodigital.Permite explorar y visualizar el contenido,as como detectaroportunidades de mejora para el desarrollo de contenidos.

El objetivo de un mapa de contenido es comenzar el desarrollo decontenidos con un fuerte enfoque en las metas de los usuarios.

EJERCICIO #5CREACIN DE MAPA DE CONTENIDO

15 MINUTOS

ACTIVIDAD

Identificar contenidos para las tareas a realizar por la

Persona en elescenario descrito

Crear un mapa de contenido

CIERRE DELTALLER

Accesibilidad (web) y sus beneficios

9/3/16


Recordemos

UsabilidadQue sea fcil de usar

UX (User eXperience)Que el usuario tenga una experiencia satisfactoria(suele conseguirse haciendo que sea usable)

AccesibilidadQue el usuario pueda usarlo(nos solemos referir a situaciones especiales)


Acceso universal


MITO: accesibilidad web es para ciegos

FALSO.Es cierto que los criterios de accesibilidad ayudan a personas con

deficiencias fsicas (visuales, auditivas, motrices), cognitivas, de lenguaje,

Y TAMBINUsuarios con discapacidades temporales (enfermedades, convalecencias)Usuarios de edad avanzadaDispositivos menos (?) habituales: mviles, SmartTV; versiones antiguas

SO/navegador; conexiones lentasEntornos especiales (kioskos pblicos; entornos ruidosos, fbricas, etc.)


Beneficios de accesibilidad (obvios)Maximizar los posibles usuarios/clientes

Seguir estndares facilita el desarrollo y mantenimiento

Por imagen pblica

Web Accessibility Initiative (WAI) http://www.w3.org/WAI/


Accesibilidad: ms beneficiosoy ademsMejora el posicionamiento en buscadores (SEO)otextos alternativos; identificar idioma; documentos bien estructurados;

Por normativa legaloLos sitios web de administracionespblicas (o con financiacin pblica;o de especial inters) deben cumplirun nivel mnimo de accesibilidadHigh Accessibility Is Effective Search Engine Optimization http://www.alistapart.com/articles/accessibilityseo

Referencia sobre legislacin espaola relacionada con la accesibilidad web http://olgacarreras.blogspot.com/2005/01/referencia-sobre-legislacin-espaola.html


El uso de Personas (needfinding) y escenarios

211

212

Topics

Personas Scenarios User stories

PersonasCentrado en el usuarioBasado en observacin y entrevistasPrimario, secundario, fundamentadoLa guia hacia el diseo de escenariosNo implica reemplazar a la gente en el proceso

Personas

>

John Smith Robert

Irene, 28Background: real estate agent, dance instructor

Example

Description: Irene has a hectic life. Dance competitions are approaching and asan instructor, she needs to schedule extra trainings for 15 people, which shouldalso fit into her own busy calendar. Irene is mostly connected through mobile.Goals:

Irene needs a easy way to scheduletraining events for 15 people

She wants to quickly see which days aresuitable for others on the go, since shemostly uses internet on her mobile

Example

EscenariosScenarios describe la interaccin entretipos de usuarios basado en diversas metasY el sistema al que pertencen

EjemploIts morning and Irene stops at a gas station on her way to ameeting. While filling the tank she decides to quickly check whetherher dance group has agreed upon the next training day.

Irene takes her phone. She logs in to a serviceand sees and overview of proposed dates. Irenenotices that only 11 people of 15 has replied.She also sees that for most next Monday andSaturday suited best. Irene needs the finalanswer soon, so she send a reminder to thosewho have not yet replied. Then she closes thephone and continues her journey.

escenarios Consiste de metas, expectativas, Accin y reaccin

Es un espejo de las aspiraciones vincula contexto y uso

aunque no incluye ejemplos del uso en accionesE.g.: Roberto le da click al boton verde

Sino, Roberto procede a convertir

Historias de usuariosSecuencias de acciones que conducen a un resultado

Glas historias se vuelven testeables Sirve de puente entre usuarios y desarrolladores Asemeja un buen mtodo de proceder a programar

Ejemplo de unahistoria de usuario

Como , deseo de modo que .

User StoriesOtro ejemplocomo organizador, quiero que sea fcil calendarizarun evento para muchas personas

donde pueda dar clases de Zumba.

User StoriesExampleAs an organizer, I want to sent areminder to those who have not yetreplied so I will know which daysuites best for all.

Una necesidad

No tan detallada Testeable

As an organizerI want to click on various days in calendar

I want to provide several meeting day options.

As an organizer, I want to easilyschedule an event for several peopleso that I could teach a dance class.

As an organizer, I want to provide fewoptions for upcoming meeting dayAs an organizer, I want to invite peopleto choose the best day for themAs an organizer, I want check what daysothers have proposed.

Problemas de accesibilidad.Cmo ser accesible

Capital ONE9/3/16226 usabilidad - UX - accesibilidad Jordi Snchez - @jordisan - http://jordisan.net

PROBLEMAS habituales de accesibilidad (1)Personas con problemas visuales(o dispositivos como SmartTV, mviles, etc.)Slo ven texto de modo secuencial

(usan lectores de pantalla/navegadores por voz)Necesitan textos grandesNo distinguen bien los coloresCuidado con:oImgenes sin descripcin textualoTablas y marcos (frames) mal etiquetadosoColores de bajo contrasteoTexto no escalableoVentanas emergentes (pop-up)oNo funcionan con teclado


PROBLEMAS habituales de accesibilidad (2)Personas con discapacidades cognitivas / de aprendizaje(o en entornos complejos;o con poco dominio del idioma; )Pueden tener problemas para entender los contenidos o para concentrarseProblemas de memoria

Cuidado con:oDocumentos con estructura mal definidaoDemasiada informacin en una pginaoLenguaje innecesariamente complejooFalta de imgenes para clarificar el textooAnimaciones y elementos decorativos superfluos


Normativa sobre extranjeros


PROBLEMAS habituales de accesibilidad (3)Personas con discapacidades auditivas(o en entornos ruidosos;o en equipos sin hardware de audio)

Pueden tener problemas para acceder a los contenidos sonoros

Cuidado con:oAudio/vdeo sin descripciones textualesoFrases complejas o demasiado largas


Subttulos


PROBLEMAS habituales de accesibilidad (4)Personas con discapacidades motoras(o no disponen de ratn)

Tienen que usar el teclado u otros dispositivos (reconocimiento de voz)

Cuidado con:oPginas que no funcionan con teclado


MITO: para ser accesible basta con tener una versin slo textoFALSO.

Slo para determinados usuariosSuponen una discriminacin (entrar por la puerta trasera)Problemas por contenidos duplicados:omantenimientooindexacin en buscadoresSe descuida la accesibilidad de la versin normalCmo llego a la versin accesible?

MEJOR: si es posible, una nica versin que cumpla los estndares de accesibilidad


Tiene versin slo texto, pero


sin imgenes

Cmo accedoa la versinslo texto?


CMO consigo que mi web sea ACCESIBLE?

Conociendo y cumpliendo los estndaresoDe los lenguajes utilizados (HTML; CSS; etc.)oEspecficos de accesibilidad

TesteandooDiferentes entornos (navegadores, sistemas operativos, etc.)oCon usuarios reales


Qu ESTNDARES? (1)

Lenguajes/tcnicas utilizados:oHTML vlidooCSS vlidooJavaScript no obstructivooEtc.

IMPORTANTE: separar contenido vs. aspectooEl mismo contenido para todos los usuariosoAspecto en funcin de las condiciones particulares

IMPORTANTE: compatibilidad multinavegador9/3/16237 usabilidad - UX - accesibilidad Jordi Snchez - @jordisan - http://jordisan.net

Con el mismo contenido HTML


Qu ESTNDARES? (2)

Recomendaciones y normativas especficas sobre accesibilidad web:

Section 508 (USA)

WAI (Web Accessibility Initiative)oInternacionales, W3CoSugeridas por la Comisin Europea

UNE 139803 Requisitos de accesibilidad para contenidos Web (Espaa)oBasada en WAIoObligatoria por Ley para sitios web de Administraciones Pblicas


WAI (Web Accessibility Initiative)Forma parte del W3C (World Wide Web Consortium)

Recomendaciones y directrices sobre:oContenido web (WCAG)Contenidos web accesiblesReferencia de normas UNE

oHerramientas de autor (ATAG)Herramientas de creacin accesibles y que generen contenidos accesibles

oAgentes usuario (navegadores) (UAAG)Navegadores accesibles

oRich Applications (WAI-ARIA)Para aplicaciones RIA 2.0


WCAG (Web Content Accessibility Guidelines)

Cmo crear contenidos web accesibles. Versin 2.04 principios generales del contenido web:oPerceptibleoOperableoInteligibleoRobustoCada principio incluye directrices (guidelines)Cada guideline incluye criterios de xito con prioridad: A = Debe satisfacerse; requerimientos bsicos AA = Debera satisfacerse; eliminar barreras significativas AAA = Puede satisfacerse; acceso mejorado

Adems: tcnicas, ejemplos, enlaces, etc.


WCAG: ejemplo guideline


Texto alternativo

Tambin por SEO!


No confiar nicamente en el color (1)


No confiar nicamente en el color (2)


WCAG: niveles de cumplimiento A, AA y AAA

3 niveles de cumplimiento de las guidelines WCAG por parte de pginas o sitios web: Conformidad nivel AoCumple todos los criterios A (deben) Conformidad nivel AAoCumple todos los criterios A y AA (deberan) Conformidad nivel AAAoCumple todos los criterios A, AA y AAA (pueden)

Las declaraciones de conformidad (los sellos) se incluyen por decisin propia (W3C NO las verifica)Habitualmente se intenta alcanzar el nivel AA


EVALUACIONES DE ACCESIBILIDAD

9/3/16


Evaluaciones de accesibilidad: manual

Leyendo el contenido:oLenguaje sencillooAbreviaturas, idiomas, oSe entiende?Comprobar navegadores grficosoFirefox, Internet Explorer, Opera, Safari, oDiferentes plataformas, versiones y sistemas operativosoDiferentes configuraciones:Desactivando imgenes, CSS, JavaScript, sonido, etc.Diferentes resoluciones de pantalla, tamaos de texto, combinaciones de colores o B/N, etc.

Usar navegadores slo texto; lectores de pantallaUsar dispositivos alternativos (slo con teclado)


Evaluaciones de accesibilidad: herramientas

Online y offline

Para comprobar sintaxis de HTML, CSS, etc.oW3C (HTML Validation Service; CSS Validation Service; etc.)

W3C UnicornoOtras herramientas (HTML Tidy; Dreamweaver; etc.)

Para validacin de accesibilidadoWebXACT/Bobby; Cynthia Says; TAW; eXaminator

TAWoComprueban si se cumplen determinados checkpoints de WCAGoSirven como herramienta de apoyo, pero NO son suficientes para evaluar la accesibilidad


MITO: los validadores automticos indican si una pgina es accesible o no

FALSO.Los validadores comprueban la sintaxis (HTML, CSS, etc.)Los validadores comprueban algunos checkpointsPEROMuchos checkpoints son interpretables y necesitan validacin manual.Las herramientas automticas pueden producir falsos negativos y falsos

positivosGuidelines, checkpoints, validadores automticos y sellos son herramientas e indicadores, NO un objetivoLo importante: la accesibilidad real


Pruebas accesibilidad con usuarios

Similares a los tests de usabilidad:oObservacin de usuarios reales mientras se enfrentan al sitio web

Proporcionan mucha informacin til, pero son muy complejos:oDefinir tareas representativasoExiste gran cantidad de tipologas de discapacidad


Retos de accesibilidad:RIA (Rich Internet Applications)

Conseguir interfaces de escritorio en la webAlgunas aplicaciones:oGoogle (Gmail; Google Maps); Flickr; YouTube; ...Tecnologas:oAJAX; Flash; Java; DHTML; etc.Ya no son interfaces insertados en una pgina web, sino que son la propia

interfaz.WAI-ARIA (WAI Accessible Rich Internet Applications)oIniciativa de W3C en desarrollo

Mientras tantooEstndares para conseguir degradacin progresivaoProporcionar versin alternativa


Gmail, con y sin JavaScript


MITO: las pginas accesibles son feas

Para muestra, un botn

Las siguientes pginas tienen un alto nivel de accesibilidad


http://www.inretirementservices.co.uk/

ACCESIBILIDAD WEB. 29-nov-2007, Madrid


http://geekministry.com/old_geek/



http://snowdog.pl/



http://www.3point7designs.com/



Por qu es importante ACCESIBILIDAD?

Permite que el mayor nmero posible de personas acceda a los contenidos (no slo discapacitados).Beneficia a todos los usuarios, hacindoles ms fcil el acceso a las

pginas (mejor usabilidad).Reduce costes de mantenimiento/desarrollo:oUna nica versin para todas las plataformasoEs ms fcil hacer cambios (contenido vs. presentacin)oMayor vida til de los contenidosoLas tcnicas se pueden aplicar a diferentes sitiosCumplir estndares mejora la visibilidad en Internet (SEO) y la

compatibilidad multinavegador.Para determinados sitios, cumplir con la Ley.


En conclusin

9/3/16


Usabilidad (y accesibilidad) sonmuy agradecidas

No requierengrandes inversiones

Habitualmente danresultados muy buenos

Pueden significarla diferencia entre:oel xito y el fracasoot y tu competencia

http://www.zdnet.com/shuttleworth-open-source-desktops-need-a-facelift-2062046056/


Consejo de mnimos (recordatorio)

Contratar/formar personal especializado

Integrar usabilidad en el proceso de desarrolloSubconjunto (mnimo) de tcnicas:Roles de usuarios; personas (quin)Casos de uso (qu)Prototipado de interfaces (cmo)Evaluacin (heurstica/pruebas con usuarios)


Ests seguro de que tu productoo sitio web no es as?


Cul es el problema?

267

El terrible caso del A/B Test

I want more peoplewho visit the site tosubscribe via email

A) More PeopleVisiting

B) HigherConversion Rate

Multivariate Testing

Well show each version to a percentageof visitors and find a winner

Statistical Significance Testing

Most testing platforms have this built in. If you need a generic one and some tips on statistical significance, Avinashs post here hasgood stuff: http://www.kaushik.net/avinash/excellent-analytics-tip1-statistical-significance/

We Can Test Everything!Location on Page

Display Width

Box ColorAddress Verification

Social Proof Inclusion

Loading After the Page

Call-to-Action Copy

Different VersionsBased on User Behavior

Changing Messaging onDifferent Types of Pages/Posts

Discovery

Testing

CRO is aboutgetting your

customers fromhere to here

Consideration

Conversion

Subscriber for 3 Months


Subscriber for 12+ Months

Discovery

Testing

Great CRO isabout movingthem here, too

Consideration

Conversion



Subscriber for 12+ Months

Qu hay dentro De una decisinde Conversin?

Likability

Trust

Word of Mouth

UX

Design Branding Historical Experiences

Social Proof

Associations

CTAs

Copywriting

CONVERSION DECISION(its a complex process)!

Timing

Price

Process

Word of Mouth

Discovery PathAmount of Pain Effort Required

How Do We Find Out WhatNeeds Optimizing?

Segment Our Visitors & Survey Them

Via: http://moz.com/rand/the-growth-of-web-marketing-fields/

Ask Smart Questions to the Right PeopleNever Taken a Free

TrialWhat are you seeking fromMoz? Whats brought youback?

What would make youmore likely to sign up?

What are your biggestobjections to signup?

Took the Free TrialBut Left

What made you take thefree trial?

What objections did youhave and how did you

overcome them?

What caused you to cancelsubscription?

What would have madeyou stay a subscriber?

Took the Free Trialand Stayed

What initially made youwant Moz?

What objections did youhave and how did you

overcome them?

Whats been mostvaluable to you?

Had success w/ Moz?Can we share?

This is How the Pros Do It:

Boom.And Shakalaka.

From Conversion Rate Experts case study (which is definitely worth a read): http://www.conversion-rate-experts.com/crazy-egg-case-study/

This process made Moz $1mm in additionalrevenue in 2009, when we desperately needed it.

CRE detailed their results with us here:http://www.conversion-rate-experts.com/seomoz-case-study/

12 Tactical Tips for CRO

#1: Make Pages Load BLAZING FAST

50% drop in just3 seconds!

Data and charts via: http://blog.tagman.com/2012/03/just-one-second-delay-in-page-load-can-cause-7-loss-in-customer-conversions/

ROI of page speed calculator: http://www.tagman.com/conversion-loss-calculator/

#2: Align Visitor Intent and Page Purpose

From Avinash Kaushiks post: http://www.kaushik.net/avinash/tips-for-improving-high-bounce-low-conversion-web-pages/

#3: Poor Design Negatively Impacts Everything

Good place to find great designers: http://dribbble.com

#4: Empathy Yields Action

+19%Via Kyle Rush: http://kylerush.net/blog/optimization-at-the-obama-campaign-ab-testing/

#5: Dont Force Unnecessary Steps

The $300mm button story is a great anecdotal piece on thishttp://www.uie.com/articles/three_hund_million_button

#6: Concrete & Emotional > Abstract & Intellectual

Concrete &Emotional

Abstract &Intellectual

From this excellent infographic: http://www.zippycart.com/infographics/how-sales-messaging-affects-conversion-rates.html

#7: More Product Detail + Better Presentation = WIN

Zappos great videos and detailed images help make them a standout in the field of online retailing:http://www.zappos.com/puma-future-cat-remix-2-ferrari-dandelion-black-high-risk-red

#8: Video Works

Conversion went from30.0% 33.2% afterthe video was added.

(10% lift)

http://www.commoncraft.com/common-craft-video-dropboxcom-effective

#8: But You Have to Optimize It

Three must-read links on video for conversion: http://conversionxl.com/how-to-use-video-to-increase-conversions/, and the case study data foreParty: http://www.internetretailer.com/2011/02/22/videos-boost-online-profile-eparty-unlimited and for Premiere Game Tables:http://blog.treepodia.com/2011/03/ecommerce-video-roi-a-case-study/. I also highly recommend http://wistia.comwhich we use at Moz for video.

#9: Dont Fall Into the Trap of Copying Others Tactics

14% Increase in Sales 20% Increase in Sales

Great post on case studies and lessons learned: http://moz.com/blog/lessons-learned-from-21-case-studies-in-conversion-rate-optimization-10585

#10: Make Your Core Purpose Insanely Obvious

Huh?Despite reading the homepage thoroughly, I was stumped about exactly what teamr does: h#p://www.teamr.com/

#10: Make Your Core Purpose Insanely Obvious

Makes total sense.Contrast with 15Five, a competitive product that makes their purpose and product extremely clear right away: h#p://www.15five.com/

#11: Maximize the Conversion Scent Throughoutthe Marketing Messages (on & off site)

Photo doesnt match

Wheres the snow, ice,or ground versions?

Theres no copy exceptthe name

WEAK SCENT!

Maintaining the conversion scent from ConversionXL: h#p://conversionxl.com/give:your:adver>sing:roi:a:serious:boost:by:maintaining:scent/#.

#11: Maximize the Conversion Scent Throughoutthe Marketing Funnel

Photo, logo, &button all match

Screenshots & copy fit withthe display ads promise STRONG SCENT!Maintaining the conversion scent from ConversionXL: h#p://conversionxl.com/give:your:adver>sing:roi:a:serious:boost:by:maintaining:scent/#.

#12: Dont Just Aim for the Fastest Possible Conversion

The more timessomeone visits Mozbefore taking a freetrial, the longer theystay a subscriber

(on average)Conversions

Ux formato tec bbva v 3.1

Design

Transcript of Ux formato tec bbva v 3.1