web-dev-qa-db-ja.com

言語スイッチャーを作成するためのパターン?

私は本の大ファンですThe Design Of Sitesには、ウェブマスターとサイトデザインに必要なさまざまなもののパターンがあります。

ただし、翻訳、ローカライズ、および国際化に関するトピックは少し短く(第2版のページ350ffで)、ユーザー中心の言語スイッチャーの作成方法に関するガイドラインはあまりありません。

Webisteで言語を切り替える方法に関する科学およびユーザーエクスペリエンスコミュニティのパターンを知っている人はいますか?特にユーザー中心のデザインパターンに興味があります。

質問を確認しました ユーザーの好みの言語を決定する最良の方法は何ですか? -私の差別化:これは低いですレベルの技術的な質問、例えば技術的には、HTTP/1.1はすでに私のサイトで考慮されています。それが言っているのは、言語を変更するのは簡単であるべきだということです。これは、ユーザー中心のパターンをすでに求めている私の質問の継承部分です(そして、パターンを求めず、その答えはユーザー中心のパターンを取ることです)。また、特にユーザーの好みの言語について調べることを求めており、言語切り替えプログラムの提供に関するパターンを探しています。ユーザーがWebサイトの言語設定を制御できるウィジェット。

2
hakre

ユーザーは多くの場合、検索エンジンを通じて私のサイトを見つけます。そのため、通常、HTTPヘッダーに基づいてサイトの言語を自動的に切り替えることはお勧めできません。 HTTPヘッダーは、ユーザーに言語を提案するための優れたガイドになりますが、 検索エンジンのトラフィックに依存するサイトには、URLによって決定されるコンテンツの言語が必要です

そのため、ユーザーのHTTPヘッダーで指定された言語がURLの言語と一致しない場合、ページでアラートを使用する傾向があります。

このページの英語版が利用可能です。この記事を英語で表示するにはここをクリックしてください。

このようなメッセージは、常に現在のページの言語ではなく、ターゲット言語で作成する必要があります。 HTTPヘッダーは、ユーザーが多言語であることを示し、ユーザーが好みの言語を選択できるように、複数のメッセージを同時に表示できる場合があります。

ページのどこかに、利用可能なすべての言語のリストがあるはずです。このウィジェットを実行する一般的な方法はいくつかあります。

  • Flags-私はこのアプローチが好きではありません。英語のWebサイトでは、どのフラグを使用する必要がありますか?イギリス人、アメリカ人、それともオーストラリア人?各国にサイトを持っている場合を除き、ユーザーは国からフラグを選択しないとユーザーから距離を置く可能性があります。
  • ドロップダウンメニュー-このアプローチもあまり好きではありません。ドロップダウンメニューには、「言語:」などのラベルを付ける必要があります。ユーザーが間違ったページにアクセスすると、別の言語で「Language:」の単語を読むことができないため、ウィジェットを認識できない場合があります。さらに、検索エンジンボットは、ドロップダウンメニューのリンクをたどることができない場合があります(特定の実装によっては)。
  • リンクのリスト-これの欠点は、大きくてくなり、多くのスペースを占有する可能性があることですが、それは私の好みのソリューションです。これらのリンクは、気を散らさないフッターに配置する傾向があります。ユーザーがリンクを識別できるように、リンクはそれぞれターゲットページの言語である必要があります。例:زية | Англійская | Български | Català | Český | Dansk | Deutsch | Ελληνικά | English | Eesti | Suomi | Français | Gaeilge | हिंदी | Hrvatski | Magyar | Indonesia | Íslenska | Italiano | עברית | 日本語 | 한국어 | Lietuviškai | Македонски | Melayu | Maltija | Nederlands | Norske | Português | Română | Русский | Slovensky | Slovenski | Shqiptar | Српски | Svenska | ภาษาไทย | Türkçe | Українська | Tiếng Anh | 中文(简体) | 繁體中文
2

ユーザーエクスペリエンスコミュニティからの言語選択に関する次の参照を見つけることができました。

言語選択セクション-国際的なWebユーザビリティ(1996年8月、Jakob Nielsenによる))の要約

理想的な国際ユーザーインターフェースを中心に作られており、ユーザーの好みの言語で自動的に提供されます。 Nielsenは、コンテンツネゴシエーションが1996年に十分に広く使用されていなかったため、ユーザーブラウザーでこれらの1回限りの設定が確実に機能するとは考えていませんmanual言語選択のためのオプションが必要です。

彼は、すべての言語をそれぞれの名前でリンクリストすることを推奨し、 "English –Français"の例を示します。 8-21言語間のリストは、視覚的なシンボルでさらに使いやすくする必要があります(言語ではなく国であるため、これも批判されるフ​​ラグです)」多くの国でいくつかの言語が話されています。」)。彼の意見では21を超える言語がスキャンできず、代わりに長いアルファベット順のリストが提案されています。

ウェブサイトは多くの場合、検索エンジンを介して異なるページに入力されるため、1つだけでなく、すべてのページで選択を行う必要があります。そのため、ユーザーがホームページに到達する前に言語選択ページを配置することはお勧めしません(メインメニューに到達する前にDVDの言語を選択するなど)が、代わりに最も可能性の高い言語を選択します。これは、パリの例を示すことで説明されます Louvre Museum これはデフォルトでフランス語です。ところでレビュー中にブラウザでコンテンツネゴシエーションが有効になっている場合でも、今日はそうです。それは17年後のNielsensのオリジナル記事です。

今日、これらの提案はいくつかのバリエーションと採用を得ることができます。 flags引数は、 W3C国際化のベストプラクティス(2007年4月) 内にあります ベストプラクティス16 :フラグを使用して言語を示します これはスナップとサウンドです:

言語を示すためにフラグアイコンを使用しないでください。

同じ一般的な問題が残っているにもかかわらず、コンテンツネゴシエーションによる導入率は1996年よりも高くなっています。自動翻訳されたテキストのみに依存することは推奨されていないように、サイトは Accept-Language HTTPヘッダーに完全に依存したり、ユーザーのIPアドレス( GeoIP)またはLocation Tracking(Geolocation)。

いくつかのサイトでは、現在アクティブなユーザーインターフェイス言語の名前の言語も、それ自体の名前の言語の横に追加していますが、ユーザーに受け入れられるかどうかについてはあまり言及していません。

また、選択ボックスとリストはjavascriptを使用して、または使用せずに段階的に拡張できるため、リストのスタイルのバリエーションも最近では異なります。これを使用して、リストを列のペインに変えることにより、多くの言語のリストをよりアクセスしやすくすることができます。

Javascript Disabled Language Switcher

画像:Javascriptはフランス語のGoogle翻訳サイトで英語のスクリーン言語で無効になっています1

Javascript Enabled Language Switcher

画像:Javascriptはフランス語のGoogle翻訳サイトで英語のスクリーン言語で有効になっています2

Facebookの言語スイッチャーでも同様のアプローチが見られます。

Facebook Language Switcher

画像:Facebook Language Switcher

言語セレクターのユーザビリティに関する詳細な概要と具体的な議論は、 Wikimediaのユーザビリティマルチメディア言語セレクターページ にあります。

Quoraウェブサイトのインターフェース言語を切り替えるのに最も使いやすいUIは何ですか?も、ピンポイントの提案を提供していません。 Nielsonが書いたように、ユーザーは言語を選択する必要はありませんが、 "ブラウザの言語のデフォルト設定、または地理によるIPスニッフィングは信頼できず、ユーザーへのフォールバックオプションがないため、やや粗末です。ノートブックを持ってスイスを旅する外国人に聞いてください。」asPaul Gaileyが答えを始め、ウェブページでの言語スイッチャーの配置について議論します:

Dell Footer List of 936-1 ISO-Codes

Dell 一番下にある最も著名な国の936-1 ISOコードのリスト(javascriptは無効)。 4

Istock Photo Language Switcher

Istock Photo globe-icon右上にある「International」ドロップダウンリストで、独自の名前の言語名を使用します。エスパニョールとイタリア語。 5

IBM Language / Country Splash Screen

IBM -Content-Negotiation(-> ://www.ibm.com/us/en/)に基づいてリダイレクトしてから、記憶する(cookie)の設定を表示する言語スプラッシュ画面を表示します。 6

Gaileyは、1996年にNielsenによって与えられたのと同じ理由(「言語ではなく政治的」)のために、フラグがもはや頻繁に使用されないことにも気付きました。彼は、各サイトで言語を切り替えることができないことはないと考えており、基礎となるコンテンツ管理システムの制限について言及しています。彼の答えはおそらく、ニールセンが1996年に投稿したレビューと、最近の例からのフィードバック(2010年12月)として見ることができます。

Sister-Site User Experience(ux.stackexchange)には、トピック Choose Your Country:Best Usability approach がありますが、単に例を挙げているだけで、あまり議論も議論もしていません。これは、「Appleウェブサイトのように」からの範囲です。

enter image description here

画像:国または地域を選択-Apple Inc。

私の正直な意見では、これは適用可能と見なされるべきではなく、これを当たり前のことと見なすことは間違った光を放ちます。賛否両論に対処することなく、訪問者の国をIPアドレスで検出することを提案する別の高投票の回答についても同じです。その反対でさえ、ベンダーによるキャッチーなマーケティングフレーズが盲目的に繰り返され、コンテンツネゴシエーションに継承される問題は、その回答ではまったく議論されていません。ブライアンは、言語を選択する際のユーザーの負担を軽減するために、物事を組み合わせるよう提案することをより差別化しています。

国際的なウェブサイトの場合、私は常にゼロクリックインターフェースを提案します[...]。ブラウザで受け入れられている言語とIPアドレスにより、上位5つの国のリストが表示され、それ以外の場合は長い国選択ページの先頭に表示される可能性があります。

彼は続けます:

各国/言語とその母国語、たとえば「ドイツ語/ドイツ語」または「日本語/日本語」をリストすることをお勧めします(WebページでUTF-8を使用することに注意してください)。元のページが英語であることが明らかな場合、英語のアルファベット順を期待します。スイスのような国では、可能なすべてのペア(Schweiz/Deutsch、Suisse/Francais、Svizzera/Italiano)を追加します。

彼は、地図を国の視覚的な識別子として使用しないか、地図から国を選択しないことを提案します。それは現実的ではなく、文化的/政治的問題に遭遇する可能性があるからです。

そのサイトは、 言語変更ボタンの配置 での配置についても述べていますが、あまり注目されていません。回答はトップ/ライトを示唆する傾向がありますが、これは文化的な影響を受ける可能性があると警告されています(アルコニスの回答から):

[...]このようなセレクターの主な用途は、ユーザーがサイトの言語を理解していないことに気付いた直後にWebサイトに初めてアクセスするときです[...]これは二次的なアクションです。そのため、文化的背景を考慮して、左から右へのレイアウトのために右上隅に配置します。

また、言語セレクターと国セレクターの違いについても少し強調されていますが、違いはサイトだけです。長い国のリストについては、Smashing Magazineが Redesigning The Country Selector を2011年11月にChristian Holstによって公開しました。これらの長いリストの使いやすさ。

国の選択、言語の選択(2010年12月、UX MagazineのJohn Yunker著) トピックの概要もありますが、まだ提供する要約はありません。

1
hakre