Diseñar para audiencias internacionales. Parte 4: diseño flexible
Particularidades de diseño que hay que contemplar en interfaces que van a ser traducidas a diferentes idiomas.
Cuando el producto en el que trabajas se dirige a un mercado global, las decisiones de diseño estarán, en buena parte, condicionadas a su adaptabilidad a las particularidades de cada idioma. En este post vamos a analizar algunos de los elementos que tenemos que tener en cuenta para poder adaptar el diseño a estos entornos internacionales.
1. Sistema de escritura RTL
La orientación del texto tiene una influencia fundamental en el diseño de los productos. Lenguas como el árabe, persa o hebreo se escriben de derecha a izquierda (RTL, Right To Left) y es necesario prestar atención a los detalles que afectan al diseño y a la experiencia de uso.
El cambio direccional de los elementos de la interfaz se denomina reflejo y afecta a la estructura del sitio web, así como al texto y los gráficos. Las interfaces de idiomas que se leen de derecha a izquierda, deben reflejarse para garantizar que el contenido sea fácil de usar y se entienda correctamente. Google Material Design ha elaborado una guía llamada Bidirectionality que describe de forma muy clara las pautas de cómo reflejar de forma correcta la interfaz.
Veamos algunos ejemplos de estos cambios y los detalles que es necesario revisar al reflejar la interfaz:
Iconos
Los iconos que no comunican la dirección, como es el caso de la lupa o el menú, no cambian. Los iconos que sí que indican una dirección, como el carrito de compra, sí que es necesario reflejarlo para que pueda interpretarse correctamente. La flecha de atrás de la navegación apuntará a la derecha así como los radiobutton, checkboxes y otros controles y sliders.
Texto no escrito en árabe
El texto que no esté escrito en árabe mantendrá la dirección correcta para el idioma en el que está escrito. Se puede ver un ejemplo en el nombre de un hotel en una web de viajes, o en el uso de números (fechas, precio, etc) en una frase. En árabe y hebreo los números suelen aparecer en formato internacional. El idioma farsi (persa) sí que suele usar unos caracteres específicos.
Carruseles
Los carruseles se mueven hacia la derecha lo que puede implicar cambios en el funcionamiento de los maneadores e interacciones.
Calendarios
Los calendarios son otro elemento importante a tener en cuenta. En los países árabes puede usarse un calendario propio aunque están habituados al formato de fecha internacional estándar. En los calendarios árabes no es apropiado abreviar los días de la semana, meses, etc. algo que sí que es común en idiomas occidentales. Por eso es necesario contemplar un espacio flexible para evitar que ocurra lo que observamos en la imagen de Qatar airways en la que los textos aparecen demasiado amontonados y se dificulta la lectura.
Banners
Los banners pueden también causar muchos problemas, sobre todo si el texto está situado sobre las imágenes. Un ejemplo se puede ver en la web de Nivea, donde las imágenes están preparadas para usar en lenguaje LTR y, al cambiar la dirección del texto a RTL, dejan de funcionar. Una solución más óptima es preparar diseños con el texto y la imagen centrados, ya sea sobre la propia imagen o en un campo de texto separado. Este recurso es especialmente útil en el caso de que se usen las mismas imágenes en diferentes mercados.
Es aconsejable unir esfuerzos en esta labor de cambio direccional de la interfaz para lenguas árabes y concienciar durante este proceso a los departamentos involucrados para poder mantener una revisión continua. Muchos de los elementos que cambian no se pueden automatizar y es necesario revisarlos de forma específica. Siempre es especialmente efectivo contar con personas nativas que revisen toda la interfaz, no solo los textos.
2. Formatos de datos
Cada país utiliza su propio formato de datos para fechas, distancias y monedas. Para proporcionar una buena experiencia de uso es necesario mostrar los formatos correspondientes a cada lugar según se elija un idioma o país. De esta forma evitaremos que las personas tengan que convertir esos datos mentalmente durante el proceso.
Formato de fecha
El formato de fecha presenta el día, mes y año de un sistema de calendario determinado. Cada idioma representa las fechas de un modo diferente y, a su vez, se pueden mostrar con un formato largo o abreviado según la necesidad. En la tabla se muestran algunos ejemplos de cómo se presentan las fechas en diferentes países en diferentes formatos. La fecha 12/8/2019 puede significar 12 de agosto de 2019 para un ciudadano europeo y 8 de diciembre de 2019 para un ciudadano estadounidense ya que éstos últimos sitúan el mes antes que el día. No tener en cuenta este hecho podría traer serios problemas en procesos tales como una reserva de vuelo o de hotel.
Formatos de precio
En caso de servicios de venta de productos en los que hay que mostrar precios es necesario asegurar que cada persona lo ve en su moneda local. El precio está compuesto por un número y un signo de moneda y cada moneda tiene su propio formato y reglas (las cifras pueden estar separadas por un punto o una coma, los símbolos de moneda se pueden colocar antes o después del importe y puede haber o no un espacio entre el símbolo y el importe). El dinero es un tema muy delicado que puede causar mucha desconfianza, por lo tanto es importante presentarlo en su formato correcto.
Otras unidades de medida y métricas
Otras unidades de medida y métricas que es necesario transformar en función del producto pueden ser la distancia, el volumen o el peso. Por ejemplo, al mirar una página de recetas, comprobar que las medidas están en onzas o libras pude resultar muy molesto para un publico francés o alemán. Traducir este tipo de medidas según la audiencia influirá directamente en la efectividad del mensaje que se quiere transmitir.
3. Longitud de texto
El problema más común de internacionalización es no tener suficiente espacio para las traducciones. Si el diseño incluye palabras, hay que asegurar suficiente espacio para las traducciones más largas y evitar que el texto se muestre superpuesto o cortado.
Por ello, para asegurar que el diseño funciona en diferentes idiomas es importante probar en el idioma más largo y el más corto del producto. En el artículo Design for internationalization escrito por John Saito (Dropbox) encontramos entre los comentarios un recurso de gran utilidad para estimar la longitud de cada etiqueta y localizar la más larga y la más corta de un solo vistazo: está elaborado por Tom Roach (IBM) y es un recurso de traducción simultánea libre y muy útil.
A continuación se mencionan algunas recomendaciones que pueden ayudar a evitar problemas con la longitud de los textos:
No poner texto en columnas muy estrechas.
Las columnas son una excelente manera de organizar el contenido pero no son buenas aliadas cuando el texto es impredecible. Los encabezados de una línea pueden crecer y romper el equilibrio del diseño. Una opción más segura es utilizar filas anchas en lugar de columnas estrechas. Eso le va a dar al texto mas espacio para crecer sin romper el diseño.
Evitar crear oraciones con elementos de la interfaz.
Combinar texto con botones, cuadros o menús desplegables, puede dar muchos problemas. El orden de las palabras, el uso de plurales o el género pueden llevar a un error gramatical y perder su significado. La mejor opción es mantener el elemento de interfaz fuera de la oración.
Evitar las etiquetas de inputs alineadas a la izquierda.
Es preferible colocar las etiquetas sobre los campos. Las etiquetas alineadas a la izquierda requieren más espacio horizontal, corren el riesgo de romper las estructura de los diseños y reducen el espacio disponible para ingresar datos.
Minimizar el uso de contenedores con dimensiones fijas.
Es el caso, por ejemplo, de la barra contextual de móvil. En la imagen se muestra un ejemplo de esta barra usada para un diseño de la pantalla de filtros. Al revisar el elemento en idioma japonés los textos se solapaban. El texto japonés suele presentar problemas ya que su tipografía utiliza un espacio horizontal más amplio que el resto de idiomas. Una solución a este problema es reducir el tamaño del texto, asegurando que mantenga los estándares de legibilidad, si no es así hay que buscar otras soluciones como usar iconos en lugar de palabras (siempre y cuando sean reconocibles) o buscar etiquetas más cortas.
Otros elementos de la interfaz que pueden traer problemas en este sentido son los botones. Si un botón requiere una larga cadena de texto es preferible usar un hipervínculo.
4. Tipografía
Un último elemento a tener en cuenta es la tipografía. Aunque pueda parecer un paso menor, la elección de la fuente puede afectar drásticamente el diseño y la legibilidad de la interfaz y puede dar como resultado una apariencia inconsistente. Para entender su importancia se señalan algunas ideas y elementos.
Compatibilidad con Unicode
Es importante usar una fuente compatible con Unicode, lo que significa que los caracteres y el texto de su aplicación se han codificado de manera que permita el intercambio internacional de datos de texto.
Google ha desarrollado una familia de fuentes llamada Noto. El nombre Noto viene de su lema “No more tofu”. Esta fuente tiene múltiples estilos y pesos y es gratuita. El objetivo es admitir todos los idiomas con una apariencia armoniosa y, al mismo tiempo, evitar que los caracteres que se muestran como “tofu”, que son los cuadros pequeños que aparecen en los textos para indicar que el dispositivo no tiene una fuente para mostrarlo.
Tamaño de fuente
Los tamaños de fuente varían de un idioma a otro. Una fuente de 14 px puede leerse en español sin problemas, sin embargo esa misma fuente puede ser extremadamente difícil de leer si se traduce al árabe. Desafortunadamente, no existe un tamaño de fuente ideal que funcione para todos los idiomas en todo el mundo. Una opción posible es implementar un diseño dinámico con un css por idioma para manejar tamaños de texto variables y revisar que mantienen una legibilidad adecuada.
Otros valores que hay que contemplar son los del espacio horizontal que ocupan los caracteres que pueden ser muy variable y afectar al diseño. Es el caso del idioma japonés que se ha visto anteriormente.
Todos estos detalles que se han presentado requieren no solo que las personas que diseñen los productos los contemplen en su trabajo diario sino que se cree conciencia dentro del equipo y la empresa para revisar y estar alerta de los errores. Y, por supuesto, siempre que sea posible, incluir en las sesiones de investigación a personas de diferentes nacionalidades que aporten una perspectiva más amplia. Alberto Ferreira, autor del libro Universal UX design explica alguna de sus investigaciones con usuarios internacionales en su ponencia en Think Global Forum London, 2019. El vídeo sería mejor si la cámara permitiese ver la pantalla con sus slides pero aún así nos abre los ojos a cómo el condicionamiento sociocultural afecta a la percepción de la interfaz.
Conclusión final
Diseñar teniendo en cuenta una audiencia internacional significa incorporar a nuestro proceso de diseño un elemento más como es el de la consistencia, la usabilidad o la accesibilidad. La internacionalización por lo tanto, nos va a permitir crear diseños que permitan una adaptación fácil a otros mercados y que sean más competitivos.
Contar en los equipos con personas de diversas nacionalidades y culturas que no compartan los mismos modelos mentales es algo que resulta sumamente enriquecedor: nos ayuda a desafiar nuestras suposiciones, a pensar en el producto desde diferentes perspectivas y generar ideas más creativas. Un equipo homogéneo a menudo tiene una visión más limitada y perspectivas similares que las de un equipo diverso.
Este post forma parte de la serie Diseñar para audiencias internacionales:
Parte 1: conocer a los usuarios
Parte 2: hablar el lenguaje de los usuarios
Parte 3: lenguaje visual
Parte 4: diseño flexible
