「ドロップダウンが優先されるがフリーテキストが許可される」ためのUXパターンはありますか？
ユーザーがドロップダウンから会社を選択できるシステムの一部のユーザーインターフェイス画面を設計しようとしています。ドロップダウンリストは非常に長い可能性があります。ただし、会社がない場合は、自由に追加できます。
この画面の重要な点は、会社がドロップダウンリストにある場合、ユーザーがそれを見つけて選択することが重要です。再度追加すると、ワークフローに深刻な問題が発生する可能性があります。
私たちが検討したこと：
検索可能（つまり、ボックスに入力してオートコンプリートの候補を取得する）ドロップダウン。リストの下部に「新規追加」オプションがあり、ユーザーが入力することはできません。その方法では、ユーザーは何かを追加するために一番下までスクロールする必要があります。
チェックボックスはドロップダウンとフリーテキストエントリを切り替え、チェックボックスを押すと警告ポップアップが表示される場合があります。
追加する前にユーザーが既にリストにあるものを見つけて選択しようとすることを確実にし、よりスムーズで賢い、またはより安全な方法は他にありますか？
この正確な問題のあるプロジェクトに取り組みました。管理スタッフが製品に属性を追加する方法が必要でした。属性は検索目的で使用されるため、その属性タイプがすでに存在するかどうかを確認する必要があります。新しい属性タイプを作成する代わりに、その属性タイプを選択する必要があります。
私たちはあなたの最初のアイデアに似たものを使ってしまいました。
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
「新規作成」オプションは、ユーザーが検索を開始するまで表示されません。これにより、新しいアイテムを作成する前に、一致する可能性のあるすべてのものがユーザーに表示されます。
注：このソリューションは、複製を作成するのが悪い考えである理由を理解している賢明なユーザーがいることを前提としています。検索の柔軟性が高まり、一致が見つかる可能性がさらに高まります。アクションが本当に必要な場合にユーザーが別のアイテムを作成するのを妨げることはありません。例えばApple Inc.＆Apple Inc. Canada
更新：自動提案ボックスの動作方法により、検索文字列の上位X（5を使用）のみが表示されます。このシステムは速度が最適化されており、新しいアイテムを作成するときにユーザーが完全なアイテム名を入力するのに熱心であることに依存しています。使用頻度の低いツールについては、 JeromeRのソリューション を検討してください。コンテキストが重要です！デザインをテストしてください！
最初のアイデアはフィールドテストに失敗し、バリアントはユーザビリティテストに失敗しました
オプション1と同じアイデアがあったようですが、実装しました。ユーザーに最初に検索を強制する方法を探していましたユーザーに気付かれずに検索を強制的に実行していること。最初の設計のバリエーションは、ユーザビリティテストセッションの小さなサンプルで実際にテストされました。
リリース後、それは悪いニュースでした。
最初に以前の設計の詳細を説明し、次にそれが失敗した理由と、より使いやすくするために私たちが計画していることを説明します。
私たちの最初の試み
ユーザーがボックスに入力すると、一致する名前がドロップダウンリストに表示されます。一致するものが4つ以上ある場合は、ドロップダウンリストがスクロールします。リスト内のアイテムをクリックすると、ボックスに菱形が追加されます。複数選択するには、菱形の横にあるボックスをもう一度クリックして、さらに入力し、ドロップダウンリストから別の一致を選択します。
ユーザーがボックスに入力する文字が多いほど、ドロップダウンリストでの一致がより正確になります。ご想像のとおり、これによりアイテムのリストが短くなります。リストの最後のアイテムは常に、アイコン新規追加が付いたアイコンリンクです。ただし、リストに4つ以上の項目がある場合、ユーザーはこのコマンドリンクを表示できませんスクロールしない限り下に移動します。
この詳細では、設計は失敗しました。ユーザーはスクロールしませんでした。 Add newコマンドがリストの一番下にあることに気づきませんでした。サポートコールが増加しました。このシステムのユーザーの大多数は、たまにしか使用しないので、毎日のユーザーではありません。彼らはデータ入力担当者です。それらの一部は、ガベージデータを入力して、タスクを「終了」して他の作業を続行できるようにしたくないユーザーもいます。ガベージデータは後でクリーンアップする必要があります。ユーザーはすぐに、ボックスに数文字を入力して、一致するもののリストを表示できることを覚えており、覚えています。一致のリストが表示されるとすぐに入力が停止するため、リストがAdd newコマンドリンクを表示するのに十分短いわけではありません。 ＃不合格
Add newコマンドを先頭に配置することも検討しましたが、この方法は簡単すぎて、使いやすさのテストで使いすぎました。ユーザーの望ましい動作は、可能な限り既存のアイテムを選択することです。 Add-new関数は、このコンテキストでは、ユーザーの最後の手段である必要があります。
もう1つ検討したのは、Add newコマンドのスクロールドロップダウンリストの下にある非スクロールブロックです。私たちの開発者は、利用可能な時間内にそれを管理できませんでした。
[編集] 1つのコメントは、その後の変更のためにこれを追求しなかった理由を尋ねます。サークルプラスアイコンは、旧バージョンのボックスの右側にありました。最初のリリースではリストの一番下に移動しましたが、さまざまな利害関係者から元に戻すようにという圧力がありました。したがって、次に説明するソリューションには、政治的な妥協が含まれています。 （これは、UIデザインと現実の世界でのユーザビリティです）
2回目の試み
コマンドを移動しました。ドロップダウンリストの下部にありません。現在はボックスの右側にありますが、いくつかの違いがあります。
- コマンドはアイコンのみのボタンになりました。コマンドリンクのテキストがツールヒントに移動しました。ツールヒントはホバーに表示されます。アイコンは、Windowsプラットフォームで一般的な、内側に+が付いた円です。このアイコンは、これらのユーザーに適しています。
- ボックスにフォーカスがあり、ユーザーが少なくとも1つの文字を入力しない限り、コマンドは表示されません。
- コマンドは突然のスナップには表示されません。それはフェードインするので、不本意な迫り来る刺激反応を引き起こしません。これは、ユーザーの脳が短期記憶をフラッシュしたり、ストレスを誘発するアドレナリンを放出したりしたくないためです。
- ボックスがフォーカスを失うと、コマンドはフェードアウトします。
今週の土曜日にテストを開始します。
本当にユーザーがボックスをクリックして入力を開始できるようにして、新しいエントリを作成する前に既存の一致を探します。
私の答えはここに投稿された他の人との類似点を示していますが、正しいコミュニケーションがどれほど重要であるかを強調したいと思います。
例えば：
- 意図を明確にするために使用されている言語を再検討します。たとえば、create companyを使用してアクションにウェイトを追加するか、Wordnew違いを強調します。
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
新しい会社を追加する可能性をユーザーに認識させるため、作成ボタンを直接表示します。
提案を遅滞なく表示することで、入力を試して、企業がリストに含まれている可能性があるかどうかを確認できます（たぶん、厳密に異なる表記で）
[作成/追加]をクリックすると、すべての可能な重複が最初に表示されます（例：モーダル）。小さな有益なテキストで、このアクションが必要な理由を明確にすることができます。
スクロールの問題は、リストボックスの一番下までスクロールすると不便になる可能性があり、追加する項目が配置されているテキストボックスからユーザーの注意を引くことです。基本的に、追加するコンテンツはリストの上にありますが、追加するコマンドはリストの下にあります。
これを解決するには、最初に説明した方法を使用しますが、検索ボックスの横に[追加]ボタンがあります。誤った追加から保護するには、無効にして、検索で結果が返されない場合にのみ有効にします。
ここにモックアップがあります：
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
何も見つからない場合は、結果ボックス自体にコンテンツを追加するためのリンクを配置することもできます。リストボックスは二重の役割を果たし、ユーザーを混乱させる可能性があるので、私はこのアプローチには少しおこがましいです。まだここに例があります：
うーん...これは単なるアイデアであり、これを行う他のサイトの実際の例はありませんが、ユーザーが会社名のフルネームまたは一部を入力して「検索」をクリックするフィールドがあった場合はどうなりますか」彼らのエントリは、おそらく「タグ」スタイルを使用して、検索ボックスの下に表示されるクリック可能な一致のリストを生成します。 100％の一致がある場合は、顧客が選択できるもののみを表示します。複数ある場合は、「リストに含まれていません」などのオプションを含めて、ユーザーがカスタム値を入力できるようにします。
最初に検索を実行し、ユーザーが結果から選択できるようにすることの優れている点は、最初の数文字だけでなく、会社名全体が最初に入力されることです。これにより、検索結果の一致率が高くなります。開発者が関与する必要がありますが、ユーザーにドロップダウンメニューの無数のオプションを公開しないことは価値があります。これは、よりクリーンでエレガントなアプローチになります。
この例として、ユーザーが「P＆G」と入力した場合、一致のリストに「Proctor＆Gamble」が表示されます。
または、単にユーザーの送信を認証することもできます。
注：私はこのテクノロジーの開発者ではありませんが、他の言語を使用する開発者であるため、あらゆる種類の人々がいるため、ユーザーに対するフロントエンドの編集機能は一般に悪い考えだと思います。
私は単に手動認証を行うだけです。
下部に「その他」オプションがあり、選択するとテキストボックスが表示されるドロップダウンについてはどうですか？
投稿された解決策の中では ジュリアのもの が最良かもしれないと思いますが、私は重要な側面を指摘したいと思います：会社のように非常に複雑な選択であり、同一の名前ではないため、重複と誤ったエントリの両方を回避するのに最も役立つ可能性があるのは、選択した（すでに存在する）会社に関する拡張情報をユーザーに提供することです：会社の場所、そのlogo、その活動分野ですが、実際にはwebsiteでさえ、十分すぎるほどです。ユーザーがリンクをクリックしてそれが意味することを確認するのは非常に簡単です（最近はWebサイトを持たない企業はほとんどありません）。
実際、ユーザーが会社を追加したい場合は、ユーザーが自分で情報を入力することを許可および要求する可能性があります。これは、既存の一致の検索を刺激する労力の増加と、ユーザーが本当に正しい入力を希望する場合のかなりの労力です。情報：彼はすでに会社のウェブサイトを知っている可能性が非常に高いです。
ユーザーに不満を与えすぎないようにするには、Webサイト情報のエントリをスキップすることを許可できますが、そうするのはかなり難しいです。このオプションを1分後にアクティブにしたり、まだ表示したり、無効にしたりすることもできますが、クリックした人に「もう少し時間をかけて会社のWebサイトを見つけてください。すぐに見つからない場合は、それなしで続行することが許可されます。」.
実際には、最終的には会社名またはそのWebサイトのURLの入力を許可することは理にかなっており、URLの入力（貼り付け）はほとんどのユーザーにとってより簡単でしょう。
デフォルトではURLのセカンドレベルドメイン名のみを考慮し、確認のためにユーザーにその旨を伝えて、代わりに長い部分を入力できるようにする必要があります。カットするのは正しくないと彼らは言います（一部の会社はサイトを持っている場合があります）独自のドメイン名なし）。
多くの小さな会社にはソーシャルネットワークページしかないので、主要なもの（facebook ...）を自動的に処理し、それらを認識して、おそらくそれらのURLの関連部分のみを保存する必要があります。
電子メールを別のオプションと考えることもできますが、ほとんどの企業では複数の企業が存在するため、ほとんど役に立たず混乱を招く可能性があります。また、ドメインの部分のみを検討したい場合は、ウェブサイトを持たないおそらくどちらも独自のドメインを持つ電子メールを持っています。
ユーザーが入力した内容で内部的にWeb検索を行い、最初に見つかったURL（もちろんクリック可能なリンクとして）を表示し、ユーザーに正しいURLを選択させることで、これをさらに進めることができます。
過去の選択の数、およびWeb検索を行う場合は、検索エンジンとの関連性で返される情報を並べ替える必要があります。
===
ユーザー自身が新しい会社を追加できるようにすることが本当に理にかなっているかどうかも検討します。あまり頻繁でない場合は、自動化されたプロセスを少なくし、新しい会社の追加を要求するか、いずれにせよ2番目のチェックを行う方がよいでしょう。入力した会社が新しく、その情報が正しいことをあなたの側で。
===
余談ですが、これによりURLをデータベースキーとして使用することを考えた場合、最悪のアイデアではなく理想的でもない場合、URLは所有者を変更し、おそらく世界中のすべての企業がWebサイトを持っているわけではありません。
===
編集：まあ実際には私はジュリアの解決策（フルネームのエントリが必要）が最善の解決策だとは確信していません、ここで書いたチェックを実装する場合、おそらく名前の部分的なエントリを許可し、もちろん検索結果をユーザータイプ