web-dev-qa-db-ja.com

テキストとドラッグアンドドロップ検索の組み合わせ

複数の入力コントローラーを含むソフトウェアアプリケーション(Webサイトではない)のフィルター機能を設計しています。テキスト入力は、ファイルのドロップゾーンと組み合わせて使用​​されます(ドラッグアンドドロップ用)。

Google画像検索は画像のドラッグアンドドロップをサポートしていますが、テキストとの組み合わせはサポートしていません。また、ドラッグアンドドロップがサポートされている手掛かりをユーザーに提供していません。点線とテキストの説明や「ブルズアイ」のターゲットアイコンを組み合わせて使用​​することを考えています。

検索の標準アイコンである虫眼鏡は、テキスト検索フィールドの横でよく使用されますが、テキストフィールドよりも多くの入力コントロールを使用しているため、そのアイコンを使用してテキストフィールド自体を表すのは間違っています。私の考えは、拡大アイコンを検索領域全体の一般的なアイコンとして使用することです。

Drag and drop - text search

テキストの代わりに「テキスト」と「ファイル」を説明するために使用するアイコンについて何か考えはありますか?テキスト用のペンアイコンと標準のファイルアイコン(Edgeを折りたたんだ紙)の使用を考えています。

ユーザーがドラッグアンドドロップせずにファイルをロードできるようにするメニューオプションをドロップゾーンに追加する必要があります。Googleの方法で実行する方が良いでしょう(ファイルがロードされたときにドロップゾーンになるロードファイルボタンを表示します)ドラッグ)?

このような複数の入力を使用する場合に考慮する必要がある特別なことはありますか?

一般的な考えやアイデアも大歓迎です!

ps。点線のボーダーがドロップゾーンを表す理由を誰かが知っていますか?

7
Henrik Ekblom

ドラッグアンドドロップはエキスパートショートカットです

これにはドラッグアンドドロップを含めることをお勧めします。十分に活用されていないデザイン要素です。ドラッグアンドドロップの問題は、ご想像のとおり、発見可能性です。また、一部のユーザーにとって物理的に扱いにくく、アクセシビリティの課題もありました。もちろん、あなたはこれらの問題を認識しています。そのため、メニュー項目でファイルを検索条件に追加する必要があります。したがって、メニューベースのバージョンを「メイン」UIと考え、ドラッグアンドドロップを専門家のショートカットと考えます。メニューベースのUIをできるだけ速く簡単に設計すると、ドラッグ機能を示す圧力がなくなります。

参照ボタン

ファイルを選択する従来の方法は、(メニュー項目ではなく)横に[参照…]ボタンが付いたリストボックスを使用する方法です。これは発見可能性が高く、おそらくすでにユーザーに馴染みのあるものです。これは、コンボボックスの横にあるドロップダウンボタンと大差ありません。リストからではなく、ツリーからの選択(および複数選択)のみが可能です。これもかなり高速です。ユーザーがデスクトップにファイルを表示していない場合は、ドラッグアンドドロップよりも高速です。

発見可能性の向上

ドラッグアンドドロップの見つけやすさを向上させるために、ある種のヒントテキスト(たとえば、「ファイルをドラッグしてOK」など)がそれを実行し、提案されているように、またはその横にあるリストボックスにテキストを配置できます。詳細な説明が必要なユーザーのために、ヘルプリンクを配置することもできます。一部のアプリケーション(必ずしもあなたのものではない)で、ヒントは役立つと思われるときに表示される一時的なテキストである場合があります(たとえば、アプリは低速のドラッグ以外の方法を繰り返し使用してユーザーを検出します)。 。

ドロップ可能な機能を示すための標準的な静的グラフィックは実際にはありません。さらに、多くの場合、より大きな問題はwhatがドラッグできる場所ではなく、どこにドラッグできるかを示すことです。点線が「ドロップエリア」を意味していることに気づいていません。ほとんどのユーザーにとっても同様です。多分それは製作上の慣習であり、私が必ずしも大いに好むものではありません(点線の枠はすでにフォーカスを示すために使用されています)。

コピーアンドペーストはどうですか?

ドラッグアンドドロップを実行している間、ファイルのコピーとリストボックスへの貼り付けもサポートできます。これは、ドラッグアンドドロップの物理的およびアクセシビリティの問題を解決するのに役立ちます。実際、できる限りドラッグアンドドロップとコピーアンドペーストを併用したとしても、それほど発見可能性の問題ではありません。ユーザーは単にそこにあると思い込み始めます。

アイコン、えっと、何でも

提案されたアイコンは、アイコンを強調するために、それらが存在する限り正常に聞こえますに加えてテキストラベル。これには、検索UI全体の上部にキャプションが含まれます。テキストボックス、リスト、および2つのボタンを使用すると、これは比較的スペースを消費する検索機能であり、アイコンの代わりにテキストを使用することで、パーセンテージを大幅に節約することはできません。私のポリシーでは、正しいアイコンが何か疑問がある場合は、アイコンだけに頼ることはできません。このような疑問は、ユーザーが認識する十分に標準化されたアイコンがないことを意味します。

もちろん、テキストラベルがある場合、アイコンは二次的なものであるため、それらが何であるかはあまり問題になりません。彼らはテキストが持っていない意味の色合いを追加する場合に最適です。たとえば、提案されているようにファイルに紙のアイコンを使用すると、ファイルマネージャーに精神的につながり、ユーザーがファイルにドラッグしてそこに行くように促します。

4

表示しているものに標準のアイコンはありません。 標準のアイコンがない場合は、常にテキストまたはテキスト付きのアイコンを使用する必要があります。そうでなければ、間違いなく一部の人々を混乱させるでしょう。あなたが今持っているラベルはそれを非常に明確にするので、私はそれらを保ちます。

ただし、アイコンを使用してセクションをマークする場合、マークするセクションが最初からセクションのように見えることを確認する必要があります。現時点では、虫眼鏡アイコンが2つの検索領域に関連していることは明らかではありません。あなたはそれらを統一するために賢明なデザインをする必要があります。それらを共通のボックスに入れることは可能ですが、これを実現する方法は他にもあります。

全体として、私はそのアイデアは良いと思いますが、テキストとファイルが検索でうまく組み合わされる方法は、技術的には最大の頭痛の種になるでしょう。どちらの要素がより重み付けされるか、およびデフォルトの結果の順序をどのように決定するか。 検索結果の並べ替えに最適なデフォルトは何ですか?

3
JohnGB