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

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

• 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 esá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>

</div>