usabilidad y accesibilidad web
Post on 04-Jul-2015
511 Views
Preview:
DESCRIPTION
TRANSCRIPT
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?
top related