オートコンプリートの提案が必須ではないことを明確にするにはどうすればよいですか？

Question

ユーザーがTwitterでフォローしているユーザーに基づいて名前をオートコンプリートする招待ウィジェットを開発しました。誰でも招待することも可能ですが、このデザインでは、オートコンプリートの候補の1つを選択する必要があるように見えます。提案が必須ではないことをエレガントに明確にするにはどうすればよいですか？

zero step first step second step

Milkdog · Accepted Answer

まず、スクリーンキャップに示されているように、最初のオプションを自動ハイライト表示しないでください。次に、ユーザーが入力しているときに自動提案領域を暗くします。下向き矢印を押すか、自動修正領域にカーソルを合わせると、明るくなり、現在の状態に戻ります。テキストを追加してユーザーに指示を与えることもできますが、それらは必要ないと思います。

Rahul · Answer

問題は、オートコンプリートコントロールではなく、フォームにあります。

Trello がこれを行う方法を確認してください。

1.始める前に、入力フィールドに入力できる内容を説明します

フォームのタイトルは「メンバーの追加」で、複数のメールアドレスを入力してリストから複数のユーザーを選択できることに注意してください。

enter image description here

2.入力を開始すると、「searching ...」が表示され、システムが何かを探していることを示します

一致するものが存在しないため、[招待]ボタンは淡色表示されています。

Trello invite step 2

3.システムが結果を現在の入力と照合すると、それらがリストに表示されます。

入力中のままで、クリックして誰かを選択したり、名前を完全に入力したりしていないため、[招待]ボタンは引き続き無効になっています。

Trello invite step 3

4.誰かを選択すると、入力フィールドが無効になり、招待ボタンが明るく点灯します。

入力フィールドは選択に基づいて更新されないことに注意してください。

Trello invite step 4

5.フィールドにメールアドレスを入力することもできます。

有効なメールアドレスを入力したことにシステムが気づいた場合、「招待」ボタンをクリックすることもできます。

Trello invite step 5

言い換えると：

2つの入力フィールドを組み合わせる
コピーを使用して、どの入力が受け入れられるかを説明します
入力中にユーザーを更新して、何が起こっているのかを示します
ボタンのクリアな無効化/有効化スタイルを使用して、状態がいつ変化するかを示します
メールとユーザー名の両方を同じフォームに入力できるようにする

DigiKev · Answer

行には多数のフィールドがあり、それぞれが（画面のグラブから確認できることから）同じことを行うので、これを導入メッセージで処理する必要があります。以下の線に沿った何か：

All fields below are optional. You may skip this step by taking the [add your action here]

また、各行の2番目のテキストフィールドがメールアドレス用であり、最初のフィールドが名前/ Twitter IDを検索するためのものであることは明らかではありません。この結晶を作るには、おそらくいくつかのラベル付けが必要になると思います。

追加したら、必ず一部のユーザーとテストしてください。とても重要です。

mbillard · Answer

Mike Eng's answer に似ていますが、（新規作成）を一番上に配置します。

mockup

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

これは完全に明白です。

dnbrv · Answer

ここでは、マイクロコピーに関するいくつかの問題があります。まず、Kevinが述べたように、テキスト入力フィールドにはラベルが付けられていません。次に、続行するために5つの名前すべてを入力する必要があるかどうかが不明です（ただし、共有していない画面の一部にある可能性があります）。 3番目に、実際の質問は、「Twitterの連絡先を選択するか、他のユーザーの名前と電子メールを入力してください」のような行を「誰が参加しますか？」の横に配置することで解決できます。

ただし、このインタラクションでオートコンプリートがユーザーにどのように付加価値を与えるかはわかりません。招待状をダイレクトメッセージとしてTwitterに送信するつもりだと思いますが、その場合は相手があなたのユーザーをフォローする必要がありますand DMを確認する必要があります（ここでの使用方法はメールとは異なります）。 Twitterの連絡先を招待するときにメールアドレスの入力が必要な場合でも、オートコンプリートは時間の節約にもならず、ユーザーが入力したデータの検証にも役立ちません。ギブソン」は「JPギブソン」または「ジムギブソン」として知られている場合があります。さらに、システムはクエリを個別の文字に分割し、関連性ではなくアルファベット順に結果をソートするため、提案は役に立ちません（クエリ「Jon」の最初の結果として「Jason」を入力することは受け入れられません）。