How I revamped the Call Center demo

This file, my first branching scenario, was created almost one year ago for the Weekly Challenge #47. Although I was happy with the result, with time I realised that having no audio, users were forced to focus on dialogs and characters expressions at the same time, overloading their visual channel. This condition is better known as The Redundancy Principle.

I decided to improve this scenario by applying Allen’s CCAF model:

The Context: Sara working at the Tourist Information Office of Barcelona

The Challenge: helping Sara by answering phone calls on her first day on the job.

The Activity: applying phone etiquettes and providing accurate information in different calls.

The Feedback: the learner receives instant feedback on every choice, and at the end the activity, a graded score and the tourist’ comment from the “Quality survey”.

Click on the image to launch the new version

What I decided to preserve:

• The characters
• The colour palette
• The basic information about the tours in the city of Barcelona

What I modified:

• The fonts
• The layout: cleaner, more focused on the activity than on the character’s details and poses.

What I added:

• Objectives and Guidelines for this Module
• Custom navigation buttons and Menu
• Three Number variables to track the learner’s progress

It is highly likely that when another year has passed, I’ll rework the demo again, but this is the best way to learn, don’t you think?

 

Learn how to build a custom navigation player in Storyline

Comic book: The Multimedia Design Dilemma

“E-Learning and the Science of Instruction” by Clark and Mayer, this book is essential reading for anyone wishing to design and develop multimedia content for e-Learning.

At the beginning of each chapter, the authors challenge the readers with a “Design Dilemma”, a scenario to introduce one of the principles explained in the book. In these scenarios, an eLearning team is committed to create an online course on Excel for Small Business. Every character, the VP, the Instructional Designer, the Graphic Designer, the Programmer, etc, they all have different views on how to design the multimedia content for the course.

At the end of each chapter and after the Principles are analyzed with evidence-based examples, the reader is taken back to the scenario where the dilemma is resolved.

Click on the image to view my comic book

The Idea

After reading the book, I wanted to write a post about the Multimedia Principles, but there are tons of articles and presentations about this, so I decided to turn the “design dilemmas” into a graphic story.

The Result

I was looking for illustrated characters and backgrounds for the story, when I came across with this cool and free Comic image collection. Using the source files, I could create different scenes; changing character’s dialogues and expressions. The characters fit perfectly into the story. I changed their names and made a slight variation of their choices.

In the book, the team is designing a course on Excel, but I replaced this with a course on Applied Optics.

Unfortunately, I don’t have enough time to finish the book: Multimedia, Modality and Redundancy Principles in this first printing. Wouldn’t be great to have the complete edition one day?

Check out more comic book examples in the Weekly Challenge #11

Step Graphics: 3 basic Yoga poses

Step graphics are interactive explanations that make it easy for learners to sequentially walk through a process, workflow, procedure, or related items. They can be used for all types of learning interactions, from procedural training to interactive storytelling.

The aim of Weekly Challenge nº 36 was to create a step graphic to communicate a process. I started to take Yoga lessons last year, so I was inspired to create a quick guide of Yoga poses for beginners.

There are tons of free videos of yoga, but I needed my own characters showing the pose step by step. At the website yoga.com, I found good tutorials of the poses I had decided to illustrate. Pausing the videos at every change of position, I took 4-5 screenshots of every sequence. After that, I drew every image in an illustrated style, using Illustrator’s calligraphic brushes. Finally, I created a slide for every pose in Storyline.
.

Reference: Yoga.com

 

Using Characters in e-Learning: illustrate and engage

After publishing the post about the Types of Characters used in e-learning, I found this topic so interesting, that I decided to go deeper, writing a second part about the roles of the characters used in an online course.

I searched the web and after reading some posts about this topic, I came to the conclusion Characters are commonly used in 6 ways that can be grouped in two categories:

To illustrate the content: Characters are integrated in the content, representing real and abstract concepts, and being part of scenarios and stories.

As social actors: Characters interact directly with the learners, providing guidance and support.

Find more details in this video, which I created with Powtoon.

No matter whether Characters are cartoons, photos , or even live actors, integrating them in a course can add value to the learning experience.

References:

ATD Blog. Avatars in e-Learning by Vanessa Bailey

Learning Solutions Magazine. Animated Characters in e-Learning: the benefits of social roles by Audrey Dalton

E-learningArt Blog: Use conversations to deliver eLearning content by B. Jones

eLearning Industry Articles: 6 tips to create Characters in eLearning by Henson Gawliu

De Vries, J. (2004) Character-Based simulations: What Works. Bersin & Associates

Images used in this video:

• Male body infographic by Vector Open Stock. CC BY 3.0
• Get rid of a stiff neck by Wikihow CC BY-NC-SA 3.0
• Free Photographic Characters by ElearningArt and Elearning.Net
• Free people image by Photol

Types of Characters used in e-Learning

What types of Characters can we use in our e-learning courses? How can we use them effectively? Do photographic Characters have a greater impact than a cartoon figure?

I became interested to learn more about this topic especially after checking Weekly challenge nº18. I searched the web trying to find some guidelines. Starting from the basics, I created a short presentation, with some comments about the main characters used in e-learning: doodles, pictograms, humanoids, icons, silhouettes, cliparts and people cut out images.

Click on the image below:

You can download this presentation from SlideShare

What I learned about this topic is that there are no fixed rules when choosing a character for our online course, it depends among other things; on the type of content, the learner’s needs, and the budget we have. However, after reading some blog posts, I’d like to highlight some personal conclusions:

• Characters are used to illustrate a concept or to engage the learners; providing them guidance and feedback.
• Simple characters like doodles, humanoids or pictograms, work great to represent abstract concepts, processes and instructions, because learners focus on the information rather than on the character’s details.
• Silhouettes are good option to create contrast and stand out an object or a character. They’re also race neutral so we can add them if our content must respect diversity.
• Cliparts have evolved from the first styles similar to pictograms, to the more detailed images that we can find today. Like any other vector image, their versatility to be customized makes them a good option to create something quickly.
• Cut out people in different poses and expressions, are ideal to appeal to the emotions, and to work on behavioral changes.

Resources I used:

Flat-book template by Tom Kuhlmann

Images source is mentioned at the end of the presentation.

Learn more:

Video: Characters in e-Learning by Tara Bryan

 

Call Center training in e-Learning: the Tourist Office

Weekly Challenge #47 was about creating a Call Center interaction. In the same vein of previous participations, I designed a demo for Travel and Tourism training area.

As I’m planning to visit Barcelona next year, I thought it was a good opportunity to create the demo including information about the main touristic attractions. I imagined a Tourist Office scenario, where the tourist agent offers different guided tours. I found free images of two ladies talking by phone, cut them out; and played around with poses, combining expressions and dialogs in the timeline.

Click on the image, and answer the call!

 

 

 

 

 

 

Resources used for this demo:

• This template from the E-Learning Heroes site
• Stock images from Photl

Images of Barcelona:

• “Guell-3” by Marc Desbordes, CC BY-SA 3.0
• “Catedral de Barcelona” by Simon Burchell CC BY-SA 3.0

Guided tours mentioned in this demo, are based on Barcelona Turisme website, the official organization of tourist promotion of Barcelona.

This demo is also available  in Spanish