I'm using the stepped navigation feature for a module. For some sections, I'm connecting several blocks, e.g., a header + text and video or interactive image. When I preview the module and click the down arrow to advance to the next section, these connected blocks don't act like they're connected. It's like they are each a separate step. Working in reverse - clicking the up arrows to go from the end to the beginning - works a little better but still some connected blocks act disconnected.
It's an odd user experience....is this normal? Anything I can do about it?
If the blocks stretch over a 'page' then you can get a stepped effect, not sure there is any fix apart from reducing padding and getting them to sit on a 'page'
What is a "page" in this context? Right now it's acting as if page = 1 block/element. Anything more creates the stutter step user experience.
Here's one example - also attaching a screenshot.
For this section, we're connecting 2 blocks to create one "step": a header + text (minimal text) and a video (display set to small) with a video caption (1 link). No padding on anything.
We get this behavior: Click arrow to advance from previous section. You see the full content (desktop view) and think, ok, I'm done with that step, now I'll click the arrow to advance to the next step. Instead, you get a teeny jump that gives you the same view, just down a millimeter or so - feels like an error, like, oops I must not have clicked that right. You need to click the arrow a 2nd time to advance to the next "step" of the nav. And yet...it works totally fine when you work in reverse. You can move back up from step 5 to 4 to 3 with no stutter step behavior or double clicking of arrows. The only workaround I found is to remove the caption under the video, which was only 1 link and an important one (video transcript for accessibility).
The other section where we feeling the pain of this behavior is a section where we combine 2 blocks: header + text block with a flashcard stack. No padding anywhere. In this case, the stack card feature comes with a significant amount of top padding which is unnecessary but we can't control it.
Thanks so much for sharing that context! The behavior you're seeing is expected when viewing Microlearning from a smaller browser window. The "next" arrow will always reveal the bottom of the step before moving on to the next step to ensure the learner doesn't miss any critical content you've included in that step.
3 Replies
If the blocks stretch over a 'page' then you can get a stepped effect, not sure there is any fix apart from reducing padding and getting them to sit on a 'page'
Thanks for responding, Phil -
What is a "page" in this context? Right now it's acting as if page = 1 block/element. Anything more creates the stutter step user experience.
Here's one example - also attaching a screenshot.
For this section, we're connecting 2 blocks to create one "step": a header + text (minimal text) and a video (display set to small) with a video caption (1 link). No padding on anything.
We get this behavior: Click arrow to advance from previous section. You see the full content (desktop view) and think, ok, I'm done with that step, now I'll click the arrow to advance to the next step. Instead, you get a teeny jump that gives you the same view, just down a millimeter or so - feels like an error, like, oops I must not have clicked that right. You need to click the arrow a 2nd time to advance to the next "step" of the nav. And yet...it works totally fine when you work in reverse. You can move back up from step 5 to 4 to 3 with no stutter step behavior or double clicking of arrows. The only workaround I found is to remove the caption under the video, which was only 1 link and an important one (video transcript for accessibility).
The other section where we feeling the pain of this behavior is a section where we combine 2 blocks: header + text block with a flashcard stack. No padding anywhere. In this case, the stack card feature comes with a significant amount of top padding which is unnecessary but we can't control it.
Overall, it feels a little buggy to me, you know?
Hi Naeemah!
Thanks so much for sharing that context! The behavior you're seeing is expected when viewing Microlearning from a smaller browser window. The "next" arrow will always reveal the bottom of the step before moving on to the next step to ensure the learner doesn't miss any critical content you've included in that step.
To show you what I mean, I recorded this short 1:30 minute video for you. Please have a look at that video, and let me know if you have any questions about it!