フィールドラベルの配置と国際化の問題

Question

国際化の問題

国際化されたアプリを設計する場合、UXの懸念に直面するいくつかの実現可能性の問題があります。ここに私の考えがあります。

可変テキストの長さを考慮するために、私は常に「上に配置されたラベル」モデルを採用しました。使いやすさの観点から、このデザインは嫌いではありません。混乱を避けるためにホワイトスペースを慎重に適用する必要がありますが、うまく設計されていればうまく機能します。

しかし、何か別のことを試したい場合はどうなりますか？この英語/フランス語のサンプルを見てください。

Two design solutions for internationalized field label translations

i18n 製品でこれを試したか、正常な代替パスを見た場合：
ラベルの不動産をフィールドの片側に拡大することでUXの問題はありますか？
それらの落とし穴を回避するための設計戦略はありますか？
退屈で安全な解決策に固執し、必要に応じてウズベク語に変換できるという事実を喜ばなければなりませんか？

意図の明確化：私は主に、合理的で使用可能なオプションを純粋に習慣からテーブルから外していないことを検証したいと思います。

Mervin · Accepted Answer

使いやすさの調査により、フォームラベルがフォームフィールドに近づくほど入力が速くなることが示されているため、フォーム上のフォームラベルは使いやすさの問題を提供するというあなたの声明について混乱しています。引用するにはこの記事

したがって、図3の視線追跡データが示すように、ほとんどの注視がラベルではなく入力フィールド上で正しいことに気づいたとき、私たちは驚きませんでした。

図3-入力フィールドの上にある左揃えのラベルのテスト

入力フィールドの真上にラベルを配置することで、ユーザーは1つの目の動きで両方の要素をキャプチャできました。また、ラベルがユーザーに非常に馴染みのあるデータ（たとえば、名や姓）を示していた場合、ユーザーはラベルを個別に固執して読んでいませんでした。彼らは同じ中心窩領域でラベルと入力フィールドの両方を見ることができました。したがって、追加の固定とサッカードの必要性を排除します。

さまざまなラベル付け方法の完全な比較と、利点と欠点も同様に、この記事フォームラベルの配置に関する決定的なガイドを参照することもお勧めします。ここでのハイライトの1つは、この決定マトリックスです。

Decision matrix based on requirements

フォームラベルのローカライズが開始されました

上部ラベルと左揃えラベルの両方が機能することをVitalyが指摘したように、同じフレーズでも言語によって長さが異なるため、フォームの配置が完全に同期しなくなり、不連続で壊れたフォームの印象を与える可能性があります。設計。フォームラベルのローカリゼーションに関するこの記事を引用するには

しかし、国際的な柔軟性に関しては、明らかに勝者があります。オンラインフォームがショッピングカート、登録ページ、その他の種類のデータ収集のいずれであっても、覚えておくべき最も重要なことは、すべての言語が同じように作成されているわけではないということです。長いものと短いものがあります。ラベルをフィールドの側面に配置し、180ピクセルのスペースを確保すると、「カード所有者名」は英語でうまく表示され、余裕があります。しかし、言語をフランス語に変更すると、「Nom du titulaire figurant sur la carte」は割り当てられた180ピクセルを最大限に活用します。翻訳する言語が多いほど、この問題が発生する可能性が高くなります。特に、クロスブラウザー互換を計画している場合は！

頭痛の種を減らす最善の方法は、フィールドの上にラベルを配置することです。長いフィールドがある場合は特に、そこにたくさんのスペースがあります。これは、CSSフロートを破壊することなく、より長い言語を拡張できる最適な場所です。

フィールドの上に配置されていない場合、長すぎるラベルは、ページのコード構造をプッシュし、その結果、フィールドが整列しなくなります。

一方、ラベルがフィールドの上にある場合、問題はありません。