Implement new design for User Input questions

[kuasha420]

Feature Description

The question screens of the User Input page should be updated to implement the new Figma design for User Input v2.

---

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

• The questions in the User Input page should implement the new design for desktop and mobile.
• The layout, typography, positioning of various UI elements and text copies should exactly follow the design in Figma.
• No answers should be selected by default and the Next button should be kept disabled until user selects required minimum number of answer(s).
  • However, for sites with multiple admins, if the User Input Questions were answered by an admin, the site specific question should have the answer pre-selected, with a notice about it as par the Figma design.
• The User Input page should also implement the Cancel button as seen on the design.
  • It should be available on all the questions page as well as the Review page.
  • Clicking on it should take the user back to Site Kit Dashboard.
• If a question has "Other" as an answer option, clicking it should open a text field for custom answer.
  • If " Other" option is picked and the text field is empty, the "Next/Review" button should be disabled. If the user "blurs" the input without entering any content (eg. leaving the "Other" text field blank/empty), an error message should be displayed under the text field as seen in the design.
  • In the future, the "Other" option may become just a standard answer without any text field for custom answers. If that is decided, it should be handled in a follow-up issue.

Implementation Brief

• Style the UserInputApp, assets/js/components/user-input, as per the designs in Figma on both small and large screens. Notable changes:
  • The user input app is now within a container with rounded corners.
  • Changes to font sizes, colors
• Using assets/js/components/user-input/UserInputQuestionWrapper.js,
  • Add a "Cancel" button which redirects the user to the main dashboard.
    • To get the URL of the main dashboard, query the core/site datastore via the getAdminURL selector with googlesitekit-dashboard as parameter.
    • Dispatch the navigateTo action from core/location for the actual redirection.
  • Wrap the existing "Back" and "Next" buttons within a container, with the newly added "Cancel" one in another container so that we can use display: flex and justify-content: space-between on the parent elements of both containers to space out the buttons as per the designs in Figma.
    • Please note on small screens how the order of the buttons changes, with the "Next" and "Back" buttons displayed first and then the "Cancel" one below them.
• It might be worth having the "Cancel" button as a separate component since it'll be used in the preview page as well, within assets/js/components/user-input/UserInputPreview.js since the button should be displayed on all questions and review pages.
• Using assets/js/components/user-input/UserInputSelectOptions.js,
  • Display an error message as per the designs when the user leaves (onBlur event) the input text empty after focusing on it.
• Remove stories/user-input.stories.js to instead have the existing story live in assets/js/components/user-input/UserInputApp.stories.js
  • Add new stories when there are multiple admins.
• Remove the CSS logic which displays the next question with a semi transparent gradient on top. assets/sass/components/user-input/googlesitekit-user-input-questions.scss and instead display 1 question at a time.
• Please note that most of the things in the AC are already in place, for e.g showing the who answered the question on a site where there are multiple admins, disabling the "Next" button if there's no valid option selected. The only thing to be done is mostly styling those components to match the designs.

Test Coverage

• No new tests to be added.

QA Brief

• Ensure that the userInput feature flag is turned on from the tester plugin.
• Go to the /wp-admin/admin.php?page=googlesitekit-user-input URL.
• Verify that the interface of the questions is same to same as the Figma designs linked in the ACs.
• Verify the other points in the ACs.
• Verify the Components > User Input Storybook story.

Changelog entry

• Implement new design for User Input questions.

[aaemnnosttv]

@kuasha420 right now there is a possibility that we may remove the open-text input fields for "Other" choices. See the PRD for details.

Otherwise, I believe I raised the question on another issue as well but will the questions use a shared component between the dedicated page and the settings page? They're mostly the same are they not? We should avoid duplicate/conflicting efforts between these similar instances as much as we can. Let me know what you think.

[kuasha420]

@aaemnnosttv sounds good to me. I have combined #5892 with this one. For the other field, where can I follow the discussion?

[aaemnnosttv]

For the other field, where can I follow the discussion?

See this thread although there may be another place too.

[aaemnnosttv]

• No answers should be selected by default and the Next button should be kept disabled until user selects required minimum number of answer(s).

A site-specific answer should be preselected if it has already been answered by another user, otherwise a user's own answers would be blank/unselected at this point.

• If a question has "Other" as an answer option, clicking it should open a text field for custom answer.

As mentioned above, it sounds like this might change so let's try to word this in a way which doesn't block the issue moving forward here if possible.

Apart from these details, LGTM

[kuasha420]

Made the necessary changes accordingly. Since Evan is OOO this week, anyone else can have a look and move it to IB if the changes makes sense. Cheers.

[tofumatt]

ACs look good here, moving to IB 👍🏻

[asvinb]

@kuasha420 @tofumatt A note about the following:

If " Other" option is picked and the text field is empty when user clicks "Next/Review", an error message should be displayed under the text field as seen in the design.

Right now, the "Next" button is disabled if the "Other" option is selected and the user does not input something in the textbox. I think from a UX point of view it's much better right now in the sense that the user already knows that he cannot continue unless he enters something in the textbox, which itself has focus when the "Other" option is selected. If we implement the logic as per the designs whereby the user sees an error message, it'll require the user to have an additional click on the "Next" button only to find out he cannot continue to the next page.

Let me know what you think.

[wpdarren]

QA Update: ⚠️

@nfmohit I know that we have some misalignment with the GM2+ color palette but I am still seeing the issue that I reported before, these are:

The text Select only 1 answer has the same issue as above but also the Figma design suggests it should be 18px but on develop it is 20px. The font weight is correct at 500.

According to Evan's comment above, I am thinking that this should be fixed. Am I correct?

[aaemnnosttv]

@wpdarren the text you're referring to uses title/large as @nfmohit mentioned. This correlates to this variable in our styles, so this would be corrected in the GM2 alignment.

site-kit-wp/assets/sass/config/_variables-mui3.scss

Line 180 in c2c618b

$fs-title-lg: 20px;

[nfmohit]

@nfmohit the important thing here is that we're using the proper tokens in the styling as the design but Darren can only see the end result of course. Ultimately, these all look like simple updates to our variables which affect all places they're used (i.e. go beyond the scope of this issue) so we need to align with design to make sure we're using the right values.

Anything which is specific to a variable change should probably happen in a dedicated issue and we can double-check everything. Everything else seems to be a non-issue, but again please make sure the correct tokens are used from the design.

Absolutely understood and agreed, thank you for the clarification, @aaemnnosttv! I thought the same way, which is why I followed the usage of the tokens defined in the Figma designs and used the relevant SCSS variables. I didn't change the variable values as a part of this issue because I assumed something might be off with the consistency and would need to be addressed separately.

I believe the Figma designs aren't accurate here. The color is defined as surfaces/on-surface-variant, which is #5f6561 in our codebase.

@nfmohit I'm not sure why Figma would be off as we should definitely be consistent with variables that are intended to reference the same token. I've raised this internally – perhaps Figma has changed since we initially implemented it?

The text Select only 1 answer has the same issue as above but also the Figma design suggests it should be 18px but on develop it is 20px. The font weight is correct at 500.

Same as above. The typography is defined as title/large, which is 20px in our codebase.

Figma does show 18px so I wonder if this was missed initially (which initially implemented it with rem but also commented it as 20px) or also changed?

Understood. This could be an inconsistency between the Figma designs (tokens) and our variable values. Please do let me know if you want me to create issues to update these if needed based on the internal discussions.

Thank you!

[wpdarren]

QA Update: ⚠️

@aaemnnosttv @nfmohit thank you for clarifying this. Has a ticket being created for these GM2+ issues?

I am sorry, but I have a few additional observations that I felt were worth raising.

1. There's a weird UX/UI behavior when you click on the 'cancel' button on any of the questions. Initially, the loading animation appears and then question 1 is loaded. The AC says:

Clicking on it should take the user back to Site Kit Dashboard.

user-1.mp4

2. On question 3, the completion bar at the top is fully across the top, where on the figma design it is around 75%

3. When you first load the user input, on the first question, the first answer appears highlighted. Not sure if this is expected, or, it'll be fixed with another ticket.

I think that's it. Testing is completed on this ticket, but would love some thoughts on my observations above.

[nfmohit]

Very interesting findings, thank you @wpdarren!

There's a weird UX/UI behavior when you click on the 'cancel' button on any of the questions. Initially, the loading animation appears and then question 1 is loaded. The AC says:
Clicking on it should take the user back to Site Kit Dashboard.

Hmm, I can't seem to be able to replicate this on my end. Here's a screencast:

I think you might be stuck in a scenario where the User Input is required and you can't get past to the Dashboard unless you answer the user input questions. We're removing this as a part of #5900. Can you normally navigate to the Site Kit Dashboard when this happens?

I do see the loading animation. Do you think it should be removed when cancelling?

On question 3, the completion bar at the top is fully across the top, where on the figma design it is around 75%

Good spot! I'll open a quick PR to address this.

When you first load the user input, on the first question, the first answer appears highlighted. Not sure if this is expected, or, it'll be fixed with another ticket.

This isn't a regression from this issue because it happens in the main branch. Screenshot:

Looking forward to hearing your feedback. Thanks!

[aaemnnosttv]

This isn't a regression from this issue because it happens in the main branch

@nfmohit please check against the last release as the main branch is already prepared for the upcoming release so it can't be used to check for regressions at this point.

I left a review on your PR which looks good but wasn't created from main 🙂 so this is back with you to recreate that.

[nfmohit]

This isn't a regression from this issue because it happens in the main branch

@nfmohit please check against the last release as the main branch is already prepared for the upcoming release so it can't be used to check for regressions at this point.

@aaemnnosttv My bad. Here's a screenshot from the latest release:

However, if you think we should remove the initial focus, I can update that in my PR.

CC: @wpdarren

I left a review on your PR which looks good but wasn't created from main 🙂 so this is back with you to recreate that.

On it now, thank you!

[wpdarren]

@nfmohit re your questions.

Hmm, I can't seem to be able to replicate this on my end. Here's a screencast: I think you might be stuck in a scenario where the User Input is required and you can't get past to the Dashboard unless you answer the user input questions. We're removing this as a part of #5900. Can you normally navigate to the Site Kit Dashboard when this happens?

No, I am not able to navigate to the dashboard. Here's what happens.

user-2.mp4

I do see the loading animation. Do you think it should be removed when cancelling?

It feels an odd experience to jump to another screen with the loading animation and then load the dashboard. I can create a ticket for this since it probably needs a conversation with Evan/Felix re the implementation here. What do you think?

Re. my observation: When you first load the user input, on the first question, the first answer appears highlighted. Not sure if this is expected, or, it'll be fixed with another ticket.

This isn't a regression from this issue because it happens in the main branch.

I agree this is an issue on the latest version 1.88.0 with the userinput feature flag enabled, but since this is related to the design of the user input screens, do you think we should fix it here, or, should I create a new ticket?

[nfmohit]

Thank you for your kind feedback, @wpdarren!

Hmm, I can't seem to be able to replicate this on my end. Here's a screencast: I think you might be stuck in a scenario where the User Input is required and you can't get past to the Dashboard unless you answer the user input questions. We're removing this as a part of #5900. Can you normally navigate to the Site Kit Dashboard when this happens?

No, I am not able to navigate to the dashboard. Here's what happens.

Okay, it looks like what I had thought. You might be stuck in a scenario where the User Input is required and you can't get past to the Dashboard unless you answer the user input questions. We're fixing this as a part of #5900.

I do see the loading animation. Do you think it should be removed when cancelling?

It feels an odd experience to jump to another screen with the loading animation and then load the dashboard. I can create a ticket for this since it probably needs a conversation with Evan/Felix re the implementation here. What do you think?

I agree. A ticket for this to confirm would be fab, thank you!

Re. my observation: When you first load the user input, on the first question, the first answer appears highlighted. Not sure if this is expected, or, it'll be fixed with another ticket.

This isn't a regression from this issue because it happens in the main branch.

I agree this is an issue on the latest version 1.88.0 with the userinput feature flag enabled, but since this is related to the design of the user input screens, do you think we should fix it here, or, should I create a new ticket?

Absolutely. I've updated the PR to remove the initial focus. But I'm not 100% sure if it should actually be removed from an accessibility perspective. @aaemnnosttv What do you think? If you think otherwise, I can add it back. Sending it back to you for CR & MR.

Thank you folks!

[nfmohit]

@wpdarren Based on this comment from @aaemnnosttv, we're not removing the highlight/focus on the first option. We need to create a separate issue to address this. Thank you!

[aaemnnosttv]

Follow-up PR has been merged; back to you @wpdarren !

[wpdarren]

QA Update: ✅

Verified:

• The interface of the questions is same to same as the Figma designs linked in the ACs.
• The other points in the ACs.
• The Components > User Input Storybook story.

user-input.mp4

QA note: there are a few observations that I will create tickets for as per the comments above.