search

JMU-CIME / CPR-Music

1 stars 30 forks source link

on activity pages, move the perform/bassline/create/respond/connect subnav listgroup thingy instead to the navbar as a dropdown or let the content flow around it #88

Open hcientist opened 9 months ago

hcientist commented 9 months ago

https://react-bootstrap.netlify.app/docs/components can try for examples here

williamjedrzejczak commented 9 months ago

I'd say a dropdown, moving the options to a dropdown in the navbar frees up screen real estate, makes the site look cleaner (in my opinion) & would help users accomplish their tasks more efficiently.

mfwolffe commented 9 months ago

Personally I'm a big fan of offcanvas sidebars. In my eyes they're just slightly cleaner/more elegant than standard drop downs. I like left side (start) for some reason, but the current main navbar I guess doesn't leave a lot of room for a trigger to an offcanvas (like a button). iirc, standard bootstrap has sidebars, I think a thin sidebar with small icons for the various activities, plus a sideways triangle button (or something) at the top (which triggers the offcanvas expansion) could be really clean, but idk if possible in react bootstrap.

Otherwise, drop downs are generally a solid bet.

In any event, I think if the subnav is 'hidden' from user, then having breadcrumbs somewhere may help the user (at least oblivious users like myself 🙃). I've encountered websites where triggering the hidden subnav to show was not intuitive/obvious. Or like the area w/ trigger was super cluttered and nothing was labeled, and so I would repeatedly hit the wrong button.

LukeHennessy501 commented 9 months ago

I think the answer depends on what you are going for in terms of either a user-friendly interface or maximizing screen real estate. A standard dropdown is one of the most common options for displaying the information we want to display and many teachers will most likely intuitively already know how this works and it accomplishes our goal. Here is a good simple example.

The other option is the off-canvas sidebar which frees up the most space on the page and seems to be a newer, cleaner way of presenting the same information with the tradeoff of possibly not being as user-friendly (Although this might not be the case). Some examples I found to work well are on common websites like YouTube where in the top left corner you can click a button and it will add options or take them away once pressed again (toggle button). This button keeps the same content on the page for the user but shifts everything else to the right while it is displayed allowing for all the nav information to be conveyed while allowing for full use of the page.

Amazon's page has a similar button in the top left of the page but it has the navigation information pop up and it only allows for something to be chosen from that spot, highlighting it and putting the rest of the content of the screen in the background in the process.

All 3 work and have their pros and cons. It just depends on specific use cases and how much functionality we want while displaying the information (always displayed vs only when pressed) and if we value potential user-friendliness over screen real estate