Curso de UX
De WikiEducator
Saltar a: navegación, buscar
UX
Usabilidad y accesibilidad.
Usabilidad, accesibilidad y estándar W3C | Herramientas de UX | Tiempo de Carga
Contenido
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
- 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.
<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>