結合されたデータと単位フォームフィールド
WYSIWYGワードプロセッサのGUIの設計を支援しているとします。ユーザーはフォントサイズを変更できるものとします。大きいものと小さいものの相対的な制御があり、視覚的な「大きい」/「小さい」または意味の「章の見出しと同じ」/「…脚注」のいずれかについて、キーワードベースのあいまいな絶対的な制御がある場合があります。これらの両方を追加で考慮することもできますが、通常は（ユーザーが期待するため）数値とおそらく単位を示す絶対フォームフィールドがあります。単位が表示されていない場合、フォントサイズはおそらくDTPポイント（= 1/72インチ= 127/360 mm）で測定されています。より一般的な単位で測定されたこれらのポイントの実際のサイズは、ほとんどのユーザーには不明です。それらは、インチ、ミリメートル、またはセンチメートルなどで行われる他の測定と揃える必要があります。したがって、ユーザーは、さまざまな単位を使用してフォントサイズを指定できる必要があります。
- さまざまなユニットがサポートされていることをユーザーにどのように最もよく示しますか？
- サポートされているユニットをどのように表示しますか？
- ユーザーが別の単位を選択すると、値は自動的に変更されますか？
- ユーザーがユニットを完全に削除した場合（可能な場合）、前のユニットまたはデフォルトのユニットはどうなりますか？
- 同じフィールド内で異なる種類のユニット、つまり絶対ユニットと相対ユニットをどのように処理しますか？ （CSSフォントサイズを想像してください。CSSフォントサイズは、絶対、パーセンテージ付きの相対、絶対キーワード、相対キーワード、またはその他のキーワードです。）
- 入力したセルがスプレッドシートアプリケーションでうまく機能すると思いますか？
もちろん、これはフォントサイズに限定されず、データに単位がある数値入力フィールドに適用されます。 「メトリック」アプリケーションであっても、ユーザーはプレフィックスを変更できます。 「cm」から「mm」。
これは、単位変換に最適なUIでもありません。これは機能ですが、これを使用するアプリケーションの目的ではないためです。
悪い例
Microsoft Wordには、数字の後にオプションのスペースと単位の省略形が続くテキストフィールドがあります。段落のマージンと行の高さ。ユーザーがソフトウェアが理解できる別の略称を手動で変更すると、保存時にこれがデフォルトの単位（ポイントなど）に変換され、大まかに丸められた数値が表示されるようになります。他のフィールドでは、ユーザーが入力した値と単位は、少なくともサポートされている単位の一部では保持されます。
Webソリューション
<input type=number id=value><input type=text id=unit>
<input type=number id=value><select id=unit><option> … </select>
<input type=text pattern="[+-]?\d+([.,]\d+)? *[A-z"'%/\*]+">
ウィジェット
- jQuery UI Spinner（通貨の例）
- jQuery Widgets：jqxLinearGauge –これらのゲージは複数のスケールを表示して、実際に使用された値をユーザーから隠すことができます。スライダーも同様に機能する
- Yiiフレームワーク：測定単位の選択
- インラインで測定単位を変更するためのjQueryプラグイン –入力ではなく動的出力のみ
この質問に毛布の「ベストプラクティス」を適用しようとすると、半分焼きたての答えのうさぎの穴を掘る必要があるかもしれません。質問に回答する前に、特定のユースケースに関する要件を収集する必要があります。例えば：
さまざまなユニットがサポートされていることをユーザーにどのように最もよく示しますか？サポートされているユニットをどのように表示しますか？
特にほとんどのユーザーが同じユニットタイプを使用する場合は、すべてのユニットタイプを表示するのが大変な場合があります。不必要な/肥大化した選択を導入するのは悪いUXです。
繰り返しますが、ここには多くのオプションがあります。ユーザーを特定のタイプに制限したり、既知のリストから選択するオプションを提供したり、ユニットに自動変換/スナップしたりできます。最後の項目には、サポートされていない形式のエラー状態/メッセージを適用できるという利点があります。デフォルトのユニットタイプは、使用例の90％以上をカバーするように設定する必要があります。
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
ユーザーが別の単位を選択すると、値は自動的に変更されますか？
場合によります。ほとんどの（すべての？）科学分野では、標準はメートル法のみを要求しています。力Force = Mass * Accelerationを計算している場合、質量をkgとして、加速度をm/s2として考えるのが最も理にかなっています。さらに、私の特定のユースケースでより大きな数を扱っている場合、nmからkmへの自動変換のサポートを含めることはばかげているかもしれませんが、はるかに少ないcmからkmへ。
はるかに複雑ではない例：この毛虫はどのくらいの長さですか？
ここで変換を許可する理由はわかりません。
ユーザーがユニットを完全に削除した場合（可能な場合）、前のユニットまたはデフォルトのユニットはどうなりますか？
ユースケースを計画します。
- ユーザーがWebレイアウトを作成しています。コンテナの幅を選択しています。
- ユーザーはパンツを購入していて、特定のウエストサイズを求めています。
最初の例では、ユニットを保持することが重要です。 2番目に、あなたの店はメトリックに「インチ」を使用するパンツのみを販売するかもしれません。これらの制約を適用し、選択/複雑さを適切に軽減するコンポーネントを使用してください。
同じフィールド内で異なる種類のユニット、つまり絶対ユニットと相対ユニットをどのように処理しますか？ （CSSフォントサイズを想像してください。絶対、相対パーセント、絶対キーワード、相対キーワード、またはその他のキーワードです。）入力したセルがスプレッドシートアプリケーションでうまく機能すると思いますか？
Webは、ユーザーが相対値を提供することを想像できる数少ないユースケースの1つです。 WYSIWYGユーザーは相対値を使用していると私は主張します。実際、ほとんどはピクセル値を使用していません。通常、ptまたは値がキャプチャされ、ユーザーはサイズをプレビューできます。コンテンツが実際にレンダリングされるときに、関連付けられた/変換されたスタイルが適用されます。ユーザーが現在のドキュメント内のサイズに対して相対的に大きい/小さいものだけに関心があるときに、なぜ複雑さを導入するのですか？
Adobe PhotoshopまたはPixelmatorのキャンバス/画像サイズ変更ツールをご覧ください。
彼らはあなたの懸念のほとんどに答えを持っています：
- さまざまなユニットがサポートされていることをユーザーにどのように最もよく示しますか？
- サポートされているユニットをどのように表示しますか？
オプション付きのドロップダウンが表示されます
- ユーザーが別の単位を選択すると、値は自動的に変更されますか？
ユーザーが値を既に変更している場合を除いて、すぐに新しい値に変換されます（入力が失われるのを防ぐため）。
- ユーザーがユニットを完全に削除した場合（可能な場合）、前のユニットまたはデフォルトのユニットはどうなりますか？
不可、ドロップダウンはユニットを選択することを強制します
- 同じフィールド内で異なる種類のユニット、つまり絶対ユニットと相対ユニットをどのように処理しますか？ （CSSフォントサイズを想像してください。CSSフォントサイズは、絶対、パーセンテージ付きの相対、絶対キーワード、相対キーワード、またはその他のキーワードです。）
それらは絶対値と相対値の間でうまく変換されます。
- 入力したセルがスプレッドシートアプリケーションでうまく機能すると思いますか？
ユニットにドロップダウンを提供する可能性がある場合は、上記の理由からそれがより良い選択になります。
明確にするために、「これはフォントサイズに限定されず、すべての数値入力フィールドに当てはまります。データには単位があります。「メトリック」アプリケーションでも、ユーザーは接頭辞を変更できます（例： 'cm'から 'mm'）。そして、回答へのコメントでこれを強調し、「データと単位フォームの結合フィールド」に対して「ウィジェット」を作成できると信じていると述べています。私が誤解している場合は、私の答えの残りを無視してかまいません。
便利なウィジェットを作成することは不可能だと思います。質問には2つの基本的な仮定があります。1。多くの場合、数値には意味の単位が必要です。2。単位は異なる測定システムを使用できます。それらの共通点は十分ではありません。
中心的な問題は一般にUI/UXにあります。ユーザーが異なれば、作成するインタラクションに対する背景や期待も異なります。たとえば、経験の浅いユーザーとは異なる経験豊富なユーザー向けの対話を作成する必要があります。頻繁に使用するアプリケーションには、頻繁に使用するアプリケーションとは異なる要件が必要です。訓練を受けたユーザーは、一般のパブリックユーザーと同じやり取りをする必要はありません。ユーザーはこれらの経験に基づいて期待を抱く可能性が高いため、プラットフォーム標準も考慮する必要があります。
この質問をすることの目標がそのようなウィジェットの作成に関するヘルプを見つけることである場合、多くの回答に不満を抱く可能性があります。満足のいく回答であっても、必ずしも明白ではない障害や失敗がある可能性があります。さまざまなオプションをすべてサポートするには、複雑なウィジェットが必要です。その場合、そのウィジェットのターゲットを検討する必要があります。それは、あなた自身のためですか、それとも会社の内部向けですか。その場合、ウィジェットを使用しないユースケースに柔軟にするために過度の時間を費やしたり、「一般的なソリューション」を作成して問題を必要以上に複雑にしたりすることがあります。一般的な開発者ツールでは、採用が課題になります。
そのようなウィジェットを作成しようと決心している場合は、質問に基づいてそれを実行するのに役立つ（または実行しないように説得する）いくつかの考慮事項を次に示します。
- さまざまなユニットがサポートされていることをユーザーにどのように最もよく示しますか？
フォントの場合、ユニットの短いリストを使用した実装の例がいくつかあります。要件、対象ユーザー、使用可能なツールなどに依存するため、賛否両論については説明しません。
おそらくより重要なのは、一般的なケースでは、いくつかのユニットオプションが20以上の場合とは大きく異なることです。フォントには、使用例に応じて、一般的な単位と距離の関係があり、距離が20を超えやすい場合があります。特殊なケース（たとえば、モバイルアプリ対デスクトップ対タブレットなどのフォームファクター）では、さらに検討が必要です。
- サポートされているユニットをどのように表示しますか？
繰り返しになりますが、ユニットの短いリストの場合、セレクター（つまり、ラジオボタン）を使用して、データとすべてのオプションを同時に表示することができます。そうであっても、スペースの考慮事項は、それを非現実的にするかもしれません。他の近くの要素も、混乱を招く、または役立つ場合があります。また、プロとカジュアルのユーザーによっては、ユーザーに非常に馴染みのある非常に長いユニットのリストから簡単に選択できるという問題と、ユニットオプションを明確にする必要があるという問題があります。
- ユーザーが別の単位を選択すると、値は自動的に変更されますか？
これは簡単に思えますが、あなたが言うように、そうではありません。ユーザーは値を入力してから、単位が間違っていると判断し、それを変更したい場合があります。設計者は自動変換によって使いやすさが向上すると考えているかもしれませんが、多くの場合、カジュアルユーザーは数値を入力する前に単位について考える可能性は低くなります。パワーユーザーは、何をするにせよ単に覚えるだけです。専門家は自動変換を高く評価し、それを他の目的に使用できます。同様に、専門家が気づくかもしれない間、カジュアルなユーザーは自動変更に気付かないかもしれません。これにより、一般市民を対象としたアプリケーションが自動変更のメリットを享受できる場合とそうでない場合があることがわかります。
使用統計やテストの結果、同じ画面でもオプションが混在する場合があります。これが、指定した例で何が起こったかの原因である可能性があります。カジュアルなユーザーは、気づいたことに気付かない可能性があります。そのエリアに常にアクセスしているとは限らない場合、「共通の相互作用モデル」の作成は単なる設計目標であり、実際にはユーザーを支援しない可能性があります。 「パワーユーザー」は、そうする必要性に基づいて適応します。これにより、さまざまなやり取りが煩わしくなったり、気にならない場合があります。これは、UI/UXの一般的な目標ではない、より高いレベルのパターンに気づき、それを高く評価する人にとって、本当に煩わしいだけです。
- ユーザーがユニットを完全に削除した場合（可能な場合）、前のユニットまたはデフォルトのユニットはどうなりますか？
これは、フィールドに問題を引き起こす可能性のある依存関係があるかどうかによって異なります。また、インタラクションに意味があるかどうかにも依存します（「クリア」ボタン対「すべて選択」および「バックスペース」対繰り返しバックスペース）。このケースの適切な処理を決定する前に、ユーザーおよび他のフィールドが編集可能なフィールドとどのように相互作用することが期待されるかを決定する必要があります。一部の状況では、ユーザーは番号がなくなったのをよく感じる場合があります。また、状況によっては、ユーザーが不安になる場合があります。再入力には、同様の考慮事項があります。ユーザーがフィールドからすべてのデータを削除できることを期待していて、それを実行すると自動入力される場合は、役に立ちません。
- 同じフィールド内で異なる種類のユニット、つまり絶対ユニットと相対ユニットをどのように処理しますか？ （CSSフォントサイズを想像してください。CSSフォントサイズは、絶対、パーセンテージ付きの相対、絶対キーワード、相対キーワード、またはその他のキーワードです。）
UI/UXの観点から、「単位なし」の数値には暗黙の単位があることを理解するには、カジュアルなユーザーはより多くの視覚的手がかりが必要です。あるいは、「パーセンテージ」エントリは、理解する追加のコンテキストまたは例を表示する必要がある場合があります。パワーユーザーやトレーニングを受けたユーザーの場合、この情報は不要な場合があり、邪魔になったり邪魔になったりする場合があります（画面スペースが限られている場合）。カジュアルなユーザーはユニット（またはそのシンボル）を知らないか理解していない場合があります。そのため、ユーザーがユニット（またはそのシンボル）を使用しないようにする場合もあります。
- 入力したセルがスプレッドシートアプリケーションでうまく機能すると思いますか？
タイプされたセルは、キーボードにできるだけ手を触れておきたい私のようなユーザーにとって素晴らしいものです。リストは、それほど懸念のないユーザー、オプションを制限する必要がある場合、適切な値や他の同様の状況を判断するのに役立つ「プロンプト」または「サンプル」データが必要になる可能性があるユーザーにとって、より役立ちます。
これがお役に立てば幸いです。必要に応じてさらに詳しく説明しますが、かなり長くなっていると思います。
この機能のcost/benefitについて考えてみましょう。
- フォントを入力するために実際に複数の単位が必要なユーザーは何人いますか？
- この機能は、複数のユニットを気にしない人にどのように影響しますか？
それが実際にワープロアプリケーションである場合、そもそもこれが良いアイデアであるとは思えません。ほとんどのワードプロセッサはこれをサポートしていません。このレベルの具体性を望んでいるユーザーはほとんどいないでしょう。さらに、フォントの選択が遅くなり、ユーザーを混乱させる可能性さえあります。もちろん、実装も大変です。
機能を実装する場合、私はそれをまれなユースケースとして扱います。
- フォントを設定するメインの方法ではなく、高度なフォント設定ダイアログで非表示にします。
- 2つの個別のフィールドを使用して実装します。1つは数値用で、もう1つは単位用です。これは、あなたが心配している複雑なシナリオを取り除きます。また、理解しやすくなります。使用は遅くなりますが、それでも価値のあるトレードオフのようです。
私が見た2フィールド設計では、単位を変更したときに数値が自動的に変換されました。それが一般的であるという理由だけで私はこれで行きます。私はどちらが本当に望ましいかはわかりません-どちらの方法も支持するユースケースがあります。