On the Capital One website, there is a component which has 15 different products/services with separate sign up and log in CTAs.

This is a potentially confusing (or at the very least hard to scan) pattern, and also arduous for users using a screenreader.

What alternative patterns could be used to complete the objective of having links to sign up/log in to different applications on the same website?

Capital One calls to action

  • Why don't display just one "Sign in" button, one "Login" button and checkbox buttons before components? Commented Feb 14, 2017 at 18:04

2 Answers 2


A possibility is to hide the buttons and rely in two interactions:

  • First interaction: Reveal the buttons
  • Second interaction: Call the corresponding action

The first interaction can be to expand the content per item or all items at once. If per item it can be done with hover on desktop and tap in touch; and if all at once with a toggle or similar. Also an option is a pattern like: "Log in to" & "Sign up to" buttons and then select the service.

Note that although the layout looks crowded as it is right now in your image, it gives at a glance the information of what services you are signed up to, which I suspect is one of the reasons behind the buttons being there.


There is a lot going on here, but here's some things to keep in mind:

  • This page is presented when someone clicks "Sign In" in the site's header.
  • The homepage attempts to tackle this by presenting a dropdown with "Select an account type" before allowing one to sign in.

The first issue is intentionality. The sign-in page should be just that, a sign-in page. First thing that I would change there is to focus on the sign-in action, which is going to be a username/password form with a single major CTA. Once the sign-in action is done, THEN use what you know about the user to give them a dashboard of products that they have access to. Pass the authentication information to those products to make the transition seamless.

While making the sign-in process easier, I would retain the links to the products below the sign-in sheet as displayed now. I would, however, remove the primary/secondary calls-to-action and make the product links go to information about that product (including the ability to sign-up). For some of these, clicking on "Sign-up" doesn't even actually do that - a mortgage, for example, isn't something that you can simply "sign-up" for like other products.

I would imagine that there are different systems with credentialing/access disparities between each, making this cumbersome for the user (hence, the reason why it's in this stage now). It's no excuse for such a cluttered display, though.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.