Existen algunos idiomas, como el árabe o el hebreo, que su escritura es Right to Left (RTL), es decir que para leer se debe empezar por la derecha y finaliza a la izquierda. Este tipo de escritura obliga a los diseñadores de apps adaptar el diseño para que estos usuarios también puedan disfrutar de la experiencia sin perder detalle. Y más, teniendo en cuenta que muchos de estos usuarios prefieren navegar en su idioma materno.

Hasta el 97% de los árabes prefieren navegar en árabe.

Teniendo esta situación, hoy vamos a explicar cómo los diseñadores deben adaptar las interfaces gráficas para este tipo de idiomas. Para empezar, los textos se deben leer de derecha a izquierda, por lo que hay que hacer “Mirroring” de cada pantalla, es decir, voltear el contenido como si fuera el reflejo de la app actual (LTR). Aun así, vamos a detallar casos muy concretos para cada tipo de adaptación.

Adaptar textos

Adaptar textos será el cambio más extenso que necesitará la app, ya que todos los textos se tienen que poder leer de derecha a izquierda. Para ello, se tiene que tener en cuenta que:

  • Los textos traducidos en escrituras RTL, tienen que estar alineados de derecha a izquierda. Por ejemplo, si un texto en una app en inglés está alineado a la izquierda de la pantalla, en la misma app en árabe deberá estar alineado a la derecha.
  • Si en alguna app RTL  hay una palabra en medio de un texto que no sea traducible (por ejemplo nombres propios) o que quieras mantenerla en su idioma original, y que esté escrita en LTR (Left to Right), esta palabra deberá leerse de izquierda a derecha.
  • A la hora de elegir la fuente de los textos, mejor utilizar una fuente que soporte muchos idiomas, como por ejemplo la fuente “Noto”. Además, mejor que el tamaño sea más grande ya que nos podemos encontrar con símbolos y vocales diacríticas que sean bastante pequeños.
  • Los números no se hacen con mirroring, ya que cada idioma tiene su forma propia de escribirlos.
  • En caso que la web tenga un menú y un logo a la izquierda, al adaptarlo deberá ir a la derecha.
  • Si la web es un ecommerce y tiene plazos de entrega, tales fechas deben ordenarse inversamente: la más cercana a la derecha y la siguiente fecha a la izquierda (como si fuera mirroring). Lo mismo pasará, con otros intervalos de fechas o incluso con cualquier cifra que esté entre dos intervalos.
  • En caso de que la web tenga un formulario y haya varios campos en una misma línea, se cambia el orden al hacer mirroring.
  • Los botones de Aceptar, que suelen ir a la derecha, en RTL se colocan a la izquierda.
  • Otros elementos, como los checkbox y radiobutton, se incluyen a la derecha del texto.
  • La barra slash “/” no se voltea.

Adaptar iconos

A la hora de adaptar los iconos, hay que tener en cuenta qué funcionalidad ejercen:

  • Los iconos que comunican una dirección deben voltearse. Por ejemplo, las flechas de avanzar, éstos sí deben aparecer al revés.
  • Los iconos que indican que un input es un desplegable, tienen que colocarse al lado opuesto del texto.
  • Los iconos que contengan la representación de texto deben voltearse. También tienen que ser traducidos aquellos iconos que contengan números.
  • Los iconos que sean un reloj no se voltean, ni tampoco la representación circular del tiempo; como por ejemplo el icono “actualizar”.
  • Tanto los controles de un reproductor de música o video, como la línea de progreso de la canción o del vídeo, tampoco se voltean.

Adaptar animaciones e interacciones

Las animaciones también quedarían afectadas con este tipo de escritura. Algunos de los elementos que deben adaptarse serían:

  • Los sliders, u otros componentes parecidos, deben ir al revés.
  • Las barras de progresión van en la dirección de la lectura, en ese caso RTL.
  • La paginación debe ir al revés: 5,4,3,2,1.
  • También, los segmented control y las pestañas tienen que ir en el orden inverso.
  • Las transiciones que son para avanzar que normalmente vienen de derecha a izquierda, para RTL deberán entrar de izquierda a derecha.
  • Los gestos de swipe típicos de las apps, deberán ser al revés.
  • Las acciones de los pop-ups, por ejemplo “Cancelar” y “Aceptar”, deberán aparecer al revés.

A continuación mostramos algunos ejemplos de cómo sería una misma pantalla en RTL (izquierda) y LTR (derecha):

escritura RTL adaptar app visual engineeringescritura RTL adaptar app visual engineeringescritura RTL adaptar app visual engineeringescritura RTL adaptar app visual engineering

Y éstas son todas las adaptaciones que hay que tener en cuenta a la hora de hacer una app RTL. ¡Esperamos que os haya resultado útil!

Fuente: Laura Martínez, diseñadora de Visual Engineering