Diseño Intercultural
Por Senongo Akpemés. Original en inglés, traducción al español por Mariana Ramírez
Nota de los editores: Nos complace presentar este extracto del Capítulo 5 del libro Cross-Cultural Design escrito por Senongo Akpem, disponible en A Book Apart.
Cuando viajé por primera vez a Japón como estudiante de intercambio en 2001, viví en el norte de Kioto, a una cuadra de la estación de subterráneo de Kitayama.
La primera vez que usé el tren para llegar a mi universidad fue casi un desastre, a pesar de que estaba a sólo dos paradas de distancia. Pensé que tenía todo lo que necesitaba para hacer el viaje con éxito. Revisé dos y tres veces que tenía el cambio exacto en un bolsillo y una copia impresa de donde se suponía que debía ir en el otro. Pude llegar a la estación, pero luego simplemente me quedé parado frente a la máquina expendedora de boletos, atónito, mirando todas las luces intermitentes, botones y mapas sobre mi cabeza (Fig. 5.1). Todo era tan impenetrable. Estaba abrumado por la arquitectura, los sonidos, las señales y el idioma.
Mis ojos anhelaban algo familiar — y ahí estaba. ¡La máquina de boletos tenía un pequeño botón que decía “Inglés”! Lo presioné pero me perdí aún más: las instrucciones estaban mal traducidas, y de todos modos, explicaban un sistema que yo no podía usar en primer lugar.
¿Adivina qué me salvó? Dos pequeñas señoras japonesas. Mientras compraban los boletos, miré casualmente sobre sus hombros para ver cómo usaban las máquinas. Primero, miraron el mapa para encontrar su destino deseado. Luego, anotaron la tarifa escrita al lado de la estación. Finalmente, pusieron algo de dinero en la máquina, presionaron el botón que se iluminó con la tarifa correcta, y sacaron los boletos! ¡Wow! Lo intenté yo mismo cuando ellas se fueron. Y después de unos momentos de tensión, conseguí mi boleto y me dirigí a través de las puertas hacia la plataforma del tren.
Me enorgullezco de ser un niño de la tercera cultura, lo que significa que fuí criado en una cultura distinta al país que aparece en mi pasaporte. Pero incluso con una educación cultural tanto en Nigeria como en los EE.UU., fue una de las primeras veces que tuve que adivinar mi camino a través de una tarea sin puntos de referencia previos. ¡Y lo logré!
Desafortunadamente, las mismas suposiciones ocurren en línea un millón de veces al día. La gente visita sitios web que no les ofrecen ningún modelo mental cultural o marco visual de referencia en los cuales apoyarse, y terminan tropezando a través de los enlaces y las páginas. Los sistemas visuales efectivos pueden ayudar a eliminar esas conjeturas e incertidumbres creando conjuntos de pistas en capas en el diseño y la interfaz. Echemos un vistazo a algunas partes centrales de estos sistemas de diseño y contemplemos cómo podemos hacerlos más sensibles culturalmente y multifacéticos.
Tipografía
Si trabajas en la web, te enfrentas a la tipografía todo el tiempo. Este no es un libro sobre tipografía — otros han escrito mucho más elocuentemente y técnicamente sobre el tema. Lo que me gustaría hacer, sin embargo, es examinar algunas de las formas en que la cultura y la identidad influyen en nuestra percepción del tipo y las elecciones tipográficas que los diseñadores pueden tomar para ayudar a crear experiencias interculturales enriquecedoras.
Estereotipografía
Me encontré con la palabra estereotipografía hace algunos años. Siendo africano, soy muy consciente de la forma en que mi continente es retratado en los medios de comunicación occidentales — un monocultivo rural muy pobre, con poca tecnología, educación o urbanización. En Occidente, uno de los marcadores gráficos más reconocibles de las cosas africanas, tribales o incivilizadas (y no, no son lo mismo) es la tipografía Neuland. Rob Giampietro la llama “la Nueva Cara Negra,” un ingenioso juego de palabras. En un ensayo, hace una pregunta muy importante:
¿Cómo llegaron [Neuland y Lithos] a simbolizar a africanos y afroamericanos, sin importar cómo las use un diseñador, e independientemente del propósito con el que sus creadores las concibieron originalmente? (http://bkaprt.com/ccd/05-01/)
Desde su lanzamiento en 1923 y con su uso continuo durante los años cuarenta en la publicidad enfocada en los afroamericanos, Neuland ha llevado consigo fuertes connotaciones y estereotipos de baratija, fealdad, tribalismo y rudeza. Esto se ve incluso hoy en día. Neuland es usada en afiches para películas como Tarzán, Parque Jurásico y Jumanji — películas que tratan sobre selvas, salvajes y bestias aterradoras que acechan en el monte, todo un simbolismo occidental para el continente africano. Incluso la página de descarga de MyFonts para Neuland (Fig 5.2) incluye etiquetas para “África”, “fiebre de la jungla” y “primitivo” — etiquetas que no tienen relación con ninguna otra cosa en el producto aparte de esa historia racista.
No hagas, uses o vendas fuentes de esta manera. Aquí hay algunos consejos para evitar la estereotipografía al definir tus experiencias digitales:
- Sospecha inmediatamente de cualquier tipografía que “se parezca” a una cultura o un país. Por ejemplo, las fuentes llamadas “wonton” o “chop-suey”, cuyo estilo visual es pensado para expresar algo “asiático” o para sugerir caligrafía china, que han aparecido desde hace mucho tiempo en cartones de alimentos, carteles, sitios web de campañas, e incluso en camisetas de Abercrombie & Fitch con caricaturas racistas de asiáticos (http://bkaprt.com/ccd/05-03/). El sitio web de Monotype, donde puedes comprar una versión llamada Mandarin Regular (US$35), describe con cinismo la historia de la tipografía como “una interpretación de una caligrafía asiática dibujada artísticamente con pincel” (Fig 5.3). Conozcas o no inmediatamente su historia, aléjate de cualquier tipografía que pretenda representar una cultura entera.
- Apoya a los diseñadores de tipografías que pertenecen a la cultura para la cual estás diseñando. Esto puede parecer una tarea difícil, pero internet es un lugar grande. He descubierto que, para los clientes que son sensibles a los temas culturales, la inclusión de los nombres y el origen de los diseñadores de tipografías puede ser un diferenciador poderoso, incluso abriéndose camino en sus paquetes de marca como un punto de orgullo.
La World Wide Webfont
Otra herramienta común de diseño que deberías considerar son las fuentes web o webfonts — fuentes diseñadas específicamente para usarse en sitios web y aplicaciones. Uno de los principales puntos de venta de las webfonts es que en lugar de poner texto en las imágenes, los clientes pueden usar texto en vivo en sus sitios web, lo que es mejor para el SEO y la accesibilidad. Hoy en día son bastante fáciles de implementar, es cuestión de añadir una línea de código o marcar una casilla en un motor de plantillas. La manera más fácil de tenerlas en tu sitio es usando un servicio como Google Fonts, Fontstand o Adobe Fonts.
¿O no? Eso supone que esos servicios están realmente disponibles para tus usuarios.
Google Fonts (y cada servicio que usa la API de Google Developer) está bloqueado en China continental, lo que significa que cualquiera de esas lindas fuentes gratuitas que elegiste simplemente no va a cargar (http://bkaprt.com/ccd/05-05/). Puedes evitar esto, pero también ayuda tener una fuente de respaldo — ya que para eso están.
Cuando estés construyendo tu sistema de diseño, ¿por qué no dar unos pasos extra para definir algunas webfonts que sean visibles en lugares con bloqueos de contenido? Justfont es uno de los primeros servicios enfocados en ofrecer una amplia gama de webfonts chinas (http://bkaprt.com/ccd/05-06/). Tienen niveles de servicio gratuitos y de pago, similares a los servicios de fuentes occidentales. Después de configurar una cuenta, puedes obtener cualquier información y CSS de la familia de fuentes que necesites.
Sistemas múltiples de escritura
Cuando tu trabajo de diseño requiere más de un alfabeto — por ejemplo, un tipo de letra para idioma coreano y uno para idioma latino — tus elecciones se vuelven mucho más difíciles. Los diseños que incorporan más de uno se denominan sistemas múltiples de escritura (sistemas multiescritura para abreviar). Combinarlos es un desafío de diseño interesante, uno que requiere sensibilidad tipográfica adicional. Afortunadamente, tus opciones multiescritura rara vez aparecerán juntas en la misma página; usualmente elegirás fuentes que funcionen en toda la marca, pero que no funcionen bien juntas visualmente.
Veamos un ejemplo de uso efectivo de multiescritura. SurveyMonkey, una herramienta de encuestas y cuestionarios en línea, tiene su sitio localizado en una variedad de idiomas diferentes (Fig 5.4). Toma nota de los encabezados, la estructura del texto en el menú y los botones, y cómo ambas fuentes se sienten como parte de la misma marca.
Algunos consejos mientras intentas elegir fuentes multiescritura para tu proyecto:
- Inspecciona el peso general y el nivel de contraste de las letras. Tómate tiempo para examinar cómo funcionan el peso y el contraste en las letras que estás usando. Encuentra los pesos y tamaños similares que den a la página el balance adecuado, sin importar la letra.
- Ten en cuenta las características raras de la letra. La altura de la x de los caracteres, los descendentes, los ascendentes y el espaciado pueden dañar el efecto general de la marca. Por ejemplo, los caracteres japoneses siempre se ubican dentro de una cuadrícula con todos los caracteres diseñados para encajar en cuadrados de igual altura y anchura. Las tipografías japonesas estándar también contienen caracteres latinos, llamados romaji. Esos caracteres latinos tendrán un kerning, por defecto, de acuerdo al mismo patrón de la cuadrícula, dejando a menudo un espaciado forzado e irregular. Tómate el tiempo necesario para encontrar una tipografía que no tenga características que resulten incómodas para trabajar.
- No elijas tipografías automáticamente basándote en una similitud superficial. Las impresiones iniciales no siempre significan que un tipo de letra es adecuado para tu proyecto. En una entrevista en el libro Bi-Scriptual, Jeongmin Kwon, un diseñador de tipografías radicado en Francia, ofrece un ejemplo (http://bkaprt.com/ccd/05-09/). Nanum Myeongjo, una tipografía Hangul contemporánea, podría parecer a primera vista muy similar a una tipografía latina de estilo antiguo del siglo XVII — por ejemplo, ambas tienen serifs inclinados. Sin embargo, Nanum Myeongjo fue diseñada en 2008 con trazos modernos y refinados, mientras que las tipografías de estilo antiguo fueron creadas originalmente hace siglos y evocan las formas de las letras manuscritas (http://bkaprt.com/ccd/05-10/). Sin embargo, al mirar la página de Google Fonts para Nanum Myeongjo, nada de eso está claro (Fig 5.5). La página genera automáticamente un glifo latino de Nn en la parte superior izquierda de la página, en lugar de usar una muestra más representativa de caracteres Hangul. Si basara mis elecciones de fuentes multiescritura en mis reacciones iniciales a esa página, mis maridajes no capturarían con precisión la historia y el diseño de cada tipo de letra.
Densidad visual
El CSS puede ayudarte a controlar la densidad visual — cuánto texto, imagen y otros contenidos hay en relación al espacio negativo de tu página. Mientras sigues leyendo, ten en cuenta las variables culturales: las diferentes culturas valoran diferentes niveles de densidad visual.
Comparemos los alfabetos comúnmente llamados CJK (Chino, Japonés, Coreano) y Latinos (Inglés, Francés, Italiano, etc.) Los alfabetos CJK tienen caracteres más complejos, con formas que son generalmente más cuadradas que las formas de las letras latinas. Los glifos también tienden a ser más detallados que los latinos, lo que da lugar a una mayor densidad visual.
Tu instinto podría ser crear tamaños de tipos personalizados y alturas de línea para cada una de tus páginas localizadas. Esa es una opción perfectamente aceptable, y si eres un tipógrafo, puede que te vuelva loco no hacerlo. Pero estoy aquí para decirte que cuando añades idiomas CJK a un sistema de diseño, puedes actualizarlo para tener en cuenta su densidad visual sin romper mucho tu CSS original:
- Elige un tamaño de letra que sea ligeramente más grande para los caracteres CJK, debido a su densidad.
- Elige una altura de línea que te dé un amplio espacio vertical entre cada línea de texto (line-height en CSS).
- Mira tu texto latino en los mismos tamaños y fíjate si todavía funciona.
- Ajústalos para encontrar un tamaño que funcione bien con ambos alfabetos.
El sitio de 2017 para Typojanchi, la Bienal de Tipografía de Corea, sigue esta metodología (Fig 5.6). Tanto los textos en inglés como en coreano tienen un font-size de 1.25em, y un line-height de 1.5. ¿El resultado? El texto en inglés abarca más espacio verticalmente, y el bloque de texto coreano es visualmente más denso, pero ambos son legibles y se sitúan cómodamente dentro del diseño general de la página. Es útil comparar sitios traducidos como este para ver cómo el estilo CSS puede estandarizarse a través de las páginas latinas y CJK.
Factores de expansión del texto
Los factores de expansión calculan qué tan largas serán las líneas de texto en diferentes idiomas. Utilizan un decimal (1.8) o un porcentaje (180%) para calcular la longitud de una línea de texto en inglés con respecto a un idioma diferente. Por supuesto, el espaciado entre letras depende de la palabra o frase real, pero piensa en ellas como una forma bastante aproximada de anticipar el espacio para el texto cuando se traduce.
Usar factores de expansión es mejor cuando se planea un microcopy, llamadas a la acción y menús, en lugar de grandes bloques de texto para contenido como artículos o entradas de blog que pueden expandirse libremente por la página. El Lightning Design System de Salesforce ofrece una tabla detallada de factores de expansión para ayudar a los diseñadores a calcular aproximadamente los requisitos de espacio para otros idiomas en una interfaz de usuario (Fig 5.7).
¡Pero espera! Como todo en el diseño intercultural, nada es tan simple. El japonés, por ejemplo, tiene tres alfabetos: Kanji, para caracteres de origen chino, hiragana, para palabras y sonidos que no están representados en kanji, y katakana, para palabras tomadas de otros idiomas.
El botón de Seguir es una parte esencial de la experiencia de Twitter. Tiene seis caracteres en inglés (“Follow”) y cuatro en japonés (フォロー), pero la versión japonesa es veinte por ciento más larga porque está en katakana, y esos caracteres ocupan más espacio que los kanji (Fig 5.8). Las tablas de expansión pueden tener dificultades para acomodar la compleja diversidad de las escrituras e idiomas humanos, así que no los veas como una solución única o infalible.
Aquí hay algunas cosas que puedes hacer teniendo en cuenta los factores de expansión mientras diseñas:
- Genera texto simulado en diferentes idiomas para tus composiciones de diseño. Por supuesto, deberías asegurarte que el texto no contenga ninguna palabrota involuntaria o lenguaje inapropiado, pero herramientas como Foreign Ipsum son un buen lugar para empezar a pensar en los factores de expansión (http://bkaprt.com/ccd/05-13/).
- Deja espacio adicional alrededor de los botones, los elementos del menú y otro microcopy. Además de ser una buena práctica general en diseño responsive, esto te permite dar cuenta de cómo se expande el texto en tus idiomas de destino.
- Asegúrate de que tus componentes sean expansibles. Evita asignar un ancho fijo a tus elementos de UI a menos que sea inevitable.
- Deja que las líneas más largas de texto continúen en una segunda línea. Sólo asegúrate de que el texto esté alineado correctamente y sea fácil de escanear.
