Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Only enable next button when user scrolls to the bottom of the page #1764

Open
KhumboLihonga opened this issue Dec 12, 2022 · 9 comments · May be fixed by #2134
Open

Only enable next button when user scrolls to the bottom of the page #1764

KhumboLihonga opened this issue Dec 12, 2022 · 9 comments · May be fixed by #2134
Labels
effort:xsmall Extra small effort - 1 day P2 Medium priority issue type:enhancement New feature or request ux

Comments

@KhumboLihonga
Copy link

Is your feature request related to a problem? Please describe.
Sometimes there is a display item that is enabled at the bottom of the page that a user needs to see before they proceed to the next page.

Describe the solution you'd like
The next button can be disabled by default and only enabled once the user scrolls all the way to the bottom of the page.

Describe alternatives you've considered
I can't think of anything else that prompts the user to scroll to view more information. If there is something, please let me know.

Additional context
As shown in the video below, the user can proceed to the next page without seeing the prompt "viral load collection is due today"
https://user-images.githubusercontent.com/90775548/207011675-8d3da458-2bf4-48ca-9198-92296f000bf6.mp4

Would you like to work on the issue?
N/A

@santosh-pingle santosh-pingle added the type:enhancement New feature or request label Dec 12, 2022
@santosh-pingle
Copy link
Collaborator

@shelaghm @jingtang10
If entry mode has prior-edit code, then Next button is only enabled if required questions are answered.
I am not sure whether progress bar which is shown at the top in the paginated layout can solve the problem.

I am not seeing vertical scrollbar on the page in the attached video, if it is invisible after sometime once scroll event is done, then we can think of showing vertical scroll bar all the time that can tell the user there is more information at the bottom.

@santosh-pingle santosh-pingle added ux P2 Medium priority issue labels Dec 12, 2022
@KhumboLihonga
Copy link
Author

@santosh-pingle thanks for responding to this so quickly. The entry mode is set to prior-edit but the item that is enabled is a display item and so it shouldn't block the user from proceeding to the next page.

The progress bar is great but when you have multiple pages, it works according to the number of pages not how far the user has scrolled down on the active page.

The vertical scrollbar is a good option, it just has to be visible enough I guess. This issue is just a suggestion, any other options are welcome.

@santosh-pingle santosh-pingle added the effort:xsmall Extra small effort - 1 day label Dec 12, 2022
@omarismail94
Copy link
Contributor

@shelaghm Can you give an update on this?

@shelaghm
Copy link

shelaghm commented Feb 16, 2023

Hi @KhumboLihonga,

Let me know if I summarized the problem correctly?
The primary issue is that users are not scrolling to the bottom to see all the questions and might prematurely click "next" before completing all the questions.

Brainstorming some solutions to address this problem.

  1. (as Khumbo proposed) Next button can be disabled by default and only enabled once the user scrolls all the way to the bottom of the page.
  2. (as Santosh proposed) Add a vertical scrollbar that shows progress within one page on a paginated questionnaire. I think the challenge is that it only appears while you're actively scrolling and then disappears. We can maybe look into this a bit more?
  3. Automatically adjusting the focus, so when a new question is added the screen auto scrolls up so the new question is visible.
  4. Modify the way the questions are displayed, so that they are not hidden below the fold. Since you're using the paginated layout in our design guidelines we recommend limiting what's displayed on each page so it's not hidden behind the fold. Is this an option for you?
  5. Modifying the questionnaire so that it is displayed as default/long scroll. I think in the current implementation the bottom button is still always visible, but we could change this so that it is anchored on the bottom of the questionnaire and only visible when the user has scrolled to the bottom.
  • My immediate recommendation would be to see if option 4 or 5 could work for you @KhumboLihonga?
  • My concern with option 1 is hiding/disabling buttons can also lead to user confusion, and I have a preference for keeping paginated navigation buttons anchored and always visible. We have some design guidelines here with the rationale
  • I'm not sure option 2 is going to make much of a difference in making content more discoverable, but can look into it.

@KhumboLihonga
Copy link
Author

Hey @shelaghm, you have summed up the problem really well thank you. After discussing with our team, option 5 sounds like the best option.

@shelaghm
Copy link

@KhumboLihonga Great to hear, let us know if you have any other feedback or suggestions as you work on modifying the questionnaire to be long scroll.

@KhumboLihonga
Copy link
Author

@shelaghm will do. However, I'm not the one assigned to this issue. @omarismail94 do we have anyone looking into this?

@KhumboLihonga
Copy link
Author

@omarismail94 just following up, is there anyone looking into this?

@f-odhiambo
Copy link
Collaborator

@jingtang10 Kindly assign Lazarus github.com/lzrs

@LZRS LZRS linked a pull request Aug 15, 2023 that will close this issue
7 tasks
@jingtang10 jingtang10 changed the title Enable next button when user scrolls to the bottom of the page Only enable next button when user scrolls to the bottom of the page Feb 20, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
effort:xsmall Extra small effort - 1 day P2 Medium priority issue type:enhancement New feature or request ux
Projects
Status: In Progress
Development

Successfully merging a pull request may close this issue.

5 participants