Design til internationalisering

Byg bedre produkter til mennesker over hele verden

Forestil dig, at du prøver en ny app for første gang. Det får rave anmeldelser fra folk på Twitter. De siger, det er strålende. Skelsættende. Dejlig.

Du starter det og ser dette:

Hmm. Det er underligt. Der er en video øverst, men billedtekstene er på et sprog, du ikke forstår. Ordlyden er underlig, og knappeteksten passer ikke engang i knappen. Hvordan kunne folk synes, at dette er godt?

Det viser sig, at denne app ikke er designet på dit sprog. Det blev designet på Elvish, derefter oversat til dit sprog. De fleste bruger Elvish-versionen, så de ved ikke, hvordan ting ser ud på dit sprog.

Tro det eller ej, det er det, ikke-engelske brugere er nødt til at tackle med gang på gang. Da mange apps kun er designet med tanke på engelsk, kan nogle designdetaljer gå tabt i oversættelse, hvis du ikke er omhyggelig.

For at undgå at løbe ind i situationer som ovenstående er her et par tip, du skal huske på, når du designer til internationalisering.

1. Giv plads til længere oversættelser

Det mest almindelige internationaliseringsproblem er ikke at have nok plads til oversættelser.

Tænk f.eks. På etiketten “Ny!”. På engelsk er det 4 tegn med udråbstegn. Men på fransk er det 9 karakterer: “Nouveau!” Det er mere end dobbelt så stort som engelsk. Og ja, på fransk skal der være et mellemrum inden udråbstegn.

Hvis dit design inkluderer ord, skal du sørge for, at du har plads nok til længere oversættelser. Hvis du ikke gør det, kan du muligvis ende med overlappende tekst eller tekst, der bliver afskåret.

Åh åh. Det føles lidt trangt herinde.

En måde jeg estimerer oversættelseslængder er ved at bruge Google Spreadsheets. Ved hjælp af GoogleTranslate-funktionen kan jeg få maskinoversættelser til en masse sprog på én gang. Inden for få sekunder kan jeg få en grov idé om, hvor længe oversættelserne kan vare på hvert sprog.

Et værktøj, jeg lavede i Google Spreadsheets til at estimere oversættelseslængder

IBMs globaliseringssite har et nyttigt diagram, der viser, hvor meget ekstra plads der er behov for, når du oversætter fra engelsk:

2. Undgå at placere tekst i smalle kolonner

Kolonner er en fantastisk måde at organisere dit indhold på. De skaber balance, struktur og rytme. De fungerer godt med dit omhyggeligt udformede gitresystem.

Men hvad sker der, når længden på din tekst bliver uforudsigelig? Det er, hvad der sker under oversættelse. Dine 1-linje overskrifter kan vokse til 2 eller 3 linjer, og dit smukt afbalancerede layout kan pludselig bryde.

Indpakning af oversættelser kan ødelægge en designerdag.

Når du lægger tekst i smalle kolonner, er der en god chance for, at nogle oversættelser indpakkes i flere linjer. Et mere sikkert valg er at bruge brede rækker i stedet for smalle søjler. Det giver din tekst mere plads til at vokse uden at ødelægge dit layout.

3. Integrer ikke tekst i billeder

Hvis dit design inkluderer et billede med tekst deri, kan det være et mareridt at få dette billede oversat til en masse sprog.

Oversættere kan oversætte hvert af tekstlagene i en Photoshop- eller Sketch-fil, men det bliver rodet, fordi du muligvis bliver nødt til at justere layoutet på hvert sprog for at rumme længere oversættelser.

Her er et par bedre muligheder:

  • Brug linjer i stedet for tekst: Nogle gange behøver du ikke bruge rigtige ord for at få din besked på tværs. Det er forbløffende, hvad et par uklare linjer kan gøre.
  • Overlay-tekst med CSS: Teksten i den grønne cirkel nedenfor er ikke en del af billedet. Teksten blev lige tilføjet ovenpå ved hjælp af CSS.

4. Opret ikke sætninger med brugergrænsefladeelementer

Det er almindeligt, at designere flytter forskellige UI-elementer rundt for at se, hvilke layout der fungerer bedst. ”Lad os placere dette tekstfelt her til højre. Lad os flytte denne dropdown til venstre. ”

Men du skal være ekstra forsigtig, når du arbejder med ord. Hvis du forsøger at danne sætninger ved at kombinere tekst med knapper, bokse eller dropdowns, havner du ofte i en masse problemer.

Dette kan blive rodet til internationalisering.

Der er nogle få grunde til, at dette er en smerte for internationalisering:

  • Forskellig ordrækkefølge: Sprog har forskellige måder at ordne ord på. Hvis du oversætter "Køb 3 skjorter" til japansk, vil ordet "Køb" flytte til slutningen af ​​sætningen. Hvis dit design afhænger af ord for at være i en bestemt rækkefølge, fungerer det ikke på alle sprog.
  • Pluralisering: På engelsk har vi en enkeltform og en flertalsform for hvert substantiv: “1 billede” og “__ billeder.” Men på russisk er der 3 mulige former. Så hvis en bruger skal indtaste et tal i midten af ​​en sætning, kan den sætning muligvis ende med en grammatisk fejl, afhængigt af det nummer, de indtaster.
  • Køn: Nogle sprog har kønsspecifikke former for navneord og adjektiver. På fransk kunne ordet "stort" oversættes til "storslået", "grande", "grands" eller "grandes" afhængigt af det, det beskriver. Hvis du placerer en dropdown i en sætning, kan den sætning muligvis ende med en grammatisk fejl afhængigt af ordene omkring den.

Så hvad gør du i stedet? Et bedre alternativ er at holde UI-elementet ude af sætningen:

Det er bedre at forlade UI-elementer uden for sætningen.

5. Pas på metaforer

Produktdesign handler om metaforer. Hvert ikon, hver knap og enhver interaktion er en metafor for noget i den fysiske verden. Dropbox-ikonet er en metafor for en opbevaringsboks. Klik-og-træk er en metafor til at samle ting op med din hånd.

Men nogle metaforer betyder forskellige ting i forskellige kulturer. I USA repræsenterer en ugle visdom. I Finland og Indien kan en ugle repræsentere dumhed.

Objekter kan også se anderledes ud over hele verden. For de fleste amerikanere er det temmelig klart, at objektet herunder er en postkasse. Men dette er ikke, hvordan postkasser ser ud over hele verden. De fleste lande lægger ikke flag på deres postkasser, så denne metafor er måske ikke mening for alle.

Sådan ser en mailbox ikke ud i de fleste dele af verden.

Hvis det er muligt, er det en god ide at undersøge metaforer, før du inkluderer dem i dit design. Hos Dropbox vil vi ofte bede vores internationaliseringsteam om at gennemgå ikoner eller illustrationer, hvis vi er bekymrede for, hvordan de opfattes internationalt.

6. Brug beskrivende funktionsnavne

Fra et marketingperspektiv er det fristende at opfinde sjove funktionsnavne, der får folk til at tale. Men sjove navne er vanskelige at oversætte, og de kan muligvis være meningsløse på andre sprog.

For mange år siden introducerede Dropbox en funktion, der lader brugere have ubegrænset versionhistorik på en fil. Vi kaldte oprindeligt denne funktion "Packrat."

“Packrat” mulighed med et lille rotteikon

Mens "Packrat" muligvis har været et kløgtigt navn for et amerikansk publikum, gav det ingen mening på andre sprog. Rotteikonet ved siden af ​​gjorde tingene endnu mere forvirrende. Heldigvis ændrede vi navnet til "Udvidet versionhistorik", som var så meget lettere at oversætte.

For at undgå oversættelsesproblemer er det mere sikkert at bruge beskrivende termer til funktionsnavne. Beskrivende termer kan virke lidt kedelige, men de er også bedre til oversættelse og brugervenlighed.

7. Giv alternativer til oversættelse

Generelt, når du skriver ord, der skal oversættes, er det bedst at skrive i en stil, der er præcis, bogstavelig og neutral. Der kan dog være særlige branding-øjeblikke, hvor du vil være lidt mere legesyg.

I tilfælde som dette skriver vi undertiden to versioner: en version til engelsk og en alternativ version til oversættelse.

Du kan gøre dette ved at tilføje kommentarer til oversættere til alt, hvad der er vanskeligt at oversætte. Vi skriver i øjeblikket etiketter til klistermærker, der bruges i Dropbox. Vi besluttede at bruge “OMG cat” som etiketten til klistermærket herunder.

IH, du godeste! Det er OMG-kat.

Når oversættere arbejder med dette, vil de se en kommentar, der siger, at dette også kan oversættes som "overrasket kat." På den måde har oversættere friheden til at bruge en legende oversættelse, men de kan falde tilbage på en mere bogstavelig oversættelse, hvis det er nødvendigt.

Håber du fandt, at nogle af disse tip var nyttige. Hvis du har andre designtips til internationalisering, er du velkommen til at chime ind nedenfor, så vi alle kan lære af hinanden. Ved at sprede ordet om internationalisering håber jeg, at vi alle kan gøre vores del for at opbygge bedre produkter til mennesker rundt om i verden.

Vil du have mere fra Dropbox Design-teamet? Følg vores publikation, Twitter og Dribbble. Vil du lave magi sammen? Vi ansætter!

Mange tak til alle, der hjalp med at fortælle denne historie, herunder Fanny Luor, Jensen Hong, Adam Sawyer, Dawn Lee, Andrea Drugay, Anthony Kosner, Dave Weiss, Galina Mishnyakova, Kurt Varner og alle de utrolige i18n-guruer, der har lært mig det meget gennem årene.