accesibilidad y usabilidad web mayo 2011. 2 ¿quiénes usan la web? personas: con computadoras de...
TRANSCRIPT
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 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)
¿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?
¿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.
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:
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.
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
Mejorar la velocidad de carga de las paginas de ww.uv.mx/
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.
Brindar contenidos accesibles no solo para los usuarios sino para los navegadores.
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.
Diseño fijohttp://www.uv.mx/
http://www.uv.mx/
Diseños fluidoshttp://shiflett.org/
Diseños fluidos http://www.cam.ac.uk/
Diseños fluidoshttp://www.etnikastudio.com/