その場でドロップダウンリストに項目を追加しますか？

Question

アプリケーションの特定の場所で、ユーザーはいくつかの項目を含むドロップダウンに遭遇し、そこから次のことができます。

• 選択適切な値
• 追加適切な値が見つからない場合、ドロップダウンリストの値

値が追加された場合、他のユーザーもそのドロップダウンで選択できます。現在のユーザーの場合、新しいアイテムが自動的に選択されます。現在、ドロップダウンは次のようになっています。

ユーザーはリストから適切なアイテムを検索し、追加したい場合は、ドロップダウンの横にある「+」ボタンをクリックする必要があるため、混乱します。

このコンポーネントのUXをよりスムーズで直感的にする方法は何ですか？

Answer 1

まず、+ボタンの横に情報テキストを追加して、ユーザーに使用方法を知らせます。

私が心配するのは、ドロップダウンリストに多くの値が含まれる場合、必要な値を見つけるのが非常に面倒になることです。そのため、多くのユーザーは、この値がすでに存在するかどうかを確認せずに、検索する値を追加するだけです。これは冗長なデータを生成する可能性があり、ドロップダウンメニューはどんどん大きくなります（私はすでにこのシナリオを社内に持っています）。

これを回避するには、ユーザーが必要な値（Google検索など）を検索できるライブ検索ボックスを使用し、既存の値を表示します。既存の値がない場合は、この情報を追加できることを示す通知を表示して、これを追加してもらいます。value exampleを検索する場合の例valと入力すると、ボックスに「val」を含むすべての既存の値が表示されます。

^{download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム}

そしてvalue exampleと入力すると、このテキストには既存の値がないことがわかります。ユーザーを表示します。存在せず、追加できることを示します。

^{bmmlソースをダウンロード}

ドロップダウンが必要な場合は、それを混ぜることができます。検索バーをクリックすると、ドロップダウンにすべての値が表示され、何かを入力するとすぐに、上記のように検索が開始されます。

Answer 2

オプションが多すぎるドロップダウンの場合、私が見つけた最良の動作は、検索バーがドロップダウン内にある Chosen プラグインの1つです。

これで、新しいアイテムを作成するためのリンクを簡単に追加できます。これは、外部ボタンよりも優れています。アクションは、アクションを実行する要素に最も直接関連している必要があります。

^{download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム}

Answer 3

アイテムをドロップダウンリストに追加したくない。ドロップダウンリストは何か直感では編集できません。

これを行うためのより良い方法は、ドロップダウンから"other"を選択させ、希望する項目を手動で入力できるフィールドを提供することです。リストに項目を追加してからリストから選択させないでくださいそれは厄介です。

手動で入力したアイテムをリストに追加する場合は、サーバー上のリストに追加し（これは何らかのWebアプリであると想定しています）、次に誰かがアクセスしたときに更新されたリストを表示します。