4.0 UX Moodle LMS Update - February 2021

4.0 UX Moodle LMS Update - February 2021

by Candice Diemer -
Number of replies: 49

Hi all,

We are excited to share with you the new 4.0 Moodle LMS experience. In this latest demo we will be showcasing the new navigation experience as well as a brand new component called the course index. 

Watch the following video for the latest 4.0 update: 

  

  

View the Desktop browser prototype

View the Mobile browser prototype

We are still creating lots of exciting new designs so please SIGN UP FOR RESEARCH HERE if you would like to shape the Moodle future with us. 

Thanks, 

Candice & The UX Team

Average of ratings:Useful (9)
In reply to Candice Diemer

Re: 4.0 UX Moodle LMS Update - February 2021

by Michael Blake -
Thanks Candice - really helpful. Love the new navigation tools. Looking forward to seeing more!
In reply to Candice Diemer

Re: 4.0 UX Moodle LMS Update - February 2021

by Tasos Koutoumanos -
Awesome!

The only part for which I would debate is the menu under the Course title (or "Homepage"). It feels more natural (to me) that when I click there I would see the "Course Index", rather than the "Settings, Participants, ..." options.

And a minor comment: In the mobile, it was tricky some times to press the hamburger menu, it felt like it wasn't a hotspot.

Keep up the great work!
In reply to Tasos Koutoumanos

Re: 4.0 UX Moodle LMS Update - February 2021

by Candice Diemer -
Thanks for the feedback Tasos!

The course index is a tool you can use to navigate course sections and activities. So if it was behind one of those menu tabs, you wouldn't be able to see or use when on the course. Hence why it needs to be viewable simultaneously alongside the course content, as it aids course navigation.

In edit mode, the course index is also going to be a tool you can use to manage and manipulate course content. In next months update we will have more to share with you on how that works so keep tuned to see the full experience.

Good point about the hamburger menu on mobile. I will increase the target area on the demo asap smile

Cheers,
Candice
In reply to Candice Diemer

Re: 4.0 UX Moodle LMS Update - February 2021

by Pablo Silva -
Hi, Candice and the UX Team. I loved the prototype!
A doubt, when I click on "my courses" the same tab on the right that appears when I click on "Class and conflict ..." appears on "my couses". The idea in the future is that when I click on "my courses" and then click on the right tab, will I have any pending issues? I'm asking, because I had done a survey with the students at my college and one of the problems that everyone had was that the issues were not clear to them, so many students ended up wasting their time to deliver school activities.
In reply to Candice Diemer

Re: 4.0 UX Moodle LMS Update - February 2021

by Hugo Ribeiro -
Thank you Candice & Team. This is getting really nice. Can't wait.

In the second tab group - so course navigation - I guess there won't be the need for the question bank option because it seems that will also change a lot, so maybe there's space for other option instead, right?
Never thought Course settings would be the most important option, because once it's done I usually don't go back , but that what makes UX interesting.
Keep up the good work!
In reply to Hugo Ribeiro

Re: 4.0 UX Moodle LMS Update - February 2021

by Candice Diemer -
Hi Hugo,
Thank you so much for the positive feedback!

Regarding the secondary tabs, thats absolutely correct - if an item from that menu is removed (such as question bank), it would be replaced by the next item in the menu list (on the right).

We are taking on board this feedback from everyone that the course settings tab might not be in the best position (in 2nd place) and will work on this with our product team. Out of interest, what would be your personal preference for the menu list order? Would you put the settings in position 3/4/5/6/...?

Regards,
Candice & the UX team
In reply to Candice Diemer

Re: 4.0 UX Moodle LMS Update - February 2021

by Anna Krassa -

Hi Candince, thank you so much for all the hard work and this enlightening presentation. 

I can't wait to try Moodle 4.0!

In reply to Candice Diemer

Re: 4.0 UX Moodle LMS Update - February 2021

by Nathan Lind -
Hi Candice, Hina, Marc, and others,
Thank you so much for sharing your current design thinking for 4.0. I appreciate the tremendous amount of work you have put into this, and your efforts to solicit advice and feedback from users. I wanted to share a couple of concerns that I hope might be addressed:
  1. Loss of hierarchical design. For instance, say a faculty assigns a set of readings, and provides directions/context and a set of related assignments. Current Moodle 3.8 allows those to be grouped together, or embedded, using various levels of indentation and labels, including lines. We also use the amazing feature of auto-linking. How would these types of designs be accomplished in 4.0?
  2. A lesser issue is dramatically longer course pages. I estimate each assignment/forum will take up 3-4x as much vertical space in 4.0 compared to previous designs because each resource and activity is now a separate block. Our courses are 15 weeks long, with one section per week. Makes for very scrolly blocks. The Course Index does not completely address this, for instance when wanting to look at the course as a whole, with images, labels, tables, etc.  

Thanks! 

Nathan

Attachment screenshot#1.png
Attachment screenshot#2 - using auto-linking.png
In reply to Nathan Lind

Re: 4.0 UX Moodle LMS Update - February 2021

by Marc Decerle -

Hi Nathan,

Thanks for this feedback. Regarding your point about course hierarchy (with labels and indent). This is on our radar and we are exploring options at the moment.

Would you mind sending a link to one of your course pages so we can replicate your content in the new design. i.e. not a screenshot, something where we can copy/paste content.

Feel free to PM or email if you can't share publicly.

For your concern about the height space of activities, we are also still exploring if they will be displayed in "a box" or just have separators (check out the upcoming 3.11 update).

Cheers

In reply to Marc Decerle

Re: 4.0 UX Moodle LMS Update - February 2021

by Nathan Lind -
Hi Marc,
I'd like to test out the way you are thinking of displaying activities and resources, and wonder if you can direct me to where I can see a demo of Moodle 3.11? I tried these two demo sites and both seem to be on 3.10:
https://sandbox.moodledemo.net/
https://school.moodledemo.net/
Thanks!
Nathan
In reply to Nathan Lind

Re: 4.0 UX Moodle LMS Update - February 2021

by Luiggi Sansonetti -
Hi Nathan

There is a specific prototype for the student activity completion improvement :
https://muademo.prototype.moodledemo.net/

But for the moment, only the qa.moodle.demo is in 3.11 (and moodle org) :
https://qa.moodledemo.net/

The sandbox and school platforms will certainly be updated very soon (because they are based on "stable version" 😉).

To be aware, a page presents and lists the prototypes :

And it will also be updated soon 😁
Average of ratings:Useful (2)
In reply to Candice Diemer

Re: 4.0 UX Moodle LMS Update - February 2021

by Matthias Giger -
To Candice and everybody else who is involved in design:

First of all thanks for your great work, and I'm also quite pleased that the new design is trying to declutter the sometimes less than obvious navigation in the current Moodle version. That's why in our new course design we were also thinking about a cleaner layout:

Example of new course design

The elements I like are the clear navigation at the top the course index and the fact that you can always hide the blocks on the right side so easily.

I have concerns with the course index: How will it look when you have a lot of resources in a course: Our courses typically have around fifty resources per topic. So from what I guess is the current state of design, this will lead to an endless long course index. Or will there be an option to collapse the part you don't need?

The priorities of the navigation links under the main title at the top of the page where also a bit surprising to me, as I definitely have other priorities there, but hopefully this will be customizable through theme plugins.

Another concern is the huge amount of white space on the left and right of the main course. On some devices this means that you could lose some screen estate especially when you move to activities like quizzes who probably still have to present more information at one glance.

Another thing I like and dislike at the same time is how the main content behaves when you blend in the navigation bar or the course index. From a users perspective it is very good that the main content doesn't change its width which at the moment can lead to content to move outside of the viewport of the user. What I like less, is the fact that the content moves to the side, but I guess that's still a preferable solution to the current state in Moodle 3.10.

To summarize, the will to make Moodle literally more visually accessible is clearly visible, and I hope that the new design will consider the needs of institutions who build big courses with many resources. I suppose, indendation of activities and resources will still be an option as it reflects the hierarchy of materials presented. And I certainly hope that the new design won't break all the great plugins available for the core system.

After your presentation I'm curious what other design improvements will come along the way in the next months.
In reply to Matthias Giger

Re: 4.0 UX Moodle LMS Update - February 2021

by Candice Diemer -
Hi Matthias,

Thank you so much for sharing your feedback!

Answer re course index: Yes, the sections are collapsable so for very long sections, you will be able to close those sections.

The priorities of the navigation links : out of interest, what order would you have them in. And yes, these will be customisable smile

Main content and device breakpoints: This is something we are currently working on and will ensure on a large screen we will enable course index and blocks to be viewable simultaneously as well as being able to easily access the quiz blocks on smaller devices. Thanks for your feedback, we will take this onboard in our future iterations.

Keep an eye out for the next update which will be revealed in about 4 weeks!
In reply to Candice Diemer

Re: 4.0 UX Moodle LMS Update - February 2021

by Matthias Giger -
Hi Candice

Customisable navigation links are great.

The order I would probably set up: Home > Participants > Question banks > Grades > Reports > ... Settings
But I'm probably a special case because our courses cover the material for a whole year and contain a lot of interactive elements.

As for displaying the content: I'm sure you will come up with an amazing solution as Moodle has gotten a lot more eye candy over the years (as well as functionally improved of course).
Average of ratings:Useful (1)
In reply to Matthias Giger

Re: 4.0 UX Moodle LMS Update - February 2021

by Adam Barbary -
Hi Matthias, I also found the order of items interesting. In our use case, Settings would be used at the start of the course, (16 weeks) but unlikely again. I would have thought grades, reports and participants to be higher on the list. I would love to be able to customise this easily though.
Cheers,
Adam
In reply to Candice Diemer

Re: 4.0 UX Moodle LMS Update - Course tab navigation?

by Jacques LeCavalier -

Great work, Candice and team, and great discussion!

Very long, resource/activity-rich courses is my concern as well. Collapsible sections will help, but has it been determined that the "one topic" format with tab navigation for sections/modules will no longer be supported? 

This seems like the case since there is a new course tab menu and a second level of tabs for a course may be awkard.

Can this be confirmed, or are you still currently examining how/whether to accommodate existing course formats?

...the other concern of course is how to update/convert courses using formats that may no longer be supported...

thanks.
Jacques

In reply to Jacques LeCavalier

Re: 4.0 UX Moodle LMS Update - Course tab navigation?

by Chris Kenniburg -
Good points Jacques. For very long courses I suspect your users will want to become friends with the new Course Table of Contents block on the left to navigate up and down the pages. I wonder how this scales when you have a course with 30 or so items in a topic?

My guess is that better training and usage of the various tools will be needed. For instance, a page can store lots of links to documents or websites and is a bit nicer than including 10 or so external links right in the topic.
In reply to Candice Diemer

Re: 4.0 UX Moodle LMS Update - February 2021 - Dashboard vs. Actionboard

by Dag Klimas -

Thanks, Candice & The UX Team!

I love it and can't wait ... exactly 17 years ago today I started with Moodle, and now I am looking forward to the new design.

One approach that came to me while watching the great video: I get the impression that the dashboard is now more of an actionboard. In other words, a place where I am informed about my upcoming activities.

If you want me to leave the approach in another place, please give me an information.

Keep up the good work

Dag from Berlin


Note: For faster translation I have used deepl.com

In reply to Dag Klimas

Re: 4.0 UX Moodle LMS Update - February 2021 - Dashboard vs. Actionboard

by Candice Diemer -
Thank you for the positive feedback Dag!

That is absolutely correct about the Dashboard. In fact, I think we should change the name to ACTIONBOARD because that's exactly what we want this area to help our users with - taking action and planning their time!

Many thanks and glad you are enjoying the new changes 😁
Candice & the UX team
In reply to Candice Diemer

Re: 4.0 UX Moodle LMS Update - February 2021

by Chris Kenniburg -
I wonder if it would make sense to make Activities which require a block a special use case where other blocks cannot display? If I go to a Book module and blocks appear that I ignored on the homepage then I am more likely to not pay attention to the critical block for the Book Module.
I've never been a fan of required blocks for an activity appearing with blocks from the course home page. I just don't feel like the two should mix.
In reply to Chris Kenniburg

Re: 4.0 UX Moodle LMS Update - February 2021

by Tim Hunt -
Do you have a suggestion for how the User interface of those activities should look instead?
In reply to Tim Hunt

Re: 4.0 UX Moodle LMS Update - February 2021

by Chris Kenniburg -
I'd suggest using the block area just as it is now but not allowing the blocks from the course homepage to carry over. So if a book module is used no other blocks may appear with it.
In reply to Chris Kenniburg

Re: 4.0 UX Moodle LMS Update - February 2021

by Mathew Hillier -

Thanks UX team for the good work so far smile

I would support the idea of a focused interface.

ideally the further into the levels of content you go, the more focused the UI should be. 

Therefore in the case of the Book module, having only the book nav block viable would be a good idea.

Alternatively, minimise other blocks... I recall in older versions of Moodle you could 'minimise' blocks one by one.

Perhaps a middle way in this case of a Book Module would be to have the book nav block open while all other blocks are 'minimised' just showing their headers.

However, I would not want to loose the capability to configure exactly which other blocks are present on a per activity basis. e.g when using Quiz the standard Nav block plus have a custom HTML block containing some other useful tools.

best regards!

Average of ratings:Useful (1)
In reply to Mathew Hillier

Re: 4.0 UX Moodle LMS Update - February 2021

by Rafael Lechugo -
Picture of Moodle HQ team
Hi Mathew!
I love the idea of a "focused" mode for book activities. We'll definitely consider this idea in the near future. 👍
Keep those ideas coming!
In reply to Candice Diemer

Re: 4.0 UX Moodle LMS Update - February 2021

by Edward Beck -

Hi Candice,

Thank you for doing this work publicly and soliciting feedback throughout.

The new "course index"

I love this concept, that there is a quick guide that a study can look at to see the course organization and quickly navigate throughout the course. I think it is wonderful. The one question I have about it is the decision to only include some course elements and not all course elements. In the prototype, it looks like you are only including "activities" and not "resources." 

It was a few seconds of confusion for me, because I was trying to navigate to something in the course, but didn't see why what I needed wasn't included in the list. I wonder if you could share your thought process in not including all course content? 

My opinion: If the dashboard is the place to figure out what's due next, then the course index would be better if it includes all content.

The next/previous navigation buttons

One thing that really jumped out at me is that there were no next/previous buttons for navigation anymore. Was that an oversight because it wasn't really the focus of the demo, or are those being removed again?

We use some LTI integrations that really benefit from next/previous buttons, so we would really miss them if they were gone. In the past we had added them back in through plugins, and were really happy when they were reintroduced as a core feature.

In reply to Edward Beck

Re: 4.0 UX Moodle LMS Update - February 2021

by Candice Diemer -
Hi Edward,
Thank you for your feedback! We made it a priority to work with our community and end users, who without their help, this would not have been possible smile

Some answers to your questions:

Course index: All course elements will be included in the course index. Apologies if this is not clear in the prototype but rest assured, activities and resources will be displayed in the list of items.
 
I also like how you linked the dashboard with the course index... we have some ideas that emerged in our studies where we could even indicate "whats next" in the course index. Something for the future but it could be helpful for users not only navigating to different sections and activities/resources but also being informed of progress/time etc. Watch this space!

Next / previous buttons: Could you please send me a few example screenshots of your buttons please? You can send them through to my email address and the UX team can pick this issue up.

Thanks!
Candice
In reply to Candice Diemer

Re: 4.0 UX Moodle LMS Update - February 2021

by Edward Beck -
Just the standard buttons that are usually at the bottom of every Moodle page that let us go on to the next activity or resource. They are part of Moodle core / boost currently, and I noticed they weren't part of the prototype. Was it just an oversight?




In reply to Edward Beck

Re: 4.0 UX Moodle LMS Update - February 2021

by Edward Beck -
Hi Candice,

Just checking in about the next/previous navigation. Will the next version of Moodle have forward and back buttons at the bottom of each page?

I would completely expect for the "Jump to..." dropdown menu to be removed, because users will use the course index instead, but I really hope the next and previous buttons will still be there.
In reply to Edward Beck

Re: 4.0 UX Moodle LMS Update - February 2021

by Rafael Lechugo -
Picture of Moodle HQ team
Hi Edward!

Yes, the plan is to keep both "Next" and "Previous" buttons indeed. Thanks for highlighting this issue, this is definitely something we can't miss in V4! 👍
In reply to Candice Diemer

Re: 4.0 UX Moodle LMS Update - February 2021

by Richard Samson -

Great work, Candice and UX team. Looking forward to seeing the next steps.

This already looks unclunky. I think that the key information around each course item (completion, dates, etc.) give the page a much more structured feel.

A concern could be the amount of white space in the desktop version. Might there be a setting for this? i.e. more or less condensed, together with other options such as width, line spacing, font size, font family, etc. Or is this too messy?


In reply to Richard Samson

Re: 4.0 UX Moodle LMS Update - February 2021

by Nathan Lind -

Good suggestions/questions Richard! I too would hope for options to change the layout, if the width will no longer be responsive to the browser window width. 

Nathan

In reply to Nathan Lind

Re: 4.0 UX Moodle LMS Update - February 2021

by Edward Beck -
@Nathan and @Richard,

There may be other reasons why they don't want the center column to be responsive to the browser window width, especially if they are looking for Moodle to hit AA or AAA accessibility compliance with WCAG 2.1.

https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html
Visual Presentation Criteria AAA particularly mentions having columns be narrow. They mention 80 glyphs wide in the success criteria (or at least not prohibiting the user from getting to an 80 glyph wide using the standard zoom features in their browser).

My understanding of the reasoning is that eye-tracking becomes difficult when columns of text are especially wide and some people lose their place. So there may be some benefits to not allowing that center column to be really wide in terms of readability.
In reply to Edward Beck

Re: 4.0 UX Moodle LMS Update - February 2021

by Mathew Hillier -
Like the clean new design smile
I would also support the ability to 'maxamise' the main content column when side bars/blocks/nav are hidden.
The ability to focus user attention on the main content. i.e ability to hide the nav/blocks is great, but there is wasted screen realestate.
The ability to increase text size i.e "CTRL +" on the browser making best use of the full screen width.
The ability to zoom in and have it fill the screen when projecting web pages in a lecture hall.
Hopefully the 'fixed width' main content column is configurable? As a min that should be in stylesheets and not hard coded in html so it could be changed - perhaps a setting in the theme.
It would be extra great if there was the ability for each user to toggle between 'fixed width' and 'responsive (100% width)' for the main column so they could then choose according to their need.
best regards!
In reply to Mathew Hillier

Re: 4.0 UX Moodle LMS Update - February 2021

by Rafael Lechugo -
Picture of Moodle HQ team
Hi everyone!

Having the content in a narrower content is important for readability and keeping the user eye tracking in the same screen region. However, since some content will not fit in this narrow space, we decided to have two different page layouts, which will be used for different page contexts.

Most common pages like dashboard, course and activities will have a fixed narrow width which will increase the users satisfaction when using the product (as mentioned above). Other pages like "Site administration", report pages, etc. will stretch to fill 100% of the screen space (like it does in current Moodle 3.X versions).

I hope that makes sense.
What do you think?
In reply to Rafael Lechugo

Re: 4.0 UX Moodle LMS Update - February 2021

by Chris Kenniburg -
How does H5P and other embedded LTI tools look in the narrow width? Some activities are designed to require larger space on the screen to function properly without scrollbars.
I really love the new design and layout I've seen from mockups. I wish I could play with it to test some things out.
In reply to Chris Kenniburg

Re: 4.0 UX Moodle LMS Update - February 2021

by Rafael Lechugo -
Picture of Moodle HQ team
Hi Chris!

Moodle 4.0 will have two different page layouts:
- Narrow-width: will be used in the most common pages like home, dashboard and course page.
- Full-width: will be used in Site administration, course activities, reports and probably H5P and LTI.

So we'll have these page layouts and use them on different pages, depending on its content.
In reply to Rafael Lechugo

Re: 4.0 UX Moodle LMS Update - February 2021

by Edward Beck -

If you are working on the display of LTI pages, can you look at this tracker issue:

https://tracker.moodle.org/browse/MDL-64972

Moodle has a problem displaying LTI pages, because by default LTI containers are very short. This means that you end up scrolling inside the page.

The LTI Standard has a way of passing the height of the page to the LMS which is implemented in Canvas and D2L. There is an existing Moodle plugin that adds that capability into Moodle, which was a major quality of life upgrade when I installed it on the server. Basically, any LTI that is made to work well with Canvas (which is most of them) will have an improved user experience.

The plugin works so well, I think it should be integrated into Core, especially with the increased focus on LTI in higher ed.

In reply to Edward Beck

Re: 4.0 UX Moodle LMS Update - February 2021

by Rafael Lechugo -
Picture of Moodle HQ team
Thanks for the feedback, Edward! I'll let the rest of the UX team know that! 👍
In reply to Rafael Lechugo

Re: 4.0 UX Moodle LMS Update - February 2021

by Ralf Hilgenstock -
Can you check also SCORM/AICC pages.
Most content is defined for full page width and is not full responsible.
In reply to Candice Diemer

Re: 4.0 UX Moodle LMS Update - February 2021

by K K -
Hi Candice,
Thank you so much for all the hard work.

I can't wait...
In reply to Candice Diemer

Re: 4.0 UX Moodle LMS Update - February 2021

by Roger Emery -

Thanks Candice, this looks great. really cleans up the clutter.

One area I'm interested to better understand is the course page menu that shows Course|Settings|Participants..etc across the top.
I see all those items, other than "Course", as "admin items", where I would like the focus to be on "Learning items" (if that makes sense).Is that menu customisable to allow that?

We have used tabbed browsing at Solent for a number of years (using an adapted OneTopic course format) and have tabs in that position to move through the learning items. We have the first fixed standardised to our "SOL Standard"  - Overview; Assessment; Readings and Resources; Learning Community; Managing Learning; then further tabs as decided by the tutor. Each tab (ie Moodle Topic) can then have sub-tabs or the normal Moodle scroll down of activity and resource items. Works really well and provides a very consistent approach as students move between modules (moodle courses). So "Learning Items" are front and centre, while the "Admin items" are on the side menu.

Happy to discuss in a call if it helps.

Solent Moodle course page example






In reply to Candice Diemer

Re: 4.0 UX Moodle LMS Update - February 2021

by Hakan Tilgel -

That IS GREAT news Candice. Cannot wait to see the outcome of your hard work you have put. Tank you all!

Just a quick advice/request on a issue... It would be GREAT to have a feature to fetch an activity grade from another course! I hope you consider this as there are other users/admins who would like to have this feature.

Ciao!

In reply to Candice Diemer

Re: 4.0 UX Moodle LMS Update - February 2021

by James Williamson -

Great work, Moodle Team, and thanks for the presentation, Candice!

Since you asked, one UX note to make: when an activity has been completed, the oval turns to green (nice!), but the label still reads "To do: View". Could this be re-worded to avoid confusion to something like: "Viewed" or some such. The lasting "To do" moniker may trip some users up.

Best on your continued work!


In reply to James Williamson

Re: 4.0 UX Moodle LMS Update - February 2021

by Rafael Lechugo -
Picture of Moodle HQ team
Hi James! Good catch!
This is probably some small bug in the prototype...
Actually, you can see this activity completion in action in Moodle 3.11. The activity completion says "Done: view" in those cases!

Thanks for the feedback!
In reply to Candice Diemer

Re: 4.0 UX Moodle LMS Update - February 2021

by Michelle Melton -

Our faculty have requested that the eye icon be added next to each activity in a course (when editing is turned on, next to the pen icon) for faster access to hide/show activities and resources.

Upon submitting the request to Moodle Tracker, it was suggested I post the feature request here, to see if others in the Moodle community would find this change useful.

Thanks for any feedback!

In reply to Michelle Melton

Re: 4.0 UX Moodle LMS Update - February 2021

by Richard Samson -
I get this, Michelle, but I don't know if the suggestion will be popular with the UX designers. Promoting 2nd level options to the top level creates more on-screen clutter and breaks the hierarchy: hiding is a kind of editing, so it should be under the pen icon, not beside it. Then again, why promote the hide icon but not the duplicate icon, for instance? Just some thoughts!
In reply to Candice Diemer

This forum post has been removed

The content of this forum post has been removed and can no longer be accessed.