Curso de html

UX

Usabilidad y accesibilidad.

Usabilidad, accesibilidad y estándar W3C | Herramientas de UX | Tiempo de Carga

UX: Experiencia de usuario o usabilidad

Usabilidad

• Facilidad de navegación por la web para el usuario final.
• ¿Quién es el usuario final? Un usuario medio (sin ningún tipo de curso especializado) y con un equipo medio.
• Objetivos:

Presentación de la información de forma clara y concisa

Menus, opciones y botones con funcionalidad clara y sin ambigüedad

Colocación de la información importante en un área apropiada de la web

• La usabilidad es importante para cualquier página web
• Es esencial para páginas de comercio electrónico y aplicaciones web.
• Sigue el principio KISS del diseño (keep it simple, stupid)
• Se suele denominar UX por User eXperience

Contenido de la web

• No juzgues un libro por su portada
• En una web, si la primera pantalla "no gusta" el usuario no seguirá
• Intenta "cortar elementos" si la página tiene scroll para que el usuario lo perciba
• Minimiza el contenido de la web segun la 3ª regla de Krug (sus reglas de usabilidad son famosas).

• Reglas de Krug:

1.No me hagas pensar.

2. No importa cuántas veces tengo que hacer clic, siempre y cuando cada clic es una elección inconsciente e inequívoca.

3. Deshágase de la mitad de las palabras de cada página, a continuación, deshágase de la mitad de las que quedan.

Tiempo de respuesta de una web

• Según Jacob Nielsen, experto en usabilidad.
• Límite 1 décima Respuesta instantánea, parece causada por el usuario y no por el ordenador. Ejemplo: al cambiar entre pestañas del navegador.
• Límite 1 segundo El usuario siento el retraso pero siente el control y una sensación de libertad mientras espera la respuesta del ordenador. Adecuado para una correcta navegación.

Límite 10 segundos El usuario puede mantener la atención, deseando que el ordenador respondiera más rápido.

• No hay mundo (informático) más allá de los 10 segundos :-(

Accesibilidad

• Se intenta garantizar una experiencia de usuario similar para personas con discapacidades.
• WAI (Web Accesibility Initiative) es una parte de la W3C que genera la guia de accesibilidad.
• La guía de accesibilidad se denomina WCAG o Web Content Accessibility Guidelines
• Uso habitual en organismos públicos, como en la web del Ayuntamiento de Zaragoza

Niveles de conformidad

• Existen 3 niveles de conformidad A, AA, AAA. El nivel se determina según las pautas ya establecidas que cumple.
• Información completa sobre los niveles de conformidad WCAG
• Podemos utilizar herramientas que testean el nivel de conformidad de nuestra web.

Nivel A

• Imágenes con texto alternativo (alt)

El atributo alt es bueno para el SEO

Uso inapropiado:

<img src=“menswatches.jpg” alt=“”>

Uso habitual:

<img src=“menswatches.jpg” alt=“menswatches”>

Uso adecuado:

<img src=“menswatches.jpg” alt=“Rolex Yacht Master watches for men”>

• Contenido multimedia: Se proporciona contenido descriptivo alternativo

Opciones para generar los transcripts

• El contenido debe tener un orden de lectura no dependiente del diseño o estilos
• El contenido no debe depender de colores y debe ser fácilmente distinguible del fondo

• Herramienta para ver lo legible que es tu combinación de colores

• Las funcionalidades de la pagina deben ser accesibles desde el teclado.

Ejemplo de página con acceso desde el teclado

Utilizar AccessKeys es fácil

<div id="navigation"> 
<a href="index.html" accesskey="q">Home</a> |  
<a href="about.html">About Foos</a> |  
<a href="buy.html">Buy Foos</a> |  
<a href="sitemap.html">Site Map</a> |  
<a href="feedback.html">Feedback</a> |  
<a href="access.html">Accesskey Details</a> 
</div>

<div id="navigation"> 
<a href="index.html" accesskey="h">Home</a> |  
<a href="about.html" accesskey="1">About Foos</a> |  
<a href="buy.html" accesskey="2">Buy Foos</a> |  
<a href="sitemap.html" accesskey="3">Site Map</a> |  
<a href="feedback.html" accesskey="4">Feedback</a> |  
<a href="access.html" accesskey="k">Accesskey Details</a> 
</div>

• Sin más de 3 destellos o cambios de imagen por segundo
• Títulos descriptivos en cada pagina
• Sistema para saltar de bloques de contenido y navegación secuencial

Nivel AA

• Debe cumplir las pautas del nivel A
• Subtítulos para el contenido multimedia con audio
• Contenido alternativo descriptivo para contenido multimedia con vídeo
• Contraste alto entre fondo y texto (al menos 4,5:1)

• Se puede variar tamaño de fuente hasta un 200% sin perdida de funcionalidad
• Encabezados descriptivos
• Al menos dos formas distintas para navegar por el site
• En los envíos de información confidencial debe existir un sistema para corregir, retroceder o advertencia de error y que te permita corregirlo.

Nivel AAA

• Debe cumplir con las pautas del nivel A y AA
• Lenguaje de signos para el contenido multimedia con audio
• Descripción completa para el contenido multimedia con vídeo
• Contraste muy alto entre fondo y texto (al menos 7,1:1)

• Contenidos multimedia sin audio de fondo (sólo locución principal)
• La pagina debe poseer un sistema para que el usuario pueda cambiar los colores de texto y fondo, limitar las lineas a 80 caracteres, alto de linea y tamaño de fuente. Todo ello sin que sea necesario utilizar el scroll horizontal para poder ver todo el contenido
• Las imágenes con texto sólo pueden utilizarse para decorar.
• Las funcionalidades de la pagina deben ser accesibles desde el teclado sin ningún tipo de excepción

• Reanudación de sesión: Cuando un expira la sesión el usuario puede volver a reanudar sesión sin perdida de datos
• Se proporciona al usuario información sobre su situación en la pagina
• Texto descriptivo sobre el destino de cada enlace
• Encabezados en cada sección
• Definir el idioma de la pagina
• En todos los envíos de información sistema debe existir un sistema para corregir, retroceder o advertencia de error y que te permita corregirlo

Uso de estándares

• Iniciativa de la W3C
• Las metas son compatibilidad entre plataformas (uso de estándares web abiertos) y tamaño de ficheros compacto.
• Ejemplo: separación de contenido (html) y presentación (css).
• Una web que cumple los estándares no tiene porque ser una web con buena usabilidad o accesibilidad.

Compromisos entre uso de estándares, usabilidad y accesibilidad

• Aunque están muy relacionados, no siempre van de la mano. Veamos algunos casos y sus posibles soluciones:

Color

• Herramienta visual básica para el diseño Web
• El 10% de las personas presentan algún tipo de deficiencia visual y no pueden distinguir ciertos colores (especialmente rojo y verde).
• Se puede sustituir parcialmente el uso de distintos colores con el uso de iconos y distintos tipos de texto en la codificación de la Web.
• Herramienta para ver lo legible que es tu combinación de colores

Siglas, acrónimos y abreviaturas

• Cuando las siglas se utilizan como si fuera una palabra, estamos hablando de acrónimos.

• Ejemplo: RENFE REd Nacional de Ferrocarriles Españoles

• Cuando las siglas se leen como la palabra que representan, hablamos de abreviaturas.

Ej: Sr

• Los lectores de pantalla no siempre las reconocen: HTML, PDF, NaCl, SiteMap...

• Debemos usar la etiqueta para identificarlos:

  <p><abbr title="HyperText Markup Language">HTML</abbr> is the best thing since sliced web.</p>

• <acronym> ya no se usa en html5.

</div>

Imágenes y sonidos

• A menudo suelen ser más útiles que largos bloques de texto.
• Un screen reader no puede interpretarlos
• Uso de subtítulos en los vídeos y transcripciones en los ficheros de sonido.
• Uso del atributo alt

Navegación repetitiva o excesiva

• Muchos enlaces que se hacen pesados desde un screen reader
• Los menús de navegación se repiten para facilitar la navegación.
• Se deben usar sitemaps y usar estrategias para evitar los menús de navegación.

Diseño con varias columnas

• Reducir la anchura de las líneas ayuda a la legibilidad del texto y nos permite tener más información en la pantalla.
• Puede resultar también un inconveniente para un screen reader
• Se pueden usar layouts de css con una sola columna y fijando su max-width para que no sea muy ancha.
• En caso de que usemos tablas de datos, debemos indicar cabecera, títulos, etc, para que su lectura sea comprensible desde un screen reader ver ejemplo.

</div>