web-dev-qa-db-ja.com

乗客数を選択するためのプラスとマイナスのボタン位置は?

このUI要素のプラス&マイナスボタンの位置について、スタジオで話し合っています。私はあなたが'increase'または'move forward'の右側に自然に見えるように感じますが、プラスが左側に配置されているのを見ました他の例では。

これについてどう思いますか?

Plus/Minus UI

8
Olly Sorsby

この文脈では、rightの「+」の方が、書く方向がより自然であるためです。ただし、「-」と「+」が縦に表示されている場合、直感では「+」が上に表示され、書き方とは逆になります。

5
Alex P

[+]は右側がより自然に感じられます。私の推測では、それは数学のクラスの数行に起因する可能性があります。それが私たちのメンタルモデルの基礎になるかもしれません。

<--------------------------------->
 -2     -1     0     1     2     3
3
Adam Scroggin

答えは、それは問題ではありません。

NNGroupはOK-CancelまたはCancel-OKに関する調査を行いました

彼らは、最も重要なことは、デザインの提示方法の一貫性であることを発見しました(そのため、決定する場合は、サイト全体でそのように保つ必要があります)。

編集---

はるかに現実的なシナリオを作成しましょう。私がこれまで取り組んできたこの種の機能を備えたサイトは、より多くの、よりグローバルなオーディエンスに対応するように設計する必要がありました。英語だけではない言語に対応した場合はどうなるのか、一貫性はアレンジメントよりもはるかに重要です。アラビア語は、英語では左から右ではなく、右から左です。その場合、両方に対応する場合、ボタンをどのように配置しますか?したがって、一貫性はボタンの配置よりも重要です。ビジュアル言語を作成する場合は、必ずフォロースルーするか、そうでなければ混乱の原因になります。

3
Majo0od

両方を同じ側に置き、[+]を上に置きます。そうすることで、それらは隣り合っているので、[+]を何度もクリックすると、数ピクセル以内で間違いをすばやく修正できます。

(これは フィッツの法則 の質問であり、OK /キャンセルの質問ではありません。)

2
Ken Mohnkern

+/-ボタンは、許可される乗客の最大数が少ない場合(3の場合など)にのみ推奨されます。これ以上の数の場合は、1〜10のドロップダウンリストを使用します。 10より大きい値の場合、編集可能なテキストになります。

+ボタンを配置できるところまで来て(個人的には)感じます右が理想的な位置です。

2
Manjunath Hegde

私はそれらを使用していますが、テキストフィールドに番号を入力しているので、ユーザーは必要に応じて番号も入力できます。したがって、誰かが1または2を持っている場合、1回クリックするだけです。

しかし、これは私のショッピングカート用であるため、たまに訪問者が1つの製品を5、10、または20注文することもありますが、ほとんどの場合、1つまたは2つです。

1
Source

一部の回答がこれにまったく関連していないため、「キャンセル-OK」と「OK-キャンセル」の研究を言います。「キャンセル」と「OK」は、値の線形調整に対応しないアクションですが、「 -"と" + "はそうです。

この点を説明するために、数直線を考えます。学校で教えられ、最も一般的に視覚化されている配置は次のとおりです。

... 0 1 2 3 4 5 6 7 8 9 ...

したがって、マイナスが左に移動するおよびプラスが右に移動するであることが最も自然です。

注:この要素の実装に対処するために、ユーザーはプラスとマイナスを使用して値を調整できますが、ユーザーが入力を入力することもできます。ドロップダウンはモバイルデバイスで使用するのが不便なので、ドロップダウンは避けます。

1
maxathousand

他の回答にも同意しますが、Plusは正しいように見えます。よろしければ、投稿したデザインと要素の配置について考えてみました。

フィールズ(大人、幼児など)は互いに非常に近いので、プラスとマイナスの記号による最小限の「混乱」があるかもしれません。 数値の入力をテキストの中央に配置して、その関係を強化することをお勧めします(すでに白色で行われているため)。

また、ボタンが無効になっている場合は、背景色の場合と同じように、不透明度を下げて看板を表示します。

最後のコメント、私は入力の分布がいくつかの順序に従っていると思います英語を母国語とせず、私にはそれほど明白ではありません)。

flight

0
Alvaro