[iOS] Move Course menu from bottom to top

[sergeymomot]

Need to move Course menu from the bottom of the screen to the top of the screen. Course menu should scroll left and right. Course elements (Home-Videos-Dates etc.) should scroll left and right by swiping.

[marcotuts]

@sdaitzman - this is the ticket that could use design definition asap

[miankhalid]

@marcotuts @sdaitzman any update on the designs for this feature? cuz its currently blocking the PR review of #181

[miankhalid]

@marcotuts @sdaitzman btw PR #181 does include a video showing the current implementation that you can review here: #181 (comment)

[sdaitzman]

@miankhalid thanks, working to get design updates ready to share as soon as possible. The new top navigation has some key design improvements and looks great, but there are a couple changes we're likely to request:

• Including icons in each item, to make them easier to distinguish at a glance
• Potentially a different pill-shaped design with wider spacing, which would make the tap targets more distinct, and make the selected tab more clear

Here's an early mockup of these updates (pending some changes, especially below the nav, but sharing this for reference). Hopefully we can unblock the top-navigation PR. Do these changes to the navigation seem feasible?

[moiz994]

Thanks, @sdaitzman ! This unblocks the dev team for now. We can do a fast follow-up to this in case there are any changes in design moving forward.

tagging @ekangedx for visibility into design updates.

[touchapp]

Curious if we can use that design, thoughts @ekangedx ?

[ekangedx]

Thanks for bringing this to my attention @moiz994 @touchapp I think we should stick to using tab nav here if possible. We met earlier this week and discussed using pills as navigation is a lesser common pattern with some known usability issues as well as unvetted usability questions.

Here are some of the unresolved concerns for using pills and why tab nav might be a better choice here:

• Depending on the device type the pills may not afford visual continuity unlike the mock provided above, which is needed to signify scrollability to users
• Adding icons also inadvertently add horizontal real estate and pushes subsequent menu items even further off-screen, which adds to the discoverability issue ^
• Utilization of too many icons within one viewport has diminishing returns as every extra unit of information in an interface competes with the relevant units of information and diminishes their relative visibility (source). P.S. Please note that under the home tab, which is the most frequently utilized tab, there already are 5+ icons under the outline section
• The tab navigation has already been user-tested and vetted in terms of the usability, discoverability and clarity of the nomenclature. So we feel confident that they don't need additional visual affordance i.e. icons to clarify the meaning. P.S. this would also support edX's design principles, one of which is "Ditch the unnecessary" per usability heuristics
• Using pills as navigation would introduce inconsistency between the web and mobile app experience, which is sub-optimal for edX users as we know they jump back and forth between the two experiences
• Pill navigation is not part of the navigation components in Paragon nor Open edX whereas tab nav is in both places
• We can leverage native components for tab nav which is an added performance bonus whereas we may not be for chips

[sdaitzman]

Hi @ekangedx, thank you for raising these concerns. I want to make sure we address them fully and meet the usability heuristics you mentioned. I hope we can discuss them at the mobile design weekly tomorrow, and we can share out our findings here.

I think some of the usability concerns you raised have been addressed within our design process. For example, we tested the pill design and layout we propose on all common mobile device sizes from iPhone 12 Mini to iPhone 15 Pro Max, and the pill layout affords visual continuity on that full range. Happy to share more detail on the other concerns you raised, if that would be helpful.

Editing to add: we discussed the navigation structure at the mobile design weekly meeting, and will reconvene at the next mobile design weekly on December 19 to review updated designs.