User experience (UX): Reduced information density in 4.0

I recently checked out the sketches and QA site for 4.0 and noticed that the information density on the course page has suffered drastically. It already got lowered with the introduction of the completion status badge but now it feels even worse.

Previously it was no problem and very legible to have a section with a dozen submissions, file downloads etc. or a mix of them in a fraction of the available screen estate.

With the design in 4.0 much of the vertical screen space is now wasted. I am not talking about the width which is fine in most circumstances but why are video activities so large that only 5 of them fit on a single page? Other activities are similar especially if they have open or due dates.

It is common to have sections/topics with more than 10 activities and with the new layout these do not fit on one screen anymore. Having to scroll drastically hinders readability and makes scanning the content very hard. One does not need the type of the activity spelled out next to the overly large icon in the same size as the activities title. Also putting every activity inside a box with 1.5em seems very excessive.

Information density should not be reduced this much. Whitespace might be used to separate different topics/sections which these are clearly not. Furthermore these are only screenshots from my desktop—on mobile the experience is even worse.

Average of ratings:Useful (2)

Re: Reduced information density in 4.0

por Bob Gilmore - xueves, 10 de de febreru de 2022, 08:25

This is Moodle 4.0 out of the box. It's never going to work for every single use case.

In my organisation (and a previous one) ,overly dense course layouts were a huge pressure point for us. My teachers/course creators were trying to get more and more on a course page, to the point where they were asking for global font reductions and steadily reduced space between elements. My learners complained of getting lost in the resources, never being able to find where they were up to and what they needed to do next. I also had frequent requests to change the icons from both groups because they "didn't mean anything".

We adapted by using the grid format layout plugin (https://moodle.org/plugins/format_grid - tiles also works https://moodle.org/plugins/format_tiles) and keeping the number of activities down per topic. I also tweaked the theme we use (Fordson, not boost) to display the name of the activity under the icon. For your specific example of 5 videos we have switched to using an activity, such as a lesson with 5 content pages containing 1 video each, then questions relating to the video either on the same page or on subsequent pages. My teachers are on board now and course engagement (as measured by activity completion) is significantly higher.

Basically, for us, works better by default and would take less work to tweak to our requirements.

I think the out of the box Moodle experience has to look and be as engaging and easy to use to as many people as it can. With some general quibbles I have you'll find scattered around this forum, I think they've done a good job overall. Once people are on-board, then questions about styling and themes can be addressed and Moodle has a wealth of options in this area.

Therefore, we as admins need to adapt our layouts to our specific requirements rather than expect one default theme from Moodle to cover all our needs. It's trivial to adjust the themes Custom CSS to change whitespace and even some elements or element placement. With some scripting knowledge, its possible to selectively move or remove elements from pages (see, for example Dominique Bauers post in this forum about chaning the icons for specific activities with a script you can add to your existing courses https://moodle.org/mod/forum/discuss.php?d=424856#p1728325). Finally, of course there are themes which can completely change the layout, either finding one that's close and tweaking it as desired or creating / commissioning one of your own.

Average of ratings: -

Re: Reduced information density in 4.0

por Jon Witts - miércoles, 9 de de marzu de 2022, 17:44

I would respectfully disagree Bob...

These changes to Moodle 4.0's default layout are going to drastically affect many courses... The increased amount of white space is going to make practically every single course on our Moodle almost unnavigable. We are doing our best to split a 2 or 3 course into as many discreet sections as we can and using collapsed sections so that students only need to view the resources for the section / unit they are currently studying; but some of these units can have many resources within them. For example one unit in my GCSE Computer Science course contains 15 labels, 39 URLs, 8 quizzes and 13 glossaries.

Course with this amount of resources within them are going to become so long that users will not be able to find the resources without scrolling for hours!

This new design for Moodle 4.0 is going to contribute hugely to the scroll of death for students!

Jon

Average of ratings:Useful (3)

Re: Reduced information density in 4.0

por Bob Gilmore - xueves, 10 de de marzu de 2022, 03:13

The course you describe isn't especially large, the courses I specifically develop have similar numbers of quizzes and an equal number of lessons without including assignments and database activities. I've already tested them on 4.0 and had both educators and learners do some testing for us. So far the issues have all be around primary navigation, specifically the breadcrumb and course index navigation. The two course formats we used (grid and tiles) both seem to work fine on 4.0. I just wish there was a course level toggle for the sections to be collapsed by default if you use the standard course formats provided with 4.0 and when collapsed, you could see a compilation status summary.

I do query the use of 15 labels in a course. Without seeing exactly what you're doing to be sure, this sounds like what many of my teachers were trying to do previously; i.e. put all of the learning materials on the course page instead of in discreet sections and course materials. This is where we found our learners struggling because they could never find what they needed to do and did contribute to overly long courses as well as learners unsure of what they've already done and where they are up to.

As an unrelated aside rant, the scroll of death is really only relevant when you need instant engagement to get people hooked to your content so they buy your product or don't skip over your important advertising links. Yet, every social media site has infinite scrolling and trust me, people are engaged with that stuff. If learners are on your LMS, they should already be engaged. The issue for an LMS is the ability to find materials you need quickly and see what hasn't been completed yet. The real solution to that is good course structure with help from a search feature (and, again, the grid / tiles plugins really help here). I'd really like to see Moodle beef up the search feature, let me search and sort on due dates, uncompleted, etc.

Average of ratings:Useful (1)

Re: Reduced information density in 4.0

por Jon Witts - vienres, 18 de de marzu de 2022, 00:51

The course I mentioned is a GCSE Computer Science course. Each unit studied is a topic in its own right in the Moodle course. Each topic / unit then uses the labels to separate the resources and activities for each lesson within that topic / unit.

There would be far too many topics if we were to try and use one topic per lesson... Ideally we would have a far better way of sub-dividing topics / units in Moodle than just using labels on the topic page...

Average of ratings: -

Re: Reduced information density in 4.0

por Nathan Lind - xueves, 10 de de marzu de 2022, 03:58

Jon, I agree with you 100%. Moodle 4.0, as currently designed, will make our courses 300% longer vertically. The standard response that the left-side "Course Index" will address this vertical navigation problem does not suffice. What is missing is the ability to group items (assignments, readings) together, indented, under a label, where the label provides context (learning objectives, headings, etc). This attached screenshots shows what was possible in Moodle 3.9 but does not work in 3.11 and 4.0. Despite many years of supporting faculty using Moodle, it is not a simple matter for me to "fix" the CSS to return Moodle 4.0 to the 3.9 compact layout. Hundreds of millions of courses have been built with Moodle using the layout used for the last 20 years. Those courses will now be 300% longer, and lack the ability to easily group and contextualize activities and resources using labels and indentation.

Left side shows Moodle 3.9 with label, followed by three indented forums, the right side, the same layout, in Moodle 4.0

Average of ratings:Useful (2)

Re: Reduced information density in 4.0

por Bob Gilmore - xueves, 10 de de marzu de 2022, 13:58

Really quick reply, I've only had a chance today to spend 5 minutes with 4.0, but with the following CSS:

.activity-item:not(.activityinline) { border: none; padding: 0.5rem; }
.activityiconcontainer { width: 30px; height: 30px; }
.activitytitle .text-uppercase { display: none; }
.description .course-description-item:first-child { margin-top: 0.25rem; padding-top: 0.25rem; }
.description .course-description-item:last-child { padding-bottom: 0.25rem; }

I get the following:

Obviously, I have the descriptions showing, and I'm sure I could tighten the margins between activities.

Average of ratings:Useful (5)

Re: Reduced information density in 4.0

por Nathan Lind - xueves, 10 de de marzu de 2022, 23:51

Thank you Bob.

Average of ratings: -

Re: Reduced information density in 4.0

por Jean-Philippe Pellet - miércoles, 4 de de mayu de 2022, 16:03

Thanks, Bob, this is very helpful.

Average of ratings: -

Re: Reduced information density in 4.0

por Fanny Boitard - miércoles, 23 de d’agostu de 2023, 21:24

Thank you for your post! We have just upgraded to Moodle 4 and the length of the pages is very bothersome

We are therefore looking into options to solve this!

Are these few lines of CSS, written in 5 minutes, still the best solution to reduce the size of the pages?

Thank you in advance for your feedback.

Fanny

Average of ratings: -

Re: Reduced information density in 4.0

por Nathan Lind - xueves, 31 de d’agostu de 2023, 04:27

Hi Fanny,
I cannot answer your CSS question, but I can tell you Moodle HQ is working to address some of your concerns. See this about new Activity Cards coming in 4.4 (admittedly not coming out until April 2024):
https://tracker.moodle.org/browse/MDL-78195
And, you may be interested in trying out Moodle 4.2 here: https://sandbox.moodledemo.net/
And Moodle 4.3 here: https://qa.moodledemo.net/

Average of ratings: -

Re: Reduced information density in 4.0

por Fanny Boitard - xueves, 31 de d’agostu de 2023, 15:30

Thank you for your reply. We'll definitly keep a close eye on page size in future versions

Average of ratings: -

Re: Reduced information density in 4.0

por Sabina Abellan - xueves, 31 de d’agostu de 2023, 17:03

Hi Fanny and Nathan,

Thanks a lot for your help in pointing Fanny out to the right Tracker issues about the Activity cards project Nathan

I'd like to provide some clarity regarding the timeline: the redesigned Activity cards are slated for release in version 4.3, scheduled for October 2023. The implementation of the new activity icons didn't make it into this release and will be deferred until version 4.4. However, in version 4.3, we are taking the initiative to reduce the size of the icons to optimize space utilization, while retaining the current icons until version 4.4.

Cheers!

Average of ratings: -

Re: Reduced information density in 4.0

por Bob Gilmore - vienres, 1 de de setiembre de 2023, 06:36

Im still plugging my way through pure CSS tricks. As Sabrina notes, the 4.3 activity cards are much slimmed down and so once that version is out, you wont need my CSS.

Ive also been looking at ways of making the icons more shape based so they are more easily recognisable.

.activityiconcontainer { background-color: rgba(255,255,255,0) !important; }
.activityiconcontainer.collaboration .activityicon { filter: invert(49%) sepia(27%) saturate(1451%) hue-rotate(320deg) brightness(100%) contrast(95%) !important; }
.activityiconcontainer.content .activityicon {  filter: invert(71%) sepia(41%) saturate(5942%) hue-rotate(179deg) brightness(92%) contrast(91%)  !important; }
.activityiconcontainer.assessment .activityicon {  filter: invert(55%) sepia(91%) saturate(1396%) hue-rotate(297deg) brightness(97%) contrast(91%)  !important; }
.activityiconcontainer.communication .activityicon {  filter: invert(41%) sepia(46%) saturate(3247%) hue-rotate(136deg) brightness(97%) contrast(87%)  !important; }

Changes the icons to:

Or, alternatively,

.activityiconcontainer.collaboration { background-color: rgba(247, 99, 77, 0.1); }
.activityiconcontainer.content { background-color: rgba(57, 155, 226, 0.1);  }
.activityiconcontainer.assessment { background-color: rgba(235, 102, 162, 0.1);  }
.activityiconcontainer.communication { background-color: rgba(17, 166, 118, 0.1);  }

.activityiconcontainer.collaboration .activityicon { filter: invert(49%) sepia(27%) saturate(1451%) hue-rotate(320deg) brightness(100%) contrast(95%) !important; }
.activityiconcontainer.content .activityicon {  filter: invert(71%) sepia(41%) saturate(5942%) hue-rotate(179deg) brightness(92%) contrast(91%)  !important; }
.activityiconcontainer.assessment .activityicon {  filter: invert(55%) sepia(91%) saturate(1396%) hue-rotate(297deg) brightness(97%) contrast(91%)  !important; }
.activityiconcontainer.communication .activityicon {  filter: invert(41%) sepia(46%) saturate(3247%) hue-rotate(136deg) brightness(97%) contrast(87%)  !important; }

Produces:

These work in 4.3dev as well:

Average of ratings:Useful (1)

Re: Reduced information density in 4.0

por Bob Gilmore - llunes, 4 de de setiembre de 2023, 05:14

For a more complete picture, this is the CSS our development site is currently using (4.2.2+) for the activity cards. I personally think the icons are a little close to the card border, and would tweak some more. It's important to note we're still using 3.11 on our live site, so I may have missed some styling of elements in places purely because they're not fully tested. We did experiment with moving the Completion and Open/Due information and I have posted that somewhere on the theme forum I think. Ultimately, we've opted to switch when 4.3 arrives at the end of the year so most of this wont be necessary, with the exception of the icon styling.

.activity-item:not(.activityinline) { padding: 0.5rem; }
.activity-item .automatic-completion-conditions { flex-direction: row; }
.description .course-description-item:first-child { margin-top: 0.25rem; padding-top: 0.25rem; }
.description .course-description-item:last-child { padding-bottom: 0.25rem; }

.activityiconcontainer { border-radius: 45px; width: 30px; height: 30px; }
.activityiconcontainer.collaboration { background-color: rgba(247, 99, 77, 0.1); }
.activityiconcontainer.content { background-color: rgba(57, 155, 226, 0.1);  }
.activityiconcontainer.assessment { background-color: rgba(235, 102, 162, 0.1);  }
.activityiconcontainer.communication { background-color: rgba(17, 166, 118, 0.1);  }

.activityiconcontainer.collaboration .activityicon, .activityiconcontainer.collaboration .icon { width:20px; filter: invert(49%) sepia(27%) saturate(1451%) hue-rotate(320deg) brightness(100%) contrast(95%) !important; }
.activityiconcontainer.content .activityicon, .activityiconcontainer.content .icon { width:20px;  filter: invert(71%) sepia(41%) saturate(5942%) hue-rotate(179deg) brightness(92%) contrast(91%)  !important; }
.activityiconcontainer.assessment .activityicon, .activityiconcontainer.assessment .icon { width:20px;  filter: invert(55%) sepia(91%) saturate(1396%) hue-rotate(297deg) brightness(97%) contrast(91%)  !important; }
.activityiconcontainer.communication .activityicon, .activityiconcontainer.communication .icon { width:20px;  filter: invert(41%) sepia(46%) saturate(3247%) hue-rotate(136deg) brightness(97%) contrast(87%)  !important; }

The quiz being a different colour from Assignment is because I was experimenting with changing specific activities. The CSS for that is below, although it will need some work as the the icons are styled with both the .activityicon and .icon classes in different places (I should log this in the tracker):

.modtype_quiz .activityiconcontainer { background-color: rgba(255, 255, 0, 0.1); }
.modtype_quiz .activityiconcontainer .activityicon { filter: invert(56%) sepia(99%) saturate(1298%) hue-rotate(360deg) brightness(102%) contrast(105%)  !important; }

Average of ratings:Useful (1)

Re: Reduced information density in 4.0

por Sabina Abellan - xueves, 7 de de setiembre de 2023, 20:16

Hi everyone,

While this comment may not directly relate to our current discussion topic, it aligns with our ongoing efforts in the Course Hierarchy project. I'm sharing it here because it could be of interest to some of you. Our team is dedicated to refining the process of establishing a cohesive and structured framework within each course. This initiative aims to elevate the overall user experience, and we would greatly appreciate your valuable input and feedback!

We’ll be conducting a round of usability testing sessions to understand how well our design proposal meets your needs as a user.

We’re looking to test with 7 teachers and/or content creators. The sessions will be an online test of 10 minutes maximum, and will consist of some general tasks and questions, and exploration of the design proposal prototype.

Feedback from our Community members and active users would be extremely valuable to this project, so we hope we can count on your participation.

If you or someone you know would be interested in participating, please send them the below link so they can perform the testing exercise.

New Course hierarchy · Usability testing

Many thanks,

Kind regards

Sabina

Average of ratings:Useful (2)

Re: Reduced information density in 4.0

por Bob Gilmore - vienres, 8 de de setiembre de 2023, 04:14

Hi Sabina, I thought I'd attempt the survey, but after watching the Good feedback video, I got the following screen:

I was running on Firefox 117, Windows 11. I haven't had time to check on another browser.

Average of ratings: -

Re: Reduced information density in 4.0

por Sabina Abellan - vienres, 8 de de setiembre de 2023, 21:16

Hi Bob,

Many thanks for your interest and help participating in the study! I've checked the link and the test is working perfectly for me, so your issue may be due to your responses in the initial survey. We're specially looking for educators and content creators users, who spend the most of their time creating and/or editing courses. If you didn't select this option in the second survey question, the system will automatically disqualify you as an eligible user for the test and won't let you continue.

If however you chose this option in the question, please do let me know because something may be wrong with the test link and we'll need to address it.

Many thanks,
Sabina

Average of ratings: -

Re: Reduced information density in 4.0

por Sabina Abellan - miércoles, 13 de de setiembre de 2023, 00:10

Hi again Bob,

I was checking the issue with the customer support team of the platform we're using for the test and they pointed that this issue is probably due to browsers' restrictions, and they suggested to try the following:

- Restart the computer/browser and open study again
- Try study on a different browser (If using Chrome, try Firefox)
- Try study on a incognito/private window
- Disable any ad-blockers you have installed
- Ensure the browser permissions are set to 'allow' for your microphone.

Please let me know if that makes it work for you, many thanks for your participation!

All the best,
Sabina

Average of ratings: -

Re: Reduced information density in 4.0

por Bob Gilmore - xueves, 14 de de setiembre de 2023, 07:37

I haven't had a chance this week to get into a quiet place and try again until now, but I had everything work just fine this attempt with no errors and I dont think I did anything different? ANyway, my rambling verbal feedback is now logged.

In general, I liked what I saw. The subsections were intuitive to add and navigate to and I especially liked how easy it was to switch to just the subsection away from the full course page making it a hybrid of whole course / one section per page. That's a fantastic addition ; I cant remember if it worked for entire sections? Totally unsure how you'd integrate this with the current collapsing sections or if you'd even try, but I liked what I saw with the obvious caveat of only using it in a prototype.

I don't think you'll ever please everyone with the information density problems and I also don't think that's Moodle Cores job; as long as the CSS is well built, we can do that ourselves or we can engage with theme creators to do it for us.

Average of ratings: -

Re: Reduced information density in 4.0

por Chris Kenniburg - xueves, 17 de de marzu de 2022, 04:34

I don't know that I've used Moodle 4 enough to have a solid opinion on the new layout. Here is what I appreciate:

Better information upfront without having to open the activity
Seems to be more ADA compliant than just a checkbox
The color change for completed items has a similar effect for young learners as a checkbox

Here is where I think the new layout REALLY shines with long courses:

Switching to one topic per page is really intuitive now
Highlighting a topic displays that topic's items on the main course page which is really nice

I agree each item now consumes a lot of real estate on the page but I think the space is needed for the learner. I am also a fan of open space on a page. It helps the person focus on a task. So I am holding out concerns or forming an opinion until we get time on it and use it for a couple of months.

Average of ratings:Useful (3)

Re: Reduced information density in 4.0

por Orestes Mas - vienres, 15 de de xunetu de 2022, 07:49

I completely agree with you. Perhaps the extra space is useful when you browse the course in a smartphone's browser, but is definitely a waste of space if you are using a desktop browser.

I also miss badly the possibility to indent activities moving them to the right. I used that, for instance, to set up a workshop for the students and give additional information (PDF files, etc.) below the activity, indented to the right, clearly indicating that this material belongs to the above workshop.

This feature is so crucial for me that, after having upgraded my site to Moodle 4.0 and played around a little with the new appearance, I had to revert Moodle to the 3.11 version due to this usability regression.

Does anybody know if it's possible to reproduce this feature --(de)indent activities-- on the new Moodle 4.0?

Thanks in advance.
Orestes.

Average of ratings:Useful (2)

Re: Reduced information density in 4.0

por Nathan Lind - vienres, 15 de de xunetu de 2022, 08:42

Orestes,
Please check out, and vote for:
MDL-74846 - https://tracker.moodle.org/browse/MDL-74846
Move Right/Move Left are gone in Moodle 4 and should be restored

Average of ratings:Useful (1)

Re: Reduced information density in 4.0

por Orestes Mas - vienres, 15 de de xunetu de 2022, 23:39

Voted! Thanks for the link.

Average of ratings: -

Re: Reduced information density in 4.0

por Djeizon Barros - xueves, 11 de d’agostu de 2022, 10:44

I completely agree with original poster. What is it that Moodle is trying to achieve? The vertical padding went up to the stratosphere. My courses usually have 10 weeks -- each week with 2 reading resources; 2 video resources and about 3 link resources. If I count the paging through the entire course vertically on screen, I could print 10 pages straight. I was upset when that button started to show up below links in some previous update, and now, the vertical padding went nuts, basically. I created this account here as I was lurking to find whether someone was also upset by these new changes. I feel the need to protest against the default design. Don't mean to sound rude but is this new design supposed to accomplish that one hits a link with an elbow instead of a pointing device? Even with a finger, you could touch the screen on a smaller version of what's showing. I've seen the CSS solution that @Bob Gilmore posted as a tip. The institution I work for is huge and my desire was to change this locally in my courses. Is this even possible? Just for the record - a new sad Moodle user.

Average of ratings: -

Re: Reduced information density in 4.0

por Shufeng Bai - sábadu, 25 de de marzu de 2023, 12:14

It is already a year since the complain was posted. Did anyone hear back from Moodle if they have a plan to revert this to improve the user experience? If not, I would rather stay away from 4.x

Average of ratings: -

Re: Reduced information density in 4.0

por Marie Achour - sábadu, 25 de de marzu de 2023, 12:49

Hello Shufeng,

We are indeed reviewing this topic and have posted several updates on our work to date throughout the forums.

Importantly, we are inviting interested parties to help us with our design research. If you'd like to support those efforts, please register your interest as per the instructions in this post: https://moodle.org/mod/forum/discuss.php?d=444701.

Thanks in advance for your ongoing support.

Marie

Average of ratings: -

Re: Reduced information density in 4.0

por Shufeng Bai - sábadu, 25 de de marzu de 2023, 13:29

Marie,
Thanks for taking our opinion into consideration. I tried to signup for the research but the says it is closed.
Another part missing is the navigation bar on the top of the activities. With moodle 3.11, I can click on the section on the top of the activity to navigate to that topic.

On moodle 4.0, It is gone. I can only go back to the whole course.

Average of ratings: -

Re: Reduced information density in 4.0

por Przemek Kaszubski - domingu, 26 de de marzu de 2023, 01:21

That course link should actually take you to the course section, rather than the top of the course page.

Average of ratings:Useful (1)

Re: Reduced information density in 4.0

por Sabina Abellan - llunes, 27 de de marzu de 2023, 19:39

Hi Shufeng,

Many thanks for your feedback on this topic. As Marie said, we're working on improving the course overview page and reduce the long vertical scroll needed and we're conducting usability testing sessions with the community in order to identify if our proposed solution is working for our users. The research participation is now closed as we had a lot of participants registering and the research deadlines are due at the end of this week, but I'm really interested in hearing feedback from those who were vocal about this issue, so if you are still interested in participate please send me an email at sabina.abellan@moodle.com and we can find a slot to conduct the session within this week.

Thanks a lot for your feedback and interest!
Best,

Sabina

Average of ratings: -