Accesibilidad y Usabilidad Web Mayo 2011. 2 ¿Quiénes usan la web? Personas: Con computadoras de bajos recursos tecnológicos, que no poseen un mouse, parlantes.

Presentación del tema: "Accesibilidad y Usabilidad Web Mayo 2011. 2 ¿Quiénes usan la web? Personas: Con computadoras de bajos recursos tecnológicos, que no poseen un mouse, parlantes."— Transcripción de la presentación:

1 Accesibilidad y Usabilidad Web Mayo 2011

2 2 ¿Quiénes usan la web? Personas: Con computadoras de bajos recursos tecnológicos, que no poseen un mouse, parlantes o un teclado. Con dispositivos no convencionales como PDAs, Teléfonos móviles, webTV, etc. Ciegas o con dificultades visuales como baja visión Con problemas motrices o que han sufrido un accidente temporal. Con software muy moderno o muy antiguo (navegadores)

3 ¿Qué es la Accesibilidad Web? La posibilidad de que un producto o servicio web pueda ser accedido y usado por el mayor número posible de personas, indiferentemente de las limitaciones propias del individuo o de las derivadas del contexto de uso. – Reducción del costo y tiempo de mantenimiento – Reducción de carga del sitio – Mejora en la Usabilidad = Mayor satisfacción en los usuarios – Cumplimiento con los estándares web W3C – Preparado para tecnologías avanzadas – Visibilidad en todos los dispositivos Beneficio: Egoísta – ¿A caso creen que nunca tendrán algún problema visual, auditivo o físicos en algún momento? – ¿Creen que siempre tendrán todos los recursos esenciales de acceso? – ¿No les gustaría navegar la web desde su móvil sin problemas?

4 ¿Qué es la Usabilidad Web? Cuando nos referimos específicamente a un sitio Web o sistema usable, nos interesa que sea: – Amigable con el usuario – Fácil de usar – Fácil de aprender Principios: – Legibilidad; el color de los textos debe contrastar con el del fondo, y el tamaño de fuente debe ser adecuado. – Interfaz visible. Se deben evitar elementos invisibles de navegación que han de ser inferidos por los usuarios, como los menús desplegables o indicaciones ocultas. – Los usuarios no deben sufrir sobrecarga de información. Cuando un usuario visita un sitio Web y no sabe donde comenzar a leer, existe sobrecarga de información.

5 Usabilidad y accesibilidad: errores más comunes Cosas subrayadas que no son enlaces: Todo el mundo sabe que el texto que está subrayado o es de un color diferente, es probable que sea un enlace. La utilización de texto justificado: El texto justificado puede lucir limpio a la vista, pero puede generar algunos problemas de legibilidad real, especialmente para los usuarios disléxicos que pueden encontrarlo molesto para identificar palabras debido a la separación desigual de los párrafos justificados. Poner imágenes de bullets justificados a la derecha:

6 Usabilidad y accesibilidad: errores más comunes Fondos con degradado a tamaño fijo: La velocidad de carga de una página depende del número de elementos visuales empleados.

7 Usabilidad y accesibilidad: errores más comunes Brindar contenidos accesibles no solo para los usuarios sino para los navegadores. Diseños – Amigable con el usuario – Fácil de usar

8 Mejorar la velocidad de carga de las paginas de ww.uv.mx/

9 Reutilización y estandarización visual Reutilizar, estilos, diseños y colores ayudan a estandarizar la imagen de las páginas. Planear los próximos diseños orientados a Wordpress.

10 Brindar contenidos accesibles no solo para los usuarios sino para los navegadores.

11 Diseño fijo o fluido Diseño fijo (Fixed Width): El diseño fijo, es aquel que como su nombre indica nos aporta el tamaño de nuestra estructura en unas medidas inalterables por nuestro navegador. – Gente con monitores más pequeños que el ancho definido tienen problemas con la página. – Gente con monitores más grandes ven los diseños fijos muy pequeños. Diseños fluidos o Líquidos (Fluid or Liquid Layout): creados para no tener un tamaño definido, y permitir que los monitores pueden condicionar el tamaño de salida. Usando porcentajes (%) podremos definir el tamaños de los elementos de nuestra aplicación web para definir un diseño fluido que se adapte a cualquier monitor. – El diseño fluido es considerado el más purista. – Más contenido puede ser mostrado sin necesidad de scroll.

12 Diseño fijo http://www.uv.mx/

13 http://www.uv.mx/

14 Diseños fluidos http://shiflett.org/

15 Diseños fluidos http://www.cam.ac.uk/

16 Diseños fluidos http://www.etnikastudio.com/