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?

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 web: Programas para subtitulado

Formatos de subtítulos

En la actualidad existen infinidad de formatos y programas de subtitulado, los más comunes son:

  1. SubRip,
  2. Substation Alpha
  3. Timed Text Markup Language.
  4. SMIL

 

Programa para subtitulado y formatos de subtítulos

Formato SubRip

Este formato de subtitulado, con extensión .srt, es uno de los formatos más básicos de entre todos los formatos de subtítulos, y está compuesto por cuatro partes:

  • Número indicando el orden en la secuencia de subtítulos.
  • El momento en el tiempo en el que el subtítulo debe aparecer enpantalla, y cuando debe desaparecer.
  • El texto del subtítulo.
  • Una línea en blanco indicando que comienza un nuevo fragmento del subtítulo.

El principal inconveniente de este formato es que no admite colores, sinembargo es uno de los formatos más extendidos para publicar subtítulos en internet.

Formato Substation Alpha

El formato Substation Alpha, con extensión .ssa, es más avanzado que SubRip y tiene un formato avanzado que se denomina Advanced SubStation Alpha, con extensión .ass. Permite colores, efectos y otros elementos.

Permite la utilización de fuentes por lo que el usuario necesitará tenerinstalada la fuente que se indica en el fichero del subtítulo. Por lo demás,este formato es un fichero de texto en el que se indican los parámetros necesarios para la visualización del subtítulo.

Formato Timed Text Markup Language

El formato Timed Text Markup Language, DFXP, es una recomendación del W3C, para subtitular contenido en páginas web. Este formato, basado en XML, permite presentar un subtítulo sincronizado con contenidos multimedia, puede incorporar estilos y colores.

Formato SMIL (Synchronized Multimedia Integration Language)

Este formato es un estándar del W3C, permite sincronizar audio, vídeo u otros contenidos multimedia y texto. SMIL es el acrónimo de Lenguaje de Integración Multimedia Sincronizada. Este formato está basado en XML, y describe las fuentes del contenido, la sincronización, la temporización, la posición de las fuentes, enlaces y animaciones.

Edición de subtítulos

Siempre que sea posible, los subtítulos deben ser literales. No obstante, para ayudar a mantener el sincronismo, cuando la velocidad de la persona oradora es muy alta, existen ciertas estrategias para economizar el vocabulario.

Algunas estrategias para economizar el vocabulario son:

  • Utilizar todas las siglas que permite la Real Academia Española, y los acrónimos más conocidos (OTAN, ONU…).
  • Evitar las muletillas, repeticiones o saludos innecesarios.
  • Utilizar las formas cortas o más coloquiales de entidades u organismos. (Ejemplo: sustituir «La Cámara de los diputados» por «El Congreso»).
  • Utilizar en la medida de lo posible pronombres.
  • Utilizar las formas cortas de los nombres de personalidades o de sus cargos. (Ejemplo: sustituir «Sus Majestades los Reyes de España Don Felipe y Doña Letizia» por «Los Reyes de España».)

Herramientas para edición de subtítulos

Existe un gran número de herramientas en Internet que permiten subtitular vídeos.

Amara

Amara es una herramienta web colaborativa de código abierto que permite subtitular cualquier vídeo que esté publicado en plataformas como Youtube o Vimeo. A su vez permite que los usuarios incluyan traducciones de los subtítulos, insertar los vídeos subtitulados en páginas web, y descargar los subtítulos en formato srt.

Esta herramienta depende de la Participatory Culture Foundation, organización sin ánimo de lucro.

Jubler
Jubler permite editar subtítulos en formato de texto. Con él podemos crear nuevos subtítulos o convertir, editar y transformar subtítulos ya existentes. A su vez permite visualizarlos en tiempo real, comprobar la ortografía, traducirlos y editar los formatos entre otras funcionalidades.

Aegisub
Aegisub permite editar subtítulos en diferentes formatos y la creación de macros para facilitar su edición. Permite gran cantidad de opciones para la personalización de los subtítulos: color, tipografía, formato de subtítulo, etc.

Subtitle Workshop
Subtitle Workshop permite crear, editar y transformar subtítulos en prácticamente todos los formatos existentes. Puede guardar más de 60 formatos de subtítulos a través de la biblioteca de API de subtítulos, así como guardar subtítulos en un formato de archivo personalizado definido por el usuario. Así mismo, viene equipada con algunas opciones interesantes como la comprobación de la ortografía y la previsualización de vídeos.

Dotsub
Esta aplicación web permite crear, traducir e incluir subtítulos en múltiples lenguas en vídeos disponibles en diferentes plataformas.

HandBrake

Es un conversor de vídeo multiformato que podemos disfrutar en Windows, Mac y Linux libre y gratuitamente.

Herramientas para conversión de formatos de subtítulos

Caption Format Converter

Convierte los subtítulos en diferentes tipos de formatos. Es una herramienta bastante interesante.

Accesibilidad web: Técnicas PDF para las WCAG 2.1

Introducción

En esta entrada voy a hablar de las técnicas PDF para las WCAG 2.1 y os doy una serie de consejos prácticos para cada una.

El título de cada una de las técnicas os llevará a su descripción en la documentación de las WCAG 2.1

Técnicas pdf para las WCAG 2.1

Técnicas PDF de las WCAG 2.1

PDF1: Aplicar las alternativas de textos a imágenes con ALT

Esta técnica nos sirve para proporcionar alternativas de texto para las imágenes a través de un atributo Alt. Aquí os dejo una entrada donde hablé sobre cómo aplicar texto alternativo a las imágenes y cómo diferenciar unas de otras.

PDF2: Crear marcadores

El objetivo de esta técnica es permitir que las personas usuarias localicen contenido utilizando marcadores. Esto resulta beneficioso para las personas con diversidad funcional intelectual, por la facilidad que presenta el esquema jerárquico del documento. Esta técnica está asociada al criterio 2.4.5: Múltiples vías.

PDF3: Asegurar el tabulado correcto y el orden de lectura en documentos

Esta técnica sirve para que las personas usuarias puedan navegar a través del contenido en un orden lógico que sea consistente con el significado del contenido. Es imprescindible revisar el orden de lectura del documento mediante un lector de pantalla. Técnicas asociadas a los criterios 1.3.2: Secuencia significativa, 2.1.1: Teclado , 2.4.3: Orden del foco.

PDF4: Ocultar imágenes decorativas con la etiqueta “Artifact”

Esta técnica está relacionada con la técnica PDF1, en referencia a las imágenes decorativas. Esta asociada al criterio 1.1.1: Contenido sin texto

PDF5: Indicar los controles de formulario requeridos

Con esta técnica lo que pretendemos es notificar al usuario cuando un campo que debe completarse no se haya completado en un formulario PDF.

Para ello, hay que tener en cuenta la accesibilidad de los formularios en los sitios web.

Criterios: 3.3.1: Identificación de error, 3.3.2: Etiquetas o instrucciones,
3.3.3: Sugerencia de error

PDF6: Usar elementos de tabla para el marcado

Esta técnica nos da los pasos para marcar el etiquetado de las tablas. También es importante tener en cuenta la accesibilidad en las tablas. El criterio asociado es el 1.3.1: Información y relaciones.

PDF7: Aplicar Optical Character Recognition (OCR) en un documento PDF escaneado para proporcionar texto.

Un documento que tiene imágenes escaneadas de texto es intrínsecamente inaccesible. En este caso, las imágenes escaneadas de texto se pueden convertir a PDF mediante el reconocimiento óptico de caracteres (OCR). Criterios: 1.4.5: Imágenes de texto y 1.4.9: Imágenes de texto (sin excepción)

PDF8: Proporcionar definiciones de abreviaturas a través de una entrada para un elemento de estructura

El objetivo de esta técnica es proporcionar una expansión o definición de una abreviatura para la primera aparición de la abreviatura. Criterio 3.1.4: Abreviaturas.

PDF 9: Proveer encabezados al marcar el contenido con etiquetas de encabezado

Los encabezados se marcan utilizando los elementos de encabezado y tiene ser lógico y coherente. Es importante validar el documento siempre con un lector de pantalla. Criterios asociados: 1.3.1: Informaciones y relaciones y 2.4.1: Bloques de desvío

PDF10: Suministrar etiquetas para controles de formulario interactivos

Los campos de formulario tienen que tener un nombre significativo que esté relacionado con él, incluida la ayuda contextual. Criterios asociados: 1.3.1: Información y relaciones, 3.3.2: Etiquetas o instrucciones y 4.1.2: Nombre, Rol, Valor

PDF11: Proporcionar enlaces y vincular el texto mediante la anotación “Link”

La forma más sencilla de proporcionar enlaces que cumplan con los criterios de éxito de WCAG es crearlos al crear el documento, antes de la conversión a PDF. Es importante que el texto del enlace y el contexto en el que se incluye sea significativo, y en caso contrario añadir un texto alternativo. Criterios asociados: 1.3.1: Información y relaciones, 2.1.1: Teclado, 2.4.4: Propósito de los enlaces (en contexto) y 2.4.9: Propósito de los enlaces (sólo enlaces)

PDF12: Facilitar información de nombre, función y valor para los formularios

Como ya he dicho, todo campo de formulario debe tener un nombre y también tenemos que poner su valor y estado por defecto. Los criterios relacionados son: 1.3.1 y 4.1.2.

PDF13: Proveer texto de reemplazo usando la entrada “Alt” para enlaces

Volvemos a la técnica PDF11, donde se habla de los propósitos de los enlaces. Los criterios relacionados con esta técnica son: 2.4.4: Propósito de los enlaces (en contexto) y 2.4.9: Propósito de los enlaces (sólo enlaces).

PDF14: Proporcionar encabezados y pies de página en ejecución

Los encabezados y pies de página deben ser consistentes y deben incluir información relevante, así, como tener en cuenta la ubicación, ya que esto ayuda a las personas con diversidad funcional intelectual a orientarse
a lo largo de todo el documento. Los criterios relacionados son: 2.4.8: Ubicación y 3.2.3: Navegación consistente.

PDF15: Suministrar botones de envío con la acción de presentación en formularios

Al igual que ocurre en los sitios webs, también deberemos hacer lo mismo con los PDF. Criterio asociado a esta técnica, 3.2.2: En la entrada

PDF16: Configurar el idioma predeterminado mediante la entrada “Lang”

Con esta técnica, lo que conseguimos es especificar el idioma predeterminado de un documento. De esta manera, las personas con diversidad funcional pueden entender mejor el contenido. Es importante recordar que, también hay que marcar los cambios de idioma. Criterio asociado 3.1.1: Idioma de la página

PDF17: Describir la numeración de página coherente para documentos

Si vamos a añadir la paginación, por ejemplo en el pie, esta debe ser coherente con la paginación del propio documento. Criterios relacionados: 1.3.1 Información y relaciones, 2.4.8: Ubicación y  3.2.3: Navegación consistente.

PDF18: Especificar el título del documento mediante la entrada “Título”

Una de las cosas más importantes que siempre se recomienda es, como indica esta técnica: poner un título descriptivo al documento. Tiene mucho que ver con el criterio 2.4.2: Título de la página.

PDF19: Detallar el idioma para una frase con la entrada “Lang”

Volvemos a la técnica 16, donde ya se explicó. Si el texto en otro idioma está insertado dentro de un párrafo, será necesario convertirlo en una etiqueta independiente: <span></span>. Los criterios relacionados son: 3.1.1: Idioma de la página y 3.1.2: Idioma de las partes

PDF20: Utilizar el Editor de tablas de Adobe Acrobat Pro para tablas erróneas

En la técnica 6 explico todo lo que se refiere a las tablas. Criterio 1.3.1.

PDF21: Usar etiquetas de lista para documentos PDF

Esta técnica sirve para crear listas de elementos relacionados utilizando elementos de lista apropiados según su propósito, y que estén correctamente etiquetadas. Esto permite al lector de pantallas avisar de que hay listas. Criterio: 1.3.1: Información y relaciones

PDF22: Indicar la entrada de usuario que se encuentra fuera del formato requerido

Al igual que en un formulario web, en un formulario PDF se debe indicar los campos que son obligatorios y los formatos requeridos. Ya lo comenté en la técnica 5. Los criterios relacionados son: 3.3.1: Identificación de error y 3.3.3: Sugerencia de error

PDF23: Proporcionar controles de formularios interactivos en documentos PDF

Los formularios PDF deben ser accesibles también por teclado. Criterios relacionados: 2.1.1: Teclado.

Accesibilidad web: Materiales audiovisuales. UNE 153010:2012

Introducción

La accesibilidad aplicada a los contenidos audiovisuales, independientemente del formato, ha de ofrecer una alternativa auditiva o visual para el seguimiento del contenido a personas con diversidad funcional. Existen dos sistemas de accesibilidad audiovisual: el subtitulado, para personas sordas o con diversidad funcional auditiva y la audiodescripción para personas ciegas o con diversidad funcional visual.

Otras medidas de accesibilidad son la lengua de signos, empleada para eventos en directo, o la utilización de textos alternativos con la información visual y la transcripción del audio.

Accesibilidad de medios audiovisuales

Requisitos de accesibilidad audiovisual

Básicamente los requisitos a tener en cuenta para los materiales audiovisuales son:

  1. Transcripción en formato texto
  2. Subtitulado
  3. Audiodescripción
  4. Interpretación en lengua de signos

Documentos de sólo audio

Para mejorar la accesibilidad de los materiales que contienen audio se necesita realizar transcripciones en formato texto. En estos documentos deberemos incluir lo siguiente:

  • Identificación de las personas hablantes
  • Contenidos de los diálogos
  • Eventos sonoros: música, risas, aplausos, efectos especiales

Documentos de sólo vídeo

Para mejorar la accesibilidad de los materiales que contienen vídeos se puede hacer mediante dos combinaciones:

  • Transcripción en formato texto.
  • Alternativa en audio (audiodescripción).

En este caso lo más habitual es crear una descripción del contenido del vídeo a modo de transcripción en formato texto. Deberemos incluir la siguiente información:

  • Descripción de las acciones.
  • Descripción de las personas.
  • Descripción de expresiones corporales.
  • Descripción de escenarios y localizaciones.
  • Transcribir los textos que se muestren en pantalla, o leerlos en voz alta si se está realizando una alternativa en formato audio.

Documentos de vídeo sonoro

Estos documentos son los que requerirán una mayor accesibilidad, ya que contienen información visual y sonora.

En este tipo de documentos podemos distinguir:

  • Si se van a emitir en directo o en formato grabado, deberemos garantizar que el material se subtitule, siendo muy habitual añadir interpretación en lengua de signos.
  • Si el documento se va a distribuir en formato grabado deberemos tomar las siguientes medidas en función del nivel de accesibilidad que necesitemos garantizar:
    • Nivel A: subtitulado y transcripción en formato texto o audiodescripción.
    • Nivel AA: subtitulado, transcripción en formato texto y audiodescripción.

Transcripción de un vídeo sonoro

Para hacer una trascripción textual deberemos tener en cuenta tanto el contenido sonoro como el visual y describir los siguientes elementos:

Contenido sonoro:

  • Los mismos que se utilizan para la transcripción de audio.

Contenido visual

  • Descripción de las acciones.
  • Descripción de las personas
  • Descripción de expresiones corporales
  • Descripción de escenarios y localizaciones
  • Transcripción de los textos que se muestren en pantalla.

Subtitulado

La utilización de subtítulos está muy extendida y es la forma más habitual de mejorar la accesibilidad de un documento.

Se deberá seguir lo establecido en la Norma UNE 153010, Subtitulado para personas sordas y personas con discapacidad auditiva.

En el caso de que se vaya a usar junto con un intérprete de lengua de signos, deberemos garantizar que ambos sistemas no se solapan ni ocultan, siendo siempre recomendable que puedan activarse y desactivarse según las necesidades de la persona usuaria.

Audiodescripción

La audiodescripción es una narración, sincronizada con el contenido del vídeo, que aporta información sobre aquellos elementos que son perceptibles mediante la vista. Por tanto, están vedados a una persona con diversidad funcional visual.

En este caso, se pausa el vídeo el tiempo requerido para la narración de la audiodescripción ampliada. Está técnica puede resultar molesta para otras personas usuarias, así que, lo recomendable es publicar una versión del material sin audiodescripción y otra con audiodescripción.

Interpretación en lengua de signos

La interpretación la deberá realizar un intérprete cualificado y serán necesarios determinados requisitos técnicos para su inserción en el vídeo.

Esta medida de accesibilidad sólo se requiere en el nivel AAA, pero es frecuente recurrir a ella en mensajes institucionales o actos en directo.

Lo esencial es que el intérprete se visualice con suficiente calidad y claridad para que sea comprendido correctamente. La interpretación en lengua de signos deberá recoger la siguiente información y adecuarse a la audiencia a la que se dirija el contenido:

  • Los diálogos y contenido oral.
  • Los eventos sonoros relevantes: música, aplausos, efectos especiales, etc

Aspectos generales del subtitulado

Para ello, nos vamos a centrar en lo que establece la Norma UNE 135010 de subtitulado para personas sordas y personas con discapacidad auditiva.

Existen dos tipos de subtítulos, abiertos o cerrados:

  • Los subtítulos cerrados son aquellos que el usuario puede activar o desactivar en función de sus necesidades
  • Los subtítulos abiertos son aquellos que van incrustados en el vídeo y la persona usuaria no puede activarlos y desactivarlos. Siempre que sea posible se recomienda utilizar subtítulos cerrados para que la persona decida si quiere activarlos o no.

Presentación de subtítulo: Aspectos visuales

Los subtítulos de todo aquello que no sean efectos sonoros deben aparecer centrados en la parte inferior de la pantalla, excepto cuando oculten información relevante.

Posición de los efectos sonoros

Cuando un sonido se considere efecto sonoro su subtítulo debe ubicarse en la parte superior derecha, siempre que sea técnicamente posible, excepto en los subtítulos en directo.

Número de líneas de texto

Los subtítulos deben ocupar como máximo dos o excepcionalmente tres líneas de texto.

Líneas distintas por personajes

En los diálogos, se debería asignar líneas de texto distintas a cada personaje.

Presentación del subtítulos: Aspectos temporales.

Velocidad de exposición del texto del subtítulo

La velocidad de exposición del texto del subtítulo debe seguir el ritmo del original y facilitar una lectura cómoda.

Sincronismo

Excepto en el caso de subtitulado en directo, las entradas y salidas de los subtítulos deben coincidir, siempre que sea posible, con el movimiento labial, con los cambios de plano, con la locución y/o con la información sonora.

Retardo en el subtitulado en directo

En el subtitulado en directo se debería minimizar el retardo entre la emisión del contenido y del subtítulo correspondiente.

Subtitulado de música

Se debería subtitular la música si es importante para ayudar al espectador a comprender la trama, utilizando uno o más de los tres contenidos siguientes:

  • el tipo de música;
  • la sensación que transmite;
  • identificación de la pieza (título, autor…).

Criterios editoriales

División del texto

La división del texto en subtítulos y los subtítulos en líneas se debería hacer de acuerdo con los siguientes criterios:
  • aprovechar las pausas interpretativas y silencios;
  • aprovechar las pausas gramaticales o los signos de puntuación.
  • escribir en la línea inferior las conjunciones y los nexos
  • no separar en líneas los sintagmas nominales, verbales y preposicionales

Combinación de colores para caracteres y fondos

Existen ciertas combinaciones de colores que resultan más legibles, producen mayor contraste y menor fatiga visual, facilitando así la lectura. Estas combinaciones de colores que se establecen en la norma UNE 135010 son las siguientes en orden de preferencia:

  1. Carácter amarillo sobre fondo negro.
  2. Carácter verde sobre fondo negro.
  3. Carácter cian sobre fondo negro.
  4. Carácter magenta sobre fondo negro.
  5. Carácter blanco sobre fondo negro.
  6. Carácter rojo sobre fondo blanco.
  7. Carácter azul sobre fondo blanco.
  8. Carácter azul sobre fondo amarillo.

Accesibilidad web: Sensibilidad reducida al contraste

Sensibilidad reducida al contraste: Introducción

Como bien sabemos hay muchas personas que tienen problemas de visión, y la variedad que existe es enorme. Existen dificultades como la baja visión, el daltonismo, la retinosis pigmentaria, glaucoma, etc…

En esta ocasión vamos a a hablar de una dificultad visual que quizás mucha gente no lo tiene en cuenta porque es muy poco conocida: La sensibilidad reducida al contraste.

Definición de sensibilidad reducida al contraste

El contraste se define como “la capacidad de discriminar diferencias de iluminación entre áreas adyacentes cuyo umbral se estima como la menor cantidad de contraste que se hace para lograr esta distinción.”
Dicho de otra manera, la sensibilidad al contraste representa el menor contraste que el sistema visual puede detectar, es decir, que si no utilizamos los contrastes de la manera adecuada puede originar problemas de accesibilidad.

¿A qué se debe esta dificultad visual?

Este problema de visión se puede deber a enfermedades como las cataratas, los glaucomas, la diabetes, el SIDA, el Alzheimer o a una mala cirugía refractiva, como la miopía, la hipermetropía o el astigmatismo.

La sensibilidad al contraste se relaciona por diversas causas: el reconocimiento de objetos, la percepción de las caras o las distancias.

Valoración de la sensibilidad reducida al contraste

Una de las formas es, por medio de rejillas de enrejado. Están formadas por rejillas curvas en cartillas impresas.

Test de Sensibilidad al contraste

Por medio de letras de contraste decreciente. Estas son una cartillas creadas por Denis Pelli y  John Robson, en la que conforme va disminuyendo el contraste, la legibilidad se va perdiendo.

Por lo tanto, hace que estas personas tengan problemas a la hora de leer el contenido si no se establece un buen contraste.
Sensibilidad de contraste: Prueba de letras

 

Se considera que la sensibilidad al contraste se puede medir más facilmente utilizando cartillas del mismo tamaño pero con contraste decreciente y el umbral de contraste se determina, según la última línea en la cual la persona pueda reconocer los caracteres.

El test de Lea Hyvarinen

El test de Lea lo desarrolló Lea Hyvarinen, natural de Finlandia, que consiste en una serie de figuras pictóricas, como cuadrados, manzanas, casas y círculos con varias versiones para valorar problemas de visión: la visión lejana, la vista cansada, la sensibilidad al contraste, la ambliopía u ojo vago y el daño cerebral.

Sensibilidad reducida al contraste al contraste: Test de Lea Hyvarinen

 

Otra de las pruebas que se realizan es el Test de Bajo Contraste de Hiding Heidi, que determinan los niveles de contraste que un bebé puede detectar. Ayuda a proporcionar datos de referencia para evaluar los cambios futuros.

Consiste en 4 tarjetas impresas por ambos lados, de 23cm x 23cm, con los siguientes contrastes:
Negro, 25%, 10%, 5%, 1,25%

Sensibilidad al contraste: Test de Hiding Heidi

Ahora bien, una vez definida la sensibilidad al contraste y cómo se llevan a cabo los diferentes tipos de test, tenemos que tener en cuenta las pautas referentes al contraste de colores determinado en las WCAG 2.1.

1.4.3 Contraste (mínimo): La presentación visual de texto e imágenes de texto tiene una relación de contraste de, al menos, 4.5:1, excepto en los siguientes casos:

  • Textos grandes: Los textos de gran tamaño  y las imágenes de texto de gran tamaño tienen una relación de contraste de, al menos, 3:1.

1.4.6 Contraste (mejorado): La presentación visual de texto e imágenes de texto tiene una relación de contraste de, al menos, 7:1, excepto en los siguientes casos.

  • Textos grandes: Los textos de gran tamaño y las imágenes de texto de gran tamaño tienen una relación de contraste de, al menos, 4.5:1.

 

Herramientas para evaluar el contraste de colores

Color Contrast Checker, de WebAim
Color Contrast Tester, de Joe Dolson

Recuerda que siempre hay que utilizar contrastes altos entre el color y el fondo

 

 

 

Accesibilidad web: ¿Cómo trabajar los enlaces?

Introducción

En esta entrada voy a hablar sobre cómo hacer enlaces más accesibles para facilitar su comprensión a todas las personas.

Cómo trabajar los enlaces

Para ello, tenemos que tener en cuenta que para trabajar con enlaces, el texto del propio enlace debe indicar claramente cuál es su propósito, como el contenido o información que se encuentra en el documento de destino o descripción de la acción que invoca.

El objetivo de esto es ayudar a las personas con diversidad diversidad funcional a comprender el propósito de cada enlace, de forma que puedan decidir seguir el enlace o no.

Criterios por los que se aplican los enlaces y su significado

Una vez explicado, vamos a hablar ahora de los criterios que establecen las Pautas de Accesibilidad al Contenido Web (WCAG 2.1).

2.4.4 Propósito de los enlaces (en contexto): El propósito de cada enlace puede ser determinado con sólo el texto del enlace o a través del texto del enlace sumado al contexto del enlace determinado por software, excepto cuando el propósito del enlace resultara ambiguo para los usuarios en general. (Nivel A)

2.4.9 Propósito de los enlaces (sólo enlaces): Se proporciona un mecanismo que permite identificar el propósito de cada enlace con sólo el texto del enlace, excepto cuando el propósito del enlace resultara ambiguo para los usuarios en general. (Nivel AAA)

Elementos de un enlace

Poniendo un ejemplo de lo que dice el criterio 2.4.4 es bien sencillo:

  1. Para más información, pulse este enlace.
  2. Puedes ver las fotos en Twitter o en Instagram

 

Como se puede intuir, de las dos opciones que tenemos, el enlace que se entiende mejor es el segundo, porque tiene un enlace descriptivo. Tiene que ser lo más descriptivo posible, es decir, en este caso, se cumple lo que establece el propio criterio: El enlace acompañado del contexto.

En la primera opción, por mucho que leamos, nos queda la duda: “¿para más información qué?”

Distinto sería dividir la información en dos párrafos, por ejemplo:

Puedes ver las fotos: (Un párrafo)

en Twitter o en Instagram (Otro párrafo)

Al poner la información en dos párrafos separados, su contexto no puede ser entendido por el software, por lo tanto, se trata de un enlace NO descriptivo.

Sin embargo, si lo ponemos como lista también es válido. En este caso sí es descriptivo.

 

Hay que tener en cuenta una consideración:

  1. Dos o más enlaces que tienen la misma función y/o propósito se identifican de manera coherente.

 

¿Qué quiero decir con esto?

Que tiene que haber una coherencia en los enlaces y no dar lugar a confusión, es decir, tenemos que ser consistentes con lo que hacemos.

Los dos documentos que se idfentifican como PDF, se interpretan de la misma manera con respecto a los otros dos, cuya identificación NO es consistente.

Texto del enlace descriptivo

A la hora de trabajar con los enlaces descriptivos según su contexto, hay que analizar si el enlace al leerlo tiene sentido, y en el caso que no lo tenga, intentar que se entienda de la mejor manera posible.

Tenemos dos ejemplos:

  1. “Había mucho derramamiento de sangre durante la época medieval“.
  2. Envíe su voto e infórmese sobre la Comisión de Voto Electrónico”

 

En la primera opción, está claro que no cabe dudas sobre el sentido del enlace. Sin embargo, en la segunda opción, el contexto no queda muy claro.

Por lo que, es preferible que la información adicional que aclare el contexto vaya antes del enlace.

Es decir:

“Infórmese más acerca de la Comisión sobre Voto Electrónico y envíe su voto“.

 

El texto del enlace y el contexto deben estar en la misma oración

  1. Aprenda más acerca de la Comisión sobre Voto Electrónico.

 Envíe su voto.

2. “Infórmese más acerca de la Comisión sobre Voto Electrónico y envíe su voto

También se puede poner el enlace acompañado por una imagen.

Y en los enlaces a documentos no HTML es mejor proporcionar algún indicativo al usuario de que va acceder a otro formato de documento. Al ser información relevante hay que incluirla dentro del enlace.

Por otro lado, si por ejemplo, hablamos de noticias, o cualquier cosa interesante, es importante mostrar el título de la noticia, así como que vaya acompañado de una breve descripción.

  • Titulo de la noticia 1

Descripción de noticia 1

  • Titulo de la noticia 2

Descripción de la noticia 2

Si por ejemplo, tenemos en cuenta enlaces de libros se hace así:

¿Cómo indicamos la apertura de una ventana nueva?

  • Lo podemos indicar en el texto del enlace:

Constitución Española (PDF, abre en una ventana nueva).

  • Indicarlo en el título del enlace (a través del campo descripción).

Consideraciones importantes para el título del enlace

  • Sólo lo usaremos para complementar la información, no todos los enlaces tienen que tener título.
  • No duplicar el texto que aparece en el enlace
  • No usar la palabra “Enlace”. El lector de pantalla ya nos dice que es un enlace.
  • No debemos abrir nueva ventana cuando estemos en el mismo sitio web.

 

Enlaces que provocan un cambio de contexto.

¿Qué es un cambio de contexto?
Cuando enlazamos una página con diferente estructura, diferente disposición de contenidos, diferente menú principal, etc… se produce un cambio de contexto.

¿Cuándo ocurre?

  • Un enlace externo siempre provoca un cambio de contexto.
  • Existen enlaces internos, que también provocan cambios de contexto.

¿Qué tenemos que hacer?

Hemos de avisar al usuario que el enlace provoca un cambio de contexto, va a otro “sitio/espacio web”.

¿Cómo lo hacemos?
En el texto del enlace, o en la descripción del enlace.

Dirección del enlace (URL) como texto del enlace

No incluir la dirección web (URL) como texto del enlace, a no ser que refiera a la de la página de entrada al sitio.

¿Por qué no se puede hacer esto? Muy sencillo.

Porque cuando el lector de pantalla lee la URL dice: “http dos puntos barra w w w punto…” y resulta tedioso para las personas que usan lector de pantallas.

Accesibilidad web: Guías de interfaces móviles accesibles

Guías de interfaces móviles accesibles

Voy a hablar de unas pautas, de unas guías que son imprescindibles para llevar a cabo el desarrollo de la accesibilidad de los móviles.

guías de interfaces móviles accesibles

Están desarrolladas por Funka, una empresa sueca especializada en accesibilidad de reconocido prestigio internacional.

Estas guías nos ofrecen un listado de pautas, estudiadas y testeadas con usuarios, que nos permiten diseñar e implementar interfaces móviles más usables y accesibles.

Pautas para el desarrollo de interfaces móviles accesibles

Están disponibles en castellano: Pautas para el desarrollo de interfaces móviles accesibles (PDF)

Son 48 pautas agrupadas en 6 temas.

Elección de una solución

1. Observe que su sitio web básico funcione en dispositivos móviles.

Recomiendan utilizar el enfoque “Mobile First”.

2. No obligue al usuario a utilizar una versión móvil, pero ofrézcala en caso de que las páginas del sitio web básico sean grandes o tengan unas funcionalidades complejas.

3. Una versión móvil del sitio web debe, en la medida de lo posible, facilitar al usuario la misma información y servicios que el sitio web normal, a no ser que se trate expresamente de una versión móvil de un servicio o funcionalidad específicamente delimitados.

4. Cree aplicaciones para funcionalidades claramente delimitadas a las que el usuario pueda necesitar acceder con frecuencia.

Diseño

5. Siga las WCAG 2.0 excepto en los aspectos que las presentes pautas contradigan a las WCAG 2.0.

6. Al crear aplicaciones para dispositivos específicos, deberán seguirse las directrices de diseño y accesibilidad, siempre y cuando no contradigan estas pautas.

7. Si desarrolla una aplicación para una plataforma específica, deberá ser compatible con las características propias de la plataforma.

8. Identifique los elementos gráficos, iconos y botones con su motivo o función.

9. Cada objeto de formulario debe tener una etiqueta o una descripción.

10. No utilice marcos en interfaces web.

11. Ayude al usuario a introducir datos adaptando el teclado virtual al contenido que debe introducirse.

12. Minimice el uso de scripts ejecutados en cliente.

13. Realice pruebas prácticas de la solución.

Estructura y presentación

14. En las vistas con scroll, coloque las cosas importantes más arriba y las menos importantes más abajo.

Pero ten en cuenta también que es difícil conseguir hacer clic en los objetos que se encuentran arriba del todo en la pantalla. Por lo tanto, una interacción importante no debe situarse en la parte de arriba del todo de la pantalla.

zonas_mas_faciles_pulsar

15. Agrupe los elementos que van juntos.

La página debe redistribuirse, en la medida de lo posible, de modo que la información relacionada se posicione justo detrás de la sección con la que se relaciona, en lugar de que todo el material relacionado se coloque abajo del todo.

16. Procure crear un diseño limpio y minimice el número de objetos “innecesarios”.

17. Procure que el encabezado de la página sea pequeño.

18. Cree áreas grandes para hacer clic.

Procure que el área para hacer clic tenga como mínimo el alto de fila del cuerpo de texto en un sentido y el alto de fila del cuerpo de texto multiplicado por 3 en el otro sentido. Los iconos de una aplicación deberían tener, como mínimo, 9 milímetros de ancho y de alto.

19. No coloque los botones de uso frecuente en el margen derecho o izquierdo, a no ser que ocupen, como mínimo, una tercera parte del ancho de la pantalla.

A los usuarios que solo utilizan una mano, o que tienen que equilibrar el móvil sobre la rodilla para poder utilizarlo, les resulta difícil pulsar botones que están en los márgenes.

20. No coloque a la derecha los botones, funcionalidades o grupos con botones y funcionalidades, a no ser que el grupo ocupe, como mínimo, el 75 % de la pantalla en todas las posiciones.

Beneficia específicamente a los usuarios que no ven el sitio web y utilizan el dedo índice para escanear la interfaz.

21. Oriente los botones y los enlaces en filas claras (horizontal y verticalmente).

22. Las etiquetas de los campos de introducción deben colocarse principalmente encima del campo.

Son una excepción las casillas de verificación y los botones de opción, en los que el texto puede situarse a la derecha, pero el título del grupo se colocaría encima del mismo.

23. Las longitudes de línea deben adaptarse al ancho de la pantalla, pero nunca superar un máximo de 70 caracteres por línea, espacios incluidos.

El objetivo es que la longitud sea de 55-60 caracteres por línea, espacios incluidos.

24. Limite la cantidad de información y el número de objetos mostrados.

25. Utilice iconos conocidos.

26. Diseñe los objetos clicables para que sean obvios.

Los enlaces no se deben distinguir solo por el color.

27. Utilice contrastes altos.

28. Debe ser posible utilizar la interfaz en la visualización tanto horizontal como vertical.

Interacción

29. Utilice conceptos de navegación sencillos.

Los mega-menús no funcionan bien en móvil y han de rediseñarse.

30. Si desarrolla una aplicación para un sistema operativo o un dispositivo móvil que pueda tener botones de control (por ejemplo, teclas de flecha y un botón Aceptar), debe ser posible utilizarlos para navegar por la interfaz.

31. Si desarrolla una interfaz que se pueda utilizar en dispositivos a los que se pueda conectar un teclado, la interfaz debe, cuando sea posible, poder controlarse con el teclado.

32. Inserte atajos para facilitar que el usuario salte de una parte a otra del contenido en las páginas largas.

Aunque estén ocultos inicialmente, deben mostrarse al recibir el foco en la navegación por teclado.

33. Minimice la introducción de texto en la interfaz.

34. Si la interfaz admite el control mediante gestos, debe implementarse esta función.

35. No incluya funciones que solo se puedan ejecutar mediante gestos, compleméntelas siempre con un botón o enlace.

36. Permita controlar la interfaz solo con un dedo.

37. Sea sistemático.

Por ejemplo, coloca los botones que tengan una determinada funcionalidad en el mismo lugar de la pantalla o diséñalos de forma homogénea.

38. Utilice los objetos integrados según su uso previsto y de la forma en que el usuario espera que se utilicen.

Es decir, en vez de implementar componentes propios con una funcionalidad equivalente.

39. Proporcione feedback al usuario.

Mediante un sonido y una vibración breve si el dispositivo lo permite, pero siendo posible desconectar esta confirmación. Puede haber excepciones cuando un exceso de confirmaciones se perciba como molesto (por ejemplo, una aplicación que funciona como podómetro no debe confirmar cada paso registrado).

40. Proporcione información de estado clara al usuario.

Por ejemplo, si la aplicación o sitio web están cargando datos, es conveniente mostrar el progreso de la carga.

41. Proporcione al usuario tiempo suficiente y avísele antes de que se supere el límite de tiempo.

Si fuera posible, también debería existir la posibilidad de prorrogar el tiempo de forma sencilla.

42. Ayude al usuario a evitar y a corregir posibles errores.

Por ejemplo con autocompletado o con sugerencias de búsqueda. Si aun así se producen errores, debe informarse claramente al usuario tanto en la parte superior de la página como en el lugar en el que se haya producido el error. Cuando sea posible, se debe ofrecer también propuestas de solución.

Contenido

43. Utilice imágenes solo si son realmente útiles para el usuario.

44. Utilice encabezados breves y descriptivos para estructurar la información.

45. Evite las abreviaturas.

Configuración de usuario

46. Asegure que la interfaz pueda ampliarse.

47. Considere la posibilidad de proporcionar una opción para invertir los colores.

48. Considere la posibilidad de proporcionar un ajuste para cambiar el tipo de letra.

Pautas de navegación móvil

Estas pautas están en inglés: “Mobile Navigation Guidelines”

 

Son 23 pautas que se agrupan en 5 temas.

Interacción

1. El concepto de navegación es fácil de comprender

2. La navegación es consistente y predecible entre los diferentes niveles de la estructura de información.

Una excepción es la navegación por el nivel superior, que puede ser diferente a la de los submenús sin crear problemas.

3. El usuario recibe feedback relevante.

Por ejemplo, se informa de la opción de menú seleccionada; un título visible indica en qué página se ha aterrizado; etc.

4. La comprensión del concepto de navegación no está basado en la ruta del enlace

5. El tiempo que se necesita para navegar está minimizado

Por ejemplo, se reduce el número de pasos para alcanzar el contenido si dichos pasos requieren una carga de página. Las pruebas demuestran que a menudo hacer scroll es más rápido.

6. La navegación trabaja en diferentes tamaños de ventanaNo solo en diferentes tamaños sino también en posición vertical y horizontal. Ciertos conceptos funcionan mejor en pantallas grandes y otros mejor en pantallas pequeñas, por ello no cambies demasiado pronto a la versión de navegación móvil.

7. La estructura de navegación soporta diferentes niveles de profundidad (si así se requiere). Hay conceptos que solo soportan uno o dos niveles de profundidad. Si tu web tiene una estructura más profunda debes escoger el concepto de navegación adecuado.

8. El menú solo debe contener la estructura de la información

Si la función de búsqueda está en el menú, habrá personas a las que les costará encontrarla. Tampoco recomiendan que tengas que abrir el menú para cambiar de idioma.

9. La estructura de la información se ha estudiado detenidamenteSi la arquitectura de información del sitio es incorrecta o está desequilibrada, el concepto de navegación se vuelve irrelevante, pues la información será difícil de encontrar independientemente del mismo.

Layout y diseño

10. El menú tiene un diseño claro.

Trata la importancia de saber en qué página estás, en qué nivel de la estructura te encuentras y qué otras opciones hay al mismo nivel. O también aspectos como el diseño consistente o la delimitación clara de las diferentes zonas clicables.

11. Presentar el menú verticalmente

Este punto no se aplica necesariamente al menú superior.

12. Áreas clicables suficientemente grandes.

Indican 9 mm medidos en la pantalla del dispositivo.

13. El menú es fácil de encontrar.

14. El icono del menú más texto complementario (si hay icono de menú).

Utiliza el icono de menú que los usuarios esperan encontrar y acompáñalo del texto “Menú”.

15. El menú es de fácil acceso.

Debes poder acceder fácilmente al mismo cuando sostienes el teléfono con una sola mano.

16. Las opciones importantes del menú no están ocultas

No se refiere al menú oculto tras un botón “menú”, medida eficaz si su ubicación y diseño es claro y que además permite poner el foco en el contenido. Se refiere a ocultar opciones de menú tras un enlace “Mostrar más”. Muchos usuarios evitan hacer clic en este tipo de enlaces incluso si no encuentran lo que están buscando en las opciones visibles.

Contenido

17. Poner el foco en el contenidoLo prioritario de la página es el contenido, que confirma además si lo que estás buscando es esa página o si llegaste a la página correcta. El menú no debe ocupar toda la pantalla a menos que el usuario así lo haya elegido

18. Los enlaces a las páginas importantes también están incluidos en el contenidoLas preferencias de navegación varían: unos usuarios utilizan el menú, otros el buscador, y muchos hojean títulos y enlaces relevantes, evitando el menú y el buscador. Los enlaces deben ser claros, descriptivos y legibles, para lo cual ayuda que estén en líneas separadas.

Diseño técnico

19. El menú trabaja con el lector de pantalla.

20. El menú puede ser usado con el teclado. Además el orden de tabulación ha de ser lógico y el foco visible.

21. Puedes navegar incluso cuando javascript está desactivado

Preferencias de los usuarios

22. El menú admite diferentes tamaños de texto y fuentes

Es decir, el usuario puede cambiar el tamaño de texto o las fuentes, mediante las opciones de personalización de su navegador o el sistema operativo, y el menú debe admitirlo y visualizarse correctamente,

23. El menú admite zoom.

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

He decidido hacer esta entrada porque todavía hay mucha gente que suele confundir dos términos que son parecidos, pero que no significan lo mismo.

UI, que se le conoce como Interfaz de usuario y UX, que es Experiencia de Usuario.

ux y ui: diferencias

¿Qué es UI? (Interfaz de usuario)

La interfaz del usuario hace referencia al conjunto de elementos de la pantalla que hacen que el usuario interactúe con el sitio web. El experto en usabilidad y uno de los mayores referentes en UI, Jakob Nielsen ha desarrollado una serie de mejoras. Según él, los elementos más importantes de una IU son:

  • Propósito del sitio: tiene que quedar claro a quién pertenece la web y qué funciones permite realizar.
  • Ayuda al usuario: el sistema de navegación tiene que estar a la vista, y también tiene que incluir un sistema de búsqueda adicional.
  • Mostrar el contenido: tiene que estar explicado de manera clara y con elementos de texto que ayuden a su lectura (como títulos, negritas, etc.).
  • Diseño gráfico funcional: los elementos gráficos deben ir dirigidos a ayudar al usuario en encontrar lo que quiere, y no solamente como adorno.

 

Componentes de la UI (Interfaz de Usuario)

La UI, principalmente presenta las posibilidades de interacción junto con el diseño visual. Esto quiere decir, que las decisiones de la Arquitectura de Información y el Diseño de Interacción se reflejan en la interfaz.

La arquitectura establece la estructura, además se piensa en cómo se comporta el sistema en respuesta al usuario y por último tiene una serie de características: colores, texturas y gráficos que lo hacen estético.

Según Usability.gov, los elementos que generalmente se presentan en una UI son los siguientes:

  • Controles de Input: botones, campos de texto, casillas de verificación, botones de radio, listas drop down, campos de fecha…
  • Componentes de Navegación: migas de pan, sliders, formularios de búsqueda, paginación, tags, iconos…
  • Componentes de Información: ayudas adicionales, iconos, barras de progreso, notificaciones, cajas de mensajes.
  • Contenedores

Principios del Diseño de UI (Interfaz de Usuario)

Según Larry Constantine y Lucy Lockwood, existen ciertos principios para el diseño de interfaz centrado en el usuario. Estos principios son:

  1. Estructura: El diseño debe organizar la interfaz de usuario a propósito, de manera significativa y útil basada en modelos claros y consistentes que son evidentes y reconocible para los usuarios, poniendo cosas relacionadas entre sí y que separa las cosas no relacionadas, diferenciando cosas diferentes y hacer cosas similares se parecen entre una y otra. El principio de estructura concierne a la arquitectura general de la interfaz de usuario.
  2. Simplicidad: El diseño debe facilitar las tareas sencillas y comunes, comunicarse de forma clara y sencilla en el propio idioma del usuario y proporcionar buenos accesos directos que estén significativamente relacionados con procedimientos más largos.
  3. Visibilidad: El diseño debe hacer visibles todas las opciones y materiales necesarios para una tarea determinada sin distraer al usuario con información superflua o redundante. El buen diseño no abruma a los usuarios con alternativas o confunde con información innecesaria.
  4. Retroalimentación: El diseño debe mantener a los usuarios informados de las acciones o interpretaciones, los cambios de estado o condición, y los errores o excepciones que son relevantes y de interés para el usuario a través de un lenguaje claro, conciso y claro que sea familiar para los usuarios.
  5. Tolerancia: El diseño debe ser flexible y tolerante, reduciendo el costo de los errores y el mal uso al permitir deshacer y rehacer, y al mismo tiempo evitar los errores siempre que sea posible, tolerando entradas y secuencias variadas e interpretando todas las acciones razonables.
  6. Reuso: El diseño debe reutilizar los componentes y comportamientos internos y externos, manteniendo la coherencia con el objetivo en lugar de consistencia meramente arbitraria, reduciendo así la necesidad de los usuarios a repensar y recordar.

 

¿Qué es la UX? Experiencia de usuario.

La experiencia de usuario hace referencia a las sensaciones que experimenta el usuario antes, durante y después de interactuar con un sitio, es decir, son las sensaciones que percibe y hace que el usuario se sienta satisfecho y feliz. Si esto ocurre, estaremos hablando de que ha producido una buena buena experiencia, que hemos hemos aplicado la accesibilidad y hemos hecho el sitio web lo más usable posible.

La experiencia de usuario, como se refiere al análisis del comportamiento del usuario, tiene actitudes relacionadas con la psicología:

  • La percepción. Tenemos que saber qué nos llama la atención, cómo nos afectan los colores y cómo desplazamos la mirada por la pantalla.
  • Las emociones. Las emociones no son reacciones automáticas, y por lo tanto hay que entender cómo se generan y qué implicaciones tienen. Las personas nos dejamos guiar más por las emociones que por cualquier otra cosa, y precisamente por eso es tan importante tenerlas en cuenta.
  • La memoria. Cuando diseñamos una web tenemos que pensar en las limitaciones de las personas para recordar. Muchas veces no se tienen en cuenta los caminos para que el usuario vuelva al punto de partida, y eso puede hacer que se sienta confuso.
  • La mentalidad. El usuario tendrá creencias, estereotipos, su interpretación de la sociedad y de las personas que lo rodean. Siguiendo en esta línea, vemos por qué cada vez más los usuarios buscan valoraciones de otras personas acerca de un producto en la red: no es solamente desconfianza, también implica qué prejuicios y creencias tiene.
  • La motivación. El usuario tiene que estar motivado durante todo el tiempo que esté en una web, no solamente al principio (de lo contrario, puede irse). Actualmente existen muchas empresas que usan el Gaming para tener a sus usuarios motivados y entretenidos.
  • El aprendizaje. Desde el momento en que un usuario entra en una página web se convierte en un aprendiz y eso significa que tenemos que enseñarle los pasos que tiene que dar para que consiga su objetivo. Además, se tiene que estructurar la información para que el usuario entienda fácilmente todo el contenido de la web.

Principios de la UX. (Experiencia de usuario)

 

  1. Esté fuera del camino de las personas: En diseño, mucho puede ser excesivo. En realidad las personas saben lo que desean y es mucho mejor hacer esa experiencia de la manera más fácil posible, sin complicaciones.
  2. Cree jerarquías que vayan de acuerdo con lo que las personas necesitan: si el principio 1 es hacerlo todo más simple, es importante que lo que las personas encuentren tenga una organización similar a sus necesidades.
  3. Limite las distracciones: si usted tiene una idea clara de qué desea que los usuarios hagan, tenga cuidado con lo que pone al lado, pues puede lograr resultados contraproducentes. Un diseño limpio y sin distracciones es un buen aliado.
  4. Provea de manera fuerte la esencia de la información: lo que más puede limitar una buena experiencia es no tener todo el conocimiento o contenido adecuados. Por ello, el diseño debe incluir lo necesario para la navegación y los contenidos prometidos o esperados por el usuario.
  5. Provea signos y pistas: hay que aprovechar todos los elementos a la mano, en especial los visuales, lo cual generalmente es un excelente complemento de la información adecuada.
  6. Es necesario el contexto: piense que no todos tienen el mismo nivel de conocimiento e información, por lo que muchas veces el contexto es parte importante para el desarrollo de la experiencia. Casi siempre todo necesita un porqué.
  7. Use el contenido constantemente: crear alertas y comunicar todo el tiempo en qué parte del proceso o del sitio se encuentra el usuario es vital para la buena experiencia.
  8. Haga reversibles las acciones: si hay algo que puede ser difícil de asumir para un usuario es que lo que hizo en el sitio web no pueda cambiarse o requiera muchos pasos para lograrlo. Por ello, es necesario dar la posibilidad de deshacer algunas decisiones, desde la simple de regresar a la página anterior hasta cancelar un pedido en una tienda en línea.
  9. Establezca un canal de retroalimentación: este puede ser uno de los canales más eficientes para saber lo que está sucediendo en su sitio web con la experiencia de usuario. Mantenga siempre una comunicación abierta. Si muchos usuarios ‘están equivocados’ o ‘no captan’ lo que usted está tratando de ofrecer o comunicar, lo más probable es que no sean ellos los del error.
  10. Es importante generar una primera buena impresión: lo que hace que los usuarios vuelvan y se conviertan en usuarios, lectores o visitantes fieles de un sitio es su experiencia. Generar buenos momentos y de tal forma buenos recuerdos impulsa esa fidelidad, y también el que comparta el sitio con otros.

Conclusión entre UI y UX

Por lo tanto la experiencia de usuario es lo que siente el usuario de interactuar con un producto, mientras que la interfaz de usuario es una capa visual de colores, texturas, formas y elementos. Por eso es algo que muchas personas suelen confundir con facilidad, porque digamos que una se integra dentro de la otra.

Es decir, la diferencia entre la interfaz de usuario y la UX o experiencia de usuario sería esta: El diseño de interacción se ocupa de decidir cuál será el recorrido y dónde se deberán situar los botones que desencadenarán las diferentes acciones, es la parte de estrategia y la experiencia de usuario trata sobre los aspectos relativos a esos procesos o acciones que se desencadenan, se ocupa de qué es lo que sucede cuando se activan los botones o mecanismos, y sería la parte mecánica del proceso.

Entradas relacionadas:

Accesibilidad y usabilidad web: Diferencias