Learn. Show. Repeat.

Tag: eLearning

  • More than One Way with Storyline 2

    Sometimes I like to experiment with ideas for eLearning interactions and a few months ago one of these experiments led me to creating this carousel-style interaction (you can click the image to see a demo):

    Carousel slider demo

    I wrote about it here but essentially it uses a slider to show layers with each image in a different position. I also posted the demo to an E-Learning Heroes Community forum and someone asked if the same effect could be created using buttons instead. The short answer is yes and here’s how I did it.

    I started by making a duplicate of the current slider-based interaction as the layers and positions of the images are set up correctly. I deleted the slider and created a couple of buttons (one for left and one for right) using a square shape and an arrow image that I had on file.

    Button breakdown

    Then I needed to figure out a way to make the layers show (creating the spin effect) depending on which arrow was being clicked. I wanted to make the images spin in the same direction as the arrow that was being clicked.

    The solution I came up with was to use a number variable. Variables are great because they ‘remember’ information and the same variable can be used many times anywhere in your project. You can then use this information to make things happen. The slider interaction uses a number variable but it’s created when you insert the slider. For this interaction, I created my own number variable.

    First, I added my variable via the ‘Manage project variables’ area…

    Manage project variables

    …and called it ‘Count’.

    Count variable

    Then I added two triggers (one for each button) the add 1 to Count if you click the right arrow or subtract 1 from Count if you click the left arrow.

    Add to count

    Then I needed to do something with the Count information – instead of the layers showing when the slider was in a particular position, they’d now show when the variable Count had a certain value.

    show layer trigger

    Remember, clicking the buttons changed the value and so a different layer would be shown each time.

    Because you can’t keep spinning the images around and around, I added some change of state triggers on the arrow buttons that change their state when you go as far as you can in either direction. As a bonus, I also found that by using the buttons instead of the slider, it freed up some space in the middle of the slide that allowed me to add a small amount of text (if required).

    Often there’s more than one way of building something in Storyline 2 and this is another example of this as well as the power that variables can bring to your project.

    To view the updated interaction click the image below:

    Carousel

    You can access the .story file from the Downloads page of this website.

  • Template Facelift

    A few months ago I created a demo for ELH Challenge #18 which was called ‘Using Characters in eLearning’ (you can see a recap here). For this one I did a ‘meet the team’ style interaction that was based on something I’d seen a few years ago. The idea is that you have some people and some questions and you pick a person and a question you’d like to ask them, then their response is shown. You can try the demo by clicking on this image:

    Meet the Team demo

    I was happy with it originally and it works fine but I’ve felt for a while that the design could be improved because the screen is quite full and there’s not a lot of flexibility in the layout. What I mean is, say I wanted to add another person to ask a question of, I’d need to make the other four people smaller or totally move things around to fit it all in. Also, the response area is quite large and the person giving the answer is shown twice which is unnecessary. So I set about playing with some ideas as to how I could overcome these problems.

    For the people on the slide, I wanted to be able to have as many or as few as needed. I figured that using one image that had a number of states (which would be images of different people) would be a good way to achieve this. I just had to make sure each image of a person was placed in a similar position and was about the same size (there was some trial and error getting that right):

    Using different states

    Next I needed to work out a way of moving through the people. I thought of using buttons – one to go forward through the people and another to go back but then the whole interaction would be clicking. So then I thought a slider might be worth a shot. I inserted a slider, kept the design simple and added change of state triggers e.g. change the state of ‘Person’ to state ‘Person 2’ when the slider moves and equals 1 (and so on for the others states). I tried it out and it worked great. So I now could have two people or 20 and they all fit in the same space on-screen.

    Now for the questions. I left the number of questions to three as I reckon that you wouldn’t need any more than three (you’d probably use less). In the original, the space for the question was just a rectangle with a glow to indicate when it’s selected. It looked more like a button, so this time I used a caption and changed the selected state to a black solid fill:

    Question states

    Tip: I created a button set with my questions which only allows one question to be selected at a time. Doing this creates a selected state so I could then change this state to what I described above.

    As in the original demo, the responses by each person to each question are placed on layers. But this time it was a combination of one question being selected and the slider being in one of 6 positions:

    Show layer trigger

    I repeated this trigger for all the combinations, the ‘copy and paste trigger’ buttons came in very handy!

    The space where the responses are shown is still a good size and I made use of this space on the slide (base layer) by using it to hold the instructions which aren’t visible when each layer is showing:

    Instructions

    For the responses themselves, I again used a caption-style shape (it’s actually a combination of a rounded rectangular caption and a triangle) and because I placed this near to the image of the person I didn’t need to show the person twice on-screen.

    The last thing I did was to apply some colour coding to each person and layer so that there was a visual indication as to which answer belongs to which person:

    Question and answer

    Tip: You could use videos on the layers of the person giving the answers or add audio if you didn’t want to use text responses.

    If you’d like to see a published version of the updated interaction, click on the image below:

    Meet the Team Interaction

    If you like to download the source file and use it yourself, just click here.

    Overall, I’m happy with the improvements and I was able to try a few things and experiment. The new version is more customisable too. But best of all, going back to something I’d already created meant that I didn’t have to start from scratch. I could apply some things that I’ve learned since the original was created and I learned a few new things while working on the update allowing me to continue building skills.

    This template is one of a few that I have on my new Downloads page.

  • Half-baked Ideas

    Death_to_stock_Dinner_damo_9

    This week is Work Out Loud or #WOLweek and the purpose is to be more open and share what you’re working on. So, in the spirit of the week I went to my notebook where I write down ideas and thoughts about what I see and read from the world around me. They’re raw, not fully formed and some not fully thought through (sometimes I was just venting) but they are things that at some stage I thought were important enough to write down. The idea is that they might become posts of their own eventually.

    Here they are in no particular order:

    • Too much time and effort is spent hypothesising about the future. No-one knows what’s its going to be like but geez, there’s a lot of people making money from painting a picture of the ‘ideal’ learning and development future.

     

    • There’s also way too much pontificating about what learning and development folks should be doing and not enough practical advice from the more experienced that will actually help others to get to this ‘ideal’ future. Models are fine but give me something that will help me right now. Give me something that I can use to start bringing about change.

     

    • Is working out loud really for everyone or is it just for people who work in offices and have access to a computer? When I look around me I see the person who collects my rubbish and the checkout person at the supermarket and the person working in a coal mine. Is WOL for them?

     

    • I know that debate is healthy but dividing a profession isn’t. I wonder if other professions have the same problem.

     

    • People need to take control of their own learning and the majority don’t. Too many rely on courses or someone doing it for them. How about figuring something out for yourself.

     

    • I love using social media tools to connect and learn from others but the reality is the majority of people working in the learning field aren’t connected, don’t use them and therefore won’t introduce them into their workplaces. This doesn’t mean we should give up on using them and spreading the word but the reality is that for many organisations this is a long, long way off.

     

    • I’m thinking about adding a ‘Downloads’ page for my blog site and creating some interactions the people can look at but also use in their own projects or learn more about how to use Storyline 2. I’ll need to get a few together first.

     

    • Poor quality eLearning is not due to authoring tools themselves but due to the users of them not constantly wanting to improve, try new ideas and experiment. However, the fact that anyone can get their hands on one does mean that people think they can use them.

     

    Well, that’s it. This is the first time I’ve written a post in one sitting and haven’t put it aside to work on later and it’s uncomfortable but it’s done now 🙂

  • Designing Effective Multimedia Lessons for Learning

    This blog post is a slightly altered essay that I recently submitted as part of my Master of Education (Educational Psychology) studies.

    The delivery of learning via the use of multimedia (also known as eLearning) continues to be a popular choice in workplaces around the world. In my current role as an Instructional Designer, I am involved in the design and development of eLearning courses for corporate clients with the aim of closing knowledge gaps in employees and ultimately improving their performance. The challenge for myself, and indeed all instructional designers, is how to best present information in such a way that it does not overload the known limits of working memory and allows for transfer into long-term memory. This essay will discuss Mayer’s Cognitive Theory of Multimedia Learning and the resulting principles for designing multimedia instruction that when applied can improve learning delivered via eLearning. The term multimedia presentation is commonly defined as “any presentation containing words (such as narration or on-screen text) and graphics (such as illustrations, photos, animation or video)”.

    Cognitive Theory of Multimedia Learning

    Much research has been conducted into multimedia instruction (using multimedia presentations) with the goal of finding ways to foster meaningful learning or a “deep understanding of the material”. Drawing on the work of Paivio’s Dual Coding Theory, Baddeley’s Working Memory Model and Sweller’s Cognitive Load Theory, Mayer developed a theory specifically for multimedia learning. The Cognitive Theory of Multimedia Learning is based on three assumptions about how the human mind works during multimedia instruction:

    1. Dual channel – humans possess separate information processing channels for verbal and visual material.
    2. Limited capacity – the verbal and visual channels can only process a limited amount of information.
    3. Active processing – learning requires substantial cognitive processing via the verbal and visual channels.

     

    According to the theory, multimedia presentations containing words (text or spoken) and pictures are received by the learner via their sensory memory (ears and eyes). Selected words and images are then processed by the working memory at the shallow and potentially deep levels which is then integrated with prior knowledge held in long-term memory.
    Multimedia presentations have the potential to overload the limited capacity of the learner’s working memory in many ways. Mayer and Moreno also highlight three types of cognitive demands placed on learners during multimedia instruction:

    1. Essential processing – required to make sense of the presented words and images.
    2. Incidental processing – required to process additional words and or images not related to processing the presented material.
    3. Representational holding – the cognitive processing required to hold visual or verbal material in working memory for a period of time.

     

    Whilst essential processing is linked to the material being learned, incidental processing and representational holding place additional demands on working memory capacity and can interfere with the learner’s ability to process and transfer the material to their long-term memory. In addition, Clark and Mayer use the term extraneous processing to describe the processing of material not related to the learning goal or caused by poor instructional layout.

    The cognitive architecture underpinning Mayer’s theory has led to (via numerous studies) the creation of principles for the design on multimedia instruction. These principles create guidelines for instructional designers wanting to create multimedia instruction based on what is known about the processing capabilities of the human memory. Several of the principles will now be discussed and applied to a sample multimedia lesson that I created with the aim of teaching people about a coffee machine.

    Multimedia Principle

    According to the multimedia principle, learning is improved when words and pictures are used in multimedia presentations rather than words alone. Research into the multimedia principle by Clark and Mayer, examined lessons that taught scientific and mechanical processes, for example, how lightning is formed or how a bicycle pump works and found that “students who received multimedia lessons consisting of words and pictures performed better that those who received the same information via words alone”.

    Figure 1

    Figure 1

    Figure 1 shows a screen from a sample eLearning module that contains only text. If learning is to be improved, applying the multimedia principle would require the addition of an image, an example of which can be seen in Figure 2:

    Figure 2

    Figure 2

    The type of treatment of a screen of information in Figure 2 is often seen in eLearning courses, however the image is not directly related to the material being presented and as such does not support the instruction. Clark and Lyons refer to these types of images as decorative and are usually added to make content appear more ‘interesting’. However, they do not contribute to learning and actually require processing by cognitive resources that are already limited and therefore is an example of incidental processing. Another example of incidental processing would be the inclusion of background music playing as the content is delivered. In this example, an improvement would be via the inclusion of an image of the coffee machine that the text is referring to as seen in Figure 3 (additionally, a further improvement could be made by indicating which part of the machine each section of the text refers to).

    Figure 3

    Figure 3

    Contiguity Principle

    In multimedia presentations, words (either text or spoken) and pictures are sometimes used to describe how a process or piece of equipment works or to deliver content to the learner. The contiguity principle states that words and pictures should be integrated rather than separated. Two contiguity effects have been identified by Moreno and Mayer, firstly the spatial-contiguity effect where words and pictures are separated either on the same screen and need to be combined to understand the on-screen content (see Figure 4) or placed on different screens thereby requiring the learner to move between screens to integrate the material in order to make sense of it.

    Figure 4

    Figure 4

    In Figure 4, the learner is required to move from the labelled image to the appropriate piece of information and integrate all the pieces with its corresponding label. To reduce the spatial-contiguity effect, the text should be integrated with the image or positioned close to the part of the image to which it refers to as seen in Figure 5. In this case, the learner can reveal the information about the parts of the machine by hovering their mouse over each number. This allows the learner to both explore the image and reveal only one piece of information at any one time thereby reducing the amount of cognitive processing required.

    Secondly, there is the temporal-contiguity effect where spoken words are presented before or after on-screen visuals and therefore require learners to hold some information in their working memory and integrate it with other information contained in the presentation. This again requires the use of limited cognitive resources to process the information being presented and is an example of representational holding.

    Figure 5

    Figure 5

    Clark, Nguyen and Sweller refer to the separation of on-screen content as leading to ‘split attention’ meaning that learners have to attend to both sources of information separately. Research by Moreno and Mayer found that “learning is impaired when on-screen text is spatially separated from the visual materials”. This was supported by Clark and Mayer who also identify other examples of where the contiguity effect is violated in multimedia presentations, for example, when information is presented in a scrolling panel and the learner must locate some information and integrate it with on-screen images or when a question is asked and the feedback given is placed on a different screen to the question or when links to references appear in a new browser window or where audio narration is followed by a video rather than being presented at the same time. Therefore, when designing eLearning, on-screen objects should be positioned in close proximity to descriptions and if audio narration is used, it should be synchronised with the objects being described.

    Modality Principle

    The nature of multimedia presentations allow for the inclusion of combinations of words, pictures, audio and video so another important design consideration is how and when to incorporate each (assuming that it is practicable to do so). According to the modality principle, learning is improved when on-screen text that describes an image is replaced by audio. As mentioned earlier, the Cognitive Theory of Multimedia Learning assumes that information is processed via dual channels i.e. visual and auditory. When only words and pictures are used on-screen, as seen in Figure 3, the visual channel can become overloaded. However, replacing on-screen text with audio spreads the cognitive load across both channels reducing the processing demand on a single channel. Mayer and Moreno refer to the use of audio in this way as ‘offloading’ as some of the cognitive processing of the visual channel is off-loaded to the verbal channel. It should be mentioned that the modality principle has the most research support of any of the design principles and many experiments have reached the same conclusion, that pictures combined with narration results in improved learning over pictures and on-screen text.

    In Figure 6, much of the on-screen text has been replaced by audio describing parts of the machine with the on-screen labels (synchronised with the audio) used to guide the learner to the part of the machine that the audio is referring to. Incidentally, presenting the information in this way also supports temporal-contiguity and reduces the amount of information that must be held in working memory.

    Figure 6

    Figure 6

    Redundancy Principle

    Whilst using text and audio to present on-screen information spreads the cognitive processing across processing channels, presenting audio and identical on-screen text results in redundant information being processed by the learner i.e. the same information is being processed by both channels. Studies show that learners who viewed multimedia presentations containing animations and narration outperformed those who viewed the same presentations that contained animation, narration and on-screen text. Further research by Mayer and Johnson confirmed this but with the addition of a limitation “except when the on-screen text is short, highlights a key action described in the narration, and is placed next to the portion of the graphic that it describes”. Therefore, the example in Figure 6 would not be an example of redundancy and the text is short and is positioned near to the part of the image that the narration is describing.

    Figure 7

    Figure 7

    The screen example shown by Figure 7 is an example of redundancy when the on-screen text is replicated by the audio narration being spoken. However, Figure 6 is an example that has had the redundant text removed except for a key piece of text that is timed to appear on-screen as the audio is being spoken.

    Personalisation Principle

    Another aspect of designing multimedia presentations is the style of writing used throughout. The opinions of designers is often divided when asked if it is better to write in a formal or conversational style. In studies by Mayer, Fennell, Farmer and Campbell, a multimedia lesson on how the human respiratory system works, the word ‘the’ was changed to ‘your’ in 12 places throughout the lesson. The hypothesis was that “using the self as a reference point increases learner interest and encourages the learner to use available cognitive capacity for active cognitive processing of the incoming information”. Results found that learning was improved on subsequent transfer tests but there was no significant improvement on retention tests. While the studies support the personalisation principle in multimedia instruction the authors caution the overuse of personalising as it may cause the instruction to contain interesting yet irrelevant details which in turn may distract the learner.

    The use of on-screen coaches or ‘pedagogical agents’ has also been examined to determine if they assist or hinder learning in multimedia presentations. Research found that learning was improved in groups whose multimedia contained an agent over those whose did not. Furthermore, it was also found that the agent did not have to look ‘real’ as there was no significant difference in results from groups who had a cartoon character agent.

    Summary

    Delivering instruction via multimedia presentations is widely used in many organisations. In order to improve learning from multimedia, instructional designers should look to apply evidence based principles of multimedia instruction into their designs in order to improve learning outcomes. This essay has discussed the cognitive theory of multimedia instruction along with the assumptions of how the human memory system operates. Furthermore, principles of multimedia design that can improve learning such as the multimedia principle, contiguity principle, modality principle, redundancy principle and personalisation principle were also discussed and applied to a sample eLearning module.

    References
    Clark, R., & Lyons, C. (2004). Graphics for learning. San Francisco, Pfeiffer.
    Clark, R., & Mayer, R. E. (2008). E-learning and the science of instruction: Proven  guidelines for consumers and designers of multimedia learning. John Wiley and Sons  Inc.
    Clark, R., Nguyen, F., & Sweller, J. (2006). Efficiency in learning. San Francisco: John  Wiley & Sons Inc.
    Mayer, R. E., Fennell, S., Farmer, L., & Campbell, C. (2004). A personalisation effect in  multimedia learning: Students learn better when words are in a conversational style rather than a formal style. Journal of Educational Psychology, 96(2), 389-395.
    Mayer, R. E., Heiser, J., & Lonn, S. (2001). Cognitive constraints on multimedia learning:  When presenting more material results in less understanding. Journal of Educational  Psychology, 93(1), 187-198.
    Mayer, R. E., & Johnson, C. I. (2008). Revising the redundancy principle in multimedia  learning. Journal of Educational Psychology, 100(2), 380-386.
    Mayer, R. E., & Moreno, R. (2003). Nine ways to reduce cognitive load in multimedia  learning. Educational Psychologist, 38(1), 43-52.
    Moreno, R., & Mayer, R. E. (1999). Cognitive principles of multimedia learning: The role of  modality and contiguity. Journal of Educational Psychology, 91(2), 358-368.
    Reed, S. K. (2006). Cognitive architectures for multimedia learning. Educational  Psychologist, 41(2), 87-98.

  • Pushing My Buttons

    Often when we talk about our work, we talk in terms of ‘what’ we did. The Showing My Work series of posts aim to also capture the ‘how’ something was done.

    E-Learning Heroes Challenge #89 – Creative Button Styles and Effects. The brief: This week, your challenge is to have fun with buttons! Play with different shapes, styles, and effects to show how you can use buttons creatively in e-learning. Be sure to include the Normal, Hover, and Selected states in your work.

    ELH Challenge #89

    In this challenge from a few months ago, we had to design some buttons. I came a little late to the party with this challenge and lots of great ideas had already been shared so I thought I’d try something a little different. I was on the train on my way back to Newcastle from Sydney so, with some time to kill I played around with some ideas. The brief was straightforward, our buttons had to have at least three states:

    • Normal (how it appears on-screen)
    • Hover (how it looks when you hover your mouse over)
    • Selected (how it looks when it’s been clicked or pressed)

    As usual I sketched my initial ideas on paper:

    Button sketches

    I had an idea (from the imaged used in the challenge that week) that maybe the buttons could react to each other based on what was happening at the time i.e. being hovered over and being selected. The illustrated characters in Storyline have in-built expressions and I thought that I could use these for the different states for each character.

    So I opened up my laptop and began to experiment with my ideas in Storyline 2.

    The design itself is pretty simple – a plain background, a headshot of my three characters (to do this I inserted each character and cropped them) and a rounded rectangle shape with a light fill and a thick border.

    In Storyline, ‘states’ allow you to the alter the appearance of an object – think the Incredible Hulk is the angry state of Dr Bruce Banner – and by default when you insert an object onto a slide in Storyline, how it looks is called its ‘normal’ state. So for my buttons, the normal state has each character with a neutral expression:

    normal states

    Note: I couldn’t group the character and the rounded rectangle shape together because grouped objects don’t have a state.

    For my hover state, I changed the expression of my character to ‘thinking’ like it’s getting ready to be chosen. I also thought it would be fun to have the other two buttons react because the mouse wasn’t hovering over them, so I created a state where they have a ‘worried’ expression on their face and they also look towards the button being hovered. To cater for the different combinations, my first guy would need to look to the right, my middle guy would need to look left and right and my third guy would need to look towards the left. So I created a left and/or right state for my characters.
    Because I added the in-built hover state to each character, no trigger was needed. But I needed to add triggers to the characters for their left/right states when one of the other characters was being hovered over. Here’s an example:

    Hover trigger

    I also thought I’d like to change the colour of the border when the mouse is hovering over the character. I couldn’t use the in-built hover state here because I didn’t want the state to change when I hovered over the shape so I created a state for it called ‘roll over’ and added another trigger:

    Frame trigger

    Hover states

    All I had left to do was the selected state and unexpectedly, this took this longest to figure out. The way I wanted the buttons to work was that once a button was selected, it stopped reacting with the other ones. I created a selected state where the character looked happy because he’d been chosen. It worked in that it changed state (to looking happy) but it also continued to react when it was hovered over or one of the other buttons was hovered over.

    I tried adding disabled state with a happy expression on my character but that didn’t work.

    I tried using a button set on the characters and that didn’t work either.

    Finally I tried adding a layer with a new rounded rectangle (with a green frame) and a copy of my character with a happy expression and success! The only thing I had to then do go into the slide layer properties and untick the ‘Hide other slide layers box’.

    Slide layer properties

    Selected states

    Whilst I probably won’t ever use buttons like this in a project, this was yet another example of how participating in a weekly challenge can help build your skills in using Storyline. All up this demo was pretty much done on the two and a half hour trip home (it was probably closer to 90 mins). You can see it for yourself by clicking on the image below to launch the demo:

    Button styles

    Let me know what you think and you can see all of my ELH Challenge entries on My Portfolio page.