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

Transcripción

1 Buenas prácticas en la web móvil Accesibilidad y usabilidad Laura Fernando López 21 de Abril de 2015

2 Í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 2

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

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

5 1 Buenas Prácticas en la Web móvil Incremento de tráfico de la web móvil Visitas 2013 Visitas 2014 Escritorio Móvil Tablet Escritorio Móvil Tablet Visitas 2015 Escritorio Móvil Tablet 5

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

7 1 Buenas Prácticas en la Web móvil W3C: apps web Grupo de trabajo, Web Applications Working Group 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 Produce estándares como: Contactos Calendario Medios de captura: cámara y micrófono Estado de la batería 7

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

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

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

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

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

13 1 Buenas Prácticas en la Web móvil Entendiendo el Viewport II 13

14 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 --> (max-width: 600px) {.facet_sidebar { display: none; } } </style> 14

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

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

17 WCAG WCAG 1.0 Año pautas con x puntos de verificación cada una (A, AA, AAA) _es.html#toc WCAG 2.0 Año principios asociados con pautas(nivel de conformidad A,AA,AAA) 17

18 Normativa: AENOR La legislación española actualmente en vigor establece como obligatoria la UNE :2004 Nueva versión de la norma: UNE :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 18

19 Herramientas Herramientas online Extensiones de Firefox Herramientas locales 19

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

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

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

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

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

25 Herramientas: TAW3 25

26 Herramientas: TAW3 26

27 Herramientas: TAW3 27

28 Herramientas: TAW Monitor 28

29 Herramientas: TAW Monitor 29

30 Herramientas: Sortsite 30

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

32 Herramientas: Hera-FFX (WCAG 2.0) 32

33 Herramientas: Hera-FFX (WCAG 2.0) 33

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

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

36 Herramientas: insuit Ayudas a la navegación disponibles 36

37 Herramientas: insuit Ayudas a la navegación disponibles 37

38 Herramientas: insuit Ayudas a la navegación disponibles 38

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

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

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

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

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

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

45 Buenas prácticas en la web móvil Accesibilidad y usabilidad Laura Fernando López 21 de Abril de 2015