buenas prácticas en la web móvil accesibilidad y...

Buenas prácticas en la web móvil

Accesibilidad y usabilidad

Laura Fernando López

21 de Abril de 2015

• 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

Índice

2 Diseño centrado en el usuario 21 Abril 2015

• ¿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?

1 – Buenas Prácticas en la Web móvil


• 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

1 – Buenas Prácticas en la Web móvil Retos y oportunidades


1 – Buenas Prácticas en la Web móvil Incremento de tráfico de la web móvil


Visitas 2013

Escritorio

Móvil

Tablet

Visitas 2014

Escritorio

Móvil

Tablet

Visitas 2015

Escritorio

Móvil

Tablet

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

• 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

1 – Buenas Prácticas en la Web móvil W3C: apps web


http://www.w3.org/2008/webapps/

http://www.w3.org/2009/dap/

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

1 – Buenas Prácticas en la Web móvil Retos I


• 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

1 – Buenas Prácticas en la Web móvil Retos II


• 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

1 – Buenas Prácticas en la Web móvil Técnicas y principios I


• 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

1 – Buenas Prácticas en la Web móvil Técnicas y principios II


• 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

1 – Buenas Prácticas en la Web móvil Entendiendo el Viewport I


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


• Media Queries

1 – Buenas Prácticas en la Web móvil Entendiendo el Viewport III


 <link rel="stylesheet" media="(max-width: 800px)" href="example.css" />  <style> @media (max-width: 600px) { .facet_sidebar { display: none; } } </style>

• 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

1 – Buenas Prácticas en la Web móvil JavaScript para mejorar la experiencia de usuario


• 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

2 – Accesibilidad Web ¿Qué es?


• 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-WEBCONTENT-19990505_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/

2 – Accesibilidad Web WCAG


http://www.discapnet.es/web_accesible/wcag10/WAI-WEBCONTENT-19990505_es.html





http://www.w3.org/TR/WCAG20/

• 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

2 – Accesibilidad Web Normativa: AENOR


2 – Accesibilidad Web Herramientas


• Herramientas online

• Extensiones de Firefox

• Herramientas locales

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.

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.

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.

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.

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)

2 – Accesibilidad Web Herramientas: TAW3


2 – Accesibilidad Web Herramientas: TAW Monitor


2 – Accesibilidad Web Herramientas: Sortsite


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

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



• 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



• Ayudas a la navegación disponibles

• 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

3 – Usabilidad Web ¿Qué es?


• 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

3 – Usabilidad Web Principios básicos


• 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

3 – Usabilidad Web Beneficios


• 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

3 – Usabilidad Web Mejorando la usabilidad: test de usuarios


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

3 – Usabilidad Web Test de usuarios: Pasos


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

3 – Usabilidad Web Test de usuarios: Tareas


Buenas prácticas en la web móvil

Accesibilidad y usabilidad

Laura Fernando López

21 de Abril de 2015

buenas prácticas en la web móvil accesibilidad y...

Documents