web-dev-qa-db-ja.com

i18Nとフォームデザイン

国際化(i18n)をサポートするWebフォームをデザインしようとしています。フォームは、大規模なイベント管理ソフトウェアの一部になります。ユーザーはログインし、イベント(会議、ロードショーなど)を作成します。イベントを異なる言語で表示するには、いくつかのテキスト入力フィールドがi18nをサポートする必要があります。たとえば、イベントのタイトルは、英語、フランス語、ドイツ語などだけでなく、議題、要約などで表示されます。主要なまたはデフォルトの言語(クライアントの場所に応じて)および2つまたは(多く)から選択する追加の言語。

機能する可能性のある2つの戦略またはシナリオを考えることができます。

  1. クライアントはフォームを開き、事前に選択されたデフォルト言語を見つけます。彼女がフランス語からドイツ語に行くことにしたとしましょう。これはすぐにフォームの再読み込みをトリガーします。それ以降、彼女が入力する可能性のあるテキストはすべて、対応する、つまり選択されたロケールにバインドされます。彼女が別の言語を選択すると、これによりフォームの再読み込みがトリガーされます(すべてのテキストフィールドが空になります)。選択した言語ごとに一度に完全なフォームを編集するのが目的です。

  2. このアプローチは、(JS/jQueryを使用して)各i18nテキスト入力フォームフィールドを「強化」します。再びクライアントはフォームを開き、1つ以上の言語を(チェックボックスを使用して)選択します。これにより、1次言語を表す入力フィールドの下に追加の入力テキストフィールドが自動的に追加されます。これで、クライアントは各フォームフィールドにコンテンツを入力します。クライアントが「フランス語」のチェックを外すと、対応するすべてのフォームフィールドが削除されます。フォームのリロードはなく、テキスト入力フォームフィールドを追加および削除するだけです(jQuery magic :)

I18nフォームを入力するときに、複雑さを軽減してユーザーエクスペリエンスを向上させるより良い方法はありますか?

5
simou

2番目のアプローチで私が持っている問題は、いくつかの追加フィールドを追加することです(質問を正しく理解すると、文字列のフィールド数が2倍になります)。 。ユーザーがデータを入力するフィールドを慎重に選択する必要があるため、これはユーザーにいくつかの問題を引き起こす可能性があります。また、ユーザーが慎重でない場合は、次のようにイベントのタイトルフィールドに議題フィールドのデータを入力する可能性があります

mockup

download bmml sourceBalsamiq Mockups で作成されたワイヤーフレーム

(Google翻訳で遊んでいるときに)私が気付いたもう1つの興味深い問題は、言語が同じ単語を使用して何かを表すことです。たとえば、Agenda in dutchの単語は英語のアジェンダと同じです。したがって、フォームに2つの議題が表示されていると、ユーザーが混乱する可能性があります(ユーザーが英語から翻訳の言語としてオランダ語を選択した場合)。

アプローチ1を使用することをお勧めしますが、可能であれば、新しい言語を選択する際に、ユーザーが既に既存のコンテンツを入力している場合は、入力したコンテンツがフォームの再読み込み時にフォームにすでに入力されていることを確認してください。データを保存するタイミングを決定するのが難しいためにそれが不可能な場合は、ユーザーが最初に言語を選択し、その後ユーザーだけがフォームフィールドを表示するというアプローチをとることができます。これにより、前もって選択した言語が提示されます。したがって、次のようになります。

mockup

bmmlソースをダウンロード

このアプローチを使用する予定がある場合は、ドロップダウンのデフォルト値を、ユーザーのロケールによって決定される値に設定することをお勧めします

1
Mervin

言語を選択できるユーザー設定ページを使用します。 PHPとMySQLを使用して設定を保存します。残りはさらに簡単です。例: "If(Lang ==" de "){Include(de.inc);} Else {Include(en .inc);} "

0
andywhizwang