web-dev-qa-db-ja.com

UX / UI Responsive-多言語コンテンツを含む長いフォーム

私は、複数のセクションがあり、コンテンツが複数の言語である必要がある(複数の言語がサポートされている場合)長い形式を表示するための推奨される方法(およびそれが良い/悪い理由)を知りたい

サイトは多かれ少なかれWebベースのerpに似ており、モバイルバージョン(最低でも320ピクセルの画面)に対応する必要があり、フォームにはセクションごとに最大15のフォームフィールドを含めることができます。

現在、私はセクションを分割するためにタブモデルを使用しています。これは小さな画面ではドロップダウン選択に変わります。ただし、言語については疑問があります。複数の言語を選択できるフィールドは1つだけですが、セクションに7つある場合もあります。

複数の言語のコンテンツを含むセクション内に別のタブセクションを設けることを考えています。これにより、簡単に編集/入力できるようにコンテンツを言語サポートでグループ化します。ただし、これはフォームフローが以前ほど良くない可能性があることを意味します([アイテムタイトル]がセクションの上部ではなく下部にある可能性があるため)。フィールドが1つしかない場合は言うまでもなく、タブは過剰です。

Layout

更新:複数の言語で、私はコンテンツ(ユーザーがフォームに入力したもの、つまりアイテムの説明、アイテムのタイトルなど)にもっと意味があることを意味しました。

5
margie

おそらくjsアプリケーションを使用して、リストインターフェイスをフォームに埋め込むことをお勧めします。このアイテムに関連付けられたローカライズされたコンテンツと多対1の関係があることをユーザーに示し、その後、新しいインスタンスを追加できるようにします。これにより、すでにデータが入力されている言語の良い指標と、さらに追加することが可能であることの指標が得られます。このリストビューにすべての編集可能なフォームフィールドを表示する必要はありません。プレースホルダーだけ、または1つまたは2つのフィールドのクイックプレビューを表示する必要があります。

mockup

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

1
sirtimbly

ほとんどのタブはナビゲーションとしてユーザーに知られているため、タブオプションはかなり混乱しているようです。両方の画面サイズに対応する単純な言語ドロップダウンオプションが適切に機能しますが、ページの上部で言語の切り替えとして使用します。プロトタイプを検証するために、いつでも簡単なユーザビリティテストまたは廊下テストを実行できます。

0
Tony