Feature Wiki

Information about planned and released features

Tabs

History and Project Documentation - 2017 Concept for Revamping the Page Editor

This entry is a project documentary of 2017 Concept for Revamping the Page Editor

We held a Workshop on the Page Editor 2017-02-02. We looked at pain points of the current implementation. Please consult the minutes (german) for comprehensive information. 

We have identified the following issues as most painful
  • editing tables is tideous 
  • editing media is tideous
  • editing content that is responive is tideous
  • the blocks are very obtrusive and require a click-fest 
  • simple things make users go "long distances": Content tab > Edit tab > add or wake up block > depending on the element even more new pages and tabs. 
  • Users cannot always see what they could do. They first have to navigate to a specific (sometimes hidden) place to discover certain functionality
Minutes Workshop (German)
A concept to revamp the ILIAS page editor is prepared to be presented at the next DevConf in September 2017. It will address the following core issues: 
  1. The editing actions are carried out without loading the page again: Users stay on their page and do not have to switch to new views for working on a particular block. There might be exceptions neccessary for individual complex page elements. Functionality will be additionally displayed if the context requires it.
  2. Switching between blocks of page content elements is possible with just one click. The switch will be without a distinct latency
  3. The concept will point out what options for Auto-Save and Draft-Mode can be derived from the new editing approach. 
  4. The concept will specifically propose simplified editing of:
    • Data tables and advanced tables
    • Media
    • Responsive Layout
    • Links und Footnotes
  5. Preparing the concept we will keep in mind, that it is highly desirable to use a tiny (pun intended) version of this editor within forms. 
  6. We do NOT prepare a specific migration strategy for the Tiny MCE content though or the content migration of the page editor. This will be part of an actual implementation project. 
Note on procedure 
  • We will prepare featurewiki articles, including the required mock-ups, to ensure transparency and to provide the opportunity for community discussion. 
  • We will hold workshops to discuss and validate the suggestions and hone the concept thus the envisaged page editor can meet the needs of its users. 

Editors we looked at in the initial Workshop

Confluence - UAS Aachen

CKEditor - Zurich University of Teacher Education

Living Docs - University of Berne

Shoelace  - University of Berne

Comments

Idee was den Editiermodus betrifft:
Vielleicht könnte man die möglichen Editiertools oder sagen wir Editiermodule in "Level" unterteilen bzw. Leveln zuweisen. So wäre im Edit-Mode Level 1 nur die Erstellung/Bearbeitung von Titel, Text, einfügen von Bild möglich. Alle anderen Optionen wären ausgeblendet. Level 2 könnte ein Bearbeiter jedoch per Button aktivieren und die weiteren Module werden sichtbar. In Level 2 könnten dann Formate zugewiesen, Videos eingebunden, Dateien hochgeladen werden, in Level 3 können CSS Style und HTML eingebunden werden um nur ein paar Beispiele zu nennen. Also eine Art simple- > advanced- > god- edit-mode. :)

Was dazu charmant passen würde: 
Hinten in der ILIAS-PageEditor-Administration können die einzelnen Editiermodule/-tools einem oder beiden Level zugewiesen werden. So wäre man flexibel. Noch besser wäre, diese Zuweisung als zusätzliches Setting an globale/lokale Rollen zu hängen.  

Viele Grüße Leitinger, Patrick [PatrickLeitinger]

Wünschenswert wäre so etwas wie ein 'Plugin-Slot' für den Seiten Editor. Bei MediaWiki ist leicht möglich, zusätzliche Schaltflächen beim Editor einzublenden. Nach Klick auf diese Schaltfläche könnten z.B. Bilder oder Filme unter CC-Lizenz aus der Wikipedia angezeigt werden, die als Referenz auf der Seite anschließend eingebunden werden könnten. Ein anderes Beispiel wäre das edu-sharing-plugin für m*****, das ähnlich vorgeht, jedoch auch von weiteren Repositorien/Referatorien Inhalte liefern könnte.
Viele Grüße Kohnle, Uwe [ukohnle]

Originial Suggestion

We had a workshop on the Revision of the Page Editor in February 2017. We looked at current editors, looked at specific pain points and developed a plan how to tackle the revision project:  
Title: Concept for Revamping the Page Editor

Brief description
The editing actions are carried out without loading the page again: Users stay on their page and do not have to switch to new views for working on a particular block. Functionality will be additionally displayed if the context requires it.
Switching between blocks of page content elements is possible with just one click but without a full page reload.
The concept will specifically propose simplified editing of: tables, media  and responsive layouts. We have laid out a more detailed workplan in the featurewiki article. 
We will ensure a transparent and open community discussion on this important functionality by work in the featurewiki from the earliest stages of the project and by holding workshops to actively seek feeback from the community. 
Our best estimate is that it will take 24 person days to complete the workshops, mock-ups, kitchsensink effort, featurewiki articles and the technical feasibity study required to have a much better user experience while keeping the XML / DTD-based approach. 
This project has high relevance to all authoring and collaborative scenarios. Due to the high community relevance Leifos cuts the dayrate to 800 EUR for this project. 
This project has thus a price tag of 19.200 EUR. 
Institution submitting the proposal: Pedagogical University of Zürich, University of Berne, leifos GmbH
Link to correspondent feature wiki page: Concept for Revamping the Page Editor

On May 16th, 23rd and 31st the Core Group set out to prepare the first mock-ups for the concept. 
The Core Group consists of 
  • Timon Amstutz of University of Berne 
  • Alexander Killing of leifos GmbH 
  • Yvonne Seiler of University of Berne 
  • Alexandra Tödt of leifos GmbH 
The Very First Mock-Ups

On behalf of the Adbvisory Council the Project Manager required parties to come forward to declare intrest in preparing the page editor concept. 
Until 2017 June, 2 no party besides leifos GmbH declared intrest. The Project Manager then required leifos to quote for the project. 

The Core Group furthered the conceptual discussion and the mock-ups on June, 14th: 
  • Analysis of XML-Editors recommended by community members
  • Transfer inspiration into Mock-Ups on how ideas from other editors could look like in ILIAS
We narrowed down on XML-Editors fullfilling the requirements of the first workshop . These editors were recommended by members of the community.
  1. Beaver Builder 
  2. DiviBuilder 
  3. Visual Composer
We organized the pictures we made by workflow that was performed while taking the screenshot (Benchmark Requirement) and by Editor.
Screenshots of Benchmark Editors

Currently we work an adapting ideas of the suggested editors to a possible implementation in ILIAS. The following screenshots show the current state of this work:

On June, 26th we had a skype-session eliciting feedback.  Particpants:
  1. Werner Willi. Pedagogical University of Zurich,
  2. Patrick Leitinger, COGNOS AG
  3. Melanie Klöß, UAS Bonn-Rhein -Sieg 
  4. Fred Neumann, ILI Uni Erlangen Nürnberg, 
  5. Yvonne Seiler, Uni Bern
  6. Timon Amstutz, Uni Bern
  7. Stefphan Winiker, UAS Luzern
  8. Fabian Kruse, ILIAS e.V. 
  9. Matthias Kunkel ILIAS e.V. 
  10. Melanie Grießer, MLU Halle-Wittenberg
  11. Alexander Killing, leifos GmbH
  12. Alexandra Tödt, leifos GmbH
Introduction 
A brief introduction about the approach to work and project preliminary results entailed basically what is comprised in these accordions. 

Demoing  3 XML-Editors
Participants were given quick tours of three editors to introduce them to the technology that informed and inspired this conceptual endeavor.  We looked at adding content, creating structure for content and editing elements.
  1. Beaver Builder (https://www.wpbeaverbuilder.com)
  2. DiviBuilder (https://www.elegantthemes.com/gallery/divi/)
  3. Visual Composer (https://vc.wpbakery.com/try)
The selection of editors was much appreciated by the participants: They approved of using them as a a technological backdrop for preparing the concept. Beaver and Divi got explicitly mentioned for good usability. Visual Composer was explicitly mentioned for being overwhelming and too much. Participants gave specific feedback: 
  • Using a modal to enter text-content into a page was considered a bad idea even if the entry field could be enlarged at will. 
  • Having a preview and a publish-action was considered a good thing.
  • Ordering drop-downs alphabetically was ruled out, sorting by perceived importance is appreciated. 
Presenting the Current Status of the Concept, Gathering Feedback 
Partcipants were presented with the mock-ups for the three editing issues: 
  1. Open the editor and being presented with an empty page
  2. Adding Content elements 
  3. Editing Content Elements
The mock-ups listed below were used for this and well received by the participants. Paricipants validated the presented material and mandated the project group to further their conceptual work along those lines. 

Participants gave specific feedback: 
  • It would be a nice extra if the editor would support mark-up  and / or shortcuts. 
  • It would be helpful if the editor would allow for special characters. 
  • Participants were very pleased that hovering over elements provokes the diplay of editing options or dropzones. They are aware that this cannot work in tablets. However they would really like to have this for desktop work and accept that the control concept for tablets would differ from desktops. 
  • The ordering and placement of elements in the pop-over for adding-elements was discussed. Whether structure elements and content elements should be added via the same menue or if there should be two. 
  • The difference between adding and editing was not fully grasped at once in by at least one participant. 
  • It was suggested to tackle the actions "delete, move and copy" next. 
Timeline
Participants agreed to the discussion strategy (immediately below) and the timeline  (end of FW-Article)
  • The projects approach to have suggestions prepared by the core group.
  • Suggestions are worked on in a workshop of community members.
  • The results of the workshop are then processed by the core group to integrate with the suggested concept.
  • Which is again presented at a skype meeting to elicitate feedback fm community members . 

On  Junly, 25th we had another workshop with community members.  Below you find the Agenda and the slides used as input to the Workshop: 

On August, 9th the project is officially commisioned by the Project Manager on behalf of the Advisory Council.

On August 30th the Core Group held another meeting to further the concept and the mock-ups and to prepare the Status Report to the DevConf. 

On September 13th Yvonne and Alexandra presented to Status of the concept to the DevConf. 
On September, 27th the Core Group had another meeting to further the concept. 

On Nov 15th, Yvonne Seiler made her current anaylsis of the benchmark editors avialable. 

On December 7th, the core group had another meeting to further the concept. 

Last edited: 25. May 2020, 11:17, Tödt, Alexandra [atoedt]