web-dev-qa-db-ja.com

1つのページにリンクされたさまざまなアプリケーションの複数のCTAを処理するにはどうすればよいですか?

Capital One Webサイトには、個別のサインアップとログインCTAを備えた15の異なる製品/サービスがあるコンポーネントがあります。

これは、混乱を招く可能性がある(または少なくともスキャンが難しい)パターンであり、スクリーンリーダーを使用するユーザーにとっても困難です。

同じWebサイト上のさまざまなアプリケーションにサインアップ/ログインするためのリンクを持つ目的を完了するために、どのような代替パターンを使用できますか?

Capital One calls to action

3
Midas

可能性としては、ボタンを非表示にして、2つの対話に依存することが考えられます。

  • 最初の相互作用:ボタンを明らかにする
  • 2番目の相互作用:対応するアクションを呼び出します

最初の対話は、アイテムごとのコンテンツまたはすべてのアイテムを一度に展開することです。アイテムごとの場合は、デスクトップにカーソルを合わせてタップするだけで実行できます。トグルなどで一度にすべて。また、オプションは「ログイン」ボタンと「サインアップ」ボタンのようなパターンで、サービスを選択します。

レイアウトは現在の画像では混雑しているように見えますが、これにより、サインアップしているサービスの情報が一目でわかります、これはボタンの背後にある理由の1つだと思いますそこにいます。

1
Alvaro

ここでは多くのことが行われていますが、次の点に注意してください。

  • このページは、サイトのヘッダーにある[サインイン]をクリックすると表示されます。
  • ホームページは、サインインを許可する前に、「アカウントの種類を選択してください」というドロップダウンを提示することにより、これに取り組みます。

最初の問題は意図性です。サインインページはそれだけのサインインページでなければなりません。最初に変更するのは、サインインアクションに焦点を当てることです。これは、単一の主要なCTAを持つユーザー名/パスワードフォームになります。サインインアクションが完了すると、ユーザーについて知っていることを使用して、ユーザーがアクセスできる製品のダッシュボードを提供します。認証情報をこれらの製品に渡して、移行をシームレスにします。

サインインプロセスを簡単にする一方で、現在表示されているサインインシートの下にある製品へのリンクを保持します。ただし、プライマリ/セカンダリの行動を促すフレーズを削除し、製品リンクをその製品に関する情報(サインアップ機能を含む)に移動させます。これらのいくつかでは、「サインアップ」をクリックしても実際にはそれが行われません。たとえば、住宅ローンは、他の製品のように単純に「サインアップ」できるものではありません。

私は、それぞれに資格情報/アクセスの格差があるさまざまなシステムがあり、ユーザーにとってこれが煩わしい(したがって、この段階になっている理由)と思います。ただし、このような雑然としたディスプレイの言い訳にはなりません。

1
Nic