web-dev-qa-db-ja.com

「ここにファイルをドロップできません」を視覚的に示す

UIで「ファイルを目的の場所にドロップできない」かどうかをユーザーに表示しようとしています。

enter image description here

上記の添付画像を参照してください。ユーザーはファイルを定義された長方形の領域にドラッグアンドドロップできますが、すべてのファイルをこれらの長方形のいずれかにドロップできるわけではありません。ユーザーがファイルをドロップできない長方形にドロップしようとした場合、このファイルをここにドロップできないことをユーザーに視覚的に示したいと思います。このため、ドラッグ中にファイルアイコンと共に赤いエラーアイコンを現在表示していますが、これをより適切に表示したいと考えています。 Apple UIガイドライン)でこれに関するコンテンツを見つけることができませんでした。ファイルを場所にドラッグできない場合に表示できる他のオプションを教えてください。

10
Ayse

ドロップが許可されている場所をユーザーに知らせるために、ポジティブなUIフィードバックを使用することをお勧めします。特定の選択の場合、通常、有効なドロップターゲットである1つまたは2つの領域があります。それらをハイライトし、他の領域が背景にフェードインできるようにします。

これは、Atlassian Jiraの例です: 問題の移行 Dragging and Dropping an Issue to a Column with Multiple Statuses

ユーザーが選択したアイテムのドラッグを開始するとすぐに、

  • アクティブなドロップターゲットは、境界線、色、およびアクション/状態で明確にマークされます。
  • 非アクティブまたは許可されていないドロップターゲットはまったくマークされません。背景の一部として表示されるだけです。
6
metacubed

こんなことやってみませんか?.

enter image description here

ユーザーがアイテムをクリックしてドラッグしたら、上記のように有効なセクションと無効なセクションをハイライト表示します。ユーザーが(ドラッグを開始する前に)クリックするとすぐにそれを実行することをお勧めします。これは、実際には、ユーザーがアイテムをドロップする場所のプリカーソルになります。

あなたが言及したアプローチでは、ユーザーは実際にアイテムをドロップして戻り、アイテムをドロップして戻ってくるなどです...それはユーザーにとって苛立たしいことです。

お役に立てれば幸いです。乾杯!

18
Dinesh Golani

1つのアイデア:ドラッグが開始したら、ボックスをグレー表示し、ユーザーがその領域の上にドラッグする場合、マウスカーソルがその領域にドロップできないことを示していることを確認してください(十字の付いた赤い円?)。

そして、その考えをさらに拡張します。ドラッグが開始したら、赤または灰色を使用してドロップできないことを示しますが、ドロップできる領域に緑または他の魅力的な色を使用することもできます。

12
Adam Plocher

ドラッグアンドドロップに関する「OS Xヒューマンインターフェイスガイドライン」は、次の場所にあります。 https://developer.Apple.com/library/mac/documentation/userexperience/conceptual/applehiguidelines/ TechnologyGuidelines/TechnologyGuidelines.html#// Apple_ref/doc/uid/TP30000355-SW9

ガイドラインは非常に多くの詳細を説明していますが、ファイルをドラッグできる領域を強調表示し、ファイルをドラッグできない領域を強調表示したくない場合があります。ポインターがある領域のみを強調表示する必要があります。

エリアがファイルを受け入れることができない場合、「ズームバック」を表示する必要があります。この場合、ファイルはソースの場所にズームバックされます。

9

可能であれば、フィードバックで冗長にしてください。この場合、ドロップされたアイテムとドロップレシーバーという2つの重要な要素があり、それらの両方がフィードバックを提供したり、点灯したり、調整したりできます。

ドロップが利用できない場合は、カーソルがそれを示し、ドロップレシーバーがそれを示すことになります。カーソルは、斜線のスラッシュのある円になることを示し、ドロップ領域は、フェードアウトすることで彩度が低くなることを示します。

どのプラットフォームについて話しているのかはわかりませんが、すべてのプラットフォームには、この状況を伝える方法に関する独自の規則があります。

6
obelia

斜めストライプのボックスの周りのボーダーはどうですか。構造テープと同様の斜めのストライプは、この領域が現在使用できないことをユーザーに示唆します。 something like this

2
Ameen Akbar

Unavailableマウスポインターは、何百万ものWindowsユーザーが理解できるオプションです。

enter image description here

1
Chairman Meow