ブロックを上下に交換するための優れたUI
以下に示すUIを開発しました。
ここで、このUIに機能を追加します。ユーザーがifおよびelse ifブロックの位置を交換したい場合、彼はそれを実行できなければなりません。
1つのオプションは、ブロックを上下に移動するために、ifとifの隣にある上下矢印アイコンです。他のより良いオプションは何でしょうか？
各ブロックにドラッグハンドルを追加して、ユーザーに順序を決定させることをお勧めします。ブロックの順序に関係なく、最初のブロックは常にifブロックで、残りのブロックはelse if。
詳細については画像を参照してください
このようにして、ユーザーは、ブロックがデスクトップでもモバイルデバイスでもドラッグ可能であることを事前に知るようになります。
他のすべての答えはdragハンドルを提案しますが、私はagainstを提案します。
ドラッグハンドルの問題は次のとおりです。
- ブロックを1つの位置から特定のエリアに移動するようにユーザーに要求します。彼がその場所を逃した場合、エラーが簡単に発生する可能性があります。
- 移動するブロックが高すぎると、移動距離が煩雑になる可能性があります。
- 実装するのは難しいかもしれません
- ドラッグハンドルは、アイテムをどこにでも移動できることを示しますが、この場合、ターゲットは1つだけです。
ドラッグハンドルはlist of [〜＃〜] n [〜＃〜]の項目でうまく機能します。これらの各項目は少量のスペースを占有し、各アイテムはリスト内で移動できますanywhere。
ドラッグではなくスイッチ
ここでは、switchの位置、2アイテムの間にしたいだけです。開始位置とターゲット位置は1つだけです。トグルボタンを使用するだけです。
例
たとえば、Google翻訳は二重矢印ボタンを使用して、ソース言語とターゲット言語を切り替えます。
これがConverbotです：
複雑にしないでおく
ドラッグハンドルを使用してアイテムをどこにでも移動できるという錯覚をユーザーに与えないでください。位置を切り替えるという単一のアクションを実行する単一のボタンがあります。
Mailchimpはとアイコンを使用して、ブロックのドラッグ可能性を示します。
GoogleはGmailでドラッグハンドルを使用しており、カーソルを合わせると表示されます。
アイコン（任意のアイコン）またはドラッグハンドルを使用してオブジェクトがドラッグ可能であることを示すことは、どちらも優れたソリューションですが、すべてソリューションのアフォーダンスに帰着します。ユーザーにそれを示すと、彼らはその意味を理解しますか？これを解決する1つの方法は、新しいユーザーに機能を導入することです。どちらを選ぶかはあなた次第です。
3番目のオプションは、カーソルを置いたときにカーソルプロパティをmoveに設定することです。これはデフォルトで実行するのに適した方法であり、前のオプションと組み合わせて使用できます。これに関するアドバイスの1つは、ブロックの一部のみをドラッグ可能（ハンドルのみ）にすることです。これにより、ユーザーがブロック上を移動するときに常に移動カーソルが表示されることはありません。彼らはまだブロック上のものを選択してクリックする必要があります。カーソルを移動すると、ドロップダウンボックスを選択できないとユーザーに思わせる場合があります。
順序付け可能な要素のリストを作成するときは、ドラッグハンドルを避けようとしますが、これらは、UI要素が小さいので面倒ですだけです。
代わりに、ボタンまたはコンテキスト領域（またはその両方）にMove UpおよびMove Downボタンを実装します。
ドラッグハンドルをボタンに直接置き換えることの欠点は、ユーザーがmoveアクションのたびにマウスを再配置する必要があることです。理想的には、移動するブロックとブロックが選択されたときに表示される静的ボタンを強調表示（または「チェック」）する選択メカニズムが必要です。
関連ボタンには、Remove、Add Comment、Copyを含めることもできます。ドラッグハンドルでは、これらのアクションを同じメカニズムで自然に追加することはできません。
私はあなたが提案したようにして、上/下矢印をifブロックおよび個別条件の場合ユーザーもそれらのいずれかを交換したいと考えていました。
また、アイテムを上下に移動できるかどうかに基づいて、矢印を有効/無効にすることで、矢印の位置を認識させることもできます。
画像に基づいて、次のようになります。
注：
明らかに、個々の条件の高さをもう少し高くして、大きな矢印を付けることができます。
この問題を解決する必要がある場合は、2つの異なる方法を組み合わせて解決することになります。
- ユーザーがブロックをドラッグして位置を変更できるようにします。
- 1つのブロックが選択されている場合、キーボードの矢印を使用してブロックの位置を変更します。
さまざまな方法を組み合わせて何かを行うのは興味深いと思います。そのため、ホバー時またはブロックが選択されている場合に、話している矢印を表示することもできますが、この方法はドラッグまたはキーボードを使用して。