web-dev-qa-db-ja.com

テキストフィールドの数値の「ステッパー」または「スピナー」は単に悪いUXですか?

それらを「ステッパー」または「スピナー」または「スピンボックス」と呼びますが、私たちは皆、これらのものを見て使用しました。

A numeric stepper example

現在、タッチスクリーン環境では、タッチターゲットが十分に大きい場合、このタイプのコントロールが役立つ場合があります。また、可能な数値の範囲が非常に小さく、より多くの説明と具体性の恩恵を受ける状況でも、それらが役立つことがわかります。ホテルのゲスト、カート内のアイテムの数、航空旅客の数など:

A not so bad use of a stepper

(上記の実装では近接問題には入りません)

[〜#〜] but [〜#〜]:数値ステッパーコントロールは、特にデスクトップでの使用において、数値入力用のテキストフィールドに接続されることがよくあります。 Fitt's-Law-challenged tiny click target and すでに指摘されたアフォーダンスの問題 や、タイピング、マウス、キーボードの上下矢印など.

しかし、これらが数値入力フィールドの代わりに、または数値入力フィールドを拡張する場合、ユーザーはフィールドに必要な正確な値を入力することができます...ステッパーを使用する意味は何ですか? これはこの状況では役に立たない入力コントロールですか?誰かがこれらのものをテキストフィールドの一部として使用する十分な理由を教えてもらえますか?これらのものの実際の使用と関与に関する良い研究はありますか?

ありがとう!

3
Mattynabib

追加の制御を提供します

まず第一に、それは悪いUXではないと思います。どちらかと言えば、特に断らない限り、それは非常に優れたUXです。

この種の要素では、複数の制御オプションがあります。これらはすべて同じ目的で使用できますが、まったく冗長ではありません。場合によっては、いずれかの方法を使用することを選択できます。 数値を入力し、長押しして大規模なスクロールを行うか、各ボタンを1回だけ短くクリックします。直接キーボード入力を使用したり、キーボードの矢印を使用したり、マウスを使用したり、トラックパッドを使用したりできます。タッチスクリーンを使用し、そうでないものを使用します。

簡単な例

これらの要素は多数を対象としたものではないことに注意してください。しかし、_1234_を選択する必要があると仮定しましょう。 _1234_に到達するまで矢印をクリックして上下に移動するのは非常に面倒ですが、単純に数値を入力できます。

ここで、製品を選択するために数値を1つずつ上下させる必要があるとします。これは、デバイスに応じて、1回のマウスクリック、上向き矢印、またはタッチジェスチャを意味します。番号を入力するには、マウスを離れるか、モバイルでオンスクリーンキーボードを開き、番号を探して入力し、次に離れて入力が変更されました。そうでなければ1クリックを必要とする何かのために多くの努力が必要だと思いませんか?ちょっと待って!間違えたので、もう1つ追加したい...プロセス全体をもう一度実行する必要があるか、...一度クリックするだけです。

偶然にも、私はこの正確なタイプの入力を含むインターフェースに取り組んでいます。 下の画像をご覧ください:

enter image description here

特にフィッツの法則を考えると、もっと簡単だと思いますか?数ピクセル移動してこれらの3つのオプションを選択するか、入力をクリックしてから、ビジョンを画面からキーボードに移動し、数値を入力してから、別の入力をクリックしてプロセスを3回繰り返しますか?

注意事項

上記のように、ブラウザのデフォルト要素はクリックが少し複雑になる可能性があるため、より明確で大きなクリック領域を優先してネイティブコントロールをオーバーライドすることをお勧めします

要するに

これは、多くの異なるシナリオをカバーする一般的な問題に対するリスクのない無料のソリューションです。

5
Devin
  • コントロールは顧客の目標を達成していますか?

  • このコントロールにより、顧客はデータを迅速かつ正常に選択できますか?

  • このコントロールが邪魔になる顧客はいますか?

    • コントロールの他のオプションは何ですか?

    • ユーザビリティテストを実行して、どのコントロールがお客様に最適かを確認できますか?

これらは、質問に答えるために答えることができる必要がある質問です。

厳格な規則はなく、真に客観的な基準はありません。

1
Gabby Hon

いくつかのポイント:

  • ユーザーインターフェイスがまったく新しいだと、スピナーボタンはテキストフィールドよりもアフォーダンスが高くなると主張できます(前者はボタンのように見える場合があります) 、後者がクリック可能に見える理由は何ですか?)
  • 小さな増分(1または2)の場合、低レベルGOMS分析を使用すると、キーボードを使用する場合に比べて物理的な負荷が低くなります。
  • アクセシビリティ:キーボードの使用が困難なため、一部の人々は支援技術を必要とします。一部の人にとっては、ポインタベースの入力(マウスなど)の方が使いやすい場合があります。
  • 一部のシステムにはキーボードがまったくありません。これにはタブレット(たとえば、美術館のディスプレイ)が含まれますが、これに限定されません。
  • Raspberry Piのようなデバイスの注目すべき使用法を作成した場合-マウスのみで使用する機能に感謝します。リモコンが接続に失敗することがあり、どこかからキーボードを持ち込むのは少し面倒です。安いマウスをその周りに置くほうがはるかに簡単です。
  • 私の義理の母のように、一部の人々は非常にキーボードの恥ずかしがり屋です。考えてみれば、それはかなり威圧的なデバイスで、多くの場合80個を超えるキーを備えています。各キーの位置を覚えるには練習が必要です-フレンチキーボードを使用したことがありますか? dvorakを使用したことがありますか?一部の人々は初期段階でマウスを好むでしょう。経験豊富なパイロットにとって、コックピットは少し威圧的に見えます。他のすべての人にとってはそうではありません。類推すると、一部のマウスはコックピットのコントロールホイールのようなものです-単純なもの。

A plane cockpit

0
Izhaki