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

Introducción: “Psicología del color”

La esencia del libro es la explicación de los sentimientos que provocan los distintos colores y la combinación de los mismos, en él puedes encontrar información de lo más variada relacionada con los colores: desde consejos para vestir y maquillarse correctamente, hasta un breve repaso de la moda a lo largo de la historia, pasando por explicaciones sobre qué sustancias se han utilizado para conseguir los tintes y pinturas de cada color o los colores asociados a cada signo del zodiaco.

La psicología del color; Eva Heller

El libro tiene varias curiosidades como las siguientes:

  • que el color naranja no existía en Europa antes de que los cruzados trajeran esta fruta de Oriente.
  • que Napoleón murió por su afición al verde.
  • que hasta 1990 los ejecutivos y directivos de IBM debían llevar camisa blanca por contrato.
  • que hasta 1950 no se generalizó el traje de novia blanco sino que era muy habitual el negro.
  • que el luto en Asia es blanco.
  • que el rosa era un color masculino hasta la primera mitad del siglo XX.
  • o que durante la Edad Media el color de las ropas estaba regulado y llevar un color no acorde con tu estatus social se penaba incluso con la muerte.

Objetivo del estudio

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 yellow o 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 lo fue de la homosexualidad.
  • 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 principales arterias viales de Londres, marcadas con líneas rojas, en las que no se puede parar o estacionar.

Son un 5% de las vías que soportan el 30% del tráfico rodado. El objetivo es que el tráfico sea fluido y rápido, evitando así problemas y retenciones. Gracias a ellas se ha mejorado un 20% el tiempo de recorrido en las líneas de autobús y reducido en un 6% los accidentes.

mapa_rutas_rojas_londres

David Travis es quien propuso la metáfora de trasladar el concepto de “rutas rojas” a nuestro sitio o aplicación web en su artículo “Red route usability: The key user journeys with your web site”. Es decir, identificar las actividades críticas, los trayectos clave de nuestros usuarios, y asegurar que los recorren de la manera más sencilla y rápida posible, eliminando todo obstáculo de usabilidad en ellos.

Una “ruta roja” es un camino crucial que el usuario va a recorrer para lograr un objetivo y tenemos que garantizar que puede recorrerlo de manera sencilla, sin distracciones, sin interrupciones, ofreciendo la mejor experiencia posible.

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

Para identificar estas “rutas rojas” es necesario 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.

Priorizar y enfocarse en lo más importante, las “rutas rojas”, asegura un diseño centrado en las necesidades reales de los usuarios y es una manera de luchar contra la “Featuritis”, que es la tentación de añadir más y más características. Permite que las funciones menos importantes no distraigan la atención, no sobrecarguen la interfaz.

¿Qué nos permite definir las rutas rojas?

Definir las “rutas rojas” también nos permite decidir, en un desarrollo ágil, 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, serían el MVP (Producto Mínimo Viable).

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.

En el caso de “elegir un producto”, Travis nos comenta en el artículo lo importante que es para el usuario asegurarse de que está eligiendo la mejor opción. La actividad “elegir un producto” se identifica como “red route”. “Elegir un producto” es la actividad, que se puede materializar en una serie de tareas con un objetivo común: leer los comentarios sobre el producto, comparar productos, etc.

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

  • Una “ruta roja“ hace referencia a 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”.
  • Una “ruta roja” 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.
  • Una “ruta roja” se centra los objetivos, no en los pasos del procedimiento, no dicta una implementación concreta.
  • Una “ruta roja” es precisa y 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 referenciarlas de acuerdo a las fases de Garret.

elementos de la UX

Qué contenidos y funcionalidades le ofrecemos al usuario 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ántos usuarios necesitan/usan esa función?
  • ¿Con qué frecuencia los usuarios necesitan/usan esa función?

En base a ellas rellenamos una matriz con dos ejes: en el eje vertical la frecuencia y el horizontal el número de usuarios. El código de color nos da la prioridad, si se encuentra en una “red route”.

tomtomLas “Red routes” nos ayudan a 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”.

Se basa en identificar si se produce en una “ruta roja”, si es difícil de superar (y el impacto que tiene en la finalización de la tarea) y de su recurrencia.

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

Accesibilidad web: Norma BS 8878:2010

Introducción

En esta entrada voy a describir la norma BS 8878:2010 Web Accessibility. Code of Practice del Reino Unido que estandariza lo siguiente:

  • una política de accesibilidad web dentro de la estrategia de cualquier organización, para la consideración de la accesibilidad web a lo largo de todo el ciclo de vida de cualquier producto web.

Accesibilidad web: Norma 8878:2010

Qué es la norma BS 8878:2010

La norma BS 8878:2010 Web Accessibility. Code of Practice es un estándar nacional del Reino Unido creado por el BSI (British Standards Institution)

El objetivo es que puedan seguir un estándar que les indique, de manera clara y sencilla, qué hacer y cómo conseguir que sus productos web sean más accesibles y fáciles de usar.

Para incluir en un sitio la declaración de conformidad de acuerdo a la BS 8878:2010, la organización debe:

  • atender todas las recomendaciones de la norma;
  • ser capaz de justificar cualquier desviación respecto a dichas recomendaciones;
  • documentar sus procesos de decisión en la política de accesibilidad del producto que acredite que se han seguido las recomendaciones de la norma.

La declaración puede estar basada en una autoevaluación o en una evaluación llevada a cabo por terceros.

De qué se compone de y qué nos enseña la BS 8878:2010

Es un documento que contiene 90 páginas, organizado en 8 capítulos y 15 anexos.

tabla1_secciones_de_bs8878

tabla2_anexos_8878

Nos enseña varias cosas:

    • Cómo crear una política de accesibilidad web de la organización
    • Cómo integrar las consideraciones de accesibilidad a través del proceso de desarrollo
    • Cómo asegurar la accesibilidad web a lo largo del ciclo de vida de un producto web
    • El mejor uso de las pautas de accesibilidad existentes en el proceso de desarrollo de productos web accesibles
    • Cómo garantizar la accesibilidad en los productos que se adquieren o se contratan a terceros
    • Cómo documentar y justificar todas las decisiones en la política de accesibilidad del producto web

    • El mejor uso de las pautas de accesibilidad existentes en el proceso de desarrollo de productos web accesibles

    • Cómo garantizar la accesibilidad en los productos que se adquieren o se contratan a terceros

    • Cómo documentar y justificar todas las decisiones en la política de accesibilidad del producto web

    • Cómo comunicar las decisiones de accesibilidad en una declaración de accesibilidad

    • Cómo mantener la accesibilidad tras el lanzamiento y cómo gestionar las comunicaciones de los usuarios sobre la accesibilidad del producto web

Cómo crear una política de accesibilidad web de la organización

La política general de accesibilidad web de la organización estará integrada en la estrategia de la organización. Se refleja en un documento donde se explica el compromiso de la organización con la accesibilidad y se resume su planteamiento.

En el capítulo 4.3 se describe cómo elaborarla, y en el Anexo E1 se incluye un ejemplo de política de accesibilidad de una organización.

La norma explica además cómo designar un responsable (un rol o departamento con autoridad para cumplir con esta responsabilidad y que tiene una visión general de todos los productos web) que garantice que todos los productos web creados o adquiridos cumplen esta política.

Sus responsabilidades serán:

  • elaborar la política de accesibilidad de la organización;
  • delegar responsabilidades a través de diferentes departamentos y asegurarse de que las personas en las que delega son las adecuadas (se detalla la asignación de responsabilidades en el Anexo F);
  • asumir la responsabilidad de asegurar que la organización implementa y mantiene la política de accesibilidad.

Cómo integrar las consideraciones de accesibilidad a través del proceso de desarrollo

La norma ayuda:

  • a identificar las decisiones que impactan en la accesibilidad a lo largo de todo el ciclo de vida del producto;
  • a tomar estas decisiones de la mejor manera posible, considerando todas las opciones e implicaciones.

Cómo asegurar la accesibilidad web a lo largo del ciclo de vida de un producto web

Integrada dentro una metodología de Diseño Centrado en el Usuario, utilizando diversas técnicas de investigación y pruebas en los puntos clave del proceso de producción, y considerando siempre el impacto en la accesibilidad en cada uno de los pasos que se dan.

El mejor uso de las pautas de accesibilidad existentes en el proceso de desarrollo de productos web accesibles

El capítulo 7 (“El uso de las pautas de accesibilidad para dirigir la producción de productos web accesibles”) trata las pautas de accesibilidad del W3C (WCAG, UAAG, ATAG, WAI-ARIA) u otras pautas de accesibilidad como la Section 508 de EEUU, y ofrece recursos y enlaces de interés (selección de librerías Javascript, técnicas para Adobe Flex o Microsoft Silverlight).

Aborda también la adaptabilidad individualizada en un enfoque personalizado de la accesibilidad web, recomendando la aplicación de AccessForAll 3.0 (al que dedica también buena parte del Anexo K)

Trata por último, como recomendaciones adicionales a las WCAG 2.0, las pautas de accesibilidad específicas a tener en cuenta en dispositivos móviles e ITPV, así como las pautas de accesibilidad específicas para las personas mayores.

Cómo garantizar la accesibilidad en los productos que se adquieren o se contratan a terceros

El capítulo 6.11 trata sobre cómo garantizar que los productos que se adquieren o se contratan a terceros se seleccionan o especifican de manera que se asegure su accesibilidad.

En el Anexo L se incluye una batería de preguntas que se recomienda hacer antes de adquirir o contratar productos a terceros.

Cómo documentar y justificar todas las decisiones en la política de accesibilidad del producto web

Todas las decisiones que impactan en la accesibilidad del producto se documentan y justifican en su política de accesibilidad web.

La política de accesibilidad de un producto web es un documento específico para ese producto web en particular, que se crea tan pronto como el producto es concebido y se va completando a medida que pasamos por las diferentes etapas de desarrollo.

Es por tanto un documento vivo que evoluciona a lo largo de todo el ciclo de vida del producto.

El proceso para crear productos web accesibles ocupa el capítulo 6. A lo largo de él se va detallando, en cada paso, toda la información que se debe incluir en la política de accesibilidad del producto web.

El capítulo 5 está dedicado en exclusiva a la justificación de las decisiones.

En el capítulo 4.5 se resume la información que debe incluir la política de accesibilidad del producto web y en el Anexo E2 se proporciona un ejemplo de política de accesibilidad de un producto web.

Cómo comunicar las decisiones de accesibilidad en una declaración de accesibilidad

Las decisiones de accesibilidad del producto web se comunican a los usuarios tras el lanzamiento mediante la publicación en la web del producto de una declaración de accesibilidad.

La elaboración de la declaración de accesibilidad se trata en los capítulos 4.4 y 4.6 y se incluye un ejemplo en el Anexo E3.

La declaración de accesibilidad resume la política del producto de manera clara, sencilla y sin jerga (de manera que todas las personas puedan comprenderla) y muestra cómo se ha tenido en cuenta la accesibilidad durante el desarrollo del producto web.

Cómo mantener la accesibilidad tras el lanzamiento y cómo gestionar las comunicaciones de los usuarios sobre la accesibilidad del producto web

En el capítulo 6.16 se trata el proceso de revisión y evaluación continua del producto. También trata la necesidad de asegurarse de que todos los comentarios (sugerencias, quejas, etc.) sobre el producto web vienen a través de los mecanismos de contacto indicados en su declaración de accesibilidad y que se revisan y responden de manera adecuada.

En el Anexo M se incluye una guía para tratar las quejas de accesibilidad (cómo extraer información relevante, cómo responder, etc.)

Lean UX: Cómo aplicar los principios Lean a la mejora de la experiencia de usuario

Introducción

Lean UX es una metodología que se asienta en la colaboración multifuncional y en la gestión basada en los resultados.

Supone un cambio de procesos, una nueva manera de pensar la gestión del software, centrada en las soluciones, en iterar una y otra vez perfeccionando el producto en cada nueva iteración.

Es una metodología que permite dejar de hablar de funciones y documentos, para pasar a hablar de lo que funciona y lo que no funciona, y que nos permite armonizar un entorno de desarrollo ágil con el diseño UX.

Lean UX

El libro tiene tres partes:

Primera parte: Introducción y principios

Lean UX se asienta en tres pilares:

  • Design Thinking, enfoque centrado en las soluciones que, a través del trabajo colaborativo, itera una y otra vez perfeccionando el producto en cada iteración. Es una manera de trabajar que alienta la colaboración en el equipo y considera el producto desde una perspectiva holística y abarcadora.
  • Metodologías de desarrollo ágil de software, que tratan de entregar de forma rápida y regular software funcional a los clientes y aprovechar el aprendizaje que se obtiene de estas entregas para ajustar el proyecto. Aplican cuatro principios básicos:
    • Los individuos y las interacciones son más importantes que los procesos y las herramientas.
    • El software funcional es más importante que la documentación exhaustiva.
    • La colaboración con los clientes es más importante que la negociación de contratos con ellos.
    • La respuesta a los cambios es más importante que la planificación.
  • Método Lean Startup de Eric Ries que utiliza un ciclo de feedback denominado “crear-medir-aprender” y una filosofía que se aplica directamente al diseño de productos en Lean UX. Los principios que subyacen son:
    • cambiar documentos por artefactos de diseño;
    • colaboración funcional entre todos los implicados;
    • y un modelo basado en la experimentación.

Los principios en los que se basa Lean UX son:

  • Equipos multifuncionales para evitar el desarrollo en cascada.
  • Equipos pequeños, dedicados, coubicados, para fomentar la comunicación, concentración y camaradería; pero como no siempre es posible, a lo largo del libro se dan propuestas para trabajar con equipos localizados en diferentes lugares.
  • Progreso igual a resultados, no a entregas de documentación.
  • Equipos centrados en los problemas.
  • Eliminación del despilfarro, es decir, de todo aquello que no contribuye a conseguir el objetivo final.
  • Lotes pequeños, evitar crear muchas ideas de diseño sin probar ni implementar.
  • Descubrimiento continuo de lo que los usuarios están haciendo con nuestro producto y por qué lo están haciendo.
  • GOOB (Getting Out Of the Building), porque el éxito o el fracaso de nuestros productos no depende de las decisiones del equipo de desarrollo, sino de los usuarios.
  • Entendimiento común, es decir, el conocimiento colectivo del equipo sobre el producto y los usuarios.
  • Evitar las estrellas, gurús y ninjas que rompen la cohesión del grupo y reducen la colaboración.
  • Exteriorización del trabajo, es decir, exponer el trabajo a compañeros, colegas y clientes.
  • Hacer en lugar de analizar.
  • Aprendizaje en lugar de crecimiento: asegurarnos de que una idea funciona antes de hacerla crecer.
  • Permiso para equivocarse, porque los fallos conducen al perfeccionamiento (ver vídeo Why You Need to Fail, Derek Sivers, YouTube)
  • Escapar de los negocios basados en entregables.

Segunda parte: Proceso

¿Cómo conseguir un equipo que trabaja de forma colaborativa, iterativamente y en paralelo, que reduce al mínimo los entregables, y se centra en el software funcional y en el feedback del mercado?

Visión, marco y resultados

En este capítulo explica cómo reorganizar el trabajo del equipo para que se centre en obtener resultados (no en desarrollar funciones), y en el proceso de declaración de resultados.

Se sustituyen los requerimientos por suposiciones, y a partir de ellas creamos y probamos hipótesis. La herramienta básica es por tanto la declaración de hipótesis, que tiene como elementos básicos: las suposiciones, las hipótesis, los resultados, los personajes y las funciones.

Comenzamos con la declaración del problema, después examinamos las suposiciones implícitas en él y las transformamos en hipótesis. Explica cómo escribir las declaraciones de hipótesis para que capten las funciones, la audiencia y los objetivos previstos, suficientemente específicos para poder probarlos; y proporciona ejemplos y plantillas.

Por ejemplo, la creación de Personas se realiza al revés de como posiblemente te han enseñado. En vez de dedicar mucho tiempo a un trabajo de campo para su creación, se crean unos protopersonajes en pocas horas, en una sesión de brainstorming en la que participa todo el equipo. Los protopersonajes son un modelo muy esquemático, y a medida que la investigación avanza y se aprende más sobre los usuarios, se va ajustando la definición de las Personas y nuestro diseño.

Diseño colaborativo

Lean UX es un proceso colaborativo que reúne a todos los implicados en un trabajo de creación continua. El diseño colaborativo, dirigido por un diseñador de UX, permite a todo el equipo:

  • crear juntos los conceptos del producto,
  • construir un entendimiento común sobre el problema y las soluciones, con menos necesidades de documentar,
  • decidir qué funcionalidad y elementos de la interfaz implementan mejor las funciones recogidas en las hipótesis.

Lean UX promueve la conversación como método principal de comunicación entre los miembros del equipo.

La documentación de salida de las sesiones consta normalmente de esquemas de baja fidelidad y wireframes, no muy elaborados para que pueda cambiarse de dirección fácilmente.

Se dedica parte del capítulo a una técnica, el Estudio de Diseño, que es una sesión más formal de trabajo para conseguir que un equipo multifuncional visualice de forma conjunta las soluciones potenciales a un problema de diseño.

En resumen, se reparte una hoja dividida en seis cuadros y en cada uno se indica el personaje y el punto de conflicto que se desea resolver (de las suposiciones declaradas y las hipótesis que han generado). En 5 minutos cada uno genera 6 borradores de baja fidelidad para cada una de sus combinaciones de personaje-punto de conflicto. Después de ponerse en común, cada uno elige su mejor idea y desarrolla una versión de ella más elaborada. Finalmente, todos se ponen de acuerdo en una única idea, la que tiene más probabilidades de éxito y que servirá de base para el PMV.

El capítulo termina abordando una herramienta que se considera básica, la Guía de estilo, entendida como una biblioteca de patrones, un repositorio con los elementos de la interfaz aprobados y listos para funcionar. De este modo, no debatiremos sobre dónde poner, por ejemplo, la etiqueta de un campo de formulario, puesto que esto ya está definido de antemano. El trabajo se agiliza sin tener que volver a diseñar o prototipar estos elementos, nos centramos en la interacción y la extensión del sistema visual existente.

Si se trabaja desde cero, o en un producto simple, puede crearse la Guía de estilo completa antes de comenzar el proyecto, pero en proyectos complejos y actualizaciones de productos ya desarrollados, funciona mejor crearla a medida que el equipo crea o modifica un elemento de la interfaz.

En la Guía de estilo se incluyen:

  • todos los elementos gráficos de diseño: paleta de colores, tipografías…
  • los elementos de interacción: con su aspecto en todos sus estados, y con información sobre dónde se colocan en pantalla habitualmente y cuándo se utilizan;
  • el vocabulario: palabras que se utilizan en la interfaz, elecciones gramaticales, lenguaje en los botones…
  • incluso los fragmentos de código, para que los desarrolladores tengan una ventanilla única donde obtener las directrices de diseño y el código básico.

Puede elaborarse mediante una wiki o desarrollarse una guía dinámica, es decir, un repositorio de diseño y de código front-end que no solo define el aspecto y el comportamiento del producto, sino también el lenguaje necesario y las hojas de estilo para la interfaz, de tal manera que modificando la guía se modifica el producto.

La Guía debe estar accesible para todos los miembros de la organización, debe ser un elemento vivo que se mejora y actualiza, y debe ser aplicable para que no acabe convirtiéndose en un museo.

PMV y experimentos

El PMV (Producto Mínimo Viable) permite, partiendo de la hipótesis priorizada en la fase anterior, comprobar las suposiciones. Creamos los mínimos elementos posibles para probarla y saber si la hipótesis es cierta y hay que perfeccionarla, o si por el contrario hay que abandonarla.

En este contexto, hay que entender el PMV como el “producto” más pequeño que se puede crear para comprobar si una hipótesis es válida. El PMV puede adoptar muchas formas, a menudo un prototipo, y de hecho, repasa los diferentes tipos de prototipos, sus ventajas e inconvenientes, y cuál elegir en cada caso.

Pero no siempre es necesario crear un prototipo para averiguar algo, ni todos los PMV tienen que ser prototipos: puede ser el envío de un email, una landing, un botón para medir cuánta gente lo pulsa y estaría interesada, etc. Al final depende de nuestra hipótesis y lo que queremos averiguar (si resuelve un problema real, si hay suficiente demanda…)

Feedback e investigación

En la metodología es fundamental que el equipo consiga el feedback necesario que le sirva de guía en el proceso de diseño. Por ello, este capítulo se centra en qué técnicas usar para conseguir este feedback de forma continua y desde una etapa temprana, para incorporarlo a las siguientes iteraciones. Se trata de probar el PMV mediante técnicas de investigación ligeras, continuas y colaborativas.

La propuesta se basa en que la investigación la realice el propio equipo mediante descubrimiento colaborativo, con la ayuda de un especialista que ayude al equipo a planificar y ejecutar las actividades, para después dar sentido a los datos obtenidos y buscar patrones.

Por ejemplo, se propone la creación de equipos de perfiles mixtos para hacer entrevistas o enseñar el prototipo; la planificación semanal de test con 3 usuarios cada jueves; aprovechar el conocimiento del servicio de atención al cliente; diferentes formas de recoger feedback en la página; estudiar los registros de búsqueda y las estadísticas de acceso; realizar test A/B, etc.

Tercera parte: Cómo hacerlo funcionar

En esta última parte se aborda cómo integrar Lean UX en desarrollos ágiles, explicando cómo encajar las técnicas expuestas en un proceso Scrum típico y cómo hacerlas más efectivas, para pasar después a hablar de los cambios organizativos necesarios para apoyar esta manera de trabajar.

En 2007, Desirée Sy (Adapting Usability Investigations for Agile User-centered Design (PDF, 380 KB)) proponía integrar UX en desarrollos ágiles con la técnica “Ciclo 0” o “Sprint por etapas”, en el que el diseño va un sprint por delante del desarrollo.

lean_ciclo0

Jeff Gothelf lo considera un modelo de transición, no una solución final a la que aspirar, porque acaba generando un proceso en cascada a pequeña escala, y para que Lean UX funcione, el equipo completo debe participar en todas las actividades.

Esquema_agile_leanux_jeff_gothelf_

 

Usabilidad web: 100 tips de diseño UX para la experiencia de usuario

Introducción

En este artículo titulado Top 100 UX Design Tips from a User Experience Master se nos facilita 100 tips relacionados con la experiencia de usuario. Los resumiré y los organizaré en diferentes secciones aprovechando la clasificación que el mismo autor ha realizado en su artículo.

Es un artículo muy interesante escrito por Andrew Kucheriavy, un reconocido visionario con experiencia funcional en desarrollo web, marketing, e-commerce y desarrollo de negocios.

100 tips de diseño para la experiencia de usuario

Flujo

1. Mover a los usuarios de una sección a la siguiente sin problemas. Para ello es necesario comprender sus objetivos y sus necesidades.

2. Los usuarios son más propensos a notar los elementos cerca de la partesuperior de la página en orden de importancia. Por lo que debemos situar ahí lo que queremos que antes llegue a la persona usuaria.

3. Las interfaces web consistentes y fáciles de usar ayudan a los usuarios a concentrarse en el contenido y moverse a través de él.

4. Evita crear páginas sin salida en sitios web. Causan confusión y crean trabajo adicional para los usuarios.

5. Usar patrones e interfaces de sitios web comunes. Siempre puede ser más arriesgado que las personas usuarias tengan que aprender algo nuevo.

Scrolling

6. Las personas usuarias se desplazarán hacia abajo en la página web, siempre que quede claro que hay información relevante adicional más abajo, por lo tanto,

7. El sitio web deberá proporcionar una fuerte indicación visual de la dirección del desplazamiento y si hay más contenido disponible.

8. Cuanto más larga es la página del sitio web, menos probable es que alguien se desplace hacia abajo hasta el final.

9. El scroll en las páginas web es agradable porque siempre es más rápido que hacer clic. Pero hay que tener cuidado y no hacer que las páginas sean demasiado largas.

Contraste y color

10. Diseño para usuarios con daltonismo. Convierta sus diseños a escala de grises para garantizar que todos los usuarios puedan leer información importante Haga clic para tuitear

11. No use el color azul para ningún texto en sitios web que no sean enlaces.

12. Sé consciente del contraste en los sitios web móviles. El brillo de la pantalla puede inutilizar su sitio web.

13.
Reserve un color para las llamadas a la acción en su sitio web y no lo use para nada más.

14. Los colores cálidos y brillantes se acercan y los colores fríos y oscuros permanecen en el fondo.

Tiempo de carga

15. Asegúrese de que los usuarios del sitio web puedan completar su objetivo principal de forma rápida y sencilla.

16. Lo que más importa a los usuarios es que su sitio web se sienta rápido (incluso si es solo su percepción)

17. La percepción de la velocidad del sitio web se basa en el tiempo de carga, el comportamiento de la carga, los tiempos de espera y la suavidad de las animaciones.

18. Muestre un esqueleto de los elementos del sitio web para comunicar el diseño cuando se está cargando

19. El texto del sitio web debe cargarse antes de las imágenes para que los usuarios puedan comenzar a leer antes de que se cargue el resto del sitio.

20. Los retrasos de más de varios segundos a menudo harán que los usuarios abandonen el sitio web.

Móvil

21. Los elementos de la interfaz móvil son difíciles de tocar con precisión si son pequeños o están juntos.

22. El tamaño mínimo para un objetivo táctil en los móviles debe ser de 1 cm x 1 cm con el relleno adecuado.

23. Alguien que usa un dedo meñique en el sitio web o la aplicación móvil significa que los objetivos de la interfaz son demasiado pequeños.

24. Al sostener una tableta, los lados y la parte inferior de la pantalla se alcanzan más fácilmente con el pulgar.

25. No requiere deslizar verticalmente para nada que no sea el desplazamiento normal de la página.

26. No uses dobles toques en dispositivos móviles. Asegúrate de que los usuarios puedan interactuar con un solo toque.

27. Determine si los usuarios usarán dispositivos con una mano o con dos al diseñar diseños móviles.

Navegación

28. Siempre tenga una forma obvia de acceder al menú de navegación en su sitio web Haga clic para twittear

29. Si la jerarquía de su sitio web tiene más de 3 a 4 niveles de profundidad, es hora de rediseñar.

30. Considere utilizar menús fijos, especialmente en páginas web más largas o cuando se necesite un acceso rápido.

31. La buena navegación del sitio web no está en el camino, desaparece en el fondo.

32. Haz que tu navegación sea consistente; No debería cambiar en todo el sitio web.

33. Haga que las etiquetas de navegación sean específicas, de no más de 2 o 3 palabras y comience con la mayor cantidad de información que contenga la palabra.

34. Permita que los usuarios sepan dónde se encuentran en el sitio web mediante el uso de rutas de navegación

35. Navegación móvil: muestra las opciones más utilizadas y oculta las demás en un menú de hamburguesas.

36. Los menús de hamburguesas en los escritorios son menos perceptibles, menos familiares, aumentan los costos de interacción y disminuyen el olor de la información.

37. Para la navegación secundaria en dispositivos móviles, utilice las páginas de aterrizaje, submenús o menús de la página.

38. Los menús desplegables del menú deben ser verticales, no horizontales; Es mucho más difícil desplazarse horizontalmente.

39. Megamenus debe ser más angosto que la página para que sea fácil “hacer clic” en ellos.

40. Si usa megamenus, organice los enlaces en grupos y distinga entre elementos en los que se puede hacer clic y no en los que se puede hacer clic.

41. No esconda las funciones de inicio de sesión o búsqueda dentro de los menús del sitio web.

Formularios

42. Alinee las etiquetas de formulario y los campos en una sola línea vertical para permitir un escaneo rápido.

43. Las etiquetas de los campos deben estar fuera del campo de texto, no adentro, para que los usuarios no los pierdan.

44. Divida las secciones con separadores para hacer que los formularios web largos sean más fáciles de usar.

45. Coloque los errores de formulario junto a los campos que causan errores en todos los formularios web.

46. ​​Los mensajes de error deben ser útiles, utilizables, concisos y fáciles de entender.

47. Muestre todos los campos que causan errores a la vez, al lado de cada campo problemático para que los usuarios móviles no se pierdan la advertencia

Enlaces

48. Los enlaces en los sitios web deben sobresalir: use el texto en azul y / o el subrayado para indicar los hipervínculos.

49. Los enlaces siempre deben verse como enlaces.

50. Un usuario no debería tener que hacer clic en un enlace para averiguar a dónde conduce. El texto del enlace debe indicarles a dónde van.

51. No use texto azul ni subrayado para elementos no vinculados en sitios web o aplicaciones.

52. Una referencia a una URL completa en cualquier parte de un sitio web siempre debe enlazar a esa página.

53. Ciertos elementos, como imágenes de productos o reseñas, siempre se espera que se puedan hacer clic.

54. Use un color diferente para los enlaces visitados en los sitios web para reducir la carga de memoria de los usuarios.

Botones

55. Los botones de los sitios web deben tener un aspecto seleccionable y tener suficiente espacio para que los usuarios hagan clic o toquen cómodamente.

56. Las acciones frecuentes en sitios web o aplicaciones deben ser botones grandes, colocados en zonas de fácil acceso.

57. Los colores de fondo, los bordes y las etiquetas orientadas a la acción en un sitio web indican a los usuarios que se puede hacer clic en un elemento.

58. Para diseños planos, asegúrese de que los botones de acción se realicen en un color de contraste con una etiqueta orientada a la acción.

59. Un sitio web debe tener una indicación visual de que el clic del botón se realizó correctamente a los 0,1 segundos de la interacción.

60. Los botones que cambian o eliminan datos en los dispositivos móviles deben requerir un mayor esfuerzo para tocar y evitar tocar accidentalmente.

Búsqueda

61. A menos que tenga un sitio web muy pequeño con poco contenido, siempre tenga un campo de búsqueda

62. El campo de búsqueda siempre debe verse como un cuadro de texto en un escritorio. El ícono de búsqueda está bien para usar en dispositivos móviles

63. Haz que el campo de búsqueda sea fácil de encontrar. Los usuarios suelen buscarlo en la esquina superior derecha.

64. Al buscar búsquedas en sitios web, los usuarios suelen buscar un “pequeño cuadro para escribir”.

65. Los campos de búsqueda en los sitios web deben ser lo suficientemente amplios como para ver la consulta de búsqueda completa.

Carruseles

66. Evite los carruseles: cada nueva diapositiva borra la memoria de la diapositiva anterior. Los usuarios solo pueden centrarse en una cosa a la vez.

67. Es difícil ver los puntos en los carruseles en los sitios web móviles. Usa imágenes que se asoman desde la izquierda y la derecha.

68. En lugar de las flechas de navegación del carrusel, use etiquetas descriptivas para que los usuarios sepan qué esperar en la siguiente diapositiva.

69. Solo alrededor del 1% de los usuarios hacen clic en diapositivas de carrusel en sitios web, así que no confíe en esos clics.

70. Los carruseles de sitios web que se deslizan automáticamente deben cambiar al manual una vez que los usuarios interactúen con ellos.

Acordeones

71. Use acordeones para comprimir el contenido extenso de los sitios web móviles.

72. Al usar acordeones, ofrezca una forma de contraer cualquier contenido expuesto una vez que el usuario lo haya expandido.

73. Ventajas del uso de acordeones en sitios web para dispositivos móviles: las páginas más cortas son más fáciles de usar que los enlaces de salto en la página.

74. Contras de usar acordeones en sitios web móviles: aumento del costo de interacción; Fuera de la vista está fuera de la mente.

Ayuda

75. El propósito principal de cada página web debe ser obvio para el usuario.

76. Los usuarios son reacios a utilizar la Ayuda en su sitio web. Póngalo en contexto y ofrezca asistentes y preguntas frecuentes cuando sea apropiado Haga clic para twittear

77. Muestre sugerencias sobre sitios web y aplicaciones en contexto y solo cuando sea necesario Haga clic para twittear

78. La ayuda y las instrucciones deben ser breves y visualmente diferentes de otros elementos de la interfaz.

79. Solo presente una sugerencia a la vez en sitios web y aplicaciones móviles. Esto reduce la carga de memoria.

Iconos

80. Los iconos deben describir visualmente su función y propósito. Haz que sean simples, familiares y significativos.

81. Los iconos solo deben usarse cuando sea necesario. Evite abusar de ellos y no los use simplemente como decoración.

Contenido

82. La información más importante en su página web siempre debe destacarse como la más visible visualmente.

83. Poner la información clave primero. Los usuarios comienzan en la parte superior izquierda y las primeras 2-3 palabras son las que más se escanean.

84. Coloque el contenido de alta prioridad en la parte superior de la página del sitio web. Use la analítica para determinar las prioridades en diferentes dispositivos.

85. Use el contraste de color y tamaño en su sitio web para diferenciar la información principal de los detalles de apoyo.

86. Las prioridades, como el contexto, la ubicación y la información de emergencia, son más importantes para los usuarios móviles.

87. Prioridades para dispositivos móviles: ubicación, eventos, número de teléfono, información de emergencia, información sensible al tiempo e información necesaria sobre la marcha.

88. Los términos simples y obvios son mejores que la jerga de la industria o los términos modernos para la navegación de sitios web.

Legibilidad

89. La mayoría de los usuarios escanean primero y leen después. Use variedad visual y texto significativo para facilitar el escaneo.

90. La legibilidad no se trata solo de si puedes leer algo, sino también de si quieres leerlo.

91. Use un mayor espacio entre las listas con viñetas, listas numeradas, líneas y párrafos para mejorar la legibilidad.

92. Al elegir la fuente de un sitio web, considere su legibilidad, legibilidad, pesos y estilos.

93. En sitios web y aplicaciones móviles, considera aumentar la altura x de una fuente para mejorar su legibilidad.

94. Evite las fuentes pequeñas en todos los dispositivos, especialmente para copias de formato largo. No use fuentes condensadas en el texto del cuerpo.

95. Asegúrese de que el tamaño del texto de los titulares en un sitio web móvil sea tan receptivo como el resto del contenido.

96. Aumente el tamaño de la fuente en los sitios web para dispositivos móviles: siempre escale el tamaño de la fuente al tamaño de la pantalla.

97. Ceguera a los banners: los usuarios se esfuerzan por no mirar nada que se parezca a los banners publicitarios.

98. Haga que los bloques de texto largos sean más fáciles de leer al incluir solo una idea por párrafo.

99. El texto en cursiva es más difícil de leer, especialmente para los lectores disléxicos.

100. NO USE TODAS LAS CAPS EN SUS TITULARES Y TAGLINES. Es mucho más difícil de leer.

Accesibilidad en videojuegos: Problemas y mejoras

Introducción

Hoy voy a hablar un poco de cómo está el campo de la accesibilidad en los videojuegos. Aunque es un campo relativamente reciente, la tecnología abre muchos caminos y es un campo que va a permitir que muchas personas con diversidad funcional puedan disfrutar del juego como cualquier otra persona, siempre que tengamos los recursos necesarios.

accesibilidad en videojuegos: problemas

Retos que representan la programación de videojuegos

El videojuego es el top de la programación porque es lo que te hace buscar el equilibrio, y te limita muchas cosas: tienes un límite de almacenamiento, de velocidad de procesamiento, de sincronización de audio y vídeo, etc. Todo esto es necesario para que la experiencia de juego y la jugabilidad sea buena para las personas usuarias.

Hay herramientas para llevar a cabo el desarrollo de accesibilidad como Unity, Unreal Engine, Alice, Game Maker, pero el principal problema es que TODAS las interfaces presentan problemas de accesibilidad.

Así que, teniendo en cuenta estos problemas, ha tenido que buscar otras plataformas de desarrollo nativas:

  • Xcode para iOS
  • Eclipse para Android
  • Visual Studio para Windows
  • NDK

Pero aún queda mucho por hacer, y hay muchas cosas que solucionar y aprender.

A continuación, en el video, describe diferentes problemas de accesibilidad para las personas con diversidad funcional visual.

Los diferentes problemas de accesibilidad en los videojuegos son:

  • Uno de los problemas es no hacerlo accesible desde el principio, (que es algo que llevo comentando mucho tiempo, y nunca me cansaré de decirlo).
  • Poder personalizar los colores para personas con dificultades visuales, como el daltonismo, y añadir iconos para diferenciar las cosas.
  • Los programas que se usan para desarrollar videojuegos cuentan con la interfaz inaccesible, así que es recomendable usar plataformas nativas, como ya dije antes.
  • Describir a los personajes correctamente.
  • Limitar el número de respuestas en las descripciones de los personajes, para no marear con tanto contenido a las personas usuarias. Es importante saber que las diversidades funcionales son de muchos tipos, y es muy difícil abarcar las soluciones para todo el mundo, porque hay diversidades funcionales más complejas de entender, como por ejemplo, el autismo y las diversidades funcionales cognitivas. Y ya no es sólo que pueda jugar, sino que pueda seguir el flujo de juego y la jugabilidad.

¿Se podrían hacer todos los juegos accesibles?

Por ejemplo, para las personas ciegas los juegos en primera persona, en la que se requieren muchos enemigos, si tienen muchos personajes y los tienes que describir todos, llega un momento en que se satura y alguna información se pierde.

Habla de que hay opciones alternativas como los guantes hápticos, que emiten vibraciones cuando ocurre algo o tiene que mandar alguna información para avisar a la persona que esté jugando.

guante háptico Gloveone

También está el proyecto Tesla Suit, que consiste en un traje háptico por todo el cuerpo.

Accesibilidad en videojuegos:Tesla_Suit_3

 

En la actualidad, a la hora de jugar los estímulos se hacen mediante la recepción y percepción de la información, es decir, sólo se percibe a través de audio y vídeo como respuesta. Pero con la tecnología Kinect, que dirige el control con la mirada y comandos de voz, es una tecnología muy usada con las personas con parálisis cerebral.

Hace falta tecnología tanto para que las personas usuarias interactúen y para que reciban la información del juego.

En definitiva, el vídeo es muy interesante. Por aquí os dejo la charla de Jonathan Chacón.

 

 

 

Accesibilidad web: ARIA y su composición

¿Qué es ARIA?

Una forma en que podemos usar ARIA es agregándolo a nuestro HTML. Es posible que ya esté familiarizado con los elementos semánticos en HTML, como navegación, botón o encabezado.

Muchos elementos se pueden hacer dinámicos añadiendo JavaScript y teniendo en cuenta la CSS para darle apariencia a cada uno de los elementos.

Pero para las personas que usan lector de pantallas no es tan fácil, y por eso, se aplican los Roles ARIA, que es lo que permite a estas personas saber de qué información se trata. Aquí es donde el navegador expone a la API de accesibilidad la información que es y el lector de pantalla la anuncia a las personas usuarias.

ARIA y su composición

 

Por tanto, ARIA se puede definir como un conjunto de atributos que se añaden a las etiquetas HTML, para que los agentes de usuario (navegadores y productos de apoyo), comprendan el funcionamiento de las etiquetas y actúen de manera consecuente.

Roles ARIA

Los roles ARIA permiten indicar la función de un elemento de la interfaz. Se asigna con el atributo role. Hay 81 roles clasificados por categorías:

  • Abstract: widget, window, section, input, etc. Sirven para definir tipos de roles generales.
  • Widgets: Menu, menuitem, tree, treeitem, tablish, tab, tabpanel, button, grid, etc.
  • Document structure: Definen la estructura para organizar el contenido en una página. No suelen ser interactivos: heading, table, img, tooltip, toolbar, list, presentation, etc.
  • Landmarks: Permiten definir las grandes zonas de la página igual que las etiquetas semánticas en HTML5.
  • Live region: Definen las zonas “vivas” de la página, es decir, las que cambian automáticamente sin la intervención de las personas usuarias: alert, log, marquee, status y timer.

role="alert": contiene información relevante y se anuncia con “alerta”. Debería ser aria-live=”assertive”

role="log": donde la información se agrega en orden significativo y la antigua puede desaparecer, debería ser aria-live=”polite”

role="marquee": información no relevante que cambia con frecuencia, debería ser aria-live=”off”

role="status": advertencia no lo suficientemente importante para justificar una alerta, debería ser aria-live=”polite”

role="timer": contador numérico del tiempo transcurrido o restante

  • Window: Para definir los mensajes de las ventanas: dialog y alertdialog.

Atributos de ARIA: Estados y propiedades

¿Qué es un estado?

Un estado es una propiedad dinámica que puede cambiar según la intervención de las personas usuarias, pero no siempre. Y cambian con menor frecuencia que las propiedades.

¿Qué son las propiedades?

Atributos que son esenciales para determinar el cambio en la presentación de un objeto. Estas cambian con más frecuencia debido a la interacción de las personas usuarias.

Tanto los estados como las propiedades, en la práctica, no es necesario diferenciarlos, y todos empiezan por aria-.

Existen 48 estados y propiedades y se dividen en cuatro categorías:

  • Atributos de Widgets: aria-checked, aria-disabled, aria-required, aria-selected, aria-reandoly, aria-expended, aria-label, etc
  • Atributos de Live region: Permiten definir cuando se producen los cambios en los productos de apoyo; aria-live, aria-atomic, aria-revelant, aria-busy.

aria-live

Indica que un elemento se modifica y se actualizará dinámicamente.

Esta propiedad tiene tres valores: “off”, “assertive” y “polite”.

aria-live=”off” Indica que es un valor predeterminado, que los cambios se anunciarán a las personas usuarias sólo cuando el foco esté en esa región.

aria-live=”assertive” Indica la prioridad de los cambios, los cambios que se deben presentar inmediatamente a las personas usuarias, con independencia de lo que estén haciendo en ese momento. Como es algo que puede ocasionar desorientación, sólo debe utilizarse para mensajes y advertencias importantes.

aria-live=”polite” Indica los cambios deben anunciarse sin interrumpir a las personas usuarias, por ejemplo, cuando terminan de escribir o de leer.

aria-atomic

Indica si las tecnologías de asistencia presentarán toda o solo las partes que han cambiado.

Esta propiedad tiene dos valores: true/false

Si aria-atomic se establece en “false”, sólo presentarán a las personas usuarias el nodo que ha cambiado. Si se establece en “true” presentarán el contenido completo.

aria-revelant

Con este atributo indicamos qué tipo de actualización de la live region deseamos que se anuncie al usuario:

Este atributo se compone de 4 valores: “additions”, “all”, “removals”, “text”

aria-revelant=”additions”, anuncia los elementos que se añaden al DOM.

Si el contenido que se añade es semánticamente relevante será importante anunciarlo. Sin embargo, si es meramente decorativo no tiene sentido que se anuncie.

aria-relevant=”all”: anunciará todo, es decir, los elementos añadidos, eliminados y las modificaciones de texto.

aria-relevant=”removals”: anuncia los elementos que se eliminan del DOM. Igual que en el caso anterior, es importante tener en cuenta si el elemento eliminado es relevante o solo decorativo. Por ejemplo, en un listado de amigos en línea, si un amigo se desconecta sería interesante anunciar que se ha eliminado de la lista.

aria-relevant=”text”: anuncia las modificaciones de texto.

aria-busy

Por defecto su valor es “false”. Este atributo se utiliza cuando muchas partes de un mismo elemento van a ser modificadas, entonces puedes poner el valor a “true” para que temporalmente no anuncie las modificaciones y, una vez que se hayan llevado a cabo, volver a ponerlo a “false” para que las anuncie.

  • Atributos Drag and Drop: aria-dropeffect y aria-grabbed. Son elementos obsoletos que pueden eliminarse en futuras versiones, pero se recomienda a los agentes de usuario que continúen admitiéndolos por compatibilidad con versiones anteriores.
  • Atributos de relaciones: Expresan relaciones entre los elementos que no se pueden determinar fácilmente a partir de la estructura del documento; aria-controls, aria-labelledby, aria-posinset, aria-setsize, etc

aria-controls: Identifica el elemento cuyo contenido están controlados por el elemento actual. Por ejemplo, un grupo de casillas de verificación puede controlar qué precios de productos básicos se rastrean en vivo en una tabla o gráfico. O una pestaña que controla la visualización de su panel de pestañas asociado.

aria-labelledby: Identifica el contenido que etiqueta el elemento actual. Proporciona a las personas usuarias un nombre reconocible del objeto.

El atributo aria-labelledby es similar a aria-describedby, porque ambos hacen referencia a otros elementos para poner una alternativa de texto, pero una etiqueta debe ser concisa, una descripción está destinada a proporcionar información más detallada.

Se indica el ID del elemento que hace de título en esa zona.

<p id="report-title">Download 2012 Sales Report:
<a aria-labelledby="report-title pdf" href="pdf.pdf" id="pdf">PDF</a> |
<a aria-labelledby="report-title doc" href="word.doc" id="doc">Word</a> |
<a aria-labelledby="report-title ppt" href="ppt.ppt" id="ppt">Powerpoint</a></p>

Otro ejemplo donde se puede aplicar aria-labelledby es con los formularios de búsqueda, en la etiqueta del botón adyacente:

Formulario de búsqueda con una caja de texto y un botón Buscar

<input name="search" type="text" aria-labelledby="btn"></input>
<input name="search" id="btn" type="submit" value="Buscar">

aria-posinset: Define el número o la posición de un elemento en el conjunto actual de elementos de lista o de árbol. Esta propiedad está relacionada con aria-setsize.

El siguiente ejemplo muestra los elementos del 5 al 8 en un conjunto de 16.

<h2 id="label_fruit"> Available Fruit </h2>
<ul role="listbox" aria-labelledby="label_fruit">
  <li role="option" aria-setsize="16" aria-posinset="5"> apples </li>
  <li role="option" aria-setsize="16" aria-posinset="6"> bananas </li>
  <li role="option" aria-setsize="16" aria-posinset="7"> cantaloupes </li>
  <li role="option" aria-setsize="16" aria-posinset="8"> dates </li>
</ul>

 

 

 

 

 

 

 

 

Libro: “Accesibilidad web. WCAG 2.1 de forma sencilla”

Introducción

Hoy vamos a hablar del libro: “Accesibilidad web: WCAG 2.1 de forma sencilla”. 

El libro es muy útil y fácil de comprender para cualquier perfil profesional interesado en la accesibilidad web:

  • diseñadores
  • desarrolladores
  • arquitectos de información
  • responsables de contenido
  • consultores de experiencia de usuario
  • especialistas SEO
  • jefes de proyecto.

 

accesibilidad web:wcag 2.1 de forma sencilla. Portada.

Capítulo 1. Introducción a la Accesibilidad Web

En este capítulo se muestra una tabla, que es muy interesante porque te ayuda a tener una visión más amplia de que no hay una única solucion para según qué dificultad estamos tratando, sino que puede haber varias opciones alternativas.

Capítulo 2. Las pautas WCAG 2.1

En este capítulo se explican cada uno de los principios, las pautas, los criterios, técnicas y errores.

También se explican los conceptos de “compatible con la accesibilidad” y “dependencia tecnológica”, que son fundamentales para comprender y aplicar las WCAG.

Capítulo 3. Requisitos de conformidad

Este capítulo está dedicado a los requisitos y niveles de conformidad, y a las declaraciones de conformidad, (la información obligatoria y opcional, las declaraciones de conformidad parcial…)

También se puede encontrar ejemplos de declaraciones de conformidad y una plantilla para elaborarla.

Capítulo 4. Evaluar la accesibilidad con WCAG-EM

Esta metodología se utiliza para una exhaustiva evaluación de la accesibilidad de todo tipo de sitios web de acuerdo con las WCAG 2.x.

Describe el procedimiento a seguir y las consideraciones necesarias para guiar a los evaluadores y promover buenas prácticas, evitar errores comunes y lograr resultados más comparables.

Capítulos dedicados a cada principio

  • Capítulo 5. Principio 1. Perceptible
  • Capítulo 6. Principio 2. Operable
  • Capítulo 7. Principio 3. Comprensible
  • Capítulo 8. Principio 4. Robusto

Los capítulos dedicados a los principios de las WCAG 2.1 recogen todos los criterios de cada principio agrupados en sus correspondientes pautas.

Cada una de las 13 pautas incluye una descripción e información que puede ser relevante, como consejos generales, o como por ejemplo, en el caso de la pauta “1.2 Medios tempodependientes”, la tabla resumen de las alternativas necesarias para cada tipo de medio.

Por su parte, cada uno de los 78 criterios de conformidad de las WCAG 2.1 tiene su propia sección con la siguiente información:

  • el nivel y el enunciado literal del criterio en español, muy útil para los 17 nuevos criterios que todavía no tienen una traducción oficial
  • una explicación del criterio, especialmente si este es complejo o es uno de los nuevos criterios de las WCAG 2.1
  • listado de técnicas para cumplir con el criterio, técnicas para mejorar la usabilidad así como de errores a evitar
  • recursos de interés, en algunos criterios
  • ejemplos correctos e incorrectos, en algunos criterios

Todos los listados de técnicas y errores están también traducidos al español, lo cual puede ser muy útil para muchas personas, pues no existe una traducción actualizada y oficial de los documentos asociados a las WCAG.

Capítulo 9. Documentos PDF accesibles

En este capítulo podemos encontrar información detallada sobre cómo trabajar las técnicas PDF, así como herramientas y recursos para trabajar con Adobe Acrobat Profesional.

Capítulo 10. ARIA, el aliado (casi) desconocido

Hay muy poca información sobre WAI-ARIA, con lo cual este capítulo es muy interesante. Se da a conocer un poco cuáles son los problemas que suele haber al aplicar esta tecnología; los roles y los atributos, que son imprescindibles para comprender e interactuar mediante el lector pantalla.

Capítulo 11. Recursos y herramientas

Este capítulo nos muestra diferentes herramientas que ayudan a registrar los datos de la evaluación manual, que evalúan automáticamente determinados criterios, que simulan diversidades funcionales o que ayudan a revisar de forma general el sitio web.

Capítulo 12. Resúmenes y esquemas

El capítulo incluye una serie de resúmenes y esquemas sobre:

  • Diagramas conceptuales de las WCAG 2.1
  • Principios, Pautas y Criterios de conformidad
  • Criterios de conformidad por niveles
  • Criterios para diseñadores
  • Criterios para creadores de contenido
  • Criterios para desarrolladores

 

 

 

Accesibilidad web: Diversidad funcional visual

Introducción

Como ya sabes hay muchas personas, que tienen diversidad funcional visual, y no pueden disfrutar de la tecnología y del acceso a Internet como las personas videntes.

Por eso, existen diversas formas de acceder a Internet para las personas que tienen algún tipo de dificultad para ver o directamente visión nula.

diversidad funcional visual

Ceguera: ¿Cómo acceden las personas ciegas a Internet?

En primer lugar, vamos a hablar de lo más importante que una persona ciega pueda acceder a los contenidos en Internet: el lector de pantalla.

Lectores de pantalla

Los lectores de pantalla permiten a las personas usuarias navegar a través del contenido web de muchas formas: Puede que lea toda la web, pasar de encabezado en encabezado, pasar por enlaces, etc. Algunos ejemplos de lectores de pantallas son: JAWS, NVDA y VoiceOver.

Los lectores de pantalla también puede ser utilizados por aquellas personas que son sordas e invidentes, pero en lugar de convertir texto en voz, los lectores de pantalla para los sordo-ciegos pueden convertir texto en caracteres Braille actualizables en dispositivos Braille.

Los dispositivos de este tipo poseen pines pequeños que se pueden subir o bajar para formar los caracteres Braille que las personas sordo-ciegas pueden sentir.

dispositivo braille

Problemas y limitaciones del lector de pantalla

Imágenes: Uno de los problemas más importantes que tienen es poder acceder al contenido de las imágenes porque los lectores de pantalla no pueden describir las imágenes. Para ello, tenemos que poner textos alternativos con el atributo alt.

Diseño visual: Las personas que ven se percatan de cómo está estructurado un sitio web. Mientras que, los lectores de pantalla no pueden estudiar la totalidad de una página web. No puede hacer eso porque se lee de forma lineal.

Tablas de datos: Del mismo modo, los lectores de pantalla deben leer de manera lineal tablas de datos lo que puede llegar a ser muy confuso. Imagínese tratando de escuchar una tabla de datos de gran tamaño. Os dejo un artículo que escribí sobre la elaboración de tablas accesibles.

Accesibilidad mediante teclado

El hecho de que los usuarios de lectores de pantalla usan el teclado como su medio principal de navegación en la Web es un punto que los desarrolladores deben tener en cuenta. Sin siquiera darse cuenta de las consecuencias, algunos desarrolladores web hacen que los sus sitios sean únicamente accesibles mediante el ratón. Os dejo un artículo que escribí sobre los problemas que existen y cómo mejorar la accesibilidad por teclado.

Diferentes problemas a los que se enfrentan las personas usuarias y posibles soluciones

  • Cuando no usan ratón, es imprescindible el uso alternativo del teclado.
  • En cuanto a imágenes, fotos gráficos, proporcionar descripciones de texto en el atributo alt y, si es necesario, añadir explicaciones detalladas, ya sea en la misma página o mediante un enlace a otra página.
  • Cuando leen las páginas mediante lector de pantallas, permitir saltarse menús y contenido que sea tedioso de escuchar.
  • Saltar enlaces con la tecla TAB, asegurarse de que los enlaces tengan sentido fuera de contexto.
  • Los marcos no se pueden “ver”, por lo que no es recomendable usar marcos a no ser que sea estríctamente necesario. Si los usas, proporciona el título del marco que comunique su propósito. (“contenido principal”, “marco de navegación”).
  • Para las tablas y gráficos complejos, se recomienda proporcionar descripciones de texto o resúmenes.
  • No todos los lectores de pantalla soportan mapas de imágenes, así que se debe poner enlaces de texto redundantes en la propia página para los puntos calientes en los mapas de imágenes.
  • Los colores no se pueden usar, por lo que no debemos transmitir información sólo con el color. Uno de los problemas más significativos respecto al color, es el daltonismo.
  • Mientras navegan esperan que los enlaces les lleven a otro sitio, por lo que no se debe escribir guiones inferiores en los enlaces que no tienen destinos reales asociados (ejemplo: href="javascript: function(this)")
  • Es difícil poder leer el contenido de la celda una tabla, y tienen sentido cuando se leen fila por fila y de izquierda a derecha.

Tipos de baja visión

Como ya sabemos, hay muchos tipos de problemas de visión. La baja visión es más común entre los ancianos, pero puede ocurrir en personas de cualquier edad como consecuencia de enfermedades como la degeneración macular, glaucoma, retinopatía diabética o las cataratas.

Pero antes de empezar, es importante recordar el principio importante que hay que tener en cuenta: Perceptible.

Degeneración macular

La degeneración macular ocurre cuando los vasos sanguíneos anormales en la parte posterior del ojo empiezan a filtrar líquido o sangre, haciendo borrosa la visión central, siendo a menudo el resultado la pérdida rápida de la visión. El resultado es una pérdida gradual de la visión.

En cualquier caso, la zona central de la vista es la más afectada, por lo que es difícil ver los objetos que la persona está mirando directamente.

Las imagen a continuación son una simulación del efecto de la degeneración macular. El texto puede aparecer roto y poco claro.

dos fotografías iguales donde en una de ellas se ve el efecto de la degeneración macular, que es tener visión central nulaa

Glaucoma

El glaucoma es causado por un aumento de presión dentro del ojo, lo que provoca daños en el nervio óptico. El resultado es el efecto opuesto al de la degeneración macular.

Como se ve con glaucoma, efecto borroso en la visión central

Retinopatía diabética

Uno de los efectos a largo plazo de la diabetes puede ser la filtración de los vasos sanguíneos de la retina, causando manchas oscuras en el campo de visión en la que las fugas se producen. El texto puede aparecer borroso o distorsionado en estas regiones.

retinopatía diabética

Catarata

Las personas con cataratas tienen áreas de opacidad en el cristalino de sus ojos lo que se traduce en un efecto de difuminado o con neblina, especialmente a la luz brillante. El texto puede tender a desaparecer en el fondo. El alto contraste es especialmente importante para las personas con cataratas avanzadas.

cataratas

Magnificadores de pantallas, lupas

La tecnología más común que usan las personas con baja visión es la lupa de la pantalla. Este es un programa de software que acerca un área pequeña de la pantalla al usuario, permitiendo a las personas con baja visión que puedan ver con más claridad. Magnificadores de pantalla comunes incluyen ZoomText y MAGic.

Algunos tipos de contenido son difíciles de interpretar cuando se amplían. Por ejemplo, los gráficos que contienen texto pueden convertirse en bloques y pixelarse demasiado, por lo que el texto es difícil de entender.

Pero lo que es importante es que, para hacer más legible el texto cuando se amplía, la opción recomendada es el uso de texto real, en vez de gráficos o imágenes que contengan texto.

Alto Contraste

Los sitios con bajo contraste puede ser difíciles de leer para las personas con baja visión. Algunos sitios mal diseñados de la web tienen malas combinaciones de color, tales como enlaces de color azul sobre fondo negro, texto en color rojo sobre fondo verde, u otras combinaciones que no son fáciles a los ojos de cualquiera, pero especialmente difíciles para las personas con baja visión.

Por lo tanto, en la medida de lo posible, aumenta el contraste de tu página web, incluyendo gráficos, fuentes y fondos.

Fuentes predilectas y colores de fondo

Algunas personas con baja visión van a cambiar la configuración de su sistema operativo y/o el navegador no sólo para ampliar el texto, sino también para aumentar el contraste del texto en relación con el fondo. A algunas personas les gusta tener un fondo negro con texto blanco o amarillo. Por el contrario, otros prefieren tener un fondo blanco o amarillo con el texto en negro. Estos son los ajustes más comunes, pero hay otras personas que prefieren otras opciones de alto contraste. Y hablando de contrastes, os dejo aquí el artículo que hice sobre la sensibilidad reducida al contraste, que es un problema de baja visión.

color de alto contraste y texto grande

Para permitir que las diferentes personas realicen sus ajustes de contraste, ya que como hemos visto hay multitud de formas, lo mejor es poner el texto en plano, evitando que éste aparezca en fotografías.

Desplazamiento horizontal

Este punto no es tanto una cuestión de accesibilidad, sino más bien de usabilidad. Probablemente ha llegado a sitios web que requieren el uso de su barra de desplazamiento horizontal para ver el contenido de la derecha de la pantalla, a pesar de que tenía la ventana del navegador maximizada.

Esto puede ser un poco molesto para las personas con visión perfecta, pero es aún más para las personas que usan magnificadores de pantalla y se ven obligados a desplazarse aún más hacia el interior izquierdo y derecho del pequeño espacio ampliado que están viendo.

La regla general en el diseño de la baja visión es hacerlo todo configurable. Si el texto es un texto plano, las personas usuarias pueden ampliar, cambiar su color y cambiar el color de fondo. Si el diseño es en porcentajes, la pantalla puede ser ampliada o reducida para satisfacer las necesidades de las personas usuarias. La configuración es la clave.

Problemas y soluciones para la baja visión

  • El texto en gráficos o fotos no se agranda sin software especializado y se ve pixelado cuando se amplía, con lo cual, se recomienda limitar o eliminar el texto en gráficos o fotos.
  • Las personas usuarias pueden establecer su propia fuente y los colores de fondo, por lo que hay que permitir que lo hagan usando texto en plano, y no en texto escrito en una foto o gráfico.
  • Los magnificadores de pantalla reducen el tamaño de la ventana útil, por lo que, hay que utilizar unidades relativas en lugar de absolutas (por ejemplo, porcentajes de utilización de ancho de tabla en lugar de píxeles), para reducir la cantidad de desplazamiento horizontal.

Herramientas que se pueden usar para este tipo de dificultades visuales

  • NoCoffee Vision Simulator

Existen unas extensiones, tanto para Google Chrome como para Mozilla Firefox, que es bastante interesante, para hacernos una idea de cómo ven los sitios web las personas que tienen algún tipo de problema de visión.

Es muy sencilla de usar, simplemente tenemos que ver las diferentes opciones y comprobar el efecto visual que se produce en los sitios web cuando señalamos las opciones que queramos.

Herramienta de NoCoffee para diversidad funcional visual

Accesibilidad móvil: Cómo hacer apps accesibles

Introducción

El CEAPAT ha elaborado un documento de 94 páginas en el cual nos indican cómo hacer apps accesibles. Habla sobre los requisitos que deben tener en cuenta los desarrolladores a la hora de hacer una aplicación accesible.

Cómo hacer apps accesibles

Os resumo los puntos más importantes sobre el documento desarrollado por el Ceapat. “Cómo hacer apps accesibles”

Recomendaciones generales

Se incluyen las características de accesibilidad y usabilidad generales de la interfaz de usuario.

Identificación de objetos de la interfaz de usuario

  1. Nombre de los elementos de la interfaz: Debe garantizarse que todos los elementos de la interfaz, como casillas de verificación, botones o texto estático, están perfectamente identificados y son únicos en su contexto, con información de su nombre, estado y rol.
  2. Nombres consistentes y significativos: Los nombres de los elementos de la interfaz deben tener un nombre único y significativo a lo largo de toda la interfaz de usuario, usando un lenguaje natural que pueda entender el usuario.
  3. Nombres cortos y concisos: Deben utilizarse nombres que sean cortos y que no incluyan su función, de forma que el texto se diferencie del rol, el estado y el valor del elemento, información no visible pero que los lectores de pantalla verbalizarán a petición del usuario.
  4. Nombres visibles: Los elementos de la interfaz de usuario deben tener un etiquetado visible que informe al usuario
  5. Etiquetas de iconos: Todos los iconos deben poder tener asociada una etiqueta de texto y debe existir la posibilidad de visualizar sólo esa etiqueta.

Ajustes de preferencias de usuario

  1. Interfaz flexible y personalizable: Cada usuario debe poder cambiar y mantener las preferencias de la aplicación mediante la interfaz del sistema de una forma sencilla.
  2. Personalizar elementos comunes de la interfaz: Las aplicaciones desarrolladas deben admitir una configuración estándar para el tamaño, color y fuente de texto, utilizando las funciones del sistema.
  3. Personalizar la apariencia de los elementos. El usuario debe poder ajustar, de forma individual o en grupos, la posición u ocultación de aquellos iconos y objetos gráficos que puedan ser activados.
  4. Apariencia del cursor. Deben existir opciones para modificar la apariencia del cursor de texto y del puntero del ratón.
  5. Ajuste de tiempo de respuesta. Si se requiere una respuesta del usuario en un intervalo de tiempo determinado, se debe poder ajustar dicho intervalo, incluyendo la posibilidad de desactivar todos los límites de tiempo.
  6. Compatibilidad con atributos de visualización. La interfaz de usuario debe adaptarse a la configuración de contraste, color, tamaño y demás atributos de visualización que haya definido el usuario en el sistema operativo.

Pautas generales sobre control y uso

    1. Elección del método de entrada: Se debe permitir al usuario elegir el dispositivo de entrada preferido, ya sea el teclado, trackpad, pantalla táctil o la conexión de productos de apoyo que los sustituya.
    2. Elección del método de salida: Se debe proporcionar al usuario la posibilidad de elegir sistemas redundantes y combinados de salida para el sonido, imágenes, texto y gráficos.
    3. Pasos para realizar una acción: El software debe estar diseñado para minimizar el número de pasos que debe realizar el usuario para activar cualquier opción. Lo deseable es que el usuario alcance su objetivo en no más de dos o tres pasos. Regla de los tres clics
    4. Recuperación de errores: Se debe proporcionar una función que permita a los usuarios deshacer los efectos de acciones no intencionadas o que se quieran rectificar.
    5. Persistencia de avisos relevantes: La información sobre errores, o los avisos relevantes para la tarea actual, deben persistir hasta que el usuario confirme su lectura.
    6. Consistencia de las notificaciones: Los mensajes del mismo tipo, como mensajes o avisos, deben ser claramente identificables: deben tener el mismo formato y deben estar etiquetados de forma unívoca y estándar.
    7. Mensajes comprensibles: Los mensajes emitidos deben ser cortos, sencillos y redactados en un lenguaje claro para el usuario no técnico.
    8.  Mensajes de error: Cuando se produce un error, el sistema debería proporcionar sugerencias de soluciones posibles que ayuden a resolver el problema por parte del usuario.
    9. Información dinámica: El usuario debe poder pausar o detener la presentación de información que se mueve en carrusel o se actualiza periódicamente en un área de la pantalla.
    10. Controles temporales: Evitar los controles de interfaz de usuario que se extinguen o desaparecen después de un tiempo determinado.
    11. Salir de la aplicación: Las aplicaciones deberían ofrecer la opción de finalizar. Cerrar la aplicación en los sistemas operativos para dispositivos móviles no siempre parece evidente.

Opciones alternativas de entrada

Se incluyen las recomendaciones que tienen relación con los sistemas de entrada al dispositivo, tanto software como hardware.

  1. Método de entrada totalmente funcional: La aplicación se debe poder manejar de forma efectiva utilizando sólo uno de los posibles métodos de entrada, es decir, sólo con el teclado, sólo con el touchpad o con la pantalla táctil.

Foco del teclado

  1. Ubicación del foco: El foco de entrada debe quedar reflejado en pantalla de forma inequívoca.
  2. Contenidos de texto: Los contenidos relevantes en formato textual deben permitir su recorrido mediante un cursor cuando dispongan del foco.
  3. Función volver: Si el usuario cambia de tarea o de aplicación, al regresar, la interfaz debe recordar cuál era el control que tenía el foco, de forma que pueda seguir en el mismo punto en el que lo dejó.
  4. Navegación circular: La navegación entre elementos de la interfaz debe ser circular, de forma que el foco vuelva desde el último elemento al primero.

Entrada de teclado

  1. Acceso sólo por teclado. En la aplicación se deben poder navegar yactivar todas las funciones sólo mediante teclado,
  2. Atajos. Se deben proporcionar combinaciones de teclas para acceder rápidamente a las funciones principales y estas combinaciones deben estar documentadas.
  3. Métodos abreviados de teclado. Las etiquetas de los controles de la interfaz de usuario deben tener mnemónicos para un acceso rápido por teclado.
  4. Teclas de activación específicas. Los comandos de navegación por teclado no deben activar los objetos de interfaz.
  5. Compatibilidad con las funciones del teclado: Las aplicaciones deben respetar las convenciones de funcionamiento del teclado en el sistema operativo, de forma que no cambien la asignación funcional original de las teclas. Esto es una característica de consistencia que facilita su utilización por personas con diversidad funcional visual o intelectual.
  6. Navegación por listas y menús: Permitir a los usuarios elegir el elemento del menú utilizando las teclas del cursor, teclas principio y fin, mediante numeración, letras clave, etc.
  7. Agrupación de elementos relacionados: Los controles que estén relacionados deben estar próximos y alineados con un espacio de separación entre los grupos.
  8. Navegación lógica: El desplazamiento mediante teclado de un elemento a otro en los cuadros de diálogo debe seguir una secuencia consistente con la distribución de éstos en la pantalla.

Dispositivos apuntadores

La pantalla táctil cabe considerarla como un sistema de entrada que emula las funciones de un dispositivo apuntador.

  1. Alternativa al dispositivo apuntador. Las aplicaciones deben ofrecer laposibilidad de utilizar métodos alternativos para lograr entradas que serealizan normalmente mediante el dispositivo apuntador.
  2. Área táctil: El área sensible al tacto en una pantalla táctil, que activa o selecciona un elemento de la interfaz gráfica de usuario, debe tener una dimensión óptima de 9 x 9 mm, no debiendo ser inferior a 8 mm de ancho por 7 mm de alto.
  3. Asignación de botones: Se debe permitir cambiar la asignación de funciones de todos los botones del dispositivo apuntador.
  4. Evitar doble clic: Se debe poder emular el clic múltiple mediante la pulsación única de una tecla.
  5. Pulsación mantenida: Se debe poder emular la pulsación mantenida de un botón del dispositivo apuntador mediante la pulsación única de un botón.
  6. Velocidad del puntero: Se debe permitir configurar la velocidad y aceleración del movimiento del puntero del dispositivo apuntador.
  7. Ajustar la dirección del movimiento del puntero: La aplicación debería permitir cambiar la dirección predeterminada del puntero. Esta utilidad está asociada a un software de controladores de dispositivos, especialmente para joystick, lo que permite que el dispositivo pueda colocarse en cualquier posición.
  8. Pulsación simultánea: Se deben ofrecer alternativas para pulsaciones simultáneas de teclas y botones del dispositivo apuntador.

Recomendaciones generales sobre salidas

  1. Parpadeo. Se debe evitar presentar elementos que parpadeen o destellen con una frecuencia entre 2 y 50 Hz. El parpadeo dificulta la legibilidad y puede causar ataques epilépticos a algunas personas.
  2. Redundancia en la información auditiva y visual. La información relevante ofrecida en formato de audio o vídeo por las aplicaciones, debe también ser suministrada en otros formatos alternativos.

Pantalla

  1. Tamaño de imágenes: El usuario debe poder ajustar el tamaño de iconos y otras imágenes para facilitar su visión y selección.
  2. Magnificación: Debe existir al menos un modo de presentación de la información visual que sea legible para usuarios con agudeza visual entre 6/18 y 6/60 sin depender del sonido.
  3. No usar el texto para construir gráficos: No utilizar los caracteres para la creación de gráficos. Los lectores de pantalla interpretarán estos gráficos como texto y harán una lectura errática.

Texto

  1. Propiedades del texto: No se debe transmitir información sobre el estado sólo a través de los atributos del texto
  2. Tamaño y color: Las aplicaciones deben proporcionar opciones para que el usuario elija el tipo de letra, su tamaño y el color de todos los controles de la interfaz.
  3. Escalado de la interfaz: El diseño de la interfaz gráfica de usuario debe permitir que los elementos que la componen, principalmente el texto y los controles, sigan siendo visibles y navegables cuando se modifican su tamaño.

Color

  1. Color: La utilización del color es importante para realzar o resaltar la información, pero no debe usarse nunca como la única forma de transmitirla.
  2. Combinación de colores: Deben proporcionarse combinaciones de colores predefinidas que hayan sido diseñadas teniendo en cuenta las necesidades de las personas con diversidad funcional visual.
  3. Personalización de los colores de la interfaz: El usuario debería poder personalizar los colores de los elementos de la interfaz.

Ventanas

  1. Cambiar de una ventana a otra: El usuario debe poder cambiar de una ventana de trabajo o aplicación a otra utilizando el teclado, por combinación de teclas o mediante accesos directos.
  2. Gestión de las ventanas: Debe poder ajustarse el tamaño y posición de las ventanas. Así mismo, deben proporcionarse opciones para minimizar, maximizar, restaurar y cerrar las ventanas.
  3. Título de ventana único: El nombre de la ventana debe ser único y significativo en toda la interfaz del sistema.

Sonido

  1. Ajuste de volumen: El usuario debe poder ajustar el volumen del sonido de la aplicación. Este requisito tiene relación con la funcionalidad del propio sistema operativo y del dispositivo.
  2. Audio no vocal: Las señales acústicas auditivas no vocales están destinadas a proporcionar información al usuario del estado del dispositivo, de las aplicaciones o de las comunicaciones, como las señales de llamada, alertas o avisos de error.
  3. Alternativas a los avisos sonoros: Los usuarios con dificultad auditiva o que trabajan en entorno ruidosos o cuando deba utilizarse el dispositivo en silencio, deben poder activar una alternativa visual o por vibración.
  4. Lector de texto: Deben ofrecerse funciones que permitan enviar cualquier información textual a una salida mediante síntesis de voz.
  5. Lector de pantalla: La salida en síntesis de voz debe aparecer inmediatamente después de ocurrir el evento que la originó. Este requisito tiene relación con la utilización de un lector de pantalla.

Subtitulado y multimedia

  1. Proporcionar subtitulado: Si la aplicación proporciona reproducción de vídeo, debería ser compatible con el subtitulado adaptado y los subtítulos de idiomas para usuarios con problemas de audición.
  2. Visibilidad del subtitulado: El texto del subtitulado aparece en el borde inferior del vídeo, sobreimpuesto a la imagen.
  3. Control de reproducción multimedia: La aplicación debe proporcionar controles de reproducción para reproducir, pausar, saltar y avanzar o retroceder.

Servicios de accesibilidad de los sistemas operativos

Se describen a continuación los más relevantes:

  • Magnificador. Permite ampliar la imagen en pantalla de forma que los textos puedan leerse más cómodamente y percibirse mejor las imágenes.
  • Alto contraste y combinación de colores. Herramienta normalmente asociada al magnificador que permite invertir o modificar la combinación de colores para mejorar la visión de la pantalla por parte del usuario.
  • Lector de pantalla. Verbaliza la información que aparece en la pantalla, de forma que el usuario puede prescindir de verla para interactuar con el dispositivo.
  • Lectura de textos. Sistema de conversión texto a voz que ayuda a la lectura de documentos y otros contenidos, como páginas web o correos electrónicos. En alguno de los sistemas operativos es necesario adaptar el “Lector de pantalla” para esta función.
  • Reconocimiento de habla. Permite controlar el dispositivo por comandos de voz y escribir texto mediante dictado.
  • Avisos sonoros, visuales y hápticos. Señalización redundante de avisos o notificaciones del sistema operativo o de los programas para facilitar su percepción por parte de usuarios con dificultades visuales o auditivas.
  • Barrido. Método de acceso que permite al usuario controlar el dispositivo mediante un pulsador o una acción simple. No lo incorpora ningún sistema operativo.