search

cfpb / sbl-ux

Small business lending project's UX design and research issue repository
Creative Commons Zero v1.0 Universal
1 stars 0 forks source link

[Spike] When should links open in a new tab? #18

Closed natalia-fitzgerald closed 1 week ago

natalia-fitzgerald commented 4 weeks ago

The purpose of this issue is to gather information and discuss the question of when we would like links to open in a new tab on the shared platform and within the filing flow.

CFPB Design System --- link behavior guidelines

Opening a link in the current tab (default)

In general, links should default to opening in the current page or browser tab. This allows the user to choose whether they want to open an additional window in order to view the content. This applies to document and external links.

Opening a link in a new tab

Links should open in a new tab in situations where users enter data or make selections that would be lost if they left the page. This includes interactive tools, search filters, and forms where the user has to enter and submit information.

Non-cf.gov guidelines

When the link is in the middle of a form or multi-step process, and clicking the link would cause the user to lose progress in the form or process if it opened in the same tab, then open in a separate tab.

Questions

Unique aspects of our platform (when compared to standard cf.gov pages)

Ways to frame when to open in a new tab

List of platform links:

dan-padgett commented 3 weeks ago

Do we see the entire filing flow as a multi-page form?

Even more than a form, the filing flow falls under the category of an interactive tool. And as a tool, we can think about link behavior in terms of whether a filer is opening the link to do something that helps with using the tool. Initially I see three use cases here:

  1. The link leads to information that would be used alongside the current step to make progress.
    • Ex: The filing instructions guide on the errors and warnings pages is something where a filer is likely to go back and forth between the filing flow and the filing instruction guide. Having this information open in a new tab makes sense because of how the page will be used: the filer will likely want to come back to the current step once they've read the relevant information.
  2. The link takes them to a different part of the filing flow.
    • Ex: The links for uploading a new file throughout the flow are for cases where the filer intends to "restart" the flow. Opening these links on the same page makes sense in this case because they want to change where they are in the filing process.
  3. The link takes them to a different part of the platform (or logs them out).
    • Ex: On sign and submit they can go to update their profile. Also the navigation links for the filer's profile and logging out. These seem like cases for staying on the same page. There are a few different reasons for clicking these but they seem to fall under buckets of either completing a step of the filing process (updating incorrect institution information) or initiating a new task (leaving the platform).

There might be other cases, or a better taxonomy, but approaching this from the perspective how a link helps a user with a task might make for a fruitful approach to answering this question.

natalia-fitzgerald commented 3 weeks ago

@dan-padgett Before I assess this, I want to dig in to these buckets a bit more. The first two buckets seem to assume that the link lives on a filing flow page. Is this interpretation accurate? The third bucket seems to assume that the filer is either on a shared platform page or a filing flow page (in other words anywhere in the platform). Is that accurate? What do we consider to be the parts of the platform? Filing flow and Shared platform?

Maybe the first one should be broadened to say task instead of step? Then we can include the filing process and the Update your financial institution profile (and in the future the Update your user profile) tasks.

The link leads to information that would be used alongside the current task to make progress

dan-padgett commented 3 weeks ago

@natalia-fitzgerald I like the suggestion for making the first bucket broader.

dan-padgett commented 2 weeks ago

@natalia-fitzgerald Here's an updated take based on the above comments about how the link destination supports a user completing a task. Framed as a decision tree in this case.

graph TD;
    A[Is the user logged in on the **current** page?]-->|No| B(Link opens in same page);
    A-->|Yes| C(Does the **destination** page require them to be logged in?);
    C-->|No| D(Link opens in a new tab)
    C-->|Yes| E(Link opens in the same page)

The key assumptions here are:

And the idea of having links open in the same page when they are not logged in reflects the fact that we don't really know what they are doing at that point--though should ensure that they are not getting new tabs when they are trying to log in to our platform.

This also, to me, seems to follow the general guidelines mentioned in this ticket too.

Does this make more sense than the initial buckets? Do you think it misses any clear cases?

natalia-fitzgerald commented 1 week ago

@dan-padgett Using the logic you presented I took a look at all of the links on our pages and mapped them out. I didn't find any outliers. If this looks good to you I think we can share this out with dev and see what they think?

Unauthenticated landing page:

List of links

--

Complete your user profile

List of links

--

Authenticated landing page

List of links that would open in the same page (require the user to be logged in)

List of links that would open in a new tab (do not require a user to be logged in)

--

View your user profile

List of links that would open in the same page:

--

Update your financial institution profile

List of links that would open in a new tab

List of links that would open in the same page:

List of links that would open in a new tab

--

Provide type of financial institution

List of links that would open in the same page

List of links that would open in the same page

List of links that would open in a new tab

--

Resolve errors and Review warnings

List of links that would open in a new tab

List of links that would open in a new tab

--

Sign and submit

List of links that would open in a new tab

dan-padgett commented 1 week ago

This is great @natalia-fitzgerald. I think that all looks good with one consideration for "Complete your user profile". We might want to treat this as a special case since a user would lose any data entered into the fields if they clicked a link. For that reason, the Privacy Notice seems like it should open in a new tab. Since all of the other links are outside of the form fields, it's probably safe to say that they intend to navigate away from the page if they click on them.

natalia-fitzgerald commented 1 week ago

@dan-padgett As we discussed in chat, the ideal time for a user to visit the "View Privacy Notice" would be before they enter any personal information.

A few weeks ago we proposed an approach where the "View Privacy Notice" would be positioned outside of the form well and in the intro text for the section. This positioning would further emphasize that the user should read the content on the Privacy Notice page before entering and submitting their information.

If this is the only exception to our logic to me it shows more that the positioning of this link is faulty instead of the logic needing an exception. If we move the "View Privacy Notice" link out of the form well and into the intro text I would expect it to open in the same tab and for any data entered below to not be preserved.

Privacy Notice positioning

Current positioning UX recommendation
Screenshot 2024-11-12 at 4 32 23 PM Screenshot 2024-11-12 at 4 29 48 PM
dan-padgett commented 1 week ago

Concur on having another reason to move the Privacy Notice link outside of the well. I'm also on board with the reasoning you suggested in chat for having this link open in the same page: that even though it's in the well, it is still before the form fields so we're encouraging users to click on it before entering any data. So the mapping you wrote above can be our recommendation for how to handle links.

natalia-fitzgerald commented 1 week ago

This will also be documented in the story issue.

Acceptance criteria

In this criteria "logged in to our platform" means that they are logged in to Keycloak, Login.gov, and they have been authenticated. Complete your user profile and the complete your user profile confirmation pages do not meet this criteria since the user has not been authenticated.