[Neos] UI sketches for edit/preview

[Rasmus Skjoldan]

Hi,

> Excuse my ignorance, but why do we need to differentiate between "edit" and "preview" modes?

Personally, I think it's a really important distinction to make it easy for users to understand what's editable and what's not. To prepare Neos to work well for multi-channel content, this will get increasingly important - me thinks... The interface aims to gradually teach users to work with multi-channel content as so many editors are not comfortable with that. Seperating them means you can do installations with just 1 edit mode and 5 preview - which will quickly make them understand how their content is displayed differently. Just as the Wordpress SEO plugin shows the Google representation as a preview on the editable page.

> Couldn't we just reduce this to "modes"? With the "preview"-button on the top right you'd always jump into fullscreen preview mode..
> I actually think, that would reduce complexity more than avoiding dropdowns.

If you think through that scenario, this is what will happen:

1) Editor writes some stuff and puts a couple of images in a content chunk selected in the node tree - f.x. via wireframe mode
2) Editor presses Preview - then via dropdown costumizes the rendering of the preview
3) Editor wants to correct something - but can't do it in the preview
4) Editor goes back to the editable mode and corrects content
5) ...back to preview and loop 

I think this method will feel or be experienced as quite irritating after working with it for a long time. It's basically the abstraction we wanted to get rid of with inline WYSIWYG - you have to switch from one mode to another. It would reduce the initial complexity but if you think about how it would be work with it for longer stretches with multi-channel content, it would not be too pleasant. I think. We could test them both, naturally. 

The proposed idea gives the editor access to very quickly switch between modes.

>> It's such a few people who would want to see more than 2 languages as editable views,
>> for example. But for those who do, we naturally should provide advanced views...
> 
> I'm not so sure about this one. I worked with many TYPO3 sites with loads of language & dialect combinations. I mean, of course you're right: A "regular" editor won't need to see all of these all the time. But I think once we offer the option to enable different previews a scenario like "I want to preview version B of the homepage on a mobile device in english language" will become quite common.

I think there's a very real danger of doing (yet another) over-complex CMS here - and on the other hand an opportunity to do something that'll be experienced as simple for editors. Across many-many TYPO3 CMS projects I've worked on, I've only seen a handful editors who had access to more than 4 editable languages. 

But "Preview version B on mobile in Norwegian" is totally realistic - which is why I think the Inspector must have easy costumization of the Preview modes. I think we totally agree on that. 

> I'm not a UX-expert by no means but I think that one of the strengths of TYPO3 CMS is its usability staying kind of consistent whether you have one or 100 languages, 10 or 1000 pages, ...

True - it's the strength of flexibility. But also it's weak-point and why TYPO3 CMS is not being used for so many projects it would otherwise be fit for. The UI becomes so extreme in such cases. We need to install some barriers in Neos, I think.

> I don't like the required extra click for dropdowns, but I think it would be nice if the preview modes could be partitioned into (configurable) groups like "language" and "device":
> 
> https://www.evernote.com/shard/s17/sh/d64264a8-bdb1-4439-b2ce-7a247a8c9c66/3a7dd76b86aa9a2ce754c8abff30797e

Yes! - Preview configuration like that should naturally take place in the inspector via dropdowns. Completely agree. But for editable modes, it would be the wrong way.

> Maybe the UI could even be "intelligent" about the representation depending on the possible options:
> 
> 1    option: Button
> 2-20 options: Dropdown/Split-button
> > 20 options: typeahead/autocomplete (e.g. http://ivaynberg.github.io/select2/)

Absolutely - that would fit perfectly in the Inspector when previewing (which also calls for preview without going into fullscreen).

Best,
Rasmus

> 
> 
> 
> 
> -- 
> Bastian Waidelich
> --
> Core Developer Team
> 
> TYPO3 .... inspiring people to share!
> Get involved: typo3.org
> _______________________________________________
> Neos mailing list
> Neos at lists.typo3.org
> http://lists.typo3.org/cgi-bin/mailman/listinfo/neos