Usabilidad web: Arquitectura de información y wireframes

En esta entrada voy a hablar de un concepto importante para todas las personas relacionadas con el mundo del diseño y la usabilidad: Los wireframes o prototipos.

Pero antes de empezar, toca hacer una pequeña introducción sobre los wireframes. El primer paso que hay que dar para llevar a cabo los wireframes es la representación mediante diagramas para establecer el contenido de la interfaz y la estructura que contiene. Sirve para la propuesta del producto final.

 

 

La definición de Arquitectura de Información la acuñó Richard Saul Wurman en 1975. La define como:

El estudio de la organización de la información con el objetivo de permitir al usuario encontrar su vía de navegación hacia el conocimiento y la comprensión de la información

En la Arquitectura de Información existen dos tipos de diagramas: Planos o mapas web, (blueprints) y maquetas (wireframes).

A los planos o mapas web sencillos se les denomina diagramas de organización y funcionamiento. Estos diagramas tienen un objetivo: mostrar cuál será la estructura del sitio web y su flujo de navegación.

A las maquetas se les denomina diagramas de presentación, donde podemos hablar de diferentes tipos de prototipos.

Los prototipos pueden tener múltiples niveles de detalle y pueden dividirse en dos categorías en términos de fidelidad: Baja fidelidad y alta fidelidad.

  • Baja fidelidad: Se caracteriza por un dibujo en bruto o un boceto rápido, los wireframes de baja fidelidad tienen menos detalles y son rápidos de producir. Estos wireframes ayudan a un equipo de proyecto a colaborar más efectivamente debido a que son más abstractos, usando rectángulos y etiquetas para representar el contenido. Para dibujos sencillos o de baja fidelidad, los prototipos en papel es una técnica común. Como estos son sólo representaciones, las notas al margen para explicar comportamientos son útiles.

Ejemplo de ello son los sketches, que son bocetos rápidos para transmitir cualquier idea. Es una forma eficaz de comenzar el prototipado de un sitio web, pues permite trabajar ágilmente con varias ideas y esquematizar las páginas.

  • Alta fidelidad: Los wireframes de alta fidelidad o maquetas son usados a menudo para documentar, porque ellos incorporan un nivel de detalle que se acerca más al diseño final de una página web, pero toma más tiempo para ser creado.

Algunas herramientas permiten incorporar interactividad, incluyendo animación en Flash, y tecnologías de presentación web como HTML, CSS, y JavaScript.

¿Qué son los wireframes (o prototipos)?

Un wireframe o prototipo es un boceto donde se representa visualmente, de una forma muy sencilla y esquemática la estructura de un sitio web. Es una representación gráfica del contenido del sitio web.

El objetivo de estos es definir el contenido y la posición de los diversos bloques del sitio web. Esto incluye los menús de navegación, bloques de contenido, botones, formularios, listas…etc Además, te permite ver cómo interactuarán estos elementos entre sí.

Propósitos de los wireframes

Los wireframes tienen varios propósitos:

  • Garantizar que el sitio o la aplicación se desarrolle de conformidad con los fines acordados. La creación de wireframes establece expectativas sobre cómo se implementarán las funciones, mostrando cómo funcionarán, dónde estarán ubicadas y cuántos beneficios ofrecerán. Se puede eliminar una función porque no se adecúa a los objetivos de tu página web.
  • Centrarse en la facilidad de uso. La creación de diagramas ofrece una mirada objetiva de los nombres de enlaces, rutas de conversión, facilidad de uso, navegación, y disposición de las funciones. Te ayudan a identificar fallos en la arquitectura del sitio o las funciones y te indican cómo fluye desde la perspectiva del usuario.
  • Capacidad de crecimiento del contenido. Si sabes que tu página web crecerá en un futuro próximo, tu sitio debe estar preparado para que ese crecimiento tenga un impacto mínimo en el diseño, la facilidad de uso y la arquitectura del sitio. La creación de wireframes puede revelar estas importantes oportunidades de crecimiento del contenido y cómo adaptarse a ellas.
  • Comentarios e iteración sin esfuerzo. Los wireframes garantizan que el diseño y los elementos creativos en un solo paso, se aborden de forma separada. Esto permite a los interesados brindar comentarios en etapas más tempranas del proceso.

 

Tipos de wireframes

Hay tres tipos de wireframes diferentes que varían desde el más simple (planos o modelos en blanco y negro) hasta el más complejo (casi simula el producto real):

  • Wireframes básicos: Modelos en blanco y negro.
  • Con anotaciones y navegación: Contiene información básica a través de bloques de funcionalidad, crea fluido de navegación y el agrupamiento de contenidos.
  • Wireframes detallados y en plataformas: Wireframes realizados con todas las funcionalidades y las herramientas necesarias para ello.

Ventajas de usar wireframes

  • Sirven para plasmar ideas: Son el primer paso para que las ideas abstractas sean concretas y visibles
  • Son rápidos y baratos de crear: Al ser bocetos esquemáticos, son rápidos de crear y tienen un coste muy bajo. Esto te permite realizar múltiples versiones hasta encontrar la adecuada sin que ello suponga un problema de tiempo o dinero.
  • Ayuda a detectar y corregir los problemas antes: Al ser sencillos y rápidos de realizar, te permiten exponerlos rápidamente a una retroalimentación y resolver problemas básicos relacionados con la usabilidad y las funcionalidades propuestas.
  • Obtener mejoras: Sirve para repasar las mejoras que se puedan realizar en el diseño, el posicionamiento de los elementos o la estructura de los contenidos.
  • Mejora la usabilidad: Definir previamente la estructura y los elementos de la página web te permitirá mejorar la usabilidad, evitando así los errores que se puedan dar sobre la marcha.
  • Permiten a los diseñadores tener libertad para diseñar la interfaz.
  • Permite la comunicación del equipo de trabajo y los usuarios.

Usabilidad web: Experiencia de usuario. Principios y métodos.

Esta semana toca hablar de un libro de usabilidad. Se titula Experiencia de usuario: Principios y métodos. El autor es Yusef Hassan Montero.

El libro se estructura en tres grandes bloques.

Conceptos fundamentales

En él se describen y explican los conceptos esenciales para comprender y fundamentar los siguientes capítulos: usabilidad, accesibilidad, arquitectura de información, diseño centrado en el usuario, interacción y estilos de interacción, affordance, modelos mentales, necesidades y estrategias de búsqueda de información y relación esfuerzo-beneficio.

Portada del libro de Yusef Hassan Montero. Experiencia de usuario: Principios y métodos

Dedica a cada concepto dos o tres páginas, los explica de forma clara y concisa, e incluye al final de cada uno una bibliografía relacionada.

Principios de diseño

En este apartado se recogen y desgranan los principios de diseño más destacados sobre los que partir a la hora de tomar decisiones de diseño: clasificación, color, eficiencia, error humano, estética, fotografías, gestalt, iconos, inteligencia colectiva, jerarquía visual, legibilidad e inteligibilidad, ley de Fitts, mapeo natural, ordenación, relevancia, taxonomías, toma de decisiones, y visibilidad y retroalimentación.

De nuevo explica cada uno de ellos de forma concisa, en este caso con una media de cuatro páginas por principio. Incluye en cada uno ejemplos, bibliografía y una relación de los principios con los que está relacionado.

Métodos

En esta parte se describen los métodos y técnicas más importantes del Diseño Centrado en el Usuario: analítica web, card sorting (y treejack), diagramas de interacción, diseño modular, encuestas y entrevistas, evaluación heurística, personajes y escenarios (y User Journey Maps), pruebas A/B, pruebas con usuarios, ROI y wireframes.

La organización es la misma que en los apartados anteriores, una media de cuatro páginas para cada uno, indicando su función y procedimiento, con ejemplos, bibliografía y las etapas del proceso para las que resultan pertinentes.

Es un libro muy recomendable. Sirve para todos aquellas personas quese quieran introducir en el mundo de la experiencia de usuario, y sirve como consulta para los expertos en el tema.  Es claro, es conciso, con ejemplos y con bibliografía asociada a cada concepto. El propio diseño y estructura del libro hace que sea muy cómodo de leer, tanto de forma lineal como a modo de consulta, como un glosario muy detallado.

Directiva europea 2016/2012 sobre la accesibilidad de los sitios web y aplicaciones móviles

Tras un proceso de 4 años, el 26 de octubre de 2016 se aprobó la Directiva (UE) 2016/2102 del Parlamento Europeo y del Consejo, de 26 de octubre de 2016, sobre la accesibilidad de los sitios web y aplicaciones para dispositivos móviles de los organismos del sector público.

directiva europea 2016_2012

Objetivo de la directiva

El objetivo de la directiva es armonizar los requisitos de accesibilidad de los sitios web y aplicaciones para dispositivos móviles de los organismos del sector público:

La presente Directiva establece las normas por las que se exige a los Estados miembros que garanticen que los sitios web, independientemente del dispositivo empleado para acceder a ellos, y las aplicaciones para dispositivos móviles de los organismos del sector público cumplan los requisitos de accesibilidad.

Lo primero que deberíamos aclarar es qué es una directiva en el marco jurídico de la Unión Europea.

¿Qué es una directiva?

Las directivas son actos legislativos en los cuales se establecen objetivos que todos los países de la UE deben cumplir. Sin embargo, corresponde a cada país elaborar sus propias leyes sobre cómo alcanzar estos objetivos.

La directiva obliga a los Estados miembros destinatarios (uno, varios o todos ellos) en cuanto al resultado que debe conseguirse, dejándoles, sin embargo, la elección de la forma y de los medios.

El legislador nacional debe adoptar un acto de transposición en el Derecho interno mediante el que se adapte la legislación nacional a tenor de los objetivos definidos en la directiva.

Este acto de transposición es el que en esencia confiere derechos e impone obligaciones al ciudadano. Los Estados miembros disponen de facultades discrecionales en la transposición al Derecho nacional, lo que les permite tener en cuenta las particularidades nacionales.

La transposición debe efectuarse en el plazo establecido por la directiva. Al transponer las directivas, los Estados miembros deben garantizar la eficacia del Derecho de la Unión, de conformidad con el principio de cooperación leal consagrado en el artículo 4, apartado 3, del TUE.

En principio, las directivas no son directamente aplicables. Sin embargo, el Tribunal de Justicia de la Unión Europea ha considerado que, de forma excepcional, determinadas disposiciones de una directiva pueden tener efectos directos en un Estado miembro sin que sea necesario que este último haya adoptado un acto de transposición previo, siempre que: a) la directiva no haya sido transpuesta o lo haya sido de forma incorrecta; b) las disposiciones de la directiva sean incondicionales y suficientemente claras y precisas; y c) las disposiciones de la directiva confieran derechos a los individuos. Si se reúnen estas condiciones, un particular puede hacer valer las disposiciones de la directiva ante cualquier autoridad pública.

Por tanto, la directiva es de obligado cumplimiento pero no es directamente aplicable, sino que ahora España (y de igual forma cada país) debe elaborar una ley que respete, como mínimo, el alcance y los requisitos de accesibilidad estipulados en esta directiva.

La ley española deberá respetar “como mínimo” el alcance y los requisitos de accesibilidad de la directiva porque el artículo 2 lo establece así:

Artículo 2. Armonización mínima

Los Estados miembros podrán mantener o introducir medidas conformes al Derecho de la Unión que vayan más allá de los requisitos mínimos de accesibilidad de los sitios web y aplicaciones para dispositivos móviles dispuestos en la presente Directiva.

Es decir, que la ley de un país podrá ser luego más exigente que lo estipulado en la directiva. De hecho, la propia directiva anima a ampliar su alcance.

También puede darse el caso de que en algunos casos la propia legislación del país puede ser ya más exigente que la directiva europea.

 

¿Cuánto tiempo tiene España para elaborar la ley que adapte la directiva a su legislación?

Los Estados miembros tienen un plazo estipulado para llevar a cabo la adaptación de la directiva, en caso contrario, la Comisión abrirá un procedimiento de infracción:

Cuando un país no transpone una Directiva, la Comisión puede incoar un procedimiento de infracción e instruir un procedimiento contra el país ante el Tribunal de Justicia de la UE (el incumplimiento de la sentencia dictada con este motivo puede derivar en una nueva condena que puede concluir en la imposición de multas).

En Directivas de la Unión Europea, Eur-lex

En consecuencia, podemos estar bastante seguros de que la directiva será transpuesta a nuestra legislación para evitar sanciones. El plazo que estipula la directiva para ello es el 23 de septiembre de 2018:

Artículo 12. Transposición

Los Estados miembros pondrán en vigor a más tardar el 23 de septiembre de 2018 las disposiciones legales, reglamentarias y administrativas necesarias para dar cumplimiento a lo establecido en la presente Directiva. Informarán inmediatamente de ello a la Comisión.

¿Cuándo deben empezar los sitios web y apps del sector público español a cumplir con la directiva?

En primer lugar, como hemos visto, deberemos esperar a que España apruebe una ley propia en la que transponga la directiva europea.

Pero la directiva ya estipula los plazos en los que entraría en vigor la obligación de cumplir con los requisitos de accesibilidad:

  • Sitios web nuevos (publicados después del 23 de septiembre de 2018): deberán ser accesibles a partir del 23 de septiembre de 2019.
  • Resto de sitios web (publicados antes del 23 de septiembre de 2018): deberán ser accesibles a partir del 23 de septiembre de 2020.
  • Aplicaciones para dispositivos móviles: deberán ser accesibles a partir del 23 de junio de 2021.

 

El 23 de septiembre de 2018, los estados deben haber transpuesto la directiva a sus legislaciones o de lo contrario serían sancionados.

Norma EN 301 549

La norma EN 301 549 es el estándar europeo que dicta los requisitos de accesibilidad de cualquier producto y servicio: páginas web, software incluidas apps nativas, documentos, hardware, etc.

La Directiva (UE) 2016/2102 “sobre la accesibilidad de los sitios web y aplicaciones para dispositivos móviles de los organismos del sector público”, establece como norma a seguir la EN 301 549.

En estos momentos, ya tenemos el borrador de la que será la próxima versión EN 301 549  (PDF). En ella se incluye un anexo A. “Relationship between the present document and the essential requirements of Directive 2016/2102”, con dos tablas:

  • Tabla A: requisitos que se aplican a las páginas web: capítulo 9 (WCAG 2.0) y capítulo 12 “Documentación y servicios de atención al cliente”, y otros capítulos condicionalmente
  • Tabla B: requisitos que se aplican a las aplicaciones móviles: capítulo 11 “Software” (WCAG 2.0 con excepciones y criterios adicionales) y 12 “Documentación y servicios de atención al cliente”, y otros capítulos condicionalmente.

 

¿Quiénes están obligados a cumplir con los requisitos de accesibilidad de la directiva?

La Directiva establece los requisitos de accesibilidad que deben cumplir los sitios web y aplicaciones móviles del sector público. NO incluye a las empresas privadas.

¿Qué se entiende por “sector público”?

Artículo 3. Definiciones

1) «organismo del sector público»: el Estado, las entidades territoriales, los organismos de Derecho público según se definen en el artículo 2, apartado 1, punto 4, de la Directiva 2014/24/UE, o las asociaciones constituidas por una o más de dichas entidades o uno o más de dichos organismos de Derecho público, si esas asociaciones se han establecido con el propósito específico de atender necesidades de interés general, sin tener carácter industrial ni comercial;

Los organismos de Derecho público se definen así en la Directiva 2014/24/UE:

4) «Organismo de Derecho público»: cualquier organismo que reúna todas las características siguientes:

a) que se haya creado específicamente para satisfacer necesidades de interés general que no tengan carácter industrial o mercantil;

b) que esté dotado de personalidad jurídica propia, y

c) que esté financiado mayoritariamente por el Estado, las autoridades regionales o locales, u otros organismos de Derecho público, o cuya gestión esté sujeta a la supervisión de dichas autoridades u organismos, o que tenga un órgano de administración, de dirección o de supervisión, en el que más de la mitad de los miembros sean nombrados por el Estado, las autoridades regionales o locales, u otros organismos de Derecho público.

Sin embargo, se establecen algunas excepciones.

NO se aplica a los siguientes sitios web y aplicaciones móviles

3. La presente Directiva no se aplica a los siguientes sitios web y aplicaciones para dispositivos móviles:

a) sitios web y aplicaciones para dispositivos móviles de prestadores del servicio público de radiodifusión y sus filiales, así como los de otros organismos o sus filiales que cumplan un mandato de servicio público de radiodifusión;

b) sitios web y aplicaciones para dispositivos móviles de ONG que no presten servicios esenciales a los ciudadanos ni servicios que traten específicamente las necesidades de las personas con discapacidad o estén diseñados para ello.

5. Los Estados miembros podrán excluir del ámbito de aplicación de la presente Directiva los sitios web y las aplicaciones para dispositivos móviles de escuelas, jardines de infancia o guarderías, excepto en lo relativo a las funciones administrativas esenciales en línea.

(33) Las funciones administrativas esenciales en línea de escuelas, jardines de infancia y guarderías deben ser accesibles. Cuando ese contenido esencial se proporcione de manera accesible en otro sitio web, no debe ser necesario que también sea accesible en la página web del centro de que se trate.

A pesar de ello, la directiva anima a los estados a ampliar el ámbito de aplicación de la Directiva:

(34) […] debe animarse a los Estados miembros a que amplíen la aplicación de la presente Directiva a las entidades privadas que ofrezcan instalaciones y servicios abiertos al público o de uso público, entre otros en los ámbitos de la asistencia sanitaria, la asistencia infantil, la inclusión social y la seguridad social, así como en el sector del transporte y la electricidad, el gas, la calefacción, el agua, las comunicaciones electrónicas y los servicios postales

(35) Si bien la presente Directiva no se aplica a los sitios web ni a las aplicaciones para dispositivos móviles de las instituciones de la Unión, se anima a estas a cumplir los requisitos de accesibilidad de la presente Directiva.

La legislación española ya obliga a las empresas privadas de más de 100 trabajadores o que facturen más de 6 millones de euros a tener sitios web accesibles, especialmente a las empresas “de los sectores de mayor incidencia en la actividad económica, entre otras, compañías dedicadas al suministro de electricidad, agua y gas, telecomunicaciones, entidades financieras, aseguradoras, grandes superficies, transportes, agencias de viaje” (Ley 56/2007, de 28 de diciembre, de Medidas de Impulso de la Sociedad de la Información).

Habrá que esperar a la transposición de la directiva para ver si se mantienen estas exigencias extras de la actual legislación española. Esperemos que sí.

¿A qué tipo de contenidos afecta?

Se aplica al contenido de sitios web y a las aplicaciones para dispositivos móviles, cuyo alcance se concreta detalladamente en la directiva:

2) «aplicaciones para dispositivos móviles»: las aplicaciones informáticas diseñadas y desarrolladas por organismos del sector público o por su cuenta, para ser usadas por el público en general en dispositivos móviles, como teléfonos inteligentes y tabletas. No incluyen el software que controla dichos dispositivos (sistemas operativos para dispositivos móviles) ni el equipo informático;

(19) El contenido de los sitios web y de las aplicaciones para dispositivos móviles incluye la información tanto textual como no textual, los documentos y formularios que se pueden descargar, así como las formas de interacción bidireccional, como el tratamiento de formularios digitales y la cumplimentación de los procesos de autenticación, identificación y pago.

Por tanto, por si quedaba alguna duda, los PDF u otros archivos que se pueden descargar de una web deben ser también accesibles.

La directiva establece una serie de exclusiones, algunas temporales y otras permanentes, e indica que “esas exclusiones deben volver a valorarse en el contexto del examen de la presente Directiva a la luz de los futuros avances de la tecnología”.

Otras medidas para fomentar la accesibilidad

En la directiva se tratan también otras medidas:

  • fomentar y facilitar programas de formación sobre cómo crear, gestionar y actualizar contenidos de sitios web y aplicaciones para dispositivos móviles accesibles,
  • medidas de concienciación,
  • consultas periódicas por parte de los Estados miembros a las organizaciones que representan los intereses de las personas con discapacidad y personas de edad avanzada,
  • la promoción por parte de los Estados miembros del uso de determinadas herramientas de autor que permitan una mejor aplicación de los requisitos de accesibilidad,
  • la cooperación entre los Estados miembros para intercambiar buenas prácticas, o revisar el mercado o la evolución de la tecnología en materia de accesibilidad web.

 

Antes de finalizar, os dejo un resumen de las fechas importantes a tener en cuenta.

Esquema de la directiva

Año 2016 – Se aprueba y entra en vigor la directiva

  • 26 de octubre: Se aprueba la directiva
  • 2 de diciembre: Se publica en el Diario Oficial de la Unión Europea. (DOUE)
  • 22 de diciembre: entra en vigor.

 

Año 2018 – Fecha límite para la transposición nacional de la directiva

  • 23 de septiembre: transposición nacional
  • 23 de diciembre: La Comisión proporcionará modelo de declaración de conformidad, la metodología para el seguimiento y las disposiciones paera la presentación de informes.
  • Ese mismo día, los estados comunicarán el organismo de la aplicación de la directiva y del seguimiento y la presentación de informes.

Año 2019 – Obligación para los sitios web nuevos

  • 23 de septiembre: Deberán ser accesibles los sitios publicados después del 23 de septiembre de 2018

Año 2020 – Obligación para todos los sitios web

  • 23 de septiembre: Deberán ser accesibles todos los sitios web.

Año 2021 – Obligación para las apps

  • 23 de junio: deberán ser accesibles las app
  • 23 de diciembre: los estados presentarán su primer informe

 

Accesibilidad web: Cómo trabajar los textos alternativos en las imágenes

En esta entrada voy a hablar de uno de los principales problemas de accesibilidad web que hay. Aún habrá muchas personas que no lo sepan, así que no viene mal recordarlo: Los textos alternativos en las imágenes.

Accesibilidad web: Cómo trabajar los textos alternativos para las imágenes

Textos alternativos en las imágenes

Uno de los errores más habituales es que se encuentran textos alternativos que no son los adecuados. Porque a veces no se tiene en cuenta el contexto o la función de la imagen.

Para identificar más fácilmente cuál es la función de las imágenes, hay que pararse a pensar en las características del criterio 1.1.1 de las WCAG 2.0.

Por lo tanto, vamos a definir las diferentes opciones o posibilidades que se pueden dar a la hora de analizar una imagen.

¿La imagen es o forma parte de un enlace o botón?

Sí, la imagen es el único elemento dentro del enlace o es un mapa de imagen o un botón de tipo imagen:

  • Si la imagen es un logo, o es un icono, imagen o botón de tipo imagen en el que la imagen no tiene texto (por ejemplo un icono de una lupa) se debe añadir a la imagen o al botón de imagen el atributo alt, en el cual se indique la función de la imagen. Por ejemplo: alt="Buscar" (para el icono de una lupa) o alt="Página principal de la web de Mª Carmen de Alba (para el logotipo)
  • Si es un icono, imagen o botón de tipo imagen en el que la imagen tiene texto (como por ejemplo una imagen, o un botón de tipo imagen, con un sobre y el texto “Enviar”), se debe añadir a la imagen (o al botón de tipo imagen) el atributo alt, en el cual se indique la función de la imagen que normalmente será su texto (por ejemplo: alt="Enviar")
  • Si es un mapa de imagen (por ejemplo un mapa de España), a la imagen se debe añadir un atributo alt que identifique el contenido y su función (por ejemplo alt="Mapa de España. Seleccione una Comunidad Autónoma para acceder a su información turística") y a las áreas del mapa se les debe añadir el atributo alt identificando cada área (por ejemplo, alt="Galicia"). Con la técnica H24 puedes ampliar información sobre esta característica.

O por el contrario:

No, la imagen no es el único elemento dentro del enlace, ni es un mapa de imagen ni un botón de tipo imagen:

  • Si la imagen aporta información adicional al texto del enlace, y por tanto complementa la información del texto del enlace (por ejemplo un enlace que incluye el texto “Ponencia WordCamp Chiclana 2017” seguido de un icono de fichero PDF), se debe incluir a la imagen un atributo alt con la información adicional que transmite la imagen (por ejemplo alt="en formato PDF").
  • Si la imagen no aporta información adicional, es solo decorativa (por ejemplo el icono de una casa delante del enlace “Home”) tendrá el atributo alt vacío (y no debe incluirse el atributo title, a menos que también esté vacío), o bien la imagen se definirá en la CSS, por ejemplo con background-image.

 

¿La imagen es decorativa, invisible o no proporciona información adicional? (y no es un enlace)

  • Si, la imagen es decorativa, invisible y no aporta información adicional.

Por ejemplo un icono de advertencia que va seguido de un texto que ya comienza por “¡Advertencia!”. La imagen deberá tener el atributo alt vacío (y no debe incluirse el atributo title, a menos que también esté vacío) o bien se deberá definir la imagen en la CSS, por ejemplo mediante background-image.

  • No, la imagen aporta información y apoya al contenido.

En este caso hay que comprobar si se trata es un cuadro o crea una experiencia sensorial.

Si se trata de un cuadro, se incluirá el atributo alt indicando el nombre de la obra comúnmente aceptado (si lo tiene, por ejemplo alt="Las meninas de Velázquez") o una breve descripción que identifique el contenido.

Las meninas de Velázquez
No, no es un cuadro. Aquí debes incluir el atributo alt a la imagen.
El texto alternativo proporcionado por este atributo debe ser una breve descripción que identifique el contenido. (por ejemplo, en el caso de una escultura de arena, alt="Gran escultura de arena en una playa. Representa un rostro furioso de hombre hundido en la arena por una mano.")

Gran escultura de arena en una playa. Representa un rostro furioso de hombre hundido en la arena por una mano

Si es posible o útil se puede incluir un texto descriptivo adicional, por ejemplo si existe alguna razón especial por la cual se ha incluido dicha imagen en la página.

¿La imagen es parte de una prueba o test que queda invalidado si se describe la imagen? (y no es un enlace)

  • Si es una prueba o test visual (por ejemplo un test lógico de formas o un test de daltonimo) se incluirá a la imagen el atributo alt con una breve descripción que identifique el contenido (por ejemplo alt="Test visual de daltonismo")

 

test visual de daltonismo

  • Si se trata de un CAPTCHA, una prueba para comprobar si el usuario es una persona o una máquina, se incluirá a la imagen un atributo alt que indique el propósito del CAPTCHA (por ejemplo alt="Introduce este texto en el campo 'Captcha'. Si no puedes ver la imagen pulsa el botón 'Audio' disponible tras la imagen.") y también es necesario ofrecer otro CAPTCHA alternativo en una modalidad sensorial diferente, por ejemplo auditiva.

Captcha

¿La imagen forma parte de una serie de imágenes contiguas que transmiten una información de forma conjunta?

  • , la imagen forma parte de una serie de imágenes contiguas que transmiten una información de forma conjunta

Por ejemplo, en una puntuación de 5 estrellas, formada con cinco imágenes de estrellas contiguas, tres en amarillo y dos en blanco, el alt de la primera imagen será: alt="Puntuación: tres estrellas de cinco", y el resto de las imágenes tendrán texto alternativo nulo, alt="".

No, la imagen no forma parte de una serie de imágenes contiguas que transmiten una información de forma conjunta.

  • Si la imagen solo tiene texto se incluirá el atributo alt con el texto de la imagen (por ejemplo, para una imagen con el texto “5 años de garantía” se incluirá alt="5 años de garantía") Es preferible usar texto con el estilo deseado definido en la CSS en vez de una imagen de texto.
  • Si la imagen incluye texto no decorativo (por ejemplo la imagen de un gráfico con el texto de la leyenda y el título incluidos como parte de la imagen, se incluirá el atributo alt con la información que transmite la imagen y que debe incluir el texto. Por ejemplo, alt="Venta de comida. Gráfico circular: Sandwich=20%, Ensaladas=15% Sopas=25% Bebidas=22% y Postres=18%"

Como recomendación, usa texto y no imágenes de texto siempre que sea posible.

Gráfico

 

  • Si la imagen no contiene texto, incluye un atributo alt con la información que transmite la imagen. Por ejemplo, un icono de advertencia, seguido de un párrafo de texto “Tu sesión está a punto de expirar” tendrá como texto alternativo alt="¡Advertencia!". O por ejemplo, una imagen de los jugadores del Real Madrid levantando la Copa de Europa tendrá como texto alternativo alt="Sergio Ramos, capitán del Real Madrid levantando la Copa de Europa acompañado de sus compañeros"

 

Sergio Ramos, capitán del Real Madrid levantando la Copa de Europa acompañado de sus compañeros

 

Texto alternativo en imágenes complejas

Si la imagen es compleja tendrá un atributo alt que identifique el contenido o que proporcione una breve descripción del mismo. Además deberá tener una descripción larga que puede proporcionarse por medio de diferentes técnicas:

  • En otra página: se debe incluir el enlace a esta página adyacente a la imagen, inmediatamente antes o después de la misma.
  • En la misma página, a continuación de la imagen: incluir en el alt una referencia a la ubicación de la descripción larga.
  • En la misma página, lejos de la imagen: se debe incluir un enlace (un ancla) a la zona de la descripción. Este enlace debe estar inmediatamente antes o después de la imagen.
  • Mediante el atributo LONGDESC, siempre que no sobrepase los 150 caracteres.

 

¿A quién beneficia?

  • A las personas con dificultades para percibir el contenido visual (personas con ceguera, baja visión, sordo-ciegas) o con dificultades de comprensión del contenido visual. La información contenida en el texto se puede presentar al usuario de la manera que mejor se adapte a sus necesidades: en braille, leída en voz alta o presentarla visualmente.
  • A las personas que por limitaciones técnicas no pueden acceder al contenido visual: navegan con las imágenes deshabilitadas por tener una conexión lenta o para ahorrar costes en la tarifa por datos, hay un problema en el servidor y no se están sirviendo las imágenes o alguna de estas ya no está disponible. También pueden estar usando un navegador solo-texto.
  • A los buscadores web, pues se basan en el contenido textual para indexar los contenidos.

 

Usabilidad y diseño: “100 cosas más…”

En esta entrada os voy a hablar del libro de Susan Weinschenk “100 cosas más sobre la gente que cada diseñador necesita saber”, doctora en psicología con más de 30 años de experiencia. Se le conoce como la “Dama Cerebro” porque lleva muchos años estudiando e investigando las motivaciones de los consumidores y sus comportamientos.

100 cosas más sobre la gente que cada diseñador necesita saber

Cómo ve la gente

La gente prefiere las formas curvas, Al crear logotipos incorpore curvas.

Los hombres prefieren la simetría, especialmente en los rostros.

La dirección de la mirada de la cara, o de una flecha apuntando una llamada a la acción hace que la gente lo mire.

La gente decide sobre el diseño en una milésima de segundo.

Para conseguir un atractivo visual inmediato e inconsciente, los factores que influyen son:

  • la simplicidad visual, especialmente en los mayores de 45 años,
  • la cantidad de color
  • la cantidad de texto.

Las personas examinan las pantallas según sus experiencias pasadas y sus expectativas:

  • tienden a mirar el centro de la página, por ello deberías colocar lo más importante en el centro.
  • tienden a mirar de izquierda a derecha (en Occidente), por ello deberías diseñar para que se desplacen siguiendo su patrón de lectura normal

Sobre la visión periférica

La visión periférica determina a dónde se dirige la visión central, por ello:

  • debe tenerse en cuenta qué ve el usuario en la visión periférica;
  • no tomar decisiones basadas solo en eye-tracking, que estudia la visión central
  • otra razón para no basarse solo en los resultados de eye-tracking es la ceguera al cambio (el famoso vídeo del pase invisible) Si prestas atención a algo y no esperas un cambio, si sucede te lo pierdes. Que alguien mire, no significa que preste atención, así que no asumas que lo ven porque esté ahí. Además, las personas miran según las preguntas que les hacen, por lo que los resultados pueden ser accidentales.

 

La visión periférica detecta el peligro y procesa más rápido las emociones.

Si quieres captar rápidamente la atención pon imágenes de alto contenido emocional en la visión periférica.

En pantalla grande, un diseño sencillo y menos detallado, hace que la visión periférica tarde menos en detectarlo y entenderlo.

Aunque la visión central es muy relevante, la visión periférica debe comunicar claramente el propósito del sitio y la página.

Es imposible no percibir el movimiento en nuestra visión periférica.

Si lees en el ordenador y hay una animación o cualquier cosa que parpadea en los lados, no puedes evitar mirar, esto impide concentrarse en la lectura. Es molesto, pero atrae la atención, por eso lo usan los anunciantes.

Cómo piensa y recuerda la gente

La gente utiliza dos tipos de pensamientos: el “Sistema 1”, rápido, intuitivo y sencillo; y el “Sistema 2”, para tareas más complejas.

En otra entrada, trato detalladamente este tema con el libro “No me hagas pensar.”

Los recuerdos cambian con facilidad, por lo que no nos podemos fiar de lo que la gente dice o siente en el momento. Tampoco nos podemos fiar de la memoria, tenemos que grabar las sesiones. Por el contrario, la memoria semántica, la muscular y la sensorial son más resistentes al cambio, si algo se repite lo suficiente.

Ser consistente en el diseño, facilitar las tareas más habituales, emplear pistas semánticas que ya conozcan reduce el esfuerzo del usuario.

La memoria a corto plazo es limitada, necesita concentración y es muy sensible a las interferencias y estímulos sensoriales.

Es preferible pensar menos a cambio de hacer más clics. La gente está dispuesta y le resulta sencillo, si reciben la información justa en cada paso. Así no tienen que hacer más clics.

Reduce la carga motora: evita que pasen del teclado al ratón obligatoriamente.

La gente procesa mejor la información en forma de historias.

La gente aprende mejor con ejemplos.

Si quieres que recuerden algo, repítelo.

Es más fácil reconocer la información que recordarla.

Los recuerdos cambian al revivirlos, lo que ocurrió después interfiere en el recuerdo del evento original.

Al entrevistar, las palabras que utilices pueden influir en su recuerdo.

Cómo decide la gente

La gente decide que algo es cierto y fiable si le es familiar y fácil de entender.

Las fotos junto a la información aumentan la tendencia a creer la información.

Se puede influir en la decisión de los usuarios, haciendo que elijan otro producto, mediante su prominencia visual:

  • con un envase más brillante
  • en la web aumentando el brillo de esa imagen
  • con atributos visuales: cuadros, bordes, resaltes

 

Ante una decisión compleja basada en sus sentimientos (por ejemplo, con imágenes, vídeos):

  • tienes que ofrecer la mínima información que necesitan para tomar la decisión
  • la decisión debe realizarse rápido
  • una vez tomada la decisión debes dejar de dar información o provocarás una fase de deliberación.

La confianza impulsa las decisiones: cuanto más tiempo tardas en decidir más te cuestionarás si la decisión es la acertada.

  • Promueve la sensación de que han acumulado muchas evidencias en poco tiempo, por ejemplo, con un listado de la información ya consultada. Esto provoca sensación de certeza y activa la decisión final.

Las pequeñas acciones físicas, por ejemplo, pulsar para elegir el color, activarán más rápido la decisión final.

Las decisiones no pueden basarse en lo que la gente dice, sino en cómo interactúa con el producto.

Preguntar cómo realiza una tarea, que haría después o si prefiere a o b, dará respuestas filtradas por el pensamiento consciente. Esas preguntas no revelan realmente lo que sucede o qué va suceder en la mente del público de destino.

Cómo la gente lee o interpreta la información

Si el texto es difícil de leer es más fácil de aprender.

Si el texto es fácil de leer resulta más creíble y convence más a la gente.

Los nombres estimulan la acción más que los verbos, así que:

  • “Ser donante” es mejor que “Donar”.
  • “Cuando estés listo para ser un experto consulta nuestros cursos de formación”, mejor que “Comprobar nuestros cursos de formación”.

La gente sólo lee el 60% de un artículo online.

  • Pon lo más importante antes de este porcentaje.
  • La mayor parte de los tuits se producen al 20% del artículo.

La lectura de tu web o tus artículos será superficial, una experiencia externa basada en la atención visual, muy diferente de la lectura de un libro.

  • No piensan profundamente en lo que leen.
  • No interpretan ni analizan la información.
  • Lo que se lee online se recuerda peor que lo que se lee en papel.
  • Leen una parte mínima.
  • Ignoran partes importantes.

 

Por lo que hay que:

  • Dividir la información en fragmentos y pon títulos
  • Reduce la cantidad de texto.
  • No asumas que han leído de verdad, que han comprendido o recordarán tu texto.
  • Usa los vídeos y los audios como alternativas o apoyo.

 

Cómo se relaciona la gente con los demás y con la tecnología

Las emociones se contagian.

En los vídeos, la sorpresa capta la atención, pero la alegría la retiene. Lo ideal es fluctuar entre ambas emociones.

La sorpresa anima a compartir, la conmoción no. Para que algo sea viral debe tener contenido emocional intenso que provoque emociones positivas sin conmocionar.

Si quieres que el público sienta conexión con tu marca, destaca algo que compartas con ellos y cuida el léxico: “nosotros”, “equipo”, “juntos”.

Ver a otras personas realizar una acción tiene en nuestro cerebro consecuencias similares.

Si quieres influir en el comportamiento, muéstrales a una persona haciendo algo que te interese.

Las historias crean imágenes mentales que activan las neuronas especulares: usa historias para que entren en acción.

Los cerebros del hablante y del oyente se sincronizan durante la comunicación.

  • Presentar información con audio o vídeo es especialmente eficaz para comprender el mensaje.
  • No confíes solo en la lectura si quieres que comprendan claramente la información.
  • La gente está programada para prestar especial atención a amigos y familiares, por ello las redes sociales en torno a ellos son más motivadoras y los usuarios más leales.
  • La gente puede identificar una sonrisa falsa en un vídeo y ya no confiarán en ti.

 

Cómo compra la gente

La gente no separa las compras online de las compras en tiendas físicas, la experiencia debe ser omnicanal.

La gente gasta menos si paga en efectivo.

La gente está más dispuesta a dejar una valoración positiva, comentario o testimonio justo después de la compra, que es el momento ideal para pedirla.

Para reducir las probabilidades de disonancia cognitiva post-compra, envía mensajes con datos de validación social: citas y opiniones de clientes satisfechos tras realizar su compra.

La disonancia cognitiva se usa para animar a que compren: se crea un conflicto y se propone la solución, por ejemplo, “usar marca genérica de champú debilita el pelo … ”

El número que vemos primero afecta a nuestras percepciones posteriores.

  • La gente está más propensa a adquirir un servicio o producto más caro si primero se muestra el precio más alto.
  • Ni siquiera ha de estar relacionado con el precio, si quieres que gasten más pon “más de 10.000 clientes …” antes del precio.
  • Si se anuncia una sopa en promoción la gente compra 3; si la promoción se dice que está limitada a 10 latas por cliente, la gente compra 7.

 

Cómo influye en el diseño las generaciones, la geografía y el género

Si ofreces noticias o productos relacionados con salud, banca, empleo o educación, un alto porcentaje accederá desde el móvil.

Si tu producto está relacionado con redes sociales, vídeos, música o indicaciones geográficas, tu público será más joven.

Si la tarea requiere menos de cinco minutos, la gente usará su móvil.

Lo que resulta atractivo visualmente para la gente depende de la edad, género y ubicación geográfica.

  • Los de más de 40 años prefieren diseños más coloridos en comparación con los jóvenes.
  • Los hombres prefieren un fondo gris o blanco con color que contraste; y las mujeres más colores y menos contraste.
  • Con la edad, la gente prefiere menos opciones.

Al escribir transmites tu modelo mental, pero este debe ser el de tu público o les resultará extraño y confuso, tienes que probar tus etiquetas con ellos.

  • Igual de raro que te suena “lámpara eléctrica” le sonará a alguien joven “buscarlo online” o “buscarlo en Internet”.
  • En EEUU, más de la mitad de los mayores de 65 usa Internet, tenlo en cuenta al seleccionar las imágenes de la gente o el tamaño de la fuente.
  • Recuerda que la gente mayor de 40 años sufre plesbicia.
  • El azul se apaga con la edad, no lo uses para transmitir información y menos con otros similares.
  • El 5% de la población tiene problemas de audición: deben poder controlar el audio y tener subtítulos.
  • Las habilidades motrices se deterioran después de los 60.
    • Incluye interacción por voz.
    • Deja espacio entre los elementos para evitar selecciones accidentales.
    • Cuanto mayor es el punto de destino más fácil pulsarlo.
  • Las personas mayores tardan más en hacer las tareas por su peor habilidad motriz y porque confían menos en su memoria.
  • La gente mayor puede no tener respuesta para las preguntas de seguridad (“tu profesor de tal curso”, “la calle en la que vivías al nacer”,…)
  • En 2020, la generación Z (1998-2013) será el 40% de los consumidores, ve pensando ya en ellos.

Como interactúa la gente con interfaces y dispositivos

La gente quiere ojear también los vídeos.

  • Si un vídeo dura más de 5 minutos, pon un resumen y un índice a las diferentes partes del mismo.

La gente sí interactúa con los carruseles de imágenes.

  • Se observa cuando tienes en cuenta cualquier interacción con los carruseles y no solo los clics, entonces la interacción sube del 23% al 72%.
  • Depende del tipo de carrusel, no es lo mismo un carrusel de anuncios que uno de noticias, que uno que da información adicional de un producto.
  • Son muy interesantes para atraer a los visitantes.
  • Si tienen información útil, la gente interactúa.
  • Incluye lo más importante en la mitad superior
  • Evita zonas muertas, puntos sin interés que hacen que la gente no siga mirando.

 

 

Norma Europea EN 301 549: Estructura (Parte 2)

Debido a lo extensa que es la Norma EN 301 549, en la entrada anterior realicé un resumen de la primera parte de esta norma. Y ahora toca continuar explicando todos y cada uno de los capítulos.

Norma Europea EN 301549 (2ª parte)

Norma EN 301 549: Segunda parte

Capítulo 6: Requisitos sobre la comunicación bidireccional por voz

Se aplica a productos TIC en la que es posible la comunicación entre personas, como por ejemplo, los teléfonos móviles.

Para comprender mejor este capítulo, vamos a tomar como ejemplo una aplicación de videoconferencia. Estas aplicaciones pueden permitir la comunicación por vídeo o sólo por voz.

Este capítulo tiene varios apartados, que son:

6.1 Ancho de banda para voz.

6.2 Funcionalidad de texto en tiempo real

6.3 Identificador de llamadas

6.4 Alternativas a los servicios basados en voz

6.5 Comunicación mediante vídeo

6.6 Alternativas a los servicios basados en vídeos

En el caso de que se produzca una comunicación en tiempo real (RTT), el estándar define requisitos sobre la simultaneidad de texto y voz.

Establece también la diferenciación entre el texto de entrada y el de salida, así como la interoperabilidad y el tiempo de respuesta.

Capítulo 7: Requisitos sobre sistemas de vídeo

Este capítulo se aplica a productos TIC que tienen la capacidad de grabar o transmitir vídeos, como un aparato reproductor de discos o una aplicación para reproducir multimedia.

7.1.1 Se debe gestionar adecuadamente los subtítulos para personas sordas.

7.1.2 y 7.1.3 Se debe sincronizar los subtítulos con la pista de audio y preservando el subtítulado existente al transmitir el vídeo.

 7.2.1, 7.2.2 y 7.2.3 Se debe gestionar la audiodescripción para aquellas personas que no ven reproduciendo y sincronizando dicho canal de información.

7.3 Se debe permitir el control a los usuarios para el subtítulo y la audiodescripción.

Capítulo 8: Hardware

Este capítulo de la norma se enfoca a los productos TIC personales que tengan componentes hardware, como los ordenadores, las tabletas y los móviles. Por lo que, quedan excluidos las páginas web y las aplicaciones móviles

Tiene los siguientes apartados, que son:

8.1 Generalidades: requisitos genéricos, conexiones normalizadas y color.

8.2 Productos de hardware con salida de voz: incremento del volumen de voz, gama de volumen de voz, control fino de volumen, acoplamiento magnético, dispositivos de telefonía fija y de comunicación inalámbrica.

8.3 Acceso físico a las TIC: generalidades, superficie libre, cambio de nivel, aproximación frontal y paralela, anchura libre para pies y rodillas, alcance para la TIC frontal (superior no obstaculizado, inferior no obstaculizado y obstaculizado) y lateral (superior no obstaculizado, inferior no obstaculizado y obstaculizado), visibilidad e instrucciones de instalación.

8.4 Elementos accionables de forma mecánica: teclas numéricas; accionamiento (modo, fuerza) de elementos mecánicos; llaves, billetes y abonos.

8.5 Indicación táctil del modo de voz

 

Capítulo 9: Contenidos Web

Este capítulo se aplica a todo lo relacionado con los contenidos web: sitios web e intranets.

La Norma 301 549 es totalmente compatible con las Pautas de Accesibilidad al Contenido Web 2.0

En la nota 1 se indica que, al evaluar sitios web, estos se evalúan como páginas web individuales. Las aplicaciones web, aplicaciones web para móviles, etc. están cubiertas bajo la definición de página web, que es bastante amplia y cubre todos los tipos de contenido web.

Tiene dos apartados:

9.2 Requisitos para el contenido web: incluye todos los criterios de conformidad A y AA (38 en total) de las WCAG 2.0, haciendo referencia directamente a los mismos. Por tanto, el apartado 9.2 tiene 38 subapartados, del 9.2.1 al 9.2.38, uno por cada criterio de conformidad de las WCAG 2.0

9.3 Requisitos de conformidad de las WCAG 2.0: incluye los 5 requisitos de conformidad de las WCAG 2.0 (Nivel de conformidad; Páginas completas; Procesos completos; Uso de tecnologías exclusivamente según métodos que sean compatibles con la accesibilidad; Sin interferencia)

Capítulo 10: Documentos electrónicos no web

En este capítulo se recogen requisitos que se aplican a documentos electrónicos que no sean páginas web o que no estén incrustados en páginas web.

Algunos ejemplos de documentos son cartas, hojas de cálculo, correos electrónicos, libros, imágenes, presentaciones, EPUB o PDF.

En el apartado 10.2 se establece que deben cumplir con todos los criterios de conformidad hasta el nivel AA de las WCAG 2.0 (38 en total), excepto cuatro criterios:

10.2.20 “Evitar bloques” (2.4.1)

10.2.24 “Múltiples vías” (2.4.5)

10.2.31: “Navegación coherente” (3.2.3)

10.2.32: “Identificación coherente” (3.2.4)

Los apartados en los que deberían incluirse (10.2.20, 10.2.24, 10.2.31, 10.2.32) se mantienen, pero vacíos. De esta manera se mantiene la coherencia de la numeración de los requisitos en los diferentes capítulos. Así, el requisito 9.2.15 (Teclado, equivalente al 2.1.1 de las WCAG 2.0) es igual al 10.2.15 o al 11.2.2.15, independientemente de que se eliminen criterios en sus respectivos listados.

Por otro lado, se añaden dos criterios:

10.2.39 Colocación de los subtítulos. Cuando el documento no web contiene medios sincronizados con subtítulos, estos no deben ocultar información relevante en el medio sincronizado.

10.2.40 Sincronización de la audiodescripción. Cuando el documento no web contiene medios sincronizados con audiodescripción, esta no debe interferir con la información de audio relevante en el medio sincronizado.

Capítulo 11: Software

En este capítulo se recogen todos los requisitos que se refiere a software que no es web.

En el subapartado 11.2.1 se incluyen los requisitos cuando no se están proporcionando funcionalidades “cerradas”. Se listan todos los criterios de conformidad, y estos son los 38 de nivel A y AA de las WCAG 2.0, pero con varias peculiaridades:

No se referencia directamente al criterio de las WCAG como en el capítulo 9. Esto es así porque incluye las notas “Additional Guidance When Applying Success Criterion xxxx to Non-Web Documents and Software” del documento del W3C Guidance on Applying WCAG 2.0 to Non-Web Information and Communications Technologies (WCAG2ICT)

NO se incluyen 6 criterios de conformidad que presumiblemente no aplican al software, como son:

11.2.1.20 “Evitar bloques” (2.4.1)

11.2.1.21 “Titulado de las páginas” (2.4.2)

11.2.1.24 “Múltiples vías” (2.4.5)

11.2.1.28 “Idioma de las partes” (3.1.2)

11.2.1.31 “Navegación coherente” (3.2.3)

11.2.1.32 “Identificación coherente” (3.2.4)

11.2.2 Criterios de conformidad (con funcionalidades cerradas)

En el subapartado 11.2.2 se incluyen los requisitos cuando sí se están proporcionando funcionalidades “cerradas”. En este caso solo se mantienen 12 de los 38 requisitos A y AA de las WCAG 2.0, y se van poniendo en relación con los requisitos definidos en el capítulo 5.

11.3 Interoperabilidad con los productos de apoyo

Cuando el software es una plataforma,

  • la aplicación tiene que usar los servicios de accesibilidad de la plataforma (11.3.2.3)
  • ofrecer información sobre objetos, tablas, valores, etiquetas, jerarquía visual, texto, acciones, etc
  • permitir que los productos de apoyo realicen acciones en nombre del usuario (11.3.2.5 al 11.3.2.17).

 

Cuando el software sea un producto de apoyo, utilizará los servicios documentados de accesibilidad de la plataforma. También puede utilizar otros servicios documentados de accesibilidad.

Los requisitos son los siguientes y solo se aplican si el software no proporciona funcionalidades cerradas, de lo contrario se aplicaría el capítulo 5.1:

11.3.2.5 Información del objeto

11.3.2.6 Fila, columna y cabeceras

11.3.2.7 Valores

11.3.2.8 Relaciones de etiquetado

11.3.2.9 Relaciones padre-hijo

11.3.2.10 Texto

11.3.2.11 Lista de acciones disponibles

11.3.2.12 Ejecución de acciones disponibles

11.3.2.13 Seguimiento del foco y de los atributos de selección

11.3.2.14 Modificación del foco y de los atributos de selección

11.3.2.15 Notificación de cambios

11.3.2.16 Modificaciones de los estados y propiedades

11.3.2.17 Modificación de valores y texto

11.4 Uso de las características de accesibilidad documentadas

Cuando el software es una plataforma, el usuario debe tener control sobre las características de accesibilidad documentadas destinadas a los usuarios.

Cuando el software tiene una interfaz de usuario, este no debe interferir o alterar las características de accesibilidad documentadas de la plataforma, excepto cuando el usuario lo solicite durante el uso del software.

11.5 Preferencias de usuario

Se aplica cuando el software proporciona una interfaz de usuario. Las preferencias de usuario en la configuración de la plataforma abarcan el color, el contraste, el tipo de fuente, el tamaño de fuente y el cursor del foco. Se exceptúa el software que se diseña para aislarse de la plataforma subyacente y que por tanto no tiene acceso a la configuración de las preferencias de usuario en la plataforma.

11.6 Herramientas de autor

Los requisitos para las herramientas de autor son:

  • deben permitir crear contenido que se ajuste a los requisitos de accesibilidad
  • se debe preservar la información de accesibilidad de los contenidos
  • la herramienta debe proporcionar sugerencias para corregir los problemas de accesibilidad
  • tiene que haber plantillas accesibles (11.6.5)

 

Capítulo 12 Documentación y servicios de atención al cliente

Se aborda la documentación de apoyo y los servicios de apoyo.

  • deberá proporcionar información sobre las características de accesibilidad y compatibilidad (12.1.1)
  • deberá ser un documento accesible (12.1.2)
  • deberán informar sobre características de accesibilidad (12.2.2)
  • deberán adaptarse a las necesidades de comunicación de las personas con diversidad funcional (12.2.3)
  • deberán ofrecer documentación accesible (12.2.4)

 

Capítulo 13. Servicios de intermediación y emergencia

Trata los servicios de intermediación de texto, de signos, de lectura de labios, de voz a voz; y los servicios de telefonía con subtítulos. También se aborda propiamente el acceso a los servicios de intermediación y emergencia.

 

Norma Europea EN 301 549: Estructura (Parte 1)

Después de hacer un repaso general sobre la normativa en España, toca hacer un repaso sobre la Normativa Europea sobre accesibilidad web. La última versión de la norma se pubicó en 2015.

Normativa europea: EN 301 549

La norma ha sido adoptada al catálogo español como UNE-EN 301 549 por parte de AENOR, la entidad responsable del desarrollo de las normas técnicas en España. Por tanto es aquí donde podéis encontrarla en español.

Sin más dilación. os voy a hablar de la estructura de la Norma Europea de accesibilidad EN 301 549Requisitos de accesibilidad de productos y servicios TIC aplicables a la contratación pública en Europa”.

Estructura de la Norma EN 301 549

En la norma se definen 213 requisitos y 26 recomendaciones.

estructura_EN301549

El estándar comienza con el alcance de la norma y algunas referencias y definiciones y abreviaturas en los tres primeros capítulos.

En el capítulo cuatro se encuentran las declaraciones de prestación funcional, donde se establecen diferentes diversidades funcionales y cómo llevar a cabo con las soluciones adecuadas.

¿Qué son las declaraciones de prestación funcional?

En el contexto de la Norma EN 301 549, hace referencia a la funcionalidad que se requiere para satisfacer las diferentes necesidades de los usuarios.

Este capítulo está dividido por dos apartados:

Apartado 4.1: Cómo cumplir las declaraciones de prestación funcional.

Apartado 4.2: Descripción de las diferentes necesidades de los usuarios y por qué es necesario tenerlas en consideración.

4.2.1 Sin visión. Algunos usuarios son ciegos, por tanto la TIC debe ser posible usarla sin visión. Los audios y los vídeos deben ser de utilidad.

4.2.2 Visión limitada o baja visión. Deben existir posibilidades para los usuarios puedan usar la interfaz y regular los costrastes de color. El audio es otro ejemplo para las personas con baja visión.

4.2.3 Percepción del color. Algunos usuarios son daltónicos, por lo qe se debe tener en cuenta esta dificultad visual. Si los colores constituyen la información fundamental, se debe sustituir por texto.

4.2.4. Sin audición. Hay usuarios que no pueden oír, por los interfaces deben ayudar a las personas sordas.

4.2.5. Deficiencia auditiva. Para estos usuarios es importante tener un audio claro y sin ruido de fondo, y la posibilidad de controlar el volumen.

4.2.6 Capacidad vocal. Algunos usuarios no pueden hablar, por lo tanto las TIC se deben usar sin necesidad de voz. Un ejemplo de ello, sería el uso de teclados.

4.2.7 Manipulación o fuerza limitada. Para los usuarios con problemas motores, con la TIC debe ser posible facilitar su uso con una sola mano. También la manipulación y el habla pueden ayudar a estos usuarios.

4.2.8 Alcance limitado. Los usuarios en silla de ruedas.

4.2.9. Sensibilidad a los destellos. Se deben reducir el número de destellos y de luz.

4.2.10. Problemas cognitivos. Se debe proporcionar características que permitan su uso por usuarios que no puedan entender interfaces complejas. Hacerlo intiutiva y fácil para ese grupo.

4.2.11 Privacidad. El uso de auriculares es un ejemplo de ello.

La norma contiene tres anexos:

 

Una vez explicado el capítulo 4, hablaremos sobre el anexo B, donde se establece la relación entre las declaraciones de prestacion funcional y las necesidades de los usuarios. Es un anexo muy interesante porque te hace comprender el impacto que los problemas de accesibilidad pueden tener en los usuarios finales.

Tenemos en cuenta la tabla siguiente:

Tabla de relaciones de la EN 301 549

Para comprender la tabla, primero hay que saber qué significan las abreviaturas. Estas abreviaturas tratan sobre las necesidades de los usuarios de este capítulo que estamos viendo.

Así es que la 4.2.1 “WV” significa “With vision” (Sin visión) y así sucesivamente cada uno de ellos.

¿Qué grupo de usuarios queda afectado por cada requisito?

Tenemos que tener en cuenta que hay dos relaciones:

P: Relacion primaria

Esto significa que el requisito es compatible con la declaración de prestación funcional de ese grupo de usuarios en particular.

S: Relación secundaria

Esto significa apoyo parcial para la declaración de prestación funcional porque algunos usuarios pueden usar la función en algunas situaciones específicas.

Vamos a analizar la tabla con un ejemplo:

Los requisitos tecnicos se enumeran de manera vertical y las declaraciones de prestación funcional de manera horizontal.

Si vemos este ejemplo, tenemos el requisito que hace referencia al uso del volumen de un auricular privado, la tabla se lee así:

La tabla tiene una P para el soporte primario para el requisito 4.2.1 “WV” (Sin visión). Esto significa que el requisito soporta la declaración funcional para los usuarios que no pueden ver. En otras palabras, si proporcionan la posibilidad de controlar el volumen cumplirá una de las necesidades de los usuarios ciegos.

En el requisito 4.2.5, se marca con S, porque si los usuarios tienen problemas de audición, el volumen de los auriculares es muy importante, por lo tanto, satisface parcialmente esas necesidades. No todos los usuarios usan auriculares, pero si lo hacen el volumen es muy importante.

Continuando con los diferentes capítulos que contiene la norma, se describen los siguientes:

  • Capítulo 5: Requisitos genéricos, que sirven para todas las TIC.
  • Capítulo 6: Requisitos TIC con comunicación bidireccional por voz.
  • Capítulo 7: Requisitos TIC con capacidades de vídeo
  • Capítulo 8: Hardware
  • Capítulo 9: Requisitos sobre contenido web
  • Capítulo 10: Requisitos sobre documentos
  • Capítulo 11: Software no web
  • Capítulo 12: Documentación y servicios de apoyo
  • Capítulo 13: Acceso de servicios de retransmisión o emergencia.

 

A partir de aquí, paso a desarrollar cada uno de los capítulos. Empiezo por el 5 y los demás los dejo para otra entrada para que no se haga demasiado extenso  el post.

Capítulo 5: Requisitos genéricos. Funcionalidad cerrada.

¿Qué es la funcionalidad cerrada?

La funcionalidad cerrada consiste en los que los usuarios no pueden utilizar tecnologías de apoyo propias, (lector de pantallas). Esta situación podría darse por ejemplo, en máquinas de venta de entradas. (tickets).

Para que los dispositivos con sistema de funcionalidad cerrada funcione para todos los usuarios, el sistema debe proporcionar alguna manera para que los usuarios interactúen y perciban la información. Esto significa que el propio sistema debe funcionar con tecnología de apoyo.

Un ejemplo de producto con funcionalidad cerrada sería un cajero automático. Esto implica que debe ser accesible por sí mismo, sin ayudas externas.

Para ello, tendrá que cumplir los siguientes requisitos:

  • Debe permitir su uso sin visión, con la que tendrá salida por voz
  • La salida por voz tiene que tiene que tener relación con la salida visual, para ayudar a los que tengan dificultades visuales
  • También tiene que poder pararse y repetirse cada vez que los usuarios lo necesiten
  • Deberá incluir descripción de elementos no visuales y la narración de vídeos.
  • Se deberá tener especial cuidado con la información personal y con no reproducir contraseñas
  • La salida por voz deberá tener un volumen suficientemente alto para personas con problemas de audición, con posibilidad de reajuste rápido al cambiar de usuario.
  • Es importante que la información esté en el mismo idioma que el contenido mostrado.
  • Debe incluir la información necesaria para que los usuarios sepan que se han realizado las transacciones.
  • Debe incluir un tamaño del texto adecuado, que sirva a las personas con baja visión.
  • Deberá ofrecer alternativas al uso del teclado.

 

Para seguir leyendo sobre la Norma EN 301 549, aquí tienes la segunda parte.

 

 

 

 

 

 

 

 

 

 

Accesibilidad y usabilidad web: Diferencias

Introducción

Me apetecía escribir esta entrada porque me encuentro a gente que me ha preguntado que no sabe muy bien cuál es la diferencia entre la accesibilidad web y la usabilidad web. O que no les queda del todo claro. Hay gente que puede pensar que las dos palabras significan lo mismo, pero no es así.

Estos dos conceptos están muy relacionados pero NO son lo mismo.

Para comprender esto mejor, vamos a establecer una definición sencilla:

  • accesible: que se puede acceder a él
  • usable: que sea fácil de usar

 

Accesibilidad web y usabilidad web: Diferencias

A partir de ahí, hay que plantearse el dilema de ¿accesible/usable para quién?

En realidad no hay una respuesta exacta para resolver esta pregunta porque puede haber casos en los que habrá a quien le resulte “cómodo” acceder y usarlo y otras personas a las que no, y pueda darse el caso de que no se pueda usar.

Por ejemplo, un vídeo con mala calidad y sin subtítulos puede ser díficil de entender, pero si lo reproduces varias veces, al final te enteras de la película. Pero una persona con dificultades auditivas o sorda, por mucho que lo ponga no se entera y no lo entenderá.

Diferencias entre la accesibilidad web y la usabilidad web

La accesibilidad web consiste en hacer accesible todo lo que engloba un sitio web y todas las opciones y funcionalidades que posee. Todas las funcionalidades que posee para todas las personas usuarias.

En el caso de WordPress, aparte de tener nuestro sitio web, también hay que hacerlo con las opciones del escritorio, los widgets y los plugins. Y si hablamos del futuro editor de WordPress, Gutenberg, que se pretende implantar en las próximas versiones, todavía está muy verde y deja mucho que desear y mejorar en cuanto a accesibilidad y usabilidad web.

¿Cómo se pone en práctica la accesibilidad en la web?

Para poner en práctica la accesibilidad web hay que tener presente las Pautas de Accesibilidad al Contenido Web, así como aplicar los Roles ARIA que se usan para hacer contenido accesible para las personas con diversidad funcional.

Pongamos por ejemplo, una empresa de nombre ficticio ACUS, que se encuentra analizando un formulario.

Desde siempre hemos pensado que los formularios se podían realizar de la manera que en la siempre lo hemos hecho, poner los campos con la aplicación de sus atributos correspondientes. Y con el foco de teclado visible, claro.

Pero resulta que en la empresa tenemos un usuario ciego (al cual llamaremos Pepe), que nos comenta que él no puede acceder a los formularios de la web.

Tras conocer la noticia, los desarrolladores (que se llaman Andrés y Antonio), se vuelven locos intentando averiguar a ver de qué manera pueden solucionarle el problema a Pepe.

Pero ahí está la profesional experta en usabilidad, (de nombre Isabel), que les comenta a los desarrolladores que tienen ese problema porque no usan el etiquetado correcto en los formularios.

Si consiste en un problema grave que imposibilita llegar al objetivo a los usuarios, estamos hablando de un problema de accesibilidad. El objetivo de la accesibilidad es que se pueda usar por todas las personas.

Si quieres más información sobre este tema, la explico detalladamente en otras entradas de este blog:

Consejos para llevar a cabo la accesibilidad web

Cómo hacer formularios accesibles

 

¿Cómo llevamos a cabo la usabilidad?

La usabilidad consiste en conocer la experiencia que tiene el usuario cuando navega por el sitio, que nos cuenten las dificultades que se encuentran en el proceso, cuando están realizando una tarea determinada (realizar una compra, una venta, rellenar un formulario de registro…).

Entrando en materia os pongo una frase de uno de los mayores expertos en usabilidad, Steve Krug, del cual ha escrito un libro sobre el tema que es muy interesante y os lo recomiendo como lectura: “No me hagas pensar”.

¿Cuál es el objetivo de todo esto? ¿Qué quiero decir con esto?

Muy sencillo, que no hay que hacer pensar a los usuarios, que hay que ponérselo fácil y cómodo. Que, entre otras cosas, los usuarios que navegan por tu web son lo más importante que hay que en tener en cuenta. ¿Por qué? Porque si no lo tienes accesible ni usable, tu web no sirve para nada. Por muy bonita que esté y tenga un buen diseño, si no es usable, los usuarios no podrán interactuar con ella. Pueden ser posibles clientes potenciales y al no poder interactuar y no tenerlo accesible, no obtienes beneficios. Así de simple.

Por eso es importante saber que la usabilidad va enfocada desde el punto de vista del usuario, así como conocer sus inquietudes, qué puede y no puede hacer, qué piensa, cómo interactúa al realizar determinadas tareas y principalmente, conocer sus problemas. Y con todo esto, intentar buscar las soluciones más adecuadas a sus necesidades.

Siguiendo el ejemplo de la empresa: Andrés y Antonio, después de un intenso día de trabajo,  llegan muy ilusionados a su casa, sabiendo que han aprendido algo nuevo. Y con la ilusión, van y se lo enseñan a su madre. Y la señora al ver el formulario, se encuentra con unos campos con un asterisco en algunas de ellas, en las cuales no sabe qué tiene que hacer. No entiende qué tiene que hacer. Y les pregunta que cómo lo tiene que rellenar. Tras hacer los ajustes pertinentes, comprueban que ya ha entendido cómo hacerlo y procede a rellenarlo sin problemas.

Es decir, en este ejemplo que hemos explicado, hemos mejorado la usabilidad de los formularios.

Para finalizar, el objetivo de la usabilidad es que pueda ser usado fácilmente por un grupo de usuarios concreto. En este caso caso, las personas mayores.

Para que algo sea fácil de usar, es necesario que se pueda usar. Por eso, para un mismo perfil de usuario, usable implica accesible (pero no al revés). O dicho de otra manera, la accesibilidad es condición necesaria (pero no suficiente) para la usabilidad.

Conclusión

Hay que recordar varias cosas importantes.

  • Si algo no es accesible, no es usable.
  • Si algo no es usable, no es accesible.
  • Algo puede ser accesible pero puede no ser usable.

 

Si se da alguna de estas cirscuntancias, tenemos problemas de usabilidad web.

 

Entradas relacionadas:

Usabilidad web: ¿Qué es UI y UX? Diferencias

 

Accesibilidad web: Diversidad funcional motriz

Diversidad funcional motriz

Cuando hablamos de diversidad funcional motriz nos estamos refiriendo a personas que tienen dificultades a nivel físico y que puede afectar a todo: a nivel físico, vista, oído, al movimiento del cuerpo, al habla o a la deglución.

Accesibilidad web: Diversidad funcional motriz

En mi caso, hablamos de una patología llamada Parálisis Cerebral Infantil. Es una patología que afecta a 2 de cada 1000 personas. Esta patología se caracteriza por un trastorno psicomotor. Los problemas psicomotrices están acompañados de alteraciones cognitivas, de comunicación y percepción. Dependiendo de la zona del cerebro afectada se pueden observar desde movimientos involuntarios, espasmos y rigidez en los músculos, así como disfunciones visuales y auditivas.

Clasificación de la Parálisis Cerebral Infantil

Para entender mejor la parálisis cerebral vamos a establecer los diferentes tipos que hay:

Espástica: Es el grupo más numeroso, que se caracteriza por la rigidez en los músculos. Se puede dar hipertonía hiperreflexia e hiperflexión.

Atetósica: Se caracteriza por tener movimientos involuntarios, muecas por dificultades en la cara y torpeza al hablar. Se puede dar afectación de pérdida auditiva.

Atáxico: Son personas que tienen mal equilibrio corporal, muestran inseguridad en la marcha y dficultades en la coordinación y el control de las manos y los ojos.

Mixta: En este caso, es más raro de encontrar casos puros de espasticidad, atetosis o ataxia, lo normal es que se dé una mezcla de todas ellas.

¿Cómo acceden a la web las personas con dificultades motrices?

En el caso de las patologías motrices, como por ejemplo, la parálisis cerebral, hay muchos tipos y diferentes grados dependiendo de la zona afectada. Debido a esto, la persona tendrá más o menos autonomía, pero en la gran mayoría de los casos, las personas con esta patología suelen utilizar dispositivos de apoyo, como por ejemplo:

Licornio: dispostivo que se coloca en la cabeza que ayuda a escribir a las personas que tienen dificultades en las manos. Para usar el licornio debe tener un buen control del cuello para llevar la varilla hasta donde necesite.

Persona utilizando un licornio para el ordenador

Varilla de boca/joystick de boca/barbilla: estas personas usan una varilla para ir pulsando sobre el teclado tecla a tecla para escribir el texto. También lo pueden usar adaptado para las manos.

Varilla de boca, adaptada también para las manos

Tableros de pictogramas: Un tablero de pictogramas sirve para que todas aquellas personas que tienen dificultades del habla, puedan comunicarse a través de los movimientos de los ojos o señalando al icono que representa un sentimiento o la necesidad de la persona en ese momento.

Diversidad funcional motriz:Tablero de pictogramas

¿Qué son los sistemas de comunicación aumentativa y alternativa?

Los sistemas aumentativos complementan el lenguaje oral, cuando por sí solo no es suficiente para mantener una conversación.

Los sistemas alternativos sustituyen al lenguaje oral cuando éste no es comprensible o está ausente.

Los sistemas de comunicación aumentativa y alternativa varían en función de las características e intereses de la persona y su entorno.

Aquí os dejo algunos ejemplos de este tipo de ayudas técnicas para estos usuarios.

  • Plaphoons: Es un sistema de comunicación por pictogramas, donde pueden expresar su mensaje o lo que les dé la gana de forma totalmente independiente. También contiene opciones para usar un conmutador de barrido automático. También se puede usar para la lecto-escritura o con teclado alfabético.
  • Irisbond: Sistema de tecnología eyetracking avanzado (sistema de comunicación con la mirada), que no sólo usan personas con parálisis cerebral, sino también personas con otras patologías motrices como la Esclerosis Lateral Amiotrófica, la Esclerosis Múltiple, etc.
  • GoTalk 9+ Es otro sistema de comunicación.

 

Conmutadores y pulsadores de presión y soplo: El conmutador simple de soplido o aspiración consiste en un sensor que permite detectar presiones positivas (soplido) o negativas (aspiración) ejercidas mediante la boca.

También existen otros conmutadores que se activan por el tacto, por la mano o por el pie.

Teclado de una sola mano: Estos teclados son teclados adaptados para personas que sólo pueden usar una sola mano.

Teclado de una sola mano

Teclado en pantalla: El teclado en pantalla es necesario para todas aquellas personas que por problemas de movilidad en las manos y tengan que acceder a él desde teclado.

Acceso por pulsador: Normalmente, funcionan por barrido con un pulsador para acceder a la casilla del pictograma deseado. O también si se seleccionan las teclas directamente.

 

Uso de audios y vídeos

Si la afectación se produce a nivel auditivo tenemos que hablar de diversidad funcional auditiva.

Si las personas están escuchando un audio y ese audio no dispone de transcripción: Para llevar a cabo la accesibilidad hay que escribir la transcripción del audio para que las personas con dificultades auditivas puedan disfrutar de su contenido.

Con los audios con contenido multimedia, es decir, los vídeos, también hay que tener en cuenta la accesibilidad web añadiendo subtítulos al contenido que está visualizando. También es necesario que tenga un botón para dar la opción a los usuarios de abrir o cerrar los subtítulos. En WordPressTV si vas a visualizar un vídeo no aparece esa opción, lo cual es un problema de usabilidad. Los subtítulos han de contener dos líneas como máximo y tener entre 35 o 40 caracteres.

En algunos casos, debido al grado de afectación de las personas sobre todo, al escribir por un teclado y la espasticidad que genera, estas personas se pueden cansar. Por lo que es recomendable un sistema de reconocimiento de voz para facilitarles las cosas.

Sistema de reconocimiento de voz

Uso del teclado

Debido a la gran complejidad de esta patología y sus diferentes grados de afectación, hay personas que por sus movimientos involuntarios y el control de los movimientos tienen dificultades para usar el ratón. Por esto, es necesario, que tengamos siempre la opción de acceso por el sitio web a través de teclado, y que tenga el foco visible, tal y como indica el criterio 2.4.7 de las WCAG 2.0

Muchas personas con esta patología están afectados intelectualmente y hacen uso de los iconos para orientarse por la web.

Uso de ratones

Ratones virtuales: Son programas informáticos cuyas opciones de movimiento y funciones de clic aparecen en pantalla. Suelen utilizar un pulsador y un sistema de barrido para facilitar el uso del programa de comunicación.

Ratones de cabeza: Los movimientos de la cabeza realizados por el usuario se transforman en movimientos del puntero. De esta forma seleccionan directamente en la pantalla: la letra, la palabra, el pictograma, etc., según qué sistema se esté utilizando. Algunos ratones de cabeza necesitan una cámara web para su uso.

Control del ratón por el iris: Este sistema permite a personas con grandes dificultades de movimiento, controlar el puntero del ratón con la mirada.

Ratón controlado por pulsadores: Cada conmutador realiza un tipo de click, izquierdo y derecho. El ratón sigue conservando toda su funcionalidad habitual

Diveridad funcional motriz: Ratón por pulsador

Cómo comunicarse con personas con parálisis cerebral

  • Si hablas en su presencia, no le des la espalda y ten en cuenta que puede entender todo lo que dices.
  •  Permanece atento/a a sus gestos, ya que quizás quiera comunicarte algo o usar sistemas alternativos de comunicación.
  •  Cuando no sepas qué hacer o cómo hacerlo, pregúntale directamente. Te dirá como quiere ser ayudada. Pídele opinión acerca de las cosas.
  •  Si no entiendes lo que te dice, pídele que lo repita las veces que haga falta. Como todas las personas, lo que desea es ser comprendida.
  • En una conversación, dale tiempo para acabar sus frases y razonar sin interrumpirle.
  • Háblale mirándola a la cara cuando quieras decirle algo, no se lo digas a través de terceros. Sabrá cómo responderte, incluso instará a su acompañante para que te conteste si es necesario, pero con su consentimiento.
  • Deja que pueda adoptar sus propias decisiones, esto facilitará que pueda escoger y tomar iniciativas. Ofrécele solo la ayuda necesaria y complementaria.
  • Piensa que estás ante una PERSONA y, a partir de ahí, actúa como te gustaría que lo hicieran contigo. Procura no hacer etiquetaciones y evita que no te incluyan a ti en ninguna.
  • Ten en cuenta que su escala de valores puede ser distinta. A veces lo que para ti es una tarea rutinaria para ella es todo un logro. Háblale, por ello, de sus capacidades, no de sus limitaciones.
  • Comunícate con esa persona según su edad cronológica y mental. No la trates como a un niño pequeño.

 

 

 

 

 

 

 

 

 

 

Usabilidad: ¿Cómo hacer formularios usables?

Como ya comenté en otras entradas, es importante establecer formularios accesibles para las personas que usan lectores de pantallas. En esta entrada voy a intentar explicar un poco cómo mejorar la usabilidad de los formularios.

Formularios usables

Tenemos que tener presente que los formularios son el medio de interacción más importante del sitio web, puesto que es donde los usuarios pueden realizar las diferentes tareas, (compras, registros, envíar correos, etc.)

Muchos de los problemas de usabilidad en los formularios se producen porque son poco usables y están mal estructurados. Esto hace que los usuarios cometan errores fácilmente.

Lo que hay intentar siempre es que los usuarios rellenen los formularios sin ninguna dificultad y que sean entendibles.

Para ello, voy a mencionaros una serie de ejemplos de la mala usabilidad de los formularios para comprender por qué se cometen tantos errores.

¿Campos obligatorios o no?

Vamos a tener en cuenta esta imagen:

Errores de usabilidad

Bien, en principio aparentemente no hay ningún problema, ¿no? ¿Se entiende bien?

Yo tengo una duda: ¿Qué significa ese asterisco que hay justo al lado del texto?

Cuando estamos rellenando un formulario, la persona que entra por primera al sitio web y te quiere hacer una consulta no tendrá ni idea de lo que tiene que hacer. Es importante especificar qué es lo que significa. Los usuarios no se pueden sentir perdidos.

Hay quienes optan por poner entre paréntesis “necesario”, en vez de “obligatorio”, porque es un término más amigable. Pero de las dos maneras es igualmente válido.

Cuantos menos campos se usen, mejor

Si hacemos un formulario con muchos campos, será más difícil de rellenar para los usuarios. Es importante sólo pedir la información justa y necesaria. Y si tenemos que pedir información importante como un DNI, hay que saber qué campos se establecen como obligatorios y cuáles no. Pero lo dicho, cuanto menos campos pongamos estaremos dando más facilidades a los usuarios y se sentirán más cómodos.

Formularios en una sola columna

Los campos de formularios es mejor ponerlos de una sola columna, ya que la hora de rellenar los datos tiene un orden ascendente y no hace que los usuarios tengan que dirigir la mirada dos veces para rellenar el formulario, y así evitamos que los usuarios se pasen los campos por alto.

Usando bien los colores para mejorar la legibilidad

La legibilidad es muy importante en un sitio web. Por ello, los colores que se deben utilizar deben ser los adecuados. Sobre todo, hay que tener en cuenta a las personas con problemas de visión y/o daltonismo. Y no sólo eso, sino también hay que aplicar los contrastes de color tal y como establecen las WCAG 2.0.

Usando checkboxs

Para facilitar las cosas en los formularios, es muy útil utilizar checkboxs ya que sirven para seleccionar opciones entre varias. Es necesario agrupar los campos visualmente de forma clara con las etiquetas correspondientes, para que las personas que usen lector de pantallas los puedan usar.

Errores de formulario

Los usuarios tienen que saber en todo momento lo que ocurre mientras usan la web. Por eso, cuando alguien rellena un formulario y comete un error, se le debe informar del error. Porque lo que el usuario espera es obtener resultados y que les lleve a otra página.

Hay que destacar los campos que han dado error, pero no lo podemos basar únicamente en el color. Hay que acompañarlos de un icono de error que lo identifique.

Cuando se produzca un error, el formulario no debe resetearse, es decir, los campos no erróneos deben seguir manteniendo la información en ellos introducida.

Captchas

Una cosa muy importante a tener en cuenta son los captchas. Que mucha gente cree que un captcha no es problema para la accesibilidad y usabilidad y sí que lo es.

Los lectores de pantalla no interpretan los captchas de suma o de otra operación matemática. Por lo que es un problema para las personas con dificultades cognitivas.

Tampoco son muy accesibles los captchas de sonido para las personas con problemas de audición, o los que tengan el texto distorsionado que sabemos que dificultan la lectura para los que no ven o para las personas con dificultades visuales.

Hay que usar los formularios con cabeza para no crear una mala experiencia de usuario.

Límite de tiempo

No hay que establecer un límite de tiempo para complementar el formulario.

Política de privacidad

Siempre hay que informar a los usuarios de la política de privacidad para que completen el formulario con total confianza.

Formularios largos

Si los formularios son muy extensos no se pueden poner columnas, sino que es importante dividir en páginas bien rotuladas que indiquen al usuario los pasos del proceso (por ejemplo Paso 3 de 4). El usuario debe poder volver a los pasos anteriores.

Hay que mantener la consistencia en los formularios

Cuando vamos a rellenar un formulario deben aparecer todos los campos en un mismo idioma para que los usuarios puedan rellenarlos con facilidad.

De nada sirve poner, por ejemplo, un campo en español y otro en inglés del tipo:

<label for="name">Tu nombre (requerido):</label>
<input id="name" name="name" type="text"

<label for="email">Tu email (required):</label>
<input id="email" name="email" type="text"

Si nos fijamos en estos dos campos, una persona con dificultades cognitivas o intelectuales puede tener problemas a la hora de rellenar este formulario porque puede que no entienda que significa la palabra “required” al estar en inglés.

Es por eso, que hay mantener la consistencia y ser coherentes con lo que estamos haciendo. O bien ponemos el formulario en inglés o bien en español.

¿Campos a la derecha o a la izquierda?

Todos los campos deben estar verticalmente alineados entre sí a la izquierda.
¿Cómo alinear las etiquetas entre sí: a la derecha, a la izquierda o las colocamos encima del campo?

  • Si tenemos que rellenar datos que son familiares (y no son muchos): Etiquetas en vertical encima del campo.
  • Cuando necesitemos ajustar el espacio vertical: Etiquetas a la izquierda del campo, alineadas a la derecha.
  • Sí hay que ajustar el espacio vertical, y los datos no nos son familiares o son complejos: Etiquetas al lado del campo, alineadas a la izquierda.

 

Vamos con un ejemplo de un formulario con problemas de usabilidad:

formulario no usable

Si por ejemplo, nos encontramos con este formulario, así a simple vista es imposible rellenarlo. ¿Qué información hay que rellenar en cada campo? No tengo ni idea.

No se sabe tampoco si los campos son necesarios o si son opcionales, precisamente porque no hay nada.

Para finalizar, toca hablar del criterio 3.2.6, que establece la versión a recomendación de las WCAG 2.1, que denomina “Cambios de estado”. Este criterio hace referencia a que los usuarios cuando rellenan un formulario tienen que enterarse de que se ha enviado. Por lo que una vez enviado el formulario, debe aparecer un mensaje del tipo: “El formulario se ha enviado con éxito”.