Sidebar issues

[retabak]

If you place your cursor in exactly the "perfect" place between two badges, they go crazy and 'blink' very quickly.

Also, have we considered / explored having the sidebar slide in and out of appearance more slowly? I find its fast movement a little jerky and jarring.

[schanzer]

@retabak I slowed down the animation a bit. Let me know what you think?

As for the badges -- if we make them all full-size, we can't fit more than one in the toolbar without it becoming cumbersome. If we make them small, they're unreadable (as @flannery-denny has pointed out in an earlier issue). Another option is to ignore the badge concept entirely, and replace them with text-only links.

Thoughts?

[schanzer]

An issue for @ds26gte: it looks like the textbook alignment in the Flags lesson is including a mix of codes and titles. What gives?

(Note: on the website, the textbook still is still hidden, so you'll need to build locally to see this)

[retabak]

@schanzer - I do prefer the slower speed at which the sidebar is appearing.

As for the badges: I'd be sad to see them go. I'm not sure what the solution is, given that they are unreadable at a smaller size. Is there really no way to resolve the blinking issue? Maybe @flannery-denny wants to weigh in??

[schanzer]

@retabak I spoke with Flannery today, and it looks like Badge concept does not scale well to other practices (Like MLR, NGSS, etc), in addition to not working out the way we'd hoped for the CC MPs. Here is the new proposal:

• [ ] Rename "Badges" to "Practices" (e.g. - lessons-and-badges.rkt becomes lessons-and-practices.rkt)
• [ ] Remove the "badges" section from the toolbar, and replace with simpler headings-with-bullets for each Practice standard. So there would be a title called "CC Practices", with bullets for MP.1, MP.2, etc. Then rinse and repeat for "Math Language Routines" (MLR.1, MLR.2, etc), and so on.

What do you think?

[retabak]

@schanzer I thought I replied to this! I'm down with this new proposal.

Just encountered another sidebar issue, however...

There is some vertically oriented text (it's purple? and maybe it says "Lessons Pathway Standards"?) but it is totally illegible. I can kinda see it when the side bar is tucked into the side of the page, and then it disappears when the sidebar pops out. I assume it's supposed to be legible to indicate to folks that the little box hanging out on the left of their screens has a purpose.

[flannery-denny]

@schanzer sidebar text is also off-screen for me.

[schanzer]

I really think we should go back to the original format, in which the sidebar is always visible on the righthand side of the lesson. We have so much space to the right! Why not use it?

[flannery-denny]

I'm not sure why it ended up on the left. No strong feelings.

[schanzer]

Moved it back to the right, and kept it always visible. Comments welcome.

[flannery-denny]

@schanzer as someone who often minimizes the window I'm working in, the sidebar being in a fixed position on the right is pretty annoying. Is there a way to make it so that I can expand it if I want to, like we used to be able to do from the left?

[schanzer]

Flannery and I talked about this tonight, and arrived at the following criteria:

• The toolbar can't always be visible, since it has to always be somewhere and that means smaller windows will hide it
• If the toolbar is retractable, it needs better visibility than a thin strip on one side. Perhaps a button somewhere...
• If there's a button to click, the toolbar should appear near the button. Since the left and top already have content, that means the button should be on the right and bottom.
• Since toggling the toolbar visibility now requires an explicit action, it's ok for the toolbar to cover the lesson content. This also means there needs to be a close button on the toolbar, which requires an explicit action to hide it.

[retabak]

I'm thinking more about this toolbar and thinking perhaps some sort of drop-down menu would better serve our purposes?

• The primary function of the toolbar is to allow teachers to navigate between lessons without clicking away from one lesson and back to the page with all of the lessons. It's supposed to save clicks, right? Or do we want it serving some bigger purpose, i.e. it's a place to see related standards?
• I'm not sure I understand why the standards and badges are not just embedded in the table as a part of the lesson plan? They seem like they should be there! As a teacher, that is where I would expect to find them. It doesn't feel intuitive to me that the toolbar is the place to find the standards.
• I like how Open Up has a button with a drop-down menu of all the lesson options. It's out of the way unless you want to see it. (Maybe this is too radical a shift from what we already have?)

[schanzer]

The primary purpose is not simply to navigate.

@retabak we used to have the standards and badges as part of the lesson table, but @flannery-denny felt that they were getting lost. We made the decision to move these to a sidebar - similar to how the Open Up resources list their lesson alignments and metadata off to the side. If you're citing them as an exemplar, shouldn't we follow their lead?

The drop-down menu is pretty close to my comment above. But instead of dropping down, it grows up.

[retabak]

@schanzer - The only content off to the side on the Open Up site is there to help you navigate through the individual lesson content. I'm not seeing any alignments and metadata off to the side; can you explain what you mean? I'm seeing that Open Up lists the standards in the lesson table:

Obviously we don't need to do exactly what Open Up does! This sidebar continues to feel a little clunky and like it's not totally integrated. I think part of why it seems not quite right is because it's trying to do many things at once. I do like the idea of the menu growing up--but would need to see it to totally understand what you're envisioning.

As for the standards getting lost: Believe it or not, as a teacher, I think I'm sort of okay with that? When I'm using any given curriculum, I'm comforted to know that a curriculum is aligned to the standards. Once I see that the attention has been given to standards alignment, I focus on thinking about lesson instruction (how are the materials? will my kids enjoy it? is it relevant?) and trust that the curriculum authors did their due dilligence with respect to standards. Put another way: Standards are a thing that I note, with gratitude, and then I move on to thinking about instruction.

[schanzer]

How odd - Jen Poole had cited OpenUp as her original example of a good sidebar!

In any case, we originally had the standards in the lesson plan. This was deemed to take up too much space for something that isn't necessarily being used every day. @flannery-denny and I did some design discussion around this, which is how we arrived at the need for a sidebar (badges, showing prerequisites, etc are all part of this).

Is this something that needs to go back to the drawing board? If so, it's going to have to wait for next year. Are there tweaks we can make to the existing system in the meantime?

[flannery-denny]

I think we should plan to discuss sidebar as a team at next week’s meeting rather than over git. Not sure what the best way forward is at the moment.

To be clear, I gave feedback on how to make it better than the original concept because I was told that sidebar was a priority that had to happen in order to make it possible to access other lessons from within a lesson.

I was not a fan of the sidebar concept nor was I a fan of how our website addressed the standards.

On Sep 14, 2021, at 6:37 AM, Emmanuel Schanzer @.***> wrote:

 How odd - Jen Poole had cited OpenUp as her original example of a good sidebar!

In any case, we originally had the standards in the lesson plan. This was deemed to take up too much space for something that isn't necessarily being used every day. @flannery-denny and I did some design discussion around this, which is how we arrived at the need for a sidebar (badges, showing prerequisites, etc are all part of this).

Is this something that needs to go back to the drawing board? If so, it's going to have to wait for next year. Are there tweaks we can make to the existing system in the meantime?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or unsubscribe.

[retabak]

Agreed that this seems like something we should discuss in real time!

On Tue, Sep 14, 2021 at 7:36 PM flannery-denny @.***> wrote:

I think we should plan to discuss sidebar as a team at next week’s meeting rather than over git. Not sure what the best way forward is at the moment.

To be clear, I gave feedback on how to make it better than the original concept because I was told that sidebar was a priority that had to happen in order to make it possible to access other lessons from within a lesson.

I was not a fan of the sidebar concept nor was I a fan of how our website addressed the standards.

On Sep 14, 2021, at 6:37 AM, Emmanuel Schanzer @.***> wrote:

 How odd - Jen Poole had cited OpenUp as her original example of a good sidebar!

In any case, we originally had the standards in the lesson plan. This was deemed to take up too much space for something that isn't necessarily being used every day. @flannery-denny and I did some design discussion around this, which is how we arrived at the need for a sidebar (badges, showing prerequisites, etc are all part of this).

Is this something that needs to go back to the drawing board? If so, it's going to have to wait for next year. Are there tweaks we can make to the existing system in the meantime?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or unsubscribe.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/bootstrapworld/curriculum/issues/551#issuecomment-919584308, or unsubscribe https://github.com/notifications/unsubscribe-auth/AUY3SE7DGKDEBQKIYAF6JB3UB7L7VANCNFSM5BV43X4Q . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

[schanzer]

OK, let's make this the focus of our next team meeting (after the one-pagers). We really need to sort this out.

[retabak]

A few additional thoughts on this:

• It was really helpful, @schanzer, to see examples of what you are referring to when you speak of sidebars!
• In looking at these examples, I realized that one thing that bugs me about our sidebar is that its coloration and design make it look like it is something that was generated by my browser / my computer rather than by Bootstrap. That default grey color that is used for literally everything is not doing it for me. I don't want the sidebar to match our color scheme (I think we want it to be unobtrusive?), but maybe we can experiment with making it blend in more and look less like a grey non-descript notification? For instance, this Zappo's sidebar is white and blends right in--which is why I didn't realize it would qualify as a sidebar!

• That image also makes me wonder if we can start the sidebar below our Bootstrap header. I think that makes more sense?
• Now that the scrollbar next to the list of lessons is gone, do the lessons need to be in a box? Do the standards need to be in a box? To me, these are all things that make the sidebar feel clunky and from computer-land, not from Bootstrap.

And... some other stray thoughts:

• If you reduce the browser window size, the sidebar goes away. I don't think that really bothers me, however...
• If you have a widescreen monitor that you're using to view our website, it looks a bit silly, what with that sidebar right in the middle of the screen. Again, maybe not a pressing/widespread issue - but I figured I'd point it out in case it's an easy thing to fix.

[schanzer]

@retabak @flannery-denny

Thank you for articulating the design constraints - that helps me get a sense for where we can play, and where we can't. A few thoughts:

• If the toolbar is on the right, we'll always have to make a tough call with window sizing. If the toolbar is glued to the righthand side, dragging the window will move the toolbar and leave a ton of whitespace between it and the lesson. If the toolbar is "stretchy", a wide window will have a giant toolbar. Neither of these are ideal.
• This leave us with a bar that runs along the bottom or top of the page. I don't love this, since that means all the toolbar content needs to be hidden until someone clicks on it (hurts discoverability), and you can only really see one chunk of content at a time. This is what OpenUp seems to do, and I'm really not a fan.

In other words, there's no perfect solution here. Any choice will involve tradeoffs. Do you both have a preference for which of the two options (vertical bar, everything visible vs. horizontal bar, click-to-see) you'd prefer?

[flannery-denny]

@schanzer I am fine with it on the right and disappearing when I make my screen small. And I agree with @retabak that the grey shadow is visually disruptive and needs to go.

If you want it on the bottom, I definitely don't want it there all the time. I find it very irritating when I am trying to view content and the amount of the screen in which I am able to view it is limited by something that someone else wants me to look at rather than what I want to look at. I had horizontal toolbars from word and windows all the time and I wish I could hide them in zoom.

[retabak]

I think I'm fine with it on the right, but I think it would look a lot more integrated if we could make it white (no grey, no outlines, no boxes) and also adjust it so that it starts below the Bootstrap header. Not sure if these things are possible.

On Tue, Sep 28, 2021 at 11:32 AM flannery-denny @.***> wrote:

I am fine with it on the right and disappearing when I make my screen small.

If you want it on the bottom, I definitely don't want it there all the time. I find it very irritating when I am trying to view content and the amount of the screen in which I am able to view it is limited by something that someone else wants me to look at rather than what I want to look at. I had horizontal toolbars from word and windows all the time and I wish I could hide them in zoom.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/bootstrapworld/curriculum/issues/551#issuecomment-929341332, or unsubscribe https://github.com/notifications/unsubscribe-auth/AUY3SE7CXFX4OSZEKYU7UCTUEHNXJANCNFSM5BV43X4Q . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

[schanzer]

@flannery-denny and @retabak want to try the toolbar on the left

[schanzer]

@flannery-denny and @retabak I've moved the sidebar to the left.

1. What do you think of the new placement?
2. How do you feel about color, shadow, and spacing between elements?

[flannery-denny]

@schanzer when I build the data-science pathway I get this for the landing page and I was expecting to get this

But... the more I look at it, I'm not sure which is better. Except, if you're not going to include the stuff on the left or the top, how will people navigate back to the home page? And why leave so much white space at the top?

What stands out most looking at these screenshots is that both have all that text about teaching remotely and ordering workbooks... but right here, we want to have our socks knocked off with data science! The teaching remotely materials could go on the teacher resources page? And the workbooks could go on the teacher resources page and also in the store?

When I get into the lesson itself I was expecting to still see the boot in the top left corner to maintain visual continuity (and I would expect clicking on the boot to take me back to the home page).

I expect the side bar to start in parallel (at the same y-coordinate) as the lesson plan (not sure whether it will look better aligned with the title or the materials table). I definitely don't want to see words all the way at the top of the left column like this if there is all that white space at the top of the right side of the page (speaking of which, does there need to be that much white space at the top of the page?)

I thought we decided that all of the lesson should be shown without scrolling and people who wanted to see less could click prerequisites only.

Similarly, we decided that instead of seeing the words "Standards" we would see "CSTA standards" and they would be populated by default. Mousing over CSTA standards would reveal other options to select from.

I'm unclear on how the textbook alignment is supposed to work if a lesson aligns with lesson from IM and CMP.

Strangely, today, this MP badge is totally legible... and it's kind of a nice splash of color, as originally intended...

Finally, Rachel asked repeatedly to figure out how to get the sidebar to blend in more. I don't care if it's white or grey, but can we make the whole sidebar one color? (ie. the lesson list should be the same color as the rest of the side bar and probably doesn't need a box around it at all).

Hope that helps. Happy to discuss. Not standing on any hills yet.

[schanzer]

@flannery-denny

1. The narrative pages have never had the toolbar or header when building on your machine. Those are added by the webserver, and show up when the page is viewed from www.BootstrapWorld.org. Similarly, all the lessons build without the header. The whitespace is the same as it's always been. Maybe you just didn't notice it before?

2. We agreed that the toolbar would stay anchored on the lefthand side of the screen, and not scroll with lesson content. But that's not how the website toolbar works: it always scrolls with page content. If the lesson toolbar looks like the site toolbar, it's going to be quite strange when they behave differently! We have three choices here:

• Change the website so the toolbar never scrolls
• Let the lesson toolbar scroll, which means teacher won't see it once they scroll past the summary table
• Allow the toolbars to look different, so that users do not expect them to behave identically.

I prefer the first, followed next by the third. I think the middle option is the worst of all worlds.

3. Replacing the standards box with a dropdown isn't something I know how to do. This one is in @ds26gte 's court.

4. I've made the color uniform (green like the regular toolbar) and removed the boxes. The lesson table should also probably drop the green column and replace it with purple, because there's way too much green on the page when you first load a lesson. But honestly, I don't love the box-less look. I think it's less clear what the "prerequisites only" button does, since there's no visual grouping in the toolbar.

(I also hid the badges section, since we're planning to overhaul it anyway)

[flannery-denny]

@schanzer - While I don't think we're done, I think this sidebar looks much better! And I think the stars from the expanded view will draw people's attention to the prepreq only checkbox.

1. I don't understand your response to the white space. It doesn't look to me like the header from this page will be able to fit in the horizontal space at the top of the images of the new lesson plan format above. Are you envisioning any of it appearing there?

2. If there's no boot in the top left, how do you expect people to navigate back to home from the lesson plan?

3. I didn't understand your 3 proposals in number 2 in the comment above. I'll add it to the agenda for Tuesday so you can share screen and show us what you're talking about.

[schanzer]

@flannery-denny 1: The screenshot of "what you were expecting" surprised me, because nothing has changed here. There's always been a blank space at the top and to the left of the narrative page when you build locally, and that's not going to change.

2-3: I've been working all day on something I think you'll like. I hope to have it done tonight.

[retabak]

Hey! Sorry I've been MIA.

There's a LOT going on in this thread and it's hard to figure out what to respond to. Eager to discuss on Tuesday. There are many many different things being considered in this sidebar revamp.

Some general thoughts:

• I think the box-less sidebar looks WAY better. I think I might prefer it in white, but the green is a big improvement.
• Do the standards need to be in a box? Also, when I click a standard, it shows up with a white background (which looks awkward on the green background). Also - can we single space the standards and shrink the font? They take up a ton of space. I don't think anyone is actually reading those standards word for word anyhow. (As I teacher, I'd scan and think to myself, "Cool, it's the EE standard about variables" - then get on with lesson planning.)
• Re those 3 bulleted options offered by @schanzer : I think I would prefer the 2nd option (let the lesson toolbar scroll, Emmanuel's least favorite option). That said, I'm not sure I totally understand all of the choices.
• As @flannery-denny mentions, I was expecting / hoping to see our Bootstrap header and the boot in the top left - and for the toolbar NOT to go all the way to the top of the page. (Sounds like you're working on this already, @schanzer ?)
• As @flannery-denny mentions, the textbook alignment piece in the toolbar is, at the moment, very confusing. There's often a mix of number identifiers (i.e. IM.8.3.11) and lesson titles with words (i.e. "Write Expressions Where Letters Stand for Numbers"). I do not understand what's going on and, as a teacher, would not find it useful. I suspect this might be something to discuss with Dorai. (I wonder @flannery-denny if we gave confusing instructions about wanting to include lesson titles so now we just have both?)
• Perhaps we could consider actually linking directly to the IM lesson? (Does CMP have lessons that we could link to as well?) This feels much more useful and intuitive than a random list of unit/lesson numbers.

Perhaps not TOTALLY connected to this sidebar issue, but: what did we decide on centering website content? I remember some reason we couldn't do this? Finding myself more bothered lately that the right half of my wide screen is just white space when I look at our content.

Oh, one more thing! I don't think it is obvious what that "prerequisites only" checkbox does. I know, I know. You're thinking, "Everyone knows what 'prequesite' means. What else would that checkbox do?" That said, your average teacher / website visitor will not assume that our curriculum allows for 'mixing and matching'--and they'll just ignore that checbox. (I didn't notice the checkbox until like 3 weeks ago?) That checkbox is also the only thing on the toolbar that seems to respond to whatever lesson is currently selected, which is definitely not obvious. I think teachers might think those lessons with stars are prerequisites for the entire curriculum.

I know there's a hesitation to add stuff to the lesson table, but I think it would REALLY highlight for folks that they can pick and choose from our stuff if there was a row in the table that said, "before teaching this lesson, your students must master: X, X, and X." I propose that we ditch the "preparation" row (which I find quite useless and redundant) and stick this other much more important row in its place.

[schanzer]

Thanks to some heroic programming by Dorai, I was able to spend tonight styling the sidebar as a replacement for the website sidebar. To view the full version (which has the top filled in, unlike the local version @flannery-denny was pointing out), click here.

@retabak I want to get your take on this before I reply to your other issues. We can do that in our meeting tomorrow.

[schanzer]

Now that we have separate, smaller issues for the remaining work, I'm going to close this. If @retabak or @flannery-denny object, feel free to re-open. Bear in mind that we can always look at closed issues, so this conversation is still stored for posterity!