[Feature Request]: Standardize breadcrumbs throughout the site

S4v8n commented 8 months ago

Is your feature request related to a problem? Please describe.

I am confused when I navigate through Oppia's Math page and Community lessons. When I want to learn other topics in the subject, I don't have access to the hierachical subject page when I am in a lesson. This often forces me to start over from Oppia's front page or the drop down menu.

Describe the solution (or solutions) you'd like

The solution is to add a breadcrumbs feature. This would allow the user to go to the corresponding subject page related to the lesson. This would alleviate any frustration / confusion that mounts while navigating through Oppia's site. I used Math page, Community Library page, and Search result page as example pages to add the feature but note that not all pages will need breadcrumbs. Please refer to the figma file, for more detailed instructions on pages needing breadcrumbs read "Breadcrumbs logic 2.0".

Currently on Oppia's site there are evidences of breadcrumbs in the Donate, Volunteer, and About page etc. All existing breadcrumbs will be reformatted to the new version. An audit of the entire site will be needed to update or remove existing breadcrumbs.

The plan for breadcrumbs is go three levels deep maximum. Going past three levels will take up too much space and also become quite busy. Also to manage the length of the bread crumbs and visual clarity, I would like to set the font size to 14pt, placed below the nav bar and aligned with the title heading text.

See example image for reference.

Describe alternatives you've considered and rejected

I have considered going to four levels deep and possibly five levels. With the lengthy lesson titles and also subject names, I believe simplicity wins by keeping a rule of three levels.

Additional context

Here is how I envision the breadcrumbs to display on the pages.

From Math Page

Oppia > Math - User sees this at the math classroom page Oppia > Math > Topic Name - User sees this after selecting a topic Oppia > Math > Topic Name - User sees this at chapter lesson page and each lesson player page Oppia > Library - User sees this in search results page after searching from search bar on Math Page

From Community Library Page:

 Oppia > Library Oppia > Library > Subject name - The user will see after selecting the subject, the collection name, and the non collection name lesson. This way the user can backtrack to the same subject for other lessons.

From Oppia Learner members:

No display - Homepage or Learner’s Dashboard page for logged in users. After log in, user will not see breadcrumbs at the dashboard page Oppia > Math > Topic Name - User sees this after selecting lessons to resume or try new lessons Oppia > Library - User sees this after searching from learner dashboard Oppia > Library > Subject name - User sees this after selecting a community lesson from the dashboard.

Lesson players and Practice lessons:

No breadcrumbs will be needed. Only display the Lesson number and name below the nav bar.

Pages that do not need breadcrumbs:

Oppia Homepage About page About Oppia foundation page Blog page Contact page Learner Dashboard page Partnerships page Volunteers page Creator Dashboard Contributor Dashboard Donate page Preference page

[Mobile] Breadcrumbs rule: use no more than 1 Level deep for breadcrumbs.

Should have a “<” followed by “Back to...” corresponding hierarchal page. Follows the same rule for pages needing breadcrumbs.

seanlip commented 8 months ago

@S4v8n Thanks for filing this issue. Could you please specify a few things:

What happens to the breadcrumbs as the width of the page narrows -- what does the full responsive behaviour look like?
Should it be possible to click on each item in the breadcrumb? If so, where does each click take the user?

Thanks!

seanlip commented 8 months ago

Also one note ... TBH the text on the left feels a bit disjointed to me since "Oppia" is so much larger than the stuff next to it. This makes it feel a bit jarring IMO, partly also because of the extra space on the left of the ">". Do you feel that this is the case too, and might it be worth getting more design feedback on it from the team? (Of course, I might be the outlier here too, and it's fine to ignore this note if you like.)

S4v8n commented 8 months ago

@seanlip I was looking to make the Oppia logo more prominent and the secondary would be the breadcrumbs with the reduced font size (14pt). The font size also aligns with the same size as the navigation bar menu. I have considered the font to be a little larger (16pt) but that looks like it was unintentional.

I do apologize for the not adjusting the spacing between the Oppia and the arrows and the 'Math' text. Thanks for pointing that out. Let me play with the spacing for a bit. Also, I do plan to run it by the team in our weekly meeting to gather their feedback as well.

Regarding the responsive question:

There are three options:

a. behavior follows how it is currently, as soon as the screen size reduces navigation menu titles will move closer to the breadcrumbs, once it is in contact with the breadcrumbs, the bread crumbs disappears. For mobile phone screens the breadcrumbs will not appear.
b. breadcrumb will reduce in length by having a '...' to replace the second level text and only display the third level breadcrumbs. once the user goes to the second level, the bread crumbs will display arrow and text.
c. breadcrumb text is responsive and reduces according to screen size. we would need to set limits on how small the fonts should be. The challenge here is how accessible it is to the user if the text gets too small.

Regarding question about what happens when user clicks on the breadcrumbs. yes, the use will be able to click on the breadcrumbs. For example: if the user in a lesson and the breadcrumbs display ' Oppia > Math > Place Values' If the clicks on the third level (Place values), it will take user back to the Place Values page to view all other lessons. if the user clicks on the second level (Math) it will take user back to the math page to view all topics.

What are your thoughts?

seanlip commented 7 months ago

Hi @S4v8n -- sorry for the late reply. I don't have a strong opinion yet on what should happen here, I suggest letting the conversation with the design team play out so we can finalize the spec. For now, I'll put a note to say this issue is blocked on the design team, and we can remove it once there's a consensus reached. Thanks!

S4v8n commented 7 months ago

Hi @Sean Lip @.***>,

No problem, I have created some alternate options to review/ gather feedback with the team. Thanks for the update.

On Sat, Mar 23, 2024 at 8:35 AM Sean Lip @.***> wrote:

Hi @S4v8n https://github.com/S4v8n -- sorry for the late reply. I don't have a strong opinion yet on what should happen here, I suggest letting the conversation with the design team play out so we can finalize the spec. I'll put a note to say this issue is blocked on the design team, we can remove it once there's a consensus reached. Thanks!

— Reply to this email directly, view it on GitHub https://github.com/oppia/oppia/issues/19918#issuecomment-2016526862, or unsubscribe https://github.com/notifications/unsubscribe-auth/BBNBQYHZAY2YI3YG7GNHJALYZWONZAVCNFSM6AAAAABEPFKAWKVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDAMJWGUZDMOBWGI . You are receiving this because you were mentioned.Message ID: @.***>

S4v8n commented 4 months ago

Hi team,

My name is Kurin Tu, and I am the UX designer heading up the project for the creating a standard for breadcrumbs. The standardization of breadcrumbs across the entire site has been finalized. Please review this figma file for more details. Feel free contact me with any questions. Thank you!

oppia / oppia