navegalidad y usabilidad cesión 1
TRANSCRIPT
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
Navegabilidad y Usabilidad
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
Presentaciones
• Quién soy...
• Y ¿vosotros?
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
Programa
• Presentación de los temas
• Evaluaciones
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
Empezamos...Entorno y Conceptos fundamentales
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
Diseño web: Entorno
• Desarrollar un proyecto web: ¿donde nos ubicamos en la creación de un website?
• Nuevas tendencias: conceptos de Cloud Computing, SAAS, etc.
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
Proceso web - Actores
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
Reunión Inicial
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
Diseño Inicial
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos Proposición de
Modificaciones
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
Modificaciones
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
Validación
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos Creación del
Documento Funcional
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
Validación
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos Paso del Diseño al
Código
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
Programación
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos Introducción de
contenidos
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
Validación Final
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
Pruebas
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
Publicación
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos Conceptos
Fundamentales
• Accesibilidad
• Usabilidad
• Navegabilidad
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
Accesibilidad
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
Accesibilidad
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
Accesibilidad
Usabilidad
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
Accesibilidad
Usabilidad
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
Accesibilidad
Usabilidad
Navegabilidad
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
AccesabilidadDefinición
Principios directoresMedición
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
Definición
• La accesibilidad web se refiere a la capacidad de acceso a la Web y a sus contenidos por todas las personas independientemente de la discapacidad (física, intelectual o técnica) que presenten o de las que se deriven del contexto de uso (tecnológicas o ambientales). Esta cualidad está íntimamente relacionada con la usabilidad.
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
Principios directores
• ¿Qué dice la legislación?
• Principios y Pautas de la WAI (Web Accessibility Iniciative).
• ¿Las ventajas?
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
Principios WAI
• Principio 1: Perceptibilidad - La información y los componentes de la interfaz de usuario deben presentarse a los usuarios de la manera en que puedan percibirlos.
• Principio 2: Operabilidad - Los componentes de la interfaz de usuario y la navegación deben ser operables.
• Principio 3: Comprensibilidad - La información y el manejo de la interfaz de usuario deben ser comprensibles.
• Principio 4: Robustez - El contenido debe ser lo suficientemente robusto como para confiarse en su interpretación por parte de una amplia variedad de agentes de usuario, incluidas las tecnologías asistivas.
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
Medición
• Cumplimientos WAI (nivel A, AA, AAA)
• Herramientas automáticas: http://www.tawdis.net/ y http://www.cast.org/bobby/
• Pruebas con expertos y usuarios
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
Medición - Prioridades1. Texto alternativo de imágenes. Se trata del fallo más habitual y es también uno de los más fáciles de corregir.
2. Texto de los hipervínculos. Los hipervínculos son muy usados por los ciegos para hojear la página. También por las personas con navegadores gráficos. Conviene que su texto sea significativo cuando se lee fuera de contexto. Por ejemplo, evitar "pincha aquí".
3. Formularios. Son vitales para la interacción con el sitio y no siempre se verifica que sean accesibles en modo sólo texto..
4. Marcos. Hay que revisar los títulos y contenido de <noframes>.
5. Funcionamiento del sitio web con los scripts (incluido Flash) desactivados.
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
UsabilidadDefinición
Principios directoresMedición
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
Definición
• “La usabilidad” (dentro del campo del desarrollo web) es la disciplina que estudia la forma de diseñar sitios web para que los usuarios puedan interactuar con ellos de la forma más fácil, cómoda e intuitiva posible.
• La mejor forma de crear un sitio web usable es realizando un diseño centrado en el usuario, diseñando para y por el usuario, en contraposición a lo que podría ser un diseño centrado en la tecnología o uno centrado en la creatividad u originalidad.
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
Principios directoresJakob Nielson dice...
• Learnability: How easy is it for users to accomplish basic tasks the first time they encounter the design?
• Efficiency: Once users have learned the design, how quickly can they perform tasks?
• Memorability: When users return to the design after a period of not using it, how easily can they reestablish proficiency?
• Errors: How many errors do users make, how severe are these errors, and how easily can they recover from the errors?
• Satisfaction: How pleasant is it to use the design?
Es decir la finalidad, en este caso de un sitio web, es lograr que el usuario encuentre lo que busca en el menor tiempo posible.
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
Medición
• PROBAR, PROBAR, PROBAR...
• Expertos (análisis heurístico) y Usuarios
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
NavegabilidadDefinición
Principios directoresMedición
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
Definición
• Podríamos definir la navegabilidad de un sitio web como aquellas propiedades de la interactividad del sitio que permiten que el usuario del mismo sea capaz de moverse por su estructura e identificar las diferentes secciones y contenidos de una forma sencilla y efectiva y sin perderse en él.
• La buena navegabilidad de un sitio, es en muchos casos un factor clave en su éxito y aceptación por parte de los usuarios.
• Al diseñar tu sitio web, no te cieges en trabajar solo su aspecto gráfico y sus características visuales, ¡¡claro que son importantes!!, por supuesto, pero tienes que tener en cuenta, que por muy trabajada que este tu web visualmente, si no consigues que el visitante de tu sitio pueda moverse por ella fácilmente y encontrar en todo momento lo que busca, será muy complicado que tenga éxito.
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
Principios directores
• ¿Dónde estoy?,
• ¿Dónde he estado?
• ¿Dónde puedo ir?
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
Medición
• PROBAR, PROBAR, PROBAR...
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
Regla de oro
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
Regla de oro
Entender a los usuarios
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
Perfiles
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
Me llamo X
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
KISS
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
KISS
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
KISS
NO
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
KISS
NO
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
KISS
NONO
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
KISS
NONO
KEEP
IT
SIMPLE
STUPID
!
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
It´s just easier...
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
Comportamientos
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
LEER vs ESCANEAR
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
Eye-tracking
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
Eye-tracking
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
El Usuario Bombero
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
Aprender vs Experimentar
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
¿Soluciones?
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
1. Estructura clara
2. Seguir las Convenciones
3. División de las secciones
4. Enlaces visibles
5. Minimizar el “ruido”
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
Estructura clara
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
Estructura clara
MUY IMPORTANTE
Menos importante
Nadie lo va a leer
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
Seguir las convenciones
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
Secciones claras
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
Enlaces visibles
Puedo hacer clic
Ya he hecho clic
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
Minimizar el ruido
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
Ejercicio De lo que no se debe hacer... ¡nunca jamás!
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
http://www.goldenmean.info/
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
http://www.fivedoves.com/
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
http://www.sre.gob.mx/espana/
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
http://www.gioupm.com/
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
Mini-test