In the image below you can see that we have stripped Moodle bare of all it’s blocks and homepage info. We did this to have more control over directing users and making the tool easier to use. Without all the homepage dustractions the end user is able to get in, enroll in a course, or quickly access a course they are enrolled in. That is the purpose of our Moodle homepage and anything else is just fluff and a distraction.
As you can see there are 4 main elements: My Home, Calendar, ePortfolios (Mahara), and Course Search. Below that is a bootstap/jquery tabs displaying “Getting Started” information. The tabs conveniently hide the content until the user selects it making the homepage just a little more clutter-free.
Simplify Your Moodle Homepage/Frontpage
Short version
- Determine what and how you want users to do when they arrive on your site. You need this info in order to know what buttons/icons/links you will need to add back into your homepage
- Use Michigan Moodle theme
- Mute the colors of the theme so that the focus is not the theme but the content in the courses!!!
- Remove all homepage/frontpage blocks and features
- Add custom HTML to topic section
Long version
Planning: Without a good plan and direction from your user base you are reading the wrong blog post here. A good plan and idea of what and how you want students to get around in your site is critical. Here are some tips.
- Talk with your users and determine what is absolutely critical to them to have on the homepage.
- Never ever have more than one way to get to a resource from the homepage. Only provide one path of access. This eliminates confusion and lowers the cognitive load when first presented with Moodle. You don’t want your users over thinking how they should navigate the site.
- Keep the icons or buttons consistent. Same size and shape. Evenly spaced. Similar colors. Boring is good here. If it is 20pt font and flashing you might have a site that will eventually look like this: Everything is important – Nothing is Seen.
Michigan Moodle Theme: Download a copy off Github. We are using this on a live site but don’t yet feel it is ready to be committed to Moodle.org’s plugin repository. When you download the ZIP file you must unpack it and rename the folder to “mimoodle” and then upload it to your server by either re-zipping it or FTP the folder to your theme directory. Setup all the various features that you want. We recommend using soft and muted colors as to not draw attention away from your content and coursework.
Configure the Frontpage: Go to Site Administrator > Frontpage >Frontpage Settings. Remove all the common frontpage elements from the drop down menus: Site news, combo box, course list, etc. Then be sure to check off the Include Topic Section so that you can add your custom HTML code. See the image below. After saving your Frontpage Settings, head on over to the homepage and then remove any blocks you may have added in the sidebars. You should only be left with 2 blocks: Navigation and Administration. These are typically locked so you cannot delete them. Instead for these two blocks click Configure Block and find the setting which allows you to “Hide On This Page”. Save the settings. Logged in as admin they will appear but greyed out. Turn editing off and they disappear completely until your turn editing back on and return to the homepage. We elected to only have the Logged In User block display so students could verify who was logged in when working in a lab situation with lots of kids coming and going.
Custom HTML: Once you remove everything from your homepage you need to head on over there and begin building your simplified design. Turn editing on and click on the Edit Topic Summary icon. Here is the HTML code used on our homepage: Moodle Homepage HTML (ZIP). This is meant to be used with the Michigan Moodle Theme.
- You will need to upload your own icons to make as links.
- Atto will strip away the code for the Search Bar and may break it from working when using the visual mode. Everytime I edit the homepage I have to use HTML mode and copy in the search code EACH time.
Get creative and have fun! Keep it simple stupid for your users. Too much information on the homepage just takes longer to find and do what they need to get done!