web-dev-qa-db-ja.com

画像のラジオボタンで一方的なユーザーの行動を防ぐ方法は?

以下に、予約システムのセクションを示します。

Staff's Photo, Name and a Button to Call

このセクションでは、ユーザーは予約するスタッフを選択し、必要に応じて彼に電話をかけることができる必要があります。ただし、一部のユーザーが写真をクリックしてスタッフを選択するのではなく、[呼び出し]ボタンをクリックしてスタッフを選択したというフィードバックを受け取りました。

This is how a selected image radio button looks like.

問題は、このユーザーの誤解を防ぐために何をすべきかということです。

3
Melih

画像にアクションをオーバーロードしないでください、ただし、ユーザーが誤って不要なアクションを実行したくない場合を除きます。選択が行われた後にのみ、呼び出しやその他のアクションを許可します。

通話確認を追加通話を開始する前に。これは、複数の電子メールアドレスまたは電話番号のどれを使用するかを選択するなど、ユーザーが操作することを選択できる情報を表示する形式にすることもできます。

2
習約塔

明示的なアクションを使用して、マルチステップアクション(予約フロー)を即時アクション(呼び出し)から分離してみてください。

この場合、1つのパスがすぐに(望ましい?)スタッフの中断につながります。

もう1つの方法は予約です。完了するには、少なくとも1つのステップが別にあると想定しています。

enter image description here

トレードオフ

  • 追加のボタンは、視覚的な要素を追加します
  • ボタンのラベルは、各明示的なアクションを表示します
4
Mike M

私も同じことをしたと思いますが、あなたの説明では、これらの画像はそれぞれ2つのボタンであると言っていますが、その画像は対応するボタンのある画像です。さらに、呼び出しボタンのコントラストは、他の要素よりも視覚的に優れています。

おそらく、選択ボタンを重視してデザインをあまり変更せずに2つのボタンを作成する方法を見つけて、呼び出しボタンを2番目のインスタンスに視覚的に委任する

enter image description here

2
Danielillo