web-dev-qa-db-ja.com

フォームデザイン:相互に排他的なタブと1つのフォーム

タブ(オプション1)を介してアクセスできる2つの相互に排他的なフォームを持つフォームデザインに取り組んでいます。ユーザビリティテスト中に、私のチームはユーザーがタブを見逃していて、フォローアップの質問をしたときにのみ気づいたことを確認しました。そのため、2つのフォームを組み合わせて、ユーザーが予約またはプロモーション検索を実行するかどうかを選択できるようにします。

送信ボタンの横にあるチェックボックス(オプション2)または2つの送信ボタン(オプション3)の2つのオプションを開発しました。どのオプションが最も理にかなっていますか?ユーザーに2つの送信ボタン/アクションを与えると混乱が生じると思います。

Three mockups showing the described options

助けてくれてありがとう!

11
erik_lev

searchingのときにユーザーがこの選択を行う必要があるのはなぜですか?フォームフィールドは同じなので、タブなしでオプション1を使用します。このようにして、最初のステップで不要な選択を削除します。

代わりに、結果ページで結果をフィルターするオプションを提供できます。

そこで2つのタブを使用して、デフォルトでより一般的なタブを選択することができます。または、ユーザーが検索結果を動的にフィルターできる検索結果の上/横にフォームウィジェットを提供することもできます( "両方を表示"、 "表示のみ...")。または、両方の結果セットを2つの列に並べて表示します。または同様(実際の結果の内容によって異なります)。

「ショートカット」を提供して、知識のあるユーザーが2番目のステップでフィルターをかけないhaveようにしたい場合は、 分割ボタンDuckDuckGo からのものと同様:

search button from DuckDuckGo

検索アイコン(または、この場合はラベル「検索」)をクリックすると、デフォルトの検索が実行されます(両方のセットで検索)。右の小さな矢印をクリックすると、「予約検索」と「プロモーション検索」のどちらかを選択できます。

4
unor

オプションが相互に排他的であることを示す限り、ラジオボタンが最も明確になります。オプション2のチェックボックスは非常に不明確です。プロモーションの有無に関係なく検索できるようですが、説明から予約またはプロモーションを検索しています。

私はこのようなものをもっと提案します:

mockup showing section with 'Choose Results Type' radio buttons before search button

download bmml sourceBalsamiq Mockups で作成されたワイヤーフレーム

ラジオボタンを使用して検索の範囲を決定することは、すでにWebで使用されています。次に例を示します。Orbitz検索フォームでは、ラジオボタンを使用して、取得する結果のタイプ(Air、Car、Hotel、Air + Carなど)を決定します。

Search form from Orbitz.com which has radio buttons to determine the scope of the user's search

同じに見えない2つの異なる「ボタン」を使用することも、一貫性のないUIです。オプション3は2つのボタンで機能しますが、@ usingtheinternetが言うように、複数の送信ボタンがあると混乱する可能性があります。

9
elemjay19

ユーザーが検索をクリックする時までそれについて心配する必要がない場合は、search reservationsおよびsearch promosボタンで単一のフォームを終了しないでください。なんらかの関連性がある場合は、各ボタンに代表的なアイコンを使用して、一目で区別を強化することもできます。

1
plainclothes

ユーザーが結果でフィルターできるようにすることは、有用なアプローチになるというunorに同意します。ただし、ラジオボタンではなく[ブランドの選択]にドロップダウンを使用することも検討します。フォームがかなり長くなり、検索フィールドでラジオボタンを使用してフィルターをかけると、さらに長くなります。明らかにそれは特定のアプリケーションに依存しますが、「日付を選択」-これは開始日、終了日です-範囲は意味がありますか?

0
Peter