Hi everyone,
During my personal project week at Moodle HQ, I decided to give it a go at removing both the navigation block and the administration block from the page. I was mainly motivated by several aspects of the navigation that I don't like:
- The navigation can be very long, especially when there are many course sectionsThe content appears to change from page to page
- This because some nodes are sometimes expanded, sometimes collapsed (especially in the admin block)
- Sometimes the nodes appear to be renamed
- Some pages with very low value are accessible on every pageThere are inconsistencies between what is supposed to be in the administration block, and what's not.
From a beginner point of view, it is very difficult to find your way around. And if you are a teacher it is probably even harder because you are presented many navigation options.
I am not a usability expert, and I don't pretend to be one. The research I did is based on my own assumptions and practices that I have observed in other environments. Also, please note that the following are focused on students and teachers user experience, especially in a course. As I am not a designer either, I quickly arranged those so that it looks OK, the purpose of my research here is to demonstrate what could be done, the technical and "beautifying" part isn't part of it.
1/ Direct access to user-related pages
The place where was displayed the information about the currently logged in user is now used to allow the user to quickly access his own stuff, like his profile, his grades, badges, and his preferences.
Another icon is used to access everything related to messaging. I am still unsure about that, ideally this would be changed into a notifications icon, which would eventually develop into messages, notifications, etc... This allows use to remove the need for My profile in the navigation block.
Key factors:
- Each dropdown menu has to be as minimal as possible, very few links.
- The dropdown items should not lead to something that you can be accessed via normal navigation. Example: My courses.
- Items that are subsidiary should be accessible from your own profile. Example: Notes. "Forum posts" could be a good candidate.
2/ User preferences page
In order to get rid of the "My profile settings" in the settings block, I created a "Preferences" page which is accessible in the "Direct access dropdown" mentioned above. As most of the settings offered to the user in the Settings block are unlikely to be used often, they don't need to be accessible directly, on every page!
3/ No more navigation block
All the navigation happens via the breadcrumb. Each node of the breadcrumb allows you to jump into neighbour nodes that you have access to. Like all the activities in the current section, or all the courses in the category that you are browsing.
Key factors:
- The modules should extend the navigation in the same pattern, ideally not more than one level
- The administration block should never be used for students to navigate in an activity. This is wrong! Students should never have to hear about "Administration".
4/ Where am I?
The breadcrumb would certainly constitute a very good point of reference to figure out where you are. But on top of that I standardised the headings so that you always see the course name, and if you are in an activity, the activity name as well. This brings another level of consistency to help the user identifying where he is.
5/ Course related pages
The content of the course can easily be accessed via the course page, and the breadcrumb, however some others pages also need to be accessible. Now, as soon as you are in a course, the top bar gets a new icon. I am not entirely sure about the position of this icon, but as a course is a massive set of content that you have access to (and so important enough), I thought that it wasn't that bad to put it there.
Next to the icon you have the course shortname, this helps the user identifying that this menu is likely to change from one course to another, and that they should keep on having a look at it.
Currently this would give access to the participants page, and your own grades. When you are a teacher, you would get access to the gradebook, and a preferences page (understand settings/configuration/options) which is like the user's preferences page.
5/ Activity settings
As the activity name is now forced, I have added a dropdown next to the activity name to get access to its settings and settings page. This dropdown should never be visible by students. I haven't had time to work more on that, but ideally the content should be relatively small, possibly linking to a Preferences page. Again, keeping in mind that only the most important stuff among the settings of the module should be visible by default. The rest should only be accessible in the "Preferences" page.
So for example, this dropdown could contain:
- Modules settings
- -
- Important settings entry 1 (defined by module)
- Important settings entry 2 (defined by module)
- -
- Other (Leading to a classic "Preferences" page, which gives access to "Backup", "Roles", etc...).
6/ 2 columns design
As we now don't need to navigation block or the settings block any more, a 2 column design seems more appropriate. It gives focus on the content.
Rules I applied (or to apply)
- The top bar is a fixed navigation, its content should not change depending on where you are. I made an exception for the course dropdown, but I am not 100% convinced that this was the right thing to do.
- The content of a dropdown should never change. Except it is made clear that the page has changed. Example:
- The activity settings dropdown is allowed to change because it is visually tied to the activity itself.
- The user dropdown never changes, as its content is totally independent of the page we are currently on.
- The course dropdown content changes according to the course, but it never changes within the course. It remains the same.
- Each dropdown should be concise.
- To be part of a dropdown, a link should be really important. If it is not important enough, then it can be placed into another page.
- No submenu in the dropdowns! Otherwise we fall back into a nested navigation.
- It is better to have a link in the right place in context, rather than in a long navigation. Example: To subscribe to a forum, you should have a little link on the main page of the forum. This is should never be part of the navigation.
- The course dropdown is not placed next to the course title because it would distract a student. It breaks the flow of the page.
- Modules should extend the navigation either using tabs, as some already do, or via in-context links.
Further improvements
- Have a dropdown for quick access to different gradebook views (teachers)
- Same for reports. (teachers)
- Somehow get the Site administration content accessible (managers)
- Solution for subsidiary content that is not more accessible (all)
- Solution to access site pages. (all)
- Solution to access category settings from category pages. (managers)
What is needed to get that into core
Most of the logic is based on the current navigation lib.
- Extending the current navigation lib to support more "Node types"
- Creating renderers for the dropdowns and the breadcrumb
- Updating modules and pages to follow the new style
Try it out!
You can give it a go by checking out my branch, but don't look at the code which is really horrible! As I mentioned, I wanted to try out the user interface (not designing it in Photoshop), not spending time on making nice code. The code hacks the core and theme/clean.
https://github.com/FMCorz/moodle/commits/MDL-ultranav-master