Book Index - Redesign!

Book Index - Redesign!

von Julia Lee -
Anzahl Antworten: 4

-- Deutsch unten --

Hello everyone,

I suggest revising the editing functions of the book. To this end, I did a quick brainstorming session with Luca Knoblich, a design student. Luca has implemented the results here

as draft in Figma.

We will meet on Tuesday and possibly also on Wednesday morning, via Zoom if necessary, during the DEV Camp to develop it further.

Would anyone like to join our group? If so, please let us know here and in what role. Even if you are not joining us, feedback on the redesign drafts is welcome here in this thread! Another version is being developed where the buttons each have a border.

Initial situation/problems:

  • I often accidentally move a chapter and have even deleted one unintentionally (unfortunately, there is no recycle bin to restore it).
  • It is very difficult to hit the right button because they are very small and have no borders.
  • The chapter names are displayed very small because they are on the same line as the buttons.
  • The vertical arrangement is inconsistent, which quickly leads to user errors (unfortunately, this is also the case when managing courses in the course area and may not be so easy to change in Moodle).

We would also welcome feedback on what would be technically feasible during the DEV Camp.

Best regards, Julia & Luca

Hallo in die Runde,

ich schlage vor, die Bearbeitungsfunktionen des Buchs zu überarbeiten. Dafür habe ich zusammen mit einem Design Studierenden, Luca Knoblich, ein kurzes Brainstorming gemacht. Die Ergebnisse dazu hat Luca hier

als Entwurf in Figma umgesetzt.

Wir werden uns am Dienstag und vielleicht auch Mittwoch Vormittag ggf. über Zoom während des DEV-Camps treffen und es weiter entwickeln.

Hat jemand Lust, in unserer Gruppe dabei zu sein? Dann sagt gern hier Bescheid, wenn ja und in welcher Rolle. Auch wenn ihr nicht dabei seid, ist Feedback zu dem Redesign-Entwürfen hier im Thread willkommen! Es wird noch eine Version entwickelt, wo die Schaltfelder jeweils einzeln einen Rand haben.

Ausgangslage/ Probleme:

  • Ich verschiebe öfters aus Versehen ein Kapitel und habe auch schon ungewollt eins gelöscht (leider gibt es dafür keinen Papierkorb zum Wiederherstellen).
  • Es ist sehr schwierig, den richtigen Button zu treffen, da diese sehr klein sind und keine Begrenzung haben.
  • Die Anzeige der Kapitelnamen ist sehr klein, da sie in der selben Zeile sind wie die Buttons.
  • Die Anordnung ist in der Vertikalen nicht konsistent, was schnell zu Anwendungsfehlern führt (Dies ist ja leider auch bei der Verwaltung von Kursen in Kursbereich so und ist vielleicht nicht so einfach zu ändern in moodle).

Gerne kann hier auch Feedback dazu gegeben werden, was technisch realistisch machbar wäre während des DEV-Camps.

Herzliche Grüße Julia & Luca

Als Antwort auf Julia Lee

Re: Book Index - Redesign!

von Amaia Anabitarte -
Thanks Julia and Luca for proposing this idea and working on it! I agree the Book UX needs some love.

I hope you don’t mind that I shared your proposal with Sabina Abellán from the UX team at Moodle HQ. Sadly, she can’t attend this year’s MootDACH, but she sent me her feedback to share with you all in case it helps:

Having several action icons side by side increases cognitive load, and she thinks progressive disclosure would work better here. Her suggestion in cases like this is to use a contextual menu icon (three dots) where all the available actions for that specific item can be revealed.

This would make the interface visually cleaner and also help with the limited space we have for distinguishing each action. From an accessibility perspective, it also improves clarity since the menu can provide proper labels for each action, which reduces the risk of icons being misunderstood.

Of course, this is just a suggestion to explore, she doesn’t want to take away from the design work already done here, which is really solid. She just think this alternative might help balance clarity, accessibility, and scalability.
Als Antwort auf Amaia Anabitarte

Re: Book Index - Redesign!

von Julia Lee -

-Deutsch unten-

Hello Amaia, thank you very much for the sharing and the very helpful feedback! The extended menu is a great idea for accessibility. I have thought about it and we will pursue two further approaches:

(a) Integrate menu for editing on the book page. This has the advantage that it is consistent with editing on the main course page.

b) Integrate menu in the block. (Even though the design may be discarded, I think we can gain insights to improve the course management. Because manually I have already moved and deleted some courses involuntarily).

I'm really looking forward to exchanging ideas with you and everyone at the DEV camp!

Best regards

Julia

Hallo Amaia,

vielen Dank für das Weiterleiten an Sabina und das sehr hilfreiche Feedback! Das mit dem erweiterten Menü ist eine super Idee, die der Barrierefreiheit dient. Ich habe darüber nachgedacht und wir werden zwei weitere Ansätze verfolgen:

a) Menü zur Bearbeitung auf der Buchseite integrieren. Dies hat den Vorteil, dass es konsistent zur Bearbeitung auf der Hauptkursseite ist.

b) Menü im Block integrieren. (Auch wenn der Entwurf vielleicht verworfen wird, denke ich, dass wir Erkenntnisse gewinnen können, um die Kursverwaltung zu verbessern. Denn manuell habe ich auch schon einige Kurse unfreiwillig verschoben und gelöscht.)

Ich freue mich sehr darauf, mich mit dir und allen anderen beim DEV-Camp weiter auszutauschen!

Herzliche Grüße

Julia

Als Antwort auf Julia Lee

Re: Book Index - Redesign!

von Petr Skoda -

Hello Julia and everyone,

Thank you for such an inspiring event. It was nice to meet so many passionate users of the Book module - my very first Moodle plugin, now over 20 years old. I must say I was a bit surprised to discover that so many organizations still rely on it.

You can explore our highly experimental (and admittedly buggy) demo code here: https://github.com/skodak/moodle/tree/mdach2025-book/mod/book

Here’s a quick recap of the features we explored during our session:

  1. Moving TOC from fake block into main page content to the left side of the chapter (no edit icons there).
  2. New option to view all chapters on one page.
  3. Removal of dedicated print view - the normal chapter CSS was optimised to allow printing of any book page.
  4. Dedicated TOC page for altering of book structure - drag and drop reordering.
  5. Moving of editing icons from TOC into "meat balls" dropdown in the top-right of pages. This allowed editing of chapters outside of edit mode.
  6. Moving of sub-plugin actions from secondary navigation to "meat balls" action menu to improve screen use.
  7. Full-text book search via TOC.

We also brainstormed a few potential enhancements:

  • chapter snapshots - to allow access to older versions and to allow restoring of deleted chapters
  • interactive widgets for more dynamic content and advanced features

Cheers,
Petr

Als Antwort auf Petr Skoda

Re: Book Index - Redesign!

von Julia Lee -
- Deutsch unten - 


Dear Petr, dear all,

I would also like to thank Petr and everyone involved. I found the collaboration very inspiring with our interdisciplinary team and helpful feedback from mentors at Moodle HQ!

Here is a short addendum with video feedback from the students, Luca Knoblich and Moritz Maschmann, which I was unable to show during the 3-minute final presentation.

 Best regards,

Julia

 
 
 
Lieber Petr, liebe alle,
 
danke auch von mir an Petr und alle Beteiligten. Ich fand die Zusammenarbeit auch sehr inspirierend mit unserem interdisziplinären Team und dem hilfreichen Feedback der Mentor*innen von Moodle HQ!

Hier noch ein kurzer Nachtrag mit dem Video-Feedback der Studierenden, Luca Knoblich und Moritz Maschmann, das ich während der 3-Minuten-Abschlusspräsentation nicht mehr zeigen konnte.
 
Herzliche Grüße
Julia