GSoC 2018 Ideas: The new mosaic experience

This is one post in a series to begin focused discussion about ideas that came out of our 2018 GSoC Brainstorm.

Please use this post as a place to begin to discuss this idea more in depth.

This idea was proposed by @pigeonflight and he would be willing to serve as a mentor. He also things @datakurre would be a good mentor

The description:

"details mentioned here (mockup included) -->"

Go on, community, make this one shine!

I believe, and I understood that also @pigeonflight agrees, that it could be good to limit this to styling the current Mosaic editor. This would limit the required skills and probably result in easily mergeable results. Possibly the student could also take David's mockups and iterate them further (to result both mergeable CSS and ideas for further development).

Personally, I try to participate for selection phase, but cannot promise yet to actually mentor a project.

Yes in the end this need not be Mosaic 3.0, more like 2.1.x. I can see this being a project for a student with reasonable CSS and maybe some JS skills. Because of the current stack used by Mosaic, they most likely be implementing this with Jquery or vanilla JS as opposed to whatever is the new "hotness" :).

may I ask what problems you see on current Mosaic user interface and how this proposal solves it? I think is very important for the success of this project: what are the goals you're trying to achieve?

You're good at forcing me to write down the stuff that's only in my head. I suppose this will save time when we're putting together the GSOC project proposal.... :slight_smile:

The overarching goal is to make the layout editor user experience more "user friendly" and "enjoyable". I've taken cues from other projects that use layout editors, such as Webflow, Figma (not really a web layout editor), Weebly, Google Sites and Mobirise. In my experience there are common interface elements that the average user has come to expect.
These include informative icons, shortcut keys and panel style widgets.

The project will tweak the Mosaic layout editor to align more closely with typical user expectation. Specifically, this can be achieved by making the following adjustments:

  1. reducing some of the clutter by grouping the insert and format menu into a widget with tiles and formats grouped into expanding categories.
  2. using icons that indicate the purpose of each action (this includes the tab
  3. using icons on the non-tile tasks (save, cancel, layout etc..)
  4. taking cues from other layout editors, make the right side bar persistent
  5. include support for shortcut keys

My suggested approach is to do a working prototype (even with paper) and test it on real life users to validate our assumptions and identify other things to add to (or take away from) the suggested scope.


IMO, this kind of goals are way too subjective and is going to be difficult to measure the success of the project.

let's take a different approach, what about doing User-Experience research to identify the issues that need to be solved? we could do that at Plone level and not only at Mosaic's.

BTW, it has to be clear by now that the toolbar needs to be completely redesigned: we need a global horizontal toolbar on top (as almost everybody else), and an easy way to create contextual vertical toolbars like the one you're proposing:

I agree that some user research makes sense. It makes a whole lot of sense. I actually did a tiny (more like microscopic) bit of user research which I should publish and then build on.

yes, sorry for being such a PITA but IMO we need to be careful and think on the whole picture very well before having just another toolbar to maintain.

user research seems fundamental to me and probably we can land in Plone 6 with a good user interface that solves the general issues that are still open until today.

@hvelarde, I agree with you on both your points. We do need to plan out exactly what our desired outcome shoudl be. A clear project specification will make for a successful and cleanly-scoped project. I also agree that some UX research would be fantastic as a tool to drive that specification. I'm not convinced that we have the resources to do it. If we can get it done, great. It's worth noting though that one form of UX research is copying the UX of successful tools that accomplish the job that needs doing.

Let's do push for some research to be done (in addition to the work @pigeonflight has already undertaken), but let's not let that stand in the way of at least starting to build a solid, well thought out list of the improvements that we would like to see. Having that can even help us to build test scripts for UX testing.

I am -1 on 'needing an extra click' to select something. (click on field to click on structure'