I am frustrated with how my Moodle pages look and especially as I have moved away from the Book Resource and still struggling with the Lesson Resource
Janetta Garton in designing aesthetically pleasing Moodle courses has given me some good things to think about. I am going to start packaging my courses better.
Image by opensource.com
When you’re working online and you access a text heavy web-page that scrolls for 5 pages, what is your initial reaction? To most of us, a text-heavy page filled with a long list of resources and activities is not inviting or enticing. The same is true for students and online courses. But with a little sleight of hand, plus use of the right resource formats and labels, you can design an aesthetically pleasing online course and avoid the long scrolling webpage syndrome.
First, a mini lesson on design
A good user interface has: clarity (no manual required), concision (concise and clear), familiarity (users recognize elements), responsiveness (clicks lead to speedy responses), consistency (the interface is consistent throughout all areas), aesthetics (attractive), efficiency (users get where they need in a few clicks), and forgiveness (strategies to remedy user mis-clicks, “Are you sure you want to delete this?”).
Building blocks of visual interface design
- Layout defines hierarchy and relationships. Vary the white space between elements to making grouping obvious.
- Positioning can improve flow.
- Using different shapes for icons makes them easier to recognize. Icons are visually appealing but less clear than words, so use effective metaphors when choosing buttons.
- Size can be used to show importance. Size can also be used to provide an efficient interface by making hotspots large and easy to click on.
- Use color to attract the user’s attention by having a strong contrast with the background. Convey meaning with color (red = stop/error). Color can also show relationships, making data easier to read or types of buttons easier to find.
- Use contrast to increase the usability of the interface and to indicate importance. Use shadows and darkened backgrounds to focus the user’s attention and reduce visual noise or to add visual weight.
- Use texture to indicate how an element can be used (ridges on a corner indicate users can click and drag it).
- For text, select fonts and set the scale to increase the readability. Italics and upper case are more difficult to read so use for titles and captions. Use size to guide readers and provide organization. Less is more when is comes to using multiple fonts.
Moodle course design strategies
Four strategies I use when laying out a Moodle course:
- Chunk content into Books or Lessons and include multimedia.
- Use hidden topics with visible resources and activities.
- Link to resources and activities in context, in books, lessons, sidebar blocks, etc.
- Use a label in Topic 0 to create a menu on the homepage.
Chunk content into Books or Lessons
First, I usually chunk my content into Books. I like to use the Book resource to keep my web page short and provide a table of contents, which means easy navigation for my users. So rather than using 5 topic boxes on the home page to display a list of resources and activities, I may use one Book with 5 chapters, or maybe 5 Books, dependent on the amount of content.
A Lesson is another resource format that works well for such purposes. Lessons allow you to set up branches to control what the user sees/does next based on their responses. I’ve used this to provided choices for my users, but it could be used to guide students to remediation or review before moving on to the next topic. Lessons can be a bit confusing to setup with the “if this then that” branching system.
Books and Lessons in Moodle from Willard High School on Vimeo.
Books and Lessons in Moodle from Willard High School on Vimeo.
I also create additional elements by publishing a web page, a quiz, or a certificate; uploading a pdf file; or posting a forum for questions. Videos I upload to Vimeo and embed where needed. For slideshows I typically create those in SlideRocket (which our teachers and students have free access to via their Google Apps accounts) and embed them as well. I use Camtasia to record screencasts and upload those to Vimeo so as to embed or link to them in course. MyBrainShark (also available through Google Apps) is a great tool for posting your slideshows or documents online and adding narration.
Hidden topics with visible resources and activities
For my Moodle courses I use the Topic format. I create all my resources and activities in the Topic 1 section of my course. Topic 1 is set to Hide. Each of the resources in Topic 1 are set to Show.
Use Hidden Topics to House Resources and Activities in Moodle from Willard High School on Vimeo.
Link to resources and activities
In my Books and Lessons I will link to handouts, quizzes, and webpages (all listed in Topic 1). Sometimes I link to one of the elements in a sidebar box (certificates). Using this method, instead of a long list of resources and activities organized in several topic boxes, I can link to elements in context, making them more meaningful to my users and adding clarity to my course.
By right-clicking on a resource or activity in Topic 1 and choosing “Copy Link Location” or “Copy Shortcut” I place on my clipboard the web address for that element. I can now create a link anywhere in my course to this element using this copied web address.
Link to Resources and Activities throughout your Moodle Course from Willard High School on Vimeo.
Create navigation system using a Label
To keep my homepage concise and efficient, while providing an attractive starting point for my users, I add a Label to Topic 0 and use that to create a menu for the course. I often insert a table in the label to allow me to create a uniform set of buttons or icons. With the border set to 0 for the table, users don’t see the table, only the buttons. Sometimes I use photos, which I usually find via FlickrCC. Sometimes I use clipart from OpenClipart, LoveVectorFree, or Clker.com. I look for free media licensed with Creative Commons, and typically credit my source in a block on the sidebar. I use Snag-it to edit the images as needed, sometimes adding 3 dimensional button effects. Any image editing software will work. I use Snag-it a lot for my screen captures and am very comfortable with it. I usually include text with the buttons. Sometimes I include these images on pages in books or Lessons to provide consistency and familiarity in my course.
Use Labels to Create Menus in Moodle from Willard High School on Vimeo.
