Possible Manager Improvements...

Hi There,

I’ve had a chance to spend some time with Revolution over the past few weeks and think things are awesome - can’t wait for the GA release, nice work! I know others have mentioned the ’sticky’ nature of the manager interface, but I understand there’s optimization yet to be done.

The thing I did want to mention is how the interface somehow feels like lots of little clicks and little waits when getting around it - despite having been clearly improved. Maybe because it’s better we expect more, if that makes sense. With the new interface, I was hoping it would display several different data sets at once as many times in the past, I wished I could’ve seen a list of template variables while editing a chunk/ditto call - as an example.

With that in mind, I spent a couple of hours figuring out ways of doing this and came up with a few visuals.

Firstly, I would LOVE the ability to do all this myself, but unfortunately:
$designer = "Has only HTML & CSS experience and almost no PHP experience";
echo $designer;

I’m keen to learn how and although people in the forums have suggested places to get started, it’s pretty confusing figuring out how Modx fits all this together when you don’t have much of a clue!

Anyway, on to the visuals - things to note:
- The visuals are wireframes with a bit of shading, just to show layout.
- They are 980px w X 700 h but even though I included the dimensions in this post, they’re showing up small for some reason
- Some of the buttons have been duplicated to simply show that buttons should go in a particular place

First Screen - After Login
Things to note:
- The two columns on the right would be accordions that would be activated with clicks (not rollovers) and...
- Would adjust to fit your monitors height and stay with you as you scroll down the page (unless that becomes too annoying)
- These could be swapped so they’re on the left but it looked a bit overwhelming (from a client’s point of view)



I thought it might be good to reorganize the document-specific tabs on the left side, hiding all the developer stuff like template variables, cache, content type etc under ’Advanced Settings’.

Having the initial page info like ID, template, title as an accordion might also be useful as once that info has been set, it could be collapsed, leaving the user to focus on content (in the little visual it has been collapsed just above the rich text area). This functionality could also be extended to each Template Variable so long as it didn’t get annoying and the manager remembered what you’d opened and what you’d closed.



Second Screen - Development
Things to note:
- This stuff could be turned off for clients
- The developer items repeat in both columns so you can always view a full list of what ever you want
- Being able to filter the lists and create new items would be really useful on the big jobs
- Drag & drop functionality might also be good...
- Particularly when assigning template variables to the ’Assigned Template Variables’ document tab on the left
- The little ’COPY’ links next to the TVs or chunks in the columns would make copying to a web editor for template insertion easier



It seems a bit weird to have all the developer stuff repeated in both columns but I soon realized it would be useful to have the ability to display two full sets of data no matter how big your screen was. If items were divided between the two columns, I’m sure there would be a time when you wanted to see two full lists of different items but couldn’t because the items were in the same column - if that makes sense.



Third Screen - Development
If you clicked an item in one of the columns on the right (like a template variable) or clicked the new button beside the search filter, you could then edit/create it on the left - that’s all this screen really shows!





Forth & Fifth Screens - pie in the sky stuff
Ideally, this is how I’d prefer to have clients edit content but I’m assuming it’s difficult to do as I’ve only seen it work properly in Squarespace - I’ve found that clients LOVE this kind of functionality btw.







I realize this is all probably impossible without someone who can code it all but I’m willing to help out any way I can. See what you think, any dumbed-down pointers or an overview of how and where Modx makes this stuff available to the manager for customization would be appreciated as I’m having a hard time deciphering it all!

Cheers

Ben

Blown away - this is how I would love to see the manager on Revo

First class work!

Great work Ben indeed. The front end editing is very similar to the way the old QuickEdit worked actually. Have you seen the QuickManager implementation in Evo?

Quote from: cms at Nov 10, 2009, 03:10 AM

I wished I could’ve seen a list of template variables while editing a chunk/ditto call - as an example.

You can - simply edit the call, and click to the Elements tab in the left side nav. Then open up the TVs node. Is that what you mean?

- The two columns on the right would be accordions that would be activated with clicks (not rollovers) and...

Accordions for Elements (the right side) was the behavior pre-beta4; it was vehemently shot down by the community (with good reason) and replaced with tabs.

- Would adjust to fit your monitors height and stay with you as you scroll down the page (unless that becomes too annoying)

Having the tree be fixed is a neat idea.

I thought it might be good to reorganize the document-specific tabs on the left side, hiding all the developer stuff like template variables, cache, content type etc under ’Advanced Settings’.

One thing; TVs are not "developer stuff" in a lot of designs; most designs actually use TVs extensively. Plus, I’m not sure your comp makes sense with that statement - you seem to put the TVs into editing panels below this.

So my thoughts on this first page:
1. All the panels, currently in Revo, are collapsible. They aren’t stateful *yet*, but could be made to be stateful. Same with the right-side tabs on statefulness.
2. Your right-side stuff is too *big*, in my opinion. Most sites are going to have some pretty deeply-nested Resource trees - not just one or two levels deep. The right-side panel in this comp doesn’t adjust for that. Same thing with the Files panel. And Revo also allows you to nest Elements Categories; this comp wouldn’t support that visually, it seems.

- This stuff could be turned off for clients

That can already happen, either through ACLs or Form Customization.

- The developer items repeat in both columns so you can always view a full list of what ever you want

While a neat idea, imo, this would create quite a bit of overhead. That means 2x time loading those trees - a lot of data.

- Being able to filter the lists and create new items would be really useful on the big jobs

Filtering is a neat idea - but may be tricky. Filtering heirarchical items is never as simple as it first sounds.

- Drag & drop functionality might also be good...

It’s already in Revo. You should try it sometime.

- The little ’COPY’ links next to the TVs or chunks in the columns would make copying to a web editor for template insertion easier

This is unnecessary - any tree node can already be dragged into any field already in Revo.

It seems a bit weird to have all the developer stuff repeated in both columns but I soon realized it would be useful to have the ability to display two full sets of data no matter how big your screen was. If items were divided between the two columns, I’m sure there would be a time when you wanted to see two full lists of different items but couldn’t because the items were in the same column - if that makes sense.

It does; but if we’re talking about *reducing* overhead in the manager, it’s a bad, bad idea. Like I said above, that’s asking 2X as much requests to the manager to get that data for those trees. So 2X as long of a load time.

The FE editing stuff is nice - I would recommend first checking out QM+ in Evolution. It does FE editing the best way, in my opinion.

A few things you might want to check out in Revo, first:

1. Try drag/dropping in the current trees. You’ll notice you can rearrange, etc, straight from the trees.
2. Try drag/dropping a Resource, then an Element, into the content field (or any other field) in a Resource. Try installing Quip and drag/dropping it, and watching the Tag Builder do it’s magic.
I put up a video a ways back: http://modxcms.com/assets/videos/dragdrop.mov (note though, that this is for beta3; the UI’s changed a little bit since then.)
3. Try using Quick Update/Create. You’ll start to love them.

There’s lots of other features in Revo I think you might have missed, but let’s start with that.

All that said, thanks for taking the time to draft up some comps. We’ll definitely look into some of the things you’ve suggested here. Thanks!

I thought it might be good to reorganize the document-specific tabs on the left side, hiding all the developer stuff like template variables, cache, content type etc under ’Advanced Settings’.
One thing; TVs are not "developer stuff" in a lot of designs; most designs actually use TVs extensively. Plus, I’m not sure your comp makes sense with that statement - you seem to put the TVs into editing panels below this.

Sorry, when I say developer stuff, I’m speaking from a client’s point of view, which means I just want to focus on content and things like publish/unpublish dates, SEO and maybe user permissions. On a daily maintenance basis, I was just wondering if things like Cacheable, Empty Cache, Content Type, Content Disposition etc could be moved to an advanced tab. As for the Template Variables tab, maybe I don’t understand why all the content is tucked away in this tab and not upfront like it is in Evolution - seems like more clicking?

1. All the panels, currently in Revo, are collapsible. They aren’t stateful *yet*, but could be made to be stateful. Same with the right-side tabs on statefulness.

I think you’re right, adding ’states’ to the tabs will be useful - once you collapse a tab though, how to you get it back - currently my resources tab is stuck closed!

2. Your right-side stuff is too *big*, in my opinion. Most sites are going to have some pretty deeply-nested Resource trees - not just one or two levels deep. The right-side panel in this comp doesn’t adjust for that. Same thing with the Files panel. And Revo also allows you to nest Elements Categories; this comp wouldn’t support that visually, it seems.

No worries. I realize I haven’t spent much time in Revo and that all this stuff has probably been discussed (and hen-pecked) by the community. I have found that the extra layer of clicking just to see a list of templates, or TVs has quickly become tiresome. Maybe the two accordions are switched for two tab panes with 3 tabs each giving a total of 6 lists that can be as long as you want - all one click away. I’m hoping that states will help a lot.

Filtering is a neat idea - but may be tricky. Filtering heirarchical items is never as simple as it first sounds

Well, I know nothing regarding the mechanics of doing this. Just to be clear though, whenever I’m filtering a list, I only expect to see a list of items that match and don’t expect the hierarchy to stay intact - unless you were saying that filtering a hierarchy is tricky to begin with, never mind what to do with the output?

This is unnecessary - any tree node can already be dragged into any field already in Revo

I was thinking if a quicker way to get TVs and Chunks into an external editor as I rarely edit the HTML in Modx.

It does; but if we’re talking about *reducing* overhead in the manager, it’s a bad, bad idea. Like I said above, that’s asking 2X as much requests to the manager to get that data for those trees. So 2X as long of a load time.

I’d thought it would just load the equivalent of the ’Combined View’ of the ’Manage Elements’ window in Evo and then repeat it : ) As you can see, I don’t really understand the mechanics of how this works!

The FE editing stuff is nice - I would recommend first checking out QM+ in Evolution. It does FE editing the best way, in my opinion

As someone who spent 3 months trying a lot of different CMSs last year (before settling on Modx) the FE editing in Evolution is OK - it just loads a list of TVs in a window (unless I’m not looking at the same thing). In terms of FE user-friendliness, Squarespace is easily the best thing I’ve used (and still use for smaller sites). I’ve noticed Concrete 5 and a few local web development companies implementing similar editing. If you haven’t already done so, I’d highly recommend signing up for a 2 week trial at: www.squarespace.com. The hosted model doesn’t work for everything but the way they’ve implemented content editing is a cut above.

1. Try drag/dropping in the current trees. You’ll notice you can rearrange, etc, straight from the trees.
2. Try drag/dropping a Resource, then an Element, into the content field (or any other field) in a Resource. Try installing Quip and drag/dropping it, and watching the Tag Builder do it’s magic.
I put up a video a ways back: http://modxcms.com/assets/videos/dragdrop.mov (note though, that this is for beta3; the UI’s changed a little bit since then.)
3. Try using Quick Update/Create. You’ll start to love them.

All these things are fantastic improvements over Evolution, as I said initially, I can’t wait for the GA.

There’s lots of other features in Revo I think you might have missed

Agreed.

Cheers

wow, the visuals look awesome congrats!

Quote from: cms at Nov 10, 2009, 01:30 PM

This is unnecessary - any tree node can already be dragged into any field already in Revo

I was thinking if a quicker way to get TVs and Chunks into an external editor as I rarely edit the HTML in Modx.

It might be a little faster than Ctrl-A, Ctrl-C, Ctrl-V, but probably not enough to justify the overhead.

I’m sure a slick little query add to clip board (even if it has to go through a swf ((for firefox))) would be a really decent single button next to the content pane. Don’t recall a similar single click paste (Ctrl A)(Ctrl V) action before.

These are both doable within the current framework -- with very little overhead. To select text on focus, a simple:



I hate ALL on-line html editors and only use local ones -- even if it is vi or emacs.

I don’t mind the Cntrl A, Contrl C, Contrl V, edit text, Contrl A, Control C, Control V, Save....

Through cutting a few key presses would certainly be nice...

Adding to clipboard can no longer be done due to Flash 10 security standards breaking the SWF workaround. Browsers also disable clipboard copying for security reasons.