Two column admin theme concept

[szabesz]

@Tom: Thank you for the effort! I hope that your ideas and work will pay off and they will be picked up by the community so that we can have an even better admin in the future. The general issue is that the admin interface is used for both development (by the devs, of course) and for content management (by site administrators). When developers try to mix the two, they will most certainly design something that is more for development then for content management as this is the case with ProcessWire.

Do not get me wrong, I think ProcessWire has a nice admin interface, but there is a lot of room for improvement regarding content management. (And regarding the aid of development too, see for example Soma's HelperFieldLinks module, but that is a bit off topic here.)

[LostKobrakai]

I just want to remind you all, that "users will often only see pages" is an assumption from your experience, but may not be the case for all setups. I'm using lots of custom modules for myself and I've also seen other forum members heavily using custom listers or other custom modules, which all reside in the navigation. 

@adrian

I think your problem with switching between page list and page edit is mostly down to the fact that the page tree is being reset in state all the time and that the page does fully reload. If it would act more like a single page app, which would hold/just update the state of the page tree and maybe even load the page edit interface via ajax this would already feel much more smoothly without trying to cram both interface parts into a single page. In the end a user is most of the time either updating a page or browsing the page tree. Also the gained speed improvements would make switching between both interfaces much more frictionless.

[Tom.]

Sadly, I wasn't able to do all the mock-ups this weekend as I was away. However I've managed to make a start on the edit page. 

@LostKobrakai - Thank you for your feedback, I let the sidebar in for this exact reason. I also have some ideas on how to fill out that space when only the Page link is available (due to permissions - editorial role). My idea is to have maybe the recently edited appear as like widgets in the sidebar - or something along those lines. I really need to think about it. This will be just be a theme I'll be building mostly to gain experience on the system but also to use in my personal projects. I will be releasing it for others to download. 

Anyway, here is the edit page (http://i.imgur.com/kp96yng.jpg):

[SteveB]

Looks good. Would the side by side content areas responsively stack if, in a pinch, we had to do some admin work via small screened portable device?

[Tom.]

Looks good. Would the side by side content areas responsively stack if, in a pinch, we had to do some admin work via small screened portable device?

The overlay will fill the entire screen rather than taking up a section of the screen. It will display a close button next to the save button at the top. Still allowing you to quickly edit pages. 

[elabx]

I just want to remind you all, that "users will often only see pages" is an assumption from your experience, but may not be the case for all setups. I'm using lots of custom modules for myself and I've also seen other forum members heavily using custom listers or other custom modules, which all reside in the navigation. 

@adrian

I think your problem with switching between page list and page edit is mostly down to the fact that the page tree is being reset in state all the time and that the page does fully reload. If it would act more like a single page app, which would hold/just update the state of the page tree and maybe even load the page edit interface via ajax this would already feel much more smoothly without trying to cram both interface parts into a single page. In the end a user is most of the time either updating a page or browsing the page tree. Also the gained speed improvements would make switching between both interfaces much more frictionless.

I agree with that loading the page edit through ajax could be a great improvement, a user sent me a module once that basically accomplished this and it is wonderful, I keep it in all of my PW installs. It just misses to update the tree without reloading.

I have been working on Shopify, and this "smoothness" in going from one part of the site to the other is very well accomplished in their interface.

[szabesz]

...."smoothness" in going from one part of the site to the other is very well accomplished in their interface.

Yes, this what certainly needs improvement in the ProcessWire admin. The site tree (Pages) is just confusing and click intensive to use. After almost two months of using it, I still keep clicking on the name (title) of the page to edit it or wonder about how to open the subtree, or does it have a subtree (children) at all? I know there is the number of children after the name, but the whole tree is so unconventionally crafted, that I have too keep reminding myself of how it works. 

[Tom.]

Yes, this what certainly needs improvement in the ProcessWire admin. The site tree (Pages) is just confusing and click intensive to use. After almost two months of using it, I still keep clicking on the name (title) of the page to edit it or wonder about how to open the subtree, or does it have a subtree (children) at all? I know there is the number of children after the name, but the whole tree is so unconventionally crafted, that I have too keep reminding myself of how it works. 

Exactly what I've seen as mentioned in my previous post above. I look to rectify this. 

Another people I've seen people do, is not knowing to click on the edit on the right of the page name. Instead they frantically click the page tree and watch the page name highlight change, but nothing happen. I hope to do some work on this, but part of the problem is that the page names look like links. However I think they should be clickable to go into edit. I see people doing it, so they must feel natural doing it that way. I haven't yet thought of a solution for this as I also like how the click expends children. However one thing I've thought of is have it click it edit if it doesn't have children. If it does the will have to use the edit as normal. I'm not completely sold on this idea as I don't like the idea behind having two ways to get to edit. I can see this confusing users. 

[Mike Rockett]

Very interesting concept indeed. And definitely loving this new colour-scheme, too. Nice work, Tom.

Quick note about the editor: a expander button at the top left of the editor [<] to expand it to the width of the page would come in handy, especially useful when working with multi-column editor layouts.

[antpre]

Hello to all of you.

I am very happy to see that this thread has been revived recently.

I am a new in the community. Using and learning PW for about 6 month now. It's has been a real pleasure and completly in love with this product.... however I fell the UX of the admin is a point that would require a bit of improvement. It would make the life of the admins a bit smother and We all now that it is through this interface that new user get in touch with PW and they form there first impressions partly on it... With the great idears given by Ryan ragarding growing PW in 2016 I guess a sligthly modernized design and improved UX would be a real asset. At the same time we should stick to the great philosophy of this admin UI  whis is simplicity.

When I started using PW. I kept telling my self : this page tree is such a great idea why the hell doesn't it fell pleasing to use...

As mentionned on other posts, I guess it should follow some more common paterns of page trees. I also did click manytime on the name of the page or try to drag and drop many times without understanding how it worked (finaly I was saved by a post on the forum...from a UX point of view thats not too good).I found the page tree of Modx very nice to use (left click on the name of the page to open the page the edit screen and the rigth click on the page name to access the menu items, felt natural to me). 

Second a page tree always visible + that stays open  where it was (as introduced this week in PW 3 ))is a must for me (may be with a toogle for those who dont want it alwas visible). It would simply make every thing more fluid.

So thanks Tom for this concept it is quite good. I like the idea to be able so switch easily from page tree to lister (although you can already do that with lister pro and add the short cuts in the pages menu)

My 2 cents : overall I have a concern with screen real estate. Specialy if you use that theme on laptop screen. I fell that puting the admin menu on the left panel is a waste of screen real estate (this  why I tend to prefer default admin to the  Reno theme). I (personanly) prefer it like in the default admin (horizontal menu bar at the top). Like this the menus drop down just when you hover your mouse I find that super easy and fast.

and putting the items of the pages menu  in a second colum (instead of putting it in a drop down below the pages menu in the first colum, like in the Reno theme) also taking a lot of width.

One question : how does it work when you click on a lister shortcut. is the page tree replaced by the list and the page edit screen stays as they are (that would be great) 

Thanks

[Martijn Geerts]

I found the page tree of Modx very nice to use (left click on the name of the page to open the page the edit screen and the rigth click on the page name to access the menu items, felt natural to me).

In the past I have struggled a lot with right clicking in MODX. I really didn't know you could right click. Most documentation didn't even tell you could right click, so I really didn't understand where to find the settings they mention.

About the left nav. These days most of our projects do not need a front-end at all. Most of those sites are about managing data. We really need the horizontal space. 20+ fields on a row in ListerPro is not something unusual here.

[renobird]

Nice to see the ideas here. There are a variety of needs and use cases for the admin, which is why it's nice to have an admin that can be customized so easily. We use both Reno and the default where I work, just depends on what the admin needs to do. The sidebar navigation is extremely useful for many of our projects, but there are times where the default admin is better suited.

Some people think cucumbers taste better pickled.