多言語サイトのUIを設計するためのベストプラクティス？
私は、海外のクライアントにブランド監視とソーシャルメディア分析を提供する会社のUIを担当しています。現在、3つの異なる言語でシステムを提供していますが、これは今後拡大することが予想されます。
たとえば、テキスト文字列の長さが言語間で大きく異なる可能性がある状況でUIを設計するのに最適な方法に関するいくつかのガイドラインまたはヒューリスティックを探しています。何か案は？紹介？
設計している国によって使用例が異なるため、ヒューリスティックやベストプラクティスについては知りません。ただし、この優れた記事 Global by Design：世界中で使えるウェブデザインの作成 は、いくつかの貴重な情報を提供します。
- グローバルテンプレートのデザインの範囲を確認します（一意のケースを除く）：色とフォントを変更するための十分なカスタマイズオプションを備えたグローバルテンプレートの可用性仕様は、すべてのサイトで統一された外観を維持するのに役立ち、ユーザーが同じ情報を見つけるために周りを見回す必要がないことも保証します（レイアウトは同様に構成されているため）。上記の記事から引用するには：
Eli Lillyを検討してください。数年前、地元のオフィスは独自に設計されたサイトを管理していました。すべての国が独自の独自のデザインを持っていることには本質的に問題はありませんが、これらすべてのデザインの設計と維持にかかる総コストは重要です。ローカルリソースは、ローカルコンテンツの作成によりよく費やされます。グローバルなデザインテンプレートにより、地方のオフィスがそれを実行できるようになり、国のウェブサイト間を移動するユーザーのユーザーエクスペリエンスも向上します。たとえば、Webユーザーが.comサイトにアクセスし、その後特定の国のWebサイトにアクセスする場合、一貫したデザインはそれほど混乱しません。ユーザーはナビゲーションを再学習する必要はありません。
現在、Eli Lillyは優れたグローバルテンプレートを使用しており、ローカルコンテンツとプロモーションのためのスペースを確保しながら、グローバルな一貫性をサポートしています。
ただし、グローバルテンプレートはほとんどの言語で機能するはずですが、デザイン全体が反転するため、言語のデザインを左から右に読み取る可能性があることを再考する必要がありますその場合。 Facebookがアラビア語のページをどのように構成するかの例を見てみましょう。
- テキストの拡大と縮小のデザイン：ご指摘のとおり、テキストは異なる言語で拡大または縮小される場合があります。これを説明するために、上記の記事は次のように述べています：
一般的なルールは、英語からドイツ語に移行するときに最大30％から40％のテキスト拡張を計画することです。これは、テキスト拡張の最も極端な例の1つです。英語からスペイン語またはフランス語に移行しても、おそらく10％から20％の拡大しかありません。ターゲット言語用に安全に設計するには、35％の拡張という目標が適切なガイドラインです。
テキストの展開は、メニューに大混乱をもたらす可能性があります。厳密な文字長を維持しながら、1つの単語をある言語から別の言語に翻訳することは、非常に困難な場合があります。たとえば、英語の "Search"はフランス語の "Rechercher"に変換されます。これはほぼ2倍の長さです。メニューを拡張するために、追加の40％以上のスペースを確保してください。
また、この記事は、現在のWeb翻訳者や自動翻訳者が正確に正しくないため、プロの翻訳者を使用して正しい単語を使用してナビゲーションやコンテンツを示すことの重要性について優れた点を提起しています。
- 異なるフォントサイズの設計：フォントサイズは言語によって異なる可能性があり、標準に一貫性があることを確認する必要があります。上記の記事の例を示します。
たとえば、アコーホテルズのドイツ語と中国語のWebページを考えてみます。ここに示すように、アコーは12ポイントで中国語フォントを指定し、ドイツ語フォントは10ポイントで指定しています。
ここにあなたが読むためのいくつかの追加のリソースがあります：
国を選択、言語を選択：ユーザーフレンドリーなグローバルゲートウェイの開発
ウェブサイトを多言語対応にするためのヒント -多言語サイトを設計する際に考慮すべき側面について、以下に簡単に要約したいくつかの本当に良いヒントがあります。
- Unicodeを使用する：Unicodeを使用することで、さまざまなタイプの10万を超える文字をサポートするため、Webサイトを多言語に対応させることができます。また、すべてではないにしても、ほとんどのWebブラウザーとプラットフォームでサポートされています。したがって、Unicodeに切り替えても、長期的にはメリットがあります。
- 柔軟な設計：多言語サポートを設計する場合、左から右への互換性が容易であるという意味で、言語を中心に設計を構築する必要があります。右から左への言語
- テキストを含む画像に切り戻す：これは、テキストがこれらの画像に埋め込まれていて、ユーザーが言語を切り替えたときに同じテキストが表示されるためです（ただし、彼はその言語の特定のページにリダイレクトされます）または代替画像は言語切り替え時に自動的に挿入されます
- 色を賢く選択してください：ただし、多言語サポートを追加する場合は、Webサイトに選択した色が、ネガティブなしで何を行っているかを反映していることを確認する必要があります特定の文化に影響を与える：
価値のある別の記事は読む価値があります： 多言語ウェブサイトのアクセシビリティのための7つのヒントとテクニック
良い質問....
通常の方法は次のとおりです。
- 幅広い言語をサポートするフォントを選択する
- 書かれたテキストを含むものは、コンピュータで生成する必要があります-グラフィカルヘッダーを含む
- 翻訳はフィールドオーダーをサポートする必要があります。たとえば、ハンガリー語では「3-tól4-ig」と言い、英語では「3から4へ」と言います。したがって、翻訳テクノロジには、パラメータ化された文字列全体（通常は「％sから％sまで」の形式）を含める必要があります。
- 何かのための十分なスペースがあるときを知ることができません。スペースで優雅に
- 通常、翻訳局は次の情報を求めます。
- 各行に番号が付けられた、Excelシートとしての元の言語のテキスト
- テキストが表示される各画面のスクリーンショット（数字を使用）
- 説明、必要な場合のヒント
- すべてを事実確認する必要があります。確認のために、予備のモックアップとビジュアルでさえも2つの異なる言語でテストするのは良いことですが、公開する前にすべてを確認する必要があります。
- ローカリゼーションは翻訳だけではありません。また、日付の形式、文化的参照、アイコンなどについても取り上げています。
- 一部のページ/要素では、特別なローカライズ版が必要になる可能性があります-そのために準備してください
- 翻訳可能なテキストごとに、特別な表記（一般的には_（ "text"）を使用して、システムが翻訳する必要があることをシステムが認識し、一部の言語で翻訳がないかどうかを確認できるようにします
- 最善の結果を期待します ：）
また、 Gnome または bunt または Firefox のようなオープンなプロジェクトが内部化とローカリゼーションをどの程度処理しているかを確認してください。たとえば、 LiveJournal がどのように実行したかに関する情報があります。
設計の根拠とパターンを文書化することもお勧めです。これは、サイトの異なるバージョン間で大きな変更があった場合でも、設計の意図を表現できるようにするためです。
- 1.単語の長さを考慮し、長いコピーのためのスペースを確保します。例：英語（ラテン）はコンパクトですが、日本語のスクリプトは幅が広いため、同じスペースに少ない数のアルファベットを収めることができます。
- 英語とドイツ語は同じスクリプトを共有しますが、言語には大きな違いがあります。英語はコンパクトです。 v/sドイツ語の単語は長く、複合語がたくさんあります。その場合、アプリケーションメニューやヘッダーなどの小さなスペースに文章を収めることは大きな課題になります。その場合、Wordを変更するか、使用できる代替の同義語を探す必要があります。
- 英語を考えても、アメリカ英語はイギリス英語とは異なります。そのため、翻訳者に渡しながら、対象とする国をより具体的に指定する必要があります。
- 特定の国を対象としている場合は、考慮すべきさまざまな側面があります。法律や文化の違い（遠隔販売の規制、声のトーン、画像や色への態度など）について、より深い理解が必要です。スイスのような国には5つの公用語があります。したがって、制作するのは難しいでしょう。
- ユーザーエクスペリエンスに影響を与えるその他の要素には、個人の詳細ページがあります。世界のさまざまな地域の人々は、さまざまな方法で名前を書いています。例：通常、私たちは名と姓を書きますが、場所によってはミドルネームを書くのに慣れています。住所、通貨、日付、時間、単位すべてが国によって異なります。
- ツールのヒント、ヘルプのヒントには、文字列の長さが問題にならないように動的なコンテナが必要です。
- アプリケーション名は会社のブランディングの一部であるため、翻訳しないでください。
- ローカル言語の文字列を追加したら、さまざまなオペレーティングシステムで確認し、UIの変更や、テキストや画像のシフトや配置ミスを探します。多くの場合、さまざまなマシンでさまざまなフォントを使用すると、アプリケーションが乱雑に見えます。その特定の言語の言語パックをインストールして、それが役立つかどうかを確認してください。特定のフォントがないためにテキストが正しく表示されないことがあります。 （デスクトップアプリケーションに適用）
- 最小ウィンドウサイズでさまざまな画面を確認することもできます。これは見過ごされがちです。しかし、テストされないままにしておくと、製品に未完成の外観が与えられます。
- たとえば、ドキュメント：ヘルプドキュメントやショートカットキードキュメントなどは翻訳する必要があり、必要に応じて画像を置き換える必要があります。