Lessons - Consider moving Take Quiz button above Complete Complete button

[kathrynwp]

Issue

"Take Quiz" button could be overlooked.

Detail

A learner has reported that they did not notice the "Take Quiz" button, and they completed the lesson without taking the quiz. This resulted in a 0% grade for the quiz.

Suggestion

Could we move the "Take Quiz" button above the "Complete Lesson" button, or otherwise make it more obvious?

Other

I set this to the post-launch milestone as only one learner has reported this issue so far.

[adamwoodnz]

Wow I'm struggling to see how it could be more obvious in that blue! Jokes aside it is using the primary button style which is supposed to make it the most obvious next step. 'Complete lesson' is using secondary. Swapping them could be an option.

@WordPress/meta-design ?

[fcoveram]

From the screenshot attached, I can't understand the user flow related to this report.

The "Take quiz" button is placed without context. It's not clear what the quiz is about, how much filling it out might take, and any additional info before clicking on it.

Missing the action could have been related to the lack of info rather than the button style, which the primary one in blue has sufficient contrast to be noticed and doesn't need to be changed.

[kathrynwp]

From the screenshot attached, I can't understand the user flow related to this report.

I believe the learner is supposed to complete the quiz before completing the lesson. @jonathanbossenger @westnz - could you please confirm?

In this learner's case, they clicked "Complete lesson" without taking the quiz, resulting in a grade of 0% for that quiz.

Since the "Complete Lesson" button is to the left of the "Quiz" button, and since English is a left-to-right language, perhaps this is part of the issue?

[westnz]

Swapping them could be an option.

This sounds like a good solution

I believe a quiz makes sense within the context of individual lessons. We want learners to use a quiz to test their knowledge, but you can complete the lesson without completing the quiz. Some adult learners don't want to be blocked by quizzes and work through the content at their own pace. Some people might only want to complete one module as they may already understand some other content within the course. I like the idea of swapping the buttons to make it stand out more.

[adamwoodnz]

To clarify; by 'swapping them' I meant swapping their position, rather than swapping the primary/secondary style. Is that what you understood @westnz ?

[westnz]

Yes, that is what I understood 👍

[adamwoodnz]

What do you think about moving the primary action 'Take quiz' to the left @fcoveram?

[kathrynwp]

@adamwoodnz I like what I see in your screenshot! We really want learners to take the quiz before clicking the button to complete the course (so they don't end up with a 0% grade) so moving it to the left makes a lot of sense to me.

[fcoveram]

The change looks good 👍

[jasmussen]

Separate note on the screenshot here, and I think I've recorded this as feedback somewhere in the repo. Content-wise we need to update that text-highlight style (the optional exercise). That italic doesn't look great (faux italic?), and the colors and left border are part of legacy styles.

[adamwoodnz]

Separate note on the screenshot here, and I think I've recorded this as feedback somewhere in the repo. Content-wise we need to update that text-highlight style (the optional exercise). That italic doesn't look great (faux italic?), and the colors and left border are part of legacy styles.

These are using the Callout block, and need to be migrated to the new Notice block. I'm not sure the best way to communicate this, content team?

For Dev Resources we did add some styles to make callouts look more like notices, I'll take a look another look at that and see whether it could be shared or if we could find a more global solution.

[jasmussen]

Whoever might take it, there are some designs here that would would work fine.

[kathrynwp]

@adamwoodnz Heya just wanted to double-check so I miss something, is there anything you need folks manually update across lessons, i.e. moving text from Callout to Notice block? Or is this something that will be migrated on the dev side?

[adamwoodnz]

@adamwoodnz Heya just wanted to double-check so I miss something, is there anything you need folks manually update across lessons, i.e. moving text from Callout to Notice block? Or is this something that will be migrated on the dev side?

I think maybe the solution will be adding styles that update the appearance of the callout blocks, but from now on we should cease using them, and if we're updating a lesson then copying the text into a notice block would be ideal.

[westnz]

Thanks Adam, I agree!

[adamwoodnz]

@adamwoodnz Heya just wanted to double-check so I miss something, is there anything you need folks manually update across lessons, i.e. moving text from Callout to Notice block? Or is this something that will be migrated on the dev side?

Callout blocks are now rendered as Notice blocks, so there is no need to go back and convert older content. However for new content use Notice blocks, or if you are updating old content converting to Notice blocks is ideal.

cc @westnz @jonathanbossenger

[westnz]

Many thanks, @adamwoodnz ⭐