Accesibilidad web: Contrastes de color

Introducción

Uno de los principales problemas que hay de accesibilidad web son los contrastes.

Hay muchas personas que tienen problemas para leer en pantalla, por lo que, si no se tienen en cuenta los problemas de contraste pueden dificultar la legibilidad y ocasiona un problema de accesibilidad.

Accesibilidad web: contrastes de color

Contrastes

Si nos remitimos a las WCAG existen cuatro criterios que nos permiten trabajar el color y los contrastes.

Por un lado, tenemos:
El criterio 1.4.1 Uso del color.

  • “El color no es el único medio para transmitir la información, indicar una acción, solicitar una respuesta o distinguir un elemento visual.

Por otro lado tenemos el criterio 1.4.3 Contraste mínimo.

  • “La presentación visual de texto e imágenes de texto tiene una relación de contraste de al menos 4.5:1”
  • Texto grande: “El texto a gran escala y las imágenes de texto a gran escala tienen una relación de contraste de al menos 3: 1;

Por último está el criterio 1.4.6. Contraste mejorado.

  • La presentación visual de texto e imágenes de texto tiene una relación de contraste de, al menos, 7:1, excepto en los siguientes casos.
  • Textos grandes: Los textos de gran tamaño y las imágenes de texto de gran tamaño tienen una relación de contraste de, al menos, 4.5:1.

Hay personas que tienen sensibilidad reducida al contraste. Esto implica que si no se le pone un contrasto alto, puede originar un problema de lectura y por lo tanto de accesibilidad.

También hay personas con daltonismo, las cuales sufren ceguera al color, especialmente al rojo y verde. A las personas con dislexia les molesta la luz, por lo que se recomienda un blanco que no sea puro, pero siempre tiene que cumplir lo que establece la normativa de accesibilidad.

¿Qué quiero decir con esto?

Muy sencillo. Hay que utilizar contrastes altos. Bien, hasta ahí todo claro.

Entre los extremos de los colores puros, existen diferentes tonos.

Código hexadecimal de colores. Por ejemplo:

  • Negro puro es #000000
  • Blanco puro es #ffffff
  • Los grises fuertes y buenos para los contrastes van desde el #000000 hasta el #222222. Todo irá en función de los colores con los que estemos trabajando, claro.

Es tan sencillo como ir probando y comprobando que cumple el ratio, tanto el máximo como el mínimo que establece las WCAG.

Diferentes tipos de contrastes y su explicación.

Vamos a empezar a emprezar con contrastes altos y buenos: aquí tenemos un negro no puro sobre blanco no puro.

contraste bueno: negro y blanco no puro

Como podemos observar este es un contraste alto, entre un blanco no puro y un gris fuerte.

accesibilidad web: contraste entre gris fuerte y blanco no puro

Otro tipo de contraste alto sería un gris fuerte con la tipografía de color naranja:

contraste entre negro y naranja

Otro contraste más: Color crema sobre negro.

Contraste bueno: crema sobre negro

Otro contraste de color que cumple las WCAG. El amarillo y el negro.

Contraste bueno: amarillo y negro

Otro contraste más: El verde claro con el negro.

Contraste bueno de colores: el verde claro y el negro

Otro más: Buen contraste ente el color celeste y negro:

Accesibilidad web: contraste bueno de celeste y negro

Otro ejemplo más sería: Un blanco no puro y el lila:

Contraste bueno: Blanco no puro y lila

O entre un azul no puro y blanco no puro:

Accesibilidad web: azul no puro y blanco no puro

Ejemplos de mal contraste

Otro ejemplo, pero esta vez con un mal contraste sería este:

contraste entre azul claro y gris

Además, si os fijáis bien la legibilidad no es buena.

Lo mismo ocurre con este contraste de color entre dos colores claros:

Mal contraste de color: Celeste y blanco no puro

O este otro.

Accesibilidad web: mal contraste entre gris y blanco

Antes de acabar, hay que mencionar el criterio 1.4.11 que hace referencia al contraste de color con imágenes, es decir, tratar los colores de la imagen y su contraste.
La presentación visual tiene una relación de contraste de al menos 3:1 contra el color o los colores adyacentes:

Componentes de la interfaz de usuario: información visual requerida para identificar los componentes y estados de la interfaz de usuario, excepto los componentes inactivos o donde el aspecto del componente está determinado por el agente del usuario y no es modificado por el autor. Por ejemplo, los botones de redes sociales o los checkboxs.

accesibilidad web: contraste delos componentes de la interfaz de usuario

Otro ejemplo más:

Accesibilidad web: Componentes de la interfaz

Diferente es si cuando se da la información no precisa sólo de color, sino que se le pone el nombre de la red social en cuestión. Ahí ya no requiere de contraste.

Objetos gráficos: partes de gráficos necesarios para comprender el contenido, excepto cuando una presentación particular de gráficos es esencial para la información que se transmite. Por ejemplo, algún símbolo de alerta.

Contrastes: Símbolo de alerta

Un problema muy común es cuando intentamos navegar con el teclado y el foco no se ve, no se aprecia bien. No porque no esté puesto, sino porque no se aprecia bien el contraste entre el fondo y el color del foco.

También se puede usar la herramienta de Lea Verou para calcular la ratio, y puede probrar con diferentes tipografías, cambiando los colores y contrastes, y usar hsla, rgba, y código hexadecimal.

En definitiva, trabajar con el contraste es cuestión de sentido común y lógica. Hay que utilizar siempre contrastes altos.

 

Accesibilidad videojuegos: Xbox Adaptative Controller

Introducción

Microsoft  ha dado un paso de gigante en la industria de los videojuegos y nos ha facilitado un poco más la vida: ha creado un controlador adaptado para personas con algún tipo de diversidad funcional, Xbox Adaptative Controller.

Se trata de una adaptación que contiene 2 botones grandes (que emulan a los botones A y B del mando de XBox), y ocupan gran parte del controlador. Lo cual se ve perfectamente que está adaptado para personas con diferentes necesidades.

controlador de XBox

En la parte trasera tiene todas las conexiones de las que dispone el controlador, que emula cada una de las acciones del mando de Xbox original. Está pensado para conectar con todo tipo de dispositivos externos, como interruptores, pedales, botones, montajes y joysticks que pueden ser muy útiles en función del tipo de juego que esté jugando la persona.

 

parte trasera del controlador del XBox

Los accesorios del controlador de XBox

Los accesorios como las entradas de botones, palancas de control y activadores se controlan mediante dispositivos de asistencia que se conectan a través de los conectores traseros. Dependiendo del conector al que se conecte realizará una función u otra. Por ejemplo, un pedal puede servir para acelerar en un juego de coches o para saltar en otro tipo de juego.

Los accesorios y los diferentes tipos de dispositivo que cada cual necesite en función a sus necesidades, se venden por separado.

Accesorios del controlador de XBox

Aquí tenemos un joystick, que se usa con una mano.

joystick para usar con una sola mano de XBox

Y no sólo eso, sino que cada accesorio también puede ser usado con cualquier parte del cuerpo: con las manos, los pies o incluso el mismo controlador se puede mantener fijo con diferentes tipos de monturas por las roscas que tiene en la parte de abajo (en el centro).  Con pinzas flexibles o fijas para sujetarlo desde una silla de ruedas, y también gracias a las gomas antideslizantes que tiene para evitar que se caiga si realizamos algún movimiento brusco.

gomas antideslizantes del controlador de XBox

Antes de acabar, tengo que decir que me encanta el packaging o el embalaje del producto. Está pensado para abrirlo con una sola mano, y es genial para todas esas personas que tienen dificultades graves con las manos.

Y para finalizar, aquí os dejo un vídeo donde se ve el testimonio de varias personas con diferentes patologías, una de las cuales con Parálisis Cerebral, usando el controlador de XBox.

Mando con panel háptico en braille

Y están desarrollando también una patente, la cual consiste en un mando que tiene un panel háptico, para emitir mensajes en Braille para las personas con diversidad funcional visual.

Referencias:

 

 

 

Accesibilidad: Derechos de las personas con parálisis cerebral

Introducción

Esta semana os traigo un vídeo de la Federación Aspace donde se explica lo que es la ciudadanía activa y el promover el ejercicio de nuestros derechos, así como conocer los derechos que corresponden a las personas con diversidad funcional, entre ellas la parálisis cerebral.

convención de derechos de las personas con diversidad funcional

Convención de derechos de las personas con diversidad funcional

Artículo 3 Principios generales

Los principios de la presente Convención serán:

a) El respeto de la dignidad inherente, la autonomía individual, incluida la libertad de tomar las propias decisiones, y la independencia de las personas;

b) La no discriminación;

c) La participación e inclusión plenas y efectivas en la sociedad;

d) El respeto por la diferencia y la aceptación de las personas con discapacidad como parte de la diversidad y la condición humanas;

e) La igualdad de oportunidades;

f) La accesibilidad;

g) La igualdad entre el hombre y la mujer;

h) El respeto a la evolución de las facultades de los niños y las niñas con discapacidad y de su derecho a preservar su identidad.

Artículo 9 Accesibilidad

1. A fin de que las personas con discapacidad puedan vivir en forma independiente y participar plenamente en todos los aspectos de la vida, los Estados Partes adoptarán medidas pertinentes para asegurar el acceso de las personas con discapacidad, en igualdad de condiciones con las demás, al entorno físico, el transporte, la información y las comunicaciones, incluidos los sistemas y las tecnologías de la información y las comunicaciones, y a otros servicios e instalaciones abiertos al público o de uso público, tanto en zonas urbanas como rurales. Estas medidas, que incluirán la identificación y eliminación de obstáculos y barreras de acceso, se aplicarán, entre otras cosas, a:

a) Los edificios, las vías públicas, el transporte y otras instalaciones exteriores e interiores como escuelas, viviendas, instalaciones médicas y lugares de trabajo;

b) Los servicios de información, comunicaciones y de otro tipo, incluidos los servicios electrónicos y de emergencia;

2. Los Estados Partes también adoptarán las medidas pertinentes para:

a) Desarrollar, promulgar y supervisar la aplicación de normas mínimas y directrices sobre la accesibilidad de las instalaciones y los servicios abiertos al público o de uso público;

b) Asegurar que las entidades privadas que proporcionan instalaciones y servicios abiertos al público o de uso público tengan en cuenta todos los aspectos de su accesibilidad para las personas con discapacidad;

c) Ofrecer formación a todas las personas involucradas en los problemas de accesibilidad a que se enfrentan las personas con discapacidad;

d) Dotar a los edificios y otras instalaciones abiertas al público de señalización en Braille y en formatos de fácil lectura y comprensión;

e) Ofrecer formas de asistencia humana o animal e intermediarios, incluidos guías, lectores e intérpretes profesionales de la lengua de señas, para facilitar el acceso a edificios y otras instalaciones abiertas al público;

f) Promover otras formas adecuadas de asistencia y apoyo a las personas con discapacidad para asegurar su acceso a la información;

g) Promover el acceso de las personas con discapacidad a los nuevos sistemas y tecnologías de la información y las comunicaciones, incluida Internet;

h) Promover el diseño, el desarrollo, la producción y la distribución de sistemas y tecnologías de la información y las comunicaciones accesibles en una etapa temprana, a fin de que estos sistemas y tecnologías sean accesibles al menor costo.

Artículo 21

Los Estados Partes adoptarán todas las medidas perti-nentes para que las personas con discapacidad puedan ejercer el derecho a la libertad de expresión y opinión, incluida la libertad de recabar, recibir y facilitar información e ideas en igualdad de condiciones con las demás.

a) Facilitar a las personas con discapacidad información dirigida al público en general, de manera oportuna y sin costo adicional, en formatos accesibles y con las tecnologías adecuadas a los diferentes tipos de discapacidad;

b) Aceptar y facilitar la utilización de la lengua de señas, el Braille, los modos, medios, y formatos aumentativos y alternativos de comunicación y todos los demás modos, medios y formatos de comunicación accesibles que elijan las personas con discapacidad en sus relaciones oficiales;

Derechos de las personas con parálisis cerebral

Ángeles Blanco, jurista asesora de la Fundación CERMI Mujeres, cuenta que es importante conocer la Convención de derechos de las personas con discapacidad, ya que el Estado está obligado a implantarlo en nuestro Ordenamiento Jurídico. Porque se está incumpliendo la normativa en muchos aspectos y los colectivos más afectados son el de Parálisis Cerebral y el de la diversidad funcional intelectual.

En el vídeo aparecen personas en la que explican sus problemas en determinados ámbitos de la vida cotidiana, en lo que hay que mejorar y que aún queda mucho por hacer.

Estos son algunos de los derechos de los que se habla en el vídeo.

  •  Artículo 5 Derecho a la igualdad y a la no discriminación.
  •  Artículo 27 Derecho al empleo.
  • Artículo 25 Derecho a la salud

Y cuentan cosas como estas:

  • Una persona cuenta que le impidieron acceder a una discoteca con sus amigos y el portero les prohibió la entrada.
  • Otra persona dice que fueron a la playa y que los vecinos decían que le iban a pegar una enfermedad.
  • Un usuario comenta que las empresas no se preocupan por contratarnos. Que hacemos las prácticas y así ya dicen que colaboran con la diversidad funcional o discapacidad.
  • También otra persona usuaria de silla de ruedas, con dificultad para moverse, cuenta que se encuentra con problemas a la hora de hacerse revisiones médicas por no estar la consulta adaptada.

Yo un día tuve que ir hacerme una radiografía de la boca porque me tenían que quitar una muela y el aparato donde me la hice era incómodo. Tenía que estar de pie porque la silla no entraba en la consulta.

Por otro lado también se habla de:

  • El tema de la infatilización y de la sobreprotección que tiene el entorno familiar con estas personas, cosa que hace que dificulte el desarrollo de las personas y la convivencia.
  • El 90% de las esterilizaciones forzosas se realizan a mujeres.
  • 1 de cada 3 mujeres se ven afectadas por la violencia de género.

Hay que destacar la importancia del empoderamiento de las personas con Parálisis Cerebral para que puedan tener una mejor integración en la sociedad y puedan tener una mayor autonomía.

Y aprovecho esta entrada para decirlo, ya que estamos que estamos hablando de la Convención. Con las declaraciones de David Suárez se han vulnerado los siguientes derechos, que el CERMI ha denunciado:

  • Artículo 16. Protección contra la explotación, la violencia y el abuso
  • Artículo 17. Protección de la integridad personal

El CERMI denuncia ante la Oficina de Delitos de Odio de la Policía las agresiones verbales en redes de David Suárez contra las personas con discapacidad

 

 

Accesibilidad web: Características de la lectura fácil

Introducción

Como ya sabemos, hay personas con diversidad funcional cognitiva como el Sindrome Down, dislexia, TDAH, autismo, disculcalia, a las que les cuesta leer y comprender el contenido de un texto. Por todo esto se recomienda que escribamos contenido fácil de comprender para hacerlo más ameno.

También será sencillo para las personas sordas prelocutivas. Al tener dificultades para hablar si tienen una pérdida auditiva muy grande, les es difícil comprender un texto complejo.

Accesibilidad web: Características de la lectura fácil

¿Cómo surge el movimiento de lectura fácil?

El movimiento de Lectura Fácil es relativamente reciente. Surge en Suecia en la década de los 60, donde se crea la Fundación Centrum för Lättläst junto con la IFLA iniciaron un proyecto para organizar y promover la elaboración de este tipo de material, documentos gubernamentales como leyes, decretos y documentos normativos.

Actualmente, este grupo promueve e implanta proyectos para el uso del lenguaje sencillo y claro en los que ha involucrado a más de la mitad de las instituciones gubernamentales suecas.

¿Qué es la Lectura Fácil?

La Lectura Fácil es una forma de escribir y hacer la información más sencilla para las personas con dificultades de comprensión lectora. No sólo en el lenguaje sino también en la presentación del texto.

Se pueden definir diferentes niveles de adaptación.

  • nivel 1 (más sencillo): con muchas ilustraciones y poco texto, con una complejidad sintáctica y lingüística baja.
  • nivel 2: incluye vocabulario y expresiones de la vida cotidiana.
  • nivel 3 (el más complejo): con texto más largo, con algunas palabras poco usuales y con sentido figurado.

Preguntas para llevar a cabo la lectura fácil

En el documento de Oscar García Muñoz “Métodos de redacción y evaluación” se dan una serie de preguntas  para facilitar los objetivos de la lectura fácil.

¿Por qué quiere producir información en Lectura Fácil?

  • ¿Qué quiere contar a las personas con dificultades lectoras?
  • ¿Necesitan conocer esta información las personas con dificultades lectoras?
  • ¿Quiere implicar a personas con dificultades lectoras en una consulta?
  • ¿Va a consultarles sobre una política o proyecto que afecte a sus vidas?

¿Para quién se hace el texto en Lectura Fácil?

Tenemos que tener en cuenta el público al que nos dirigimos:

  • ¿Debe llegar la información a personas en una reunión específica donde todos se pueden conocer y tener una comprensión común de los asuntos fundamentales?
  • ¿Es información para un gran grupo de gente de todo el país?
  • ¿Conoce ya las necesidades de comunicación del público objetivo?

¿De qué manera emplean la información las personas con dificultades lectoras?

  • ¿Lo leerán una sola vez o lo consultarán más veces? Hay que pensar que dependiendo de la situación en que la que se encuentre lo utilizará una o más veces.

¿Es la Lectura Fácil el formato más apropiado para la ocasión?

  • ¿Es la Lectura Fácil el mejor medio de comunicación para su mensaje o información?

Pautas y recomendaciones para la elaboración de documentos en Lectura Fácil (UNE 153101:2018 EX)

Esta Norma nos ayuda y nos guia en la creación y adaptación de documentos de calidad en Lectura Fácil, documentos dirigidos, como hemos visto, a un público muy amplio que por diferentes circunstancias tiene dificultades lectoras.

El proceso tiene dos fases: la fase de adaptación y de validación. La norma incluye un anexo informativo con ejemplos de actividades para la fase de validación, que es una fase fundamental del proceso.

Explicación en un gráfico: las diferentes fases de la lectura fácil

Características de los textos en Lectura Fácil

Vocabulario

  • Utiliza palabras sencillas y habituales. Evita las palabras muy largas o con sílabas difíciles. Evita frases hechas, refranes, ironías y metáforas.
  • Utiliza palabras adecuadas para los lectores del documento.
  • Si necesitas usar palabras difíciles, utiliza glosas y glosarios para explicarlas.
  • Si usas palabras con varios significados que suenan igual que otra palabra, asegúrate de que el contexto las explique.
  • Evita las palabras de otro idioma a menos que sean muy conocidas.
  • Evita las siglas y las abreviaturas, a menos que sean muy conocidas y las expliques.
  • Utiliza la misma palabra para describir el mismo objeto o cosa en todo el documento.
  • Evita las palabras que no tienen un significado claro.
  • Evita palabras que acaban en “mente”.

Signos de puntuación

  • Evita escribir palabras o frases enteras con letras mayúsculas.
  • Utiliza los 2 puntos delante de una lista con más de 3 palabras o frases.
  • Evita signos raros y poco habituales. Como ( ) % & … ; “ ”
  • Evita la palabra etcétera, puedes utilizar otras palabras como “muchos más” o “y otros”.

Números

  • Para escribir las fechas, escríbelas completas añadiendo el día de la semana. Es más facil de entender. Escribe los números en cifras.
    • viernes, 5 de octubre de 2018
  • Los números grandes pueden ser difíciles de entender:
    • podemos utilizar “más de 6.000” en lugar del número 6.525.
  • Evita las fracciones y los porcentajes.
    • Diríamos “algunos” en lugar de un porcentaje como “14%”.
  • Evita los números ordinales.
  • Evita los números romanos. Si tienes que usarlos, explícalos.
  • Separa los números de teléfono en números más pequeños.
    • Para el lector de pantalla es más cómodo escribir en números más pequeños. He probado con NVDA y un número de teléfono compuesto por 9 cifras sin espacios, 600521460 lo lee en millones. Es preferible poner y más cómodo de recordar: 600 521 460 o  separar las 6 últimas cifras de 2 en 2: 600 52 14 60.

Frases

  • Utiliza frases sencillas y cortas. Pon una idea por frase.
  • Asegúrate de que está claro a quién se dirigen. Deja claro sobre quién escribes.
  • Usa la voz activa. Puedes utilizar el presente para hacer los verbos más sencillos.
  • Evita los gerundios.
  • Evita usar 2 o más verbos juntos.
  • Utiliza frases positivas en vez de frases negativas. Evita 2 frases negativas juntas.
  • Evita las explicaciones con comas dentro de una frase.

Organización del texto

  • Escribe la información necesaria.
  • Organiza la información en el tiempo. Explica primero lo que sucede al principio y sigue la historia en orden. Para hacerlo más claro, puedes utilizar palabras como: antes, después o siguiente.
  • Dirígete al lector y habla con él siempre que puedas.
  • Pon junta la información sobre el mismo tema y organiza los temas con espacios en blanco entre las frases.
  • Utiliza títulos que expliquen de qué habla el documento.
  • Organiza las listas con viñetas.
  • Escribe los diálogos al estilo teatral. Es decir, con un guion. Asegúrate de dejar claro quién habla.

Presentación del documento

  • Empieza cada capítulo en una página nueva.
  • Divide el texto en capítulos y apartados. Evita dividir todo el documento en apartados muy pequeños.
  • Evita escribir en vertical.
  • Intenta que las líneas acaben en el mismo sitio más o menos.
  • Utiliza un interlineado 1,5 como mínimo. Utiliza márgenes amplios también.

El índice

  • Coloca el índice al principio de tu documento.
  • Deja claro en qué página está cada apartado. Puedes utilizar rayas.

Tipografía y formato

  • Utiliza un tipo de letra sin adornos (sin serifa o sin remate).
  • Evita las letras con adornos, en cursiva, subrayadas, con sombras, o que no se leen bien.
  • Utiliza un tamaño de letra Arial 14 como mínimo. El tamaño puede ser diferente según el tipo de letra.
  • Utiliza un color de letra que se vea bien sobre el fondo de la hoja.
  • Alinear las frases a la izquierda que en el centro o a la derecha de la página. No justifiques el texto.
  • Nunca separes una palabra con un guion entre 2 líneas.
  • Cuando no queda claro dónde termina el texto, indica que el texto continúa en la siguiente página.
  • Pon el número de página más grande que el texto. Ponlo en un lugar que se vea bien y siempre en el mismo sitio de la página.
  • Diferencia los títulos del texto. Puedes utilizar tamaños o colores diferentes.
  • Puedes utilizar negrita para señalar las palabras que explicas en glosas.
  • Evita escribir sobre imágenes y fondos con varios colores y tonos, porque dificulta la legibilidad.
  • Si el documento tiene partes que no están en Lectura Fácil, avisa al lector.
  • Contraste adecuado entre el color del fondo del texto y de los caracteres.
  • Elige cómo vas a colocar las páginas de tu documento y colócalas todas igual: en horizontal o en vertical.

Imágenes

  • Utiliza imágenes claras y concretas para que sean fáciles de interpretar. Asegúrate de que tienen calidad y se ven bien. Intenta usarlas en color.
  • No utilizar imágenes ni dibujos como fondo de texto, porque dificulta la lectura y la legibilidad
  • Utiliza la misma imagen en todo el documento para representar la misma idea.

Glosas

  • Coloca la glosa la primera vez que se utiliza la palabra difícil en tu documento.
  • Utiliza las glosas para explicar palabras difíciles e importantes.
  • Asegúrate de que la glosa está en la misma página que la palabra que explica.
  • Señala la palabra difícil en negrita en el texto y en la glosa. Diferencia la palabra difícil de la explicación. Puedes escribir la palabra en una línea y la explicación en otras.

Glosario

  • Utiliza un glosario para explicar las palabras. Ponlo al principio del documento. Coloca las palabras en orden alfabético. Puedes utilizar un título como “Diccionario”
  • Separa la palabra de su explicación. Puedes escribirla en negrita.
  • Utiliza ejemplos para explicar las palabras difíciles.

Resúmenes y repeticiones

  • Utiliza resúmenes en documentos muy largos. Repite la información importante cuando el lector necesite recordarla.
  • Coloca los resúmenes al final del apartado que resume.
  • Ayuda al lector a distinguir el texto principal del resumen o el recuerda. Puedes utilizar colores, formas, cuadros, rayas y otras cosas que se te ocurran.
  • Incluye ejercicios de memoria para trabajar sobre el texto.

Mapas y planos y gráficos

  • Pon un título o una explicación del mapa. También coloca una leyenda y explica de qué va el mapa. Haz lo mismo con los gráficos. Señala las cosas importantes
  • Marca itinerarios y caminos claros. Puedes utilizar fotografías reales.

Criterio de accesibilidad WCAG

El criterio “3.1.5 Nivel de lectura” establece lo siguiente: “Cuando un texto requiere un nivel de lectura más avanzado que el nivel mínimo de educación secundaria una vez que se han eliminado nombres propios y títulos, se proporciona un contenido suplementario o una versión que no requiere un nivel de lectura mayor a ese nivel educativo.”

Una de las técnicas suficientes es ofrecer una versión en Lectura Fácil (técnica G153)

Herramientas para lectura fácil

  • Simplext es una herramienta de  simplificación automática de textos para el español dirigido a personas con diversidad funcional intelectual. Permite facilitar la lectura de textos en base a la reducción de la complejidad léxica y sintáctica de los textos. Detecta las palabras y oraciones mas complejas y genera vocabulario más simple y oraciones más cortas.
  • Diccionario fácil Herramienta donde se adaptan definiciones en lectura fácil.
  • Adapro: Procesador de textos para personas con dificultades lectoras, como la dislexia.

¿A quién beneficia la lectura facil?

  • Personas con diversidad funcional intelectual.
  • Personas con dificultades del lenguaje hablado, como el Síndrome Down, la dislexia, o la afasia, la cual también se da en personas con Parálisis Cerebral y Daño Cerebral Adquirido.
  • Personas que no tengan desarrollado bien el lenguaje por tener problemas auditivos.
  • Personas mayores, personas con demencia
  • Personas extranjeras que no hablan el idioma.

 

Dicho esto, en en el documento de Óscar también se recogen las dificultades de grupos con patologías determinadas, entre ellas la Parálisis cerebral.

Pueden tener alteraciones del lenguaje y la comunicación, según la gravedad de la lesión, su localización, extensión y su momento evolutivo. Pueden tener capacidad intelectual normal o experimentar discapacidades de cualquier grado de leve a profunda. Presentan también
dificultades de atención y memoria.
Así mismo, tienen dificultades de habla, lenguaje y función comunicativa, y alteraciones neuromotrices que afectan a la musculatura respiratoria, fonatoria y articulatoria.
Sus esquemas de comunicación son pobres y limitados, tendiendo a reducirse la longitud de las frases. El vocabulario se reduce a contextos limitados, con dificultades para adquirir y manejar conceptos básicos, dificultades de comprensión de enunciados y, sobre todo, con sintaxis
compleja.

Se recomiendan intervenciones específicas de estimulación del lenguaje, la función comunicativa y el uso de ayudas técnicas con sistemas de comunicación aumentativa.

Referencias

Experiencia de usuario: Mapa de empatía

Introducción

Para entender el comportamiento de las personas, así como detectar sus necesidades, sus sentimientos y sus pensamientos, un mapa de empatía nos ayuda a comprender mejor a las personas usuarias.

¿Qué es una mapa de empatía?

Un mapa de empatía es una herramienta gráfica desarrollada por la consultora XPLANE que se utiliza para recopilar lo que sabemos sobre un tipo particular de usuario. se trata de:

  1. crear una comprensión compartida de sus necesidades
  2. ayudar en la toma de decisiones.

 

Mapa de empatía

 

El primer cuadrante “¿Qué piensa? y ¿Qué siente?” engobla todos los pensamientos, los sentimientos y las preocupaciones que la persona usuaria tiene y qué le importa, o por el contrario si esa persona se muestra reacia a algo, es decir, si algo que no le gusta. “Esto es molesto” o “Me confunde esto”.

Lo que ve y lo que ve influye en el entorno que le rodea.

El cuadrante lo conforma “¿Qué dice? y ¿Qué hace?” incluye las acciones que realiza la persona usuaria.: Es lo que la persona usuaria dice en voz alta en una entrevista. Por ejemplo: “No entiendo qué hay qué hacer aquí”.

Todos los cuadrantes sirven para impulsar nuestro conocimiento sobre las personas usuarias y para asegurarnos de que no omitimos ninguna dimensión importante.

Mapas de empatía de un usuario frente a múltiples usuarios

Los mapas de empatía pueden ayudar a los profesionales de UX a comprender qué aspectos de las personas usuarias conocen y dónde necesitarían reunir más datos.

También pueden coger a un usuario en particular o pueden reflejar la agregación de múltiples usuarios.

Los mapas de empatía de un usuario (individual) generalmente se basan en una entrevista de usuario o en el registro de un usuario de un estudio diario.
Los mapas de empatía agregados representan un segmento de usuarios, en lugar de un usuario en particular. Por lo general, se crean combinando múltiples mapas de empatía individuales de usuarios que exhiben comportamientos similares y se pueden agrupar en un segmento.

El mapa de empatía agregado sintetiza los temas que se ven en todo el grupo de usuarios y puede ser un primer paso en la creación de personas.

Los mapas de empatía agregada también pueden convertirse en formas de resumir otros datos cualitativos, como encuestas y estudios de campo. Por ejemplo, un mapa de empatía puede usarse para comunicar una persona, en lugar del enfoque tradicional de “tarjeta de presentación”. A medida que se recopila más investigación sobre esa persona, puede regresar al mapa de empatía y agregar nuevos conocimientos o eliminar aquellos que han cambiado o se han invalidado.

¿Por qué usamos los mapas de empatía?

Los mapas de empatía deben usarse en cualquier proceso de UX para establecer un terreno común entre los miembros del equipo y para comprender y priorizar las necesidades de las personas usuarias. En el diseño centrado en el usuario, los mapas de empatía se utilizan mejor desde el principio del proceso de diseño.

Tanto el proceso de hacer un mapa de empatía como el artefacto terminado tienen beneficios importantes para la organización.

El proceso de mapeo de empatía ayuda a destilar y categorizar el conocimiento del usuario en un solo lugar. Se puede utilizar para:

  • Categorizar y dar sentido a la investigación cualitativa (notas de investigación, respuestas a encuestas, transcripciones de entrevistas a usuarios)
  • Descubra las lagunas actuales e identifique los tipos de investigación necesarios para abordarlo. Un mapa de empatía escasa indica que se necesita hacer más investigación.
  • Cree personas al alinear y agrupar mapas de empatía que cubren usuarios individuales

Comunicar un usuario o persona a otros.

Un mapa de empatía es una forma rápida y digerible de ilustrar las actitudes y comportamientos de las personas usuarias. Una vez creado, debe actuar como fuente de verdad en todo un proyecto y protegerlo de sesgos o suposiciones sin fundamento.

Recopilar datos directamente del usuario.

Cuando los usuarios completan los mapas de empatía, pueden actuar como una fuente de datos secundaria y representar un punto de partida para un resumen de la sesión del usuario. Además, el entrevistador puede recoger sentimientos y pensamientos del entrevistado que de otro modo habrían permanecido ocultos.

Objetivo final.

Derivado de las preguntas anteriores viene lo más importante. Debemos comprender sus miedos y sus valores, averiguar qué obstáculos debe superar, qué es lo que le motiva y lo que le frustra, y escribirlo también en el mapa.

  • ¿Qué le frustra?

Tenemos que saber cuáles son sus preocupaciones porque no le salen las cosas como les gustaría a esas personas

  • ¿Qué le motiva?

Tener una motivación siempre ayuda a las personas usuarias a crecer y a sacar sus mejores virtudes.

 

 

 

Accesibilidad web: Los captchas no son accesibles

Introducción

Los captchas se inventaron para proteger los sitios web del spam. Sin embargo, al igual que la invención bien intencionada de la fusión nuclear, los captchas también tuvieron algunos efectos secundarios poco éticos y destructivos.

Accesibilidad web: Los captchas no son accesibles

Sabemos que los captchas son inaccesibles para las personas con diversidad funcional. Son una lucha constante que no acaba nunca.

En el artículo de Hampus Sethfors “Captchas Suck” se describe por qué los captchas apestan y qué podemos hacer en su lugar.

Introduciendo el mal

A nadie le gustan los captchas. En el mejor de los casos, son un paso irritante y destructor que las personas usuarias deben superar. En el peor de los casos, pueden ser un completo obstáculo para las personas.

Aquí hay uno:

captcha de google donde se pide que se seleccionen las cuadrículas con nombres de calle

Los captchas son seriamente inaccesibles

Imagina que has pasado lo que sentiste como una eternidad llenando un formulario. Finalmente llegas al final y encuentras esta pregunta.

Demuestra que no eres un robot. Haga clic en los animales en la imagen de abajo.

Captcha donde aparecen animales pintados

No puedes ver ningún animal, pero afortunadamente encuentras un botón de “Dame un nuevo desafío”. Haz clic en él.

Demuestra que no eres un robot. Resuelve este simple problema de matemáticas:

captcha para resolver un problema matemático

Esta es una experiencia bastante precisa de cuántas personas con diversidad funcional experimentan los captchas.

Y hablando de problemas matemáticos las personas con dificultades de aprendizaje, una suma tan simple como “21 más 42”, puede resultar complejo a la hora de resolverlo. También puede darse el caso de que nos encontremos con personas con problemas cognitivos que sean incapaces de realizar esa operación matemática. 

Para las personas con diversidad funcional visual, estos tipos de captchas de imagen generalmente son imposibles de resolver, al ser totalmente visuales:

captcha para seleccionar las fotos que contengan flores

Para las personas con dislexia u otros problemas de lectura, las imágenes borrosas de texto ondulado pueden ser imposibles de resolver.

captcha con letras y caracteres ilegibles

No, el nuevo ReCAPTCHA de Google no es lo suficientemente bueno

Es posible que hayas encontrado el captcha “No soy un robot”:
No es tan malo como los captchas estándar. Pero sigue siendo malo. Las personas con tecnologías de asistencia como los lectores de pantalla a menudo informan que se clasifican como un bot y necesitan resolver un captcha inaccesible y regular.

No, la alternativa de audio no es lo suficientemente buena.

Muchos captchas ofrecen una alternativa de audio. Puede ser muy, muy difícil escuchar el mensaje, ya que tiene que estar lo suficientemente distorsionado para que las computadoras no puedan entenderlo.

Otro problema con el captcha de audio es que el icono para cambiar al captcha de audio generalmente es muy pequeño y difícil de encontrar. Las personas que usan lectores de pantalla también tienden a tener problemas a medida que el audio comienza a reproducirse antes de encontrar el campo para ingresar el texto.

Razones por las cuales los captchas no son buenos

Por eso los captchas excluyen a muchas personas con diversidad funcional. Esta debe ser la única razón por la que necesitas cuestionar seriamente su existencia. Pero veamos otro problema serio: es un asesino de tasa de conversión.

Todos luchamos con los captchas, no solo las personas con diversidad funcional. Muchas personas usuarias han realizado pruebas A / B y han demostrado cómo afectan las tasas de conversión.

Webnographer realizó una prueba de usabilidad donde solo el 62 por ciento de los usuarios completaron Captcha en su primer intento. El 23 por ciento tuvo dificultades para realizar múltiples intentos antes de tener éxito, pero el 15 por ciento se rindió por completo.

Eso, para la mayoría de las organizaciones, significa menos ingresos. Otra razón increíble para cuestionar seriamente los captchas.

Reemplaza el captcha con una alternativa accesible.

Hay formas de verificar a las personas usuarias sin usar un captcha. Aquí hay un ejemplo que permite omitir el captcha:

captcha

Lo mejor del documento es que acaba el artículo con un poema dedicado a los captchas. No tiene desperdicio. Lo llama “el Voldemort de la web”. Y le doy toda la razón.

Accesibilidad web: Uso de la x y la arroba para lectores de pantalla

Introducción

Me he decidido a escribir esta entrada sobre el comportamiento de los lectores de pantalla debido a las dudas que hay en relación a por qué afecta la lectura a través de esta tecnología de asistencia si aplicamos el lenguaje inclusivo. Es una duda que se ha repetido ya muchas veces, y esta vez lo escribo en un post para que quede claro.

Hablando en términos generales: eliminar la carga de género

Así hablando en términos generales, mucha gente utiliza la x y la arroba para hablar de manera inclusiva. Incluso con la x o la e, la utilizan para que las personas pertenecientes al colectivo de  Gais, Lesbianas, Bisexuales y Transgénero (LGTB), principalmente las personas trangénero, no se sientan excluidas. Al utilizar la x o la e presenta una dificultad a la hora de leer esas palabras en un lector de pantallas. A fin de cuentas, tenemos que hablar de PERSONAS, y por ahí es una buena manera de empezar a cambiar la forma de expresarnos.

x y arroba para lectores de pantalla

Otra cosa diferente pero también importante, es el uso sexista del lenguaje, en el que se emplea el masculino genérico. Por lo tanto, si se trata de generalizar y de hablar para la gente, para el público en general, lo mejor es eliminar la carga de género, siempre que se pueda. Intenta escribir frases cortas, porque así es más fácil pensar un poco y darle las vueltas a las cosas para que todo el mundo se sienta incluido. Hacer esto nos sirve para darnos cuenta de la riqueza lingüística que posee nuestra lengua. Si nos adaptamos y nos acostumbramos a esto, llegará un momento en que nos saldrá solo, sin pensar.

Las normas para evitar el masculino genérico:

  • El relativo que ha de evitarse cuando le preceda un artículo masculino singular o plural (el o los). Se podrá sustituir por “quien” o por el genérico “persona”.

Ejemplos:

El que se haya matriculado, deberá pagar unas tasas (sexista).

Quien se haya matriculado, deberá pagar unas tasas (no sexista).

La persona que se haya matriculado, deberá pagar unas tasas (no sexista).

De la misma manera se procedería con el plural.

  • Cuando se trata de los indefinidos “uno”, “alguno” y sus plurales, se sustituirán por el genérico “persona” o se aplicará un procedimiento que sea igualitario.

Ejemplos:

Unos se matricularon y no pagaron tasas (sexista).

Unas personas se matricularon y no pagaron tasas (no sexista).

Algunos se matricularon y no pagaron las tasas (sexista).

Algunas personas se matricularon y no pagaron las tasas (no sexista)

Por ejemplo, si hablamos de dar la bienvenida a la web:

“Bienvenidos a mi web de accesibilidad y usabilidad”

Si queremos eliminar la carga de género lo podemos poner así: “Te doy la bienvenida”.

Otro ejemplo: Cuando se trata de un grupo de varias personas que forman un equipo de trabajo, hay mucha gente que pone: “Sobre nosotros”. Se puede sustituir por: “El equipo” o “Quiénes somos”.

La documentación que aquí expongo es bastante interesante para echarle un vistazo. No puedo poner más ejemplos porque se me hace muy largo el post.

Uso de la x y la arroba para lectores de pantalla

Volviendo al tema que nos incumbe, que es lo que nos preocupa: el uso de la x y el uso de la arroba.

Teniendo en cuenta el ejemplo anterior, ya en el documento nos especifica el por qué no es recomendable la arroba para referirse a ambos géneros (el masculino y el femenino). Setrata de una práctica mal utilizada por la gente para no discriminar y por rapidez a veces, pero realmente no es correcto. Y por supuesto, para las personas que usan que usan lector de pantallas es un problema de accesibilidad.

Que quede claro también: la arroba se utiliza para hablar de las redes sociales y para los correos electrónicos.

Para empezar nos encontramos con tres fórmulas específicas para escribir en la web. La primera de ellas es la fórmula de saludo.

Para el lector de pantallas, la arroba la identifica como tal, y la lee como tal.

Información donde se aplica un uso no sexista del lenguaje a la hora de saludar

Otra es la fórmula de contacto.

Y aquí, las alternativas que hay:

Usar la forma de contacto sin lenguaje sexista

Y también tenemos la fórmula de acceso a un área personal. Aquí volvemos a tener el problema de la arroba. En este caso como alternativa no sexista nos da la opción de “persona usuaria”. Tengo que decir que esta alternativa la he usado ya en mi web a la hora de escribir los artículos.

Fórmula de acceso a un área personal

Análisis de otro tipo de lenguajes no textuales

empleo de lenguaje no sexista en lasimágenes

empleo de lenguaje no sexista en el contenidos multimedia, enlaces y el nivel de los contenidos

Ejemplos de webs con un uso sexista del lenguaje o con problemas de accesibilidad

Aquí investigando, he elegido varias webs al azar en donde pueda haber problemas de este tipo.

Nos encontramos con la web de la Escuela Oficial de Idiomas de Pamplona, donde hay una Zona de Usuarios. Se puede sustituir por “Área de acceso privado”, “Área privada” o “Área personal”.

zona de usuarios de la Escuela Oficial Idiomas Pamplona

Dentro de esta web en el apartado de contacto, hay un problema de usabilidad. Siempre conviene recordar cómo hacer formularios usables.

problema de usabilidad en el formulario de contacto de la EOIP

 

Otro sitio web que presenta problemas es la de la Agencia Tributaria. En la imagen se muestra a una mujer y el mensaje es “así mejoramos todos”, por lo tanto, no es muy acorde con la fotografía.

agencia tributaria

Y la forma de contacto tampoco es correcta:

contacte

Otro ejemplo con un problema de accesibilidad es la web de la Asociación Gallega de las Personas con Síndrome de Asperger. Utilizan la arroba para referirse a las personas usuarias.

Asociación gallega de las personas con síndrome de asperger. Usan la arroba para referirse a las personas usuarias. Es un error de accesibilidad para los lectores de pantalla

Y así, podría enumerar miles de ejemplos más que te puedes encontrar por internet.

Para terminar, las WCAG en el criterio 3.1.4 se trata el tema de las abreviaturas. “Se proporciona un mecanismo para identificar la forma expandida o el significado de las abreviaturas.” Es difícil entender una abreviatura, por lo que desaconsejan su uso.

Pruebas con NVDA

Por ejemplo, con NVDA, con Windows 7 y Firefox 66.0.5:

En cada una de las palabras dice: “Error de ortografía”

  • la abreviatura hijos/as la lee “hijos barra as”.
  • Si escribiéramos “hij@s”, lee “hij arroba ese”.
  • Y la palabra “Ellxs”, la lee Ells.

Es decir, tanto la x como la arroba y las barras son un problema para la accesibilidad de los lectores de pantalla.

Números de teléfono

Para el lector de pantalla un número de teléfono compuesto por 9 cifras sin espacios, 600521460 lo lee en millones.

Es preferible poner las cifras en bloques de tres y así es más cómodo de recordar: 600 521 460 o también separar las 6 últimas cifras de 2 en 2: 600 52 14 60.

Emoticonos

Los emoticonos son imágenes, y por lo tanto, tienen su alternativa textual. Cuando usamos las redes para expresar emociones a través de ellos, estamos fastidiando a la persona que usa lector de pantalla. Imaginaos que ponemos 4 veces el icono de las manos aplaudiendo, pues el lector lee 4 veces “manos aplaudiendo”. Es muy pesado y hace que la persona deje de leer.

Por otro lado, tampoco se pueden simular caras con signos de puntuación. El lector al simular una cara, lee “punto y coma cerrar paréntesis”. Si podemos evitarlo, mejor.

 

 

 

 

 

Accesibilidad web: Guía para crear contenido para las personas con dislexia.

Introducción

El documento “Dislexya_Style_Guide” creado por la Asociación Británica de Dislexia es una guía de estilos que sirve para crear contenido para las personas con dislexia.

La guía proporciona una serie de principios que pueden ayudar a las personas disléxicas a facilitarles la lectura.

Guía de estilo para crear contenido para personas con dislexia

Se compone de varios criterios relacionados con el diseño con sus correspondientes características, como son:

  • Fuentes legibles
  • Encabezados y estructura
  • Diseño
  • Estilo de escritura

Guía de estilos para crear contenido para las personas con dislexia

Fuentes legibles

  • Utilice fuentes sans serif, ya que las letras pueden aparecer menos llenas. Las alternativas incluyen Arial, Verdana, Tahoma, Century Gothic, Trebuchet, Calibri, Open Sans.
  • El tamaño de la fuente debe ser 12-14 puntos o equivalente (por ejemplo, 1-1.2em / 16-19 px). Algunos lectores disléxicos pueden solicitar una fuente más grande.
  • El mayor espacio entre letras / caracteres (a veces llamado seguimiento) mejora la legibilidad, idealmente alrededor del 35% del ancho promedio de las letras. Si el espacio entre letras es excesivo, puede reducir la legibilidad.
  • El espacio entre palabras debe ser al menos 3.5 veces el espacio entre letras.
  • El espacio entre líneas más grande mejora la legibilidad y debe ser proporcional al espacio entre palabras; 1.5 /150% es preferible.
  • Evite el subrayado y la cursiva, ya que esto puede hacer que el texto parezca se junte. Use negrita para el énfasis.
  • Evite el texto en mayúsculas, que puede ser menos familiar para el lector y más difícil de leer.

Encabezados y estructura

  • Use encabezados y estilos para crear una estructura consistente para ayudar a las personas a navegar a través de su contenido.
    En Word, encontrarás estas herramientas en la pestaña “Inicio”:
  • Para los encabezados, use un tamaño de fuente que sea al menos un 20% más grande que el texto normal. Si se requiere mayor énfasis, se recomienda usar negrita.
  • Utilice herramientas de formato para alineación de texto, justificación, sangrías, listas, líneas y espaciado de párrafo para apoyar a los usuarios de tecnología de asistencia o lector de pantalla.
    En Word, encontrarás estas herramientas en la pestaña “Diseño”:
  • Agregue espacio adicional alrededor de los encabezados y entre párrafos.
  • Asegúrese de que los hipervínculos se vean diferentes de los encabezados y del texto normal.

Color

  • Utilice fondos de un solo color. Evite los patrones de fondo.
  • Use niveles de contraste suficientes entre el fondo y el texto.
  • Use texto de color oscuro sobre un fondo claro (no blanco).
  • Evite el verde y el rojo/rosa, ya que estos colores son difíciles para aquellos que tienen deficiencias visuales (ceguera al color).
  • Considerar alternativas a los fondos blancos para papel, computadora y ayudas visuales
    tales como pizarras blancas. El blanco puede parecer demasiado deslumbrante. Use crema o un color pastel. Algunas personas disléxicas tendrán su propia preferencia de color.
  • Al imprimir, use papel mate en lugar de brillo. El papel debe ser lo suficientemente grueso como para evitar que el otro lado se vea.

Diseño

  • Alinear el texto a la izquierda, sin justificación.
  • Evite las columnas múltiples (como se usa en los periódicos).
  • Las líneas no deben ser demasiado largas: 60 a 70 caracteres.
  • Use espacios en blanco para eliminar el desorden cerca del texto y agrupar contenido relacionado.
  • Divida el texto con encabezados de sección regulares en documentos largos e incluya una tabla de contenido.

Estilo de escritura

  • Use voz activa en lugar de pasiva.
  • Sé conciso; Evite usar párrafos largos y densos.
  • Use oraciones cortas y simples en un estilo directo.
  • Usa imágenes para soportar texto. Los diagramas de flujo son ideales para explicar los procedimientos.
  • Los pictogramas y gráficos pueden ayudar a localizar y apoyar información en el texto.
  • Considere usar viñetas y numeración en lugar de prosa continua.
  • Dar instrucciones claras.
  • Evite los dobles negativos.
  • Evite las abreviaturas cuando sea posible; Siempre proporcione la forma expandida cuando se use por primera vez.
  • Proporcionar un glosario de abreviaturas y jerga.

Libro: “Psicología del color” de Eva Heller

Introducción:

El libro trata de los sentimientos que provocan los distintos colores y la combinación de los mismos.

La psicología del color; Eva Heller

Eva Heller: “Psicología del color”

El estudio de Eva Heller, basado entre otras cosas en una encuesta realizada a 2000 personas, demuestra que los colores y los sentimientos no se combinan de manera accidental, que sus asociaciones no son cuestión de gusto, sino “experiencias universales profundamente enraizadas desde la infancia en nuestro lenguaje y nuestro pensamiento”, lo cual puede explicarse, como hace a lo largo del libro, mediante el simbolismo psicológico y la tradición histórica.

A pesar de las sensaciones individuales hay una comprensión universal, las impresiones y vivencias que producen los colores pueden considerarse de una manera perfectamente objetiva, aunque cada individuo vea, sienta y juzgue los colores de una manera personal.

Los efectos de los colores no son innatos, pero como se conocen en la infancia a la vez que el lenguaje, los significados quedan interiorizados en la edad adulta y parecen innatos.

“Quien nada sabe sobre los efectos universales y el simbolismo de los colores, jamás podrá emplearlos adecuadamente”.

Reglas y nociones básicas

Teoría

  • Los colores primarios son los que no son producto de la mezcla de otros: rojo, amarillo y azul.
  • Los colores secundarios son los que se obtienen de mezclar dos primarios: verde, naranja y violeta.
  • Un matiz no puede obtenerse con una mezcla de más de tres colores.
  • Los primarios puros que se usan en las imprentas son: cian (azul puro), magenta (rojo puro) y el amarillo cadmio limón (amarillo puro).
  • Los colores complementarios son técnicamente los de máximo contraste:
    • Azul-naranja
    • Rojo-verde
    • Amarillo-violeta
  • Los colores contrarios son aquellos de efectos psicológicamente opuestos, y cuya combinación produce un efecto contradictorio llamativo:
    • Rojo-azul (caliente-frío, corporal-espiritual, masculino-femenino, activo-pasivo)
    • Rojo-blanco (fuerte-débil, lleno-vacío, pasional-insensible)
    • Azul-marrón (espiritual-terrenal, noble-innoble, ideal-real)
    • Gris-amarillo/Naranja-gris (apagado-brillante, discreto-llamativo)
    • Naranja-blanco (coloreado-incoloro, llamativo-moderado)
    • Violeta-verde (artificial-natural, mágico-realista)
    • Marrón-blanco (sucio-limpio, innoble-noble, denso-diáfano, tonto-listo) no están juntos en ningún acorde.
    • Rosa-negro (debil-fuerte, delicado-rudo, blando-duro, sensible-insensible, difuso-exacto, pequeño-grande, femenino-masculino)
    • Plata-amarillo (frío-cálido, imperceptible-llamativo, metálico-inmaterial)
    • Dorado-gris o dorado-marrón (puro-impuro, caro-barato, noble-cotidiano)
  • Un color parece más lejano cuanto más frío es.
  • Los colores intensos parecen estar más cerca que los pálidos.
  • Aunque los objetos negros parecen más pequeños que los blancos, su efecto es más poderoso e impresiona más.
  • Los colores parecen más luminosos sobre fondo negro, pero es inadecuado para grandes superficies habitables, pues en estos casos su fuerza mata los demás colores.
  • Los colores claros son más veraniegos porque reflejan el sol y son por ello más frescos.
  • Hay un principio estético y es que esperamos encontrar los colores ligeros encima de los pesados. Quien entra en un espacio con el suelo claro y el techo oscuro se encoge como si perdiera el suelo bajo los pies. Una carta breve, una notificación de breves líneas, cualquier texto que no llene una hoja de papel es más agradable de ver y leer si el espacio sobrante es más grande arriba que abajo. El espacio superior debe ser mayor que el inferior, de lo contrario se tiene una impresión de inestabilidad, de que el texto se va a caer.
  • La ley de la mezcla de colores de la luz no es igual que la mezcla de colores materiales, pues una es aditiva y otra sustrativa. En la primera los colores primarios son el verde, el violeta y el naranja y la suma de todos da blanco, y en la segunda son el azul, rojo y amarillo y la suma de todos da negro.
  • Los colores del espectro son: rojo, naranja, amarillo, verde, azul, añil y violeta.

Efecto de los colores

  • Ningún color carece de significado
  • El mismo color tiene un efecto completamente distinto si se combina con otros colores, puesto que el efecto de cada color está determinado por su contexto: el acorde cromático determina el efecto del color principal.
  • Si un color se combina con el negro, su significado positivo se convierte en el significado contrario. El amor es rojo pero acompañado de negro es odio.
  • Los colores despiertan sentimientos negativos cuando su empleo no es funcional.
  • Las personas mayores prefieren los colores más luminosos que los jóvenes. Con la edad se van prefiriendo colores como el amarillo, el verde, colores juveniles.
  • El uso creativo del color siempre llama la atención, por ejemplo una forma típica como la pera combinada con un color atípico como el naranja.

Los textos y los colores

  • Cuanto más vivo es el color de las letras menos importante parece la información.
  • Cuanto menos contraste existe entre texto y fondo menos legible resulta.
  • Las letras rojas se leen mal, y sobre fondo negro se desvanecen. El texto sobre fondo rojo a menudo no puede leerse.
  • El texto negro sobre fondo amarillo es el que mejor se lee de lejos. Las reglas de los carteles que se leen de lejos son:
    • Letras grandes, textos breves y signos conocidos.
    • El color del fondo debe contrastar al máximo con el entorno.
    • Los colores deben contrastar al máximo los unos con los otros en términos de claridad y oscuridad. Si el amarillo es más claro que el rojo, entonces es más apropiado como color de fondo. Sobre un fondo claro es mejor que las letras sean negras, y sobre un fondo oscuro las letras blancas darán el contraste óptimo.
    • El color más claro debe ser el del fondo y el color más oscuro el de las letras, lo inverso produce una impresión de vibración en las letras que dificulta la lectura.
    • Un color vivo debe combinarse con negro o con blanco pues entre colores vivos hay resplandores mutuos y hacen que la imagen carezca de nitidez. Son especialmente desaconsejable la combinación de colores de igual intensidad, como rojo-verde y aun más las combinaciones de colores igual de claros como verde-azul.
  • El texto negro sobre fondo blanco es el que mejor se lee de cerca, es recomendable para textos largos y no conocidos.
  • El texto blanco sobre fondo negro es el texto que se lee peor y parece menos importante.
  • El texto multicolor es ilegible y parece superficial.
  • Cuando un texto demanda atención, los colores vivos estorban porque irritan y porque de cerca parecen más fuertes.

 

Significados de cada color y acordes cromáticos

Azul

  • Es el color que más adeptos tiene, independientemente del sexo y la edad.
  • No hay ningún sentimiento negativo en el que domine el azul, por el contrario, en China es un color poco apreciado.
  • Hay idiomas sin nombre para el azul. Sólo en último lugar, cuando se da nombre al blanco, negro, rojo, verde y amarillo se da nombre al azul.
  • Siempre que predomina la razón sobre la pasión, el color principal es el azul.
  • Es el color del agua, del descanso, de lo femenino, de la Virgen María, es apacible, pasivo e introvertido, con el cual sólo se crean nombre de mujer (salvo Douglas). Sin embargo se suele asociar a lo masculino por el tema del vestir.
  • Es el color de la simpatía, la armonía, la amistad y la confianza, de todo lo que tiene que durar eternamente.
  • Es el color de la lejanía, de la vastedad, de lo grande.
  • Es el color de la fidelidad, la fantasía, de lo divino, del frío, de la independencia y de la deportividad.
  • Es el color del bien, de la paz, de la verdad, de la inteligencia y las cualidades intelectuales, de la ciencia y la concentración, de lo práctico y lo técnico, del anhelo y el mérito.

Rojo

  • Es el color que se dice espontáneamente (aunque no sea nuestro preferido) porque en nuestro pensamiento rojo y color es equivalente.
  • Es el primer color al que se le puso nombre.
  • Agrada a hombres y mujeres por igual, pero gusta más a los mayores de 50 años y a los niños, que a los adolescentes.
  • La sobresaturación ambiental del rojo por culpa de la publicidad es la causa de que cada vez tenga menos adeptos, pues es el primer color que en demasía molesta. La creencia de la eficacia ilimitada del rojo en publicidad olvida que aunque ópticamente llama la atención, como tiene aspecto “publicitario” no se lee. Está comprobado que en las revistas con mucho color, los anuncios en blanco y negro que parecen pertenecer al texto son los que más se leen.
  • En los países cálidos lo rojo es lo demoníaco, pero en los colores fríos es lo bueno, hermoso y valioso.
  • Este color se asocia a lo masculino: la fuerza, el valor, la actividad y la agresividad.
  • Es el color de las pasiones, de las buenas y las malas, del odio o la ira y del amor.
  • Es el color de la alegría, de lo atractivo, del deseo, de la felicidad, de la extraversión, de la cercanía, de la vida animal y la voz alta.
  • Rojo y azul son psicológicamente contrarios, su acorde es el de la unión de las fuerzas corporales y espirituales.
  • Es el color de la guerra, del erotismo, de lo inmoral, cuanto más negro más pecaminoso y cuanto más violeta más decadente.

 

Amarillo

  • Lo prefieren más los mayores que los jóvenes.
  • Aunque es el color de la alegría, el optimismo, lo divertido, el placer o la amabilidad, en cuanto se enturbia tiene muchas connotaciones negativas: el enojo, la falsedad, la desconfianza, la envidia, los celos, la avaricia, la mentira o el egoísmo. El amarillo malo no es el del sol ni el del oro, sino el pálido con una pizca de verde, el color azufre.
  • Es el color de la advertencia y eso lo hace antipático.
  • El amarillo es un color difícil para los diseñadores porque los colores que lo acompañan forman con él fácilmente un acorde negativo, por ello, a pesar de ser el más llamativo, sólo aparece en las cajas y envases cuando tienen clara relación con su contenido.
  • Para que resulte amable debe ir con rojo y naranja, acorde del entretenimiento, la energía o la alegría.
  • Es el color del entendimiento y la sabiduría, del verano y la madurez. De lo ácido, lo refrescante y lo amargo.
  • Es el color de lo espontáneo, la impulsividad, lo impertinente y la presuntuosidad. De lo triangular.

 

Verde

  • La preferencia por este color aumenta con la edad sobre todo en los hombres.
  • Quienes lo prefieren piensan en un verde esmeralda o verde mar, y los que no piensan en un verde militar o verde botella.
  • El verde alegra la vista sin cansarla pero se puede volver aburrido.
  • El verde pizarra es el más adecuado para fijar en él largo tiempo la vista.
  • Es un color neutral, muy influenciado por los colores que le acompañan. Junto con el azul tiene connotaciones positivas, lo agradable y tolerante; pero junto con el negro y con el violeta (con el que más contrata psicológicamente) sus connotaciones son negativas.
  • Es el color de lo natural, de la primavera, de lo sano, de la vivacidad, de la vida vegetal. El acorde rojo y verde es el de la vitalidad máxima, pues une la vida vegetal y animal.
  • Forma parte del acorde de la felicidad (oro, rojo y verde). Es el color de la juventud, de la esperanza, de la seguridad, de lo tranquilizador y el recogimiento y junto al azul de la relajación.
  • Es el color de lo refrescante, especialmente junto al azul, pero junto al marrón es lo agrio y amargo, junto al amarillo lo ácido y junto al naranja lo aromático.
  • Es el color de Mahoma y el Islam. El color de Irlanda.
  • Es el color de lo venenoso, de los monstruos, y junto al negro de la destrucción.

 

Negro

  • Es el color preferido de la juventud, cuanto más joven se es más se prefiere, sin embargo ninguna persona de más de 50 lo nombra como preferido. La razón es que los mayores lo asocian a la muerte y los jóvenes lo asocian a la moda:
    • Es el color que mejor sienta a un rostro joven
    • Es el color que menos depende de las modas
    • Es el color de la individualidad, de la protesta y la negación
  • El negro invierte el significado de cualquier color vivo, siendo el acorde negro amarillo de los más negativos: egoísmo, infidelidad, mentira; y el acorde violeta-negro el menos negativo, el de la magia y lo misterioso.
  • La renuncia al color da lugar a la objetividad y la funcionalidad, en un mundo multicolor el negro y el blanco son los colores de los hechos objetivos, renunciando al color el contenido recibe más atención.
  • Es el color del final, del duelo, de la maldad, de lo conservador, de la elegancia.
  • Es el color de la ilegalidad, de la violencia, del poder, de la estrechez, lo anguloso, lo pesado y lo duro.

 

Blanco

  • No hay ningún concepto negativo que se asocie al blanco, aunque casi nadie lo nombra como preferido u odiado.
  • El blanco es un color moderno, es atemporal.
  • El blanco lo vuelve todo positivo.
  • Es el color del comienzo, de lo nuevo, del bien y la verdad, de lo ideal, de la perfección y la honradez.
  • Es el color de la univocidad, de la exactitud, de la voz baja, de la pureza y la inocencia.
  • Es el color de la objetividad, de lo ligero, del invierno. El color típico de los productos congelados en el blanco y azul, y el de los productos frescos el blanco el verde.

 

Naranja

  • Es un color exótico que no suele agradar: hay más personas a las que no les gusta que a las que sí, aunque en los últimos años ha ganado adeptos.
  • Tiene un papel secundario en nuestro pensamiento y nuestra simbología, por ellos hablamos de rojos antes que de naranjas, por ejemplo pelirrojo.
  • El efecto del naranja es máximo cuando está rodeado de su complementario el azul.
  • Se abuso de él en la publicidad, y en los años 70 fue el color típico de los objetos de plástico, así como el color de vanguardia del diseño moderno, por eso hoy se asocia a lo poco serio, poco caro o poco prestigioso (nadie se compraría un Rolls-royce naranja, porque aunque por seguridad sería el más visible parecería menos caro) y con el diseño de ayer.
  • Es el color de lo gustoso y aromático, de la diversión, sociabilidad y lo alegre. De lo llamativo, de la extraversión y la presuntuosidad.
  • Es el color de lo inadecuado, de lo subjetivo, de lo frívolo y no convencional, de lo original.
  • Es el color del peligro, de la extraversión, de la actividad y la cercanía.
  • El acorde amarillo, naranja y rojo es el de la intensificación, de la transición al estado culminante.
  • Crea ambientes agradables en los espacios habitables porque “calienta” e ilumina.
  • Es el color del budismo así como de los holandeses y protestantes.

 

Violeta

  • Incluye el morado, el púrpura (violeta intenso), el malva (color de las flores de dicho nombre), el burdeos o el lila (violeta con blanco). El granate está incluido en los rojos. Si alguien se lía con estos colores puede consultar la discusión “granate,burdeos,morado” de WordReference Forums
  • Son más los que lo rechazan que quienes lo prefieren.
  • Frívolo y original, propio de modas pasajeras, fue el color del art nouveau, de la extravagancia artificial.
  • Su intensidad aumenta con el naranja, no hay combinación menos convencional.
  • Es el color de la devoción, la fe y la superstición, de lo artificial, de lo extravagante y singular: el acorde violeta, plata y oro es la elegancia no convencional; el acorde negro, plata y oro es el de la elegancia convencional.
  • Es el color de la ambigüedad, de lo inadecuado y de lo subjetivo.
  • Es el color de la vanidad, de la moda, de la magia, lo oculto, la fantasía.
  • El acorde violeta, rosa y oro es el de los pecados dulces, propia del chocolate.
  • Es el color de las feministas, y de las personas homosexuales.
  • El lila es el color de las solteronas, por ello tiene una imagen negativa, propio de la cosmética de la mujer madura.

 

Rosa

  • Hay una gran diferencia de preferencias con la edad, los jóvenes lo rechazan mucho más que los mayores, a quienes les gusta por ser un color juvenil.
  • El rosa sólo representa sentimientos positivos (los que se asocian a lo femenino como el encanto, la amabilidad, la delicadeza, lo tierno, lo seductor, lo suave, lo dulce) pero las mujeres lo asocian a lo femenino negativo, a lo cursi.
  • Junto al blanco es la inocencia, y junto al violeta o el negro forma parte de la seducción y el erotismo.
  • Es el color de la infancia, de lo pequeño, del romanticismo, de la ensoñación, lo benigno.
  • Es el color de la vanidad, de lo artificial, de lo barato: sólo da sensación de refinamiento con sus contrarios psicológicos, en los acordes negro y rosa, y rosa, gris y plata.

 

Oro

  • A pesar de ser el color del dinero, la felicidad, la fama y el lujo es el color preferido de pocos.
  • Acompaña a cualidades como la fidelidad, la amistad, la honradez o la confianza pero nunca como color dominante.
  • La publicidad ha convertido el color oro en vulgar, por eso es uno de los colores de lo cursi, los trajes dorados y lujosos de antaño hoy son demasiado llamativos para ser elegantes.
  • Es el color del sol y la divinidad, de la belleza, la pompa, de la vanidad y la solemnidad.
  • Con el naranja y el rojo forma parte del acorde del placer, junto al amarillo de la presuntuosidad y junto al blanco y el azul de lo ideal, el bien y la verdad.

 

Plata

 

  • Es el último color en el que pensamos y nunca es el primero nombrado en un acorde, salvo en lo referente a la velocidad y el dinamismo.
  • Es el color de la elegancia, del lujo no típico, menos ostentoso que el oro. La plata subraya la personalidad de quien la elige.
  • Es el atributo amable de la edad: la publicidad convierte cualquier gris en plateado para ennoblecerlo.
  • Se asocia a lo pequeño, a la luna, a la noche y a las fuerzas mágicas.
  • Se asocia al dinero, a la codicia y la avaricia.
  • Forma parte del acorde de la pasividad y el frío, de la cortesía y la inteligencia, de la esperanza y el optimismo, de la ciencia y la exactitud, de lo moderno, lo técnico y lo funcional, de la elegancia, lo singular y lo extravagante.

 

Marrón

  • A pesar de estar muy presente en la moda y en la decoración (madera, cuero…), a pesar de estar en todos lados, como color en sí es el más rechazado de todos y más aún con la edad. Ya desde la Edad Media ha sido el color más feo.
  • Técnicamente, más que un color es una mezcolanza, pues toda combinación de colores acaba dando marrón.
  • Psicológicamente sus conceptos son casi siempre negativos: lo feo, lo antipático, lo antierótico, lo desagradable, lo vulgar, la pereza, la necedad… un traje marrón nunca podrá ser elegante.
  • Junto al negro es el color del malo. Es el color de lo marchito y del otoño.
  • Es el color de lo áspero y lo amargo, de lo corriente y de lo anticuado.
  • Hace los espacios habitables más acogedores, particularmente agradable si es combinado con oro o naranja, pero nunca con negro, pues es el acorde de los estrecho y pesado.
  • Cuanto más oscuro más calórico y fuerte parece y así es usado en la publicidad.
  • Cualquier color junto al marrón se apaga.

Gris

  • Es un color sin carácter, muy influenciado por los colores que le acompañan (con marrón es aburrimiento, con azul es la reflexión, con amarillo la inseguridad)
  • Es poco apreciado y aun menos con la edad, pues es el color de todo lo que acaba con la alegría de vivir, por ello es psicológicamente el que más contrasta con el amarillo y el naranja, los colores de lo luminoso y el gozo de vivir. El acorde gris-amarillo-naranja es el de la provocación y lo inadecuado (ningún concepto dio ese acorde)
  • El acorde gris, negro, marrón es el color de lo feo, de lo negativo, de lo antipático y siniestro.
  • Es el color de la vejez, de la experiencia, la respetabilidad y la sabiduría pero también de lo anticuado, del pasado y lo olvidado, de la pobreza, de la modestia, de lo sucio y lo desagradable, de lo barato y basto, no hay lujo gris, pues el objeto parece más barato. Solo puede ser elegante en el vestir por el material, pues en un material barato parece más pobre.
  • Es el color del aburrimiento, de la soledad y el vacío, de lo feo, lo negativo, lo hosco, de la insensibilidad y la indiferencia, y lo desapacible. Es uno de los colores del frío y del invierno.
  • Es el color junto al azul de la reflexión, de la ciencia y de la objetividad.
  • Es uno de los colores de lo secreto, de la avaricia y de la envidia. Del conformismo, de lo corriente, lo conservador y lo práctico.

Usabilidad web: Red routes aplicadas a UX

¿Qué son las “red routes” o rutas rojas?

El concepto de “red routes” (rutas rojas) aplicado a la usabilidad es acuñado por David Travis, Managing Director de Userfocus, en 2006.

Red routes (rutas rojas) aplicadas a UX

Las “red routes” son las vías de Londres, marcadas con líneas rojas, en las que no se puede parar o aparcar. Enfatiza que las carreteras más utilizadas por el mayor número de personas deben ser eficientes y requieren prioridad por encima de todo.

 

mapa_rutas_rojas_londres

David Travis llevar el concepto de “rutas rojas” a nuestro sitio web en su artículo “Red route usability: The key user journeys with your web site”. Es decir, identificar las actividades críticas, y asegurarse que las personas usuarias las realizan de la manera más sencilla eliminando todos los problemas de usabilidad, logrando su objetivo y teniendo la mejor experiencia posible.

Por ejemplo, en un ecommerce una “ruta roja” será “elegir un producto”, otra será por ejemplo “comprar un producto”.

Hay que tener en cuenta la frecuencia de las actividades y la naturaleza crítica de la actividad. Además, las “rutas rojas” deben estar en sintonía con los objetivos clave de las personas usuarias.

Las rutas rojas nos ayudan a centrarnos en las necesidades reales de las personas usuarias y es una manera de no llenar la interfaz con elementos innecesarios. Como suele decir, “menos es más”.

Definición de las rutas rojas

Las rutas rojas son muy importantes porque nos permite definir qué funcionalidades desarrollar primero en un software, las actividades principales que la gente espera poder llevar a cabo y por las cuales compra el producto, lo que sería el PMV (Producto Mínimo Viable). El PMV permite saber con muy poca inversión si la idea que se está desarrollando responde a las necesidades de las personas usuarias y si tiene aceptación en el mercado. De esto hablaré más adelante.

Cuando hablamos del diseño de actividades, hay que diferenciar entre actividad (elegir un producto, comprar un producto, etc.) de las tareas concretas en las que se desglosan.

Travis comenta en el artículo lo importante que es para la persona usuaria asegurarse de que está eligiendo la mejor opción. Y es lo que desemboca en una serie de tareas para lograr un  objetivo común: leer los comentarios sobre el producto, comparar productos, etc.

Otro ejemplo, si alguien estuviera creando una plataforma de correo electrónico, algunas de las rutas rojas serían las siguientes: Crear una cuenta, enviar correos y recibir correos.

Las “rutas rojas” según Travis deben tener cinco características:

  • Poder realizar una actividad completa, no a una simple tarea.
  • Una “ruta roja” tiene implícita una medida de logro obvia, como es el caso de “comprar un producto”, al contrario que las medidas de éxito generalistas, “que el sitio sea fácil de usar”.
  • Debe ser portátil a un sitio de la competencia. Una “ruta roja” es una actividad que refleja un objetivo de alto nivel del usuario en el sitio y que, por tanto, seguramente puede realizar en otro sitio de la competencia.
  • Se centra los objetivos, no en los pasos del procedimiento, no dicta una implementación concreta.
  • Es realista, se centra en los objetivos más importantes para el usuario y la organización.

“Red routes” dentro del Diseño Centrado en el Usuario

En el proceso del Diseño Centrado en Usuario se distinguen varias fases iterativas. En este caso voy a nombarlas de acuerdo a las fases de Garret.

elementos de la UX

Qué contenidos y funcionalidades le ofrecemos a la persona usuaria y su priorización se realizan en la fase de “Enfoque”.

Por tanto, no podemos definir la arquitectura de información y el diseño de interacción, ni por tanto comenzar el prototipado (fases “Estructura” y ”Esquema” ) sin saber cuáles son las “rutas rojas” de nuestro sitio.

De la misma manera, no podemos identificar las “rutas rojas”, sin hacer ux research, sin pasar por la fase de “Estrategia”, donde obtendremos toda la información necesaria sobre nuestro público objetivo y sus necesidades, pero también sobre los objetivos de negocio.

En consecuencia, la definición de las “rutas rojas” se asienta en la información que obtenemos durante la fase de investigación.

¿Cómo saber si una funcionalidad de nuestra aplicación se encuentra en una “ruta roja”?

David Travis propone, en “How red routes can help you take charge of your product backlog” hacerse dos preguntas:

  • ¿Cuántas personas usuarias necesitan/usan esa función?
  • ¿Con qué frecuencia necesitan/usan esa función las personas usuarias?

En base a ellas rellenamos una matriz con dos ejes: en el eje vertical la frecuencia y el horizontal el número de personas usuarias.

tomtomHay que priorizar los problemas de usabilidad

David Travis propone tres preguntas que pueden hacernos priorizar los problemas de usabilidad de nuestro sitio y definir si son “críticas” y es urgente resolver, si son “serias” y hay que resolver lo antes posible o si tienen una criticidad “media” o “leve”.

Árbol de decsión de una ruta roja: David Travis

 

Rik Williams, basándose en este, propone el siguiente en Red Route Usability Prioritisation Flow Chart:

¿Está en una red route? ¿Afecta al negocio? ¿Tiene mucho tráfico?