Suscripción: Crear cuenta en Pocket con Firefox

Introducción

Pocket es una herramienta que te permite organizar y guardar archivos que dispongas para así tenerlos y poder abrirlos más tarde. También sirve para archivar los sitios web que visitas.

Suscripción: Cómo crearse una cuenta en Pocket y cómo usarlo

Cómo usar Pocket y registrarse

Para usar Pocket y posteriormente registrase, podemos hacerlo a través de una cuenta de Google o con nuestro correo electrónico.

Establecemos nuestro correo electrónico y acto seguido introducimos nuestra contraseña para entrar en Pocket.

Una vez dentro podemos organizar los diferentes artículos que quueremos guardar y es una herramienta muy útil porque se sincroniza con todos los dispositivos. Se puede hacer desde un dispositivo Android o desde un Iphone.

Guardar un artículo en Pocket desde el Panel de Control

En la opción «Guardar un artículo en Pocket» se puede guardar una URL, por ejemplo. Normalmente se suele hacer con un artículo determinado, porque guardar la URL de una web no tiene sentido.

Hay que realizar dos sencillos pasos:

  1. Guardar la URL determinada, la web que se esté viendo o que queramos amacenar.
  2. Visualizarla.

Pasos para guardar y visualizar artículo en Pocket

En el artículo, justo debajo aparece una serie de opciones en el menú de tres puntos que te permiten hacer realizar una acción determinada: Guardar, Eliminar, Editar Etiquetas, Favoritos y otros.

Opciones del menú de Pocket

A la hora de acceder al artículo cada persona puede hacerlo de la manera que le resulte más cómodo. Para la lectura en accesibilidad es muy importante leer sin distracciones.

Hay gente que prefiere leerlo desde Pocket y otros prefieren leerlo en la misma página web. Si queremos verlo desde la web pulsamos en «Ver original» y ya se te abre la fuente original del artículo. Es una forma sencilla y fácil de acceder a nuestros artículos.

Opción: "Ver Original"

Para continuar realizando la entrada, es importante tener en cuenta una serie de trucos que te permitirán facilitar el manejo de la herramienta.

Trucos para usar en Pocket

  1. El primer paso es guardar enlaces.
  2. Crear etiquetas para ordenarlos por temáticas y poder encontrarlos más fácilmente.
  3. Editar o eliminar por grupos. Si tenemos que eliminar muchos artículos, la opción más recomendable es eliminar por grupos, puewsto que si lo hacemos de uno en uno es más cansado.
  4. Al copiar un enlace aparece automáticamente.
  5. Personalización de lectura y fuentes: Esta opción permite a las personas con problemas de visión y dislexia cambiar el tipo de fuente y personalizar la lectura para gozar de una buena lectura.
  6. Modo oscuro u opción de alto contraste: Esta opción es recomendable para las personas con baja visión.
  7. Uso del volumen: Para las personas con problemas auditivos es necesario poder usar las opciones de volumen y así ajustarlos a sus necesidades. Pueden haber personas que desde el móvil no oigan bien y tengan que hacerlo desde el ordenador. Cualquier opción es igualmente válida dependiendo de la persona usuaria.
  8. Escuchar los artículos en segundo plano: Esta opción es muy importante para las personas ciegas. La herramienta Text to Speech permite realizar la lectura del artículo mientras se va escuchando.
  9. Copia de seguridad offline. Para no quedarnos sin espacio en el dispositivo hay que realizar que quedarse con lo importante y así poder navegar sin conexión. Esa información se puede guardar de manera limitada o por completo.
  10. Organiza las listas y suscripciones: Para tener a la vista los artículos es importante organizarlos, de los más nuevos a más antiguos. Aparte de organizar listas es interesante la opción del texto resaltado, que nos permite marcar un trozo del texto.
  11. Usa las redes sociales para compartir tus artículos.
  12. Crea un feed RSS de los artículos: Para poder un feed RSS hay que hacerlo creando nuestro propio nombre de usuario y contraseña, según si tienes artículos por leer o si quieres la lista de todos los artículos.  Un feed RSS es un archivo de lo que se publica en una web. Cada elemento se llama ítem. Contiene el título, resumen y un enlace, así como la fecha de publicación o la autoría del artículo en cuestión. En WordPress esa opción aparece en Ajustes > Lectura, para establecer los 10 últimos posts, que es el que tiene por defecto.
  13. Usar Pocket sin conexión.

 

 

 

Accesibilidad web: Los captchas no son accesibles

Introducción

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

Accesibilidad web: Los captchas no son accesibles

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

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

Introduciendo el mal

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

Aquí hay uno:

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

Los captchas son seriamente inaccesibles

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

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

Captcha donde aparecen animales pintados

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

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

captcha para resolver un problema matemático

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

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

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

captcha para seleccionar las fotos que contengan flores

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

captcha con letras y caracteres ilegibles

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

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

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

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

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

Razones por las cuales los captchas no son buenos

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

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

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

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

Reemplaza el captcha con una alternativa accesible.

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

captcha

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

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

Introducción

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

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

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

x y arroba para lectores de pantalla

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

Las normas para evitar el masculino genérico:

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

Ejemplos:

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

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

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

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

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

Ejemplos:

Unos se matricularon y no pagaron tasas (sexista).

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

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

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

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

«Bienvenidos a mi web de accesibilidad y usabilidad»

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

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

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

Uso de la x y la arroba para lectores de pantalla

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

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

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

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

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

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

Otra es la fórmula de contacto.

Y aquí, las alternativas que hay:

Usar la forma de contacto sin lenguaje sexista

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

Fórmula de acceso a un área personal

Análisis de otro tipo de lenguajes no textuales

empleo de lenguaje no sexista en lasimágenes

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

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

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

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

zona de usuarios de la Escuela Oficial Idiomas Pamplona

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

problema de usabilidad en el formulario de contacto de la EOIP

 

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

agencia tributaria

Y la forma de contacto tampoco es correcta:

contacte

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

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

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

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

Pruebas con NVDA

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

En cada una de las palabras dice: «Error de ortografía»

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

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

Números de teléfono

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

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

Emoticonos

Los emoticonos son carácteres tipográficos, por lo que, cuando usamos las redes para expresar emociones a través de ellos, estamos fastidiando a la persona que usa lector de pantalla. Imaginaos que ponemos 4 veces el icono de las manos aplaudiendo, pues el lector lee 4 veces «manos aplaudiendo». Es muy pesado y hace que la persona deje de leer.

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

 

 

 

 

 

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: 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: 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

Usabilidad web: Principios de diseño inclusivo

Introducción

Los principios de diseño inclusivo toman como elemento principal a los usuarios.

La base es diseñar teniendo en cuenta las necesidades de las personas con diversidad funcional permanente, temporal o contextual.

Van dirigidos a toda aquella persona que tenga que ver con el mundo del diseño y el de desarrollo de sitios web: diseñadores, profesionales de la experiencia del usuario, programadores, managers de productos, innovadores, artistas, pensadores…

Principios del diseño inclusivo

Los principios

Proporciona experiencias comparables

Asegúrate que la interfaz permite hacer tareas de manera conveniente para todos, sin perder la calidad del contenido.

Sea por circunstancias, contexto, o decisión propia, las personas son diversas. Usan métodos y herramientas distintas para interactuar con una aplicación. Lo que la interfaz ofrece a cada uno debe ser comparable en valor y calidad.

Ejemplos:

  • Contenido alternativo: Un alternativo básico, sea texto «alt» o una transcripción, descripción auditiva, o lenguaje de signos, hacen contenido accesible.
  • Caracteristicas de ergonomía: Proporcionar subtítulos sincronizados y poder personalizarlo hace un video accesible.
  • Establecer notificaciones y mensajes: Por ejemplo, para los usuarios ciegos aplicar los atributos ARIA

 

Considera la situación del usuario

Asegúrate de que la interfaz proporcione una una buena experiencia de usuario en cualquier situación.

Hay usuarios principiantes, los hay expertos, en el trabajo, en casa, viajando o bajo presión. Cada situación tiene su impacto. Para los que ya tienen dificultad en interactuar, por ejemplo por personas con diversidad funcional motriz, o si existen problemas con el uso del teclado, este impacto puede hacer la interfaz aún más difícil de usar.

Ejemplos:

  • Contraste de colores: Usar contrastes altos.
  • Ayuda contextual: La ayuda contextual es importante para los usuarios. Siempre es bueno esa información adicional que nos ayuda a saber qué estamos haciendo, por ejemplo, cuando estamos ante un formulario de inscripción y especificamos que el campo de «Contraseña» tenga 8 caracteres. Es muy importante para los usuarios que usen lector de pantalla.
  • Subtítulos: Cuando estemos en un lugar público y no queremos molestar a nadie es importante poner subtítulos y quitar el volumen.

Sé consistente

Usa convenciones, de manera consistente.

Los componentes de la interfaz reflejan patrones establecidos y conocidos que resultan obvios en funcionalidad, comportamiento, aparencia y estilo escrito. Se deben decir las cosas de la misma manera y los usuarios deben poder realizar acciones similares.

  • Patrones de diseño coherentes: Usa patrones de diseño consistentes para reforzar la comprensibilidad y familiaridad.
  • Consistencia de lenguaje: Usa lenguaje sencillo de manera consistente, incluso texto importante para usuarios de lectores de pantalla como el texto alternativo, encabezados, y etiquetas de controles. También es importante usar elementos del estilo como un resumen, bien señalado como tal, al principio de secciones, o destacar términos definidos en listados.
  • Arquitectura consistente: Usa arquitectura consistente en plantillas de paginas, para facilitar navegación y comprensión rápida.

 

El usuario manda

El usuario es que el manda. Debe poder interactuar con el contenido de la manera que le convenga.

Tiene que tener la posibilidad de trabajar para cambiar las características de la interfaz, como orientación de la pantalla, tamaño del texto y el contraste de colores.

Ejemplos:

  • Desplazamiento: El ‘Desplazamiento Infinito’ (cuando se agrega contenido automáticamente) puede implicar problemas para usuarios que usan el teclado, porque nunca pueden pasar el flujo de contenido. Permite desactivarlo poniendo un botón para actualizar.
  • No ponga animaciones: Para algunos usuarios pueden distraer y marear. Si empiezan automáticamente, deben de poder pararlas.
  • Permite hacer zoom: Hay muchas razones para querer hacer zoom en una pagina. Asegúrate de que el contenido no se esconde cuando se hace zoom.

 

Ofrece opciones

Proporciona diferentes maneras de cumplir las tareas.

Normalmente hay más de una manera de cumplir una tarea, y no se puede saber cual será la preferida por un usuario. Proporciona alternativas para la maquetación de información, y los procesos para cumplir tareas. Ofrece opciones que permita al usuario elegir la que le conviene en cada contexto.

Ejemplos:

  • Diversas maneras para hacer una acción: Ofrece maneras distintas para hacer una acción. Por ejemplo para borrar un objeto,se puede permitir una interacción directa, sea un gesto en pantalla táctil o una tecla de atajo, así que seleccionar objetos y tocar una botón de borrar – cómo se ve en clientes de correo.
  • Maquetación:  Hay usuarios quienes prefieren imágenes grandes, o contenido en bloques pequeños.
  • Alternativas accesibles: Hay muchas maneras de presentar la información. Esta información que presentamos, debe favorecer y debe estar disponible para todos los usuarios. Esas alternativas pueden ayudar a todos los usuarios, no sólo a un grupo determinado, (por ejemplo a los usuarios que usan lector de pantalla).

 

Prioriza el contenido

Ayuda al usuario a enfocarse en tareas, funciones y contenidos importantes para destacarlos en el contenido y la maquetación.

Puede ser más difícil entender una interfaz si las partes más importantes no se destacan. Un sitio puede ofrecer mucha información y funcionalidad, pero debe permitir al usuario enfocarse en una cosa a la vez. Identifica la función clave de la interfaz, el contenido y los controles que se dirigen a esta función.

Ejemplos:

  • Enfoque en la tarea actual: Muestra funcionalidades y contenido cuando son relevantes, no todos al principio.
  • Prioriza tareas: Ejemplo: Una app de correo permite principalmente leer y escribir mensajes. Entonces, haz que el botón para enviar un nuevo correo este siempre disponible. Igualmente, pon la bandeja de entrada antes de otros listados como los correos enviados o el spam. Es decir, dar prioridad a las acciones más importantes.
  • Ordenar el contenido: Es muy importante ordenar el contenido, tanto visualmente como en el orden del contenido en el código fuente.
  • Usa un lenguaje claro: En el texto de los enlaces, encabezados, y botones usa un lenguaje sencillo y claro, poniendo primero la información más importante. Eso facilita el escaneo del texto, sea visualmente o por audio, por ejemplo con un lector de pantalla.

 

Agrega valor

Considera el valor de funciones y características, y cómo mejoran la experiencia de usuarios diversos.

Funciones y características deben mejorar la experiencia del usuario, proporcionando maneras eficaces de encontrar e interactuar con el contenido. Considera funcionalidades de dispositivo cómo interreacción por voz, géolocalizacion, la camera, o vibración, y cómo integración con dispositivos conectados pueden ofrecer opciones más convenientes.

Ejemplos:

  • Integración con dispositivos conectados, o «pantalla segunda»: Usa la interacción por voz para controlar contenido multimedia o buscar contenido, que ayuda a la gente que puedan tener dificultades con otras interfaces.
  • Integración con funcionalidades de la plataforma: Utiliza la vibración para que salten las notificaciones para personas con dificultades auditivas, y geolocalización para facilitar el uso de servicios locales para usuarios con dificultades para moverse.
  • Facilita tareas: Permite ver contraseñas para que los usuarios sepan si las han escrito bien. Permite la identificación por huella digital así como por contraseña.