Designing Moodle Courses vs Scroll of Death

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.

Designing aesthetically pleasing Moodle courses
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:

  1. Chunk content into Books or Lessons and include multimedia.
  2. Use hidden topics with visible resources and activities.
  3. Link to resources and activities in context, in books, lessons, sidebar blocks, etc.
  4. 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.

CSS TOOLBOX: 20+ Tools For Working With CSS

CSS TOOLBOX: 20+ Tools For Working With CSS
Have you always been reliant on others’ templates for your blog or website? You’d like to customize them, but you’re just not sure how? Perhaps it’s time to finally wrestle with the secrets of CSS. This collection of CSS-related links should be a good start – from basic tutorials to advanced tools, it’s all here.

456 berea st

456 Berea Street – Numerous guides and tutorials on advanced CSS tricks.

Cleancss.com

CleanCSS.com – Tool to help you clean up your CSS and optimize it.

CodeBeautifier.com

CodeBeautifier.com – A CSS code formatter and optimizer, but stresses it is not a validator.

CSS Tweak

CSS Tweak – Just as the name implies, upload your CSS and you can tweak it on the go.

css-ref

CSS-Ref.com – A tool for practicing your CSS skills or writing an actual layout.

CSSCreator.com

CSSCreator.com – Will create a page with up to three columns and header & footer.

CSSDrive Compressor

CSSDrive Compressor – A utility to compress your CSS saving you drive space, bandwidth and loading times.

CSSFly

CSSFly.net – An in-browser CSS editor that can also do HTML.

CSSOptimiser.com

CSSOptimiser.com – A tool for compressing your CSS code and allowing the file to load faster.

CSS Pagemaker

CSS Pagemaker – A simple CSS pagemaker wizard with easy fill-in-the-blank questions.

CSS Redundancy Checker

CSS Redundancy Checker – Enter URLs to let the site check for redundant calls and repetitive code.

CSS Rollover Generator

CSS Rollover Generator – Create rollover images using nothing but CSS.

CSS Superdouche

CSS Superdouche – Enter the URL of your CSS file, the site checks it, cleans it up, and gives you new CSS you can paste back in to your site.

css tidy

CSSTidy – A Sourceforge project of a CSS optimizer and parser.

em calculator

Em Calculator – A Javascript based tool for making scalable CSS design based on Em units to work easier with text size.

layout-o-matic

Layout-o-matic – A tool for helping you generate simple page layouts with several column variations.

List-u-Like CSS Generator

List-u-Like CSS Generator – Lets you create cross-browser, list based navigation bars with ease by defining all the parameters and the site generates it for you.

roundedcornr.com

RoundedCornr.com – Generate HTML and CSS images and code with rounded corners and gradients.

Sky CSS Tool

Sky CSS Tool – All you need is a JavaScript enabled browser and you can create your new CSS page in-browser.

Spify Corners 2

Spiffy Corners – An easy to use site that generates a colored box in CSS code with rounded corners with the specs you request.

TheBoxOffice.de

TheBoxOffice.be – A CSS and XHTML generator to help you wrap text around an image.

YAML Builder

YAML Builder – An in-browser HTML/CSS coder with a real-time preview of how the page will look.