読者です 読者をやめる 読者になる 読者になる

by shigemk2

当面は技術的なことしか書かない

ドラッグアンドドロップの気になる瞬間

読書ノート

drag-and-dropは一見単純なように見えて、実装するにはインタラクションが生じる瞬間が多く存在する。

  • ユーザーは何をドラッグできるかをどうやって知るのか?
  • あるオブジェクトをドラッグアンドドロップする意味は?
  • オブジェクトをドロップできる場所、できない場所はそれぞれどこか?
  • ドラッグ可能なことを示すために、どのような視覚アフォーダンスを用いるのか
  • ドラッグ中に、有効なロップターゲットと無効なドロップターゲットをどうやって区別するのか
  • ドラッグするのはオブジェクトそのものなのか、ゴーストなのか、サムネイルなのか
  • ドラッグアンドドロップの操作中に、どんな視覚的フィードバックを返すべきか

また、drag-and-dropの操作中に、ユーザーにヒントを与えるために利用できるイベントは
たくさんある。

ページロード
マウスオーバー
マウスダウン
ドラッグ開始
元の位置からドラッグ

など、色々なタイミングで「ドラッグ可能であること」「ドロップ不可能」などを通知したり、
「どこにドロップできるか」ナビゲートすることも可能である。