Structure vs. Content mode - front-end editing needs better UX

[Peter Bittner]

Hi all,

I'd like to ask about the reasons for having a Structure _versus_ Content mode switch. We do front-end editing to avoid losing context with what we want to change. Now, when we switch to structure mode all the content is hidden---and we lose context. I've seen this impression confirmed with unskilled, untrained, first-time, and elderly users.

Structure information is good for precise editing, it should be supportive information though. The real state of the page should stay visible, so the context remains established.

How about doing editing as with Firebug (Inspect Element, etc. in your web browser)? With a structure panel open on one side of web page (and a plugin panel / toolbox open on another side of the web page) we could have all the information we need for editing visible at the same time. When hovering over a plugin or placeholder on either the web page or the structure panel the corresponding element on the other could be highlighted. Just like web developers love it when analyzing a web site.

Any thoughts on this?
Peter

[Angelo Dini]

Hallo Peter

thanks for the feedback and proposition. One trick that helps is switching context via SHIFT + Space, that will highlight the current _hovered_ element. The main reasons for two modes are:

- Headless mode, this will be added in the future and will disable content entirely and allows the CMS to be run headlessly for frontend frameworks or applications

- Permissions, some people should only be able to "edit" content vs "restructuring", this way we create separate roles for the CMS

- Legacy, as we had to support IE6/7 back in the days we had limitations on what was possible through frontend

We hear you and would like to improve the content mode itself to allow for simple restructuring or adding content "lite" version. So people could easily add images, text or so inline. The structure mode is intended for advanced user that are free to do whatever they want. Even with your suggestion with an inspector, the experience would still be reserved to experienced users. In addition to that we do not want to limit the view space, the toolbar is sometimes already be considered as "distractor" when editing content.

These are my thoughts :)

Cheers

Angelo

[Peter Bittner]

Thanks Angelo, for your quick and elaborate answer.

> The structure mode is intended for advanced user

For what I know it's not even possible to add a plugin to a placeholder in content mode. All you can do is edit plugins that have been added (by someone) previously. Users that have no access to structure mode cannot add new content.

Also, "advanced users" have the right for decent usability, too. Losing context is not something that happens to people with little expertise. It is something that is a proven fact of user research, application design and usability testing.

If django CMS doesn't get it right users will go and look for other solutions. We developers have a better time selling django CMS as a solution to clients when it is simply ahead of competition. It would really be nice and helpful to get the user experience right.

> we do not want to limit the view space

I don't think web developers complain about the Firebug panel (and the like). You can adjust its size, its position, you can even detach it from the main window. Also, if content editors (and web developers) have a large screen they can use the available screen real estate in an effective manner, given some flexibility of the UI. It's really a matter of reusing established patterns. Side panels that collapse or can be folded away exist in tools, mail clients, etc. for years, and we love them.

Just imagine that content editors work in a similar way than web developers. Wouldn't that be cool to look at? Wouldn't those people feel empowered? More possibilities, more feedback, more transparency, all at your finger tips without having to do research in the menus, the popup dialogs, etc.

Peter

[Angelo Dini]

Hello Peter

yes, this is why we need to enhance the content mode to enable simple addition and restructuring of content. Though we will still have the issue of losing context.

I'm very open here to recommendations / UX ideas or sample screenshots of a possible solution.

The technical requirements there are still that the modes are split apart. We can link them with a new "developers view" mode or whatever we wanna call it to mimic the developer tools.

I find myself more splitting the developers tools from the actual window, using 2 windows. That might also be worth having a look at.

Cheers

Angelo

[Peter Bittner]

Hi Angelo,

I've made a quick wireframe, see attached. It's available for public editing at https://wireframe.cc/IBlaDw

A CMS sidebar can solve the issue of the toolbar occupying "too much" screen real estate. It can easily collapse or slide out (as the toolbar did in django CMS 2.4, by the way!), and users will feel alright. On large desktop screens the default placement on the right (or left) comes natural as most screens are much wider than high, nowadays. Containers inside the sidebar can have accordions to accommodate several tools. And no toolbar means 100% of vertical space remains available. The Admin panel can still float in from the left if needed.

The toolbox offers all plugins (in a context sensitive way) to drag and drop them onto the page. The structure below allows for ultimate control and fine-tuning. With the toolbox and the structure view both available at the same time there is no context-switching needed, no losing of context happens while working on the page content. Of course, the sidebar could optionally detach (into a separate window) or be rearranged or moved to one of the other 3 edges of the browser window.

Peter

[Angelo Dini]

Hello Peter

thank you very much for the wireframe. My experience with a toolbar restricting the width of the viewport and especially the websites width is in general bad. This also lead us to reconsider the sidebar and overlap it over the content. It's not an option that I'd consider but I can place it in the board meeting.

I'd rather have it on the bottom of the page spanning fullwidth, also considering that a structure can have many nested level and width will be a problem. We could eventually implement switches, such as the developer tools offer.

I like the idea of the toolbox but might feel more comfortable adding that to the content itself with hover indications or so, but we'd need some UX tests for that.

Cheers

Angelo

[Peter]

Hi there,

I just found an old video again from Emencia showing up django CMS 2.4 with front-end editing and responsive Web design. Absolutely no structure mode, no admin needed for editing, no losing context ever. Just nice and intuitive.

- https://vimeo.com/75947363 (that was 3.5 years ago!)

Peter

Quidquid latine dictum sit, altum sonatur.
(Anything said in Latin, sounds profound.)

( ͡° ͜ʖ ͡°)

--
Message URL: https://groups.google.com/d/msg/django-cms-developers/topic-id/message-id
Unsubscribe: send a message to django-cms-developers+unsub...@googlegroups.com
---
You received this message because you are subscribed to a topic in the Google Groups "django CMS developers" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/django-cms-developers/uANicvjullE/unsubscribe.
To unsubscribe from this group and all its topics, send an email to django-cms-developers+unsub...@googlegroups.com.
To view this discussion on the web, visit https://groups.google.com/d/msgid/django-cms-developers/497dd39c-bf2c-4483-82b4-5c657afe676a%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

[Peter]

Hi again,

here is another video that I think should be inspiring for how django
CMS should work:

- https://www.youtube.com/watch?v=351Da7Qx0IQ (Odoo Website Builder - Tour)

Don't get me wrong! I'm not a super-big fan of Odoo. But what they get
right is what they probably have copied from existing website builders
that have proven to be sufficiently end-user friendly (e.g. Weebly and
stuff).

- They have everything visible, nothing hidden.
- They have a toolbar of elements you can add at the left.
- There is no structure mode (or, at least, you're not forced to use
it to add content). WYSIWYG front-end editing over everything!
- No double-clicking to change content! It all works like a breeze.
Just point and click, change and leave.

In fact, I would have loved if Odoo told us: "We have made this all
using django CMS! And it's awesome."

What do you think? Could django CMS work like this (plus a few
"professional-grade" addons, structure control layer, etc. maybe) one
day?

Peter