Uninstallme

El uso de iconos de banderas para la elección de idioma en un sitio web plantea una serie de problemas, tanto de usabilidad como de accesibilidad, que no lo hacen recomendable. Si buscamos un poquito en Internet y le damos un par de vueltas podemos ver que no es una buena idea y sin embargo, su uso es tan frecuente que es fácil caer en este error de diseño.

Algunos problemas del uso de banderas

Usar sólo iconos de bandera (sin texto)

Como dice Roger Johansson en Indicating language choice: flags, text, both, neither?, usar sólo una bandera es un big no-no! (Me gusta esta expresión!)

Anteriormente comenté en este blog los problemas de usar sólo iconos como enlaces, llegando a la conclusión de que los iconos siempre deberían ir acompañados de un enlace textual, o mejor dicho, ser un complemento de este y no el elemento que transmita la mayor parte de la información.

Poniéndonos en el caso de las banderas, ¿qué ocurre si un usuario es daltónico y confunde los colores de una bandera o si simplemente desconoce a qué país representa una bandera o incluso qué idioma se habla en determinado país? Y no hace falta irse a pensar en usuarios con discapacidades de ningún tipo, simplemente en la cantidad de países cuya bandera usa tres bandas de color rojo, azul y blanco.

Como decía Johansson, a big no-no!

Icono de bandera acompañada del nombre del idioma en ese mismo idioma

Esta opción es algo mejor que la anterior pero sigue planteando problemas, como por ejemplo, el de que algunos usuarios se puedan sentir ofendidos. ¿Le agrada a un estadounidense ver su idioma representado con la bandera de inglaterra o viceversa? Pues como comentan en You should never use flags for language choice, parece ser que a algunos no.

Hmm, I DO speak English, but this is not the flag of my country. I hate when I see this!

Por si estas razones no son suficientes, tenemos un documento del W3C Working Group que sin más rodeos dice “Do not use flag icons to indicate languages.” y nos da una razón indiscutible para ello: Las banderas representan países, no idiomas.

Posibles alternativas al uso de banderas

Usar sólo texto en el idioma correspondiente

Una opción simple y sencilla que no deja lugar a dudas y no ofende a nadie, pero que tiene el inconveniente de no ser tan fácilmente localizable y reconocible como los enlaces acompañados de icono.

Un select con los idiomas disponibles

Esta opción es buena cuando hay bastantes idiomas, pero tampoco está libre de problemas. ¿Qué etiqueta usamos para el label del select? Si usamos “idioma”, ¿en qué idioma lo ponemos?
Si decidimos prescindir del label, ¿qué ponemos como opción por defecto para el select? ¿”Seleccione idioma”?

Podemos recurrir al uso de un icono como el globo del mundo o algo similar que preceda al select, pero volvemos al problema de usar sólo iconos para transmitir información. Además esto require un esfuerzo extra de interpretación.

Conclusión

Vistos los problemas y las posibles alternativas (seguro que hay más), quizá la mejor opción sea la de usar sólo texto en el idioma correspondiente (Español | English | Français) y si a pesar de todo uno se decanta por el uso de banderas, acompañarlas siempre de texto.

Más información

• Flag Problems en useit.com
• Indicating language choice: flags, text, both, neither? en 456 Berea Street
• You should never use flags for language choice

Acabo de descubrir varios script que hacen posible, tanto la navegación “normal” mediante el botón volver del navegador, como el añadir páginas a los favoritos o marcadores en aplicaciones AJAX. Una solución a dos de los grandes problemas de usabilidad que presentan este tipo de aplicaciones.

Dejo cuatro enlaces rápidos:

1. HistoryManager. Funciona con Mootools.
   It solves the typical “Back-Button” and “Ajax Bookmarks” problems for accessible browsing and a better usability in Rich Internet applications.
2. Versión de HistoryManager para Prototype.
3. History Keeper. No utiliza ninguna librería.
4. UpdateControls: UpdateHistory and AnimatedUpdatePanel. Para ASP.NET AJAX.

Ya sé que es una beta y que las mejoras se están haciendo por momentos sobre la marcha, pero en mis primeros días con él, como usuaria no puedo evitar echar de menos el panel de administración de Wordpress 2.6

Exceptuando la facilidad de acualización de Wordpress (ahora podemos hacerlo diréctamente desde el panel de administración, como con los plugins) todo lo demás me han resultado inconvenientes.

El principal inconveniente, para mi gusto, es la nueva navegación, orientada ahora en vertical. Ahora tenemos todas las opciones a menos clicks, aunque a cambio de tener diez iconos que agrupan varias acciones en el menú.

Esto implica que para ir a algunas opciones me tengo que desplazar hasta el final de la pantalla para encontrar lo que antes tenía en la cabecera.

La buena noticia es que podemos reducir el espacio vertical que ocupa este menú plegándolo, cosa que me ha costado dos días descubrir.

La mala noticia, es que una vez plegado, hay que adivinar qué representa cada icono, que como se puede ver, no siempre resulta muy claro.

También hay que tener en cuenta que estos no serán los iconos definitivos, que se acaban de anunciar hoy en el blog de desarrollo de wordpress.

Al navegar entre páginas, no siempre se recuerdan las opciones del usuario y a veces me aparece el menú plegado, otras desplegado, vaya, cuestión de suerte.

Han tenido la delicadeza de agrupar los iconos por grupos de acciones, aunque también supone, primero darse cuenta de esta agrupación y segundo, hacer un esfuerzo mental para entender qué relación hay entre las acciones de cada grupo.

Una vez hecho este hallazgo, ya podemos acordarnos de que el primer grupo sirve para hacer cosas relacionadas con el contenido (publicación de páginas o posts, moderación de comentarios, etc.) y el segundo grupo sirve para hacer cosas relacionadas con la administración como cambiar de tema, asignar permisos a usuarios, modificar la configuración, apagar el blog… ¿apagar el blog?

Ah no, que esto es la configuración y lo que parecía la configuración son las herramientas. Menos mal, que el menú desplegable (completamente inaccesible mediante teclado cuando está plegado) me lo deja todo claro.

En la última versión, han corregido la eliminación de estilos para los enlaces que tienen el foco, que aunque siguen sin su borde punteado (outline), por lo menos ahora cambian de color cuando navegamos por ellos con el teclado.

En fin, que Wordpress me encanta, pero espero que corrijan algunas de estas cosas para la versión 2.7 definitiva.

Los iconos como enlaces en páginas web pueden ofrecer algunas ventajas. Dependiendo de las características del icono y del perfil del usuario, pueden ser asociados rapidamente con la acción o elemento que representan, además de ayudar a aprovechar espacios en pantalla o concentrar en un área una serie de elementos relacionados entre sí para que puedan ser localizados visualmente con facilidad. Un ejemplo de esto último podriá ser un grupo de acciones relacionadas con el documento como “enviar por correo” o “imprimir”.

Sin embargo, a la hora de codificarlos intentando ofrecer una solución accesible para todo tipo de usuarios, presentan algún que otro problema.

Continúa en "Iconos como enlaces: problemas y soluciones"

Los menús de navegación desplegables pueden ser una solución de diseño para ahorrar espacio, sin embargo, su utilidad para el usuario es cuestionable. Siendo un poco drástica diría que no le aportan ningún beneficio, sino un click más para acceder a información que, de primeras, desconoce y no sabe siquiera si es de su interés, por lo que el usuario que navega sin rumbo fijo en busca del enlace que llame su atención, simplemente los ignorará. Hay que pensar que el usuario no tiene tanto interés en nuestros contenidos como para andar rebuscando.

Continúa en "Menús de navegación desplegables y problemas de usabilidad"