At DrupalCamp TC, @quicksketch walked me through the Panels that got merged into Backdrop (they started with D7 Panels and then made changes). One of the biggest changes that they made was a vastly simplified Page Manager UI that still held all the same functionality (because it's the same underlying code). Anyway, it looked nice, and I thought we should consider using a similar UI!
So, the Structure -> Pages ("Layouts" in Backdrop) showed the pages and variants together in one list:

So, rather than editing the page and seeing the variants as the top-layer of vertical tabs, you pick the variant to edit right from the listing page.
Each page has one or two buttons, either "Edit" and "Reorder" or just "Reorder" when taking over an existing path like /node/:node.
And each variant has a multi-button with "Edit", "Clone", "Delete" and possibly one other that I'm forgetting now.
Then when you click to edit a variant, the first thing you see is the "Content" tab (in D7 Page Manager terms) and everything else is normal Drupal tabs (rather than a 2nd layer of vertical tabs):

What impressed me about this was:
- It entirely gets rid of the classic D7 Page Manager interface which has waaay too many tab-like things in every direction, and instead used UI idioms that are more consistent across Drupal
- While still fitting in ALL the functionality of Page Manager, since it's a direct port of D7 Panels and Page Manager. Any "blue sky" thing that we might come up with, will be awesome -- until we realize some feature is missing and we'll wonder "how do we squeeze that in there?" Well, this UI already has everything, so we don't have to worry about that.
| Comment | File | Size | Author |
|---|
Comments
Comment #1
dsnopekFixed type-o's.
Comment #2
japerryScreenshots... So I do like the simplified context and visibility selection. I don't like where menu settings ended up.
Adding a new page/panel/layout: its somewhat all combined.
Comment #3
dsnopekThanks @japerry! I've updated the issue summary for the screenshots.
Comment #4
dsnopekOops! Got one of the screenshots wrong.
Comment #5
dsnopekUpdated the IS to try and put a finer point on why I like this UI. :-)
Comment #6
saltednutAside from "Add Layout" on this page, which I assume for page_manager is still, "Add Page" what would we improve upon or change about this?
I do agree with a lot of what is going on from Backdrop in reducing the number of steps to get to the "Content" page, etc.
Comment #7
dsnopekI think the main thing that we'd do differently is that creation of a new page would be a multi-step form (ie. wizard), whereas Backdrop puts it all on one big form:
In the same way, Backdrop has a single "Settings" tab with all the non-content stuff on it:
Whereas we'd want to have multiple tabs for each bit, like: "Menu", "Conditions", "Context", "Layout"
Comment #8
Crell commentedWhy would we want to have a wizard? The wizard part of Page manager/Panels is one of the more complicated bits, precisely because you're asked to think about stuff that you don't understand until later. (Unless you've already grokked it and now you know what's coming, which is not helpful for new users.) An interface that emphasized incremental reveal and "don't expose it until you need it" would be a better fit.
I've not used Backdrop so I can't say how well it fits that bill, but let's not get hung up on wizards. They're easy to turn into a terrible terrible thing. :-)
Comment #9
dsnopekWhat we really mean by "wizard" is having multiple forms to edit a single variant - those could (and probably should, for UI consistency) be represented as normal Drupal tabs when editing the variant. In the Backdrop example, you can see that it's broken up into "Settings" (which is like "Layout", "Context" and "Menu" in D7 Page Manager combined) and "Edit layout" (which is like "Content" in D7 Page Manager).
Here's the general problem from a low-level architecture stand-point:
ConfigurablePluginInterface, but returning a set of formsSo, I guess I would say, just pretend we didn't call it the Wizard API. :-) It's really about the fact that we'll need multiple forms to edit a single variant, and what those forms are should be entirely invisible to Page Manager, because they are provided by the variant.
All that said, we could choose to divide up those forms in different ways in D8 than we did in D7. However, I'm not sure how we'd combine "Layout" with some of the standard things like Backdrop did, because Page Manager shouldn't care if the given variant provides a "Layout" form or not.
Anyway, I hope that makes sense!
Comment #10
dsnopekLinking to the "wizard" issue since I've updated it with the comments I made here: #2550879: Use CTools Wizard API to add/edit Pages (and move plugin UI using PluginWizardInterface)
Comment #11
Crell commentedExpanding the discussion a bit, there's I think 2 ways to approach this problem.
1) The user should go through the process in the order that the code does. Ie, define a route first, then select what type of thing to put there, then configure that thing. In this case, we should be honest about what the user is doing. That is, Page_manager is really a UI for creating routes. So, use the word "route". Don't call it a page, call it a route, and then select the type of route: A Panel route, an HTTP route, a Node route (essentially duplicates /node/X), a JSON/REST route, etc. As we learned from trying to call taxonomy "Categories" in ancient versions of Drupal, trying to hide what's going on behind what we think a user's assumption is tends to backfire badly, as it robs the user of a learning experience.
2) Flip it around completely. First have the user create the thing (Panel, HTTP responder, Node, REST, whatever). Then, and only then, ask "OK, so where do you want to put it?" This is somewhat more how Views works (although Views conflates these two steps as well).
Both of those are very viable approaches, although have extremely different implications for how things like Context or variants get defined. I'm not sure which one is better, to be honest. However, I do believe that trying to complect "what this thing is" and "where it goes" is the source of a lot of confusion around Page_Manager/Panels. "What" and "Where" are legitimately different things. Don't try to paper that over to the user. (Having both just be different tabs in a long list does paper that over, which IMO is part of the problem.)
Comment #12
dsnopekre #11: Hm. Option 1 sounds a lot like what Page Manager in D7 does in it's creation "wizard". First you set the path and select the variant type, then the following steps come from the variant (if you didn't select any of the checkboxes for the other standard steps -- ignoring that for a moment), so in the case of the Panels variant it shows you the layout selection form, and then the content placement form. How is what you're describing different? And how is a multi-step form a bad fit for that?
I think I might have muddied the waters a bit in my last comment by not making a distinction between the add and edit experience. When adding a new page, you'd be guided through each form in turn (assuming the next form applied based on selections you made on previous forms). But when editing an existing page, they could be shown as normal Drupal tabs (as opposed to some magic page_manager tabs, like they are in D7).
However, I totally agree on calling these "routes" rather than "pages". In Drupal, creating a Node is also creating a "page" and it's quite confusing explaining to site admins what makes these pages special. Maybe page_manager could live under "Structure" -> "Custom routes"? That should be it's own issue, though...
Comment #13
Crell commentedYes, and with the add/edit conflation like you describe, it becomes a wizard and not necessarily a very clear one. :-) We know that the D7 UI model doesn't work, from experience. Perhaps we should try thinking in an entirely different model?
Per the last paragraph in #12, I'll make a radical statement and suggest that perhaps "page manager" is not even the right name for this module... :-)
Comment #14
saltednut+1 to these not really being "pages" and page_manager being a strange name for the module. Its true that those who know page_manager know how to use it... but very few of those people exist. I often have a lot of difficulty explaining page_manager to folks as they typically only understand the whole system as "Panels" and don't distinguish between the different sub-systems.
Comment #15
Crell commentedSounds like we need some formal UX input on the "route then panel or panel then route" question. That's rather core to the UI interaction, and will impact everything else that gets done. We need to make sure to get that right. :-)
Comment #16
dsnopekre #15:
Well, for the complete rethinking of the Page Manager UI and formal UX research, I think we should create a new issue.
Personally, my goal for this issue was seeing if we could take the incremental simplification that the Backdrop team has done to the UI (ie. reducing to the normal amount of tabs in Drupal - not the "special tab bonanza" that D7 Page Manager has), and use that for now. At the moment, we simply need some UI that includes all of Page Manager's features so we can start doing stuff. :-)
Of course, we could port the Page Manager UI from D7 as the first pass (which would be the natural thing to do), but I was hoping that taking what Backdrop did would be an easy, quick win - if only an incremental improvement.
That said, Page Manager definitely needs a complete rethinking! But I'd like for us to be closer to feature complete in less time than that will take...
Comment #17
dsnopekI created two new issue for the spin-off discussions from above:
Comment #18
eclipsegc commentedSo, since I've been down this road quite a bit over the course of the last 4+ years, let me share some of my own feelings and insight on this problem space.
1.) Let's start with backdrop's screen shots and why they don't work.
It's a great idea, it really is, but am I the only person noticing a distinct lack of "update" vs "update & save" style approach. I know MANY people HATE this in page_manager, but it's kind of essential if you don't want to show the panel/page/variant/whatever while you're working on it to live traffic.
While separation of these UIs could probably be done, keep this particular wrinkle in your mind as you think about it because it's SUPER important and I think largely removes this UI approach from feasibility pretty quickly.
2.) Responding to #11
Page Manager absolutely does 11.1, and this is with great forethought and purpose, because 11.2 is REAAALLLLY ridiculously hard for something as robust as Page Manager & Panels. Imagine, if you will, willy nilly placing blocks in some layout with no regard for the required contexts of those blocks and then trying to wire together the required contexts into those blocks later. I'm not convinced this approach is workable in any sense since it functionally doubles the effort for all contextual blocks (bare minimum) meaning the very workflow you wanted to streamline is now more obtuse than before. This is why Page Manager's wizard allows users to opt into various sections of the wizard during creation allowing a knowledgable user to opt-in to the behaviors they know they want to leverage.
In short, I'd LOVE to have a long honest technical conversation with a UX person devoted to the job. This has happened a couple of times in the last 4+ years, but truthfully, the project is really really big, and it needs more than volunteer efforts and community funding. I would REALLY vote for a 1 to 1 straight port of Page Manager into D8. If we want to rename it "Route Manager" meh, I get it, but meh.
Eclipse
Comment #19
mustanggb commentedCould it not be achieved with a similar workflow to that which views uses?
i.e. auto-update when changes are made, save to commit changes live, cancel to undo changes and revert to original live version
Comment #20
eclipsegc commentedGiven the multi-page nature of the system, I think we'd find that difficult. Views benefits from a UI that while complex, is still single page. This makes such behaviors easier to implement and communicate to the end user. Technically, this could be pretty doable, but I worry about communicating it to the end users. I tend to suspect they'll hit "save" a lot when they really mean "tempstore save".
Eclipse
Comment #21
Crell commentedTalking without thinking here: Is there a reason that PageManager couldn't use a Views-inspired single-page approach? Views is complex, but the UI at this point is pretty solid. It could communicate the "what, how, where" split more cleanly but it's still pretty good, and much more approachable than Page Manager. Its create wizard is also much much much simpler, which is fine.
Comment #22
eclipsegc commentedI'm sure we CAN. But we need dedicated resources for working through that before we're going to have answers about whether or not we SHOULD. I'd love to do that long term, short term I'm more interested in a straight port.
Eclipse
Comment #23
dsnopekCould we take the discussion of new interfaces for Page Manager that aren't the proposed Backdrop interface to #2561341: Formal UX rethinking of the Page Manager UI?? Or maybe we need a "make UI Views-like issue"?
Comment #24
eclipsegc commentedOk, then I'm closing this issue.
Eclipse