Buenas prácticas en la web móvil. Accesibilidad y Usabilidad

Buenas prácticas en la web móvil
Accesibilidad y usabilidad
Laura Fernando López
21 de Abril de 2015
Índice
•
•
•
Buenas prácticas en la web móvil
•
•
•
Técnicas y principios
Estilos para adaptar a los diferentes viewports
JavaScript para mejorar la experiencia del usuario
Accesibilidad web
•
•
W3C y Normativa
Herramientas
Usabilidad Web
•
•
Evaluación de la usabilidad
Ejemplos
Diseño centrado en el usuario
21 Abril 2015
2
1 – Buenas Prácticas en la Web móvil
•
¿Es la Web móvil verdaderamente exitosa o se ha exagerado?
•
¿Afecta a nivel mundial o sólo a ciertos países?
•
¿Cuáles son las diferencias más importantes entre el diseño para
la web móvil y escritorio?
Diseño centrado en el usuario
21 Abril 2015
3
1 – Buenas Prácticas en la Web móvil
Retos y oportunidades
•
1988: 1er intento de llevar la web a los móviles, Protocolo de
Aplicaciones inalámbricas
•
Experiencia de usuario mala, insuficiente potencia de los dispositivos,
tamaño de pantalla...
•
Actualmente la web está disponible a través de una amplia gama
de dispositivos. Web y móvil van de la mano
•
La popularidad de los dispositivos móviles se debe:
•
•
•
•
Personales
Personalizados
Conectados
Multifuncionales: más allá de su propósito original de comunicaciones
de voz
Diseño centrado en el usuario
21 Abril 2015
4
1 – Buenas Prácticas en la Web móvil
Incremento de tráfico de la web móvil
Visitas 2013
Visitas 2014
Escritorio
Escritorio
Móvil
Móvil
Tablet
Tablet
Visitas 2015
Escritorio
Móvil
Tablet
Diseño centrado en el usuario
21 Abril 2015
5
1 – Buenas Prácticas en la Web móvil
Apps nativas – Apps web
•
Las nuevas aplicaciones necesitan más elementos del hardware
del dispositivo y un desarrollo nativo permite sacar todo el
partido a los componentes
Diseño centrado en el usuario
21 Abril 2015
6
1 – Buenas Prácticas en la Web móvil
W3C: apps web
•
Grupo de trabajo, Web Applications Working Group
http://www.w3.org/2008/webapps/
•
•
Redacción de normativa
•
•
•
•
Archivos API
Almacenamiento web
XmlHttpRequest
El conjunto de estándares en torno a los Widgets.
Grupo de trabajo de Dispositivos y Directivas
http://www.w3.org/2009/dap/
•
Produce estándares como:
•
•
•
•
Contactos
Calendario
Medios de captura: cámara y micrófono
Estado de la batería
Diseño centrado en el usuario
21 Abril 2015
7
1 – Buenas Prácticas en la Web móvil
Retos I
•
Problemas de presentación - HTML5 + CSS3
•
•
•
•
Muchas páginas Web están hechas para presentarlas en pantallas de PC’s
de escritorio
Contexto y visión general se pierden por el tamaño limitado de la pantalla
Entrada
•
•
•
Teclas pequeñas para escribir
URLs pequeñas facilitan
Formularios difíciles de completar
Ancho de banda y precio
•
•
•
Redes de telefónica móvil pueden ser muy lentas y con latencia superior
La transferencia de datos al móvil contribuye al precio del uso del
dispositivo
Imágenes de gran tamaño...
Diseño centrado en el usuario
21 Abril 2015
8
1 – Buenas Prácticas en la Web móvil
Retos II
•
•
•
Objetivos del Usuario
•
Intenciones mas inmediatas y de objetivo directo
Publicidad
•
Ventanas emergentes y banners no funcionan bien en dispositivos
pequeños
Limitaciones del dispositivo
•
•
•
Tener en cuenta el procesamiento de la página web
La interpretación de JavaScript, reproducción de videos y el uso de la
red se basan fuertemente en la CPU
Reducción del tiempo de respuesta – mayor uso de la batería –
aumenta la comunicación con el servidor
Diseño centrado en el usuario
21 Abril 2015
9
1 – Buenas Prácticas en la Web móvil
Técnicas y principios I
•
Mejora progresiva:
•
•
•
•
Toda la información y funcionalidad que se desee proporcionar
debería funcionar para todos
Los usuarios de dispositivos más avanzados deben esperar recibir
una mejor experiencia
Ejemplo: es mala práctica pedirle al usuario de un dispositivo con
geolocalización que te diga su ubicación
Fondos y colores: iluminación ambiental
•
Contraste significativo entre el fondo y el texto
Diseño centrado en el usuario
21 Abril 2015
10
1 – Buenas Prácticas en la Web móvil
Técnicas y principios II
•
•
•
Tablas
•
•
Evitar su uso
Las tablas son bidimensionales y las presentaciones en los móviles
lineales
Ventanas emergentes
•
Evitar su uso
Cookies:
•
•
Consejo del W3C: “No asumas que están disponibles y depender de
ellas”
Aumentan el “peso” de la página
Diseño centrado en el usuario
21 Abril 2015
11
1 – Buenas Prácticas en la Web móvil
Entendiendo el Viewport I
•
Perspectiva Web: los usuarios consultan una página Web a través
de lo que se llama el viewport (por lo general, la ventana del
navegador)
•
Separa el concepto de un pixel, el que trabajas en CSS como
diseñador, y el pixel del dispositivo: el punto de luz en la pantalla
•
<meta name="viewport" content="width=device-width" />
•
La estructura de esta página es lo suficiente flexible como para
adaptarse los distintos anchos de pantalla
Diseño centrado en el usuario
21 Abril 2015
12
1 – Buenas Prácticas en la Web móvil
Entendiendo el Viewport II
Diseño centrado en el usuario
21 Abril 2015
13
1 – Buenas Prácticas en la Web móvil
Entendiendo el Viewport III
•
Media Queries
<!-- CSS media query on a link element -->
<link rel="stylesheet" media="(max-width: 800px)"
href="example.css" />
<!-- CSS media query within a style sheet -->
<style>
@media (max-width: 600px) {
.facet_sidebar {
display: none;
}
}
</style>
Diseño centrado en el usuario
21 Abril 2015
14
1 – Buenas Prácticas en la Web móvil
JavaScript para mejorar la experiencia de usuario
•
•
•
•
Separación de contenido, estilo y scripting
Verifica el soporte de características (a menos que utilices
detección de dispositivos)
Coloca los Scripts al final del documento justo antes de la
etiqueta </body>
Accesibilidad: alternativa a JavaScript
Diseño centrado en el usuario
21 Abril 2015
15
2 – Accesibilidad Web
¿Qué es?
•
15% población mundial tiene alguna discapacidad lo que dificulta
o impide su acceso a la web
•
Diseño Web que va a permitir que estas personas puedan
•
Percibir, entender, navegar e interactuar con la Web, aportando a su
vez contenidos
Diseño centrado en el usuario
21 Abril 2015
16
2 – Accesibilidad Web
WCAG
•
•
WCAG 1.0
•
•
•
Año 1999
14 pautas con x puntos de verificación cada una (A, AA, AAA)
http://www.discapnet.es/web_accesible/wcag10/WAI-WEBCONTENT19990505_es.html#toc
WCAG 2.0
•
•
•
Año 2008
4 principios asociados con pautas(nivel de conformidad A,AA,AAA)
http://www.w3.org/TR/WCAG20/
Diseño centrado en el usuario
21 Abril 2015
17
2 – Accesibilidad Web
Normativa: AENOR
•
•
La legislación española actualmente en vigor establece como
obligatoria la UNE 139803:2004
Nueva versión de la norma: UNE 139803:2012
•
•
•
No se ha modificado la legislación por lo que aún no es estrictamente
de aplicación
Las webs accesibles seguirán siendo accesibles con la nueva norma,
aunque pueden requerir algún ajuste porque incorpora algunos
requisitos
Los desarrollos legislativos europeos están tomando como norma de
referencia los requisitos de la WCAG 2.0. Cuando se aprueben y se
adopten a nivel español será estrictamente aplicable los requisitos de
la última versión de las WCAG
Diseño centrado en el usuario
21 Abril 2015
18
2 – Accesibilidad Web
Herramientas
•
Herramientas online
•
Extensiones de Firefox
•
Herramientas locales
Diseño centrado en el usuario
21 Abril 2015
19
2 – Accesibilidad Web
Herramientas online: Inclusión de URL
•
•
•
•
•
Wave, de Webaim. Puedes ver la página con o sin estilos,
analizar el contraste o ver la jerarquía de encabezados.
CynthiaSays. El informe es muy completo, incluye los criterios y
técnicas, por cada nivel, cumplidos, no cumplidos, que no se
aplican o que necesitan revisión manual.
Examinator. En la vista "Tablero" te ofrece la nota alcanzada.
Es el motor de revisión utilizado por walidator.net
Web Accessibility Checker. Permite incluir una URL o subir un
fichero.
Deque Worldspace Free Analysis. Permite revisión por URL,
subir un fichero y la inclusión directa de código. Lo más relevante
es que admite también la revisión de Flash y PDF. Existía una
extensión para Firefox "Qompliance" pero ya no está disponible.
Diseño centrado en el usuario
21 Abril 2015
20
2 – Accesibilidad Web
Herramientas online: Inclusión de URL
•
•
•
•
AccessMonitor Beta. Validador en portugues que permite
verificar una URL, subir un fichero o la entrada directa de código.
Check the Accessibility of a Web Page del Gobierno de
Noruega. La información que ofrece en los resultados es
detallada y otorga una puntuación.
SortSite permite testear 10 páginas, valida no solo aspectos de
accesibilidad de acuerdo a las WCAG 2.0 sino también enlaces
rotos, SEO, usabilidad de acuerdo con las Usability.gov, etc.
Nibbler desde un punto de accesibilidad no es recomendable
porque realiza muy pocas pruebas, pero sí incluye otras
validaciones de medidas de calidad de la página que organiza en
Accesibilidad, Experiencia, Marketing y Tecnología.
Diseño centrado en el usuario
21 Abril 2015
21
2 – Accesibilidad Web
Extensiones de Firefox
•
Hera FFX 2.2, extensión para Firefox de Sidar válida para
versiones anteriores a la 24. Valida de acuerdo a las WCAG 2.0 y
el informe es muy detallado. Tiene la gran ventaja de que
puedes validar la página cargada independientemente de que
haya requerido autenticación, algo que no es posible con las
validaciones mediante URL. Una vez instalada la tienes disponible
en Herramientas>Hera Extension>Summary
•
Accessibility Ainspector, extensión para Firebug que permite
validar de acuerdo a las WCAG 2.0. La beta 0.9 me la desistalé
porque me daba problemas, habrá que ver cómo evoluciona.
Diseño centrado en el usuario
21 Abril 2015
22
2 – Accesibilidad Web
Herramientas locales
•
•
•
aDesigner, es una herramienta local gratuita de IBM valida de
acuerdo a las WCAG 2.0 Muestra también la navegabilidad y la
"escuchabilidad" de la página por un lector de pantalla, y como
será percibida por personas con una discapacidad visual. Admite
la revisión de Flash.
Sortsite, tiene versión online y de escritorio de pago. Permite
validar sitios enteros no solo la accesibilidad de acuerdo a las
WCAG 2.0 sino también enlaces rotos, SEO, usabilidad de
acuerdo con las Usability.gov Se puede consultar todos los
puntos evaluados en Accessibility Standard WCAG 2.0“
Total Validator, en la versión gratuita solo permite evaluar una
página. En la versión de pago permite evaluar un sitio entero
aunque este requiera autenticación y evalúa también enlaces
rotos, etc. Sin embargo desde un punto de vista de accesibilidad
no es muy recomendable.
Diseño centrado en el usuario
21 Abril 2015
23
2 – Accesibilidad Web
Herramientas “completas”
•
Si queremos validar un sitio completo de acuerdo a las WCAG 2.0
•
•
•
•
Taw Monitor sería la mejor opción pero no es libre ni se indica su
precio.
De pago tendríamos Nibbler y Total Validator, pero se recomienda
ninguno de los dos desde el punto de vista de revisión de la
accesibilidad.
Sorsite que parece la mejor opción, chequea 112 puntos de
verificación de las WCAG 2.0, informa exactamente de cuáles evalúa,
el informe es bastante claro y lo complementa con informes sobre
usabilidad, SEO, enlaces rotos, etc. La versión trial online permite
validar 10 páginas y cuesta entre 35 y 199 euros. La versión de
escritorio permite 100 páginas en la evaluación trial y su precio va
entre los 99 y los 349 euros.
El Validator Suite Beta del W3C, de pago, tiene previsto validar de
acuerdo a las WCAG y permite validar sitios completos (precio en
función de número de páginas)
Diseño centrado en el usuario
21 Abril 2015
24
2 – Accesibilidad Web
Herramientas: TAW3
Diseño centrado en el usuario
21 Abril 2015
25
2 – Accesibilidad Web
Herramientas: TAW3
Diseño centrado en el usuario
21 Abril 2015
26
2 – Accesibilidad Web
Herramientas: TAW3
Diseño centrado en el usuario
21 Abril 2015
27
2 – Accesibilidad Web
Herramientas: TAW Monitor
Diseño centrado en el usuario
21 Abril 2015
28
2 – Accesibilidad Web
Herramientas: TAW Monitor
Diseño centrado en el usuario
21 Abril 2015
29
2 – Accesibilidad Web
Herramientas: Sortsite
Diseño centrado en el usuario
21 Abril 2015
30
2 – Accesibilidad Web
Herramientas: Hera-FFX (WCAG 2.0)
•
•
•
•
Universidad Politécnica de Madrid / Fundación Sidar
Versión en pruebas, es parte del proyecto fin de carrera de
alumnos
Complemento del navegador Mozilla Firefox que proporciona
soporte para la evaluación de la accesibilidad web
Análisis automático a medida que se cargan las páginas web en
el navegador y permite completar la revisión al usuario de forma
manual
Diseño centrado en el usuario
21 Abril 2015
31
2 – Accesibilidad Web
Herramientas: Hera-FFX (WCAG 2.0)
Diseño centrado en el usuario
21 Abril 2015
32
2 – Accesibilidad Web
Herramientas: Hera-FFX (WCAG 2.0)
Diseño centrado en el usuario
21 Abril 2015
33
2 – Accesibilidad Web
Herramientas: inSuit
•
•
•
Proporciona accesibilidad y usabilidad web desde la nube
Cumplimiento de los estándares internacionales
Ayuda a las personas con discapacidad, a las personas ancianas
o con pocas capacidades digitales y mejora la usabilidad web
para el público en general
Diseño centrado en el usuario
21 Abril 2015
34
2 – Accesibilidad Web
Herramientas: inSuit
•
•
•
Añade una capa de WAI-ARIA (WAI Acessible Rich Internet
Applications) sobre la página web origen
Automatiza el cumplimiento de objetivos de la WCAG 2.0, y
añade desde la nube las herramientas de navegación que el
usuario necesite
La solución no requiere modificaciones de la web del cliente
Diseño centrado en el usuario
21 Abril 2015
35
2 – Accesibilidad Web
Herramientas: inSuit
•
Ayudas a la navegación disponibles
Diseño centrado en el usuario
21 Abril 2015
36
2 – Accesibilidad Web
Herramientas: inSuit
•
Ayudas a la navegación disponibles
Diseño centrado en el usuario
21 Abril 2015
37
2 – Accesibilidad Web
Herramientas: inSuit
•
Ayudas a la navegación disponibles
Diseño centrado en el usuario
21 Abril 2015
38
3 – Usabilidad Web
¿Qué es?
•
Facilidad con la que las personas pueden utilizar una herramienta
particular o cualquier otro objeto fabricado por humanos con el
fin de alcanzar un objetivo concreto
•
Claridad y la elegancia con que se diseña la interacción con un
programa de ordenador o un sitio web
Diseño centrado en el usuario
21 Abril 2015
39
3 – Usabilidad Web
Principios básicos
•
Facilidad de Aprendizaje. Facilidad con la que nuevos usuarios
desarrollan una interacción efectiva con el sistema o producto
•
Facilidad de uso. Facilidad con la que el usuario hace uso de la
herramienta, con menos pasos o más naturales a su formación
específica. Eficacia - Eficiencia
•
Flexibilidad. Relativa a la variedad de posibilidades con las que
el usuario y el sistema pueden intercambiar información
•
Robustez. Nivel de apoyo al usuario que facilita el cumplimiento
de sus objetivos
Diseño centrado en el usuario
21 Abril 2015
40
3 – Usabilidad Web
Beneficios
•
•
•
•
•
•
•
Reducción de los costes de aprendizaje y esfuerzos
Disminución de los costes de asistencia y ayuda al usuario
Disminución en la tasa de errores cometidos por el usuario
Aumento de la tasa de conversión de visitantes a clientes de un
sitio web
Aumento de la satisfacción y comodidad del usuario
Mejora la imagen y el prestigio
Mejora la calidad de vida de los usuarios, ya que reduce su
estrés, incrementa la satisfacción y la productividad
Diseño centrado en el usuario
21 Abril 2015
41
3 – Usabilidad Web
Mejorando la usabilidad: test de usuarios
•
Prueba de usabilidad basada en la observación y análisis de cómo
un grupo de usuarios reales utiliza el sitio web. Se anotan los
problemas de uso con los que se encuentran para poder
solucionarlos posteriormente
Diseño centrado en el usuario
21 Abril 2015
42
3 – Usabilidad Web
Test de usuarios: Pasos
1. Selección de participantes
2. Preparación de los materiales
3. Planificación de la prueba
4. Desarrollo de la prueba
5. Informe de usabilidad con las conclusiones
Diseño centrado en el usuario
21 Abril 2015
43
3 – Usabilidad Web
Test de usuarios: Tareas
1. Definir los objetivos
2. Definir los casos de uso: tareas
3. Definir el procedimiento:
1. Elección de usuarios
2. Planificación del calendario
3. Posibles incentivos
4. Ejecución del test
1. Preparación de las historias
2. Preparar cómo se va a realizar la evaluación
3. Test
4. Análisis de resultados
5. Informe
Diseño centrado en el usuario
21 Abril 2015
44
Buenas prácticas en la web móvil
Accesibilidad y usabilidad
Laura Fernando López
21 de Abril de 2015