usabilidad y accesibilidad web
DESCRIPTION
Usabilidad y accesibilidad webTRANSCRIPT
![Page 1: Usabilidad y accesibilidad web](https://reader033.vdocuments.site/reader033/viewer/2022052413/5597ea691a28abc0628b483d/html5/thumbnails/1.jpg)
Aplicaciones que hacen bien lo que
deben hacer.
Chipper ya no uca... Bu!
USABILIDAD
![Page 2: Usabilidad y accesibilidad web](https://reader033.vdocuments.site/reader033/viewer/2022052413/5597ea691a28abc0628b483d/html5/thumbnails/2.jpg)
Aplicación centrada en el usuario
![Page 3: Usabilidad y accesibilidad web](https://reader033.vdocuments.site/reader033/viewer/2022052413/5597ea691a28abc0628b483d/html5/thumbnails/3.jpg)
Diseño enfocado al usuario
Relación donde los usuarios puedan servirse de un producto con un mínimo de
estrés y un máximo de eficiencia.
![Page 4: Usabilidad y accesibilidad web](https://reader033.vdocuments.site/reader033/viewer/2022052413/5597ea691a28abc0628b483d/html5/thumbnails/4.jpg)
ProyectosPropósitos
¿Qué necesidad satisface?¿Qué objetivos comerciales busca?
Relación donde los usuarios puedan servirse de un producto con un mínimo de
estrés y un máximo de eficiencia.
![Page 5: Usabilidad y accesibilidad web](https://reader033.vdocuments.site/reader033/viewer/2022052413/5597ea691a28abc0628b483d/html5/thumbnails/5.jpg)
Usuarios¿Cuál es su objetivo?¿Cómo pueden cumplirlo?¿Cuáles son sus habilidades?¿Cuál es su entorno?
ProyectosPropósitos
¿Qué necesidad satisface?¿Qué objetivos comerciales busca?
Relación donde los usuarios puedan servirse de un producto con un mínimo de
estrés y un máximo de eficiencia.
![Page 6: Usabilidad y accesibilidad web](https://reader033.vdocuments.site/reader033/viewer/2022052413/5597ea691a28abc0628b483d/html5/thumbnails/6.jpg)
Diseño enfocado al usuario
¿Cómo piensan los usuarios?La conducta de un usuario web no es
muy diferente a la de un cliente de una tienda, si no encuentra rápido lo que busca, se va...
![Page 7: Usabilidad y accesibilidad web](https://reader033.vdocuments.site/reader033/viewer/2022052413/5597ea691a28abc0628b483d/html5/thumbnails/7.jpg)
¿Cómo piensan los usuarios?La conducta de un usuario web no es
muy diferente a la de un cliente de una tienda, si no encuentra rápido lo que busca, se va...
Aprecian calidad y credibilidad.
Los usuarios no leen; escanean el contenido.
Son impacientes y exigen saciedad inmediata.
Lo usuarios no toman las mejores decisiones.
Siguen su intuición.
Quieren tener el control.
![Page 8: Usabilidad y accesibilidad web](https://reader033.vdocuments.site/reader033/viewer/2022052413/5597ea691a28abc0628b483d/html5/thumbnails/8.jpg)
Supongamos esta analogía:Internet es como el mar... nuestro sitio es como un iceberg...
El usuario es un bote.
USUARIO
![Page 9: Usabilidad y accesibilidad web](https://reader033.vdocuments.site/reader033/viewer/2022052413/5597ea691a28abc0628b483d/html5/thumbnails/9.jpg)
El usuario se imagina que hay algo más allá de lo que ve...
![Page 10: Usabilidad y accesibilidad web](https://reader033.vdocuments.site/reader033/viewer/2022052413/5597ea691a28abc0628b483d/html5/thumbnails/10.jpg)
¡MAGIA!
Y los procesos los percibe como: ¡MAGIA!
![Page 11: Usabilidad y accesibilidad web](https://reader033.vdocuments.site/reader033/viewer/2022052413/5597ea691a28abc0628b483d/html5/thumbnails/11.jpg)
Requerimientos:Necesidades Comerciales del cliente
![Page 12: Usabilidad y accesibilidad web](https://reader033.vdocuments.site/reader033/viewer/2022052413/5597ea691a28abc0628b483d/html5/thumbnails/12.jpg)
Estrategia:Conocimiento del mercado meta
Requerimientos:Necesidades Comerciales del cliente
![Page 13: Usabilidad y accesibilidad web](https://reader033.vdocuments.site/reader033/viewer/2022052413/5597ea691a28abc0628b483d/html5/thumbnails/13.jpg)
EstrategiaConocimiento del mercado meta
RequerimientosNecesidades Comerciales del cliente
Estructura:Arquitectura de la informaciónUsabilidad
![Page 14: Usabilidad y accesibilidad web](https://reader033.vdocuments.site/reader033/viewer/2022052413/5597ea691a28abc0628b483d/html5/thumbnails/14.jpg)
EstrategiaConocimiento del mercado meta
RequerimientosNecesidades Comerciales del cliente
EstructuraArquitectura de la informaciónUsabilidad
Diseño
Programación
![Page 15: Usabilidad y accesibilidad web](https://reader033.vdocuments.site/reader033/viewer/2022052413/5597ea691a28abc0628b483d/html5/thumbnails/15.jpg)
Se comienza por organizar el contenido
Arquitectura de la información
![Page 16: Usabilidad y accesibilidad web](https://reader033.vdocuments.site/reader033/viewer/2022052413/5597ea691a28abc0628b483d/html5/thumbnails/16.jpg)
Arquitectura de la información
• Estructura del sitioDirectorios
Navegación
jerárquicas, hipertextual, facetada,...
![Page 17: Usabilidad y accesibilidad web](https://reader033.vdocuments.site/reader033/viewer/2022052413/5597ea691a28abc0628b483d/html5/thumbnails/17.jpg)
• Estructura del sitioDirectorios
Navegación
• Esquema de las páginasContenido
Estándares
![Page 18: Usabilidad y accesibilidad web](https://reader033.vdocuments.site/reader033/viewer/2022052413/5597ea691a28abc0628b483d/html5/thumbnails/18.jpg)
• Estructura del sitioDirectorios
Navegación
• Esquema de las páginasContenido
Estándares
• Tipografía• Gráficos
![Page 19: Usabilidad y accesibilidad web](https://reader033.vdocuments.site/reader033/viewer/2022052413/5597ea691a28abc0628b483d/html5/thumbnails/19.jpg)
• Estructura del sitioDirectorios
Navegación
• Esquema de las páginasContenido
Estándares
• Tipografía• Gráficos
_______________________
• Accesibilidad Información de fácil acceso
+
+
![Page 20: Usabilidad y accesibilidad web](https://reader033.vdocuments.site/reader033/viewer/2022052413/5597ea691a28abc0628b483d/html5/thumbnails/20.jpg)
• 8 Segundos para cautivar a un usuario.
• Dejan de usar el sitio si no
encuentran lo que buscan en 3 clicks.
• POP-ups y banners = intrusosque limitan su control.
Usuarios
![Page 21: Usabilidad y accesibilidad web](https://reader033.vdocuments.site/reader033/viewer/2022052413/5597ea691a28abc0628b483d/html5/thumbnails/21.jpg)
• EyeTraking• 79% escanea el texto
lee frases sueltas
se ignoran gráficos
Se ignora la publicidad
Este proceso dura 10 segundos aprox.
![Page 22: Usabilidad y accesibilidad web](https://reader033.vdocuments.site/reader033/viewer/2022052413/5597ea691a28abc0628b483d/html5/thumbnails/22.jpg)
• EyeTraking
• Los que más leen, solo leen el 75% del contenido.
![Page 23: Usabilidad y accesibilidad web](https://reader033.vdocuments.site/reader033/viewer/2022052413/5597ea691a28abc0628b483d/html5/thumbnails/23.jpg)
![Page 24: Usabilidad y accesibilidad web](https://reader033.vdocuments.site/reader033/viewer/2022052413/5597ea691a28abc0628b483d/html5/thumbnails/24.jpg)
Desarrollo
• Reglas para el desarrollo
1. Rápido (carga en 4 segundos como media).
2. Simple (la atención es selectiva).
4. Investigable (SEO).
. 5. Elaborado para el usuario final.
6. Monitoreado.
![Page 25: Usabilidad y accesibilidad web](https://reader033.vdocuments.site/reader033/viewer/2022052413/5597ea691a28abc0628b483d/html5/thumbnails/25.jpg)
}41%
47.7%
![Page 26: Usabilidad y accesibilidad web](https://reader033.vdocuments.site/reader033/viewer/2022052413/5597ea691a28abc0628b483d/html5/thumbnails/26.jpg)
• Espacio suficiente para darle click al texto.
![Page 27: Usabilidad y accesibilidad web](https://reader033.vdocuments.site/reader033/viewer/2022052413/5597ea691a28abc0628b483d/html5/thumbnails/27.jpg)
• Simplificar procesos.
![Page 28: Usabilidad y accesibilidad web](https://reader033.vdocuments.site/reader033/viewer/2022052413/5597ea691a28abc0628b483d/html5/thumbnails/28.jpg)
• El texto es un elemento de diseño.
![Page 29: Usabilidad y accesibilidad web](https://reader033.vdocuments.site/reader033/viewer/2022052413/5597ea691a28abc0628b483d/html5/thumbnails/29.jpg)
• Uso del color para llamar la atención.
![Page 30: Usabilidad y accesibilidad web](https://reader033.vdocuments.site/reader033/viewer/2022052413/5597ea691a28abc0628b483d/html5/thumbnails/30.jpg)
• Espacio entre elementos.
![Page 31: Usabilidad y accesibilidad web](https://reader033.vdocuments.site/reader033/viewer/2022052413/5597ea691a28abc0628b483d/html5/thumbnails/31.jpg)
• Log in escondido.
Cosas que cuidar
![Page 32: Usabilidad y accesibilidad web](https://reader033.vdocuments.site/reader033/viewer/2022052413/5597ea691a28abc0628b483d/html5/thumbnails/32.jpg)
• POP UP…. PUP UNDER.
![Page 33: Usabilidad y accesibilidad web](https://reader033.vdocuments.site/reader033/viewer/2022052413/5597ea691a28abc0628b483d/html5/thumbnails/33.jpg)
• Ruido.
![Page 34: Usabilidad y accesibilidad web](https://reader033.vdocuments.site/reader033/viewer/2022052413/5597ea691a28abc0628b483d/html5/thumbnails/34.jpg)
• LayOut.
![Page 35: Usabilidad y accesibilidad web](https://reader033.vdocuments.site/reader033/viewer/2022052413/5597ea691a28abc0628b483d/html5/thumbnails/35.jpg)
• Otras.
1. No cambiamos la resolución del usuario.
2. No se usa letra miniatura.
4. Los links deben ser claros.
. 5. Pocas animaciones (*).
6. Contacto fácil.
7. Las ligas abren en la misma ventana.
![Page 36: Usabilidad y accesibilidad web](https://reader033.vdocuments.site/reader033/viewer/2022052413/5597ea691a28abc0628b483d/html5/thumbnails/36.jpg)
Ejemplos Usables
![Page 37: Usabilidad y accesibilidad web](https://reader033.vdocuments.site/reader033/viewer/2022052413/5597ea691a28abc0628b483d/html5/thumbnails/37.jpg)
![Page 38: Usabilidad y accesibilidad web](https://reader033.vdocuments.site/reader033/viewer/2022052413/5597ea691a28abc0628b483d/html5/thumbnails/38.jpg)
Evaluación Heurística
• Definición de heurística:
• Del griego eurisco, encontrar.
Un conjunto de métodos para ayudar a la habilidad de las personas para aprender.
La solución de un problema mediante métodos no rigurosos.
![Page 39: Usabilidad y accesibilidad web](https://reader033.vdocuments.site/reader033/viewer/2022052413/5597ea691a28abc0628b483d/html5/thumbnails/39.jpg)
Evaluación Heurística
• La Heurística está orientada a cómo nos hace
sentir lo que vamos descubriendo.
![Page 40: Usabilidad y accesibilidad web](https://reader033.vdocuments.site/reader033/viewer/2022052413/5597ea691a28abc0628b483d/html5/thumbnails/40.jpg)
• Aspectos a evaluar:
- Aspectos Generales.
- Identidad de información.
- Lenguaje y redacción.
- Títulos, enlaces y marquesinas.
- Estructura y navegación.
- Lay-out de la página.
- Búsqueda.
- Elementos multimedia.
- Ayuda.
- Accesibilidad.
- Control y retroalimentación.
![Page 41: Usabilidad y accesibilidad web](https://reader033.vdocuments.site/reader033/viewer/2022052413/5597ea691a28abc0628b483d/html5/thumbnails/41.jpg)
GENERALES
¿Cumple Objetivos?
¿La URL es fácil de recordar?
¿La Estructura esta orientada al usuario?
¿El Look & Feel es coherente con la
empresa?
¿El Diseño es consistente y reconocible?
¿Se Actualiza el contenido?
![Page 42: Usabilidad y accesibilidad web](https://reader033.vdocuments.site/reader033/viewer/2022052413/5597ea691a28abc0628b483d/html5/thumbnails/42.jpg)
IDENTIDAD DE INFORMACIÓN
¿Se muestra claramente la identidad de la
empresa-sitio a través de todas las páginas?
El Logotipo, ¿es significativo, identificable y
suficientemente visible?
¿Proyecta la esencia de la empresa?
![Page 43: Usabilidad y accesibilidad web](https://reader033.vdocuments.site/reader033/viewer/2022052413/5597ea691a28abc0628b483d/html5/thumbnails/43.jpg)
LENGUAJE Y REDACCIÓN
¿El sitio web habla el mismo lenguaje que sus usuarios?
¿Emplea un lenguaje claro y conciso?
Mensajes VAK
¿Marca distancia con el usuario?
¿1 párrafo = 1 idea?
![Page 44: Usabilidad y accesibilidad web](https://reader033.vdocuments.site/reader033/viewer/2022052413/5597ea691a28abc0628b483d/html5/thumbnails/44.jpg)
TÍTULOS, ENLACES Y MARQUESINAS
Evitar el tipo "haga clic aquí".
¿Usa rótulos estándar?como "Mapa del Sitio" o "Acerca de...".
¿Usa un único sistema de organización, bien definido y claro? alfabético, geográfico, cronológico, temático... etc.
¿Es congruente el rótulo (link) con el título?
El título de las páginas, ¿Ha sido planificado? Relacionado con la 'findability' del sitio web.
![Page 45: Usabilidad y accesibilidad web](https://reader033.vdocuments.site/reader033/viewer/2022052413/5597ea691a28abc0628b483d/html5/thumbnails/45.jpg)
ESTRUCTURA Y NAVEGACIÓN
¿Es la más adecuada?
¿Mantiene un equilibrio entre Profundidad y Anchura?
¿Están todos los nodos comunicados?
¿Los enlaces son fácilmente reconocibles como tales?
¿Se resalta su estado (visitados, activos,...)?
En menús: No se deben superar los 7±2
¿ Hay enlaces rotos, páginas huérfanas?
¿Se orienta al usuario acerca de dónde está y cómo deshacer su navegación?
![Page 46: Usabilidad y accesibilidad web](https://reader033.vdocuments.site/reader033/viewer/2022052413/5597ea691a28abc0628b483d/html5/thumbnails/46.jpg)
LAY-OUT DE LA PÁGINA
¿Se aprovechan las zonas de alta jerarquía informativa de la página para contenidos de mayor relevancia?
¿Se ha evitado la sobrecarga informativa?
¿Es una interfaz limpia, sin ruido visual?
¿Existen zonas en "blanco" entre los objetos informativos de la página para poder descansar la vista?
¿Se hace un uso correcto del espacio visual de la página?
¿Se ha controlado la longitud de página?
![Page 47: Usabilidad y accesibilidad web](https://reader033.vdocuments.site/reader033/viewer/2022052413/5597ea691a28abc0628b483d/html5/thumbnails/47.jpg)
BÚSQUEDA(siempre que fuera necesario)
¿Se encuentra fácilmente accesible?
¿Es fácilmente reconocible como tal?
¿Permite la búsqueda avanzada? (en caso de ser útil).
¿Muestra los resultados de la búsqueda de forma comprensible para el usuario?
¿La caja de texto es lo suficientemente ancha?
¿Asiste al usuario en caso de no poder ofrecer resultados para una consultada dada?
![Page 48: Usabilidad y accesibilidad web](https://reader033.vdocuments.site/reader033/viewer/2022052413/5597ea691a28abc0628b483d/html5/thumbnails/48.jpg)
ELEMENTOS MULTIMEDIA
¿Las fotografías están bien recortadas?
¿Son comprensibles?
¿Se ha cuidado su resolución?
¿Son comprensibles por cualquier usuario?
¿El uso de imágenes o animaciones proporciona algún tipo de valor añadido?
¿Se ha evitado el uso de animaciones cíclicas?
![Page 49: Usabilidad y accesibilidad web](https://reader033.vdocuments.site/reader033/viewer/2022052413/5597ea691a28abc0628b483d/html5/thumbnails/49.jpg)
AYUDA
¿Es verdaderamente necesaria?
¿Se puede simplificar el sitio?
¿Está colocado en una zona visible y "estándar"? (superior derecha).
¿Se ofrece ayuda contextual en tareas complejas? (transferencias bancarias, formularios de registro).
Si posee FAQs, ¿es correcta tanto la elección como la redacción de las preguntas y las respuestas?
![Page 50: Usabilidad y accesibilidad web](https://reader033.vdocuments.site/reader033/viewer/2022052413/5597ea691a28abc0628b483d/html5/thumbnails/50.jpg)
ACCESIBILIDAD
¿Es legible el texto?
¿La estructura y el diseño facilitan la lectura?
¿Existe un contraste entre el color de fuente y el fondo?
¿Incluyen las imágenes atributos 'alt' que describan su contenido?
¿Es compatible el sitio web con los diferentes navegadores?
¿Se visualiza bien con otras resoluciones?
¿Tienes que descargar e instalar plugins adicionales?
![Page 51: Usabilidad y accesibilidad web](https://reader033.vdocuments.site/reader033/viewer/2022052413/5597ea691a28abc0628b483d/html5/thumbnails/51.jpg)
CONTROL Y RETROALIMENTACIÓN
¿Tiene el usuario todo el control sobre la interfaz? Banners intrusivos, animaciones infranqueables, cambios de layout…etc
¿Se informa de procesos que estén corriendo?
¿Se informa al usuario de lo que ha pasado?
¿Se informa de forma entendible y no alarmista un error?
¿Hay formas de contacto?