Wizard interaction with the Sidebar could be improved

Support Discourse Custom Wizard
, ,
1

With the wide uptake of the Discourse Sidebar, I wonder if it is time to revisit the layout of Wizards.

Currently, a Wizard will remove the header and display over the whole page. With the sidebar disabled, that works quite well:

No sidebar

image
image925×434 37.7 KB

With the Sidebar

However, when the sidebar is active, it isn’t so nice. Note that as the header is missing, it is no longer possible for the user to hide the sidebar (‘hamburger’ is not there). Also the sidebar moves up, which creates an unpleasant jarring effect (click /w/bug-report to see what I mean):

image
image917×549 53.3 KB

This gives us

  1. Poor presentation
  2. Distraction from the wizard
  3. Incomplete ability to navigate

The last 2 are always in tension, and we really need to choose focus vs. navigation. At the moment with the Sidebar we’ve got the worst of both worlds.

Suggestions

I think that we should address this in some way as it isn’t great on sites with the sidebar active.

Option 1

Hide the sidebar when a Wizard is displayed

Would keep things nice and clean, and the user focussed completely on the Wizard

It restricts the user from navigating the site, which in some situations is helpful but in others is unhelpful.

Option 2

Display the header and the sidebar when a Wizard is displayed

Would solve the primary UX problem, and allow users to navigate if needed (or Log in / Sign Up)

However, It makes for a busier Wizard page with the potential for the user to be sidetracked.

This would help us on coop.pavilion.tech by allowing users to login directly from the Bug Report Wizard if needed

2 Likes
2

Great idea. In general, I would prefer to see the header and sidebar so the wizard feels like it’s just another part of the site and not something separate. But in some situations, a clean wizard would be nice, so ideally, it would be an option for each wizard to turn the header/sidebar on and off.

2 Likes
3

I’ve thought that this could be controlled with a Wizard theme, but I can’t seem to get my theme changes to apply.

Anyone else noticed an issue with Wizard themes?

4

Yes, I noticed that themes in wizards stopped working quite a long time ago.

1 Like
5

I’ve got a workaround for this now:

// hides sidebar when a wizard is running (put in Desktop CSS)
body.custom-wizard.has-sidebar-page {
    #main-outlet-wrapper {
      grid-template-columns: 0 minmax(0, 1fr);
      gap: 0;
      padding-left: 10px;
    }
    .wrap {
      max-width: var(--d-max-width);
    }
}

Would this be useful simply inserted as a Desktop stylesheet into the CWP?

@development_team - can you please confirm if wizard themes are working or not? They don’t appear to for either of us.