2つのアクション用の1つのボタン
比較サイトがあります。ランディングページには、比較する製品に使用される2つのテキストボックスと、「比較」をトリガーするボタンがあります。
訪問者がこれら2つのボックスを埋めると、製品は技術仕様に従って比較されます。
人々はまた、単一の製品の詳細を検索したいと考えています。
だから、私の解決策は次のようなものです。
ランディングページには、2つのテキストボックスと「比較/検索」というラベルの付いたボタンがあります。訪問者が1つのボックスを埋めてボタンを押すと、検索が行われます。それ以外の場合、2つのボックスが入力されていると比較されます。
これは訪問者にとって明確だと思いますか？それとも他の解決策を提案しますか？
どうもありがとう。
あなたのボタンは常に彼らが何をすべきかを言うべきです。あいまいな用語を避け、特に、1つのボタンで2つのことを実行してユーザーを混乱させないでください。また、ユーザーに2つのテキストフィールドを与えると問題が発生する可能性があります。2番目のボックスに何かを入力するだけの場合、どうなりますか？
UXムーブメントには、ボタンの命名に関する記事があります フォームボタンが「送信」と言ってはならない理由 。これは、ボタンに意図的でわかりやすいラベルを付けることの良いレビューです。 1つのボタンで2つのことを直接行うわけではありませんが、その結果は記事から明らかです... 2つのことを行うボタンは目的がなく（非常にあいまいです）、説明的ではありません。
ユーザーは最も頻繁に何をしていますか？あなたの分野はそれに焦点を合わせる必要があります。 Searchと仮定しましょう。 compareを含めるために十分な付加価値がある場合は、それを含めます-ただし、エクスペリエンスに真に付加価値がある場合に限ります。
比較するオプションを使用して、検索フィールドを表示します。
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
比較するアクションを実行すると、比較するための新しいUIが表示される可能性があります。非常に異なる2つのUIを最初に選択することをお勧めします。
人気のある例を挙げましょう：Googleマップ。場所の検索を提供します。
2つの場所を「比較」することもできます。
ルートを取得する（「比較する」）には、アクセスするための個別のボタンと、それを行うためのUIが通常の検索とは明らかに異なります。
検索と一致する必要がある場合。
説明をわかりやすくするために、UIを変更する必要があります（新しいUIにするか、インラインで更新するか）。
- ラベル（「このフィールドは何のためのものですか？」）は適切に変更する必要があります。配置スタイルに関係なく（上、左、またはプレースホルダーの内側）
- ユニークな場所に、ユニークな「比較」ボタンがあります。これは「検索」ボタンではありません。ユーザーに考えさせないでください。
なんらかの理由で1つのボタンが本当に必要な場合は、すべてが何であるか、およびその使用方法について可能な限り説明的で近づいていることを確認してください。
トップに値を入力しただけの場合はどうなるかをユーザーに伝えます。 1秒追加するとどうなるかを伝えます。結果としてボタンのテキストを更新します。これはお勧めしませんが、静的な「検索/比較」ボタンよりもユーザーに多くのコンテキストを提供します。
これが私のソリューションの実装です
（ビデオを見る）
私は Evil Closet Monkey ほど論議しているわけではないので、彼がすでに言ったことの多くを確かにもう一度言いますが、モダン/フラットなデザインのiOSアプリであれば、おそらくこのようになるはずです。
- 最初は検索フィールドのみが表示され、あいまいさはありません。
- フィールドが入力されると、2番目が表示され、その2番目のテキストフィールドの意味を説明するラベルが表示されます。
- これは、ボタンが変更されるのは、2番目のテキストフィールドが使用されている場合のみです。それは回転し、2つのフィールド間のラベルを置き換えて、彼のアクションを検索から比較に変更します。
派手な回転アニメーションは、インターフェイスを魅力的なものにし、変化するアクションを主張します。ただし、ボタンの位置、サイズ、色を変更するなど、より落ち着いたものに簡単に置き換えることができます。
変更するボタンのタイトルだけを表示することはできず、ユーザーはその変更を見逃す可能性があります。
比較する場合、ボタンは2つのフィールドの間にあり、フィールドの直前に配置された検索ボタンとは異なり、アクションの意味を強調します。
"or compare"ラベルは、検索よりも多くのことができることを示していますが、ボタンではありません。
うまく言えば、テキストを比較するフィールドは、空の場合は無効にされているかのように半透明なので、ユーザーは検索ボタンがこのフィールドを考慮しないことを理解しています。
唯一足りないのは、ユーザーが最初のテキストフィールドに何かを書き込むまで比較できることを知らないということです！
たぶん"or compare"最初に[検索]ボタンの横にあるラベルは、その問題を解決するはずです。
私はこのダブルボタンのロジックを個人的に理解しており、そのアイデアは理解できると思いますが、それはすべてのユーザーの認識に依存します。
この解決策は、設計を簡素化することを目的とした、意図的なあいまいさであると考えています。それが混乱の原因になるかどうかは分からないが、そのページの全体的なデザインを調べない限り、言うことはできない。 2つのオプションが表示されます。
- これがそのページの唯一のあいまいさである場合、混乱を招くとは思わない。ページの架空の "cleannes"のおかげで、ユーザーの注意はそのダブルボタンによってのみ過度に制限されるので、ユーザーがそれについて考え、あなたの意図を理解するための肘の余地があります。
- ページに他のあいまいさが存在する場合、それらの蓄積により、ユーザーの注意は多くの不明確なものに及ぶため、ユーザーはストレスを感じるでしょう。
しかし、私にも提案があります。そのボタンからテキストの関連部分を個別化することは可能ですか？何かのようなもの：
- ユーザーが両方のボックスに入力した場合、「比較」という単語を強調表示し、もう1つは淡色表示にします。
- ユーザーがボックスを1つだけ埋める場合は、「検索」という単語を強調表示し、「比較」を淡色表示にします。
それが可能かどうかはわかりませんが、お役に立てば幸いです。
同じボタンに対して異なるモードを使用しないようにしてください。行動を促すフレーズは毎回同じアクションを実行する必要があり、しないその動作を変更する必要があります。
むしろ2つの異なるボタンを使用します。ユーザー入力に応じてボタンを有効/無効にすることができますが、その場合は無効にするヒントを追加することを忘れないでください。例えば。 「比較する2つの製品を選択してください」
さまざまなモードがよくある理由についての詳細は、いくつかの例を示した mode-errorsに関するこの短い記事 を参照してください。
この提案 はおそらく少し型破りです。しかし、まあ、少なくとも私はそれを作ることを楽しんでいました。
edit：申し訳ありませんが@JonWです。それを知りませんでした。以下で詳しく説明し、モックアップツールを調べます。見栄えがいいです。
だから私がやったことは、ボタンをインタラクティブにすることです。ユーザーが検索したい場合は、製品Aに入力し、「検索」ボタンをクリックします。ただし、ユーザーが比較したい場合は、製品Bも入力します。この場合、ユーザーが2番目の製品を入力した時点で、ボタンが右にスライドし、そのテキストが「比較」に変わります。ユーザーが考えを変えると、製品Bを空にすることができ、ボタンは初期状態に戻ります。
まあ、あなたはまだ「続行」を言う1つのボタンを持つことができます。したがって、ラベルをどこかに配置して、テキストボックスを1つだけ完了すると検索が実行され、両方のテキストボックスが完了すると比較が行われることを示す必要があります。
検索機能は比較機能とは別にしてください。ユーザーは比較フィールドを検索に使用したいかもしれませんが、そうすることは間違っているため、許可しないでください。
検索ボタン/テキストフィールドを別の場所に配置し、検索機能として注目する場合、ユーザーを混乱させる必要はありません。