Ingeniería de la Usabilidad y de la Accesibilidad aplicada al diseño y desarrollo de sitios web

(1)

Jesús Lorés, Toni Granollers

Ingeniería de la Usabilidad y de la Accesibilidad aplicada al diseño y desarrollo de sitios web

Objetivos

• Aprender técnicas de ingeniería centradas en el usuario de desarrollo de sitios WEB

• Aprender conceptos de usabilidad en entorno WEB

• Aprender como desarrollar sitios WEB accesibles

• Aplicar métodos de evaluación

• Conocer los conceptos de diseño gráfico

• Aprender los aspectos prácticos a partir del

desarrollo de un sitio web

(2)

3-05-04 © GRIHO, 2004 3

Contenidos

• Introducción

• Situación de la disciplina IPO

• Usabilidad

• Accesibilidad

Interacción Persona-Ordenador (IPO)

Llamar por teléfono Hacer una fotocopia

Cocinar o calentar comida Una operación bancaria

(3)

3-05-04 © GRIHO, 2004 5

El futuro es que la tecnología

sea útil a las personas

Interacción Persona-Ordenador (IPO)

• Disciplina relacionada con el diseño, implementación y evaluación de sistemas informáticos interactivos para uso de seres humanos y con el estudio de los fenómenos mas

importantes con los que está relacionado

(4)

3-05-04 © GRIHO, 2004 7

Posición en el 2002

Conferencia inaugural Interacción 2003 Vigo

BSCH BBVA

primera caja de ahorros europea y la tercera institución

financiera en España

4.553 oficinas

20.697 empleados: media de edad superior a los 40 años.

Revisión usabilidad

Página de inicio anterior

Página de inicio nueva

(5)

3-05-04 © GRIHO, 2004 9

Incremento accesos

Incremento ≈100% Incremento ≈ 50%

Ver ejemplo de la compra de

billetes de RENFE

(6)

3-05-04 © GRIHO, 2004 11

Usabilidad ¿qué es?

• Definición coloquial: facilidad de uso, ya sea de una página web, una aplicación informática o cualquier otro sistema que interactúe con un usuario

• La medida en la que un producto se puede usar por determinados usuarios para conseguir objetivos

específicos con efectividad, eficiencia y satisfacción en un contexto de uso especificado

[ISO 9241-11]

CALIDAD

[ISO 9126-1]

Usabilidad ¿qué es?

• Efectividad: la precisión y la plenitud con que los usuarios alcanzan los objetivos especificados.

– A esta idea van asociadas la facilidad de aprendizaje (en la medida en que este sea lo más amplio y profundo posible), – la tasa de errores del sistema y

– la facilidad del sistema para ser recordado (que no se olviden las funcionalidades ni sus procedimientos).

• Eficiencia: los recursos empleados en relación con la precisión y plenitud con que los usuarios alcanzan los objetivos especificados.

• Satisfacción: ausencia de incomodidad y la actitud positiva en el uso del producto.

– Se trata, pues, de un factor subjetivo

(7)

3-05-04 © GRIHO, 2004 13

¿Por qué es importante la usabilidad para la web?

• La WEB se está convirtiendo en un elemento clave en el desarrollo de las empresas

• Las instituciones ofrecen información y servicios a través de la WEB

• La usabilidad es un factor estratégico fundamental para conseguir una máximo aprovechamiento de estos recursos

• Sitio web fácil = más visitas

• los usuarios

– van fácilmente de un sitio a otro

– solo tardan 1 ó 2 min. para conocer el funcionamiento – experimentan la usabilidad de un sitio antes que se

hayan comprometido a usarlo y, sobretodo, antes de que hayan pagado nada por ello

• Es tan fácil ir a cualquier otra parte, que la competencia de todo el mundo está a un solo

clic

[J. Nielsen 2000]

¿Por qué es importante la usabilidad para la web?

(8)

3-05-04 © GRIHO, 2004 15

Beneficios de la usabilidad

^(1/3)

• Desarrollo:

– Reducción de costes de producción (se optimizan los costes de diseño y rediseño de las aplicaciones)

– Reducción de mantenimiento y soporte (los sistemas que son fáciles de usar requieren menos entrenamiento, menos soporte y menos mantenimiento)

Cost-Justifying Usability

Randolph G. Bias , Deborah J. Mayhew , M.

Randolph

Another approach to Justifying the cost of usability.

Arnold M. Lund. ACM Interactions

http://www.useit.com/alertbox/980503.html

Beneficios de la usabilidad

^(2/3)

• Uso interno:

– Reducción de los costes de uso:

• Se ajustan mejor a las necesidades del usuario

• mejoran la productividad y la calidad de las acciones y las decisiones

• reducen el esfuerzo necesario para su uso y permiten a los usuarios manejar una variedad más amplia de tareas.

– Reducción de los costes de aprendizaje:

• un sistema usable se adapta mejor al modelo mental de sus usuarios

– Mejora la calidad de vida de los usuarios:

• reduce su estrés, incrementando la satisfacción y la productividad.

(9)

3-05-04 © GRIHO, 2004 17

Beneficios de la usabilidad

^(3/3)

• Ventas:

– Incremento: un producto mas usable permite un mejor marketing Æ facilita su comercialización

– Producto de mejor calidad Æ aplicaciones más competitivas.

– Menor soporte al cliente

Un estudio presentado por infoWorld el año 1999 que muestra que después de ser rediseñado, prestándose especial atención a la usabilidad, el sitio Web de IBM incrementó sus ventas en un 400%.

¿sistema accesible?

(10)

3-05-04 © GRIHO, 2004 19

Accesibilidad

• La accesibilidad es un derecho, no un privilegio

[W. Loughborough]

• El poder de la Web está en su

universalidad. Un aspecto esencial es el acceso para todo el mundo sin importar la discapacidad

[Tim Berners-Lee, W3C Director and inventor of the World Wide Web]

¿Por qué es importante la accesibilidad en la Web?

• La Web se está constituyendo en un recurso clave para:

– comercio y trabajo – educación – participación cívica

• Existen barreras en la Web para muchos tipos de discapacidades

• Millones de personas tienen discapacidades que afectan al acceso a la Web (del 10% al 20% de la población posee discapacidades en la mayoría de los países)

• La edad media de la población en muchos países está aumentando (problemas con: la visión, la audición, la destreza y la memoria)

Introducción W3C WAI WCAG

Herramientas de Validación Herramientas de Reparación

(11)

3-05-04 © GRIHO, 2004 21

¿Por qué es importante la accesibilidad en la Web?

• Los desarrolladores de contenidos deben tener en cuenta estas

consideraciones mientras diseñan las páginas.

– Hay muy diversas situaciones a tener en cuenta, cada diseño accesible elegido beneficia

generalmente a muchos grupos de personas con discapacidad, así como a la comunidad Web al completo.

Por ejemplo, usando hojas de estilo para controlar los estilos de fuente, y eliminando el elemento "FONT", los autores HTML tendrán mayor control sobre sus páginas, harán éstas más accesibles a personas de escasa visión y, compartiendo las páginas de estilo, a menudo acortarán los tiempos de carga de las páginas, para todos los usuarios.

Herramientas de Validación

Herramientas de Reparación

Diferentes tipos de barreras

• La Web presenta diferentes barreras para las diferentes tipos de discapacidades:

– Discapacidad Visual:

• gráficos sin etiquetar

• videos sin descripción

• tablas y frames pobremente marcados – Discapacidad Auditiva:

• ausencia de etiquetas en el audio – Discapacidad Física:

• falta de un teclado o de un simple switch que de soporte a los menús de comandos

– Discapacidad Cognitiva:

(12)

3-05-04 © GRIHO, 2004 23

ISO/TS 16071:

Ergonomics of human-system interaction

Guidance on accessibility for human-computer interfaces

• El diseño de sistemas interactivos accesibles

proporciona el incremento de la eficiencia, efectividad y satisfacción para aquellas personas que tienen distintas discapacidades o preferencias (relacionado con la usabilidad)

• Tener una discapacidad tiene que ser visto como un aspecto natural de la vida humana

• Características:

– Orientación genérica

– Requisitos de usuarios con diferentes discapacidades – Guidelines

• Colores

• Sonidos

• Errores y su notificación

• Documentación on-line y de ayuda

• Personalización

• Apariencia y rendimiento de las ventanas

• Teclados

• Generales

• Tecnologías de la rehabilitación

• s/w de control de punteros

• Fuentes

• Colores

1ra edición 1 febrero 2003

I Plan Nacional de Accesibilidad 2004-2012

• Marco estratégico de acciones para conseguir que los entornos, productos y servicios nuevos se realicen de forma accesible al máximo número de personas (Diseño para Todos) y que aquellos ya existentes se vayan adaptando convenientemente.

• Espíritu de la Ley: Por un nuevo paradigma, el Diseño para Todos, hacia la plena la igualdad de

oportunidades.

• Principios generales:

– Igualdad de oportunidades – Vida Independiente – Sostenibilidad – Participación

• Cinco Objetivos:

– …

– 5. Promover la accesibilidad Introducción

W3C WAI WCAG

(13)

3-05-04 © GRIHO, 2004 25

Otros motivos para diseñar de forma accesible

• LEY 34/2002, de 11 de julio, de servicios de la sociedad de la información y de comercio electrónico (LSSICE)

Publicada en el B.O.E. el 12 de julio. Entrando en vigor a los tres meses de su publicación (Es decir el 12 de octubre de 2002).

Sobre accesibilidad la ley dice, en sus disposiciones finales:

– Quinta. Accesibilidad para las personas con discapacidad y de edad avanzada a la información proporcionada por medios electrónicos.

• Uno. Las Administraciones Públicas adoptarán las medidas necesarias para que la información disponible en sus respectivas páginas de Internet pueda ser accesible a personas con discapacidad y de edad avanzada de acuerdo con los criterios de accesibilidad al contenido generalmente reconocidos antes del 31 de diciembre de 2005. Asimismo, podrán exigir que las páginas de Internet cuyo diseño o mantenimiento financien apliquen los criterios de accesibilidad antes mencionados.

• Dos. Igualmente, se promoverá la adopción de normas de accesibilidad por los prestadores de servicios y los fabricantes de equipos y software, para facilitar el acceso de las personas con discapacidad o de edad avanzada a los contenidos digitales.

Web Consortium (W3C)

• Surgió a mediados de los 90

• Objetivo: “Fomentar la evolución e interoperabilidad de la Web dando énfasis a la universalidad de la misma”

• Actividad oficial en el área de accesibilidad formando la Web

http://www.w3c.org

(14)

3-05-04 © GRIHO, 2004 27

Web Accessibility Initiative (WAI)

^(1/7)

• La WAI en asociación con organizaciones de todo el mundo promueve la accesibilidad en la web a través de 5 actividades

complementarias:

• Tecnología

• Normas (Guidelines)

• Herramientas (Validación, Reparación)

• Educación y Formación

• Investigación y Desarrollo (I+D) Introducción

W3C WAI WCAG

http://www.w3c.org/WAI

Web Accessibility Initiative (WAI)

^(2/7)

• Desarrollo de normas para la accesibilidad

– Web Content Accessibility Guidelines (WCAG)

– Authoring Tool Accessibility Guidelines (ATAG)

– User Agent Accessibility Guidelines (UAAG)

(15)

3-05-04 © GRIHO, 2004 29

Web Accessibility Initiative (WAI)

^(3/7)

• Web Content Accessibility Guidelines (WCAG)

– Recomendaciones para que las páginas web sean accesibles para todos con la ayuda de la tecnología existente

– Traducciones al castellano y al catalán en la web de SIDAR (http://www.sidar.org)

– Versión 1.0, el 5 de Mayo de 1999 – 14 normas

– Puntos de verificación (3 niveles de prioridad) – 3 niveles de conformidad (“A”, “Double-A”, “Triple-

A”)

Web Accessibility Initiative (WAI)

^(6/7)

• Cada punto de verificación tiene asignado uno de los tres niveles de prioridad.

• Prioridad 1: Un desarrollador de contenidos de páginas Web tiene que satisfacer este punto de verificación.

– De otra forma, uno o más grupos de usuarios encontrarán imposible acceder a la información del documento.

– Satisfacer este punto de verificación es un requerimiento básico para que algunos grupos puedan usar estos documentos Web.

• Prioridad 2

(16)

3-05-04 © GRIHO, 2004 31

Web Accessibility Initiative (WAI)

^(6/7)

• Prioridad 1

• Prioridad 2: Un desarrollador de contenidos de páginas Web debe satisfacer este punto de verificación.

– De otra forma, uno o más grupos encontrarán dificultades en el acceso a la información del documento.

– Satisfaciendo este punto de verificación eliminará importantes barreras de acceso a los documentos Web.

• Prioridad 3

Web Accessibility Initiative (WAI)

^(6/7)

• Prioridad 1

• Prioridad 2

• Prioridad 3: Un desarrollador de contenidos de páginas Web puede satisfacer este punto de verificación.

– De otra forma, uno o más grupos de usuarios encontrarán alguna dificultad para acceder a la información del documento.

– Satisfaciendo este punto de verificación mejorará la accesibilidad de los documentos Web.

(17)

3-05-04 © GRIHO, 2004 33

Web Accessibility Initiative (WAI)

^(7/7)

• La especificación tiene tres "niveles de adecuación" para facilitar la referencia por otras organizaciones.

• Adecuación de nivel "A" (A): se satisfacen todos los puntos de verificación de prioridad 1;

• Adecuación de nivel “Doble A" (AA): se satisfacen todos los puntos de verificación de prioridad 1 y 2;

• Adecuación de nivel “Triple A" (A): se

satisfacen todos los puntos de verificación de prioridad 1, 2 y 3.

Web Accessibility Initiative (WAI)

^(7/7)

• Los niveles de adecuación están deletreados en el texto para que puedan ser comprendidos cuando se transformen en sonido.

• La afirmación de adecuación a este documento debe usarse una de las dos formas siguientes:

• Forma 1: especificar

– Título de las pautas: "Pautas de Accesibilidad al Contenido en la Web 1.0".

– La URL: http://www.W3.org/TR/1999/WAI-WEBCONTENT- 19990505.

– El nivel de adecuación satisfecho: "A", "doble A" o "triple A".

– El alcance cubierto por la afirmación (Ej. página, sitio o parte definida de un sitio).

• Forma 2: Incluir, en cada página para la que se pida

conformidad, uno de los tres iconos proporcionados por W3C y Introducción

W3C WAI WCAG

• Ejemplo para la forma 1:

– "Esta página se adapta a las "Pautas de Contenido Accesible en Web 1.0" del W3C, disponible en

http://www.w3.org/TR/1999/WAI-WEBCONTENT-19990505, nivel Doble A".

• Para la Forma 2:

(18)

Web Content Accessibility Guidelines

^(WCAG)

• Pauta 1- Proporcione alternativas para los contenidos visuales y auditivos.

– Texto equivalente (alt, longdesc) imagen, botón, applet,...

http://lynx.browser.org/

Web Content Accessibility Guidelines

^(WCAG)

• Pauta 2- No se base sólo en el color.

– Texto equivalente (alt, longdesc) imagen, botón, applet,...

Ejemplos:

(1) La respuesta correcta es la que está en rojo

• Respuesta 1

• Respuesta 2

(19)

Web Content Accessibility Guidelines

^(WCAG)

• Pauta 3- Utilice marcadores y hojas de estilo y hágalo apropiadamente.

– Utilizar cabeceras (<Hx>) para estructurar el documento

– CSS (Cascading Style Sheets)

(20)

(21)

Web Content Accessibility Guidelines

^(WCAG)

• Pauta 4- Identifique el lenguaje natural usado.

– Importante para los sintetizadores de voz y los dispositivos braille

Web Content Accessibility Guidelines

^(WCAG)

• Las herramientas de validación se dividen en dos grupos:

– Generales:

Analizan varios aspectos de la accesibilidad (en general basándose en las normas de accesibilidad existente ).

– Centradas: Analizan uno o un numero limitado de aspectos de la accesibilidad (por ejemplo el código HTML de una

(22)

Web Content Accessibility Guidelines

^(WCAG)

GENERALES

• AccessEnable: Herramienta de validación y corrección online.

Desarrollada por RetroAccess.

http://www.retroaccess.com/

• Bobby: Desarrollada por CAST, permite analizar sitios web. Versión tanto online como para PC.

http://www.tawdis.net/

• TAW: Desarrollada por el fondo

Formación Asturias y por el SIDAR,

evalúa una página basándose en las

pautas WCAG.

http://www.sidar.org/rec.htm#taw

(23)

(24)

Web Content Accessibility Guidelines

^(WCAG)

CENTRADAS

• W3C CSS Validator: Valida el código CSS usado en los documentos.

http://jigsaw.w3.org/css-validator/

• W3C HTML Validator Service:Valida el código HTML basándose en las

recomendaciones W3C y el estándar HTML.

http://validator.w3.org/

• WDG HTML Validator:.Está basado en el mismo motor que el analizador del W3C, puede usarse tanto online como localmente

http://www.htmlhelp.com/tools/validator/

Web Content Accessibility Guidelines

^(WCAG)

• A-Prompt: Desarrollado por la Universidad de Toronto, identifica los problemas de accesibilidad y ayuda a corregirlos.

• Tidy: Repara errores de HTML.

• AccRepair: Verifica y corrige la

accesibilidad de los sitios web

basándose en las WCAG

(25)

Situación

Grup de Recerca Interacció Home-Ordinador

www.griho.net

Situación

Asociación Interacción Persona-Ordenador

www.aipo.es

(26)

Situación

www.aipo.es/i2004

Situación

(27)

Situación

• Objetivo: reforzar la practica profesional de la Arquitectura de Información y Usabilidad

- intercambio de conocimiento y experiencias

- cooperación y ayuda mutua en el desarrollo del trabajo

- el debate interno entre profesionales de la AIU

- la difusión de oportunidades profesionales

- el incentivo a la producción y publicación de conocimiento

• Orientado a todas las disciplinas involucradas, de una u otra forma, en el diseño de interfaces: programadores, diseñadores, jefes de proyecto...

http://www.cadius.org

Situación

(28)

Situación

Designing the User Interface,

(29)

Situación

(30)

Situación

1 junio 2003