Steve Krug: “Haz fácil lo imposible”

Haz fácil lo imposible

Este libro de Steve Krug, se considera como una continuación, una segunda parte de su libro “No me hagas pensar”, que se trata de una guía para detectar problemas de usabilidad.

Haz fácil lo imposible

Comienza el libro explicando qué son las pruebas de usabilidad y explica la diferencia entre:

  • pruebas cuantitativas: su objetivo es demostrar algo (“esta versión de la web es mejor que la anterior”, “mi web es mejor que la de mis competidores”) y lo hace midiendo algo (“cuántas personas terminan las tareas”, “cuánto tiempo les lleva”). Tienen que ser rigurosas o los resultados no serán fiables.
  • pruebas cualitativas, donde se enmarcan las pruebas “hágalo usted mismo” de las que trata el libro, pruebas informales y con menos usuarios. Sencillas y eficaces.

 

El autor, resume sus recomendaciones en un serie de máximas o factores de éxito, para que el lector no lo olvide:

Máximas de Steve Krug en “Haz fácil lo imposible”

  • Una mañana al mes, esto es todo lo que pedimos. No se necesita invertir más tiempo, salvo el necesario para preparar la prueba. Durará una mañana y se debatirá lo ocurrido a la hora de comer. Sin informes, basta un email con el resumen.
  • Empiece más pronto de lo que crea que tiene sentido. Puedes probar tu sitio, aunque lo vayas a rediseñar, para saber qué evitar; puedes probar los de la competencia para ver qué funciona mejor; y puedes probar no solo el prototipo, también el boceto de la página en una servilleta, un wireframe o el diseño gráfico. Lo importante es no esperar hasta el final para comenzar a probar.
  • No sea exigente en la selección, y valore basándose en promedios. No te obsesiones por encontrar usuarios reales o representativos de la audiencia objetivo, especialmente al principio, porque los errores serios los va a encontrar “casi cualquiera”. A veces también es interesante conocer la perspectiva de personas ajenas al negocio. Los usuarios pueden ser incluso de tu empresa, siempre y cuando sean de otros departamentos (administración, finanzas, etc.) También enumera las razones por las cuales tres usuarios son suficientes y por qué estos no deberían participar en las siguientes rondas.
  • Conviértalo en un deporte de masas: intenta que el mayor número de personas en tu empresa asistan a las pruebas, especialmente consigue que vengan directivos, porque “ver es creer”. Observan, aprenden, toman notas y asisten al debate. Deberían sintetizar los tres problemas de usabilidad más graves que han visto en cada usuario de la sesión. Es importante que la sala de observación y la sala de pruebas estén lejos, así que necesitas un cómplice en la sala de observación para que las cosas funcionen y la gente esté concentrada. También habrá que saber lidiar con los egos heridos. Solo deberían asistir al debate posterior los que han asistido a la sesión de prueba.
  • Céntrese implacablemente en los problemas más serios. Hay que salir del debate posterior a la sesión con una lista de los problemas de usabilidad más importantes y con una lista de los que se van a solucionar antes de la siguiente ronda. Siempre hay más problemas que recursos, por tanto es muy importante centrarse primero en lo más grave.
  • Cuando solucione problemas, intente hacer lo menos posible. Ya tienes la lista de problemas a solucionar, ahora pregúntate, “¿cuál es el cambio más pequeño y sencillo que podemos hacer para impedir que la gente tenga este problema que hemos observado?” Esto nos asegura que el cambio será sencillo de implementar y que se hará en unos días. Un problema serio puede tener una solución sencilla, que suele ser modificar algo (no rediseñarlo, y da 10 razones por las cuales modificar es mejor que rediseñar) o eliminar algo (no añadas, normalmente hay demasiadas cosas y lo que necesitas es quitar)

Una de las cosas que la gente tiene la tentación de hacer cuando hay un problema de usabilidad es añadir algo. Si alguien no ha entendido las instrucciones, añada más instrucciones. Si alguien no ha podido encontrar lo que estaba buscando en el texto, añada más texto. Si alguien no se ha dado cuenta de algo que necesitaba, añádale más color, póngalo en negrita, o más grande.

Pero muy a menudo la mejor forma de solucionar un problema de usabilidad es hacer justo lo contrario: quitar algo. Elimine algo de la página.

La mayoría de las páginas tienen todo tipo de cosas que el usuario no necesita: demasiadas palabras, demasiadas imágenes irrelevantes, demasiada decoración, demasiado “ruido”, y ésa es la razón por la que los usuarios no encuentran lo que necesitan.

Un diseñador sabe que ha alcanzado la perfección no cuando ya no que queda nada que añadir, sino cuando no haya nada que quitar”, Antoine de Saint-Exupèry.

El autor enumera una serie de problemas que se pueden encontrar los usuarios, los cuales voy a escribir a continuación:

Problemas de usabilidad en “Haz fácil lo imposible”

  • Los usuarios no entienden el sitio. Si en los primeros segundos no saben de qué va el sitio, quién lo publica, qué tipo de cosas tiene, cómo está organizado, qué puedo encontrar aquí y qué puedo hacer aquí… todo está perdido. Empezarán con mal pie y cada vez estarán más perdidos. En este sentido, las homes suelen tener demasiadas cosas. La home sigue siendo importante porque, si aterrizas en una página interior, a menudo irás a la página de inicio para salir a la superficie y orientarte, para saber de qué va este sitio, qué más ofrece o si es creíble.
  • No se ofrecen pistas visuales. Es posible mantener el atractivo visual y no caer en sutilezas a la hora de dirigir la atención de la gente: ese es el botón de pagar, eso es el título, ese es el menú en el que estás, etc.

Los capítulos 6, 7 y 8 los dedica a dar recomendaciones sobre cómo preparar y llevar a cabo las pruebas: la selección de las tareas, la correcta elaboración y presentación de los escenarios (las tareas tal y como se van a proponer a los usuarios: no utilizar palabras que aparezcan en la web, permitir o no el uso del buscador, etc.), un listado de todo lo que tienes que tener en cuenta para que no se te olvide nada, o cómo realizar correctamente el trabajo de “facilitador” durante la prueba.

Se pueden descargar diferentes plantillas desde su web.

Al final dedica un capítulo a los test en remoto, moderados o no, sus ventajas e inconvenientes.

Sus herramientas preferidas son Camtasia para grabar sesiones (considera que Morae puede ser excesiva para la mayoría de la gente); GoToMeeting para compartición de pantallas; y Usertesting.com para test en remoto no moderados.

Y también recomienda los siguientes libros:

 

Steve Krug: “No me hagas pensar.”

En esta entrada os voy a hacer un resumen del libro de Steve Krug: “No me hagas pensar”.  El autor, en este libro hace un repaso de las claves de la usabilidad. Es la nueva edición del libro (año 2015), en la que incluye un capítulo sobre usabilidad para móviles.

Portada del libro de Steve Krug: No me hagas pensar

Capítulo 1. ¡No me hagas pensar!

Primera norma de usabilidad

Se trata del principio fundamental de la usabilidad en el diseño Web. Una página web ha de ser obvia, evidente, clara y fácil de entender. Debe entenderse a primera vista, deben mostrar su encanto de un solo vistazo.

La primera clave de usabilidad es que la página no presente interrogantes al usuario como “¿por dónde empiezo?”, “¿por qué lo llaman así?” o “¿puedo hacer clic en esto?”.

Los interrogantes aumentan el trabajo cognitivo y distraen nuestra atención de la tarea que estamos realizando. Las distracciones, aunque pueden ser leves se acumulan y pueden llevarnos a abandonar el sitio.

Capítulo 2. Cómo usamos realmente la web.

Ojear, ser suficientes y apañárselas.

Si quieres hacer hacer págibnas web eficientes hay que tener en cuenta tres factores:

Factor nº 1: No leemos la páginas, las escaneamos.

La gente invierte poco tiempo en leer las páginas web, las leen muy por encima.

¿Por qué sucede esto?

Porque tenemos prisa y leemos justo lo necesario. Sólo nos interesa una parte del contenido y esscaneamos para encontrar esas partes relevantes. Centramos nuestro interés con palabras y frases que parecen encajar mejor con la tarea que tenemos entre manos, nuestros intereses personales o las palabras que causan una reacción repentina, como “Gratis”, “Oferta”.

Factor nº 2: No tomamos decisiones óptimas. Es sufiente satisfacer.

Cuando navegamos por una página web, hacemos clic en la primera opción que nos parece razonable, es decir, aplicamos la estrategia del satisficing.

Esto se debe a que tenemos prisa. Por eso, la estrategia del satisficing es mucho más efectiva. Si nos equivocamos, las consecuencias por el error cometido no son importantes, siempre podemos volver atrás. Y sopesar distintas opciones no ayuda a mejorar las oportunidades. Todo depende de nuestro esquema mental y de la confianza que tengamos en el sitio.

Factor nº 3: No averiguamos cómo funcionan las cosas, nos las apañamos.

A la gente nos da igual cómo funcionan las cosas, simplemente nos apañamos e intentamos averiguar cómo funcionan. Si nos funcionan de una manera, optamos por esa opción y dejamos de buscar otra solución.

Esto ocurre porque no nos importa saber cómo funcionan las cosas siempre que podamos usarlas. Arreglárselas funciona, pero termina siendo ineficaz y proclive al error.

Sin embargo, si los usuarios entienden el sitio, encontrarán mejor lo que buscan y se sentirán más seguros y convencidos cuando usen el sitio.

Capítulo 3. Diseño de rotulos 101.

Diseño de páginas para poder ser escaneadas, no para leer.

Hay varias claves para diseñar páginas web:

  • Aprovechamiento y uso de las convenciones
  • Crea una jerarquía visual  clara
  • División de las páginas en zonas bien definidas
  • Dejar bien claro sobre que se puede hacer clic
  • Eliminar el ruido visual
  • Formatear el contenido para facilitar el escaneo

Aprovechamiento y uso de las convenciones

Todas las convenciones nacen de la idea brillante de alguien. Si funcionan lo suficientemente bien, otros sitios la imitan y termina viéndose en tantas partes que no necesita ningún tipo de explicación.

Las convenciones son útiles. No hay que intentar reinventar la rueda: innova solo cuando sepas que la idea es mejor pero aprovecha las convenciones cuando no haya ideas mejores.

Creación de una jerarquía visual clara en cada página

Una buena jerarquía visual nos ahorra tales esfuerzos a la hora de preprocesar la página, organizar y establecer prioridades en los contenidos, lo que nos permite captar todo de forma casi instantánea.

Todas las páginas han de tener una jerarquía visual clara. Para ello, se basan en tres características:

  • Los elementos más importantes deben ser los más destacados. Los encabezados más importantes serán los más grandes y aparecerán en negrita.
  • Lo que está relacionado por lógica también debe estarlo de forma visual. Agrupar los elementos bajo un mismo título.
  • Los elementos se engloban visualmente para diferenciar cada una de las secciones o bloques.

División de las páginas en zonas bien definidas

Es importante dividir la página en zonas definidas con claridad para que los usuarios puedan decidir sobre qué parte quiere centrarse y cuáles ignorar.

Dejar claro sobre lo que se puede hacer clic

Hay que identificar fácilmente sobre lo que se puede hacer clic, los botones y lols enlaces.

Eliminar el ruido visual

Deshacerte de todo aquello que no contribuye a la solución debe desaparecer: todo lo que llama la atención, el ruido y la desorganización.

Formatear el contenido para facilitar el escaneo

  • Usar encabezados, que te permitirán decidir qué parte, leer, escanear o saltarte.
  • Escribir párrafos cortos para hacer más fácil el escaneo.
  • Usar listas.
  • Destacar los términos claves.

Capítulo 4. ¿Animal, vegetal o mineral?

¿Por qué le gustan al usuario las opciones mecánicas?

El número de clics no importa tanto como el esfuerzo de pensar lo que se debe hacer, y la incertidumbre sobre si la elección tomada es la correcta.

No importa el número de clics que se deban hacer mientras el camino sea sencillo y ofrezca la certeza de que se sigue la pista correcta.

Tres clics insconscientes e inequívocos equivalen a un clic que requiere cierto grado de reflexión.

Capítulo 5. Omisión de palabras innecesarias.

El arte de no escribir en la web

La tercera norma de usabilidad es:

Elimina la mitad de las palabras en todas las páginas y luego deshágase de la mitad de lo que quede.

Tenemos que eliminar el discurso innecesario. Otrra cosa que hay que eliminar son las instrucciones porque nadie las va a leer. Si las instrucciones son necesarias, hay que reducirlas a lo esencial.

Si se elimina lo innecesario se reduce el ruido de la página, haciendo que el contenido sea más relevante y se acortan las páginas, permitiendo que se vean de un solo vistazo.

 

Capítulo 6: Señales en la calle y migas de pan.

Diseño de la navegación

Comienza con un hombre intentando comprar una motosierra, para pasar a explicar las semejanzas y diferencias entre comprar en una tienda física y en la web.

La navegación web nos ayudará a encontrar lo que buscamos pero también nos indicará dónde nos hallamos. Evita que nos perdamos, nos dice lo que hay en cada lugar, nos enseña a usar el sitio (porque implícitamente nos muestra por dónde empezar y las opciones que hay) y nos permite confiar en las personas que la han creado.


Una navegación clara y bien desarrollada es una de las mejores oportunidades con las que cuenta un sitio para dar una buena impresión.

La navegación debe seguir las convenciones para localizarla con facilidad y distinguirla del resto del contenido. También ha de ser coherente y consistente a lo largo de las páginas, esto nos permite tenerla siempre a mano y aprenderla una única vez. Como excepción, en la home y en ciertos formularios (por ejemplo en la formalización de tu pedido) podemos tener una versión mínima de esta navegación coherente, pues en este caso la navegación puede ser una distracción innecesaria.

Otras claves que explica en este capítulo son:

  • Se debe identificar en todo momento en qué sitio nos encontramos, para ello debemos utilizar también la convención de incluir el logotipo en la esquina superior izquierda.
  • Las utilidades deben estar diferenciadas de las opciones principales de navegación y ser menos prominentes.
  • Se tiene que volver con facilidad a la página de inicio, tanto desde el logotipo como incluyendo la opción en las utilidades.
  • Se debe incluir una opción de búsqueda a no ser que el sitio sea muy pequeño. Repasa las buenas prácticas y las convenciones a seguir en el buscador, como por ejemplo no limitar el ámbito de la búsqueda.
  • Se debe resaltar la opción de menú en la que te encuentras.
  • Es importante incluir migas de pan y seguir unas buenas prácticas, como poner en negrita el último elemento o que este no sustituya al título de la página.
  • Los enlaces visitados deben cambiar de color.
  • Recalca la importancia del título de las páginas: su ubicación, su estilo o su texto.
  • El nombre de los enlaces, menús y títulos de las páginas han de ser coherentes entre sí.

    Si hay una mayor gran diferencia entre el nombre del vínculo y el nombre de la página o muchas discrepancias menores, mi confianza en el sitio (y en la competencia de las personas que lo han publicado) se verá disminuida.

     

Por último defiende su predilección por las pestañas de navegación. Indica que son claras y fáciles de entender, que es difícil perderlas de vista o confundirlas con algo que no sea la navegación, y que refuerzan que el contenido está dividido en secciones y que nos encontramos en una de ellas.

Las claves de las pestañas es que haya una seleccionada por defecto y que estén perfectamente dibujadas para que parezcan solapas de verdad: la pestaña activa debe pasar al frente.

Indica que es mejor que estén codificadas por color (un color diferente para cada sección) siempre y cuando no se confíe en que todos los usuarios perciban esta distinción, el color es genial como clave adicional, pero nunca debería basarse en él como clave única.

Capítulo 7. La teoría del Big Bang en el diseño de páginas web.

La importancia de situar a la gente en el camino correcto.

Este capítulo habla de todo lo que tiene que tener una página principal. Tiene que tener una identidad y decirnos para qué sirve.

  • Tiene que establecer una jerarquía del sitio, una visión global tanto del contenido como de sus características.
  • Disponer de un cuadro de búsqueda.
  • Debe ser sugerente, para convencer del buen contenido que tiene.
  • Debe tener promociones en las secciones.
  • Disponer de contenido actualizado y accesos directos
  • La página principal debe mostrar por dónde empezar y mostrar crediblidad y confianza.

 

El propio autor define que la teoría del Big Bang debe resumirse en cuatro preguntas, y comprender la web en unos segundos. Describir quién eres, qué haces y qué ofreces.

  • ¿Qué es esto?
  • ¿Qué tienen aquí?
  • ¿Qué puedo hacer aquí?
  • ¿Por qué debería yo estar aquí y no en otro lugar?
  • ¿Por dónde empiezo?

 

Para transmitir ese mensaje de quién eres, qué haces y qué ofreces debes hacerlo con unas pautas que son:

  • Escribe mensajes cortos, ir al grano. Establece las características importantes.
  • No uses una frase relativa a la misión de la empresa. Nadie las lee.
  • Usar líneas de etiquetas, que caractericen a la empresa. Deben ser claras, cortas (de seis a ocho palabras), y tener un beneficio claro.
  • A la hora de echar un vistazo rápido, deberíamos saber con confianza y claridad dónde podemos buscar y navegar.

Capítulo 8: El granjero y el ganadero deben ser amigos.

Por qué la mayoría de los argumentos de diseño web acerca de la usabilidad son una pérdida de tiempo y cómo evitarlos

La tendencia natural es a proyectar nuestros gustos o disgustos en los usuarios de la Web: creemos que a la mayoría de los usuarios les gustan las mismas cosas que a nosotros.

Para resolver el conflicto a menudo se intenta encontrar qué le gusta a la mayoría de los usuarios. El problema es que no hay un Usuario Medio. Sería estupendo saber si los desplegables son buenos o malos en función de si gustan o no a la mayoría, pero no hay una respuesta simple o correcta a esta pregunta.

La cuestión es que no es nada productivo preguntar cosas como “¿Gustan a la mayoría los menús desplegables?”. Lo más acertado es preguntar “¿Supone este desplegable con estos elementos y estos términos dentro de este contexto particular una buena experiencia para la mayoría de las personas que probablemente utilicen este sitio?”
Y solo hay una forma de contestar a este tipo de pregunta: probando.

Capítulo 9: Prueba de usabilidad por 10 céntimos al día.

Haz pruebas sencillas. Nunca es suficiente.

 

Las personas con frecuencia prueban para decidir qué color de cortinas es mejor, sólo para darse cuenta de que olvidaron poner ventanas en la habitación. Por ejemplo, podemos descubrir que no hay mucha diferencia si la barra de navegación es horizontal o existen menús verticales, si nadie entiende el valor del sitio.

Tristemente, así es como se hacen la mayoría de las pruebas de usabilidad: demasiado pequeñas, demasiado tarde y por razones equivocadas.

Dedica bastante tiempo a explicar la diferencia entre un grupo de discusión y un test con usuarios. No son lo mismo ni tienen el mismo objetivo.

Defiende la necesidad de realizar test con usuarios: es mejor probar con un usuario que con ninguno; y es mejor probar con un usuario al principio que con 50 al final.

Es bueno probar con personas que vayan a utilizar el sitio, pero más importante es probarlo pronto y con frecuencia. Si reclutar a los usuarios ideales para la prueba va a significar hacer menos pruebas, hazlas con cualquiera (a no ser que necesites un perfil muy concreto o la web sea de un campo muy específico)

Se pueden realizar las pruebas sin invertir mucho tiempo o dinero, y sin necesidad de muchos usuarios o de un laboratorio. Probar puede ser rápido, sencillo y barato.

A veces basta con pruebas tan sencillas como imprimir el formulario que has prototipado, enseñárselo a alguien y ver si tiene sentido para él.

Por ejemplo, realizar un test con solo tres usuarios te permite generar conclusiones más rápidas, agilizar las modificaciones y hacer otra ronda de testing. De esta manera, al final, más pruebas con menos usuarios detectan más problemas.

También es mejor exponer directamente en una reunión las conclusiones al equipo que redactar un extenso informe que al final nadie lee.

A continuación nos da consejos y pone ejemplos concretos basados en su experiencia. Por ejemplo recomienda proponer siempre tareas personalizadas. Es mejor “encuentra un libro que quieras comprar” que “encuentra tal libro”; o “inserta un anuncio de algo que quieras vender” que “insertar tal anuncio”. Cuando la gente realiza tareas ficticias no se implica emocionalmente y no puede usar todo su conocimiento personal.

Los problemas habituales que suelen encontrarse en los test con usuarios con:

  • no tienen claro el concepto
  • las palabras que buscan no están
  • lo que buscan está en la página pero no lo ven por el ruido o porque no destaca.

Tras las pruebas hay que resistir el impulso de añadir explicaciones a las páginas o añadir características que han propuesto los usuarios. Pero el mayor desafío suele ser reparar los problemas SIN estropear las partes que funcionan, pues todo cambio tiene consecuencias.

Capítulo 10. Mobile: No es una ciudad de Alabama

Bienvenido al siglo 21 – Puedes experimentar una ligera sensación de vértigo

 

¿Cuál es la diferencia en cuanto a la usabilidad de un dispositivo móvil?

Prácticamente la misma que para la web, los principios son los mismos. Con la diferencia de que la gente navega más rápido y lee menos en las pantallas pequeñas.

Una diferencia importante está en el diseño, que tiene una serie de limitaciones: decidir qué cosas tienen que hacerse y cuáles no pueden hacerse, por espacio. En cualquier cosa que se diseña, te estás enfrentando con limitaciones.

Al ser las pantallas más pequeñas, la gente tendrá que hacer clics más veces, pero eso está bien. Si tienes un sitio web, tendrás que hacerlo usable en pantallas de cualquier tamaño. Esto duplica el esfuerzo y es muy difícil de hacer bien.

Pero nos da tres sugerencias:

  • Permite hacer zoom para facilitar la lectura en el móvil.
  • No me dejes plantado en la puerta principal.
  • Proporciona simpre un link para el sitio Web completo.

 

También sostiene la idea de que las app tienen un problema: que deben ser comprensibles y fáciles de aprender, pero no lo son.

Para ello, habla del concepto de la memorabilidad, es decir: ¿recordarás cómo usarla la siguiente vez que pruebes, o tendrás que empezar de nuevo desde el principio? Para que sea fácil recordar su uso, tiene que ser fácil de aprender.

 

Capítulo 11. La usabilidad como cortesía común.

Por qué su sitio web debe ser mensch

¿Qué va minando la buena voluntad del usuario hasta llevarlo a abandonar?:

  • ocultar la información que quiere: el teléfono de soporte, los costes de envío, los precios, etc.
  • castigarle por no hacer las cosas a tu manera: obligarle a incluir los datos con un determinado patrón, como espacios en el número de la tarjeta
  • pedirle información que no necesitas
  • la falta de sinceridad, con mensajes como “su llamada es importante para nosotros” pero te tienen 20 minutos a la espera
  • los obstáculos en su camino, como tener que verse una introducción Flash a la fuerza
  • que el sitio parezca de aficionados: desorganizado, descuidado y poco profesional

 

Por el contrario, la buena voluntad del usuario aumenta cuando:

  • Conoces las principales cosas que las personas quieren hacer en tu sitio y estas son obvias y sencillas
  • Les dices lo que quieren saber
  • les ahorras pasos siempre que puedes
  • Te esfuerzas en dar la información que necesitan, precisa y de utilidad, organizada de forma que puedan encontrarla
  • Te anticipas a las preguntas probables y las respondes con franqueza
  • Les proporcionas comodidades como una impresión correcta de las páginas
  • Les facilitas la recuperación ante los errores
  • Te disculpas cuando es necesario si algo está causando un problema

 

Capítulo 12. La accesibilidad web y tú.

Cuando piensas que ya lo has hecho todo, aparece un gato con una tostada untada con mantequilla atada a la espalda

A los vigorosos desarrolladores de 25 años (son palabras del autor, no mías) les es difícil creer que un gran porcentaje de la población necesita ayuda para acceder a la web. Les parece exagerado. También les cuenta creer que hacer las cosas más accesibles nos beneficia a todos.

Temen además que supondrá más trabajo y que el resultado será menos atractivo.

El autor también habla de la tendencia a pensar que el validador de accesibilidad es como un corrector ortográfico. Además la mayoría descuida las advertencias pues no les parecen problemas reales. Sin embargo, las advertencias pueden hacer referencia a requisitos determinantes pero que simplemente no son evaluables automáticamente.

Da cinco consejos:

  • Soluciona los problemas de usabilidad que nos confunden a todos… seguro que también estarán confundiendo a los usuarios con alguna discapacidad.
  • Lee una página con un lector de pantalla.
  • Lee un libro sobre accesibilidad web.
  • Usa CSS.
  • Revisa tu código HTML para asegurar que:
    • incluyes texto alternativo a las imágenes
    • Usas los encabezados correctamente.
    • Usas label en los formularios
    • es accesible por teclado
    • no usas javascript sin una buena razón
    • no usas mapas de imagen del lado del servidor.

 

Capítulo 13. Guía para perplejos

Haga la usabilidad presente

 

¿Como puedo convencer a mi jefe para conseguir usuarios y me dejen el tiempo necesario para realizar las pruebas?

Hay que conocer el tema. Hace una pequeña introducción sobre cómo ha cambiado el campo de la usabilidad desde sus comienzos hasta ahora, así como los diferentes términos aplicados, que los califica como “que le han salido muchos hermanos”.

Da una serie de sugerencias para convencer a la gerencia de la empresa:

  • Haz una demostración ROI.
  • Habla sobre asuntos críticos, asuntos que interesen a la empresa
  • Consigue que tu jefe observe una prueba de usabilidad
  • Realiza una prueba de la competencia
  • Empatiza con la gerencia de la empresa

 

Al final  del libro, recomienda unos libros:

 

O algún libro de Susan Weinschenck:

Accesibilidad web: Cómo influye en el SEO

Teniendo en cuenta lo que es la accesibilidad web y qué es lo que significa, vamos a hablar de una serie de factores importantes para comprender cómo influye en el SEO.

Accesibilidad web y SEO

Limitaciones personales y tecnológicas

Partiendo de la definición de que la accesibilidad web beneficia a las personas con diversidad funcional (y a todos), existen una serie de limitaciones aparte de las que son derivadas de la propia condición de la persona.

Limitaciones personales: El tener una diversidad funcional no siempre implica que sea visual, auditiva, motriz o intelectual, sino que puede ser derivada de la edad, de la inexperiencia con el mundo de las TIC (Tecnologías de la Información y de la Comunicación), o por un problema temporal. También puede ser debido a que están aprendiendo un idioma o al nivel educativo de los usuarios.

Limitaciones tecnológicas o derivadas del entorno: Pueden darse situaciones muy diferentes, como una conexión lenta a intenet, un ambiente con mucho ruido, poca visibilidad, navegación sin imágenes, navegación sin ratón, etc.

Técnicas SEO para mejorar el posicionamiento

  • Una de la técnicas es facilitar el rastreo e indexación de las páginas por parte de los motores de búsqueda y que se realice por los téminos relevantes para esa página.
  • Conseguir que Google considere la página relevante. Para ello, hay ciertos factores que influyen, como la velocidad de carga de la página o la temática de las páginas que enalazan con la nuestra, etc.

Google es un usuario ciego

Google como tal, no ve las imágenes ni los vídeos, ni interpreta las animaciones y sus características no se diferencian mucho de las que se tratan en la accesibilidad web. Hay que pensar en él como un usuario más. Es la razón por la que muchas de las técnicas que se aplican repercuten de manera directa y positiva en su indexación.

Accesibilidad web y SEO: Técnicas de las WCAG 2.0.

Ahora vamos a hablar de algunos criterios y vamos a ver la relación que tienen con la accesibilidad, cómo influye y por qué es beneficioso para el SEO.

Alternativas textuales para elementos no textuales

Según el criterio 1.1.1, las imágenes deben tener un texto alternativo que proporcione la misma información o funcionalidad que pretende transmitir la imagen. Desde el punto de vista de la accesibilidad web, el texto alternativo de una imagen permite que las personas que no pueden ver, cual es el contenido de la fotografía gracias al lector de pantalla.

Con el SEO los buscadores sólo entienden texto y pueden interpretar los diferentes contenidos no textuales (fotos, vídeos, audios), gracias a las alternativas textuales.

Título e idioma de las páginas

Según el criterio 2.4.2, las páginas deben tener un título o temática que describa su propósito. En la técnica G88 se establece que el título debe tener sentido fuera de contexto y ha de ser corto.

Con el criterio de conformidad 3.1.1 “Idioma de la página”. Se debe indicar el idioma de la página. Esto beneficia a todos las personas porque pueden identificarla con rapidez.

Desde el punto de vista SEO, nos dice sobre qué trata y ayuda a mejorar la indexación de la página en la web.

Enlaces

Los criterios de conformidad 2.4.4 y 2.4.9 hablan del propósito de los enlaces. Establece que no hay que usar enlaces ambiguos y que los enlaces deben tener un destino claro.

Con el SEO, cuanto más fácil sea el texto del enlace, más fácil será interpretarlo para los motores de búsqueda.

Encabezados y marcado semántico

En el criterio 1.3.1 se establece que hay que separar el contenido de la presentación. También que hay que respetar la semántica del etiquetado en HTML y CSS.

En el criterio 2.4.1 se establece que hay estructurar el contenido mediante encabezados. Los encabezados deben usasrse de forma coherente y sin saltarse niveles.

Según el criterio 2.4.6, los encabezados deben ser claros e identificar la sección del contenido que encabezan.

Es importante también establecer los encabezados de sección, como se indica en el criterio 2.4.10.

Desde el punto de vista SEO, si la página se carga sin CSS se pueden identificar los títulos, las listas y el texto resaltado. Esto mismo se aplica a los motores de búsqueda.

Por otro lado, el marcado semántico y un uso correcto de los encabezados hacen que los motores de búsqueda indexen mejor la página.

Separación entre contenido y presentación

El criterio 4.1.1 hace referencia al uso del lenguaje de marcado de acuerdo a su especificación, y que se puede validar mediante un validadador automático, por ejemplo, el del W3C.

En el criterio 1.1.1, que ya hemos visto anteriormente se indica que las imágenes se deberían incluir en las CSS, para separar el contenido de la presentación. Por este mismo motivo se debe evitar el uso de tablas, tal y como establecen las técnicas H73 y G140.

El criterio 1.4.5 establece que se debe utilizar texto en vez de imágenes de texto, aunque se admiten excepciones, por ejemplo, para los logotipos.

Para el SEO, que ocurra esto es muy bueno porque genera páginas más ligeras y disminuye el tiempo de carga, lo cual es un factor relevante para el posicionamiento. Además de esto, las páginas tienen un código más claro y más limpio.

Mapa web y navegabilidad

El criterio de condormidad 2.4.5 indica que se debe establecer varías vías para localizar una página web dentro del sitio. Se pueden utilizar diferentes técnicas: enlaces a páginas relacionadas, tablas de contrenidos o un mapa web.

En el criterio 2.4.8 se indica que hay que proporcionar información al usuario acerca de su ubicación. Las técnicas que se pueden emplear son: uso de las migas de pan, un mapa web o incluir un mapa de navegación semántica.

También se establece en el criterio 2.2.1, que las redirecciones deben ser claras para el usuario, como por ejemplo, usando las redicciones del servidor 301.

Para el SEO, los motores de búsqueda deben ser capaces de llegar a todas las páginas web de nuestro sitio. Incluir migas de pan y enlaces relacionados ayuda a que se pueda acceder a todas las páginas.

Legibilidad

El criterio 3.1.3 indica que se debe aclarar el signicado de las jergas y las palabras inusuales, con un glosario de definiciones.

El criterio 3.1.4 establece que se debe explicar el significado de las abreviaturas, en el propio texto o en el atributo title del elemento <abbr>.

Ee el criterio 3.1.5 se indica que se debe adecuar el nivel de lectura del texto y su legibilidad para todos los usuarios. Para ello se puede emplear: textos con imágenes que ayuden a explicar las ideas, incluir menos lectura o hacer el texto más fácil usando palabras sencillas.

Desde el punta de vista SEO, el hecho de establecer un texto sencillo y claro, incluyendo la explicación de las jergas permite abarcar más posibilidades de búsqueda.

 

 

Usabilidad web: Introducción, principios y beneficios.

Para definir el concepto de usabilidad, vamos a hacerlo primero preguntando qué es la usabilidad.

Usabilidad: Ibntroducción, principios y beneficios

¿Qué es la usabilidad?

La palabra usabilidad viene del inglés usability, que hace referencia a la facilidad de uso con la que las personas pueden usar una herramienta particular, cualquier interfaz o cualquier otro objeto con la finalidad de alcanzar un objetivo determinado.

Tras esta definición, si hablamos de usabilidad web se refiere a la facilidad con la que nuestros visitantes utilizan la web. Es decir, si al realizar determinadas tareas son capaces de terminarlas.

La Organización Internacional para la Estandarización (ISO) nos da dos definiciones de usabilidad.

ISO/IEC 9126

La usabilidad se refiere a la capacidad de un software de ser comprendido, aprendido, usado y ser atractivo para el usuario, en condiciones específicas de uso.

ISO/IEC 9241

Usabilidad es la eficacia, eficiencia y satisfacción con la que un producto permite alcanzar objetivos específicos a usuarios específicos en un contexto de uso específico.

Tanto una definición como la otra, hace enfásis a la funcionalidad y a la calidad de uso, no sólo del producto, sino también de cómo los usuarios realizan tareas específicas de su uso.

 

Principios básicos de la usabilidad web

Jakob Nielsen define el concepto de usabilidad como el “atributo de calidad que mide lo fáciles que son las intefaces web”. En 1995 llevó a cabo lo que se denomina el Plan Heurístico, que consta de cuatro puntos.

  1. Identificar el problema.
  2. Definir el plan para solucionar el problema
  3.  Realizar el plan establecido,
  4. Analizar el resultado

 

En otra entrada os hablaré de Steve Krug, otro experto en usabilidad y su libro “No me hagas pensar” y Haz fácil lo imposible”

A continuación, os resumo brevemente los principios básicos de la usabilidad.

Escucha y conoce a los usuarios

Es importante saber cómo se comportan los usuarios y cuáles son sus destrezas, hay que conocer las razones por la que los usuarios utiliza tu web y saber cuál es su propósito. Así, al utilizarla conocerás sus expectativas.

Relación con el sistema

Hay que utilizar palabras que sean familiares para los usuarios. La información debe presentarse en un orden lógico y natural.

Optimiza las operaciones

  • Intenta que los usuarios lleguen a sus objetivos en el menor tiempo posible.
  • Reorganiza la web en función de las necesidades que tengan.
  • Dar libertad a la hora de trabajar, estableciendo diferentes posibilidades de acceso u opciones. También hay que darle a los usuarios la posibilidad de subsanar los errores, ya que es normal equivocarse.

Reduce la memorización

Hay que hacer visibles las opciones y acciones para que los usuarios no tengan que recordar la información del sitio web. Es muy beneficioso para las personas con dificultades intelectuales, por lo que es importante mantener la consistencia.

Diseño estético y minimalista

Elimina toda la información innecesaria. No recargues el diseño de tu sitio web. Es importante no distraer al usuario con mucha información, y además porque puede cansarse. Es mejor mostrar sólo lo justo y necesario.

En este principio basta con recordar una frase: “Menos es más”.

Gestiona los errores

Hay que ofrecer mensajes de error claros para que los usuarios sepan qué es lo que ocurre, como por ejemplo, los errores 404. Pero puede ocurrir que haya gente que no conozca qué son los errores 404, y hay que sustituirlo por un mensaje más familiar como: “Página no encontrada” y proporcionar un enlace para volver atrás y no se vayan del sitio web.

Flexibilidad y eficiencia de uso

Hay que tener un sitio web adaptado para todo tipo de usuarios, desde los novatos hasta los más expertos. Si conseguimos que el sitio lo use el mayor número de usuarios, obtendremos flexibilidad.

La teoría está muy bien, pero para poder aplicarla tenemos que saber cómo y cuándo podemos encontrarnos problemas de usabilidad.

¿Cuándo tenemos un problema de usabilidad en la web?

Vamos a poner una serie de problemas que se pueden dar:

  • Cuando hay problemas para completar una tarea
  • Cuando se saca al usuario del camino
  • Cualquier cosa que genere confusión en los usuarios.
  • Cuando se producen errores.
  • Cuando los usuarios no ven algo que deberían haber visto.
  • Cuando los usuarios dan por hecho que algo es correcto cuando no lo es.
  • Cuando los usuarios piensan que han terminado una determinada tarea y no es así.
  • Cuando los usuarios realizan una acción equivocada.
  • Cuando se malinterpreta el contenido.
  • Cuando no se entiende la navegación en la web.
  • Cuando un usuario tiene que dar muchísimos clics para llegar al objetivo.
  • Cuando hay que esperar mucho tiempo a que la página cargue.
  • Cuando en la web nos encontramos cosas que no deseamos ver.

 

Si tenemos en cuenta estos consejos a la hora de tener en cuenta los problemas de usabilidad conseguiremos una serie de beneficios, que los vamos as enumerar a continuación:

Beneficios de la usabilidad

  • Se reduce el aprendizaje y el esfuerzo.  Es beneficioso para todas aquellas personas que tengan cualquier dificultad, cuanta más precisa la información y menos haya que hacer, mejor.
  • Disminuyen los costes de asistencia y ayuda al usuario, haciendo que los usuarios se sientan más seguros. Esto hace que disminuyan los errores cometidos por el usuario.
  • Se optimiza el coste de diseño y mantenimiento.
  • Aumenta la tasa de conversión de los visitantes al sitio web, es decir, saber cuántas personas completan el proceso de una tarea determinada.
  • Para los usuarios es más fácil navegar por la web, estableciendo bien los pasos a seguir. Si no ocurre esto, el usuario se puede sentir frustrado y se va.
  • Mejora el prestigio del sitio web y la imagen de la empresa.
  • Incrementa la productividad y reduce el estrés de los usuarios.
  • Aumenta la velocidad de carga de los sitios webs. Reduciendo el peso del sitio web hace que los usuarios visiten más páginas en menos tiempo. Intentar que la web cargue en menos de cinco segundos.
  • Poner un cuadro de búsqueda para que puedan encontar más rapidámente la información que están buscando en el sitio web.
  • Establecer formularios accesibles y usables, para que los usuarios puedan completar las tareas correctamente. De nada sirve tener un buen diseño de la web, si luego los usuarios no pueden contactar con nosotros, o no pueden realizar una venta o cualquier tarea.

 

Antes de acabar, me gustaría decir qué es lo que hay saber para tener en cuenta la usabilidad. Aquí va una serie de preguntas claves sobre cómo debe ser:

  • Útil: ¿Hace algo que la gente necesita hacer?
  • Comprensible: ¿Puede imaginarse la gente cómo usarlo?
  • Recordable: ¿Tiene la gente que reaprenderlo cada vez que lo usan?
  • Eficaz: ¿Realizan el trabajo?
  • Eficiente: ¿Hace esto en una razonable cantidad de tiempo y esfuerzo?
  • Deseable: ¿Lo quiere la gente?
  • Delicioso: ¿Usarlo es agradable y divertido?

 

Si quieres continuar aprendiendo, aquí te dejo una entrada sobre cómo hacer formularios usables, y cuáles son las diferencias entre accesibilidad y usabilidad web.

 

 

 

 

Accesibilidad web con Roles ARIA.

Navegación accesible con roles WAI-ARIA

Una de las cosas importantes a tener en cuenta para la accesibilidad web es usar los roles ARIA. Para hacerles la vida más fácil a los usuarios que usan lector de pantallas hay que estructurar la navegación a través del sitio web.

roles ARIA

Ya comentamos que lo importante que es la estructuración del contenido en otra entrada y en la que di una serie de consejos.

Para orientarse a través de un sitio web, los usuarios que usan lector de pantallas van pulsando diferentes teclas para navegar por la web: listas, saltar entre encabezados, ojear las imágenes, etc.

Por ejemplo, para ojear los encabezados, siempre que tenga bien estructurados los encabezados, las personas que usen lector de pantallas, pulsarán la tecla “h” para ir navegando por ellos.

¿Cómo saltan entre los diferentes bloques de contenido?

Cuando hablamos de bloques de contenido hace referencia a la cabecera, la zona de navegación, el contenido principal, el cuadro de búsqueda y el pie de la página. Las WCAG 2.0, establece la especificación WAI ARIA, que consiste en establecer unos roles que sirven para crear contenidos web accesibles.

¿Qué es un rol?

La misión del rol es definir el papel que juegan los elementos dentro del documento web.

Landmark Roles

Los landmarks roles, que son los llamados puntos de referencia. Son los que identifican las diferentes partes o zonas de una página.

Si usamos los puntos de referencia, estaremos respetando la semántica de la estructura de la página. También es muy importante introducir los enlaces de “saltar contenido”.

Incluir el rol del elemento es muy sencillo, sólo hay que incluir el atributo
roleal elemento.

Por ejemplo, ponemos un div, seguido de la palabra role, y el rol que le asignamos al elemento en función de lo que corresponda. Un ejemplo:

 <div role=”landmark_role”>…</div>

Landmarks roles o puntos de referencia

Ahora vamos a ver los diferentes landmarks roles. Vamos a establecer cada una de las partes de un sitio para que sea accesible.

  • Banner
  • Complementary
  • Contentinfo
  • Form
  • Main
  • Navegation
  • Search
  • Region

 

Roles en HTML

Role=”banner”.

Este rol se utiliza para establecer la cabecera de la página, la que contiene el logotipo y el título principal. Sería el equivalente a la etiqueta <header> de HTML5. En la especificación de HTML5 también se admite el rol presentation.Este rol debe ser único en la página.

Role=”complementary”

Se trata de una sección complementaria del contenido principal. En HTML 5 sería el equivalente a la etiqueta <aside>. También puede tener el rol de search, note o presentation.

Role=”Contentinfo”

Es una sección que se coloca en la parte inferior de la página, lo que sería el pie de página. Su equivalente en HTML5 es la etiqueta <footer>. También puede tener el rol de presentation. Pero sólo deberíamos marcar un <footer> como contentinfo.

Role=”form”

Es el rol que se usa para establecer un formulario. En HTML5 se añadiría el rol a un elemento form o a un div. Si se trata de un formulario de búsqueda se usaría search.

Para hacerlo accesible para una persona que accede a nuestra web con un lector de pantalla hay que usar la etiqueta label.

Role=”main”

Este rol debe ser único por página. Se trata del contenido principal del documento. En HTML5 sería el equivalente a la etiqueta main.También admite el rol presentation.

Role=”navigation”

Es lo que en HTML5 se marcaría con la etiqueta <nav>, lo que sería un menú de navegación. Puede haber varios menús, por ejemplo, uno en la parte superior (el principal) y otro en la columna izquierda. También admite el rol presentation.

Si ponemos en el pie de página un menú, no hace falta marcarlo, ya lo hacemos con el rol contentinfo.

Role=”search”

Es lo que sería el cuadro de búsqueda de la página. En HTML5 no existe un elemento equivalente, por lo que se incluiría dentro de un div.

Role=”region”

Este rol, en recomendación de WAI-ARIA 1.1 pasó de los Document Structure Roles a los Landmark Roles. Se trata de una sección que contiene contenido relevante o específico. Debe tener una etiqueta label. Si una página incluye más de un region cada uno debe tener una etiqueta única.

Etiquetas con “aria-label” o “aria-labelledby”

ARIA nos proporciona unos mecanismos para agregarles etiquetas y descripciones a los elementos. Es la forma que tiene de proporcionar ayuda accesible o textos descriptivos.

Se puede hacer con los atributos “aria-label” y “aria-labelledby”.

aria-label

Con aria-label se pone la etiqueta dentro del atributo, lo que elimina el etiquetado nativo.

aria-label="Menú principal"

aria-labelledby

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

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

A tener en cuenta: Resumen

  • Usar el rol según la especificación, es decir, respetar si solo puede haber uno de un determinado tipo, o que el contenido de la zona se corresponda realmente con el rol asignado.
  • Que todo el contenido esté englobado dentro de elementos identificados con un rol, que no haya contenido que se quede huérfano. Así, el usuario de lector de pantalla puede navegar de forma segura de “landmark” en “landmark” sin perderse nada de la página.
  • Añadir “aria-label” o “aria-labelledby” para diferenciar varias zonas con el mismo rol asignado.
  • El primer contenido de una zona marcada con un landmark role debe ser lógico, por ejemplo, el primer contenido que esperas en un landmark “main” es un encabezado. Ten en cuenta que es lo primero que le anuncia el lector de pantalla de ese área.
  • Revisa en la versión móvil, si siguen teniendo sentido.

 

Criterios de conformidad de las WCAG 2.0 asociados

La inclusión de landmark roles en las páginas está relacionado con los siguientes criterios de conformidad de las WCAG 2.0

  • 1.3.1 Información y relaciones: La información, estructura y relaciones comunicadas a través de la presentación pueden ser determinadas por software o están disponibles como texto.
  • 2.4.1 Evitar bloques: Existe un mecanismo para evitar los bloques de contenido que se repiten en múltiples páginas web.
  • 4.1.2 Nombre, función, valor: Para todos los componentes de la interfaz de usuario (incluyendo pero no limitado a: elementos de formulario, enlaces y componentes generados por scripts), el nombre y la función pueden ser determinados por software; los estados, propiedades y valores que pueden ser asignados por el usuario pueden ser especificados por software; y los cambios en estos elementos se encuentran disponibles para su consulta por las aplicaciones de usuario, incluyendo las ayudas técnicas.

Accesibilidad web: Diversidad funcional auditiva.

 

diversidad funcional auditiva

Para hablar de accesibilidad auditiva en la web, lo primero que vamos a hacer es remitirnos a la Ley 27/2007, de 23 de octubre, por la que se reconocen las lenguas de signos españolas y se regulan los medios de apoyo a la comunicación oral de las personas sordas, con discapacidad auditiva y sordociegas, que en su disposición adicional duodécima establece:

Disposición adicional duodécima. Lenguas Oficiales.

Las Administraciones Públicas deberán fomentar el pluralismo lingüístico en la utilización de las nuevas tecnologías de la Sociedad de la Información, en particular en los ámbitos territoriales en que existan lenguas propias.

También hay que decir que, desde que entró en vigor la Lengua de Signos Española (LSE), el 24 de ocubre de 2007, también está equiparada a cualquier lengua del Estado.

En su artículo 14 establece lo siguiente:

Artículo 14

1. Los poderes públicos promoverán las medidas necesarias para que los medios de comunicación social, de conformidad con lo previsto en su regulación específica, sean accesibles a las personas sordas, con discapacidad auditiva o sordociegas mediante la incorporación de las lenguas de signos españolas.

2. Asimismo, los poderes públicos adoptarán las medidas necesarias para que las campañas de publicidad institucionales y los distintos soportes audiovisuales en los que éstas se pongan a disposición del público sean accesibles a estas personas.

3. Se establecerán las medidas necesarias para incentivar el acceso a las telecomunicaciones en lengua de signos española.

4. Las páginas y portales de Internet de titularidad pública o financiados con fondos públicos se adaptarán a los estándares establecidos en cada momento por las autoridades competentes para lograr su accesibilidad a las personas sordas, con discapacidad auditiva y sordociegas mediante la puesta a disposición dentro de las mismas de los correspondientes sistemas de acceso a la información en la lengua correspondiente a su ámbito lingüístico.

Una vez visto esto, vamos a explicar la importancia de comprender lo que necesitan las personas con problemas auditivos.

A este tipo de usuarios, al tener déficit auditivo les cuesta comprender el habla en la comunicación y por lo tanto, el proceso de la información.

Por ello, a la hora de diseñar webs se han de tener en cuenta varios aspectos.

¿Cómo diseñar sitios web para personas con dificultades auditivas?

Las tareas cognitivas a tener en cuenta son las siguientes.

Tarea de búsqueda visual

Consiste en buscar información o elementos en la pantalla. En las búsquedas visuales que implican palabras, por ejemplo en un menú, los sordos tienen dificultades.

En este caso, es importante apoyar las palabras con iconos cuando se pueda. Y si no se puede, tenemos que tener en cuenta su vocabulario para facilitarles las cosas. Hay que exponer o formular palabras para unas determinadas acciones, y usar esas palabras.

Tareas de atención dividida

Las páginas web tienen mucha información que se nos presenta de golpe, y hay que procesarla de manera concurrente, es decir, dividiendo nuestra atención.

Para conseguir este objetivo, primero hay que saber cómo se procesa la información las personas sordas. Para ello, tenemos que conocer el principio de compatibilidad estímulo/código de procesamiento.

En primer lugar, para entender mejor de qué hablamos, vamos a explicarlo.

En la web hay diferentes formatos en los que se puede presentar la información:

  • Por palabras escritas, para la construcción de textos o artículos de investigación.
  • Mediante habla, insertando vídeos grabados, un sistema de lectura de voz, o un audio.
  • Sonidos e imágenes.

 

Las personas oyentes tenemos dos códigos para procesar la información: El verbal y el visoespacial. El verbal con las palabras escritas y el habla, y el visoespacial con los sonidos y las imágenes.

Sin embargo, las personas sordas procesan la información con las palabras escritas y las imágenes, es decir, su procesamiento quedaría reducido por sus limitaciones. Sólo accederían a la información mediante texto e imágenes.

Tareas de navegación

Las personas, cuando tienen algún tipo de limitación, siempre desarrollan capacidades para sacar provecho de lo que tienen. En el caso de las personas sordas tienen muy desarrolladas las habilidades visoespaciales, por lo que son mejores a la hora de navegar.

La tarea de navegación es una tarea espacial, tanto de percepción como de memoria, ya que se pueden recordar los pasos hasta donde se ha llegado: Volver atrás, seleccionar enlaces, etc. Sin estas habilidades visoespaciales las personas sordas se desorientan.

Por todo esto, se recomienda poner mapas web, que les son de de gran ayuda.

Tareas de lectura y comprensión de textos

Las personas sordas tieen problemas con la lectura, ya que ellos se comunican con la lengua de signos. Por ello, al diseñar para estas personas hay que tener en cuenta varias cosas:

  • Escribir directamente lo que se quiere decir, sin exceso de palabras.
  • Usar un vocabulario familiar.
  • Enumerar y separar las instrucciones y los procesos.
  • Resaltar puntos y palabras claves en negrita.
  • Evitar oraciones subordinadas, artículos y pronombres.
  • Evitar las frases negativas.

Tareas de manejo de ratón y escritura

La tarea del manejo del ratón es una tarea sencilla porque lo manejan igual que las personas oyentes. Por otro lado, la escritura les es un poco más difícil. Si a eso le añadimos que no tienen la posibilidad de aprender la gramática y el vocabulario es mucho más complicado.

A la hora de diseñar para una persona es más fácil activar una casilla de verificación que escribir un comentario.

Tecnicas SMIL

En las WCAG 2.0, existen unas técnicas que se utilizan para describir presentaciones multimedia, es decir, combinar texto con imágenes, audio y vídeo. Son las técnicas SMIL.

Las personas con sordera total necesitan de la lengua de signos para comunicarse. Las técnicas SMIL establecen los criterios relacionados con los audios y vídeos.

Los criterios de accesibilidad a tener en cuenta para llevar a cabo estas técnicas son:

1.2.2 Subtítulos (grabados)

1.2.4 Subtítulos (en directo)

1.2.3 Audiodescripción o Medio Alternativo (grabado)

1.2.5 Audiodescripción (grabada)

1.2.7 Audiodescripción ampliada (grabada)

 

1.2.6 Lengua de señas (grabada)

SM13: Proporcionar interpretación en lengua de señas a través de una pista de vídeo sincronizada mediante SMIL 1.0

SM14: Proporcionar interpretación en lengua de señas a través de una pista de vídeo sincronizada mediante SMIL 2.0

Lengua de Signos

La Lengua de Signos no es universal, por lo que debe adaptarse al público en cuestión.

En los vídeos, se tienen que ver los brazos, las manos y los gestos del cuerpo para que la conversación se interprete y resulte legible. Es preferible que sea una persona/intérprete a un avatar.

Pero también existe una herramienta muy buena para hacer un poco más accesibles los vídeos para las personas sordas. Se trata de la herramienta TextoSign, qiue es un traductor automático de texto a Lengua de Signos, Se pueden exportar a vídeo y se pueden integrar en los sitios webs.

Para finalizar, tengo que mencionar que en España existen alrededor de un millón de personas sordas, de las cuales cuatrocientas mil usan lengua de signos. En España sólo hay un intérprete de signos por cada 221 personas sordas. En otros países europeos, la proporción es un intérprete por cada diez personas sordas.

Aquí se ve de manera clara el gran problema que tienen las personas sordas a la hora de acceder a la web, y a la información.

Subtítulos

Para las personas sordas o con problemas de audición, los subtítulos son muy importantes.

El subtitulado para personas sordas no solo debe transcribir el diálogo o la narración, sino también la información importante como los efectos de sonidos: ruido, risas, etc.

Cuando en el vídeo hablan dos o más personas se debe distinguir a los hablantes, utilizando un color para cada personaje, y mantenerlo.

Para evitar confusiones entre los personajes y que la conversación no se pueda diferenciar por etiquetas o por colores, es recomendable poner guiones. También se pueden distinguir poniendo entre paréntesis el nombre de la persona.

Los subtítulos pueden ser abiertos, es decir, que estén siempre disponibles. o pueden ser cerrados, que pueden ser activados o desactivados por los usuarios.

Transcripciones

Las transcripciones son también importantes para todas aquellas personas que no puedan seguir los subtítulos y necesiten leer el texto sobre lo que dice más detenidamente y a su ritmo.

Puede presentarse simultáneamente con el contenido audiovisual o de manera independiente.

 

Entradas relacionadas:

Se puede leer más información sobre la diversidad funcional auditiva en la entrada: “Accesibilidad web: Confederación Estatal de Personas Sordas”

 

Acccesibilidad web: ¿Cómo hacer formularios accesibles?

Hace unos días hablé sobre consejos para llevar a cabo la accesibilidad web en WordPress, y comenté que había que hacer los formularios accesibles.

El tema de los formularios es muy amplio, por eso he decidido hacer una entrada dedicada a ello.

formularios accesibles

Para hacer formularios accesibles hay que saber etiquetar correctamente los controles del formulario. Para ello, hay que respetar la semántica, que es lo que va a permitir que los campos sean accesibles.

Campos de formulario

Cada campo de formulario está asociado a un control, que determinará qué tipo de campo es.

Para establecer la relación entre la etiqueta y el control del formulario, tal y como indica la técnica H44, hay que asociarla con el atributo forcuyo valor debe ser igual al id del control del formulario. Sólo una etiqueta puede estar asociado a cada elemento de forma única, el id debe ser único en la página.

Campos de tipo Texto:

<label for="name" > Nombre (obligatorio) </label>
<input type="text" name="nombre" id="name"

El elemento label debe usarse con los elementos <textarea> <select> y los inputs de tipo "text", "checkbox", "file" y "password."

El elemento label no debe usarse con los input de tipo imagen, porque estos se etiquetan con el atributo alt, como indica la técnica H36.

Tampoco debe usarse en los input de tipo "submit" o "reset", los cuales se etiquetan con el atributo value.

<input type="submit" name="Enviar" value="Enviar" / >

Tampoco se usa con el elemento "button", donde ya se usa el contenido como etiqueta.

<button type="submit" name="Enviar">Enviar</button>

Tipo textarea: Es la caja que aparece cuando vamos a envíar un formulario y escribimos nuestra consulta o dudas al respecto.

<label for="address">Pon tu dirección:</label><br />
<textarea id="address" name="addresstext"></textarea>

Campos con opciones: Para establecer campos donde se den opciones a elegir, a la hora de hacerlos accesibles es necesario contar con dos etiquetas, para que los campos sean reconocidos por los dispositivos de apoyo, como el lector de pantallas. Estas etiquetas son: <fieldset></fieldset>, que nos servirá para agrupar los elementos dentro del campo. Y usar la etiqueta <legend></legend> para poner un título al campo.

Para trabajar los campos con opciones existen dos tipos: de tipo checkbox, y de tipo radio.

Tipo checkbox: Estos campos permiten seleccionar más de una opción a la hora de elegir.

<fieldset>
<legend> Selecciona el tipo de envío </legend>
<p><label> <input type="checkbox" name="deliverytype" value="urgente" checked > Urgente </label></p>
<p><label> <input type="checkbox" name="deliverytype" value="acuse" > Acuse </label></p>
<p><label> <input type="checkbox" name="deliverytype" value="contrareembolso" > Contrareembolso </label></p>
</fieldset>

Y el otro tipo de campo de opciones es el de tipo radio. Se usa igual que el del tipo checkbox, pero hay que que especificar que es de tipo radio. Este tipo de campos sólo permite marcar una sola opción a la hora de elegir.

<fieldset>
<legend> Selecciona una prioridad </legend>
<p><label> <input type="radio" name="priority" value="baja" checked > Baja </label></p>
<p><label> <input type="radio" name="priority" value="media" > Media </label></p>
<p><label> <input type="radio" name="priority" value="alta" > Alta </label></p>
</fieldset>

El uso de estas etiquetas viene especificada en la técnica H71 de las WCAG 2.0.

Campos de selección: Asociar la etiqueta <label></label> para el título del grupo y el campo (select) para agrupar las opciones, y (option) para poner cada uno de los valores a seleccionar.

<label for="favteam">Elige tu equipo favorito:</label>
<select id="favteam" name="select">
<option value="1">Real Madrid CF</option>
<option value="2">FC Barcelona</option>
<option value="3">Atlético de Madrid</option>
<option value="4">Valencia CF</option>
<option value="5">Sevilla FC</option>
<option value="6">R. Betis Balompie</option>
<option value="7">Málaga CF</option>
<option value="8">RC Deportivo de La Coruña</option>
<option value="9">RCD Espanyol</option>
<option value="10">Villareal CF</option>
</select>

En la técnica H89, se especifica que hay que usar el atributotitle que sirva como ayuda a la hora de rellenar el formulario.

<label for="direccion">Dirección</label>
<input id="direccion" 
title="Address example: 101 Collins St, Melbourne, Australia" name="direccion" size="30" type="text" value="" />

En la técnica H90 se especifica que hay que indicar los controles de formulario que es obligatorio rellenar y para una buena presentación, en los campos que sean obligatorios, es preferible poner un texto antes del campo, en vez del asterisco.

Formulario con texto adyacente

Hablando de campos obligatorios, la técnica ARIA2, establece que los campos obligatorios hay que identificarlos con la propiedad aria-required.

   <label for="fname">First name: </label>
    <input type="text" id="fname" aria-required="true" />
    [required]

Otra técnica que se puede usar y es muy importante es la técnica H85, que establece la importancia del elemento optgroup, que permite agrupar las diferentes opciones (options) dentro de un campo (select)

<label for="food">¿Cuál es tu comida favorita?</label>
<select id="food" name="food">
<optgroup label="Frutas">
<option value="1">Manzanas</option>
<option value="3">Plátanos</option>
<option value="4">Peras</option>
<option value="5">Naranjas</option>
</optgroup>
<optgroup label="Verduras">
<option value="2">Zanahorias</option>
<option value="6">Pepinos</option>
<option value="7">Lechuga</option>
</optgroup>
<optgroup label="Productos de panadería y confitería">
<option value="8">Tarta de manzana</option>
<option value="9">Pastel de chocolate</option>
<option value="10">Merengue</option>
</optgroup>
</select>

Otra técnica a tener en cuenta es la G205, que establece que no se debe poner un formulario basado en el color, ya que puede dar problemas de accesibilidad a muchos usuarios, principalmente a personas que tengan problemas de ceguera al color.

Por otro lado, en la técnica G89, se explica que para evitar errores, hay que indicar a los usuarios qué tipo de formato deben aplicar. Por ejemplo, en un campo de tipo fecha:

<label for="date">Fecha (dd-mm-yyyy)</label>
<input type="text" name="date" id="date" />

Cuando en algunos casos no se pueda usar el elemento label, las WCAG 2.0 permiten utilizar el atributo title para etiquetar los controles del formulario e identificar su propósito. Este es el caso de los campos en los que hay que introducir datos por partes, como una fecha o un número de cuenta, tal y como indica la técnica H65.

<fieldset>
<legend>Fecha de nacimiento(dd/mm/aaaa):</legend>
<input type="text" id="dia" name="dia"
title="Día (dos dígitos)"/> /
<input type="text" id="mes" name="mes"
title="Mes (dos dígitos)"/> /
<input type="text" id="año" name="año"
title="Año (cuatro dígitos)"/>
</fieldset>

En la técnica G5, se especifica que no hay que poner límite de tiempo a los usuarios para rellenar los formularios. Y en el caso de que exista ese límite, poner un mecanismo para los usuarios puedan ampliar el tiempo, como establece las técnica G133.

También en la técnica G162, se indica cómo deben ser colocadas las etiquetas de los campos. Se indica que se deben colocar encima del campo o a la izquierda del campo, con los elementos textarea y select y con los input de tipo: "text","checkbox", "radio", "file" y "password".

En la técnica G167, se especifica la utilización de un botón al lado del campo del formulario para definir su finalidad, como es el caso del cuadro de búsqueda. En este caso, este campo identifica una región de una página, landmarks roles (o puntos de referencia), por lo que hay que usar el rol ARIA correspondiente para que sea detectado por los dispositivos de apoyo.

<div role="search">
<label for="busqueda">
<input id="busqueda" type="text"></label>
<button type="submit">Buscar</button>
</div>

Es muy importante tener en cuenta los Roles ARIA.

En la técnica H84 especifica que cuando tenemos que elegir entre varias opciones para navegar a una página diferente, hay que poner un botón para que el usuario lo elija libremente.

<label for="idioma">Selecciona un idioma</label>
<select name="idioma" id="idioma">
<option value="1">Español</option>
<option value="2"> Italiano</option>
<option value="12">Inglés</option>
</select>
<input type="button" name="submit" value="Cambiar de idioma">

Por todas estas razones, es importante tener en cuenta la accesibilidad de los formularios, para facilitar la vida a muchas personas.

Pero también existen otras opciones para aquellas personas que no se atrevan a usar código, lo pueden hacer mediante un plugin. Normalmente en WordPress, para establecer un formulario de contacto usamos el plugin Contact Form 7, pero lamentablemente los campos no son accesibles por defecto.

Para solucionar este problema, tenemos que instalar el plugin Contact Form 7 Accessible Defaults. Este plugin sí tiene los campos accesibles por defecto.

 

Entradas relacionadas:

Si quieres tener más información acerca de los formularios puedes leer la entrada “Usabilidad web: Cómo hacer formularios usables?”

Y si quieres aprender más sobre ellos, lee la entrada Mensajes de error en los formularios”. Otra entrada interesante para leer es “Cómo hacer un buen uso del marcador de posición en los formularios.”

Accesibilidad web: Para quién se hace y qué beneficios aporta

Después de ver qué es la accesibilidad web, por qué es importante y cómo cumplirla vamos a ver la última parte de las cuatro grandes preguntas: ¿Para quién se hace? y veremos los beneficios que aporta.

¿Para quién se hace?

La accesibilidad en las webs se hace para todas las personas porque todos usamos la web. Hay que tener en cuenta que en España según el INE (Instituto Nacional de Estadística), somos cerca de 4 millones de personas, así que si quieres ampliar las visitas de tu web tendrás que pensar en las personas con diversidad funcional. Para ello, vamos a enumerar los cuatro grandes grupos diferenciados:

Diversidad Funcional Motriz: Personas con dificultad en los movimientos y para usar las manos, personas con espasmos musculares, así como problemas de habla.

Algunas diversidades funcionales motrices son: la  atrofia muscular, la Parálisis Cerebral Infantil, Parkinson, Esclerosis Lateral Atrófica, Espina Bífida, Esclerosis Múltiple, etc.

A muchas de estas personas, entre las que me incluyo, les cuesta manejar el ratón y el teclado.

Diversidad Funcional Auditiva: Hay personas que tienen pérdida auditiva, por lo que para comunicarse y vivir en sociedad necesitan unos audífonos. Y también hay personas con sordera total que se comunican mediante la lengua de signos.

Diversidad Funcional Visual: Hay personas que tienen problemas de visión, que puede ser de múltiples formas:

  • Baja visión. Hay miles de problemas de visión, como la presbiscia, el daltonismo, visión nocturna, retinosis pigmentaria, degeneración macular…
  • Ceguera total. Personas con visión nula. Estas personas en su día a día para acceder a la web utilizan lectores de pantalla y/o magnificadores de pantalla para navegar por la web. Hay personas que usan estos dispositivos de apoyo y prefieren leer la web impresa, por tanto, tiene que haber una opción para poder imprimirla.

Diversidad Funcional Intelectual: Personas que presentan dificultades a nivel cognitivo, como las personas afectadas por dislexia, Sindrome de Down, afasia, autismo, etc.

Es por esto, que a la hora de diseñar siempre hay que pensar en las preguntas claves.

Preguntas claves para llevar a cabo la accesibilidad web

  • ¿Para quién vamos escribir?

Tienes que pensar que hay un porcentaje de usuarios que acceden a tu web, que tienen diversidad funcional y que son (somos) clientes potenciales para tu web, blog o negocio. Con lo cual es importante que escribas para tu público en función de los objetivos de tu empresa.

  • ¿Entenderá lo que escribo?

Es muy importante escribir de una manera sencilla y clara. Hay personas que tienen dificultades en la compresión de la lectura y es importante tenerles en cuenta. Hay que cuidar a las personas que nos leen.

  • ¿Tendrá problemas con el color?

Hay personas daltónicas, las cuales les cuesta distinguir los colores. Debido a su problema de visión, tienen más difícil poder percibir el contenido si no se usan los colores de la manera adecuada para ellos.

  • ¿Y el tamaño de la letra?

Esta pregunta tiene mucha relación con la pregunta anterior. Hay personas que sufren de un problema de ceguera grave, que si no lo tenemos en cuenta, es un problema. Es importante poner una tipografía legible y un tamaño de letra adecuado, de acuerdo a las WCAG 2.0.

  • ¿Escuchará los vídeos?

Este es uno de los problemas más graves que las personas con diversidad funcional auditiva tiene. En este grupo me incluyo. Pensemos que cuando se publica un vídeo sin subtítulos perdemos la información importante del vídeo. Y los audios si no tienen una transcripción, la persona que te esté visitando se va.

Para ampliar más información, puedes leer la entrada “Accesibilidad web: Diversidad funcional auditiva.”

  • ¿Usará el ratón?

Hay muchas personas que debido a dificultades en sus manos o por problemas de visión no pueden llevan a cabo la interacción vista-mano. La solución para estos casos, es hacer las opciones accesibles mediante teclado.

Si sigues todas las pautas que te he contado, podrás llevar a cabo tu proyecto lo más accesible y usable posible, teniendo en cuenta las necesidades de las personas que visiten el sitio web.

Una vez establecidos los diferentes grupos y sus diferentes soluciones en accesibilidad web, vamos a ver qué beneficios nos aporta la accesibilidad web.

Una web accesible proporciona muchos beneficios:

  1. Mejora la usabilidad de la web para todo tipo de usuarios, porque si una web no es accesible no es usable, y por lo tanto, se originan problemas para un importante número de usuarios.
  2. Permite mejorar el acceso a los contenidos Web a las personas mayores, que se debe el deterioro de las condiciones físicas debido al envejecimiento y cuanto más fácil sea acceder para estas personas, mucho mejor. Y más, teniendo en cuenta que la población está envejeciendo.
  3. Mejora los resultados en los buscadores, es decir, mejora el posicionamiento SEO. (Search Engine Optimization).
  4. Incrementa el soporte para el mercado internacional. Se añaden subtítulos para los diferentes países, así como los contenidos, etc.).
  5. Ayuda a reducir la llamada brecha digital, permitiendo así que a un porcentaje de la población que no tengan conocimientos de las TIC (Tecnologías de la Información y de la Comunicación), puedan tener relación con ellas.
  6. Refuerza positivamente la imagen empresarial, lo que permite diferenciarse de la competencia dando acceso a tu web a un mayor número de personas (3,5 millones de personas en España demandan servicios y entornos accesibles). Y cada vez seremos más. Por ello es importante tenernos en consideración.
  7. Cumples con la legislación de accesibilidad:
    • Ley 34/2002, de 11 de julio de 2002, de servicios de la sociedad de la información y comercio electrónico (LSSICE).
    • RDL 1/2013 de 29 de noviembre de 29 de noviembre, por el que se aprueba el Texto Refundido de la Ley General de derechos de las personas con discapacidad y de su inclusión social.
    • Norma UNE 139803:2012 Requisitos de Accesibilidad para el Contenido Web
  8. Es mucho más fácil de usar y de actualizar, puesto que se disminuye el coste de desarrollo y mantenimiento, así como la carga de las páginas web: El coste de desarrollar y mantener una página web accesible es menor que frente a una no accesible, ya que una página web accesible es una página que no tiene errores, que está bien estructurada y que está bien hecha.

 

Ventaja importante de la accesibilidad web: la sonrisa de las personas

Una vez que te has parado a pensar en la felicidad de una persona al poder acceder a tu web, te pregunto:

¿Te hacen falta más razones para llevar a cabo la accesibilidad web en tu sitio?

Te animo a lo que hagas, porque es muy importante. La accesibilidad web nos beneficia a todos.