私はしばらくの間私を悩ませているこの問題を抱えています。
Webアプリに2つ以上の並べ替え可能オブジェクトを含むインターフェイスがあります(並べ替え可能は、子コンテンツを再配置できるコントロールです)。例: http://yuilibrary.com/yui/docs/sortable/simple-sortable.html
私のモックアップは次のようになります:
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
menus
ソート可能オブジェクトは、標準のソート可能オブジェクトと同じように動作します。
問題はPages
ソート可能です。並べ替え可能にするために、コンテンツを並べ替えることができます。通常、予想される動作は、アイテムをクリックして押したままにし、元の場所からアイテムを削除し、アイテムが挿入される新しい場所のプレースホルダーを表示することです。
ただし、私の場合、このsortableには2つ目の目的もあります。 Pages
からMenus
のいずれかにアイテムをドラッグしている場合、代わりにそのアイテムのコピーが作成されます。通常、これを行う場合、pages
並べ替え可能オブジェクトの元のアイテムはそのまま残され、コピーが作成されてカーソルまたは指に固定されます。
私のPages
ソート可能オブジェクトはこれらの2つの動作を可能にする必要があるため、これらの機能をどのように明確にすべきかはわかりません。
pages
ソータブル内のページを並べ替えることができます。pages
ソータブル内のページのコピーをメニューソータブルにドラッグできます。私はこのようなページ内のアイテムのスタイルを検討しました:
ただし、これは少し混乱する可能性があります。
このような並べ替え可能な操作をユーザーフレンドリーで簡単に見つけられる方法で実現する方法について、実際にパターン/例はありますか?
可能であれば、ページの上部に、プロセスを説明する短い簡潔な説明を追加します。
さらに、またはその代わりに、それはあなた次第ですが、オブジェクトを自由にドラッグできますが、マウスが両方の領域を区切る垂直線を横切ると、コピーが生成されていることをユーザーに知らせるメッセージが表示されます。オリジナルはそのまま残ります。そのメッセージは右側の空の領域にある必要があるため、ドラッグアクションに影響を与えません。
また、デザインの下部にあるステータスバーのように見えるものを使用して、そこにメッセージを表示し、キーをドラッグアクションと組み合わせることができます。たとえば、Ctrlキーを押しながらドラッグすると、コピーが作成されます。これは、移動またはコピーできるアイテムにカーソルを合わせると、下部に説明されます。
ステータスバーを使用しない場合でも、ドラッグとキープレスを組み合わせるシステムを使用できます。空の領域の1つにメッセージを表示するだけで、それを目立たせます。
ドラッグアンドドロップには、それが自明ではない機能(ユーザーがアイテムをドラッグできることをどのように推測できるか)であるという使い勝手の問題があり、ドロップターゲットがソースと同じでない場合はさらにそうです。
これの主な解決策は、「アシスト」を含めることです-ドラッグできるものと場所を示すラベルを表示します。あなたのケースでは、メニュー見出しの下に「ページをここにドロップしてページへのリンクを追加する」を追加できます。
さらに、ドラッグの開始時に、ドロップターゲットをアニメーション化することを検討してください。たとえば、グロー効果で境界をアニメーション化します。