ドラッグアンドドロップ設計で「ドロップキュー」のためのスペースを作る
棚の本のドラッグアンドドロップによる並べ替えインターフェイスを開発しています。
（できます 試してみてください 最新のWebKitを使用している場合）。
本を棚の上にドラッグすると、近くの本を右にずらすことで、本のスペースを確保できます。
したがって、棚がホバーを失うと、以前に収容されていた空きスペースが崩壊します。
。
これが意味をなさない場合は、 実際の動作を見てください を試してください。
私の好みでは、これは、棚がすでに梱包されている場合を除いて、かなり甘いようです。
この例では、棚に5冊以下の本を入れることができます。
では、ちょうど5冊の本がある棚の上にカーソルを置くとどうなりますか？
私はこれについて一生懸命考えていました、そして私がまだ満足のいく答えを見つけたのか確かではないので、この質問。
以下で簡単に説明するいくつかのオプションを検討しています。
それらすべてに長所と短所があり、どちらが優れているか、そもそも私が考えていなかったいくつかの解決策があるかどうかについて、コミュニティの意見を受け入れます。
さて、それは私がこれまでに思いついたものです。
一番右の本を次の棚に移動することで、棚をすぐに「オーバーフロー」させることができます。
このソリューションは非常に簡単です。
スペースが必要です。スペースが足りません。最後の要素を次の棚に移動して、スペースを空けましょう。
今、いくつかあります！
これが デモ が動作する方法です
残念ながら、このソリューションには2つの大きな欠点があり、実際には使用できません。
- アクションが完了する前に、ユーザーの本の順序を混乱させます。
- 次の棚も梱包されている場合、それもオーバーフローする必要があります。
これは、ほとんど詰め込まれた本棚の上にドラッグすると、溢れ出る棚のカスケードにつながります。
これは間違いなく最悪です。
ここでのテイクアウェイレッスンは、絶対に必要な場合を除いて、ユーザーの本の順序を台無しにしないでください。
そこで、ソリューション＃2に進みます。
本をまとめてスペースを空けることができます。
梱包された棚への落下を一切禁止しない限り、オーバーフローを完全に回避することはできません。
それでも、afterドロップのみをオーバーフローさせ、ドラッグ中はレイアウトを変更しないでおくことができます。
これにより、ユーザーの本の順序に対するオーバーフローの悪影響と、本を詰めた棚の真ん中に置くことによって変更するというユーザーの意識的な決定とのバランスが保たれます。
全体として、このソリューションは最初のソリューションよりも優れているように見えますが、他にもいくつかの問題があります。
- どうやって本を美しくまとめますか？
- ドロップ後にオーバーフローが発生することをユーザーにどのように通知しますか？
Coverflow-like clumpingは、本がstay clumpedであると示唆しているようですが、これはそうではありません。
私が実際に考えていない他のオプションもあります。たとえば、背骨をエミュレートすることで、5冊以上の本を棚に置くことができます。 これがまさにreal本と棚がこの問題を解決する方法です。
棚が梱包されると、「脊椎モード」に入る場合があります。
しかし、これはcould UIを不必要に複雑にします。
投稿を締めくくるために、私はこれらの非常に具体的な質問への回答を探しています：
- UXに関して、どちらがより良いソリューションだと思いますか？
- 記述されている問題に対する他のどのような解決策が考えられますか？
- 同様の問題が誰かによって以前に解決されましたか？どうやって？
あなたが今それを持っている方法は、iBooksがiPadでどのように動作するかということです。
私がお勧めする可能性のある追加のソリューションは、本が落下した後の場所をより強調することです。そのため、落下したときに本がどこに行くのかをユーザーに知らせます。アイデアについては、以下を参照してください。
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
基本的な考え方は、マウスを離したときにアイテムがどこにあるかをユーザーに明確に示すことです。ラップを許可することは前もって大丈夫だと思います。ただし、ユーザーがドラッグを元のシェルフにドラッグして「キャンセル」した場合は、ラップされたアイテムをラップ元のシェルフに戻す必要があります。
「スパインモード」についてのあなたの考えはおそらくUIを過度に複雑にすることに同意します。そのインターフェースでのドラッグアンドドロップも許可すると、ターゲットが大幅に小さくなり、タスクのパフォーマンスに悪影響を与える可能性があります。
UXに関して、どちらがより良いソリューションだと思いますか？
2つのうち、最初のものを選択します。
ユーザーが要素を移動するときに本の多くの行を前後に移動することは「うるさい」ことですが、少なくともそれがコミットする前にアクションの結果をユーザーに通知するので、「まとまり」よりも優れています。
アクションが完了する前に、ユーザーの本の順序を混乱させます。
それどころか。それは本を彼らがとにかく取るつもりである順序に並べ替えます-それは移行がより不快ではないようにそれをより早くするだけです。
[clumping]は、ユーザーの本の順序に対するオーバーフローの悪影響と、本を梱包された棚の真ん中に置くことによって変更するというユーザーの意識的な決定のバランスをとります。
ユーザーがこのデザインをテストすることもできますが、ユーザーに棚に5つの要素が表示されることを期待できると思います。次に、ユーザーが離脱すると、5つの要素が突然4に変わります。ユーザーが注意を払うのをやめた可能性があることを考えると、棚の変化を発見できない可能性が高くなります。
記述されている問題に対する他のどのような解決策が考えられますか？
それは、ユーザーが本を注文することを期待する方法に依存します。彼らはカテゴリーとセクションを作成しようとしていますか？固定サイズのグループ（棚）を放棄することが答えになる場合があります。お気に入りのアイテムをすぐ手に入れたいだけですか？ライブラリを並べ替えるよりも、その振る舞いをサポートするより良い方法があるかもしれません。
同様の問題が誰かによって以前に解決されましたか？どうやって？
はい。 Photoshopがレイヤーの動きを処理する方法を見てください。
移動される要素は半透明になり、複製されます。ユーザーが配置ポイントにカーソルを合わせると、線が表示されます-配置する要素の最小化バージョン。マウスボタンを離すと、線が要素全体に拡張され、その後、他のレイヤーが下に移動します。
このソリューションは、あなたが恐れている「カスケード」とそれに関連する視覚的な「ノイズ」を防ぎますが、それでもユーザーはアクションの結果がどうなるかを確認できます。
要求通りに回答として投稿されたコメント：
私はかなりベースから外れているかもしれませんが、「あふれた」本を手に入れるであろうあふれるものの下に新しい棚を作ってみませんか。ホバーが別の場所に移動した場合は、「オーバーフローした」本を元に戻し、一時的な棚を折りたたむ/削除します。
GotDibbsへの対応：うるさいとは思わない。 「ホバー」の下にある完全な棚のために、カスケード効果の可能性がある棚全体を再シャッフルすることは、私にとって最も騒々しいでしょう。新しい棚の挿入は垂直方向の動きのみであり、1冊の本だけが（ドラッグされている本を除いて）動き回ります。
実際、Danがすでにコメントで述べたように、新しい棚を挿入しても、ユーザーが棚をどのように満たすかについての選択を台無しにすることはありません。
代わりに、Chromeを使用して最も訪問されたページを整理*する方法、またはTF2がユーザーのバックパックを提示する方法を確認することをお勧めします。
あなたの棚はn×5スロットに配置されます。アイテムのドラッグを開始すると表示される破線のグリッドでこれを表示できます。スロットから別のスロットにドラッグすると、内容が入れ替わります。
つまり、スロットのアイテムXを別のスロットのアイテムYにドラッグすると、XとYの入れ替えが行われます。これは恣意的に見えるかもしれませんbutオーバーフローの問題を完全に回避します。これにより、棚の中央に隙間を設けることもできます。
Chromeは、以前Xで占められていたスロットに向かってドロップターゲットをナッジすることで、スワッピング動作をほのめかしました。
* Chromeは、「最も訪問された」アイテムのシャッフルをサポートしていないようです。