web-dev-qa-db-ja.com

同様に重要な3つのCTAボタンをどのように配置すればよいですか?

これは私が作成した空港送迎の見積もりフォームです。

quotation form

ユーザーは最初に、ピックアップ、目的地、乗客数を選択します。

次に、車両のタイプ、価格、推定時間を取得します。

この時点で、ユーザーの希望に応じて、ユーザーに次のアクションを実行するように依頼します。

  1. 返品輸送または別の輸送を追加します
  2. メールアドレスを入力すると、2ユーロの割引が受けられます
  3. 予約を続ける

これらのアクションは互いに完全に異なるため、フォームの下部に配置することが正しいかどうかはわかりません。この種のリクエストにはもっと良い方法がありますか?これらに最適な場所はどこですか?

このフォームの実際の例は www.simontaxi.com にあります。

5
Simone Vescera

私の提案:

  • ボタンが反対お互いに-> より優れた識別性とスキャン可能性。
  • ボタンの形状は正方形のような形状->ボタンタップしやすいであり、タップの欠落が少なく、使いやすさが向上しています
  • ボタン(これもアクションです)は一緒になってミラー化され、電子メール入力は他のフォームの入力に近くなります-> より一貫した設計
  • 追加された矢印アイコン続行ボタン-> より良いスキャン可能性
  • モバイルユーザーの期待に一致する続行ボタンの右下の位置/メンタルモデルフローに関連
  • 数値は別の行にあります末尾ではありません=> スキャン性の向上
    (マーケティングの観点から価格について前向きに話すかどうかわからない)

電子メール入力の関連性をボタンと同じレベルにしたい場合は、ボタンの高さを減らして、入力のボタンを増やし、背景の変更を加えます(より色のついたもの、今は灰色です)がそれを作ります。

enter image description here

4

現在、ユーザーからの要求が多すぎます。チェックアウト画面でメールをお願いします。これにより、行動を促すフレーズが2つ残り、解決がはるかに簡単になります。

1つはプライマリで、もう1つはセカンダリである必要があります。テキストとボタンのコントラストが高いプライマリ、コントラストが低いセカンダリ。いわゆる「ゴースト」ボタンと組み合わされた無地の背景ボタンは、この場合にうまく機能します。

ところで、「乗り換え」は「乗り物」と同じですか?はいの場合は、混乱を避けるために1つのWordのみを使用してください。

1
matejlatin

私はあなたが提供したライブの例に行き、それを使用しました。

GUIは非常に優れており、何が起こっているのかを理解するのに苦労しませんでした。 私は変更しません。実際、他の人はそれをWebデザインのシンプルさのモデルとして使用する必要があります。賞賛!

0
Inquisitive