Usabilidad y accesibilidad web

1. Aplicaciones que
hacen bien lo que
deben hacer.
Chipper ya no uca... Bu!
USABILIDAD

2. Aplicación centrada en el
usuario

3. 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.

4. Proyectos
Propó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.

5. Usuarios
¿Cuál es su objetivo?
¿Cómo pueden cumplirlo?
¿Cuáles son sus habilidades?
¿Cuál es su entorno?
Proyectos
Propó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.

6. 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...

7. ¿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.

8. Supongamos esta analogía:
Internet es como el mar... nuestro sitio es como un iceberg...
El usuario es un bote.
USUARIO

9. El usuario se imagina que hay algo más allá de lo que ve...

10. ¡MAGIA!
Y los procesos los percibe como: ¡MAGIA!

11. Requerimientos:
Necesidades Comerciales del cliente

12. Estrategia:
Conocimiento del mercado meta
Requerimientos:
Necesidades Comerciales del cliente

13. Estrategia
Conocimiento del mercado meta
Requerimientos
Necesidades Comerciales del cliente
Estructura:
Arquitectura de la información
Usabilidad

14. Estrategia
Conocimiento del mercado meta
Requerimientos
Necesidades Comerciales del cliente
Estructura
Arquitectura de la información
Usabilidad
Diseño
Programación

15. Se comienza por organizar el
contenido
Arquitectura de la información

16. Arquitectura de la información
• Estructura del sitio
Directorios
Navegación
jerárquicas, hipertextual,
facetada,...

17. • Estructura del sitio
Directorios
Navegación
• Esquema de las páginas
Contenido
Estándares

18. • Estructura del sitio
Directorios
Navegación
• Esquema de las páginas
Contenido
Estándares
• Tipografía
• Gráficos

19. • Estructura del sitio
Directorios
Navegación
• Esquema de las páginas
Contenido
Estándares
• Tipografía
• Gráficos
_______________________
• Accesibilidad
Información de fácil acceso
+
+

20. • 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 = intrusos
que limitan su control.
Usuarios

21. • EyeTraking
• 79% escanea el texto
lee frases sueltas
se ignoran gráficos
Se ignora la publicidad
Este proceso dura 10 segundos aprox.

22. • EyeTraking
• Los que más leen, solo leen el 75%
del contenido.

24. 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.

25. }
41%
47.7%

26. • Espacio suficiente para darle click al texto.

27. • Simplificar procesos.

28. • El texto es un elemento de diseño.

29. • Uso del color para llamar la atención.

30. • Espacio entre elementos.

31. • Log in escondido.
Cosas que cuidar

32. • POP UP…. PUP UNDER.

33. • Ruido.

34. • LayOut.

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

36. Ejemplos Usables

38. 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.

39. Evaluación Heurística
• La Heurística está
orientada a cómo nos hace
sentir lo que vamos
descubriendo.

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

41. 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?

42. 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?

43. 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?

44. 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.

45. 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?

46. 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?

47. 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?

48. 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?

49. 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?

50. 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?

51. 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?