You’ve heard everything I’m going to say before. Don’t stop reading though, because what I’m getting ready to tell you is all new information.
See, here’s the trick—designing a website with the knowledge that it’s going to be localized or translated doesn’t really take more work than designing a website you know will only be viewed by speakers of a single language living in a single culture. It doesn’t require any extra principles. There’s no new skill to learn and there’s no magic wand to waive. You just have to design a good solid website from the very beginning. You already have the foundations down or you wouldn’t be taking your craft to the next level by reading User Experience magazine.
That’s because translation is like a prism: at any given point, a single piece of glass can be turned and a rainbow of beautiful colors are unlocked. So when localizers like me take your site and turn it, we shine the world upon the wall. However, we need a solid foundation to start with. If your glass is broken or dirty, if the glass itself is clouded, no matter how we twist it, we won’t get all the colors.
In this article I’m going to take the basic principles of web design and show you how to turn your one-language-only piece of glass into a multicultural spectrum with nothing more than a twist of hand. In other words, we’re going to discuss three concepts you’ve heard before, but we’re going to look at them through the lens of localization so you can prepare your site for users from any language, any culture, anywhere.
Ready?
Principle #1: “Don’t make me think.” (I told you you’d heard this before.)
Steve Krug had it right in his book of the same title when he called this the common sense approach. But the sheer fact that currently 56% of websites are only available in English shows the simplest UX principle isn’t being applied.
We’ve all heard the stats before. Only 13% of all internet users are in North America. More people in Africa surf the web on a cell phone than own a toothbrush. In Latin America—the focus area for this issue of UX—internet access via mobile grows an average of 50% per year. Multiple platform e-commerce alone is growing at 156%. When Woodrow Wilson first proposed the League of Nations, he did it post-World War I with the idea of bringing the world together for peace. Seventy years later, every country of the world is united online. When English is the only language your site is available in, you not only make the rest of the world think, you make them think in a foreign language.
Just as “don’t make me think” pays off for monolingual UX, it pays off for multilingual UX as well. This is about more than being polite—it’s about booming business. In an eight country survey, 72.4% of consumers said they’re more likely to purchase if a website is in their native language. Of EU consumers, 42% never purchase products or services in a foreign language, even if they speak it fluently. In China this figure grows to 95%. Nelson Mandela once said, “If you speak to a man in a language he understands, that goes to his head. If you talk to him in his language, that goes to his heart.” Well, it also goes to his wallet. That’s why the same survey showed that global consumers were, in fact, unilaterally willing to spend more money if a website was in their native language.
That’s because people are people wherever they go. User experience goes downhill when people have to think. Make them think in a foreign language and you might as well not even bother.
So the first rule for localizing your website? Do it.
Principle #2: “Omit needless words.” Or, write cleanly.
The first step toward localizing your website for other countries and cultures is translating the user interface language. The second is to make the writing that needs to be translated concise. People skim. (You’re probably skimming this article now, aren’t you?) Krug’s scanning versus reading principles hold for foreign cultures too. Additionally, we have to remember that translation is billed by the word. So the fewer words your site has, the less money your boss has to pull out of your budget to pay for translation. Also, the more clearly you write, the less likely it is that you will have translation errors. That’s because, regardless of language, words don’t translate directly from one language to another. In Spanish alone there are more than 100 ways to say the English word “run.” (For examples, see 100 Ways to Say Run in Spanish.)
In part, this is because languages vary from country to country. Because I am a good gas-guzzling American, I keep a spare tire in my car trunk. But a Brit would put her “tyre” in the boot. Try to put a tyre into one of my boots and you’ll flatten a pair of Pradas. Language varies from country to country, so write clearly. And if you’re translating your site for Portugal, it is very likely you will have to translate it again for Brazil.
But even if you’re targeting a single country, there may still be over 100 ways to say “run.” Translators need context in order to pick the right usage.
To use a word from the UX world, when your user says she wants to go home, she probably means her home screen. But she could be using a map app and mean her house (Figure 2). If you send translators strings of words in isolation and don’t provide context, we won’t know which “run” to choose. There might be 99 wrong answers to choose from.
It may be easier to give your translators the user interface (UI) strings and expect them to take over from there. But unless you’re big on wasting money, leave in the context. This can be as easy as entering and leaving the metadata. Never give us strings in isolation. If your site is already up and running, share the live links. Make sure we can see your design, even if it’s still in development. Maybe your site won’t be live before translation because you want all language versions to launch at once. That’s okay. Just share screenshots of your work so far and tell us your plans. Never trust a translator who takes your strings and runs or you’ll run into your fair share of difficulties.
Principle #3: Logical design vs. confusing design.
In a way, logical design versus confusing design is still about not making people think. In English, there’s a reason why the trash can on your computer’s desktop screen is at the bottom right-hand side. Since English-speakers read from left to right and top to bottom it makes sense to put it in the place where, if you are reading your desktop like a page, it ends. But to someone who speaks Arabic, having a trash can in that spot is confusing because Arabic reads from right to left. so the trash can is now at the beginning.
There is a reason why people in my world talk about localizing a website as something succinctly different from translating one. Translation is changing the words from one language to another. Localization is about changing everything else. And when I say everything, I mean everything—colors, photographs, icons, and yes, navigation. To quote Krug again, “Navigation reveals content.” And we’re changing your content to suit a brand new country or culture. So navigation may need to change as well.
Where you place your action items affects the action your users take. When a language reads from right to left you cannot put “next” on the right and “back” on the left. That’s the opposite of how your user reads! What was highly logical navigation in one language becomes highly confusing navigation in another.
Which languages read from right to left? Arabic, Hebrew, Urdu, Farsi, Amharic, and Yiddish all fall in this category, as well as many others. Some languages, like Chinese, Japanese, and Korean, read in multiple directions depending on the context.
So how do you plan for this? As a designer, you’re busy developing one website, much less having to plan for the possibility of developing for two. Plus I promised you limited extra work.
Vertical navigation is always an idea since it removes the need for a right or left start and helps set up your page for native mobile, a direction most websites are trending toward.
Another great trick is accessibility. As web design becomes more about optimizing and designing for mobile, accessibility has grown to include making sure left-handed users have an identical experience to right-handed users. Even though a left-handed English speaker will still read from left to right, due to the increase in mobile and touch screens, a fully accessible site allows equal access from the left side. If you create with the left-handed user equally in mind, you’ll already have a platform that’s easy to localize for left-to-right readers (Figure 1).
As recently as 2000, English was the dominant language of the internet by a 26% margin. But by 2011, that margin had dropped to 3%. China has had more new web users onboard in the last three years than there are total users in the United States. People of the world are coming together online.
The basic principles needed to reach all of them are not new; everything I’ve recommended, at its foundation, is just a basic tenant of solid website design. As a professional, you’re used to considering UX as you develop. It just takes a little extra awareness to design knowing that your user may not think, look, or speak like you. But the glass is already in place. We just need to turn it to make your website shine in all the colors it can.
网页设计的三项基本原则亦适用于“本地化”，因此您可以让您的网站适合任何语言、任何文化、任何地区的用户。网站本地化不仅仅只是翻译工作。良好的设计方法可以成为改变颜色、图片、图标，甚至改变导航方式的基础。
웹 디자인의 세 가지 기본 원칙들을 “현지화”에 적용하여 다양한 언어, 문화, 지역을 배경으로 하는 이용자들을 겨냥하여 웹사이트를 만들 수 있습니다. 웹사이트를 현지화 한다는 것은 번역 이상의 것입니다. 좋은 디자인은 색상, 사진, 아이콘의 변화는 물론, 탐색 경로의 변화를 모색하는 기반이 됩니다.
Três princípios básicos de design de web podem aplicar-se à “localização” para que você possa preparar seu site para usuários de qualquer idioma, qualquer cultura, qualquer lugar. A localização de um website é mais do que apenas tradução. A prática de um bom design pode ser a base para a troca de cores, fotografias, ícones e talvez até mesmo sua navegação.
O artigo completo está disponível somente em inglês.
ウェブデザインの3つの基本原則を「ローカリゼーション」に適用することにより、あらゆる言語、文化、場所のユーザーに対応するサイトを準備することができる。ウェブサイトのローカリゼーションは、単なる翻訳以上の作業である。優れたデザインの実例が、色、写真、アイコン、そしてナビゲーションを変更するための基盤となり得る。
Mira, aquí está el truco, diseñar un sitio web sabiendo que será localizado o traducido no implica realmente más trabajo que diseñar un sitio web que sabes que solo será visto por quienes hablan un solo idioma y que viven en una única cultura. No requiere ningún principio extra. No se requiere aprender ninguna habilidad y no se necesita agitar una varita mágica. Sólo tienes que diseñar un buen y sólido sitio web desde el comienzo. Ya tienes las bases, o no estarías leyendo la revista User Experience e intentando llevar tu oficio al siguiente nivel.
La traducción es como un prisma: en un momento dado, una sola pieza de vidrio se puede girar para que aparezca un arcoiris de hermosos colores. Así que cuando los localizadores como yo toman tu sitio y lo transformamos, sacamos a relucir el mundo. Sin embargo, se necesita una base sólida para empezar. Si el vidrio está roto o sucio, si el cristal está nublado, no importa cómo se gire, no vamos a conseguir todos los colores.
En este artículo tomaré los principios básicos del diseño web y te mostraré cómo transformar tu única pieza de vidrio, de un idioma, en un espectro multicultural con sólo un giro de muñeca. En otras palabras, vamos a discutir tres conceptos que has escuchado antes, pero los vamos a mirar a través del lente de la localización, para que puedas preparar tu sitio para usuarios de cualquier idioma, cualquier cultura, en cualquier lugar.
¿Listo?
Principio 1: “No me hagas pensar” (Te dije que esto los habías escuchado antes)
Steve Krug estaba en lo correcto en su libro del mismo título cuando llamó a esto “el enfoque de sentido común”. Pero el simple hecho de que actualmente el 56% de los sitios web sólo están disponibles en inglés muestra que no se está aplicando el principio de UX más simple.
Todos hemos escuchado las estadísticas antes. Solo el 13% de todos los usuarios de internet están en América del Norte. En África, hay más personas que navegan por la web en sus teléfonos celulares que quienes tienen un cepillo de dientes. En América Latina, el área en que nos centramos en este número de UX, el acceso a internet a través de móviles crece a un promedio de 50% al año. Sólo el comercio electrónico multiplataforma está creciendo a 156%. Cuando el presidente de Estados Unidos Woodrow Wilson propuso por primera vez la Liga de las Naciones lo hizo después de la Primera Guerra Mundial, con la idea de unir al mundo por la paz. Setenta años después, todos los países del mundo están unidos en línea. Cuando el inglés es el único idioma en que tu sitio está disponible, no sólo haces pensar al resto del mundo, lo haces pensar en un idioma extranjero.
Tal como la frase “no me hagas pensar” se aplica a la UX monolingüe, sirve también para la UX multilingüe. Esto va más allá de ser educado, se trata de un negocio en auge. En una encuesta en ocho países, el 72,4% de los consumidores dijo que tienen mayor predisposición a comprar si un sitio web está en su idioma nativo. De los consumidores de la Unión Europea, el 42% nunca compra productos o servicios en un idioma extranjero, incluso si lo hablan con fluidez. En China esta cifra crece a 95%. Nelson Mandela dijo una vez: “Si usted habla con un hombre en un idioma que comprenda, eso le llega a su cabeza. Si habla con él en su idioma, eso llega a su corazón”. Bueno, también llega a su billetera. Es por eso que la misma encuesta mostró que los consumidores globales estaban, de hecho, unilateralmente dispuestos a gastar más dinero si un sitio web estaba en su lengua materna.
Eso es porque las personas son personas donde quiera que vayan. La experiencia del usuario se va cuesta abajo cuando la gente tiene que pensar. Hazlos pensar en un idioma extranjero y quizás también mejor ni te molestes.
Así que, ¿la primera regla para la localización de su sitio web? Hazlo.
Principio 2: “Omite palabras innecesarias” O, escribe de forma limpia
El primer paso hacia localizar tu sitio web para otros países y culturas es traducir el idioma de la interfaz de usuario. El segundo es hacer conciso el texto que necesita ser traducido. La gente hojea. (Tú estás probablemente hojeando este artículo ahora, ¿lo haces?) Los principios de Krug de escaneo versus lectura se aplican también para culturas extranjeras. Además, tenemos que recordar que la traducción se factura por palabra. Entonces, si tu sitio tiene menos palabras, tu jefe tiene que dedicar menos dinero de su presupuesto para pagar por traducciones. También, si escribes con mayor claridad, existen menos posibilidades de tener errores en la traducción. Eso es porque, sin importar el idioma, las palabras no se traducen directamente de un idioma a otro. Solo en español hay más de 100 formas de decir la palabra en inglés “run”. (Por ejemplo, ver 100 Ways to Say Run in Spanish, PDF)
En parte esto es porque los idiomas varían de país a país. Porque soy una estadounidense buena consumidora de combustible, mantengo un neumático (tire, en inglés) de repuesto en la maleta de mi auto (trunk). Pero una británica pondría su neumático (tyre) en el maletero (boot: bota para los estadounidenses). Intenta poner un neumático en una de mis botas y aplastarás un par de Prada. El lenguaje varía de país a país. Entonces, escribe de forma clara. Y si estás traduciendo tu sitio para Portugal, es muy probable que lo tengas que traducir de nuevo para Brasil.
Pero incluso si tu objetivo es un único país, puede que ahí también existan más de 100 formas de decir “run”. Los traductores necesitan contexto para elegir el uso correcto.
Para usar de ejemplo una palabra del mundo de la UX, cuando una usuaria dice que quiere ir al “home”, ella probablemente quiere decir la pantalla principal del sitio. Pero ella podría estar usando una aplicación de mapas y estar refiriéndose a su casa (Figura 2). Si a los traductores nos envías series de palabras aisladas, y no nos das contexto, no sabremos cuál “run” elegir. Puede que haya 99 respuestas incorrectas para elegir.
Puede ser más fácil entregar a tus traductores las series de palabras de la interfaz de usuario (UI) y esperar que ellos se hagan cargo desde allí. Pero a menos que estés dispuesto a gastar dinero, entrega el contexto. Esto puede ser tan fácil como entrar y dejar el metadata. Nunca nos des series de palabras aisladas. Si tu sitio ya está arriba y funcionando, comparte los links. Asegúrate que podemos ver tu diseño, incluso si todavía está en desarrollo. Quizás tu sitio no estará disponible antes que la traducción, porque quieres lanzar al mismo tiempo las versiones en todos los idiomas. Eso está bien. Comparte capturas de pantalla del avance de tu trabajo y cuéntanos tus planes. Nunca confíes en un traductor que recibe tus series de textos y empieza a trabajar, o te encontrarás con una justa medida de problemas.
Principio #3: Diseño lógico vs. Diseño confuso
De un modo el diseño lógico versus diseño confuso también se trata de no hacer pensar al usuario. En inglés, existe una razón por la que la papelera del escritorio de tu computador está en el extremo derecho, abajo, de la pantalla. Como los angloparlantes leen de izquierda a derecha y de arriba abajo, tiene sentido ponerla en el lugar donde, si lees tu escritorio como una página, ésta termina. Pero para alguien que habla árabe, es confuso tener la papelera en ese lugar, porque como los árabes leen de derecha a izquierda, la papelera está en el comienzo de la página.
Existe una razón por la cual las personas de mi ambiente hablan de la localización de un sitio web como algo un poco diferente de traducir uno. La traducción es cambiar las palabras de un idioma a otro. Localización se trata de cambiar todo lo demás. Y cuando digo todo, me refiero a todo (colores, fotografías, íconos, y sí, navegación). Para citar de nuevo a Krug, “La navegación revela el contenido”. Y nosotros estamos cambiando tu contenido para adaptarlo a un nuevo país o cultura. Entonces, la navegación puede tener que cambiar también.
El lugar donde ubicas los ítems de interacción afecta las acciones que realizan tus usuarios. Cuando un idioma se lee de derecha a izquierda no puedes poner “siguiente” en la derecha y “anterior” en la izquierda. ¡Sería al contrario de la forma en que tus usuarios leen! Lo que era una navegación altamente lógica en un idioma, se transforma en una navegación altamente confusa en otro.
¿Qué idiomas se leen de derecha a izquierda? Árabe, hebreo, urdu, farsi, amárico y yiddish caben en esta categoría, así como muchos otros. Algunos idiomas se leen en múltiples direcciones dependiendo del contexto, como el chino, japonés, y coreano.
¿Entonces, cómo se arma un plan para esto? Como diseñador, estás ocupado desarrollando un sitio web y no estás pensando en la posibilidad de planear desarrollar dos. Además, te prometí que el trabajo extra sería limitado.
La navegación vertical es siempre una idea, ya que elimina la necesidad de comenzar la lectura a la izquierda o derecha y ayuda a configurar la página para móviles, una dirección hacia la que tienden la mayor parte de los sitios web.
Otro gran truco es la accesibilidad. Como cada vez el diseño web tiene más que ver con optimización y diseño para móviles, la accesibilidad ha llegado a asegurarse que los zurdos tengan una experiencia de uso idéntica a los diestros. Aunque un zurdo angloparlante seguirá leyendo de izquierda a derecha, ante el aumento de los móviles y pantallas táctiles, un sitio totalmente accesible le permite igual acceso desde el lado izquierdo. Si desarrollas con la mente puesta en dar un acceso igualitario al usuario zurdo, ya tendrás una plataforma que es fácil de ser localizada para lectores de izquierda a derecha. (Figura 1).
Tan recientemente como en 2000, el inglés era el idioma dominante en internet por un margen del 26%. Pero para 2011, ese margen se redujo a 3%. En los últimos tres años China ha sumado más nuevos usuarios que los que son usuarios totales en Estados Unidos. La gente del mundo se está uniendo en línea.
Los principios básicos para llegar a todos ellos no son nuevos. Todo lo que he recomendado, en su base, es el principio básico de tener un sólido diseño del sitio web. Como profesional, estás acostumbrado a considerar la UX mientras desarrollas. Sólo hace falta un poco de atención para diseñar sabiendo que tu usuario puede no pensar, mirar, o hablar como lo haces tú. Pero el cristal ya está en su lugar. Sólo necesitamos girarlo para que tu sitio brille en todos los colores posibles.
