Usuario:Juanda/html/Introducción

=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:
 * Uso habitual:
 * Uso adecuado:
 * Uso adecuado:
 * Uso adecuado:
 * 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


 * 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: HTML is the best thing since sliced web.
 * ya no se usa en html5.

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.