Confusion between the "back" and "exit" buttons when navigating within lessons

[seanlip]

Platform
Oppia Android

Describe the request

We have received some feedback from learners that they are confused about the purposes of the exit button vs the back arrow button when they are playing a lesson. More specifically:

• Difficulty navigating to the previous screen/next screen -- affected 7 learners
  • When the student missed a question and wanted to return to the previous page, they didn’t know that they could do so by using the back button.
  • The student tapped the exit button instead of the back arrow button to go back to the previous page.
  • The facilitator had to guide the student with the ‘continue’ and ‘back arrow’ to navigate the chapter.
• Student could not switch to a different topic -- affected 10 learners
  • The student couldn’t switch and asked that I assist, so I showed her by clicking the arrow on the top left part of the page.
  • The student tried repeatedly to exit the topic by pressing the return arrow inside the lesson, but he couldn't. I then asked him to carefully search for what else he could do. He then asked if he should press the large X button at the top. He was still unsure of how to get to the main topic page. I had to assist him with this. He also kept trying to use the "Correct!" pop-up that showed whenever he got an answer right to go to the next lesson.
  • The student hesitated a bit and clicked on the back arrow, trying to go back to the topic screen. But when it didn't work, he clicked on the x button.
  • She wasn’t able to leave the chapter. She didn’t locate the ‘X’ button. She was stuck. She also thought that if she leaves the topic halfway, her progress won’t be recorded and she would have to start afresh.
• The student felt like if she exited the chapter midway, she might have to start taking it all over.
• The student recognizes the exit button,but thinks that if she exits the chapter midway, he will not be able to take a new lesson.

Here are some suggestions that facilitators proposed for addressing this issue (but it is your call whether you want to follow them or not!):

• Difficulty navigating to the previous screen/next screen:

  • Using the text “Close” instead of the icon or a brief video tour of the app can help the student know what each icon means.
  • It might be better to add a text description which says “back” like the continue button.
  • Call to action buttons should be above the fold and at fixed position while scrolling.
  • I suggest that there should be text underneath the back and forward arrows (if possible). They can be labeled ‘Previous lesson card’ and ‘Next lesson card’ so a student clearly understands the use of the arrows. I believe it will help students to better identify the other uses of other buttons in the UI.
  • I suggest the arrows have little and non-imposing but clear text under them, alerting the student that they are for going to the previous card or continuing on to the next one.
  • I suggest that the icons, more specifically the arrow icons be used with contrasting colors so it will be visible to the students.

• Student could not switch to a different topic

  • Using words like "Switch topic" or "Change topic" on the tabs could help. (Editor's note: I'm not sure what "the tabs" means here.)
  • There should be an exit button because she’s used to buttons from apps like youtube.
  • She said that instead of arrows, we should use more buttons. There should be pop-up screens that inform the kids when they’re about to leave a chapter and tell them not to worry because their progress will be restored and won’t be lost.
  • There could be a button linked directly to the home tab so the participant can easily choose another topic. In this case, participant can choose to go on to the next chapter or start another topic. There could also be a text instructing participant to use the exit button, "x" in this case, to exit the chapter and start another chapter in the same topic.

The aim of this issue is to propose some changes to the navigation/exit flows so that the learner knows how to use them. These changes should be verified through learner feedback studies before being implemented in the app.

Context for the request
This is an audit of an existing feature (the progress/exit buttons in the lesson screen).

UXR Success criteria

• When a learner is asked "how do you go to the previous card to look up material", they should know to click the Back button within the lesson.
• When a learner is asked "how do you switch to a different topic", they should know to click the arrow on the top left of the page, and also know how to exit to the "list of topics" page after that.

DESIGN APPROVAL CHECKLIST -- DO NOT EDIT.

• UX Design approved (Android mocks should include dark mode)
• UX Writing approved
• Design Systems Team approved
• Product approved

For a design project to be completed, it needs approval from UXD, UXW, DS and PM. Please tag the following reviewers when your project is ready (at least one reviewer for each of the 4 bullet points below):

• UXD: @GlowWindow (for Android projects)
• UXW: @stepmalt
• Design systems: @qluuu / @celestinetales
• PM: @seanlip

[kmuir1991]

Hi @alyssinwonderland ! Does this project still need UXW feedback? Have any UXW looked it over yet in general?

cc @seanlip

[alyssinwonderland]

Hi @kmuir1991 ! No one from the UXW has looked it over, yet. Could you please just give feedback on the popup message? All of the popup message screens are the same for each solution, so please feel free to put your comments on the first solution. The other screens are copied and pasted from the design system to show the user flow. Thank you so much for your help, Kate!

[kmuir1991]

@alyssinwonderland okay, will do! Should be able to look over it and provide feedback before next week's Android meeting.

[alyssinwonderland]

@kmuir1991 Ok, thank you again for your help! Have a good weekend! :)

[kmuir1991]

@alyssinwonderland I'm just realizing there are no links to mocks in this issue. Can you please provide? Thanks!

Edit: apologies, somehow I was viewing this page in a format that did not include the links. I see them now. No need to do anything.

[alyssinwonderland]

@kmuir1991 Hi Kate! Ok, thank you for letting me know. No problem and thank you for your feedback! I'll review it and implement changes by, hopefully, next week! Hope you enjoy the rest of your week! :)

[seanlip]

@alyssinwonderland has not been responsive, so I'm deassigning her from this project.

For reference, here is a link/screenshot to the latest version of the mocks: https://www.figma.com/file/sdvbyGPTlEEYx9gy9xYgZl/%22Back%22-and-%22Exit%22-Buttons?type=design&node-id=105%3A1548&mode=design&t=8XbCgRi7dS8DrWYC-1

[lmahon90]

@seanlip I've looked over the latest mocks. Do you know if the research team has done any testing on the current design? I took some time to go through the app and I didn't notice any pop-up messages that said I was about to leave the chapter.

[seanlip]

Hi @lmahon90, thanks for checking! No, this hasn't been implemented yet and the research team hasn't, to my knowledge, done any testing on the proposed design.

I think a good next step, if you like the above proposal, might be to work with Haruka and the UXR team to prepare a script that can be used for testing this approach. Does that sound good? Of course, if you see any improvements that can be made, feel free to update the prototype as needed (you should be able to make a copy of the previous design file for easier editing, if you like).

[lmahon90]

That's what I was thinking! I don't see any email contacts for the UX research team...will you forward that to me?

[seanlip]

Hi @lmahon90, yup -- see the design onboarding guide at https://docs.google.com/presentation/d/1QF7lTAOPumJ8z5NOHSMKKn-anBen3-USiKn8fhhPC6s/edit#slide=id.g146596af2d6_0_15 (slide 25). Does that help?

[lmahon90]

Perfect! I'll take another look at that. Laura

[lmahon90]

Here's a link to my research plan so far.(https://docs.google.com/document/d/17La3Fnv67YSp6s5ybmC3hUfVVMAf5fWP65bJXItkldA/edit?usp=sharing)
I've just started editing it.

Here's my figma file for #78 using the most up to date template (from our 7/31/24 meeting). https://www.figma.com/design/t7VpYQ7EYxvjOJUudo5XKk/Oppia-%5B%2378-Back-and-Exit-Buttons%5D?node-id=3001-111063&t=o1sE6plDUO4NGxnn-1

[lmahon90]

@seanlip @ashley-ya See the latest mocks > [8/27/24] Hi-Fi Iterations > Flow B.
I've left some annotations there for you to look at.
I'm continuing fill out the research plan.

[seanlip]

Thanks @lmahon90! I replied on the file.

[lmahon90]

Still currently working on the mocks. Unfortunately I'm struggling a lot with creating the "control" version of the current flow because the design system is so different than what's currently in the app.

[lmahon90]

[lmahon90]

• Finalized the control and experimental mocks
• Prototypes are ready
• Research plan shared with UXR team
• Research report document shared with UXR team
• Research submission form shared with UXR team
• Research intake form complete

Links to prototypes:
Task 1
Task 2

Link to research plan