Vícejazyčné lekce návrhu uživatelského rozhraní

Zajímavý a poučný článek od Sima Herolda, který vypráví o tom, jak nejlépe navrhnout vícejazyčná rozhraní ve fázi návrhu a kterým chybám je třeba se vyhnout. Praktické rady a doporučení.

Vícejazyčný design ovlivnil přístup k rozhodování o designu bez ohledu na to, zda byl produkt vytvořen v jednom nebo více jazycích. Problémy uvedené v tomto článku jsou založeny na několika problémech, kterým návrhář čelí při vytváření existujícího a fungujícího produktu, který podporuje nové jazyky (a regiony).

Najít produkt v určité fázi může být důležité role v designu. Budování s již existujícím produktem přináší vlastní sadu jedinečných výzev a omezení (omezení nemusí být nutně špatná), která vám opravdu pomohou přemýšlet o tom, co je důležité.

Bez ohledu na fázi vývoje produktu je design o řešení problémů. Pseudo-lokalizace Netflixu je dobrým příkladem toho, jak Netflix přistoupil k designu uživatelského rozhraní pro více jazyků.

Při výběru designu může hrát roli mnoho faktorů a pravděpodobně neexistuje správný nebo nesprávný přístup, ale některé mohou být lepší nebo horší než jiné. Otázky v tomto článku se mohou zdát dost běžné, ale lze je snadno přehlédnout nebo ignorovat, dokud se něco nepokazí.

Poučte se z chyb.

Rozbité uživatelské rozhraní je výchozím bodem

Všechno jde hladce, dokud nebude v produktu, který jde pouze v angličtině, implementován nový jazyk známý svými dlouhými slovy. Jazyk byl německý a to kazilo uživatelské rozhraní. Otevřelo mi to oči a začal jsem přistupovat k volbám designu s novým přístupem.

Z důvodu „nefunkčního“ uživatelského rozhraní je nutné přehodnotit přístup k rozvržení, prvkům a textu v návrhu, aby byla zachována jeho konzistence ve všech jazycích. Změna velikosti písma, aby se přizpůsobila novému jazyku, není tím nejlepším přístupem, když existují časová a zdrojová omezení, která rovněž neumožňují velké změny designu, a změny designu by měly být minimální – je to jako dominový efekt: když se změní jeden ovlivňuje to zbytek. Tato situace spouští větší plán přehodnocení informační architektury pro budoucí integrace.

Cílem je mít jeden produkt místo vícejazyčných řešení. Tyto opravy se týkají hierarchií, kontextu, deklarace (zjednodušení, zbavení se zbytečných prvků), jazyka a specifikací.

Hierarchie je priority definice

Použití návrhového systému k sestavení uživatelského rozhraní může pomoci udržet konzistenci a urychlit váš pracovní postup, ale tyto systémy nejsou vždy k dispozici. V takových případech může být při vytváření návrhu primární vodítko vytvoření hierarchie a stanovení priorit prvků na dané obrazovce. V ideálním případě by tyto volby měly zvážit, jak všechny zapadají do velkého obrazu.

Jaký je účel této obrazovky a co by měl uživatel udělat? Proč? To neznamená, že k dosažení požadovaného cíle musíte některé prvky odebrat nebo konkrétně skrýt, ale spíše o vytvoření vizuální hierarchie mezi všemi prvky na obrazovce, které uživatele vedou k požadovanému cíli.

Přemýšlení o obsahu, primární, sekundární a terciární akce může zúžit výběr designu. Terciární akce obvykle chybí, když je kladen velký důraz na snahu zachovat jednotný vzhled, tj. Přílišné zaměření na estetické udržení „rovnováhy“, když tyto dva účinné prvky ve skutečnosti nepatří do stejné hierarchie.

Jednoduchým příkladem ve formě by mohly být akce „zrušit/zavřít“, „potvrdit/odeslat“. Pokud akce „zpět“ a „odeslat“ vypadají a chovají se stejně, je pravděpodobné, že by uživatele zmátly. Pokud je cílem odeslat formulář, proč tedy zvýrazňovat akci „zrušit/zavřít“? Pokud tento formulář říká „uložit na později“ – může to změnit pravidla hry. Je „potvrdit/odeslat“ hlavní akce, „uložit na později“ sekundární akci a „zrušit/zavřít“ terciární akci? Vše závisí na cílech a prioritách.

„Rozbité“ uživatelské rozhraní jasně ukazuje, že návrh ve skutečnosti nezohledňoval priority nebo hierarchii interakcí. Je čas přehodnotit design a rozvržení rozvržení, aby se vytvořila hierarchie.

Pokud změníte dvě hlavní akce na primární a terciární, pak se uživatelské rozhraní obrazovky nebude lišit od nového designu a bude flexibilnější než dříve. Do systému návrhu byl také přidán nový terciární styl, který se neustále vyvíjí a tyto případy pomáhají spojit je do souvislého systému.

Jazyk je stejně důležitý jako vizuální styl.

deklarace – důležitost kontextu

Ikony mohou pomoci vytvořit náladu a dojem z uživatelského rozhraní a pomoci uživateli dosáhnout požadovaný úkol. Rozhodnutí použít pouze ikonu, pouze text nebo kombinaci obou závisí do značné míry na skupině uživatelů, akci a kontextu obrazovky a produktu.

To vše může fungovat, ale tlačítko pro přidání do košíku opravdu potřebuje ikonu? Ikona je ve skutečnosti taška. Nákupní vozíky se často mění na tašky, ale zdá se, že text „přidat do košíku“ stále zůstává (?) – Možná se „přidat do tašky“ v online prostředí stále zdá divný nebo neznámý?

K nahlášení akce může být tlačítko s ikonou a textem. Důvodem pro výběr kombinace obou je, že tato ikona bude přidružena k akci a bude se zobrazovat v jiných částech produktu. To je způsobeno touhou vytvářet sdružení.

Vědí však uživatelé, že takové odkazy lze snadno vytvořit, když akce není tak jednoznačná jako například jako prvek? Možná někdy může snaha o přílišnou jasnost vést také k přetížení komunikace a příliš malý přístup může akci ponechat nedotčenou.

V tomto případě by přítomnost další ikony vedla k narušení rozložení pro německou verzi. Díky tomuto objevu, pokud budete kopat hlouběji, zjistíte, že přidání ikony by ve skutečnosti neprospělo uživateli (to bylo jasné i bez ikony). K sdělení akce bylo dostatek textu, což dále odůvodňovalo deklaraci. V tomto případě by použití pouze jedné ikony nefungovalo.

V jiném případě se jednalo o ikonu, která vypadala samozřejmostí, ale uživatelské testování a průzkumy ve skutečnosti zjistily, že ikona byla uživateli vnímána odlišně, a ve výsledku byla ikona odstraněna a nahrazena textem.

Výsledky z hlediska indikátorů byly velmi odlišné, v pozitivním smyslu. Nová možnost textu nebyla tak „cool“ jako předchozí esteticky příjemná ikona, ale sloužila nejlépe uživateli i firmě.

Kontext a jasnost jsou důležité

Levá strana vypadá velmi jasně, ale pokud přemýšlíte o počtu opakování a jak těsně to bude vypadat, když to budete ukazovat pořád? To může ztěžovat soustředění na to, na čem opravdu záleží. Ikony budou v tomto případě fungovat lépe a mohou dokonce zvýšit zapojení.

Mnoho aplikací se připojuje k začínajícím uživatelům, což obvykle stačí k tomu, aby od nynějška věděli, jak používat řešení.

Mnoho lidí nezná značku nízkého tlaku v pneumatikách na automobilech (TPMS – Tire Pressure Management System). Tyto značky jsou obvykle obecně univerzální a používají se v různých značkách a zemích a mají také specifickou barvu. Navzdory skutečnosti, že mnoho uživatelů (ovladačů) si není stoprocentně jistých jeho významem, měl by mechanik vědět, v čem je problém, při pohledu na označení.

Bylo by možné upozornit řidiče uvnitř systému automobilu kromě zobrazení výše uvedené ikony (například prostřednictvím hlasového rozhraní a případně nápisu „nízký tlak v pneumatikách“ někde, který nezasahuje do řízení), ale vytvoření vlastní ikony protože takové důležité bezpečnostní opatření by mohlo být nebezpečné a nezodpovědné jen kvůli originalitě nebo podle vašeho stylu.

To může způsobit ještě více problémů, například zelenou stopku – je to jasné nebo matoucí? (I když se zdá, že existuje). Znovu záleží na kontextu.

Jazyk – významové rozdíly

Překlad produktu může být vzrušující. Existuje pocit růstu a rozvoje, ale mohou nastat možné problémy. Mnoho z těchto překážek může souviset s tím, jak je překlad vytvořen. Čas a zdroje mohou ovlivnit kvalitu překladu. Obvykle existují dva možné způsoby nebo jejich kombinace: lidský překlad nebo počítačový překlad.

Překlady s pomocí počítače a umělé inteligence (AI) se výrazně zlepšily a mohou poskytnout rychlé a dostupné řešení pro překlad produktů. Přesnost překladu AI se může u každého jazyka lišit. Bez ohledu na to, která metoda byla zvolena, překlad musí zkontrolovat jiná osoba (rodilý mluvčí).

Hledání překladatele také není bezproblémové. Často je možné zjistit, že překlady jsou přímé překlady, což může způsobit problémy. Například ve finštině může mít jedno slovo několik významů:

  • Kuusi palaa = Šest kusů
  • Kuusi palaa = Šest návratů
  • Kuusi palaa = Smrk hoří
  • Kuusi palaa = Smrk se vrací
  • Kuusi palaa = Váš měsíc se vrací

Který?

Aby mohl překladatel zajistit kvalitní překlad, musí znát odvětví a kontext. Bude velmi dobré zapojit překladatele do procesu návrhu co nejdříve. Jedno slovo lze použít v jednom jazyce, ale v jiných rezonovat nemusí. Pokud překlad provedete tak rychle, jako vyplníte buňky v souboru Excel a odešlete jej e-mailem, může snadno dojít k výše popsané situaci.

Můžete také vidět, jaká slova používají vaši „velcí“ konkurenti. Obvykle museli tvrdě pracovat, aby našli nejideálnější variantu. To neznamená zkopírovat text, ale z hlediska obecného jazyka uživatelského rozhraní. Pokud kopírujete slovo od slova „zazaam thou in my bin“ – je velmi personalizované a odkazuje přímo na konkrétní značku a bude považováno za kopírování. „Přidat do košíku“ je stále docela běžné.

Podle rychlého překladače Google „Přidat do košíku“, v němčině by to bylo „in den Warenkorb legen“, toto uživatelé ověřili. Pokud prozkoumáte několik německých maloobchodníků, abyste zjistili, jak používají tuto frázi na svých webových stránkách:

  • Zara Německo: „Hinzufügen“
  • Tommy Hilfiger Německo: „Artikel Hinzufügen»
  • Amazon Německo Německo: „In den Einkaufswagen“
  • Ikea Německo Německo: „In den Warenkorb“

Výběr jazyka Ikea se nejvíce přiblížil Překladači Google. Který byste použili? To je ovlivněno odvětvím, ve kterém pracujete.

Nedorozumění během překladu se vyskytuje poměrně často a tento problém lze vyřešit důkladnější diskuse. jazyk s překladatelem a vlastníkem produktu.

Jazyk také vyjadřuje osobnost. Jiné jazyky mají také čestné odznaky, které se v angličtině nenacházejí. Pravidla pro používání velkých písmen se navíc liší v němčině a angličtině – to, co se v angličtině může zdát jako chyba, může být v němčině správné. MŮŽETE KAŽDÉ použít CAPS LOCK je bezpečnější? kapitalizace? křičet?

V některých případech také stojí za zvážení, zda je použití jedné ikony dostatečně univerzální k vyjádření akce (například další a předchozí indikátory šipek). Nezapomeňte uvést, že kromě jazyka existují rozdíly v měrných jednotkách mezi zeměmi.

Jazyk je velmi důležitou součástí každého uživatelského rozhraní.

Specifikace -“ flexibilita „rozvržení

Mřížky a rozvržení jsou velkým tématem. O používání mřížek a jejich rozbíjení se hodně diskutuje. I když jsem na rozdíl od mřížek neviděl tolik pozornosti detailům jako řádkování, pevné prvky, maximální a minimální šířky a konzistentní omezení, což může hodně pomoci, pokud bude přidáno jako součást specializace pro přenos.

Vždy existuje nebezpečí přetížení informací, ale tyto podrobnosti nemusí být pro každou obrazovku a pro každý případ – obvykle musí mít obrazovky určitou konzistenci, pokud mají podobné části stejné specifikace nebo jsou součástí společné specifikace. Je možné zkontrolovat design uživatelského rozhraní v nástrojích, jako je Zeplin, ale ne vše v něm bude k dispozici.

Často zjistíte, že delší řetězce znaků nejsou v názvech produktů brány v úvahu. To je velký problém. Musíte přehodnotit maximální šířku prvků na obrazovce a rozhodnout se, zda omezit počet znaků nebo co se stane, pokud je textový prvek příliš dlouhý. Nebyl prostor k zabalení do druhého řádku musel být po určité velikosti postavy zmenšen. Poskytnutí rady ohledně ideální délky symbolu předem může také udělat zázraky.

Změny založené na hierarchii, kontextu, deklaraci, jazyku a specifikacích pomohly vyřešit mnoho špatných problémů s uživatelským rozhraním, ale to neznamená bylo to připraveno – práce pokračuje.

⚡ Pokud se vám tento materiál líbil, můžete mě sledovat na Instagram/Facebook/Medium/Linkedin. Zde najdete zajímavější designové materiály.

Překlad do ruštiny: Komarov.Design/Alina Ostapenko/původní publikace. Autor: Simo Herold/Zdroj

#localization

Máte zájem o podobný design?

Další práce

Objednávka designu

Naše portfolio obsahuje stovky projektů: interiérový design, webové stránky, reklamní kampaně, loga, corporate identity. Každý úkol řešíme smysluplně, elegantně a krásně.

Abychom mohli začít, musíme si promluvit. Stačí něco říct o vašem projektu, nechat kontakty a my Vás budeme kontaktovat, abychom vše probrali.