usabilidad, ux y accesibilidad: qué son y por qué deberían preocuparme

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

Upload: jordisan-ramsys

Post on 21-May-2015

4.140 views

Category:

Documents


4 download

DESCRIPTION

Presentación realizada en PalmaActiva el 21-marzo-2013. http://es.amiando.com/MARJORDI.html

TRANSCRIPT

Page 1: Usabilidad, UX y accesibilidad: qué son y por qué deberían preocuparme

USABILIDAD, UX Y ACCESIBILIDAD:QUÉ SON Y POR QUÉ DEBERÍAN

PREOCUPARME

Jordi Sánchezhttp://jordisan.net

@jordisan

Page 2: Usabilidad, UX y accesibilidad: qué son y por qué deberían preocuparme

12/04/2023

usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 2

Usabilidad, UX y accesibilidad: qué son y por qué deberían preocuparmePresentaciónAlgunas definiciones

¿Es rentable invertir en usabilidad?Casos concretosCómo se consigue

Accesibilidad (web) y sus beneficiosProblemas de accesibilidad. Cómo ser accesibles.Evaluaciones de accesibilidad.

En conclusión…

Page 3: Usabilidad, UX y accesibilidad: qué son y por qué deberían preocuparme

12/04/2023

usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 3

PRESENTACIÓN

Page 4: Usabilidad, UX y accesibilidad: qué son y por qué deberían preocuparme

12/04/2023

usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 4

Jordi Sánchez

Ingeniero en InformáticaMáster en Interacción Persona-Ordenador

9 años en entidad financiera5 años en proyectos de usabilidad/accesibilidadFreelance

Proyectos personales:o UCDmanager (Drupal) http://ucdmanager.neto Apps Windows 8o …

http://jordisan.net @jordisan http://linkedin.com/in/jordisan

Page 5: Usabilidad, UX y accesibilidad: qué son y por qué deberían preocuparme

12/04/2023

usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 5

ALGUNAS DEFINICIONES

Page 6: Usabilidad, UX y accesibilidad: qué son y por qué deberían preocuparme

12/04/2023

usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 6

Usabilidad, palabra “de moda”

Page 7: Usabilidad, UX y accesibilidad: qué son y por qué deberían preocuparme

12/04/2023

usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 8

Todos sabemos sufrimos lo que es

Page 8: Usabilidad, UX y accesibilidad: qué son y por qué deberían preocuparme

12/04/2023

usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 9

¿O es como la música de cámara?

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

Page 9: Usabilidad, UX y accesibilidad: qué son y por qué deberían preocuparme

12/04/2023

usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 10

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

Page 10: Usabilidad, UX y accesibilidad: qué son y por qué deberían preocuparme

12/04/2023

usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 11

Básicamente…

Productos fáciles de usar“No me hagas pensar”

Don’t make me think: http://www.sensible.com/buythebook.html

Page 11: Usabilidad, UX y accesibilidad: qué son y por qué deberían preocuparme

12/04/2023

usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 12

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 => NOo Si por “usabilidad” solo incluimos actividades de evaluación, y no

de análisis o diseño => 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

Page 12: Usabilidad, UX y accesibilidad: qué son y por qué deberían preocuparme

12/04/2023

usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 13

¿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?)

Page 13: Usabilidad, UX y accesibilidad: qué son y por qué deberían preocuparme

12/04/2023

usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 14

En resumen…

UsabilidadQue sea fácil 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”)

Page 14: Usabilidad, UX y accesibilidad: qué son y por qué deberían preocuparme

12/04/2023

usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 15

¿ES RENTABLE INVERTIR EN USABILIDAD?

Page 15: Usabilidad, UX y accesibilidad: qué son y por qué deberían preocuparme

12/04/2023

usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 16

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).

Page 16: Usabilidad, UX y accesibilidad: qué son y por qué deberían preocuparme

12/04/2023

usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 17

Todo eso está muy bien, pero…

Page 17: Usabilidad, UX y accesibilidad: qué son y por qué deberían preocuparme

12/04/2023

usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 18

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

Page 18: Usabilidad, UX y accesibilidad: qué son y por qué deberían preocuparme

12/04/2023

usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 19

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

Page 19: Usabilidad, UX y accesibilidad: qué son y por qué deberían preocuparme

12/04/2023

usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 20

¿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

Page 20: Usabilidad, UX y accesibilidad: qué son y por qué deberían preocuparme

12/04/2023

usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 21

CASOS CONCRETOS

Page 21: Usabilidad, UX y accesibilidad: qué son y por qué deberían preocuparme

12/04/2023

usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 22

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):

"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 ponían el nombre de su banco…

… y la dirección de su banco

Page 22: Usabilidad, UX y accesibilidad: qué son y por qué deberían preocuparme

12/04/2023

usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 23

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…

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

Email Address

Password

Login Register

Forgot Password

“¿Por qué tengo que registrarme? Sólo quiero comprar”

“No recuerdo si ya me registré antes”

“¿Qué dirección de correo electrónico puse?”

Page 23: Usabilidad, UX y accesibilidad: qué son y por qué deberían preocuparme

12/04/2023

usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 24

El botón de los 300 millones de dólares (y II)

o 45% de los clientes se habían registrado múltiples veceso Hasta 160.000 peticiones de contraseña al día

De ellos, el 75% no finalizaban su compra después.

Solución:

“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

Page 24: Usabilidad, UX y accesibilidad: qué son y por qué deberían preocuparme

12/04/2023

usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 26

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

Page 25: Usabilidad, UX y accesibilidad: qué son y por qué deberían preocuparme

12/04/2023

usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 27

¿CÓMO SE CONSIGUE?

Page 26: Usabilidad, UX y accesibilidad: qué son y por qué deberían preocuparme

12/04/2023

usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 28

Así, no

Page 27: Usabilidad, UX y accesibilidad: qué son y por qué deberían preocuparme

12/04/2023

usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 29

Una noticia buena y una mala

La mala: no hay trucos mágicos

La buena: no hay trucos mágicos

Page 28: Usabilidad, UX y accesibilidad: qué son y por qué deberían preocuparme

12/04/2023

usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 30

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

Page 29: Usabilidad, UX y accesibilidad: qué son y por qué deberían preocuparme

12/04/2023

usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 31

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/

Page 30: Usabilidad, UX y accesibilidad: qué son y por qué deberían preocuparme

12/04/2023

usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 32

Heurísticas 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/

Page 31: Usabilidad, UX y accesibilidad: qué son y por qué deberían preocuparme

12/04/2023

usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 33

Heurísticas 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.

Page 32: Usabilidad, UX y accesibilidad: qué son y por qué deberían preocuparme

12/04/2023

usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 34

Ejemplos de heurísticas aplicadas (1)

Page 33: Usabilidad, UX y accesibilidad: qué son y por qué deberían preocuparme

12/04/2023

usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 35

Ejemplos de heurísticas aplicadas (2)

Page 34: Usabilidad, UX y accesibilidad: qué son y por qué deberían preocuparme

12/04/2023

usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 36

Test de usabilidad (“thinking aloud”):involucrando a los usuariosUna 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 haciendoo 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

Page 35: Usabilidad, UX y accesibilidad: qué son y por qué deberían preocuparme

12/04/2023

usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 37

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

Page 36: Usabilidad, UX y accesibilidad: qué son y por qué deberían preocuparme

12/04/2023

usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 38

“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 usuarioso Conseguir que haya observadores:

desarrolladores, jefes, …o Decidir con observadores

qué problemas son los prioritarios yqué cambios se van a hacerantes 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#

Page 37: Usabilidad, UX y accesibilidad: qué son y por qué deberían preocuparme

12/04/2023

usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 39

Evaluar está bien;pero si esperamos demasiado…

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

Page 38: Usabilidad, UX y accesibilidad: qué son y por qué deberían preocuparme

12/04/2023

usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 40

¿Qué queremos evitar?

No es lo que necesitoNo lo encuentroNo lo entiendoEn realidad …

Estáclaro

Usuario (o no)Analista

1. Requisitos 3. Entrega2. Desarrollo

Page 39: Usabilidad, UX y accesibilidad: qué son y por qué deberían preocuparme

12/04/2023

usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 41

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.htmEn busca del Diseño Centrado en el Usuario (DCU) http://www.nosolousabilidad.com/articulos/dcu.htm

Page 40: Usabilidad, UX y accesibilidad: qué son y por qué deberían preocuparme

12/04/2023

usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 42

Un paso más allá: DCU

Diseño Centrado en el Usuarioo 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

Page 41: Usabilidad, UX y accesibilidad: qué son y por qué deberían preocuparme

12/04/2023

usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 43

Ejemplo: prototipado + test usuario

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

Page 42: Usabilidad, UX y accesibilidad: qué son y por qué deberían preocuparme

12/04/2023

usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 44

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; …

Page 43: Usabilidad, UX y accesibilidad: qué son y por qué deberían preocuparme

12/04/2023

usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 45

Usabilidad NO-WEB (2)

Algunas diferencias en aplicaciones desktop o móviles:o Entorno hardware/software más controladoo Estándares específicos del sistema (Apple; Microsoft; Google)o Menos libertad de navegacióno Perfiles de usuario normalmente más delimitadoso 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.aspxApple Human Interface Guidelines http://developer.apple.com/documentation/userexperience/Conceptual/AppleHIGuidelines/

Page 44: Usabilidad, UX y accesibilidad: qué son y por qué deberían preocuparme

12/04/2023

usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 46

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 especializadoo 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

Page 45: Usabilidad, UX y accesibilidad: qué son y por qué deberían preocuparme

12/04/2023

usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 47

ACCESIBILIDAD (WEB) Y SUS BENEFICIOS

Page 46: Usabilidad, UX y accesibilidad: qué son y por qué deberían preocuparme

12/04/2023

usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 48

Recordemos…

UsabilidadQue sea fácil 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”)

Page 47: Usabilidad, UX y accesibilidad: qué son y por qué deberían preocuparme

12/04/2023

usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 49

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 WebNO existe la “accesibilidad absoluta”

Page 48: Usabilidad, UX y accesibilidad: qué son y por qué deberían preocuparme

12/04/2023

usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 51

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 avanzadaDispositivos menos (?) habituales: móviles, SmartTV;

versiones antiguas SO/navegador; conexiones lentasEntornos especiales (kioskos públicos; entornos

ruidosos, fábricas, etc.)

Page 49: Usabilidad, UX y accesibilidad: qué son y por qué deberían preocuparme

12/04/2023

usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 52

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/

Page 50: Usabilidad, UX y accesibilidad: qué son y por qué deberían preocuparme

12/04/2023

usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 53

Accesibilidad: más beneficios

o y además…

Mejora el posicionamiento en buscadores (SEO)o textos alternativos; identificar idioma;

documentos bien estructurados; …

Por normativa legalo Los sitios web de administraciones

públicas (o con financiación pública;o “de especial interés”) deben cumplirun nivel mínimo de accesibilidad

High Accessibility Is Effective Search Engine Optimization http://www.alistapart.com/articles/accessibilityseoReferencia sobre legislación española relacionada con la accesibilidad web

http://olgacarreras.blogspot.com/2005/01/referencia-sobre-legislacin-espaola.html

Page 51: Usabilidad, UX y accesibilidad: qué son y por qué deberían preocuparme

12/04/2023

usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 54

PROBLEMAS DE ACCESIBILIDAD.CÓMO SER ACCESIBLE

Page 52: Usabilidad, UX y accesibilidad: qué son y por qué deberían preocuparme

12/04/2023

usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 55

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 grandesNo distinguen bien los colores

Cuidado con:o Imágenes sin descripción textualo Tablas y marcos (frames) mal etiquetadoso Colores de bajo contrasteo Texto no escalableo Ventanas emergentes (pop-up)o No funcionan con teclado

Page 53: Usabilidad, UX y accesibilidad: qué son y por qué deberían preocuparme

12/04/2023

usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 56

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:o Documentos con estructura mal definidao Demasiada información en una páginao Lenguaje innecesariamente complejoo Falta de imágenes para clarificar el textoo Animaciones y elementos decorativos superfluos

Page 54: Usabilidad, UX y accesibilidad: qué son y por qué deberían preocuparme

12/04/2023

usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 57

Normativa sobre extranjeros

Page 55: Usabilidad, UX y accesibilidad: qué son y por qué deberían preocuparme

12/04/2023

usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 58

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 textualeso Frases complejas o demasiado largas

Page 56: Usabilidad, UX y accesibilidad: qué son y por qué deberían preocuparme

12/04/2023

usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 59

Subtítulos

Page 57: Usabilidad, UX y accesibilidad: qué son y por qué deberían preocuparme

12/04/2023

usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 60

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

Page 58: Usabilidad, UX y accesibilidad: qué son y por qué deberían preocuparme

12/04/2023

usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 61

MITO: para ser accesible basta con tener una versión “sólo texto”

FALSO.Sólo para determinados usuariosSuponen una discriminación (“entrar por la puerta

trasera”)Problemas por contenidos duplicados:

o mantenimientoo 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

Page 59: Usabilidad, UX y accesibilidad: qué son y por qué deberían preocuparme

12/04/2023

usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 62

Tiene “versión sólo texto”, pero…

Page 60: Usabilidad, UX y accesibilidad: qué son y por qué deberían preocuparme

12/04/2023

usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 63

… sin imágenes…

¿Cómo accedoa la versión“sólo texto”?

Page 61: Usabilidad, UX y accesibilidad: qué son y por qué deberían preocuparme

12/04/2023

usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 64

¿CÓMO consigo que mi web sea ACCESIBLE?

Conociendo y cumpliendo los estándareso De los lenguajes utilizados (HTML; CSS; etc.)o Específicos de accesibilidad

Testeandoo Diferentes entornos (navegadores, sistemas operativos, etc.)o Con usuarios reales

Page 62: Usabilidad, UX y accesibilidad: qué son y por qué deberían preocuparme

12/04/2023

usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 65

¿Qué ESTÁNDARES? (1)

Lenguajes/técnicas utilizados:o HTML válidoo CSS válidoo JavaScript “no obstructivo”o Etc.

IMPORTANTE: separar contenido vs. aspectoo El mismo contenido para todos los usuarioso Aspecto en función de las condiciones particulares

IMPORTANTE: compatibilidad multinavegador

Page 63: Usabilidad, UX y accesibilidad: qué son y por qué deberían preocuparme

12/04/2023

usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 66

Con el mismo contenido HTML…

Page 64: Usabilidad, UX y accesibilidad: qué son y por qué deberían preocuparme

12/04/2023

usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 67

¿Qué ESTÁNDARES? (2)

Recomendaciones y normativas específicas sobre accesibilidad web:

Section 508 (USA)

WAI (Web Accessibility Initiative)o Internacionales, W3Co Sugeridas por la Comisión Europea

UNE 139803 “Requisitos de accesibilidad para contenidos Web” (España)o Basada en WAIo Obligatoria por Ley para sitios web de Administraciones Públicas

Page 65: Usabilidad, UX y accesibilidad: qué son y por qué deberían preocuparme

12/04/2023

usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 68

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

Page 66: Usabilidad, UX y accesibilidad: qué son y por qué deberían preocuparme

12/04/2023

usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 69

WCAG (Web Content Accessibility Guidelines)

Cómo crear contenidos web accesibles. Versión 2.04 principios generales del contenido web:

o Perceptibleo Operableo Inteligibleo 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.

Page 67: Usabilidad, UX y accesibilidad: qué son y por qué deberían preocuparme

12/04/2023

usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 70

WCAG: ejemplo guideline

Page 68: Usabilidad, UX y accesibilidad: qué son y por qué deberían preocuparme

12/04/2023

usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 71

Texto alternativo

¡También por SEO!

Page 69: Usabilidad, UX y accesibilidad: qué son y por qué deberían preocuparme

12/04/2023

usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 74

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”

Page 70: Usabilidad, UX y accesibilidad: qué son y por qué deberían preocuparme

12/04/2023

usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 75

EVALUACIONES DE ACCESIBILIDAD

Page 71: Usabilidad, UX y accesibilidad: qué son y por qué deberían preocuparme

12/04/2023

usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 76

Evaluaciones de accesibilidad: manual

Leyendo el contenido:o Lenguaje sencilloo Abreviaturas, idiomas, …o ¿Se entiende?

Comprobar navegadores gráficoso Firefox, Internet Explorer, Opera, Safari, …o Diferentes plataformas, versiones y sistemas operativoso 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 pantallaUsar dispositivos alternativos (sólo con teclado)

Page 72: Usabilidad, UX y accesibilidad: qué son y por qué deberían preocuparme

12/04/2023

usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 77

Evaluaciones de accesibilidad: herramientas

Online y offline

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

W3C Unicorno Otras herramientas (HTML Tidy; Dreamweaver; etc.)

Para validación de accesibilidado WebXACT/Bobby; Cynthia Says; TAW; eXaminator

TAWo Comprueban si se cumplen determinados checkpoints de WCAGo Sirven como herramienta de apoyo, pero NO son suficientes para

evaluar la accesibilidad

Page 73: Usabilidad, UX y accesibilidad: qué son y por qué deberían preocuparme

12/04/2023

usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 78

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

Page 74: Usabilidad, UX y accesibilidad: qué son y por qué deberían preocuparme

12/04/2023

usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 83

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 representativaso Existe gran cantidad de tipologías de discapacidad

Page 75: Usabilidad, UX y accesibilidad: qué son y por qué deberían preocuparme

12/04/2023

usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 84

Retos de accesibilidad:RIA (Rich Internet Applications)Conseguir interfaces “de escritorio” en la webAlgunas 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 progresivao Proporcionar versión alternativa

Page 76: Usabilidad, UX y accesibilidad: qué son y por qué deberían preocuparme

12/04/2023

usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 85

Gmail, con y sin JavaScript

Page 77: Usabilidad, UX y accesibilidad: qué son y por qué deberían preocuparme

12/04/2023

usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 86

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

Page 78: Usabilidad, UX y accesibilidad: qué son y por qué deberían preocuparme

12/04/2023

usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 87

MITO: las páginas accesibles son feas

“Para muestra, un botón”

Las siguientes páginas tienen un alto nivel de accesibilidad…

Page 79: Usabilidad, UX y accesibilidad: qué son y por qué deberían preocuparme

12/04/2023

usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 88

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

ACCESIBILIDAD WEB. 29-nov-2007, Madrid

Page 80: Usabilidad, UX y accesibilidad: qué son y por qué deberían preocuparme

12/04/2023

usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 89

http://geekministry.com/old_geek/

ACCESIBILIDAD WEB. 29-nov-2007, Madrid

Page 81: Usabilidad, UX y accesibilidad: qué son y por qué deberían preocuparme

12/04/2023

usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 90

http://snowdog.pl/

ACCESIBILIDAD WEB. 29-nov-2007, Madrid

Page 82: Usabilidad, UX y accesibilidad: qué son y por qué deberían preocuparme

12/04/2023

usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 91

http://www.3point7designs.com/

ACCESIBILIDAD WEB. 29-nov-2007, Madrid

Page 83: Usabilidad, UX y accesibilidad: qué son y por qué deberían preocuparme

12/04/2023

usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 92

¿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 plataformaso Es más fácil hacer cambios (contenido vs. presentación)o Mayor “vida útil” de los contenidoso 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.

Page 84: Usabilidad, UX y accesibilidad: qué son y por qué deberían preocuparme

12/04/2023

usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 93

EN CONCLUSIÓN …

Page 85: Usabilidad, UX y accesibilidad: qué son y por qué deberían preocuparme

12/04/2023

usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 94

Usabilidad (y accesibilidad) son“muy agradecidas”

No requierengrandes inversiones

Habitualmente danresultados muy buenos

Pueden significarla diferencia entre:o el éxito y el fracasoo tú y tu competencia

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

Page 86: Usabilidad, UX y accesibilidad: qué son y por qué deberían preocuparme

12/04/2023

usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 95

Consejo de mínimos (recordatorio)

Contratar/formar personal especializado

Integrar usabilidad en el proceso de desarrolloSubconjunto (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)

Page 87: Usabilidad, UX y accesibilidad: qué son y por qué deberían preocuparme

12/04/2023

usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 96

¿Estás seguro de que tu productoo sitio web no es así?

Page 88: Usabilidad, UX y accesibilidad: qué son y por qué deberían preocuparme

USABILIDAD, UX Y ACCESIBILIDAD:QUÉ SON Y POR QUÉ DEBERÍAN

PREOCUPARME

Jordi Sánchezhttp://jordisan.net

@jordisanGRACIAS