Make it clear to learners that the lessons in a topic should be played in order.

[seanlip]

Platform
Oppia Android

Describe the request

Learners sometimes try to click on locked chapters in the lesson. This causes frustration because they can't open a chapter until all previous chapters have been completed.

In general, there are two ways to address this: (a) indicate more clearly to learners that the chapters must be played in order, or (b) relax the restriction that the chapters must be played in order. Option (b) is a bit complex because it has implications for progress + recommendations, and therefore it needs more thought. The aim of this issue is to do option (a) and see if this feedback continues to arise.

Here is some representative feedback about the issue encountered:

• The student tried to click on locked chapters. He became a bit frustrated. I explained to him that he can start from chapter one to unlock the other chapters.
• The emphasis on chapter 1 isn’t enough, the color emphasis on the rest of the chapters weren’t quite visible. They were tapping on other chapters, they didn’t seem to notice that it was disabled.
• Before finishing lesson 1, the student clicked on lesson 2, only to discover that it was unclickable
• She also asked why there was a padlock sign beside the lesson numbers.

Here are some suggestions from the researchers (you don't need to follow them, but they might provide some ideas for design iterations):

• There should be a little difference between the lock and unlock chapters (Von Restorff effect).
• When the student clicks on a locked lesson without finishing the previous lesson, there should be a pop-up message indicating to complete the previous lesson. A modal/pop-up explaining to the student why some chapters are locked can create a better user experience. It will help alleviate the thoughts that the app is broken.
• When a student taps on a locked lesson, an error message should appear explaining the reason for the lock and the necessary steps to unlock it. For instance, it might say, 'Chapter two is currently locked. Please complete Chapter one to gain access to Chapter two.'
• Provide a brief explanation or visual representation on the main page to help learners understand the importance of taking the lessons in order since each chapter builds upon the knowledge of the previous one.

Context for the request

This is an update to the existing app based on learner feedback.

UXR success criteria

Learners should:

• Be able to explain why clicking on a locked chapter doesn't do anything.
• Be able to articulate that they need to finish the earlier chapters in order to unlock a locked chapter.

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: (for Android projects), N/A (for design style guide projects)
• UXW: @ccc253 / @tamiorendain
• Design systems:
• PM: @seanlip

[Flying-Pegasus]

hello, @seanlip I am willing to work on this issue.

[seanlip]

@Flying-Pegasus This is a design issue and is open only to members of the design team. If you are interested in joining, please follow the instructions on the Oppia.org volunteer page to submit an application. Thanks.

[Flying-Pegasus]

Okay @seanlip I'll look into it. Thank you

[einstein395]

Can you please share the Figma file and let me know how I can help as UX writer?

Thanks
Aparna

[lmahon90]

https://www.figma.com/design/siFcjwinRnyaGk6EQrFYyM/Oppia-%5B%23-73-%2377-%23161%3A-Navigating-Topics%5D?node-id=135-9774&t=sxTACQL6LPQ8onrB-1