web-dev-qa-db-ja.com

Spotlightスタイルの検索とマルチタグ選択を組み合わせる最良の方法

作成する必要がある個人用拡張機能を備えた「UIデザイナーのブロック」を少し持っています。

私は現在 Better Bookmark を使用しています。これは信じられないほどシンプルなChrome拡張機能で、フォルダー名のクエリフィルターされたSpotlightスタイルのポップアップボックスを提供します。 Chrome Web Store:

Screenshot of Better Bookmark

シンプルですが、特にキーボードを使い続けたい場合は非常に効果的です。それは素晴らしい。

しかし、それは1つのフォルダしか行いません。 ChromeのBookmark APIには、1つのブックマークを複数のフォルダに複製することに関する内部的な制限がないため、指定したフォルダにブックマークを付けるための新しい機能を(使いやすい/高速な検索アルゴリズムを使用して)作成したいと考えています。 (タグが拡張ローカルであるため、私はこの方法を既存のタグ付けシステムよりも優先します-拡張機能、byebyeタグをアンインストールします。また、すべての拡張機能が正しく同期するわけではありません。)

私が完全かつ完全にこだわっているのは、UIの実行方法です。

テキストボックスはどこに置くのですか?アイテムをテキストボックスに保持しますか、またはスペースキーなどを押したときにどこかにアイテムを「収集」しますか(テキストボックスをクリアしてカーソルをホームに戻すことができます)? 「はい」の場合、入力時に「収集」したアイテムをどこに表示すれば、エラーを削除するためにキーストロークを最小限にとどめることができますか?

いくつかのランダムな考え:

  • 左/右は使用できません。テキストボックスに必要です。したがって、水平方向のナビゲーションは無効です。

  • テキストボックス内のすべてのフォルダーを単一の文字列として保持している場合、入力時に画面を右方向にゆっくりと移動するため、リストエントリが整列し、編集参照がずれます。それはもはや直接並んでいません。また、部分的なエントリで誤ってEnterキーを押すと、あいまいな問題が発生する可能性があります。

  • 収集したフォルダーを上部に配置し、テキストボックスを下から2/5程度にして、残りをリストに配置することもできますが、収集されたアイテムのリストにジャンプする直感的な単一のキーストロークは考えられません。私はUpUpUpUpUpUpUpだけを考えて、選択のリストを上に集め、収集されたリストに入れることができます。そして、完了したらDownDownDownDownDownに移動する必要があります。

  • 集めたものを一番下に置くことを考えたのですが、これはなんとなく……間違っているように感じます。理由はわかりません。

おそらく考えていないことがいくつかあるかもしれませんが、これは今までのところ私の心のメモを覚えています(私はこれについて数日間考えていましたが、最終的に助けが良い考えだと判断しました:P)。

6
i336_

Tim Schlechterは、「タグ入力UXの問題」を Bootstrap Tags Input プロジェクトでかなりうまく解決しました。
入力ボックスにタグを収集します(実際にはそうではありませんが、そのように見えます)。キーボードで効率的に使用できます。見てみな!

それはそのように機能します:あなたはタグと内部にテキスト入力を持つdivを持っています。

テキスト入力が空の場合:

  • 矢印キーで移動します
  • バックスペース付きでその前のタグを削除します
  • 削除でタグを削除します

彼の実装には2つの欠点しかない:

  1. 2つのタグの間をクリックしてそこで編集することはできません。
  2. タグを移動することはできません。

これは、画面上のポップオーバーほどコンパクトではありませんが、アイデアを与えるはずです。

1
Larivact