1566327 - Mobile navigation experience is poor

Status: RESOLVED WONTFIX

(developer.mozilla.org Graveyard :: General, defect, P1)

Description

[info]

What did you do?

I'm trying out the beta version of the MDN web docs, which has apparently been rebuilt with React. It seems like the mobile experience hasn't had much attention. Here's just things I noticed about the navigation experience which doesn't work well on my phone.

What happened?

• The yellow beta corner is obstructing the beta intro text and URL
• Pressing the navigation link text actually goes to that page. You have to press on the triangle, which has a tiny hit area, to open up the sub items.
• No space between the logo and search input in the header
• The sign in text link also has a very small hit area
• When you're signed in, the user menu is a small Mozilla (dino?) Logo. I would not have expected this to be a user menu at all.

What should have happened?

• The yellow corner shouldn't cover text. Also consider not using the full URL as the link's text, because it's a lot for screenreader users to listen to.
• The hit area on interactive elements should be at least a fingertip size on mobile.
• Space between elements could be reviewed throughout.
• Change the dino image to a user profile image or something else more intuitive.

Is there anything else we should know?

Comment 2

[BMO Automation]

MDN Web Docs' bug reporting has now moved to GitHub. From now on, please file content bugs at https://github.com/mdn/sprints/issues/ and platform bugs at https://github.com/mdn/kuma/issues/.