enhancing your moodle pages

Formatting and Enhancing Your Moodle Materials

You can use Moodle as it comes without having major design problems, but it's well worth paying attention to a few design principles that will enhance your users' language-learning Moodle experience. Before you begin, why not take a look at other Moodle sites and see what you like or don't like. Look at things such as layout, ease of navigation, use of color, and images. You'll find a list of thousands of registered Moodle sites at http://moodle.org/sites/.

There are three main types of Moodle pages to consider when it comes to design:

Moodle front pagesMoodle course pagesMoodle activities

Before we go into detail about design considerations, let's look at examples of each of these to see how we can improve them with a few basic steps.

Moodle front page

If we take Moodle straight out of the box, set up some blocks for the main menu, provide some useful links, and set the front page settings to show a list of courses, we could have something like this:

•••


[ � ]

BEFORE

It's functional enough, but not very engaging. Just by making a few changes, we can make the front page much more interesting and readable:

AFTER

Chapter 11

[ � ]

What's changed?

There's a new theme (Moodle speak for the color scheme and automatic font choices). There's a section on how to change your site's theme in Chapter 2, Getting Started with Moodle. As we'll see in a bit, some themes also include tabs and drop-down menus.There's an appropriate image in the top-center of the screen to draw users in.The About this site block has a photo of the administrator, which provides a personal touch.There's an easily-identifiable "start here icon"—another helpful feature that guides your users in the right direction.

Moodle course page

Like the Moodle front page, a standard course page automatically creates three columns for us to fill with text. If we choose a topics format from the Settings menu and write out a list of activities and links for our course, it could look something like this:

BEFORE

•

••

•


[ � ]

The problem here is that it's difficult to distinguish important information from unimportant information. There's a lot of scrolling to be done, and there are no visual clues as to what the course page is about. Here's one way of transforming the page:

AFTER

What's changed?

There's a new theme.The theme includes tabs with links to key parts of the site.There's an image related to the course topic (teaching) at the top of the course page.The long list in the previous version has been reduced to a more manageable size.Important information is at the top of the page, and is in a larger font size. It contrasts with less important information, which has a smaller font size.

•••

•

•

Chapter 11

[ � ]

Lines are used to separate different sorts of information.There is more color harmony—at attempt to get the colors to blend.There's an avatar introduction in the left block for new users.

Moodle activity

When we're pushed for time, it's all too tempting just to set out a list of references without paying due attention to instructions and a helpful hierarchy of information, as in the following example:

BEFORE

•••


[ � ]

There's a lot of information here. We can use the Book module to organize the information, and make the page more readable, as in the following transformation:

AFTER

What's changed?

The previous list has been divided into sections in the Book moduleThere's a "how-to" section at the beginning of the Table of ContentsGraphics from the target websites have been included as visual cluesThe Tool labels such as Audacity and Findsounds are in a larger font size to make them stand outAn action girl icon indicates task instructionsTask instructions are in bold blue to make them stand outA grid is used to separate sections

As we can see, by enhancing the visual design of our sites we can make our materials more engaging and effective. We can also make them more attractive by improving the quality of the audio, images, and video that we use. Here are some principles we could take on board:

••••

•••

Chapter 11

[ � ]

Contrast

Consider hierarchies of importance in your materials. The default font size on HTML pages is 12 points, similar to what you're reading now. Vary the size to make more important information stand out. You can also use images, buttons, and navigation signs to help users see the function of pages and content more quickly and remember it.

Consistency

Being consistent in your use of fonts for certain sorts of information, font sizes for ranking information, and navigation links will make it easier for users to understand the site and will make it more aesthetically pleasing. It's also better not to use too many different fonts or make your site too fancy or you will end up with a dog's breakfast. As a rule, it'll look better if you use different sizes of a limited number of fonts, rather than including lots of different fonts.

To promote design consistency on your Moodle site, consider setting up a style guide so that all teachers use the same design framework.

Alignment

A basic principle of graphic design is to make sure that the objects on your page are aligned with each other. Imagine a grid that they stick to. Aligned objects look more professional and enhance contrast within pages. Moodle organizes that automatically for us with front pages and course pages, but when we set up instruction pages for activities, we need to keep alignment principles in mind, as we have more design freedom.

Quality

Aim for the best quality audio recordings and images. It is likely to make a big difference to language learners if they can listen to clear recordings and easily identify the content of images.

This chapter

Each of the following sections in this chapter contributes to the above principles by demonstrating some of the tools available in Moodle that help you with your design. You'll find a consideration of these and other website design issues at http://www.asktog.com/basics/firstPrinciples.html.


[ � ]

Here are the main topics covered in this chapter:

TextImagesVideosSoundNavigationBlocksLayoutStyle guideAccessibilityFeedback

TextThere are two main ways of entering text in Moodle:

Adding text pagesAdding web pages using the HTML editor

The most common way is by using the HTML editor. Most of this section on text will look at formatting options using that.

Adding text pagesWhen you select Add a resource... and then Compose a text page, you get a choice of formatting options for your page.

You might find it useful to use the Moodle auto-format, as it automatically creates emoticons, paragraphs, and hyperlinks for you if you write in web addresses. Creating hyperlinks is a little more time-consuming if you choose the HTML format, as you have to create all hyperlinks manually. Markdown format is also useful if you want to create a structured document with lists and emphasis. You can, of course, produce all these in the HTML format, using the editing menu. The following options are available when you select Add a resource... and then Compose a text page.

••••••••••

••

Chapter 11

[ � ]

Formatting options DetailsMoodle auto-format This has limited formatting options, but will automatically

turn URLs like http://moodle.org into hyperlinks and will include emoticons like J when you type :). It keeps line breaks and converts blank lines into new paragraphs.

HTML format This does not automatically format text, but gives you a wide range of possibilities for editing your text. It allows you to change font faces, font sizes, and color, as well as embed graphic images, sound, and video. Note that if you select Compose a text page and then the HTML format option, you will need to enter pure HTML—that's the code that produces web pages.If you are not familiar with HTML, you'll be better off choosing Compose a web page and then using the HTML graphic editor. On the other hand, if you want to learn HTML, there are some references for beginners' sites in Chapter 2, Getting Started with Moodle.

Plain text format This format keeps spaces and new lines, but no other formatting is available.

Markdown format Markdown allows you to easily add emphasis (bold, italics), structure (bullet points and headings), and links (to images or other web resources). You can use Markdown in many places in Moodle. Simply select it from the formatting drop-down list, which is found below the text entry area, wherever you have the choice.

Adding HTML pagesMost summary pages, introduction texts, and the web pages in Moodle present you with an HTML editor for editing. Let's look at some of its features. You'll find the HTML editor, for example, when you select Add a resource... and then Compose a web page.

HTML editor shortcutsBelow the HTML editor, you'll notice a shortcut icon: . It's also present when we add web pages, which automatically use HTML formatting.

Clicking on that shortcut icon will open a pop-up window with a long list of keyboard shortcuts that you might find useful for formatting your page. For example Ctrl + O = Change the font. The Ctrl shortcuts work on both Windows and Mac systems.


[ 10 ]

Common features of the HTML editorSince most Moodle users use the default HTML editor, let's look at the features, which might be useful. This is what the HTML editor looks like:

Font facesThe top-left drop-down menu is for font faces—the term for typefaces when we use them on web pages. The following are available:

Trebuchet is the default font face, but you might find that a different one suits your site more. If you do change the font face, make sure you use it consistently and with a specific goal. Otherwise, your pages could look messy. Sometimes, for example, it is appropriate to use a different font face to provide an example of text you want students to write. That way the model text will stand out better. Here's an example which uses the font face Arial for the main text and another font face called Georgia for the model letter.

Chapter 11

[ 11 ]

You can also add new fonts to the HTML editor. To do that, go to Site Administration | Appearance | HTML editor. Then write the name of the font face that you want to appear in the HTML menu in the left-hand column and the name of the actual font in the right-hand column. In the following example, I've added the popular font face called Comic Sans, which you're reading now. If you want a font face other than Trebuchet to be the default font, put it at the top of the list.

A font face must be available on the user's browser and installed on each user's machine in order to work. You can find the name of the fonts in the font folder on your computer. Ask your administrator if in doubt.

Here's a list of so-called "browser-safe" font faces—in other words, font faces that work on most browsers and which you can therefore add to your HTML editor, knowing your students will be able to use them. You can find a list of names and font families at http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html.

Comic Sans MSImpactLucida ConsoleLucida Sans UnicodePalatinoSymbolWebdingsMS Sans Serif4MS Serif4

•••••••••


[ 1� ]

Font sizeThe next button marked 1 (8pt) lets you change the font size.

Default is 3 (12 pt), but the following sizes are also available:

Varying the size of your font helps differentiate between headings which vary in importance and so contributes positively to the design of your information. For example, we could use 24 pt for main titles and then 14 pt for subheadings. The letter task example earlier uses the following sizes:

24 pt main title Letter task14 pt subheadings Instructions, read the letter12 pt for the instructions text Dear Tom

StylesThe third drop-down menu provides a range of styles which help you format your text.

Chapter 11

[ 1� ]

Normal is the default. The different heading styles relate to pre-set sizes and are useful for dividing headings into main and subcategories. Address creates an italic style and is used to mark up contact information. Preformatted text is displayed in a fixed-width font, and it preserves both spaces and line breaks. That can be very useful if you find the gaps you create on the page keep disappearing. In general, using the headings will help you organize your material in a more attractive and consistent way. Here's an example of the styles.

ColorThe HTML editor allows you to change the font color (using the T icon) and the background color (using the bucket icon): .

In general, it's best to have either a light color on a dark background or a dark color on a light background. The letter example earlier has a blue font on a yellow background. If in doubt about the degree of contrast on your page, check the site http://snook.ca/technical/colour_contrast/colour.html, which will provide an analysis of and verdict on your color choices.

Consider color as part of your general design. It helps with both contrast and consistency, making navigation easier. For example, if the general color scheme of your site is light blue, consider using dark blue for headings in the topic sections of your pages. This helps create color harmony and reconfirms the importance of the headings. You might find this website useful for experimenting with color combinations: http://www.colorcombos.com/.


[ 1� ]

ImagesIf you've taken digital images, or scanned images onto your computer, it's likely that they'll be high resolution images, ready for printing. We don't need high resolution images on our computer screens for two good reasons: screen resolutions can't show so much detail and they take up a lot of storage space.

There's a process called optimization which you can use to make your images more usable for your language learning activities. You can either use a program like Photoshop Elements (commercial), or Google's Picasa, which is free from http://picasa.google.com. These will enable you to edit your pictures and get the best quality with the smallest storage size.

Let's look at a few things you can do to enhance your images using Picasa.

CroppingImagine we've taken this picture, but we're only interested in using the picture of the mug for a vocabulary exercise.

1. Open up Picasa. Click on the photo we want to edit.

Chapter 11

[ 1� ]

2. Click on Basic Fixes and then on Crop.

3. Click on Manual in the drop-down menu, then select the bit of the image we want to crop (cut out).


[ 1� ]

4. Then click on Apply.The result will be:

Color balanceAs it stands, the picture is too dark. There is too little contrast. Picasa will also allow us to create a stronger contrast, just by clicking on Tuning and Fill light and then moving the button across to brighten up the picture.

Chapter 11

[ 1� ]

The final picture looks like this:

It's smaller and brighter than the original and more appropriate for our Moodle page.

Optimization and image sizeThe picture above is 340 kb in storage size, which is pretty big. The reason it's so big in storage size is that its real size is 837 px in width and 960 px in height. In case you're new to image measurement, px stands for pixels, which are the dots on your screen. So we have an unnecessarily large image. We can reduce the image size when we insert an image, but it's a much better idea to reduce the dimensions to what we actually need before we import the image into Moodle. That will reduce the storage size at the same time.

Another reason for resizing images is that if you're using several photos on the same page, you'll achieve a much greater sense of balance and therefore effectiveness if all your images are the same size. If we reduce the mug to 100 px in width, the final version is only 92 kb in size.

We can resize images in Picasa by exporting, emailing, or uploading our photos to Picasa Web Albums. When we select File | Export, we can select what size we want.


[ 1� ]

VideosOne exciting way of enhancing your web pages in Moodle is to use video. You can either upload videos to your own Moodle site or upload them to a site like YouTube, or TeacherTube. Mashable at http://mashable.com/category/video is an excellent source of ideas and resources for editing, uploading, and sharing your videos. Chapter 2, Getting Started with Moodle explains how to use video on your Moodle pages.

If you decide to upload your videos onto your Moodle site, you'll need to check their size and the upload limits on your Moodle site. The default limits are usually quite low, but you can get your administrator to change them. You can also get round this problem by uploading your videos direct to the server using an FTP program. You will need to ask your Moodle administrator for help with that.

Embedding videos will save your server's storage space and traffic. There is more information about it in Chapter 2, Getting Started with Moodle.

Adding subtitles to your videosOne way of making video content more accessible for language learners is to add same-language subtitles. This would work well as an extension to the read and listen activity (Activity 2) in Chapter 6, Reading Activities. Alternatively, you could get students to produce the subtitles, a rather glamorous type of dictation. If you want to add subtitles to your own videos, this is quite straightforward in free programs like Movie Maker (for Windows) or iMovie (for Macs). Look up "subtitles" in the help files. If you want to add subtitles to a YouTube video, http://www.overstream.net/ allows you to do just that. You can then embed the final product in your website. Here's what a video with added subtitles could look like:

Chapter 11

[ 1� ]

SoundA selection of audio players that can be used with Moodle is given in Chapter 8, Listening Activities. If you're not happy with the quality of sound, there are various things you can do to improve it. The six examples below are created with the audio program called Audacity, but most audio editing programs will offer the same tools. Audacity is described in Chapter 2, Getting Started with Moodle.

The first four edits are in the Effect menu.

Remove noiseEffect | Noise removal

If there is an unwelcome background noise on your recording, Audacity has a tool for reducing it. Open Audacity. Open your recording. Select the whole sound track or part of the track that has too much noise by highlighting it with your mouse cursor. Select click on Effect | Noise removal to get to the noise removal tool. On-screen instructions will guide you through the rest of the process. Be careful not to reduce the noise too much, as this sometimes creates distortion.


[ �0 ]

Fade in and fade outEffect | Fade in/out

If you want the sound to fade in and out, use your mouse to select the part of the sound track where you want the effect. Then select Effect | Fade in/out to create the effect. This could be useful for a presentation to avoid having a burst of sound at the beginning of the recording.

Change tempo without changing pitchEffect | Change tempo

This can be very useful, particularly for lower-level learners. It's useful to create two versions of your recordings: one fast and one slow. You can upload both and give students the choice of which one they listen to. The great thing about this tool is that the pitch doesn't change.

Change pitch without changing tempoEffect | Change pitch

Sometimes you might want to lower or raise the pitch of a voice to make it more audible. This tool lets you do that without the speed changing. It can even be used to simulate a dialog, with you speaking both parts, keeping one at your normal pitch and the other one at a higher or lower pitch.

You'll find the next two settings in the Preferences menu.

Sample rateThis helps determine the quality of your recording. You can think of it as the number of times per second you capture a snapshot of sound while you're recording. Higher sample rates give you more detail. In other words, it's a fuller sound. 8 KHz is the lowest sampling rate you should select for voice recordings. 16 KHz is more likely to produce an acceptable sound. If you have music as well, you'll need a higher sample rate, like 44 KHz.

Bit rateThis is the number of bits (digital 1s and 0s) that are used each second to represent the sound signal. The bit-rate for digital audio is represented in thousands of bits per second (kbps). The higher the bit-rate is, the larger the file size and the better the sound quality. Lower bit rates result in smaller files but poorer sound quality. A good bit rate for recording in Audacity is 32.

Chapter 11

[ �1 ]

Audacity offers many more possibilities, and it's well worth exploring it in detail. Go to http://audacity.sourceforge.net/help/ for more help.

NavigationMost of the navigation work—that is, menus and links—is done for you in Moodle. However, there are things you can do to improve it. Here's a list of tips:

Font size and colorMake consistent use of font size and color with headings so that users recognize the relative importance of different sections. For example, make topics big and bold so that they stand out. Remember that the default font and color is the same as for all other text. You have to make the difference yourself. For example:

User controlAllow users to move ahead if necessary, so that they feel in control. You can do this by providing explicit headings in your course topics. Don't call an activity "activity". Give it a more specific name, like "Second prepositions grammar exercise". Here are some options for navigation maps:

Use the Topics view on your course pages (see Chapter 2, Getting Started with Moodle for more information).Use Book to organize a syllabus. There's an example of this in the introduction to this chapter. Chapter 6, Reading Activities, Activity 2 demonstrates how to set up the Book module.

•

•


[ �� ]

Use a flowchart program to create a plan. Then import it into your Moodle web page. For example:

Week 4 Activities - English

Activity 1 - read texton bagels

Quiz 1 - readingcomprehension

Glossary activity -add new words

Forum discussion -what we eat and

whether it matters

Optional - blog aboutyour favorite food

Many flowchart programs allow you to include hyperlinks to the actual activities. To do that, first copy and paste the target web page address from the address bar.

Then paste that address into the hyperlink in your flowchart program. Here's an example using gliffy:

•

Chapter 11

[ �� ]

See Chapter 2, Getting Started with Moodle for a list of flowchart programs.Create a web page with a menu on it, as in the following screenshots. To make your new web page appear with blocks to the left and right, click on Show the course blocks on the set-up page—it's at the bottom of the next screenshot.

•


[ �� ]

The final page would look like this. Students will see all the other navigation blocks in the left and right-hand columns.

Graphic navigation linksConsider using clip art or pictures as navigation links to help users. This is both attractive and speeds up user recognition of signposts. There are links to libraries of copyright-free images in Chapter 2, Getting Started with Moodle.

Chapter 11

[ �� ]

It also helps students if we keep the number of visible topics on course pages to a minimum. If you have a large number of topics, you can hide them by clicking on the square in the right-hand corner of the page section.

BlocksKISS (Keep It Short and Simple) applies here, too. A page with too much information and too many blocks open is likely to be overwhelming. Whenever possible, resist the temptation and limit the number of blocks. Once you've selected the blocks you want for your course page, think about making the organization logical. For example, put the most useful ones at the top, put blocks which are related to communication in the left column, put blocks for research in the right column, as in the screenshot below.

The above screenshot is an example of My Moodle, which allows students to decide what blocks they have themselves. Once My Moodle is turned on, students will see an Edit this page button which allows them to add and delete blocks. They can also add blocks with their own texts, images, and recordings. It's well worth passing on the principles we've just discussed to students so that they can enjoy some logical organization. See Chapter 2, Getting Started with Moodle for help with My Moodle.


[ �� ]

LayoutLayout is all about spacing and proportion. Achieving a balanced, harmonious page is not only pleasing to the eye, but, more importantly, also avoids ugly distractions and guides the user towards the information they need.

Take this example of an uncomfortable layout:

The gradation of font sizes is fine, but there are several things the author can do to improve it:

Avoid the overlap of text by including breaks in the HTML editing boxInclude padding around the textCreate a space between the top heading (for example, Grammar) and the next heading EasyCreate style harmony by removing the background colorUse the same font face for the Welcome heading as for the other headings

•••

••

Chapter 11

[ �� ]

The next illustration shows an improved version of this page. The layout "breathes" a bit more because there's more space. It's simpler, and there is no distracting "noise".

Making a point—or giving an example using nested inlinesWe can use space to make examples stand out. Take the following text:

The preposition "at" in English is used to express time or place.

Example using time: She was here at 3 o'clock

We could further enhance the important information by creating a nested inline. Nested means there's an indent from the left margin. Inline means it comes between the other lines. The easiest way to do that is to insert a table. Books on web design might tell you not to use tables for positioning text elements, but for non-experts, it's a simple, effective solution.

To make the example really stand out, we could even add a background color. You'll have more editing tools, and can achieve a better layout if you expand the HTML editing menu. To do that, click on the enlarge editor. That's last icon on the bottom row:


[ �� ]

This is what the enlarged editor looks like:

Hovering miceIf you hover the mouse cursor over each of the icons, you'll see what the icon's function is.

Here's how to do itWrite the first line of text ("The preposition 'at' in English", etc.).Press return twice to position the cursor below that line.Insert a table by clicking on the table icon: .Complete as below.

Settings DetailsRows Write 1.Cols Write 1.Width Use 80 Percent. This means that the table will not occupy the

whole width.Alignment Use Middle. This will create margins on either side of the table.Border thickness Write 1. This refers to the thickness of the line around the table.Cellspacing Write 1. This is the distance between each cell of the table. As we only

have one cell, that doesn't concern us here.Cellpadding Write 1. This is the distance between the inside of the line around the

cell and the text. Leave it on 1 for now. We'll increase it in the next step.

1.2.3.4.

Chapter 11

[ �� ]

5. Now write in your example text. Select the whole text and make sure it is aligned to the center.Make sure the cursor is inside the table cell, then click on the table properties icon (the first icon on the bottom row) to get the following box:

Settings DetailsCaption and Summary Leave these blank unless you want your table to be labeled

in the text.Layout Leave this blank. We've already set the alignment to Middle.Padding Write: 5 pixels. This will create a cushion between the text

and the edge of the table.Frames Use All four sides.Background Select a light background color by clicking on the color

square.FG Color Here we can change the font color by clicking on the square.Border Here we can change the table border color by clicking on

the square.Image URL We could also include an image as a background

if appropriate.


[ �0 ]

6. Click on OK to save the changes.7. Then click on the minimize editor icon to get back to the normal

editing screen.8. Finally, click on Save changes. You should now have something like this:

Style guideOnce you've worked out how you want to achieve contrast, consistency, alignment, and control layout, it's a good idea to summarize this in a style guide document, which you should then give to all course creators and teachers on your Moodle site. Of course, it's possible that your Moodle courses are living along side other Moodle courses in your organization, in which case you'll need to make sure you follow your organization's style guide.

AccessibilityDon't forget that some users are visually impaired. Here are a few tips you can follow to make life easier. In fact they're good practice even for users who aren't visually impaired.

Alt tagsAlt stands for Alternative text. If you use images, use the Alt tag to provide a clear text alternative. An alternative text should let the user know what an image is and the purpose of that image; in this example, we have This is a picture of our dog, Rover, when he was 6 months old..

Chapter 11

[ �1 ]

Computer users with visual impairment can obtain programs that read aloud Alt tags, like the one in the screenshot below.

There's more on Alt tags at http://www.seomanagement.com/index.php/ALT-Tag-Optimization.html. If you're interested in programs that read aloud computer text, do an Internet search for "text to speech software".

More on color Since some users find it hard to distinguish between colors, make sure that information conveyed by the use of color would be understandable without color.


[ �� ]

LinksEvery link should indicate where it is going to take the user. Specific link names and minimal instructions will help the user know what will happen when they click on the link.

Less clear linking Clearer linkingThere's more information about Course 5 here.

Click http://bhco.co.uk/pages/ for more information about Course 5.

Clip descriptionsIf you use audio or video files, provide a description/transcript in text form. It can be on the same page, or a hyperlink to a separate page can be placed near the clip.

FeedbackSolicit feedback on your design. You can use the Questionnaire module to design a simple survey about your website. Find out from your students and other teachers what they like and don't like about it. Do what you can to make changes. There's an example of the Questionnaire module in Chapter 6, Reading Activities.

AfterwordThat's the end of a very basic coverage of some key design principles. As we saw in the introduction to this chapter, we can make small changes that have a big impact as far as the user's experience is concerned. These changes enhance both the site usability and the user's aesthetic experience. If you're interested in this area, it's well worth following it up on some websites that focus on information design. For example:

http://www.informationdesign.org/

http://www.smashingmagazine.com/2008/01/31/10-principles-of-effective-web-design/

http://www.webpagesthatsuck.com/

•

•

•

enhancing your moodle pages

Documents

moodle activitywhen

moodle materialsyou

moodle course pagelike

new theme moodle

registered moodle sites

main types of moodle

standard course page

page settings