web-dev-qa-db-ja.com

「値の加算と減算」水平または垂直のコントロールは、より良いアフォーダンスを制御しますか?

「値の加算と減算」は、コントロールを水平方向に配置することは、垂直方向に配置するよりも効果的ではありませんか?

私はプロジェクトに取り組んでいます。NASAコマンドセンターの複雑さと同等のユーザーインターフェイスを14インチのタッチスクリーンに押し込もうとしています。縦の「+」と「-」を押し込もうとする横のスペースが不足しています"カテゴリ全体を1つの水平面に維持しようとしながら制御します。

"+"と "-"の水平配置を実験しているので、このレイアウトの経験がある人はいますか?垂直配置は水平配置よりもアフォーダンスが優れていますか? enter image description here

4
Jack.ak.Hsu

垂直方向の配置を好む理由:

私の個人的な意見(私はどんな調査でもバックアップすることはできません)では、垂直方向の変形は少し直感的です:

考えることに慣れている

5は2よりも高い/大きい "

のではなく

5は2よりもです。

「高い」は、垂直方向を意味します

ただし、数値を水平ベクトル上に配置する場合は、さらに右にすると意味があります。

そうは言っても、垂直レイアウトと水平レイアウトの実際の違いは無視できると思います。


アライメントよりも重要なこと:

水平方向または垂直方向のバリアントを使用するかどうかにかかわらず、groupingを覚えておいてください。のように「どのボタンがどの番号を変更するか」。

特に、さまざまなインジケーターやボタンでいっぱいの詰め込まれたパネルを扱う場合、これは非常に重要になります(そして見過ごされがちです)。


ラベル– +-の私のケース:

変更する値が数値である限り、ラベルに+-を使用することをお勧めします 。率直に言って、これはできるだけ直感的です。

任意の値のリスト(「45°」、「90°」、「180°」、「りんご」、「一方、オレンジ」)は、の使用を推奨します。


これらすべてを念頭に置いて、次のようにします。

How I would go about it


代替アプローチ:

検討する価値のある別のオプションは、デフォルトで数値のみを表示することです。タッチ/ロングタッチでは、次のいずれかを実行できます。

  • 番号を選択するための「slot-machine」ビューを表示します(- this one-look in example 3 or 4 と同様)
  • 同様の値選択スライダーを表示 この画像の上半分に –これは、有限の数値範囲があることを前提としています。
  • 番号の選択/入力の好みの方法でオーバーレイを表示します。

もちろん、これらの方法の実行可能性は次の要素に依存します。

  • タッチ/ロングタッチの追加ステップがユーザーに受け入れられるかどうか(1秒おきに数値を変更する必要がある場合、これは非常に面倒なことが判明する可能性があります);
  • 入力中に他のコントロールが不明瞭になることが許容されるかどうか。
4
vzwick

数値の上に増分ボタンを、下に減分ボタンを配置するのはどうですか?それはスマートフォンアプリの数でもあります。このようにして、プラス/マイナスのアップ/ダウンの関連付けを維持しますが、より多くの垂直方向のスペースを使用できます。ただし、これは数値の下の左/右ボタンよりも垂直方向のスペースを多く使用します。

4

まったく違うと思う、それはタッチです:)

ダイヤルを実装する優れた方法は、Propellerheadによる 図iPhoneアプリ (ビデオを見る)にあります。それは一般的に素晴らしいUIを持っていますが、値を変更する経験は本当にいいです。上下にスライドすることで変更される上部の円形コントロールの動作を確認します。これは、スペースを節約してより直感的/適切にするために必要なものに近いかもしれません。

enter image description here

考慮事項
それらのインターフェイスの唯一の問題は、大きなセットで非常に正確な数が必要な場合です。たとえば、1〜500の範囲の345の場合、これをスライダーで行うのは困難ですが、+-1の増分ではさらに面倒です。

実際、これは現在使用しているインクリメントパターンの主な問題です。一度に+1または-1しか実行できません。これは0から29に進むときに良い経験ですか?

3
JeroenEijkhof

完全に根本的な解決策に取り掛かり、コントロールをまったく持たないのはどうですか?

ユーザーがセルをクリックして横にスライドすると、カーソルが変化し、カーソルを左右にスライドすると値が上下します。

ブレットビクターは彼の視覚的な説明でこれを行います: http://worrydream.com/TenBrighterIdeas/

たとえば、ここでは、ユーザーがインタラクティブな数値の上を移動すると、カーソルがセレクターカーソルに変わり、ユーザーは左または右にスライドできます。私はこれがタッチ環境でうまく機能しているのを見ることができます:

shows cursor on a number which can be slid to increase a value

また、ホバー時にポップアップするスライダーを使用します。 enter image description here

スライダーを増やしたり、さまざまな方法で微調整したりできます。たとえば、ウィンドウまたはショートカットの上部にあるメニューまたはツールの単一の設定を介して、ユーザーが増分を制御できるようにすることができます。

このテクニックをタッチに適用することにはいくつかの問題があります。注意深く設計すれば、すべて解決できると思います。

  1. ユーザーの指がカーソルの変化を覆い隠すため、提供されるフィードバックをタッチ環境に適応させる必要があることは明らかです。セル全体を強調表示して、クリックでコントロールを表示できます。

  2. 発見可能性の問題があります...インタラクティブなページ上のすべてを示すことが重要です...おそらく、Bretが使用したような色合いまたは点線で。別のアイデアは、ページに入るときにすべての非表示のコントロールをすばやくフラッシュすることです... ここ で説明されているように。

  3. ホバーはタッチでは機能しません...クリックベースにする必要があります。

このソリューションは確かにかなりのスペースと「視覚的な混乱」を節約します。特にエキスパート環境で使用すると、非常に学習しやすいと思います。

レイアウトの種類のディスプレイを設計するために私が強くお勧めするもう1つのリソースは、Stephen Fewの優れたWebサイトです。 http://www.perceptualedge.com/

ダッシュボードのデザインやすばらしいディスカッションフォーラムに関するアドバイスはたくさんあります。

2
Lisa Tweedie

@Yallowとは対照的に、これらはおそらく他の分野に専門知識を持っている人々であり、私はおそらく、彼らは新しいインターフェースを学びたくないでしょう。水平方向のものは私にとって垂直方向のものと同じようには機能しません(垂直方向のものは "up"と "down"の値を変更することを示しているためです)、これらの方が好ましいでしょう。さらに、水平のものは私がうまくいくのに少し時間がかかります-それは私だけかもしれません。

ただし、この方法をとる必要がある場合は、対象者が水平方向のコントロールの使用方法を学習できることも期待します。マイナス面はおそらく一般の人々よりも少ないでしょう。あなたが持っている場合-あなたが持っていると思われるように-それらを異なるものにする正当な理由があれば、それを行ってください。この場合、コントロールを水平に合わせることができることの利点は、変更ボタンがわずかに異なることよりも重要になると思います。

2

NASAコマンドセンター

ユーザーインターフェイスを設計するときに最初に行うことの1つは、ユーザーを知ることです。 [〜#〜] nasa [〜#〜]のためにこのプロジェクトで示したことから、これは、これを設計していることを示す良い指標です垂直vs水平の使用が大きな違いをもたらさない、かなり訓練されたユーザーのセット。

これら4つのオプションはすべて比較的直感的であり、Gestaltの近接原理。これが、多くの機能を備えたものを設計する際に留意しなければならない主要な原則です。

1
PL3X