USABILIDAD, UX Y ACCESIBILIDAD:
QUÉ SON Y POR QUÉ DEBERÍAN PREOCUPARME
Jordi Sánchez
http://jordisan.net
@jordisan

Usabilidad, UX y accesibilidad:
qué son y por qué deberían preocuparme
 Presentación
 Algunas definiciones
 ¿Es rentable invertir en usabilidad?
 Casos concretos
 Cómo se consigue
 Accesibilidad (web) y sus beneficios
 Problemas de accesibilidad. Cómo ser accesibles.
 Evaluaciones de accesibilidad.
 En conclusión…
22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 2

PRESENTACIÓN
22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 3

Jordi Sánchez
 Ingeniero en Informática
 Máster en Interacción Persona-Ordenador
 9 años en entidad financiera
 5 años en proyectos de usabilidad/accesibilidad
 Freelance
Proyectos personales:
o UCDmanager (Drupal) http://ucdmanager.net
o Apps Windows 8
o…
http://jordisan.net @jordisan http://linkedin.com/in/jordisan
22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 4

ALGUNAS DEFINICIONES
22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 5

Usabilidad, palabra “de moda”
22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 6

Todos sabemos sufrimos lo que es
22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 8

¿O es como la música de cámara?
Les Luthiers – Entreteniciencia Familiar http://www.youtube.com/watch?v=9tS-OyggjCE
22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 9

Una definición formal (ISO 9241-11)
 Usabilidad: El grado en que un producto puede ser
utilizado por los usuarios para lograr sus propósitos con
efectividad, eficiencia y satisfacción en un
determinado contexto de uso.
o Efectividad: ¿Pueden los usuarios hacer lo que quieren hacer?
o Eficiencia: ¿Pueden hacerlo con poco esfuerzo/memoria/etc.?
o Satisfacción: ¿Cuál es la percepción de los usuarios acerca del
producto?
o Contexto: ¿De qué situación estamos hablando?
o Empezó a dársele más importancia a los dos primeros aspectos
(los más fáciles de medir)
International standards for HCI and usability: http://www.usabilitynet.org/tools/r_international.htm
22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 10

Básicamente…
 Productos fáciles de usar
 “No me hagas pensar”
Don’t make me think: http://www.sensible.com/buythebook.html
22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 11

Y llegó la UX (User eXperience)
 ¡Tenemos que tener en cuenta la “experiencia del
usuario”!
 ¿Diseñador de experiencias? ¡Suena cool!
 Entonces… ¿usabilidad y UX son lo mismo?
Depende:
o Si por “usabilidad” solo entendemos eficacia y eficiencia, y no
tenemos en cuenta la satisfacción del usuario => NO
o Si por “usabilidad” solo incluimos actividades de evaluación, y no
de análisis o diseño => NO
o (entre nosotros… SÍ)
 Lo importante es…
 Tener en cuenta la experiencia global del usuario
 Al final, una buena experiencia se consigue con aplicaciones usables
22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 12

¿Y la accesibilidad (web)?
 Objetivo: que cualquiera tenga acceso a la web,
independientemente de sus habilidades o situación.
o No solo discapacitados; ya lo veremos.
 ¿Es lo mismo que usabilidad?
No; es un requisito previo:
o Accesible: “se puede llegar”
o Usable: “se puede usar fácilmente”
 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 quién?)
22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 13

En resumen…
 Usabilidad
Que sea fácil de usar
 UX (User eXperience)
Que el usuario tenga una experiencia
satisfactoria
(suele conseguirse haciendo que sea usable)
 Accesibilidad
Que el usuario pueda usarlo
(nos solemos referir a situaciones “especiales”)
22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 14

¿ES RENTABLE INVERTIR EN USABILIDAD?
22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 15

Ventajas de tener en cuenta la usabilidad
 Ahorro en costes de desarrollo.
o Menos costes de formación.
o Los problemas se detectan antes.
 Mejora la eficacia y eficiencia en las tareas.
o Importante en aplicaciones internas e Intranets.
 Mejora las ventas.
o Los clientes tienen menos problemas a la hora de comprar.
o Menos clientes descontentos que abandonan.
o Más clientes nuevos.
 Incrementa la satisfacción de los usuarios.
o Menos problemas legales (reclamaciones).
22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 16

Todo eso está muy bien, pero…
22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 17

Algunos números 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
22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 18

Más números
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
22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 19

¿Y en la actualidad?
o “Luckily, 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:
o “During 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
22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 20

CASOS CONCRETOS
22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 21

Portal de viajes:
o Analítica web => Muchos usuarios que iniciaban el proceso de
compra no completaban la transacción
o Formulario de pago (reconstrucción):
Name
Company
Muchos usuarios particulares
ponían el nombre de su banco…
Address
… y la dirección de su banco
 "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/
22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 22

El botón de los 300 millones de dólares
o En un popular sitio de comercio electrónico (¿BB?), los usuarios
seleccionaban sus productos, y cuando deseaban confirmar la
compra…
Email Address
“¿Por qué tengo que registrarme? Sólo quiero comprar”
Password
“No recuerdo si ya me registré antes”
Login Register
“¿Qué dirección de correo electrónico puse?”
Forgot Password
 Los usuarios nuevos guardarían sus datos para posteriores compras
 Los usuarios registrados no tendrían que volver a introducir sus datos
 Pero…
The $300 Million Button http://www.uie.com/articles/three_hund_million_button
22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 23

El botón de los 300 millones de dólares (y II)
o 45% de los clientes se habían registrado múltiples veces
o Hasta 160.000 peticiones de contraseña al día
 De ellos, el 75% no finalizaban su compra después.
 Solución:
Email Address Email Address You do not need to create an
account to make purchases on
our site. Simply click Continue
to proceed to checkout. To
Password Password make your future purchases
even faster, you can create an
account during checkout
Login Register Login Continue
Forgot Password Forgot Password
 “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
22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 24

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
22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 26

¿CÓMO SE CONSIGUE?
22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 27

Así, no
22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 28

Una noticia buena y una mala
 La mala: no hay trucos mágicos
 La buena: no hay trucos mágicos
22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 29

Evaluando la usabilidad
 Muchas veces hay pocos recursos, sólo para evaluar la
usabilidad de algo ya desarrollado
 “Discount Usability”/”Guerrilla Usability” (Jakob Nielsen):
Técnicas que ofrecen buenos resultados con pocos recursos:
o Evaluación heurística (revisión de un experto)
o Tests de usuario
Guerrilla HCI: Using Discount Usability Engineering to Penetrate the Intimidation Barrier
http://www.useit.com/papers/guerrilla_hci.html
22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 30

Evaluación heurística
 Inspección sistemática de una interfaz por parte de
expertos….
 … para comprobar si la interfaz cumple o no
determinados principios de usabilidad (las
“heurísticas”).
 Pasos:
1. Determinar objetivos y alcance de la evaluación.
2. Selección de las heurísticas a utilizar.
3. Evaluación y detección de problemas por parte de los
expertos.
4. Puesta en común. Informe y recomendaciones.
Heuristic Evaluation http://www.useit.com/papers/heuristic/
22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 31

Heurísticas de usabilidad de Nielsen (1)
Visibility of system status
The system should always keep users informed about what is going on, through appropriate feedback
within reasonable time.
Match between system and the real world
The 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 freedom
Users 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 standards
Users should not have to wonder whether different words, situations, or actions mean the same thing.
Follow platform conventions.
Error prevention
Even 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/
22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 32

Heurísticas de usabilidad de Nielsen (2)
Recognition rather than recall
Minimize 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 use
Accelerators -- 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 design
Dialogues 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 errors
Error messages should be expressed in plain language (no codes), precisely indicate the problem, and
constructively suggest a solution.
Help and documentation
Even 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.
22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 33

Ejemplos de heurísticas aplicadas (1)
22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 34

Ejemplos de heurísticas aplicadas (2)
22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 35

Test de usabilidad (“thinking aloud”):
involucrando a los usuarios
 Una técnica evaluación: testeo con usuarios
o Observar a usuarios (representativos) mientras realizan tareas
típicas con la aplicación (lo que hacen, NO lo que opinan)
o Hablan en voz alta sobre lo que están haciendo
o No son necesarios muchos usuarios (típicamente 5)
 Pasos:
1. Planificar el test
2. Preparar tareas y material
3. Preparar lugar de la prueba
4. Reclutar usuarios
5. Realizar la prueba
6. Analizar los resultados y presentar informe
Usability Testing http://www.usability.gov/methods/test_refine/learnusa/index.html
22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 36

Ejemplo: usabilidad de Joomla!
 Ejemplo: usabilidad de Joomla!
o Tarea: cambiar el aspecto de un sitio web recién instalado
 Infraestructura:
 Desde un simple ordenador y alguien tomando notas en papel (en un
entorno tranquilo y cómodo)….
 … hasta un laboratorio de usabilidad con:
• Dos habitaciones (pruebas y observación)
• Cámaras de vídeo y micrófonos
• Grabación de la pantalla del usuario
• Espejos unidireccionales
• Eyetracker
• …
 La tecnología ayuda, pero NO es lo más importante
¿Es Joomla! Usable? http://www.slideshare.net/jordisan/es-joomla-usable-joomla-day-2010
22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 37

“Haz fácil lo imposible”
 Cómo personas no expertas en usabilidad pueden
hacer sus propias pruebas de usuario internas
 Un día al mes durante el desarrollo:
o Dedicar una mañana haciendo
pruebas con tres usuarios
o Conseguir que haya observadores:
desarrolladores, jefes, …
o Decidir con observadores
qué problemas son los prioritarios y
qué cambios se van a hacer
antes de la próxima ronda
Haz fácil lo imposible (Anaya)
http://www.anayamultimedia.es/cgigeneral/ficha.pl?id_sello_editorial_web=23&codigo_comercial=2315633#
22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 38

Evaluar está bien;
pero si esperamos demasiado…
http://blogs.mentor.com/johnparry/blog/2010/07/01/sony-vaio-laptop-in-mass-recall/
22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 39

¿Qué queremos evitar?
Analista Usuario (o no)
Está
claro
No es lo que necesito
No lo encuentro
No lo entiendo
En realidad …
1. Requisitos 2. Desarrollo 3. Entrega
22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 40

Mejor:
teniéndola en cuenta desde el principio
o Múltiples técnicas en todas las etapas.
 Evaluación de expertos; prototipado; casos de uso; …
 Internamente, o asesoramiento externo.
o Si se hace durante todo el proceso, de modo iterativo:
DCU (Diseño Centrado en el Usuario)
UsabilityNet: Methods table http://usabilitynet.org/tools/methods.htm
En busca del Diseño Centrado en el Usuario (DCU) http://www.nosolousabilidad.com/articulos/dcu.htm
22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 41

Un paso más allá: DCU
 Diseño Centrado en el Usuario
o Está orientado a los usuarios
del producto, que participan durante
todo el proceso.
o A pesar de denominarse “diseño”, en
realidad se aplica durante todas las
fases del desarrollo (planificación,
diseño, desarrollo, evaluación), desde
las primeras etapas.
o Es iterativo.
o Es multidisciplinar.
o Su objetivo es obtener productos
usables y satisfactorios para los
usuarios.
En busca del Diseño Centrado en el Usuario (DCU) http://www.nosolousabilidad.com/articulos/dcu.htm
22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 42

Ejemplo: prototipado + test usuario
http://www.youtube.com/watch?v=9wQkLthhHKA
22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 43

Usabilidad NO-WEB (1)
 La mayoría de la información práctica existente sobre
usabilidad hace referencia a sitios web
 ¿Hasta dónde es aplicable a otro tipo de aplicaciones?
 En general:
o Técnicas SÍ son aplicables a cualquier tipo de aplicación:
evaluación heurística, tests con usuarios, prototipado, etc.
o Principios generales (heurísticas) SÍ son aplicables a cualquier
tipo de aplicación:
visibilidad del estado; lenguaje del usuario; …
o Los checklists y recomendaciones concretas… DEPENDE:
escribir para la web; enlaces; …
22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 44

Usabilidad NO-WEB (2)
 Algunas diferencias en aplicaciones desktop o móviles:
o Entorno hardware/software más controlado
o Estándares específicos del sistema (Apple; Microsoft; Google)
o Menos libertad de navegación
o Perfiles de usuario normalmente más delimitados
o Expertos en usabilidad necesitan más tiempo para conocerlas
 ¿Se están acercando?
Windows User Experience Interaction Guidelines http://msdn.microsoft.com/en-us/library/aa511258.aspx
Apple Human Interface Guidelines http://developer.apple.com/documentation/userexperience/Conceptual/AppleHIGuidelines/
22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 45

Consejo de mínimos
No se pueden aplicar todas en cada proyecto
 Adecuarse a objetivos, necesidades, recursos, aspectos críticos, …
Pero para empezar…
o Contratar/formar personal especializado
o Integrar usabilidad en el proceso de desarrollo
Subconjunto (mínimo) de técnicas:
• Roles de usuarios; personas (“quién”)
• Casos de uso (“qué”)
• Prototipado de interfaces (“cómo”)
• Evaluación (heurística/pruebas con usuarios)
UCDmanager
Usability Planner http://www.usabilityplanner.org/
UCDmanager http://ucdmanager.net
22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 46

ACCESIBILIDAD (WEB) Y SUS BENEFICIOS
22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 47

Recordemos…
 Usabilidad
Que sea fácil de usar
 UX (User eXperience)
Que el usuario tenga una experiencia
satisfactoria
(suele conseguirse haciendo que sea usable)
 Accesibilidad
Que el usuario pueda usarlo
(nos solemos referir a situaciones “especiales”)
22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 48

Definición de ACCESIBILIDAD WEB
 “El poder de la Web reside en su universalidad. El
acceso por cualquiera independientemente de sus
discapacidades es un aspecto esencial”
(Tim Berners-Lee, uno de los padres de la Web)
 “Hablar de Accesibilidad Web es hablar del acceso de
todos a la Web, independientemente del tipo de
hardware, software, infraestructura de
red, idioma, cultura, localización geográfica y
capacidades de los usuarios.”
(W3C, oficina española)
 Que el mayor número de usuarios acceda a la Web
 NO existe la “accesibilidad absoluta”
22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 49

MITO: accesibilidad web es “para ciegos”
FALSO.
 Es cierto que los criterios de accesibilidad ayudan a
personas con deficiencias físicas (visuales, auditivas,
motrices), cognitivas, de lenguaje, …
Y TAMBIÉN…
 Usuarios con discapacidades temporales
(enfermedades, convalecencias)
 Usuarios de edad avanzada
 Dispositivos menos (?) habituales: móviles, SmartTV;
versiones antiguas SO/navegador; conexiones lentas
 Entornos especiales (kioskos públicos; entornos
ruidosos, fábricas, etc.)
22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 51

Beneficios de accesibilidad (obvios)
 Maximizar los posibles usuarios/clientes
 Seguir estándares facilita el desarrollo y mantenimiento
 Por imagen pública
…
Web Accessibility Initiative (WAI) http://www.w3.org/WAI/
22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 52

Accesibilidad: más beneficios
o y además…
 Mejora el posicionamiento en buscadores (SEO)
o textos alternativos; identificar idioma;
documentos bien estructurados; …
 Por normativa legal
o Los sitios web de administraciones
públicas (o con financiación pública;
o “de especial interés”) deben cumplir
un nivel mínimo de accesibilidad
High Accessibility Is Effective Search Engine Optimization http://www.alistapart.com/articles/accessibilityseo
Referencia sobre legislación española relacionada con la accesibilidad web http://olgacarreras.blogspot.com/2005/01/referencia-
sobre-legislacin-espaola.html
22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 53

PROBLEMAS DE ACCESIBILIDAD.
CÓMO SER ACCESIBLE
22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 54

PROBLEMAS habituales de accesibilidad (1)
Personas con problemas visuales
(o dispositivos como SmartTV, móviles, etc.)
 Sólo “ven” texto de modo secuencial
(usan lectores de pantalla/navegadores por voz)
 Necesitan textos grandes
 No distinguen bien los colores
Cuidado con:
o Imágenes sin descripción textual
o Tablas y marcos (frames) mal etiquetados
o Colores de bajo contraste
o Texto no escalable
o Ventanas emergentes (pop-up)
o No funcionan con teclado
22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 55

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 concentrarse
 Problemas de memoria
Cuidado con:
o Documentos con estructura mal definida
o Demasiada información en una página
o Lenguaje innecesariamente complejo
o Falta de imágenes para clarificar el texto
o Animaciones y elementos decorativos superfluos
22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 56

Normativa sobre extranjeros
22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 57

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:
o Audio/vídeo sin descripciones textuales
o Frases complejas o demasiado largas
22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 58

Subtítulos
22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 59

PROBLEMAS habituales de accesibilidad (4)
Personas con discapacidades motoras
(o no disponen de ratón)
 Tienen que usar el teclado u otros dispositivos
(reconocimiento de voz)
Cuidado con:
o Páginas que no funcionan con teclado
22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 60

MITO: para ser accesible basta con tener una
versión “sólo texto”
FALSO.
 Sólo para determinados usuarios
 Suponen una discriminación (“entrar por la puerta
trasera”)
 Problemas por contenidos duplicados:
o mantenimiento
o indexación en buscadores
 Se descuida la accesibilidad de la versión “normal”
 ¿Cómo llego a la versión accesible?
MEJOR: si es posible, una única versión que cumpla los
estándares de accesibilidad
22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 61

Tiene “versión sólo texto”, pero…
22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 62

… sin imágenes…
¿Cómo accedo
a la versión
“sólo texto”?
22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 63

¿CÓMO consigo que mi web sea
ACCESIBLE?
 Conociendo y cumpliendo los estándares
o De los lenguajes utilizados (HTML; CSS; etc.)
o Específicos de accesibilidad
 Testeando
o Diferentes entornos (navegadores, sistemas operativos, etc.)
o Con usuarios reales
22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 64

¿Qué ESTÁNDARES? (1)
 Lenguajes/técnicas utilizados:
o HTML válido
o CSS válido
o JavaScript “no obstructivo”
o Etc.
 IMPORTANTE: separar contenido vs. aspecto
o El mismo contenido para todos los usuarios
o Aspecto en función de las condiciones particulares
 IMPORTANTE: compatibilidad multinavegador
22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 65

Con el mismo contenido HTML…
22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 66

¿Qué ESTÁNDARES? (2)
Recomendaciones y normativas específicas sobre
accesibilidad web:
 Section 508 (USA)
 WAI (Web Accessibility Initiative)
o Internacionales, W3C
o Sugeridas por la Comisión Europea
 UNE 139803 “Requisitos de accesibilidad para
contenidos Web” (España)
o Basada en WAI
o Obligatoria por Ley para sitios web de Administraciones Públicas
22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 67

WAI (Web Accessibility Initiative)
 Forma parte del W3C (World Wide Web Consortium)
 Recomendaciones y directrices sobre:
o Contenido web (WCAG)
 Contenidos web accesibles
 Referencia de normas UNE
o Herramientas de autor (ATAG)
 Herramientas de creación accesibles y
 que generen contenidos accesibles
o Agentes usuario (navegadores) (UAAG)
 Navegadores accesibles
o Rich Applications (WAI-ARIA)
 Para aplicaciones RIA 2.0
22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 68

WCAG (Web Content Accessibility Guidelines)
 Cómo crear contenidos web accesibles. Versión 2.0
 4 principios generales del contenido web:
o Perceptible
o Operable
o Inteligible
o Robusto
Cada principio incluye directrices (guidelines)
Cada guideline incluye criterios de éxito con prioridad:
 A = Debe satisfacerse; requerimientos básicos
 AA = Debería satisfacerse; eliminar barreras significativas
 AAA = Puede satisfacerse; acceso mejorado
 Además: técnicas, ejemplos, enlaces, etc.
22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 69

WCAG: ejemplo guideline
22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 70

Texto alternativo
¡También por SEO!
22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 71

WCAG: niveles de cumplimiento A, AA y AAA
 3 niveles de cumplimiento de las guidelines WCAG por
parte de páginas o sitios web:
 Conformidad nivel “A”
o Cumple todos los criterios A (“deben”)
 Conformidad nivel “AA”
o Cumple todos los criterios A y AA (“deberían”)
 Conformidad nivel “AAA”
o Cumple todos los criterios A, AA y AAA (“pueden”)
 Las declaraciones de conformidad (“los sellos”) se
incluyen por decisión propia (W3C NO las verifica)
 Habitualmente se intenta alcanzar el nivel “AA”
22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 74

EVALUACIONES DE ACCESIBILIDAD
22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 75

Evaluaciones de accesibilidad: manual
 Leyendo el contenido:
o Lenguaje sencillo
o Abreviaturas, idiomas, …
o ¿Se entiende?
 Comprobar navegadores gráficos
o Firefox, Internet Explorer, Opera, Safari, …
o Diferentes plataformas, versiones y sistemas operativos
o Diferentes configuraciones:
 Desactivando imágenes, CSS, JavaScript, sonido, etc.
 Diferentes resoluciones de pantalla, tamaños de texto, combinaciones
de colores o B/N, etc.
 Usar navegadores sólo texto; lectores de pantalla
 Usar dispositivos alternativos (sólo con teclado)
22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 76

Evaluaciones de accesibilidad: herramientas
 Online y offline
 Para comprobar sintaxis de HTML, CSS, etc.
o W3C (HTML Validation Service; CSS Validation Service; etc.)
W3C Unicorn
o Otras herramientas (HTML Tidy; Dreamweaver; etc.)
 Para validación de accesibilidad
o WebXACT/Bobby; Cynthia Says; TAW; eXaminator
TAW
o Comprueban si se cumplen determinados checkpoints de WCAG
o Sirven como herramienta de apoyo, pero NO son suficientes para
evaluar la accesibilidad
22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 77

MITO: los validadores automáticos indican si
una página es accesible o no
FALSO.
 Los validadores comprueban la sintaxis (HTML, CSS,
etc.)
 Los validadores comprueban algunos checkpoints
PERO…
 Muchos checkpoints son interpretables y necesitan
validación manual.
 Las herramientas automáticas pueden producir “falsos
negativos” y “falsos positivos”
Guidelines, checkpoints, validadores automáticos y sellos
son herramientas e indicadores, NO un objetivo
Lo importante: la accesibilidad real
22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 78

Pruebas accesibilidad con usuarios
 Similares a los tests de usabilidad:
o Observación de usuarios reales mientras se enfrentan al sitio web
 Proporcionan mucha información útil, pero son muy
complejos:
o Definir tareas representativas
o Existe gran cantidad de tipologías de discapacidad
22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 83

Retos de accesibilidad:
RIA (Rich Internet Applications)
 Conseguir interfaces “de escritorio” en la web
 Algunas aplicaciones:
o Google (Gmail; Google Maps); Flickr; YouTube; ...
 Tecnologías:
o AJAX; Flash; Java; DHTML; etc.
 Ya no son interfaces “insertados” en una página
web, sino que son la propia interfaz.
 WAI-ARIA (WAI Accessible Rich Internet Applications)
o Iniciativa de W3C en desarrollo
Mientras tanto…
o Estándares para conseguir degradación progresiva
o Proporcionar versión alternativa
22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 84

Gmail, con y sin JavaScript
22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 85

Más retos:
normativas y certificaciones
 En ESPAÑA, las webs de las Administraciones Públicas
deberán cumplir las prioridades 1 y 2 de la Norma UNE
139803:2004 (similares a WCAG “AA”)
o W3C no es un organismo “oficial” de estandarización
 AENOR certifica oficialmente esa accesibilidad
 Pero NO es imprescindible obtener esa certificación para
declarar que una página es accesible
22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 86

MITO: las páginas accesibles son feas
 “Para muestra, un botón”
 Las siguientes páginas tienen un alto nivel de
accesibilidad…
22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 87

http://www.inretirementservices.co.uk/
ACCESIBILIDAD WEB. 29-nov-2007, Madrid
22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 88

http://geekministry.com/old_geek/
ACCESIBILIDAD WEB. 29-nov-2007, Madrid
22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 89

http://snowdog.pl/
ACCESIBILIDAD WEB. 29-nov-2007, Madrid
22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 90

http://www.3point7designs.com/
ACCESIBILIDAD WEB. 29-nov-2007, Madrid
22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 91

¿Por qué es importante ACCESIBILIDAD?
 Permite que el mayor número posible de personas
acceda a los contenidos (no sólo discapacitados).
 Beneficia a todos los usuarios, haciéndoles más fácil el
acceso a las páginas (mejor usabilidad).
 Reduce costes de mantenimiento/desarrollo:
o Una única versión para todas las plataformas
o Es más fácil hacer cambios (contenido vs. presentación)
o Mayor “vida útil” de los contenidos
o Las técnicas se pueden aplicar a diferentes sitios
 Cumplir estándares mejora la visibilidad en Internet
(SEO) y la compatibilidad multinavegador.
 Para determinados sitios, cumplir con la Ley.
22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 92

EN CONCLUSIÓN …
22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 93

Usabilidad (y accesibilidad) son
“muy agradecidas”
 No requieren
grandes inversiones
 Habitualmente dan
resultados muy buenos
 Pueden significar
la diferencia entre:
o el éxito y el fracaso
o tú y tu competencia
http://www.zdnet.com/shuttleworth-open-source-desktops-need-a-facelift-2062046056/
22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 94

Consejo de mínimos (recordatorio)
 Contratar/formar personal especializado
 Integrar usabilidad en el proceso de desarrollo
Subconjunto (mínimo) de técnicas:
 Roles de usuarios; personas (“quién”)
 Casos de uso (“qué”)
 Prototipado de interfaces (“cómo”)
 Evaluación (heurística/pruebas con usuarios)
22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 95

¿Estás seguro de que tu producto
o sitio web no es así?
22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 96

USABILIDAD, UX Y ACCESIBILIDAD:
QUÉ SON Y POR QUÉ DEBERÍAN PREOCUPARME
Jordi Sánchez
http://jordisan.net
@jordisan