web-dev-qa-db-ja.com

ユーザーにフィートとインチの高さの値をWebフォームに入力させる最良かつ最も直感的な方法は何ですか？

ユーザーにフィートとインチの高さの値をWebフォームに入力させる最良かつ最も直感的な方法は何ですか？主な選択肢は次のようです。

  1. 値を入力できるテキストフィールドを1つ用意します。これは、1つまたは2つ以上のフォーマットが許可されている場合、中程度に複雑な解析問題になりますが、実行可能です。
  2. フィート用とインチ用の2つのテキストフィールドがあります。
  3. フィート用とインチ用の2つのドロップダウンがあります。ただし、インチのドロップダウンに多くのオプションがない限り、これは小数インチの値を許可しません。

この質問は、マルチパート（電話番号）と見なされることが多いデータ項目の入力にも関係していると思います。

formsinput
18
Mr. Jefferson

2つのラジオボタン（ jQuery Aristo UI で作成）はどうでしょうか。

enter image description here

更新：高さが実際には連続した線であることを考えると、以下は改善点であり、0-11からのコメントであることを認識していますそして、6 '0 "ではなく6'と言います。

enter image description here

jQuery UI Slider を使用して jsFiddle を作成しました。

11
icc97

検証が可能な場合は、オプション1が適しています。唯一の問題は、空白のテキストフィールドに直面し、ユーザーがデータのフォーマット方法がわからないことです。マシンは有限の範囲のフォーマットしか処理しないと想定しているため、どちらを使用するかを推測する必要があります。ユーザーエクスペリエンスは良くありません。

通常の回避策は、潜在的な値を提案することです。テキストボックス内のデフォルトのテキストを使用してこれを行っている人もいます。

別の良いアイデアは、フィールドがフォーカスを失った瞬間にデータを解析し、ユーザーのテキストをアプリケーションの「解釈」で置き換えます。たとえば、「3.6」というテキストを入力すると、アプリは「3フィート6インチ」というテキストに置き換えます。このようにして、ユーザーはフォーマットの問題がないことを確信できます。 実際のフォーマットの問題を早期に発見することもできます（ユーザーにエラーが遅れて通知されるほど、コンテキストとその決定を覚えるのが難しくなるため、認知作業負荷が大きくなります）。

5
Jimmy Breck-McKye

最終的に、UXのser部分はyoursersに依存します=。

bestアプローチは、次のような条件に基づいて変更されます。

  • 何展開ターゲットサポート/最適化しようとしている（タッチvsキーボード）
  • ユーザーが既存のフォームからデータ入力を行っている場合、これは特定の外観/感触を持っています
  • 文化的背景/単位が一般的/サポートされているもの
  • 値の範囲収集しようとしている（赤ちゃんvs成人の大人）

オプション1-フリーテキスト/パーサー

これは本質的に micro-grammar であり、利点と欠点があります。あまり一般的ではないため、いくつかの固有の発見可能性の問題がありますが、 ユーザーを繰り返し使用している場合 は、フィールド/コンテキストを変更することによる相互作用コストなしで単一のフィールドにデータを入力する強力な方法を提供できます。見つけやすくするために、プレースホルダーテキストを使用して、データの正しい形式を提案できます。

はるかに、これは他のオプションと比較して実装するのに最も多くの開発作業を必要としますが、サポートする必要がある言語/文化の数に基づいて まだ比較的実現可能です

オプション2/3-情報を分割して収集します

情報を個別に収集することは、ほとんどの場合にコード化が最も簡単であるため、ほとんど使用されない機能の開発サイクルを最適化することをお勧めします。次に、あなたがどのようにしたいかはあなた次第です 数値を収集 （いくつかの例として、ステッパー、ドロップダウン、ラジオボタン、またはボタングループを使用）。各入力メタファには、さまざまな人口統計/展開ターゲットに比べて利点/欠点があります。

オプション4-スライダー-値の範囲が狭い場合（たとえば、小さな子供向け）、高さを収集する場合はできましたスライダーを使用しますが、値の数が増えると スライダーから値を正しく選択するために必要な精度がますます難しくなります 特にモバイルでは注意してください。精度が重要な場合（通常は身長/体重の場合）、このオプションはおそらく使用しません。

例

思考実験と同じように、いくつかの異なるモックアップがあります。

mockup

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

4
KyleMit

オプション2が最も簡単で、各ウィンドウに最大2つの値を入力するだけです。オプション1は紛らわしく、解析が難しく、オプション3は適切なオプションにホバー/スクロールするのに時間がかかります。

2
Katey HW

物事を簡単にする

人々は身長を記録する方法を知っています：
インペリアル単位では、常にフィートとインチです。

2つの別々のユニット、2つの別々のフィールド。
簡単に入ることができます。
解析が簡単です。

enter image description here

物事を難しくする

ラジオボタン、スライダー、メニューなどは、ユーザーにあなたのコントロールについて考えさせるだけです。

また、スキャンする必要のない多数の無関係な数値を提示します。

見てみましょう... 0、1、2、3、4 ... 5 ...それが私が欲しいものです。
さて、今、0、1、2、3、4、5、6、7 ... 8です。
男、それが終わってよかったですか。

????

ことわざにあるように、ユーザーに考えさせないでください。

1
plainclothes

ユーザーが希望する形式で入力できるように、難しい初期解析オプション（多数の単体テストを含む）を使用してこれに取り組みましたが、ネガを含めるための非常に大きな範囲がありました。

範囲が広すぎない場合、最も近いインチへのドロップダウンは、ユーザーがフリーフォームテキストを入力するためにフォーマットについて考える必要がなくなるため、たとえばスペースハイフンの分数などを使用して、より適切に機能する可能性があります。

1
Roger Attrill