reCAPTCHA: Design - Remove reCAPTCHA icon and use link instead

[machikoyasuda]

This ticket will need design, copy and product input, but I wanted to make the ticket here so we can start planning it out.

Acceptance Criteria

• Research: Can we remove the reCaptcha image? What is the exact requirement?
• If the research says yes, we can remove the image, then onto design: Decide where to place ReCaptcha text.

Additional context

Refer to how Login.gov does it with text here.

[machikoyasuda]

@indexing @thekaveman @angela-tran Put this ticket here as a stub. This was something we discussed when we first implemented reCaptcha. I then noticed a few days ago that Login.gov has a simple text sentence instead of the obnoxious image on the bottom right-hand side, so I wanted to make this ticket to remind us to look into whether we can make a similar change and make that change.

[thekaveman]

Design work for Sprint 11

[thekaveman]

Here's the Google reCAPTCHA FAQ on this topic: https://developers.google.com/recaptcha/docs/faq#id-like-to-hide-the-recaptcha-badge.-what-is-allowed

[srhhnry]

Current design direction:

This includes resizing the desktop and mobile CTA button to balance the page. The headline for the desktop screen was also justified to the left to help balance the page.

@thekaveman The product/design team discussed extending the approach of this form beyond the AC flow, so that all of the flows have the same template: large, centered CTA button that spans 4-6 bootstrap columns depending on breakpoint, left-justified header, no icons. For the dev team is it better to update one flow or all the flows at the same time?

[thekaveman]

@srhhnry

This includes resizing the desktop and mobile CTA button to balance the page. The headline for the desktop screen was also justified to the left to help balance the page.

The product/design team discussed extending the approach of this form beyond the AC flow, so that all of the flows have the same template: large, centered CTA button that spans 4-6 bootstrap columns depending on breakpoint, left-justified header, no icons. For the dev team is it better to update one flow or all the flows at the same time?

All of these changes totally make sense, and yes I think we'd want to apply across every screen/flow. We'll just want to talk about how to split the changes out in terms of dev work and sequencing. If I understand, these are the list of changes you are proposing:

1. Left-justify headlines on desktop
2. Resize and center desktop and mobile CTA
3. Remove icons? Need to know/see more about this

Where 1 and 2 would be required before we can make this reCAPTCHA update -- is that correct?

[srhhnry]

Awesome! Regarding point number 3, here's a screenshot of a screen with the icons removed and the text readjusted so that everything on the page is within 3-4 columns depending on breakpoint

And no, we could certainly add in the Recaptcha language to the screens with forms without making these changes, but it just looks a bit sloppy:

Since the page is fairly bare, there's not many places to place this text, which is why we have the flag in the first place (the text conflicts with the helper text already on the form). So updating the page to accommodate the Recaptcha text is a nice change, but also helps us with making the app look more streamlined and consistent between breakpoints.

[srhhnry]

Screens have been updated to show the full update, you can see that icons have been removed from the main flow (only on error pages now), all text is justified left, CTA buttons span either 6 or 4 columns depending on breakpoints. There's still a little bit of work to do on finishing the spacing between elements, but this can be considered a completed first draft of the design direction.

https://www.figma.com/design/SeSd3LaLd6WkbEYhmtKpO3/branch/WXLFN7q6RaD4TTZmDhERQ7/Benefits-(Full-Application)?m=auto&node-id=5766-22626&t=nU2oQjhIPqlqDfZf-1

[machikoyasuda]

https://secure.login.gov/es

Este sitio está protegido por reCAPTCHA y se aplican la Política de privacidad(abrir nueva pestaña) y las Condiciones de servicio(abrir nueva pestaña) de Google.

[srhhnry]

@indexing Can you figure out if we need to have Recaptcha on multiple pages?

[srhhnry]

The Recaptcha branch in Figma is merged and ready. The recaptcha text is in ditto as a component with spanish translation. Given that this is a formatting update there might be some weird little things when Ditto updates in Figma. I thiiiiiink I caught all of them, but let me know (today!) if there's anything that is obviously confusing and I'll see if there's a formatting error from the sync.

https://www.figma.com/design/SeSd3LaLd6WkbEYhmtKpO3/Benefits-(Full-Application)?m=auto&node-id=15064-11387&t=gkak9CrbLqYJh8o6-1

I've left the Recaptcha text on both forms until we get clarity on whether we need them.

[indexing]

I did a half hour of time-boxed research on how to inform users about reCaptcha. Google doesn’t provide official guidance on how to inform users reCaptcha is in use, but best practice seem to be placement of the informational icon or text near all forms or areas protected by reCAPTCHA.

I logged into my personal Login.gov account and noted the informational text for reCaptcha appears on the login form, as well as other forms after login (see 'Add phone number' screenshot). Therefore, in the interest of transparency, let’s place the informational text below the button everywhere we use reCaptcha.

[machikoyasuda]

As the Figma branch has been merged and the last outstanding question has been answered, marking this Design ticket as done.

Dev tickets are now here: #2537