Book Index - Redesign!

Book Index - Redesign!

by Julia Lee -
Number of replies: 2

-- 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

In reply to Julia Lee

Re: Book Index - Redesign!

by 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.
In reply to Amaia Anabitarte

Re: Book Index - Redesign!

by 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