web-dev-qa-db-ja.com

タブレットでのスクロールによるドラッグアンドドロップ

現在、タブレットでのドラッグアンドドロップに関する設計上の問題に直面しています。

シナリオ:画面が半分に分割され、右側にアイテムのリストが表示され、左側にボックスのリストが表示されます。アイテムを拾って箱に落とすことができます。

画面に収まらないアイテムがたくさんある場合は、右側でリストをスクロールすることができます。

ドラッグするアイテムをピックアップするための3つの解決策がありますが、それらすべてに問題があります。

  1. 0.5秒間押し続けると、アイテムがピックアップされ、ドラッグできるようになります。問題:ほとんどの人はただ握らずにすぐにドラッグしようとします。彼らは失敗し、それは彼らを困らせる。

  2. タッチしてすぐにドラッグ、アイテムはタッチしてすぐにドラッグできます。問題:スクロールしようとすると、リストをスクロールする代わりにアイテムを取得します。それは彼らが望んだことをしませんし、彼らを困らせます。

  3. ドラッグハンドルがあるので、ハンドルに触れると、すぐにアイテムを拾ってドラッグできます。他の場所に触れた場合、アイテムはピックアップされません。問題:アイテムアイコンを大きくする必要があります。ドラッグ可能な領域(ドラッグハンドル)が小さくなり、アイテムを拾いにくくなる場合があります。

このシナリオでは、ドラッグアンドドロップが最も自然な操作だと思いますが、完璧な方法を見つけることができません。何か提案はありますか?

ドラッグアンドドロップを完全に回避することは可能ですが、最後の解決策としてそれを使用します。

ありがとう!

13
Van Du Tran

代わりに「select + drag」アプローチを使用することをお勧めします。これは 'double-tap-drag' PhonicUKで説明 に似ていますが、すぐにドラッグする必要はありません。

ユーザーが最初にアイテムを1回タップして選択すると、アイテムが強調表示され、ドラッグ操作の準備が整います。他のアイテムは、選択されるまでドラッグを受け付けないため、スクロールは引き続き可能です。

このアプローチは、スクロール可能なツールバーからアイテムを選択するiPadのゲームで使用されていると思います。

また、小さなヘルプノートも含める必要があります。 「タップして選択し、ドラッグする」。

7
jfrej

オプション2は使用しません。すべてのソリューションの中で、最もユーザーフレンドリーではないようです。

オプション1および3に関しては、どちらも機能する可能性がありますが、これは、対話中の視覚的なフィードバックに大きく依存します。

しかし、私の意見では、オプション3は、使いやすさに関しては抵抗が最も少ないようです。私の考えでは、特定の場所(例:左側の4方向矢印アイコン)をタッチすると、オブジェクトを一定時間保持するよりもオブジェクトを移動することを理解(および指示)する方が簡単です。

また、オプションの1つと組み合わせて、ユーザーが実行する必要があることの紹介アニメーションも含めます。

2
Chris N.

押し続けることは許容できないと思います。これは(私が今まで見たことがある)確立された慣習ではないので、混乱し、苛立たしいものになるでしょう。

さらにいくつかの可能性:

4)スクロールの対象となる可能性のあるリストアイテムの周囲に空白スペースがある場合。

5)スクロールボタン:上にスクロールするボタンと下にスクロールするボタン。

どのソリューションを使用する場合でも、強力なフィードバックが必要です。アイテムがドラッグされ始めると、「ライトアップ」されるはずです。そのため、その1つのアイテムに何かが起こっており、タッチがおそらくスクロールの始まりではないことが明確に示されます。

ドラッグドロップを設定する必要はありません。ドラッグドロップの快適な感触がうまくいかない場合は、強制しないので、別の方法を試してみます。より良い解決策があるかもしれません。

1
obelia

アイテムを入れるボックスにスクロールバー/ストリップを追加することを考えましたか?アイテムをスクロールするために、ユーザーに上下にドラッグするハンドルを与えます。その後、個々のアイテムをすぐにドラッグできます。

もう1つ考えられるのは、オブジェクトの周りに表示され、ユーザーが保持を開始するとすぐに塗りつぶされる短い円で、ドラッグするのに0.5秒待機しているというフィードバックを示します。 (私は、ShazamアプリまたはKinectインターフェースのどちらかになじみがあると思います。)

1
Zak

どのプラットフォームを使用しているかはわかりませんが、ドラッグ操作の方向を検出できますか?ユーザーがオブジェクトを他のリストに移動しようとしているように横に移動する場合は、ドラッグアンドドロップです。動きが上下の場合は、スクロールと解釈してください。どちらかの操作を行う前に、最小しきい値のホールドを待つ必要があります。

1
Michael Brown

あなたができることはオプション1に固執し、タッチされているアイテムがドラッグの準備中であることを視覚的に示します。おそらく「ドラッグ...」のツールチップは0.5秒でフェードインします-これにより、ユーザーは誤ってドラッグすることなく自由にスクロールできます。一番望ましいと思います。

0
A Macdonald

タッチデバイスでよく目にするのは「ダブルタップドラッグ」です。すばやく1回タップし、すぐに押し続けてドラッグします。これはほぼ瞬時に行われ、ドラッグとスクロールを区別する方法を提供します。デスクトップをトラックパッドマウスで使用する場合、通常は次のように機能します。

0
PhonicUK

1本の指を使用してドラッグを実行し、2本の指を使用してスクロールを実行する、またはその逆を指示することができます。

0
PhonicUK