Online learning modules need to consistently match the Internet’s rapidly-improving, Web 2.0 standards. The modules need to be professionally designed and attractive to retain a reader’s attention. A critical benefit of online learning is taking the reader beyond what he can receive on paper. Unless used interactively, PDFs and Power Point presentations are still simply paper products viewed on a monitor.
Another critical component of online learning modules is the ability to graphically use – and re-use – the same space. The module needs to use that interactive ability, either to pull information from other websites or databases (XML, RSS feeds) or deliver the reader to that information. This does not mean providing a user w/ a hyperlink into another window, which takes attention away from the module, but to deliver that information into the learning module. The fourth event of Gagne’s Nine Events of Instruction states this concept as: Present the content – chunked and organized meaningfully.
Online learning modules development teams must employ at least one design professional.
- A Health Professional's Guide to Pediatric Oral Health Management
http://www.mchoralhealth.org/PediatricOH/index.htm- The home page has a clean design, and the objectives are clear: Learn about pediatric oral health, in this order.
- This is a paper document online.
- Navigation
- The hyperlink Contents is a literal table of contents (with hyperlinks); call it Site Map.
- This module also needs a (unifying) logo and search engine.
- The glossary is useful.
- The Module guide (the square numbers listing 1-7) meets the designer’s needs, but not the users. Once inside the site, the user doesn’t know what No. 4 is. The numeral’s rollover title is not sufficient; Javascript or animated GIFs could solve this problem.
- The interior navigation is complete, but could be presented better in drop-downs.
- The hyperlink Contents is a literal table of contents (with hyperlinks); call it Site Map.
- The largest failing is the images: What a missed opportunity. The captions are listed as Fig. 1, 2, etc., though those numbers are not in the content. The user should be able to click on the images, and see a much larger version.
- The home page has a clean design, and the objectives are clear: Learn about pediatric oral health, in this order.
- How to be a gardener
http://www.bbc.co.uk/gardening/htbg/
This is a wonderful web site, which contains learning modules.
The BBC brought in terrific designers and graphic artists. The opening page cleanly explains the purpose of the site, and following Gagne’s second event (Inform Learners of Objectives), you know what aspect of gardening you’ll be learning.
Each module can work independently of the others – if the user chooses – or in a sequence.- http://www.bbc.co.uk/gardening/htbg/features/light_levels.shtml is a wonderful example of enabling the user to actually garden online (Gagne’s Event one: Gain attention ). The user can place plants in a garden, according to where the sun falls on his plot. The user can’t do this in a PDF! The user gets feedback immediately, and can reset to start over.
- Learning the Latin names for flowers is actually fun in this “game.” The reader must recall prior learning as they make mistakes on the flower names, and actually learns most from his mistakes.
In both interactive instances, the user can assess his performance immediately.
The images, videos and graphics clearly demonstrate to a user what colors, sizes and heights different flowers and foliage should be.
Faults: Each module reads Overview on the first panel. The user may be confused: is this the start of the stage, or the entire module? It should instead read: Title of Stage Name. Using numerals in the Table of Contents, without putting the name next to the numeral, is cumbersome. - http://www.bbc.co.uk/gardening/htbg/features/light_levels.shtml is a wonderful example of enabling the user to actually garden online (Gagne’s Event one: Gain attention ). The user can place plants in a garden, according to where the sun falls on his plot. The user can’t do this in a PDF! The user gets feedback immediately, and can reset to start over.
- Uncle Fred
http://www.unclefred.com/
I see this module as a blended example of tutorial and instructional game, as Kevin Kruse details in Skinning Cats: More than One Mode for e-Learning. The content is presented linearly, and cannot be taken out of order. The fun of the “game” reduces learner tension and great increases engagement.
This is my favorite learning module once I understood the audience was not me, but my pre-school children. This serves the audience quite well, though it has some tragic flaws. Happily, they could be solved with a little effort and a little budget.- The presentation is engaging and simple for a young user: Learn how to draw! Yes, it grabs their attention quickly.
- An early problem is the first page offers so many options without guidance. I like the categories: Draw this character, (about) Uncle Fred, instructions, legal, stats. These need to be organized better, and then the module will have the user follow a sequence. Informing learners of the lesson’s object through the sequence would improve the performance.
- Take Legal and Stats out of the main box, and place them bottom right, under the box. Make them text links. They’ll be less prominent, and they should be. They’re not of equal weight. Also, add a contact link. What if you wanted to contact Uncle Fred?
- Place the Uncle Fred link inside the image.
- Place Instructions above the links to the characters, because I didn’t understand how this worked when I dived straight into drawing.
- On Draw this Character links, eliminate the pencil and put a thumbnail of what you’ll be drawing. Also, make the entire row linkable – these are young users and they’ll have a hard time precisely clicking on that object. Give them a 175x22 target to touch.
Now this home page still needs a clear set of objectives.
I was certain I was going to draw like Uncle Fred – on the screen, using my mouse as a pencil. This is not the case. The user must draw with his own pen and paper, following Uncle Fred’s instructions. Uncle Fred needs to explain this on the home page. On the Instructions page, the text reads, All you need is pen and paper, but the user’s expectation is that they will be drawing online.
From the start, show an image of a child with a pen and paper and you’ll reinforce the point. Create a message of follow along, and this module would capture the audience.
The user is ready to draw. Under Penguin, text is on the left (Draw a box like this) and a static image (a drawn box w/ a pencil) is on the right. The user’s expectation is to wait for something to happen. When nothing does, he may try to “grab” the pencil with his cursor. Uncle Fred’s designer is relying on his static text (Draw a box like this) to provide the learning guidance.
Uncle Fred’s graphics department could do this:- Animate the sequence in Flash. Have the words appear on the left, as if Uncle Fred’s writing: With your pen and paper, draw a box like this. Because children are the intended audience, the directions must remain simple. The animated “pencil” then draws the four sides of the box, and stops. The animated text would continue, Click here when you’re ready.
- Repeat the sequence on every page. After the first frame, Uncle Fred doesn’t need to remind the user about pen and pencil because the expectation has already been set.
- Every frame should be animated.
I like how Uncle Fred draws a black-stroked circle in frame 2, which is faded in Frame 3, indicating a past action.
What I found intriguing is how Uncle Fred would ink his images. He’d tell the user, Now color your picture. Here’s how I did mine. The project comes from a flat, one-dimensional image to a color explosion. You can imagine young user’s eyes going wide as creative inspiration hits them. Uncle Fred even shows different types of coloring styles.
Users will be able to immediately assess their performance, re-do their images and practice. I think young users would retain Uncle Fred’s images and adapt them to their own images.
In the end, users are learning drawing skills. They see how a cartoonist can draw complex images and shapes in layers and stages, and gain confidence as they develop their own skills.
Dings: No back button. The explanatory text is still vague and isn’t hyperlinked: draw like this. - The presentation is engaging and simple for a young user: Learn how to draw! Yes, it grabs their attention quickly.
No comments:
Post a Comment