Usabilidad y accesibilidad web

Aplicaciones que hacen bien lo que

deben hacer.

Chipper ya no uca... Bu!

USABILIDAD

Aplicación centrada en el usuario

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.

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.

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.

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

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

Supongamos esta analogía:Internet es como el mar... nuestro sitio es como un iceberg...

El usuario es un bote.

USUARIO

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

¡MAGIA!

Y los procesos los percibe como: ¡MAGIA!

Requerimientos:Necesidades Comerciales del cliente

Estrategia:Conocimiento del mercado meta

Requerimientos:Necesidades Comerciales del cliente

EstrategiaConocimiento del mercado meta

RequerimientosNecesidades Comerciales del cliente

Estructura:Arquitectura de la informaciónUsabilidad

EstrategiaConocimiento del mercado meta

RequerimientosNecesidades Comerciales del cliente

EstructuraArquitectura de la informaciónUsabilidad

Diseño

Programación

Se comienza por organizar el contenido

Arquitectura de la información

Arquitectura de la información

• Estructura del sitioDirectorios

Navegación

jerárquicas, hipertextual, facetada,...

• Estructura del sitioDirectorios

Navegación

• Esquema de las páginasContenido

Estándares

• Estructura del sitioDirectorios

Navegación

• Esquema de las páginasContenido

Estándares

• Tipografía• Gráficos

• Estructura del sitioDirectorios

Navegación

• Esquema de las páginasContenido

Estándares

• Tipografía• Gráficos

_______________________

• Accesibilidad Información de fácil acceso

+

+

• 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

• EyeTraking• 79% escanea el texto

lee frases sueltas

se ignoran gráficos

Se ignora la publicidad

Este proceso dura 10 segundos aprox.

• EyeTraking

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

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.

}41%

47.7%

• Espacio suficiente para darle click al texto.

• Simplificar procesos.

• El texto es un elemento de diseño.

• Uso del color para llamar la atención.

• Espacio entre elementos.

• Log in escondido.

Cosas que cuidar

• POP UP…. PUP UNDER.

• Ruido.

• LayOut.

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

Ejemplos Usables

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.

Evaluación Heurística

• La Heurística está orientada a cómo nos hace

sentir lo que vamos descubriendo.

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

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?

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?

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?

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.

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?

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?

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?

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?

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?

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?

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?