Flerspråkiga webbdesigntips med ConveyThis

Flerspråkiga webbdesigntips med ConveyThis: Förbättra användarupplevelsen och global räckvidd med praktiska designstrategier.
Förmedla denna demo
Förmedla denna demo
flerspråkiga designtips

Många webbplatser har nu många språkalternativ så att deras besökare från hela världen bekvämt kan surfa. Internet har hjälpt till att göra marknadsplatsen till en global upplevelse, så genom att ha en webbplats har du öppnat dörrarna till ditt företag för alla med en internetuppkoppling. Men om de inte förstår språket stannar de inte. Flerspråkig webbplats är lätt.

Lyckligtvis är processen att göra din webbplats flerspråkig ganska enkel. ConveyThis kan skapa en översatt version av din webbplats på några minuter och sedan kan du anpassa utseendet och placeringen av din språkväxlare, göra några layoutändringar för att passa ordspråk eller höger till vänster språk och ändra färger och bilder i de fall där originalen är olämplig för målkulturen.

Processen är inte helt automatiserad, du måste göra en del efterforskningar i förväg. Den här guiden förklarar några aspekter av webbdesign för att hjälpa dig att bekvämt ta dig in i en värld av flerspråkiga webbplatser och fantastisk design.

Konsekvent varumärke

Användarupplevelsen måste vara konsekvent oavsett vilken språkversion de besöker. Utseendet och känslan bör vara väldigt lika i alla versioner, vissa skillnader kan vara nödvändiga på grund av språk- eller kulturskillnader, men om du byter mellan språk ska du inte känna att du har blivit omdirigerad till en helt annan sida.

Därför bör designelement som layouten och ditt företags speciella varumärkesstil förbli desamma på alla språk.

Detta är superenkelt att göra i WordPress med ConveyThis, som perfekt identifierar text oavsett vilket tema du har valt (även om det är anpassat!) och automatiskt översätter det, även om du arbetar med andra plugins.

Detta hjälper dig att ha en global mall med samma tema för alla språk, och därför samma användarupplevelse.

Hemsidan för Airbnb fungerar utmärkt som ett exempel, låt oss ta en titt på den australiska versionen:

Flerspråkig

Och här är den japanska versionen:

BFG3BDujbVIYhYO0KtoLyGNreOFqy07PiolkAVvdaGcoC9GPmM EHt97FrST4OjhbrP0fE qDK31ka

Utan tvekan är detta samma webbplats. Bakgrunden är densamma och sökfunktionen likaså. Att ha en enhetlig design hjälper din varumärkesidentitet och sparar tid och ansträngning när du lägger till nya språk eller uppdaterar.

Tydliga språkväxlare

Välj en framträdande plats för språkväxlaren, som något av de fyra hörnen på din webbplats, och placera den på varje sida, inte bara på startsidan. Det måste vara lätt att hitta, ingen vill någonsin leta efter en dold knapp.

Det rekommenderas starkt att språknamnen är på deras eget språk. "Español" istället för "spanska" till exempel kommer att göra underverk. Asana gör detta, deras sida har en rullgardinsmeny med de tillgängliga språkalternativen.

Namnlös 3

På så sätt hjälper det besökarna att känna sig välkomna. Om din webbplats är översatt bör språklistan återspegla det. Att läsa "tyska, franska, japanska" på en engelsk webbplats gör inte navigeringen lättare för människor och det ger intrycket att den engelska versionen är den viktigaste.

"Språk" är bättre än "Regioner"

Många stora internationella varumärken får dig att byta region för att kunna läsa webbplatsen på ditt språk. Detta är en fruktansvärd idé som gör surfandet svårare för besökarna. Dessa webbplatser arbetar med antagandet att du surfar i regionen där språket talas, så du får texten på ditt språk men du kanske inte får innehållet för den region du är intresserad av.

Följande bild är tagen från Adobes webbplats:

vXH8q9Ebaz0bBmsIjXwrrdm FLGBdOQK86pf3A3xU6r BZB0hL5ICjrxSiv67P vOTNbP2pFSp17B530ArONrjgjryMZYqcQl5 WQuEAYvm6LArZiSXu m

Språk bör inte vara oskiljaktiga från sina regioner. Ta till exempel alla dessa kosmopolitiska städer som New York, London och Paris. Kanske en belgisk person som bor i Storbritannien vill köpa från den brittiska webbplatsen men surfa på franska. De måste välja mellan att köpa från den belgiska sajten på deras språk eller köpa från den brittiska sajten på engelska, och de vill inte göra någotdera. Du har alltså av misstag skapat en barriär. Låt oss ta en titt på en webbplats som låter dig specificera språk och region separat, Ubers webbplats.

mbauMzr80nfc26dg2fEg0md0cxau0Hfp

Detta är utmärkt design. I det här fallet har språkväxlingsalternativet placerats i sidfoten till vänster och istället för en dropdown-ruta har du en modal på grund av de många alternativen. Språknamnen hänvisas också till på deras eget språk.

1l3Vpc9jCrtXorq3xIhcXx9cl8L svuH9FBeMcNHNJ4A8j6dgnjXJgkfloLwmWyra1FstnQSvXR8C9ccnAGE Us2dCg4qSqnGzjbxDMx

Som en bonus kunde du "komma ihåg" vilket som var användarens valda språk så från det första besöket och framåt behöver de inte byta längre.

Upptäck plats automatiskt

Den här funktionen är väldigt användbar så att dina besökare inte kommer åt på fel språk. Och för att spara tid från användarens sida så att de inte behöver leta efter språkväxlaren. Så här fungerar det: webbplatsen identifierar språket som webbläsaren är på eller deras plats.

Men var försiktig om användaren är en turist och inte är bekant med det lokala språket eftersom de kommer att behöva språkknappen så att de kan byta, av denna anledning är verktyget inte alltid korrekt.

När du designar din flerspråkiga sajt, välj inte mellan autodetektering av språk och språkväxling, den senare är obligatorisk medan den förra är valfri.

Flaggor är inte lämpliga ersättningar för ett språknamn

Det finns 21 spansktalande länder och 18 engelsktalande länder, och i Kina finns det 8 primära dialekter, så flaggor är inte bra substitut för språknamn. Dessutom kanske flaggor inte är användbara indikatorer eftersom de kan förvirra dem som inte känner igen dem.

Var flexibel med textutrymme

Detta kan vara en utmaning, men det är obestridligt att översättningar inte upptar samma utrymme som originaltexten, vissa kan vara kortare, andra kan vara längre, vissa kan till och med behöva mer vertikalt utrymme!

wsEceoJKThGv2w9Qzxu gim H YPX39kktoHXy4vJcu aanoASp V KDOu90ae7FQpaIia1YKMR0RELgpH2qiql319Vsw

Kinesiska tecken innehåller massor av information så det behövs inte mycket utrymme, medan italienska och grekiska är ordligare och behöver dubbelt så många rader. En bra tumregel är att anta att vissa översättningar kan kräva mer än 30 % extra utrymme så var flexibel med layouten och tilldela gott om utrymmen för text. Dessa snäva klämningar på den ursprungliga webbplatsen kanske inte har tillräckligt med utrymme alls för översättningen, engelska är ett särskilt kompakt språk, och om du hittar behovet av att förkorta på engelska så att innehållet passar, kommer du definitivt att stöta på problem när det är dags att översätta.

Förutom att ha armbågsutrymme för text att sträcka ut är det också en bra idé att ha adaptiva UI-element så att knappar och inmatningsfält också kan växa, du kan också minska teckenstorleken, men inte för mycket.

Flickr-webbplatsen är flerspråkig, låt oss ta en titt på den ursprungliga "vyer"-knappen:

mi0VUOKft9BUwkwgswENaj31P2AhB2Imd8TxbekEY3tDB FbkUj14Y2ZkJEVC9Cu kifYc0Luu2W

Det ser fantastiskt ut, allt är bra, men "vyer" visar sig vara ett längre ord på andra språk som kräver mer utrymme.

FParMQU h2KHVVvEMwFqW6LWDN9IF V89 GlibyawIA044EjbSIFY1u4MEYxoonBzka6pFDyfQztAoreKpsd33ujCAFjPj2uh EtmtZy2l

På italienska kräver det tre gånger så mycket utrymme!

Många icke latinska skrifter, som arabiska, kräver mer höjd för att översättningen ska passa. Så för att sammanfatta bör din webbplatslayout vara tillräckligt flexibel för att anpassa sig till olika språkkrav så att det polerade utseendet på originalet inte går vilse i bytet.

Webbfontkompatibilitet och webbkodning

Enligt W3C rekommenderas det starkt att du kodar din webbsida med UTF-8 , som tillåter specialtecken.

Det är ganska enkelt, UTF-deklarationen ser ut så här

fbnRHXPPyY2OPijzOvFkH0y Ke

Se också till att typsnitten är kompatibla med de olika språken, annars kan texten bli oläslig. I grund och botten, innan du bestämmer dig för ett teckensnitt, kontrollera dess kompatibilitet med alla skript du behöver. Om du vill komma in på den ryska marknaden, kontrollera att det kyrilliska skriptet stöds.

Följande bild togs från Google Fonts och som du kan se kan du välja att ladda ner vilka skriptversioner du behöver. De språk med större mängder tecken ger större teckensnittsfiler, så ta hänsyn till det när du väljer och blandar teckensnitt.

tqld4w0nWjQGM9wtgp14c lhZSHppXp rYBRGFVjGTTcs8ghcedYxQUBqqWHLnt9OgAY 0qbDnNpxlclU

Angående höger till vänster språk

När marknaden i Mellanöstern växer kan du överväga att skapa en version av din webbplats som lockar besökare från denna region, det betyder att du anpassar layouten så att den är kompatibel med deras språk. Utmärkande för de flesta språk i Mellanöstern är att de läses från höger till vänster! Detta är en stor utmaning och lösningen börjar med att spegla gränssnittet.

Det här är Facebooks design för språk från vänster till höger, som engelska.

T538ZEA t77gyTvD EANq7iYfFuZEpJdCNZSqODajCjtiSQFk0Dyii ZVWBXy0G3gAaTKFFYDJ LjK4czPyFPbrIpV2

Och detta är den vända designen för höger till vänster språk, som arabiska.

EVTgCyVWk1ncmoRJsUrQBPVs6yF Et1WGOdxrGcCYfD5o6QVXSPHR16RamvBSIOLcin3qlTmSBZGyuOI7izJ6DlTo3eeFpU rQchvaz332E5dsCl9qzO T0byCJQR T0by

Titta noga, placeringen av allt i designen har speglats.

Kolla in Robert Dodis artikel om design för Right to Left-språk för ytterligare information om hur du gör detta.

Vissa höger till vänster-språk är arabiska, hebreiska, persiska och urdu och ConveyThis har inga problem med att anpassa din webbplats för att tillgodose deras språkkrav och säkerställa en fantastisk användarupplevelse. Och det bästa är att du kan anpassa utseendet på varje språk och göra ändringar i typsnittet eller dess storlek, och vid behov redigera radhöjden.

Välj lämpliga ikoner och bilder

Visuella bilder har en mycket tung kulturell komponent och är nyckelelement i korrekt webbdesign. Varje kultur tilldelar olika bilder och ikoner mening, vissa tolkningar är positiva och andra helt tvärtom. Vissa bilder speglar upplevelserna av ideal från en kultur, men i ett annat sammanhang kommer det att få användarna att känna sig främmande.

Här är ett exempel på en bild som måste bytas ut eftersom den inte var kulturellt lämplig. Observera att alla bilder inte kommer att vara stötande för andra, kanske skapar det bara apati när du vill att folk ska vara nyfikna och intresserade av din produkt.

Detta är Clarins hemsida för det franska språket, med en kaukasisk kvinna. Och här är den koreanska versionen, med en koreansk kvinna som varumärkets ambassadör.

I0XpdO9Z8wCAyISgVJtZVhwOOehAR1BYLkEKpzL1Cw7auye4NVvt7S YIgE30VXOxYqOXilRDqLAMyJzCJc tecDWVsRpE4oyyj9QFvoB0 dTzQkUTsQJAdI

Den typ av bilder som kan kränka är de som kan verka oskyldiga för vissa kulturer, men i en annan kulturs ögon visar de beteenden som är olagliga eller tabubelagda, till exempel skildringar av homosexualitet eller kvinnlig egenmakt.

Detta gäller även ikoner, medan i USA en ikon med två champagneglas som rostar representerar firande, i Saudiarabien är det olagligt att dricka alkohol så den ikonen måste ersättas med en kulturellt lämplig.

TsA5aPbhznm2N vv qL
(Bildkälla:StealKiwi)

Därför kommer det att krävas forskning för att säkerställa att de ikoner du har valt är lämpliga för målmarknaden. Om du inte är säker kan du alltid spela säkert.

Till exempel, dessa tre ikoner med jorden, den första designades för australiensisk publik; den andra, för afrikansk publik; och den sista är lämplig för en större och global publik eftersom inget särskilt område visas.

cx90RYDHGTToOiC uMNKG9d8QM JDZzP0SFaSBobQduZ14CZwpuuKrgB1eUothyoAHsoxd77nQVgvnaocQm3oW R6X3bRxeHdjJ

Sist men inte minst kan ConveyThis översätta vilken text som helst, så länge den inte är inbäddad i en bild. Programvaran kommer inte att kunna identifiera vad den är skriven på den så den förblir på originalspråket, så undvik att bädda in text.

Val av färger

Som nämnts i föregående avsnitt tolkar kulturer bilder på olika sätt och samma sak händer med färger. Deras betydelser är subjektiva.

Till exempel, i vissa kulturer är vitt oskuldens färg, men andra skulle inte hålla med, det är dödens färg. Samma sak händer med rött, i asiatiska kulturer används det vid fester men för vissa afrikanska länder har det inte en så positiv klang då det är kopplat till våld.

Det verkar dock som att blått är den säkraste av alla färger, vanligtvis förknippad med positiva betydelser som lugn och frid. Många banker använder blått i sina logotyper eftersom det också kan innebära förtroende och trygghet.

Den här artikeln visar skillnaderna i färgbetydelser över hela världen, mycket användbar för att starta din forskning om vilka som är de bästa färgerna för din flerspråkiga webbplats.

Formatjusteringar

Överväg att undvika att endast använda siffror när du skriver datum eftersom det finns många olika sätt att skriva dem, i USA är det officiella formatet mm/dd/åååå och om du bara kan se siffrorna kan vissa användare från andra länder som använder olika system (t.ex. dd/mm/åååå) kan bli förvirrad. Så dina alternativ är: se till att de översatta versionerna har datumformatet anpassat eller skriv månaden med bokstäver så att ConveyThis alltid kommer att skriva rätt datum.

Dessutom, medan det kejserliga systemet används i USA, använder de flesta länder det metriska systemet, så du måste bestämma dig för om det skulle vara lämpligt för din webbplats att omvandla måtten.

Det bästa översättningspluginet för WordPress

Det finns så många alternativ när det gäller att lägga till ett översättningsplugin till din WordPress-webbplats och inte alla fungerar på samma sätt, resultaten kommer att variera. Med ConveyThis är du garanterad en perfekt integration oavsett din webbdesign.

ConveyThis är det bästa valet för webböversättning med 92 tillgängliga språk. Det är ett pålitligt WordPress-plugin som gör att du snabbt kan ha en stabil flerspråkig version av din webbplats. Den kan förstå webbplatsens layout, upptäcka all text och översätta den. ConveyThis inkluderar också en intuitiv redigerare för textanpassning.

ConveyThis inkluderar en språkväxlingsknapp i en storlek som passar alla som fungerar med alla webbplatser som standard, men du kan också redigera den så mycket du vill. Vi följer också designprinciperna som anges i den här artikeln:

  • Konsekvent varumärke på alla språkversioner av webbplatsen.
  • Rensa språkväxling och möjlighet att välja ett föredraget språk.
  • Webbplatser kodas automatiskt med UTF-8.
  • Korrekt gränssnitt för höger till vänster språk

ConveyThis: en flerspråkig webbplatslösning som du kan lita på

Det är allmänt trott att webböversättning är en komplex process. Men det finns ingen anledning att skjuta upp det eftersom du inte vill ta itu med huvudvärken. Det är inte alls skrämmande! Med ConveyThis blir det en enkel konvertering. Det är sömlöst och snabbt.

Efter en snabb installation kan nu allt ditt innehåll översättas utan att formateringen påverkas, och det inkluderar innehåll som genererats av andra appar och kassaprocessen. ConveyThis är ett enkelt verktyg för flerspråkig översättning av webbplatser som inte kommer att göra en enda röra av din kod, som andra gör.

Möjligheten att beställa professionella översättningar av din webbplats finns också! De kommer att hjälpa dig att helt förvandla din flerspråkiga webbplats till en multikulturell, vilket drastiskt förbättrar dina kunders upplevelse. Kom ihåg att om du översätter en webbplats måste du också ha kundsupport tillgänglig på din nya kunds språk. Överväg att investera i innehållslokalisering och anpassning för att garantera en fantastisk användarupplevelse för dina besökare.

Kommentarer (4)

  1. Slutet i sikte för Google-Translate för webbplatser! – Förmedla detta
    8 december 2019 Svar

    […] den datorrelaterade texten på svenska språket. Element som dessa hjälpte designteamet att formulera en väg för kunder som besökte plattformen, till en enkel översättningsupplevelse och att undvika drop-scroll-indexet som tidigare […]

  2. Global sökmotoroptimering för alla språkplattformar – förmedla detta
    10 december 2019 Svar

    […] idéerna kring den flerspråkiga plattformen och kundbasen formuleras, följande skulle vara en titt på den textmässiga ingrediensen till språket […]

  3. Gör din WooCommerce flerspråkig – förmedla detta
    19 mars 2020 Svar

    […] och få en lingvist från ConveyThis-teamet att ta en titt och redigera den så att du kan vara säker på att formuleringen och tonen passar dina butiksvärderingar och […]

  4. Hur anpassningsbar är WooCommerce? – Förmedla detta
    23 mars 2020 Svar

    […] att bilder alltid är mycket laddade med kulturell betydelse, och olika publik har olika förväntningar på hur butiker ska visa sina […]

Lämna en kommentar

Din e-postadress kommer inte att publiceras. Obligatoriska fält är markerade*