tag:blogger.com,1999:blog-12710590229302689372024-03-06T06:44:18.439+01:00Maija PerfiljevaNotes on e-learning development, instructional design and performance improvement.Maija P.http://www.blogger.com/profile/03876378321908649349noreply@blogger.comBlogger31125tag:blogger.com,1999:blog-1271059022930268937.post-39891758775829626942020-07-23T10:25:00.001+02:002020-07-23T10:25:59.953+02:00Design Hardware: Rhodia Notepad Review<p dir="ltr">Today I wanted to take a look at a rather undervalued resource for designing and prototyping: paper.</p>
<p dir="ltr">Although I do advocate for paperless work and paperless office (particularly when it comes to printing out Word documents for reading), in the initial stages of the design process paper is vital to keep your focus on what matters and not on pixels, line widths and shades of gray.</p>
<p dir="ltr">In particular, I started to appreciate the dotted notepads. They do not distract from the content as much as lined or graphed paper does but provide necessary guides when you want to achieve straighter lines or more symmetrical elements.</p>
<p dir="ltr">The drawback of using paper vs. anything digital is, of course, the need to get paper from somewhere. I usually try using cheap or even discarded paper (e.g. a reverse side of those printouts you might have littering your workplace), but with the home office situation my recycling initiative winded down significantly, plus I wanted to sketch in style.</p>
<p dir="ltr">I love hardcover notebooks, but they tend to be pricey, particularly for formstorming. So I embarked on the search for dotted pads that would not make me broke while having reasonable quality. My most recent find is the <a href="https://www.amazon.de/Rhodia-16559C-DotPad-Block-schwarz/dp/B003UCL77U/" target="_blank">Rhodia notepad</a>. </p><p dir="ltr">Cheaper than most of the notepads, but offering a good quality of the paper and overall sturdiness. For the price, you will get 80 sheets of paper to use. The pages are easy to tear away if you want to put them up on the wall for dot-voting.</p>
<p dir="ltr">The cover is made of sturdy but flexible material and is designed to be nicely tucked over and under the pad. The drawback of this, however, is that after a while it refuses to stay closed.</p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxUFIV5ks7BDlWE2JcQ7hgMjI8Cnm7cDfTbXXSbwHmoCPNw0bu1NEPlwqTlcTdh2gC5N31JilXwkcoTfGrta78fjuWNSqiQ7QaD5u7Gz7spOzsVVAPXK0mZgaaqUPysMTbBdAA9MejLZo/s2048/1537429411893.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1152" data-original-width="2048" height="351" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxUFIV5ks7BDlWE2JcQ7hgMjI8Cnm7cDfTbXXSbwHmoCPNw0bu1NEPlwqTlcTdh2gC5N31JilXwkcoTfGrta78fjuWNSqiQ7QaD5u7Gz7spOzsVVAPXK0mZgaaqUPysMTbBdAA9MejLZo/w625-h351/1537429411893.jpg" width="625" /></a></div><p dir="ltr">In terms of thickness and marker bleeding, I have tested the pad with 6 writing implements:</p>
<p dir="ltr"></p><ul style="text-align: left;"><li>Edding 400 permanent marker</li><li>
Staedtler pigment liner</li><li>
Generic gel pen</li><li>
Stabilo Scribbi (kid's felt tip pen)</li><li>
Stabilo OHPen (non-permanent marker)</li><li>
Stabilo point 88 pen</li></ul><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto;"><tbody><tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiN6PzLRsMeB4IcUD_h4sGyuNVdVjM4-DrxYorXOCPUUvJf3wXSblO0LscfeoPdIGfeuhriL52XnSHX7R5uZL0PNcsHY1H1V35doM0zPdvDK5GRPd1UhB9f1JLtTRmNdzTIpMtrACtq6Y/s2048/20180920_085256.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" data-original-height="1152" data-original-width="2048" height="351" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiN6PzLRsMeB4IcUD_h4sGyuNVdVjM4-DrxYorXOCPUUvJf3wXSblO0LscfeoPdIGfeuhriL52XnSHX7R5uZL0PNcsHY1H1V35doM0zPdvDK5GRPd1UhB9f1JLtTRmNdzTIpMtrACtq6Y/w625-h351/20180920_085256.jpg" width="625" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">Test subjects</td></tr></tbody></table><p></p>
<p dir="ltr">The bleed-through was highest for the permanent markers, followed by equally low ghosting of the rest of the pens. I find this acceptable for the prototyping, as this ghosting is not disturbing, however, if you want a complete no-show, you will have to look somewhere else. </p><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto;"><tbody><tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6-51_IEkqRKfF7-8i9-KU88fsG1ILyo_IzUvvuvXKSISIdfOVehMQAQUrjXK4vjtIkJqkYWz5XFLyCDAqoOf3X-Cz1zDUc3ceC7O1njjq1Tpw6Tlq6ky1f6tBgJPDTBhFQUUTBWrVpEY/s2048/20180920_085342.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" data-original-height="1152" data-original-width="2048" height="351" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6-51_IEkqRKfF7-8i9-KU88fsG1ILyo_IzUvvuvXKSISIdfOVehMQAQUrjXK4vjtIkJqkYWz5XFLyCDAqoOf3X-Cz1zDUc3ceC7O1njjq1Tpw6Tlq6ky1f6tBgJPDTBhFQUUTBWrVpEY/w625-h351/20180920_085342.jpg" title="Reverse side" width="625" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">Test results: the reverse side of the page</td></tr></tbody></table><p dir="ltr"><br />Overall, I am happy with the quality/price balance and found Rhodia notepad a good match for my needs. <br /><br /><br /></p>
Maija P.http://www.blogger.com/profile/03876378321908649349noreply@blogger.com0tag:blogger.com,1999:blog-1271059022930268937.post-55882036529612384542020-02-03T11:37:00.001+01:002020-07-05T16:55:22.791+02:00User personas explained with cats<div dir="ltr" style="text-align: left;" trbidi="on">
What is a user persona? What is a good user persona? Do you need a user persona? There are a lot of definitions and templates available online, but the explanation I so far found working best is this...<br />
<br />
Imagine you decided to sell cat trees. You buyer persona will be a human. However, your buyer will most likely be considering the needs of the actual user: the cat.<br />
<br />
Do we really need a user persona for a cat? Don't all cats just need a place to scratch, jump, and hide? Not exactly. Big and heavy cats (like maine coons or Norwegian forest cats) need sturdy trees with large areas for stretching and lounging. Young kittens and older cats need trees that do not require jumping over big distances. Finally, cats in multi-cat households need trees with enough space for playing and hiding for at least two to three cats.<br />
<br />
Let's not forget the secondary user of the cat tree: the human. The human will need to transport, put together, and maintain the tree. They need a product that is easy to assemble, will last for a while, and degrade gracefully (because nobody wants pieces of the cat tree flying around the house after a week of use).<br />
<br />
Designing a universal cat tree "for everyone" is just as hard (if not impossible) as designing a universal product. Let's not forget that persona is not a solution but it is a summary of the user research you conduct before designing a product. Persona doesn't make your product automatically better, but it helps you ground product design decisions. Just like any tool, if you don't use it well, it may not bring you much, but if you use it right, you will discover quite a lot of benefits.</div>
Maija P.http://www.blogger.com/profile/03876378321908649349noreply@blogger.com0tag:blogger.com,1999:blog-1271059022930268937.post-24866160470492379842019-01-29T18:18:00.000+01:002019-01-29T21:18:00.170+01:00How to prepare individual assets for export in Adobe XD<div dir="ltr" style="text-align: left;" trbidi="on">This post is inspired by a brief discussion in the UX Course Slack channel. As part of the design handover, you may need to export assets from your design. While the course material extensively explains how to achieve this with Sketch or InVision studio, the rest of the tools are up to you to figure out.</div><div dir="ltr" style="text-align: left;" trbidi="on">
<br>
To combat that, here's a very quick and straightforward explanation of how to get your assets (and not just complete artboards (aka "screens")) out of Adobe XD.<br>
<br>
<h3 style="text-align: left;">
Step 1</h3>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbj7kmuBV4_m3H6JepVqxQd_h9pkSzYmKbLeUeJ9SEsKK872Y1Gr35bDjYKQlScX0Pf5vsouLYiNphCK_a3NOJX8cvo19pGc3fI2ZL392ek6f2xuqdZkSHpK5UfXLJI2Aa33YHeCl5QtU/s1600/Step+01.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" data-original-height="859" data-original-width="1600" height="342" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbj7kmuBV4_m3H6JepVqxQd_h9pkSzYmKbLeUeJ9SEsKK872Y1Gr35bDjYKQlScX0Pf5vsouLYiNphCK_a3NOJX8cvo19pGc3fI2ZL392ek6f2xuqdZkSHpK5UfXLJI2Aa33YHeCl5QtU/s640/Step+01.jpg" width="640"></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">A sample screen: Layer menu shows three assets we'll be exporting</td></tr>
</tbody></table>
<div>
<br></div>
Give the objects (aka layers) names and group them appropriately, if necessary. In the example above we have 3 things we're interested in: two buttons and a background picture.<br>
<br>
<h3 style="text-align: left;">
Step 2</h3>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivZRcicsJ7NW9oLrWexoUddukK0VaI_wMteMiWFi634MAyKOivEOKXEqbqK4_BTyoCKJKc1iYY37IMS6SwB3orV0TQQqEX6E3dLSDEqLQHjW0OqkQrXKD5VQ1CtuHsDYQ9ALFeS6GUMx4/s1600/Step+02.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" data-original-height="814" data-original-width="566" height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivZRcicsJ7NW9oLrWexoUddukK0VaI_wMteMiWFi634MAyKOivEOKXEqbqK4_BTyoCKJKc1iYY37IMS6SwB3orV0TQQqEX6E3dLSDEqLQHjW0OqkQrXKD5VQ1CtuHsDYQ9ALFeS6GUMx4/s640/Step+02.jpg" width="445"></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">This way you can mark multiple objects at the same time. If you want to mark just one object, you can hover over it and then click a little "export" icon, once it appears.</td></tr>
</tbody></table>
<div class="separator" style="clear: both; text-align: center;">
<br></div>
<div class="separator" style="clear: both; text-align: left;">
Now that your objects/layers are properly named and grouped, select them in the "Layers" menu and righ-click on your selection. Find and click on "Mark for Batch Export". This tells Adobe XD that you want these things exported.</div>
<div class="separator" style="clear: both; text-align: left;">
<br></div>
<div class="separator" style="clear: both; text-align: left;">
Now go through each of your artboards and repeat steps 1 and 2 until you're done. </div>
<div class="separator" style="clear: both; text-align: left;">
<br></div>
<h3 style="clear: both; text-align: left;">
Step 3</h3>
<div>
With all the necessary assets thusly marked for export, press Shift + Ctrl + E for Batch export. Follow on-screen prompts to select the necessary format and size (check the Activity requirements, as these may change) and enjoy your assets.</div><div><br></div>
</div>
Maija P.http://www.blogger.com/profile/03876378321908649349noreply@blogger.com0tag:blogger.com,1999:blog-1271059022930268937.post-62416166665240755632018-12-04T23:37:00.001+01:002018-12-04T23:48:02.511+01:00Opening Sketch files in Windows. No credit card required.<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
Recently my LinkedIn network mentioned a very nice library of human avatars: <a href="https://www.humaaans.com/">https://www.humaaans.com/</a> While this is an excellent tool and I was playing with this idea myself in the past, an average instructional designer, particularly in corporate, does not usually work on a Mac. And the files that are included in the Humaaans library can be opened in Sketch (a Mac-only program) or InVision Studio (which is also currently available only for Mac, although a Windows version will be coming sometime in the future).<br />
<br />
So, what can an average Windows-PC wielding instructional designer do? How can we lay our hands on this goodness?<br />
<br />
The answer is simple and quite unexpected. Get yourself <a href="http://www.figma.com/" target="_blank">Figma</a>. Figma is a free (for individuals) browser-based prototyping tool that I've used extensively for my UX Designer course and fell in love with. The learning curve can be quite steep if you learn it from scratch, I have to be honest, but it is definitely worth it. If you want to jump on the whole "I'm a learning experience designer" bandwagon and you can learn only one UX-related tool, then go for Figma.<br />
<br />
My romance with Figma aside, in this case it has one undeniable benefit. It can open Sketch files and it can export your creations as PNGs. Make that two benefits. And here's how to reap them.<br />
<h2 style="text-align: left;">
Set up</h2>
First, set everything up in 6 easy steps:<br />
<br />
<ol style="text-align: left;">
<li>Register with Figma.</li>
<li>Download the .sketch file from Humaaans.com </li>
<li>Open Figma </li>
<li>Import the .sketch file</li>
<li>Ignore any concerns about missing fonts.</li>
</ol>
<h3 style="text-align: left;">
Basic modifications</h3>
<div>
With the file open, select any of the humans, for example, in the "Basic" frame.</div>
<div>
<br /></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvJVTCqQgWjUD3kfBWvmiafMPrif62ExAbpLGhmUXBTIZADAD3wyaOoEzC_lzYjexJRkKZCOr7pPORpGN97xHvrPjsoG9PGBep30jQH77YuqPRi8u81VRwoibeNrsHZ-fXzGB-JBkYIxk/s1600/Untitled.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="897" data-original-width="1600" height="358" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvJVTCqQgWjUD3kfBWvmiafMPrif62ExAbpLGhmUXBTIZADAD3wyaOoEzC_lzYjexJRkKZCOr7pPORpGN97xHvrPjsoG9PGBep30jQH77YuqPRi8u81VRwoibeNrsHZ-fXzGB-JBkYIxk/s640/Untitled.png" width="640" /></a></div>
<br />
<br />
If you click around, you'll notice that each human consists of fours parts:<br />
<br />
<ul style="text-align: left;">
<li>head</li>
<li>body</li>
<li>legs</li>
<li>shoes</li>
</ul>
<div>
Go ahead and click on any of these four parts, for example, a head. Then, take a look at the right-hand panel. You'll notice an "Instance" dropdown in it.</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAYr3xwzuXm7Cncbh4HjOJRMLsu-3anQ2o_mN1oL6oLH4ZYM_NA1LB8WurwW1qmCTCWd08HduhKLGByX3cyEoTlSgyVUcmk46XjNcClWBJnmP9_rrqzfrouQJfLyq4xzT_H8ijN0J04VE/s1600/Untitled2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="277" data-original-width="597" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAYr3xwzuXm7Cncbh4HjOJRMLsu-3anQ2o_mN1oL6oLH4ZYM_NA1LB8WurwW1qmCTCWd08HduhKLGByX3cyEoTlSgyVUcmk46XjNcClWBJnmP9_rrqzfrouQJfLyq4xzT_H8ijN0J04VE/s1600/Untitled2.png" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Click on this dropdown and you will see all the different heads that you can use on this model. Pick a head and it will automatically replace the current style. Same will work for other components, such as body, legs and shoes. Note that each shoe will have to be selected separately. </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
So, playing around with the component instances, you can immediately create a slightly different scene than the one we've started with:</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWcom2gG-k40ASnF9dsHL_azBhQdZMSOEqirr8_B14_ti6eMCQvwFXNKLtTHthmjtyztqgMMMCBS44CTy1FkRno7qrxIvBrifUBBNC2mywUkbVkzUQ7JC6bFPL44IwAg14acaALX-TCEw/s1600/Untitled3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="897" data-original-width="1600" height="358" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWcom2gG-k40ASnF9dsHL_azBhQdZMSOEqirr8_B14_ti6eMCQvwFXNKLtTHthmjtyztqgMMMCBS44CTy1FkRno7qrxIvBrifUBBNC2mywUkbVkzUQ7JC6bFPL44IwAg14acaALX-TCEw/s640/Untitled3.png" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div>
</div>
<div>
With this knowledge unlocked, you can modify any of the models/compositions already included in the file, so try it out. </div>
<div>
<br /></div>
<h2 style="text-align: left;">
Rotating things</h2>
<div>
If so far you've been working with objects in the Basic frame you may notice that although you can rotate the complete humans, you can't move, rotate or resize heads or legs. This is because these two guys are <b>components </b>themselves. So their heads, legs etc. are components within components. Unfortunately, anything <b>anything that is contained within components </b>cannot be moved or resized in Figma. But do not despair! If you look at the frame "Separated components", you'll see that the humans in there are <b>groups </b>of components. </div>
<div>
<br /></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGbVH5sByy6kQgrxqy74kGYt2oRYMC4YmHtZJ-EdOd1mNTkNmhe94s3N8486vadydogTDWooTTksJadX-FpQ463DY3_HPJoiQKneEyEmgInsSvwWPfOUkXDZA2LMLOTSILuMN6pOs8N8o/s1600/Untitled4.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" data-original-height="469" data-original-width="824" height="364" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGbVH5sByy6kQgrxqy74kGYt2oRYMC4YmHtZJ-EdOd1mNTkNmhe94s3N8486vadydogTDWooTTksJadX-FpQ463DY3_HPJoiQKneEyEmgInsSvwWPfOUkXDZA2LMLOTSILuMN6pOs8N8o/s640/Untitled4.png" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Component on the left (note the purple frame) and a group on the right (not the blue frame).</td></tr>
</tbody></table>
<div>
<br /></div>
<div>
On the image above the character in the red jacket is a group of separate components and therefore can be rotated and resized as you wish. For example, like this:</div>
<div>
<br /></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipow_KFJ4wefY7oWyQH_oHLajU-76NV-5Mu-76gZQHIFTMzeMnO-fC3r_oNJzwY4g1G_exB8nDxdL8U-AobgS9cMuBiqGNtHF-4JEoCJOF9j2LXmL2DUtD3DvvTQmPihK8H2Pv59UBCVE/s1600/Untitled5.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" data-original-height="788" data-original-width="798" height="631" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipow_KFJ4wefY7oWyQH_oHLajU-76NV-5Mu-76gZQHIFTMzeMnO-fC3r_oNJzwY4g1G_exB8nDxdL8U-AobgS9cMuBiqGNtHF-4JEoCJOF9j2LXmL2DUtD3DvvTQmPihK8H2Pv59UBCVE/s640/Untitled5.png" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Rotating components</td></tr>
</tbody></table>
<div>
<br /></div>
<div>
You may, however make more advanced changes, like moving legs and arms separately. For example, maybe we don't like this sad doctor sitting rubbing her knee, we want her to strike a flying hero pose. </div>
<div>
<br /></div>
<div>
As you remember, I mentioned that anything within components cannot be resized or repositioned. So, since sleeves and hands are element of the "body/jacket" component, you can't resize them unless you break your component into separate objects. The consequence of this action is that you will lose the ability to "switch appearances" by selecting component instances (as the component will cease to exist). So, if you made up your mind about the character's clothing and are ready to move her arms and legs, select the component you want to modify, right-click and choose "detach instance":</div>
<div>
<br /></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhja7Jd041IWT8j_CRqr3FxCPTcfVDx6izpkYN8RxLZ-lLDDqrh8uSFggEUOvRpuRLLnP28BJ-LfjlvXk9-iW0Q48ekIX6NkAzU5EdOGR7qaR22gZlCrQ9J_LlyezYJUa6Bwe6j-_uP4AY/s1600/Untitled6.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" data-original-height="585" data-original-width="472" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhja7Jd041IWT8j_CRqr3FxCPTcfVDx6izpkYN8RxLZ-lLDDqrh8uSFggEUOvRpuRLLnP28BJ-LfjlvXk9-iW0Q48ekIX6NkAzU5EdOGR7qaR22gZlCrQ9J_LlyezYJUa6Bwe6j-_uP4AY/s1600/Untitled6.png" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">The component will be broken into pieces it's made of.</td></tr>
</tbody></table>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Note: at the moment Figma doesn't do this procedure well, so once you've clicked "detach instance", you should press Shift-Ctrl-G on the keyboard to get a proper set of separate objects. With this done, feel free to move and rotate them as you wish. You can also group objects (such as arms and hands) with Ctrl+G to rotate them together.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghzGu7sHCAdS91VyVUnMYydF17t3ic7ynWht1Iqvifp22nhJ01MMBkwBPYsQUvIi-mV46Xev-wUSt73vtXgWeXalscpUGiVHVSY0R5QwRZwcKkueGnt763PuOlSRb3HnKAuIR2_p4lrAk/s1600/Untitled7.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" data-original-height="500" data-original-width="502" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghzGu7sHCAdS91VyVUnMYydF17t3ic7ynWht1Iqvifp22nhJ01MMBkwBPYsQUvIi-mV46Xev-wUSt73vtXgWeXalscpUGiVHVSY0R5QwRZwcKkueGnt763PuOlSRb3HnKAuIR2_p4lrAk/s1600/Untitled7.png" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Striking a pose</td></tr>
</tbody></table>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<h2>
Exporting</h2>
<div>
You can export your creations as PNG, SVG or JPG. To do this, select all elements you want on your picture and group them together. Then, in the right-hand panel, find Export menu. There, click +, adjust export settings as you need and click "Export Group". </div>
<div>
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggNwGw9EkOYudpkiPorIfkOy_7SNmqcBct6ZTgUqi6Sfd458xFUEKPxYvLyW_pRZVvaU8SmDIeL-zovkKgkE1AdcC99RzqVmvh3QHsAKk7UT79EtT02Q0rzeDOkN4Qf7LBzITKz232_6s/s1600/Untitled8.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" data-original-height="503" data-original-width="811" height="396" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggNwGw9EkOYudpkiPorIfkOy_7SNmqcBct6ZTgUqi6Sfd458xFUEKPxYvLyW_pRZVvaU8SmDIeL-zovkKgkE1AdcC99RzqVmvh3QHsAKk7UT79EtT02Q0rzeDOkN4Qf7LBzITKz232_6s/s640/Untitled8.png" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Export</td></tr>
</tbody></table>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Et voila! You can now open Sketch files in Figma and do basic editing. Take that, Apple!</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
</div>
</div>
Maija P.http://www.blogger.com/profile/03876378321908649349noreply@blogger.com0tag:blogger.com,1999:blog-1271059022930268937.post-25783061777368824792018-09-07T16:01:00.001+02:002018-09-07T16:01:38.640+02:00Storyline Tutorial: Counting Answers<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: left;">
Sometimes we want to make sure that users attempt an interaction or select the right amount of options. While such mechanics alone are not helpful in ensuring that "people learn", they are great if you want to customise feedback or course content, or if just prevent accidental errors and attention slips.</div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
While Storyline makes it easy to check if the user selected all, one or none of the options, when it comes to n-amount of answers out of many, things get a bit more complicated. In the following example, we'll solve this problem by creating a simple interaction that will count the amount of answers selected and will warn the users if they have selected too few or too many. In this case, the users will have 6 options to choose from and they need to select exactly 3. You can see the finished example <a href="https://s3.eu-central-1.amazonaws.com/elh-challenges/counting_options/story_html5.html" target="_blank">here</a>. </div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
I've created a Storyline 360 file to get you started (<a href="https://drive.google.com/open?id=1wf3hGjWBYQFRxdTkY-wtTBblV1AOf9GT" target="_blank">download it here</a>). But if you wish, you can follow this tutorial in your own. Here are the elements you'll need:</div>
<br />
<ul style="text-align: left;">
<li>Objects to choose from (make sure they have the "Selected" state)</li>
<li>Submit button (either your own or the one in the player).</li>
<li>Layer with feedback for less than 3 answers selected</li>
<li>Layer with feedback for more than 3 answers selected</li>
</ul>
<br />
<br />
With the set up out of the way, time to add some interactivity. First, create a number variable "AnswersSelected". As the name suggests, it will be used to track the number of answers selected.<br />
<br />
Then, select the object "Option 1" (if you're using the tutorial file) or any interactive object (if you're working in your own project) and create the following trigger:<br />
<div>
<br /></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ8Vi-Rkh_IIEkcvZYDQN1Z9LNh1OvExOJrxNKxDPftDhMQV6tc3Jd48awt5cWaosXsbb4d-P2dprEEcFrHO6eIMXRLsTpOWu4AYTterhxM_5r-RhthJv2zpVoMgxEgcaFZ8oflHieyDI/s1600/01.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="523" data-original-width="485" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ8Vi-Rkh_IIEkcvZYDQN1Z9LNh1OvExOJrxNKxDPftDhMQV6tc3Jd48awt5cWaosXsbb4d-P2dprEEcFrHO6eIMXRLsTpOWu4AYTterhxM_5r-RhthJv2zpVoMgxEgcaFZ8oflHieyDI/s1600/01.png" /></a></div>
<br />
<br />
At this point you can add a text box with the variable reference to the slide and preview the slide to check if the trigger is working:<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjG6pyMogwSfmX9TT70UKkXNbxTYEWSdlFWEXP5iq0Zgo8ib6zmtCAoLs2QFG-dtsXPfksnwLTl9qh9Gfu9Ia-RD_xAaih5R4FJGFaYgLJLgrEK2LRJWt_AwJJHBvJPe5wDorQbofuKmEU/s1600/2.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" data-original-height="669" data-original-width="1202" height="356" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjG6pyMogwSfmX9TT70UKkXNbxTYEWSdlFWEXP5iq0Zgo8ib6zmtCAoLs2QFG-dtsXPfksnwLTl9qh9Gfu9Ia-RD_xAaih5R4FJGFaYgLJLgrEK2LRJWt_AwJJHBvJPe5wDorQbofuKmEU/s640/2.png" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">1 is the value of AnswersSelected variable.</td></tr>
</tbody></table>
<br />
If it <i>is </i>working and the variable value is changing with the object state, go ahead and copy this trigger to all other objects. As you paste the trigger, you will notice that all trigger references to "Option 1" automatically change to "Option 2", "Option 3" and so on - depending on which object you are pasting the trigger to. As you can see, copy/pasting triggers can save heaps of time (but only if you make sure the trigger works before copying it).<br />
<br />
As you have most likely noticed, at this point the value of the AnswersSelected variable will increase <i>each time</i> an object is selected. So, if you select and de-select the option "Bacon" three times, the course will think that you have selected three answers. So, we need to find a way to track when an answer is de-selected.<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhodcg8kXtPU82PjoxeFHnOKHzX_emPIrVNOJ837dOn2GFh3luD-emzQMcV12r3gkKGGivK99lTW9MNli9F41vzcYUgDXhA210-LdoS-rt8wLjXmdmYbJKI1ir_7d4zThOFXZchcLcpzaU/s1600/3.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" data-original-height="677" data-original-width="1206" height="358" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhodcg8kXtPU82PjoxeFHnOKHzX_emPIrVNOJ837dOn2GFh3luD-emzQMcV12r3gkKGGivK99lTW9MNli9F41vzcYUgDXhA210-LdoS-rt8wLjXmdmYbJKI1ir_7d4zThOFXZchcLcpzaU/s640/3.png" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">These are definitely not the results we are looking for...</td></tr>
</tbody></table>
<br />
Since we add 1 to the variable value whenever an object is selected, we will create trigger that substracts 1 if the same object is de-selected. To achieve that, create the following trigger:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjx5yWWtal71aS2NAItF5qQUhnxUR1RtWk1DxpIfVpkuG2Uu_jrAZk1o78WBASCrmOFAgzCz7YYjsHSNtUhAzBoPkKnGPqzOjWa7zvBRZojE3zj1FELY06dzxi_IKNXGGkIqu-Ek9ITJlI/s1600/4.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="530" data-original-width="485" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjx5yWWtal71aS2NAItF5qQUhnxUR1RtWk1DxpIfVpkuG2Uu_jrAZk1o78WBASCrmOFAgzCz7YYjsHSNtUhAzBoPkKnGPqzOjWa7zvBRZojE3zj1FELY06dzxi_IKNXGGkIqu-Ek9ITJlI/s1600/4.png" /></a></div>
<br />
Now, preview the slide once again and verify that the variable value changes correctly when you select and de-select the same object. If it is working (and it should), copy it over to other objects. <br />
<br />
With all triggers added, preview the slide once again and check if the variable value changes correctly. At this point it should, but in general, I recommend verifying your work often, so that you can pick up any issues early on and therefore troubleshoot them easier. <br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiER9i8PpbeIzDgZr00nojfavVn7PYHpL80PuK3cx69baYXaN8STa83sh3pbtirXymvoy_WktiQTt0G1VJ9rm8JWfNrw6rxL8wSTUl6BNQuIxiy_AspYjoOW3Vr9YaPgLuVAEE6zLVNgbE/s1600/5.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" data-original-height="674" data-original-width="1200" height="358" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiER9i8PpbeIzDgZr00nojfavVn7PYHpL80PuK3cx69baYXaN8STa83sh3pbtirXymvoy_WktiQTt0G1VJ9rm8JWfNrw6rxL8wSTUl6BNQuIxiy_AspYjoOW3Vr9YaPgLuVAEE6zLVNgbE/s640/5.png" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Although it is clear that bacon is the only choice that matters!</td></tr>
</tbody></table>
<br />
For the final touches, create a trigger to show feedback for less than 3 answers selected:<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicBHeY7fJ8ts4xR6f5S9L6AyiozeMervuVqh9-0U9LxVxfP7q-5Nc-3GyR_UnvkAb2-zOH0DFqsb0Bb50apzaqiwGjJzBP1dOyXdSDP-LUnseDa-0_CysQgB0Fg5qMEYdYEN7aDDJ5380/s1600/6.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" data-original-height="460" data-original-width="485" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicBHeY7fJ8ts4xR6f5S9L6AyiozeMervuVqh9-0U9LxVxfP7q-5Nc-3GyR_UnvkAb2-zOH0DFqsb0Bb50apzaqiwGjJzBP1dOyXdSDP-LUnseDa-0_CysQgB0Fg5qMEYdYEN7aDDJ5380/s1600/6.png" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><br /></td></tr>
</tbody></table>
<br />
Then, copy/paste this trigger and change the name of the layer and the value of the variable to show feedback for more than 3 selected answers.<br />
<br />
Finally, create a trigger to allow the user to continue if they selected exactly 3 answers:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizGassNDU_legVOAx0NUqH6IwD2AcKh0mSwrbY_fGMnuTU03uvMueo-l0j2ggA5UpDDjqf24K3_tnizy_gDPHynhNpnU5QpHUlRm_U1AQmmen6nDbxPNiBa-CRgqHzkBKDtTjHqll9AJs/s1600/7.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="460" data-original-width="485" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizGassNDU_legVOAx0NUqH6IwD2AcKh0mSwrbY_fGMnuTU03uvMueo-l0j2ggA5UpDDjqf24K3_tnizy_gDPHynhNpnU5QpHUlRm_U1AQmmen6nDbxPNiBa-CRgqHzkBKDtTjHqll9AJs/s1600/7.png" /></a></div>
<br />
<br />
And that's all there is to it - preview your work and enjoy!<br />
<br /></div>
Maija P.http://www.blogger.com/profile/03876378321908649349noreply@blogger.com0tag:blogger.com,1999:blog-1271059022930268937.post-60809895259073683952018-07-20T20:30:00.000+02:002018-09-07T16:04:52.723+02:00Instructional Design Walkthrough: Addressing Performance Issues with Training<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: left;">
In this post I would like to illustrate my instructional design process, based on one of the training solutions I've designed in the past (although some details have been adjusted to preserve anonymity and confidentiality). The purpose of this walkthrough is to outline, in broad strokes, the instructional design process from the initial request to the final product and highlight the main deliverables of each phase.<br />
<br />
As you will notice, my process is based on ADDIE. Although it is very common these days to dismiss ADDIE as "outdated", "non-agile" and "not a framework", I hope that with this post I can show that it's not as bad as it seems and a big part of success can depend on you as an instructional designer, no matter what way of work you're using.</div>
<div style="text-align: left;">
<br /></div>
<h3 style="text-align: left;">
Initial Request</h3>
Company A's Quality Department discovered that Customer Service Agents (CSAs) were not correctly handling customer contacts related to issues with the discount codes, which led to monetary losses. Following the discovery, Quality Manager (QM) requested the development of a 2-hour e-learning module to be rolled out to all CSAs globally in 5 different languages, as well as to be incorporated into the new hire curriculum.<br />
<br />
<h3 style="text-align: left;">
Analysis</h3>
As the Instructional Designer in charge of this project, I held a discovery meeting with the QM followed with a meeting with a subject matter expert (SME), who had not only the knowledge of the subject itself, but could also provide trustworthy insight into daily work, motivations and challenges of the CSAs.<br />
<br />
<div style="text-align: left;">
During this meeting I focused on the answers to the following questions:</div>
<ul style="text-align: left;">
<li>What is the business goal of this training and how will we measure the success?</li>
<li>What does the data tell us about CSAs' performance in each region?</li>
<li>What documentation, if any, is already available to the CSAs?</li>
<li>What are the typical or recurring mistakes?</li>
<li>Why do these mistakes happen?</li>
<li>What do we want the CSAs to do instead?</li>
</ul>
Based on the discovered information, I:<br />
<ul style="text-align: left;">
<li>Reduced the target audience to the regions where performance issues were confirmed by data</li>
<li>Identified real causes of the performance issues, such as lack of practice in the investigation of promotional issues or the fact that performance issues were rooted in the good intentions, but wrong assumptions about the consequences of the actions taken. In other words, CSAs genuinely assumed that they were doing something good. </li>
<li>Formulated the training goal and performance-oriented learning objectives</li>
<li>Reduced the projected training time by identifying performance issues that could be addressed through training</li>
</ul>
The changes to the project scope and learning objectives were signed off by QM and the SME. The reduction of training time and target audience was received particularly positively as it reduced the unnecessary costs of the project.<br />
<br />
<h3 style="text-align: left;">
Design and Development</h3>
After completing the analysis, I:<br />
<ul style="text-align: left;">
<li>Created a course blueprint outlining the identified performance issues with matching instructional activities and, where necessary, sources of theoretical information required to complete these activities.</li>
<li>Iteratively designed an e-learning module, beginning with a low-fidelity prototype in the PowerPoint. </li>
<li>Guided SME through the reviews of the prototype and adjusted it based on SMEs feedback.</li>
<li>Developed the final module, featuring software simulations and branching conversation scenario in Storyline.</li>
</ul>
The module featured:<br />
<ul style="text-align: left;">
<li>Short introductory scenario to introduce the learners to the consequences of their choices</li>
<li>Worked examples of the troubleshooting cases</li>
<li>Several troubleshooting simulations where the learners were required to use the simulated software environment and available information sources to correctly identify the customer's issue and take appropriate action. Upon completion of each scenario the learners received detailed feedback on their actions.</li>
<li>Branching scenario based on the conversation with a customer, where the learner needed to positively present the troubleshooting process and correctly set customer's expectations regarding the outcome of the investigation. </li>
</ul>
The finished course was reviewed and tested by the QM, two SMEs who did not participate in the development process, as well as the CSA trainers. It was not possible to test the module on the CSAs themselves due to constraints on their availability.<br />
<br />
<h3 style="text-align: left;">
Implementation and Evaluation</h3>
Following the rollout of the training, it was evaluated on the following levels:<br />
<ul style="text-align: left;">
<li>Reaction of the learners</li>
<li>Changes in performance</li>
<li>Business impact</li>
</ul>
As an instructional designer, I designed the reaction evaluation survey and gathered the response data via LMS. I collaborated with the Quality Department on gathering and analysing data for the performance chance and business impact. The change in performance was measured as the decrease in wrong solutions and increase in the reports of the issues via correct channels. The business impact was measured in terms of reduced financial losses related to mishandled promotional issues.<br />
<br />
Overall, the training led to statistically significant changes in performance as well as considerably positive business impact. On the level of learner's reaction 90% of respondents stated that the training has provided them with valuable practical knowledge and 96% of respondents stated that they will be applying new skills in their daily work. The comments from the learners highlighted the benefit and importance of simulations and scenarios.<br />
<br />
Due to the success of the training and following the consultation with Customer Support trainers and leads, it was included into the standard new hire training to ensure that the performance issues were being not only treated, but also prevented.<br />
<div>
<br /></div>
</div>
Maija P.http://www.blogger.com/profile/03876378321908649349noreply@blogger.com0tag:blogger.com,1999:blog-1271059022930268937.post-76823508855391718392018-02-11T12:25:00.000+01:002018-02-11T12:25:20.476+01:00Pilling a Cat: How Training Actually Works<div dir="ltr" style="text-align: left;" trbidi="on">
<div>
Whether you are an instructional designer or a customer of external training providers, you may succumb to the idea that success of a training depends on:</div>
<div>
<ul style="text-align: left;">
<li>Length (microlearning!)</li>
<li>Format (engaging videos!)</li>
<li>Digital delivery (online learning is the best!)</li>
</ul>
</div>
<div>
With all the buzz in the media, it's hard to resist this opinion. The idea of micro-videos seems to be more enthralling than <a href="http://dilbert.com/strip/2009-03-07" target="_blank">pie charts</a>. So here's a simple way to see if the "learning nuggets" and "attention-grabbing videos" produce any return on investment:</div>
<div>
<ul style="text-align: left;">
<li>Watch <a href="https://www.youtube.com/watch?v=ZNolEyL3pWI" target="_blank">this short YouTube video</a> about giving a pill to a cat.</li>
<li>Get a real cat and try giving it a pill (or a delicious snack they are not in the mood to eat).</li>
</ul>
</div>
<div>
Assuming you're new to the task, I'm quite sure that the outcome will depend not on your skills, but on the cooperation of the cat. In other words, it's not your mastery, but the ease of the problem that will define the outcome. As soon as you face a cat that deviates from the example in the video, you will most likely be at a loss (quite possibly a loss of blood, too). So much for the learning nuggets. </div>
<div>
<br /></div>
<div>
The format of the "nugget" doesn't matter. Whether it is a video, a drawing, or a drag and drop activity to arrange the steps in the right order. None of these will lead to improved performance post-training. </div>
<div>
<br /></div>
<div>
The reason is simple. The video contains the basic information: hold the cat's head, aim the pill at the back of its tongue, etc. There is nothing wrong with this information. It is useful and worth knowing before you approach a cat, as it can save you some time and trouble of experimenting. But the information is not enough.</div>
<div>
<br /></div>
<div>
Witnessing a demonstration of an ideal process does not necessarily prompt deep-level processing. In fact, it may lead to the false sense of competency. It's like looking at abstract art and claiming that anyone can do it. On the other hand, engaging with a real cat in the real world, gives you a reality check and stirs up a lot of questions, for example: </div>
<div>
<ul style="text-align: left;">
<li>How hard can I hold the cat's head without causing damage?</li>
<li>Can a cat bite its tongue if I try to close its mouth?</li>
<li>If the cat is making noises, which can I ignore and which are the signs that I'm hurting the cat?</li>
<li>What to do if the cat mastered tongue-wriggling and pill-spitting quicker than I mastered cat-pilling?</li>
</ul>
</div>
<div>
In the ideal situation, after grasping a basic idea of what we're supposed to do, we would venture forth and try to pill different cats with the gradually increasing level of difficulty. We would then reflect on our experience and seek ways to improve the outcome next time. This, and not the format of the presentation, would lead to the true engagement with the subject matter and acquisition of mastery. </div>
<div>
<br /></div>
<div>
Of course, one may ask - how would it be possible to achieve all of this in an e-learning module? I would say that this is a wrong question to ask, since it focuses on the format. Don't put the format before the goal. Look past isolated events and their formats. Consider performance improvement as a process spanning time and variety of contexts. For example, are the newly trained "cat pillers" assigned to cat pilling or do they do inventory? Do mentors observe their work, encourage reflection and provide feedback? Or do they schedule a perfunctory monthly meeting to listen to the learner's self-report of their mastery? Do the cat pillers have access to supplementary tools to aid their performance? Can they use these tools? </div>
<div>
<br /></div>
<div>
In short, there is nothing inherently wrong with using videos or providing information. What's wrong is stopping there. Whether we design or buy a training program, it must not stop at the dissemination of information. To achieve performance improvement, a full-scale training program would need to include:</div>
<div>
<ul style="text-align: left;">
<li>Application of knowledge in novel contexts </li>
<li>Realistic challenge </li>
<li>Gradual increase of difficulty</li>
<li>Reflection and feedback</li>
<li>Continuation of the development post-training</li>
<li>Tools and processes that support performance post-training</li>
</ul>
</div>
</div>
Maija P.http://www.blogger.com/profile/03876378321908649349noreply@blogger.com0tag:blogger.com,1999:blog-1271059022930268937.post-82434663267313911972018-01-08T21:25:00.000+01:002018-01-08T22:30:41.583+01:00Story-Based or Scenario-Driven?<div dir="ltr" style="text-align: left;" trbidi="on">
Having a shared terminology is important as we use words to describe our reality, communicate ideas and achieve understanding. However, since many people step into the field of Learning and Development by following very different paths, not everyone in this sector uses a stable common language. Even the word "e-learning" can conjure up different images in the minds of different audiences. Add to this the need to communicate with non-L&D stakeholders who aren't highly interested in the semantics and the constant noise produced by marketing-oriented publications touting "story-driven action-packed gamified microlearning scenario-based videos" and you have a full picture of our messy reality.<br />
<br />
The issue that I see particularly often is with the use of words "story", "scenario" and "case study". Recently I had to go review the offers from e-learning providers who, naturally, boasted of developing "practical scenario-based modules", which upon a closer inspection turned out to be the dreaded infodumps in disguise. While I do not aspire to lay the foundation for the new universal terminology, in this blog post I would like to reflect on these misused terms, and take a look at what they mean and how can we tell them apart.<br />
<div>
<br />
<h3 style="text-align: left;">
Story</h3>
Let's start with the easy one. We all know what a story is - a narrative with protagonists and antagonists, beginning, climax, etc. They can be told in different ways and employ different techniques to raise the audience's interest. However, the stories have a definite structure that is independent of the audience's actions, thoughts and desires. The story follows its predefined path from start to end.<br />
<br />
Stories can be educational, enlightening, and inspiring, but when it comes to training in the sense of improvement of performance and skills, stories are not enough. For example, I can tell you a story about how I designed a training. While you might get some ideas from it, if you're not an experienced instructional designer, this story will not really teach you how to become one and it will not have lasting impression on your performance. In essence, a story can serve as a frame within which a training is structured, but we still need to use activities, practice and feedback to achieve the training goals. <br />
<br />
<h3 style="text-align: left;">
Case Study</h3>
Firstly, to add more complexity to the subject, a case study as a learning method can be confused with a case study as a research method. Secondly, I often see novice instructional designers who entered the field as SMEs writing stories and then christening them "case studies". For example, the novice designer may write a story about a patient who was misdiagnosed in a hospital, what happened as a result and what should have been done instead. This is not a case study in the slightest. <br />
<br />
A case study presents the learner with the realistic challenge or question and contains supporting case materials, documents and data to be analysed - the actual content will depend on the instructional purpose. It can and usually is based on a story, whether real or realistically imagined, but the story is used to provide context and realism for the task. The solutions are sought by learners and later discussed with a mentor or in a group setting. Case studies are best used for challenges that don't have very specific solutions and where analytical thinking, argumentation and evaluation of different perspectives is important. For instance, using a previous example of the patient - a case study would be giving learners the patient's history and then asking them to come up with the diagnosis and justify it with the evidence from the case materials.<br />
<br />
<h3 style="text-align: left;">
Scenario</h3>
A scenario is often the most elusive concept to describe (especially since it can be very synonymous with a story), so in this case I will borrow the definition from Ruth C. Clark (2013, p. 5): <br />
<br />
<blockquote class="tr_bq">
"Scenario-based e-learning is a pre-planned inductive learning environment designed to accelerate expertise in which the learner assumes the role of an actor responding to a work-realistic assignment or challenge, which in turn responds to reflect the learner's choices." </blockquote>
<br />
As we can see from the definition, what makes scenario different from a case study or a story are these factors:<br />
<ul style="text-align: left;">
<li>Learner has an active role</li>
<li>Learner solves a realistic work challenge</li>
<li>The environment responds to the learner's actions </li>
</ul>
In contrast, the story/parable does not include the learner as an actor, as they are simply observing the events that unfold. The case study, while asking the learner to work on a realistic task, does not allow them to see the results of their proposed solutions. The results can be hypothesized or imagined, but never really experienced. A scenario, however, presents the learners with choices, challenges and realistic consequences or responses. </div>
<div>
<br /></div>
<div>
I would note here that in my experience, scenarios are very often associated, sometimes almost exclusively, with "branching" and "dialogues". However, "branching" is a purely technical term that usually makes sense when scenario is developed in a slide-based (or screen-based) software and dialogues are just one example of a work-related challenge. Alternative scenarios could be making a perfect cup of coffee or carrying out a medical procedure. </div>
<div>
<br /></div>
<h3 style="text-align: left;">
Now What?</h3>
<div>
Having said all that, I have to admit that for people like me, who appreciate the power of radical clarity, it is often natural to engage in petty discussions about whether a "true" scenario should be branching or not, or whether a short video is a micro-, nano- or É°-learning. Such discussions, particularly on social media where argumentation should be tastefully omitted for the sake of brevity and witticism, are very enjoyable but, as many pleasant things in life, rather unhealthy. The practical purpose of terminology is not to rigidly label every concept in our reality (or die trying), but to facilitate common understanding and the ability to look beyond attractive labels and see the true nature of "scenario-driven interactive experiences", as not all of these are created equal. </div>
<div>
<br /></div>
<div>
<br /></div>
<div>
References:</div>
<div>
<br /></div>
<div>
Clark, Ruth Colvin (2013) <i>Scenario-based e-Learning: Evidence-Based Guidelines for Online Workforce Learning, </i>Pfeiffer</div>
</div>
Maija P.http://www.blogger.com/profile/03876378321908649349noreply@blogger.com0tag:blogger.com,1999:blog-1271059022930268937.post-64030088471124810982017-08-31T16:16:00.000+02:002017-09-01T17:13:34.352+02:00My E-Learning Design Process: Taking out the Trash<div dir="ltr" style="text-align: left;" trbidi="on">
It will sound strange, but it's true: the most fascinating part of my life in Germany is recycling. To be more precise, the sorting of trash. Wait, don't go yet, this will actually be about e-learning! To give you an idea of the importance of this question, here's a photo of a document I received in the mail some time ago. If you're curious, it contained the news about the <i>new color</i> of our "bio-trash" bins. Serious business.<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyIpgfQrF2gGB2wldUvIgHKllFc_iriX3DtB8yKeRGOWLIMY4dSgUXXLo68FKaM4gsPf8-O9Y6RqfrXprODH6YbllwyYXiAq-6QXYXrFZaFmnyiUBB-Mp63NiJcvGAxnNpS04PZP8O7Qc/s1600/trash_notice.JPG" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" data-original-height="525" data-original-width="700" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyIpgfQrF2gGB2wldUvIgHKllFc_iriX3DtB8yKeRGOWLIMY4dSgUXXLo68FKaM4gsPf8-O9Y6RqfrXprODH6YbllwyYXiAq-6QXYXrFZaFmnyiUBB-Mp63NiJcvGAxnNpS04PZP8O7Qc/s1600/trash_notice.JPG" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">So, do you receive important news about your trash very often?</td></tr>
</tbody></table>
<br />
Of course, when I saw the title ("Keep It or Toss It") of <a href="https://community.articulate.com/articles/keep-it-or-toss-it-elearning-interactions" target="_blank">this week's ELH Challenge</a>, I could not resist. I had to come up with an interaction dedicated to the complex intricacies of the trash sorting. You can see my submission <a href="http://bit.ly/2vp4add" target="_blank">here</a>.<br />
<br />
In this post I'd like to talk about the making of this interaction, focusing on three points:<br />
<ul style="text-align: left;">
<li>Thought process behind the making of this interaction and some instructional design.</li>
<li>Fast and efficient way of making a drag and drop interaction without the "Freeform" option. </li>
</ul>
This is a reflective post and not a tutorial. I often enjoy reading reflective posts by designers and developers, as it helps me understand their thoughts and approaches to the task at hand. So, I hope you will enjoy it too, particularly if you're at the beginning of your e-learning development journey. For your convenience, I've summed up some "lessons learned" after each part.<br />
<br />
<h2 style="text-align: left;">
Instructional Design</h2>
<div style="text-align: left;">
Yes, there's actually some thought and not only humor in this small piece. As you will notice, it doesn't have any theory or "help resources" included to support the learner. This is neither due to the lack of theory (there are plenty of schemes and manuals), nor an omission by accident. </div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
In fact, I first thought about adding an explanation of which trash goes where. But, my intention was not to test people's memory. Instead, as is my usual approach when designing training, I wanted users to learn by making assumptions and testing them. In a real life, you probably wouldn't read a manual about taking out the trash. Instead, you'd separate it however you feel is logical and be done with it. Thus, the only difference from life in this case would be an opportunity to get feedback on your assumptions.<br />
<br />
Speaking of which, my original intention was to include the most confusing trash items. In fact, I selected 8 items at first, but decided to cut it in half, considering that ELH Challenges are usually short.</div>
<div style="text-align: left;">
<h3 style="text-align: left;">
In short: </h3>
</div>
<div style="text-align: left;">
</div>
<ul style="text-align: left;">
<li>Create life-like contexts and tasks</li>
<li>Devise activities based on popular misconceptions</li>
</ul>
<br />
<ul style="text-align: left;">
</ul>
<h2 style="text-align: left;">
Design</h2>
<div>
It took me slightly less than 3,5 hours to create<a href="http://bit.ly/2vp4add" target="_blank"> the "course"</a> from complete nothing to finish. </div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfTCcrc1gkIgakiLZBn8o31RNsbn2I16IyDGfxFnwGcAyuFczFzatOIZQMkEHOFK-ZCZLHnTPTVhxY_TqNZhvAa0u6C-z_LLzX2Tz4FXpOZAKzBZI4CPJRpWvuVLqbtG5se4LzXVg4BQA/s1600/interaction.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="392" data-original-width="700" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfTCcrc1gkIgakiLZBn8o31RNsbn2I16IyDGfxFnwGcAyuFczFzatOIZQMkEHOFK-ZCZLHnTPTVhxY_TqNZhvAa0u6C-z_LLzX2Tz4FXpOZAKzBZI4CPJRpWvuVLqbtG5se4LzXVg4BQA/s1600/interaction.png" /></a></div>
<div>
<br />
This may seem like a huge amount of time to spend on something as simple as 6 trash cans, a draggable object and some text. That's absolutely true, but only if you have a solid idea or a prototype to work from. Getting to this prototype is what's complicated and requires time. The biggest chunk of time (around 2 hours) was spent on ideation - coming up with an idea, scouting for available assets, choosing fonts and colors, and deciding on the final look. The rest was spent on creating assets, slides, interactions, as well as writing feedback, publishing, bug-zapping, and, most importantly, admiring the end result.<br />
<br />
When I work on ELH Challenges, I do some formstorming and play with different ideas on paper before choosing one and developing it further. I have to say, unless a brilliant idea suddenly dawns upon me from the start, the more I engage in the formstorming, the better the result. So, the time spent on it should not be seen as a waste. This may be an obvious statement, but if you're locked in a "rapid e-learning development" environment, it's hard to stick to this opinion.<br />
<br />
<blockquote class="tr_bq">
Formstorming is something I've learned in the <a href="https://www.coursera.org/learn/fundamentals-of-graphic-design" target="_blank">Fundamentals of Graphic Design</a> MOOC. As Lupton and Phillips (2015, p.13) define it: "Formstorming is an act of visual thinking - a tool for designers to unlock and deepen solutions to basic design problems. [...] Formstorming moves the maker through automatic, easily conceived notions, toward recognizable yet nuanced concepts, to surprising results that compel us with their originality." There are different ways to do it, but the approach I use most often is to create as many iterations of a subject as possible. If you're interested, <a href="https://image.slidesharecdn.com/graphic-design-the-new-basics-160218040452/95/graphic-design-the-new-basics-15-638.jpg?cb=1455768584" target="_blank">this is a great example of 100 iterations of a letter A</a>.</blockquote>
<br />
In this particular case, however, everything was defined by the trash cans. I made these directly in Storyline, so the rest of the module had to match in form and style. Still, even with this quite specific goal in mind, there were some questions to mull over:<br />
<br />
<ul style="text-align: left;">
<li>How do I make sure that the user identifies the material of an object correctly? Since the assets are not photographic, it might not be obvious of a bottle is made of glass or plastic.</li>
<li>Where to place the drag object?</li>
<li>Where to put initial instructions?</li>
<li>Where and how the feedback will appear?</li>
<li>What about a progress indicator?</li>
<li>Should I add sound effects?</li>
<li>Should I add some limits to the amount of mistakes?</li>
<li>Fonts?</li>
<li>Colors?</li>
</ul>
<div>
And probably some more. I went through approximately 10 different slide design variations before settling on the final version. For example, I've tried adding a wall behind trashcans and writing the object description in the graffiti-like font (it didn't work well with a "cutesy" flat design) or adding a progress tracker. </div>
<div>
<br /></div>
<h3 style="text-align: left;">
In short:</h3>
<div>
<ul style="text-align: left;">
<li>Formstorming is not a waste of time, because...</li>
<li>The more design questions you answer before starting with the actual development, the faster you'll develop.</li>
<li>You can formstorm in Storyline, but I recommend starting on paper first.</li>
<li>Next time someone asks you, "But how hard can this be?!", you can show them this post.</li>
</ul>
</div>
<h2 style="text-align: left;">
Development</h2>
As I often say, once you know what you're doing, development is easy. In this case I followed <a href="http://blog.instructionaldesign.expert/2017/08/storyline-tips-for-speed-precision-and.html" target="_blank">my own advice</a> and finalised one activity slide, before copying it several times and making small adjustment.<br />
<br />
I didn't use any special tricks to create the activity. It is made from scratch, but you can achieve the same effect with the "free form" option. I prefer my own triggers, unless I'm really pressed for time (mostly because I feel more in control). The triggers are very simple:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEvJ94259Og0WGL4x6_GAIy0HKK9M7Fdgtqmp4cnrZJR9HQpSX9ZursyCzu9ssWFDLII-Cb4nHP7oohE8E1ZmMTVvH9vJIFK5u6LGLcJT5n3HCtrck2qHhfcm1X2XdqpgZm3l9Q86pgNE/s1600/triggers.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="283" data-original-width="310" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEvJ94259Og0WGL4x6_GAIy0HKK9M7Fdgtqmp4cnrZJR9HQpSX9ZursyCzu9ssWFDLII-Cb4nHP7oohE8E1ZmMTVvH9vJIFK5u6LGLcJT5n3HCtrck2qHhfcm1X2XdqpgZm3l9Q86pgNE/s1600/triggers.png" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
"What's that with the layer 'Object?", you might ask. Excellent question. The layer "Object" is actually showing the description of the trash item:<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgipY8qeGOY4ersMPoXNhu16rOLNBGKOOV6dsp6Hsw3oLu3E5eRvKKQWL_eJEwy54DpGePrYeYXYiPZZdpgsIreWpv_fo3zo_DbTGJ7xjcCMaCJ_Kt-Ze3LDhdmbHZJmRWHSCD3WX2xWj4/s1600/layer_object.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" data-original-height="400" data-original-width="700" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgipY8qeGOY4ersMPoXNhu16rOLNBGKOOV6dsp6Hsw3oLu3E5eRvKKQWL_eJEwy54DpGePrYeYXYiPZZdpgsIreWpv_fo3zo_DbTGJ7xjcCMaCJ_Kt-Ze3LDhdmbHZJmRWHSCD3WX2xWj4/s1600/layer_object.png" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Object "name" and description on a separate layer</td></tr>
</tbody></table>
<br />
The purpose here is to automatically get rid of this text when the feedback layers appear (instead of hiding it on each layer's timeline). I sometimes do this when I have layers and need to either hide a lot of objects at the same time and quickly, or show something only once. While this is not hugely beneficial for an interaction with just two layers, if you have to do this for let's say 10 layers, you begin to see the benefit.<br />
<br />
The only other point I would highlight here, is that it might be tempting to see each trash can as a separate object and set up the triggers for each individually. In this case, however, as you most likely noticed from the triggers, I used two hotspots instead: a small one for the correct can and a big one, spanning across the slide, for all the others:<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7j1kSLAUa9PJrc50SzTTDg_xIM24jorftJUgZV6QGt24QlA5zMLpyOnW-XtQEstklKHoGrmF6t_Z9vyk8wMEhH3NSZC5UdBgOLPijT-TjIfRxe9-Gl_EQPsHxoXwT6FGXvpr5gRBVIEA/s1600/interaction_hotspots.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" data-original-height="390" data-original-width="700" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7j1kSLAUa9PJrc50SzTTDg_xIM24jorftJUgZV6QGt24QlA5zMLpyOnW-XtQEstklKHoGrmF6t_Z9vyk8wMEhH3NSZC5UdBgOLPijT-TjIfRxe9-Gl_EQPsHxoXwT6FGXvpr5gRBVIEA/s1600/interaction_hotspots.png" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Green (correct) hotspot is placed over the red (wrong) one.</td></tr>
</tbody></table>
<br />
This way it was easier to create additional slides by duplication, as I didn't need to re-do the triggers at all. Instead, I simply moved the "Correct" hotspot to the right bin. An optional touch was to hide incorrect bins on the feedback layers, but this was also easily adjusted.<br />
<br />
<h3 style="text-align: left;">
In short:</h3>
<ul style="text-align: left;">
<li>Consider moving objects from the base slide to a layer, if you want to consistently hide them when other layers appear.</li>
<li>Avoid extraneous work whenever possible (do you really need to have 6 drop targets where 2 are enough?).</li>
<li>My advice from <a href="http://blog.instructionaldesign.expert/2017/08/storyline-tips-for-speed-precision-and.html" target="">this post</a> is actually good. :) </li>
</ul>
<div>
<i><br /></i>
<h3>
References</h3>
<span style="background-color: white; color: #464646; font-family: Arial, Montserrat, sans-serif; font-size: 13.5px;">Lupton, E. and Phillips, J.C., </span><em style="background-color: white; border: 0px; box-sizing: border-box; color: #464646; font-family: Arial, Montserrat, sans-serif; font-size: 13.5px; font-stretch: inherit; font-variant-numeric: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">Graphic Design The New Basics, </em><span style="background-color: white; color: #464646; font-family: Arial, Montserrat, sans-serif; font-size: 13.5px;">New York, Princeton Architectural Press, 2015.</span><br />
<div>
<span style="background-color: white; color: #464646; font-family: Arial, Montserrat, sans-serif; font-size: 13.5px;"><br /></span></div>
<div>
<span style="background-color: white; color: #464646; font-family: Arial, Montserrat, sans-serif; font-size: 13.5px;"><br /></span></div>
<i><br /></i></div>
<div>
<i>Liked this post? Hated it? Want to hire me or get in touch? Let me know in the comments below or ping me on <a href="https://www.linkedin.com/in/mperfiljeva/" target="_blank">LinkedIn</a>. I also do <a href="http://instructionaldesign.expert/" target="_blank">freelance projects</a>.</i><br />
<br /></div>
</div>
<div>
<h3 style="text-align: left;">
<br /></h3>
</div>
</div>
Maija P.http://www.blogger.com/profile/03876378321908649349noreply@blogger.com0tag:blogger.com,1999:blog-1271059022930268937.post-73557687064112821852017-08-29T00:11:00.000+02:002017-08-29T12:34:40.145+02:00Freebee: PowerPoint Chat Bubbles<div dir="ltr" style="text-align: left;" trbidi="on">
Because one can never have too many chat bubbles. Click <a href="https://drive.google.com/open?id=0B2CXVo5Awkn7TVhqTE41alo1MG8">here</a> to download the PowerPoint file, which includes all of the following speech bubbles: <br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkUTG8Ybiz4v6NbsxrYf77muTjyhUAafGgQsLegQ8SsRgpt6lHjYB45qRLjtS1PwjJ57FB59fTNyolMdwYs2F4DmXcDAW6jzwe1noq_Rr7WtlHU_xXaLo1VjDQ1btU5ErzwKWJwB7lGq4/s1600/freebee.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="891" data-original-width="1600" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkUTG8Ybiz4v6NbsxrYf77muTjyhUAafGgQsLegQ8SsRgpt6lHjYB45qRLjtS1PwjJ57FB59fTNyolMdwYs2F4DmXcDAW6jzwe1noq_Rr7WtlHU_xXaLo1VjDQ1btU5ErzwKWJwB7lGq4/s1600/freebee.png" /></a></div>
<br />
The file is created by me and you can, naturally, use it for whichever personal or commercial purposes. All objects are editable and you can scale them, change fill and outline colors and save them as pictures. For text, I recommend adding separate text boxes and grouping them with the bubbles.<br />
<br />
The fonts seen in the image are not included in the file. In case you're interested, the fonts are (from left to right and top to bottom):<br />
<ul style="text-align: left;">
<li><a href="https://creativemarket.com/mikkomix/734839-Mix-Redux">MixRedux</a> by <a href="https://creativemarket.com/mikkomix" target="">Mikko Sumulong</a>, </li>
<li><a href="https://wildtype.design/product/banaue-handwritten-font/" target="">Banaue</a> (free font) by WildOnes, </li>
<li><a href="https://www.1001freefonts.com/anudaw.font" target="">AnuDaw</a> </li>
</ul>
</div>
Maija P.http://www.blogger.com/profile/03876378321908649349noreply@blogger.com0tag:blogger.com,1999:blog-1271059022930268937.post-28952959979587926052017-08-27T17:02:00.000+02:002017-08-30T22:11:22.033+02:00Storyline Tips for Speed, Precision, and Your Sanity<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: left;">
In this post I wanted to share some tips that made my development process more efficient and precise. <span style="font-family: inherit;">There are <a href="https://www.google.de/search?q=storyline+2+tips+and+tricks&oq=storyline+2+tips&gs_l=psy-ab.3.0.0j0i22i30k1l2.1840.1840.0.3457.1.1.0.0.0.0.105.105.0j1.1.0....0...1.1.64.psy-ab..0.1.105.mC6XUTztA-E" target="_blank">many tips</a> about saving time and effort in Storyline. Most likely, you've already heard about the benefits of the <a href="http://blogs.articulate.com/word-of-mouth/format-painter-turbocharges-effects-articulate-storyline/" target="_blank">format painter</a> and <a href="https://community.articulate.com/series/4/articles/using-slide-masters-in-articulate-storyline-2" target="_blank">slide masters</a>. </span> Therefore, I tried focusing on things that were rarely mentioned or not obvious to me at the start.</div>
<div style="text-align: left;">
<span style="font-family: inherit;"><br /></span></div>
<h2 style="text-align: left;">
<span style="font-family: inherit;">Number your objects</span></h2>
<div style="text-align: left;">
<span style="font-family: inherit;">We all know that naming layers and objects on the timeline is a good idea so that you know which one of the 10 "Rectangles" is your custom-made "Submit" button. Sometimes though, giving your objects numbers instead of names may be more efficient. </span></div>
<div style="text-align: left;">
<span style="font-family: inherit;"><br /></span></div>
<div style="text-align: left;">
<span style="font-family: inherit;">For example, let's say you are working on an e-learning filled with complex terminology like "agranulocytosis" or "propylthiouracil" or some other Lovecraftian-sounding language. And let's say you need to provide additional explanation for three of these complicated concepts. You create three buttons for the learner to click to see the matching layers with additional content. Or maybe you create a drag and drop interaction where you need to match the complex terminology with its description.</span></div>
<div style="text-align: left;">
<span style="font-family: inherit;"><br /></span></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpF0Z-4pp6zpzKUhenxbLryewxyhk-sPKW3BT_eKRT94jYRff8wcgL4dsQtS8cS3oyAYwW24LuY-zQWqyY_WVCMOY0-Hw9uYsdakLayQtgEFK3GXixZ1G58aJm8bimqBB4biVMwVJZpa8/s1600/name_objects01.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" data-original-height="386" data-original-width="700" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpF0Z-4pp6zpzKUhenxbLryewxyhk-sPKW3BT_eKRT94jYRff8wcgL4dsQtS8cS3oyAYwW24LuY-zQWqyY_WVCMOY0-Hw9uYsdakLayQtgEFK3GXixZ1G58aJm8bimqBB4biVMwVJZpa8/s1600/name_objects01.png" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td class="tr-caption" style="font-size: 12.8px;">It may be easier to match "Drag 1" to "Drop 1", rather than trying to remember if "Shampoo" is "Step 3" or "Step 4".</td></tr>
</tbody></table>
</td></tr>
</tbody></table>
<div style="text-align: left;">
<span style="font-family: inherit;"></span><br />
<span style="font-family: inherit;"><br /><span style="font-family: inherit;">In this case, instead of using the actual terminology from the course, I use numbers. This helps me to save time not only on typing or copy/pasting, but also reading and comprehending what is what. I find it much easier to match "Layer 1" to "Button 1", than "Layer Triiodothyronine" to a similar clickable object. Lastly, it is gives a much cleaner Trigger list for double-checking if everything matches. </span></span></div>
<div style="text-align: left;">
<span style="font-family: inherit;"><br /></span></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPAgqhR8r-lIX3kb84G9w6GfbP5m8Wb-lU55gk21krBphWojnkIlX88ntSwJXEnGViQ_dQT0_1fQnrpL_aTHcgdjrB_w0fP6nICfk2RfcuJ4XX_2c8PUVWFgF0T4K-BauTEb_d1aC5P8A/s1600/number_layers.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" data-original-height="394" data-original-width="173" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPAgqhR8r-lIX3kb84G9w6GfbP5m8Wb-lU55gk21krBphWojnkIlX88ntSwJXEnGViQ_dQT0_1fQnrpL_aTHcgdjrB_w0fP6nICfk2RfcuJ4XX_2c8PUVWFgF0T4K-BauTEb_d1aC5P8A/s400/number_layers.png" width="175" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Ahhh. A treat for a Sheldon Cooper within you.</td></tr>
</tbody></table>
<div style="text-align: left;">
<span style="font-family: inherit;"><br /></span></div>
<div style="text-align: left;">
<br /></div>
<h2 style="text-align: left;">
<span style="font-family: inherit;">Number your variables</span></h2>
<div>
<span style="font-family: inherit;">Same can be true for variables. I prefer to give them numbers, with a one-word description, if necessary. For example: 3_33_L1Seen. This tells me that this variable tracks whether or not the user has seen Layer 1 on slide 3.33. The reason I number my variables by scenes and slides, is that if I need to come back to the project after a break or an interruption, I can easily remember, which variables are related to the slide I'm working on (since I can always see the number of slide, but I may not always exactly remember what was the variable name: was it L1Seen or Seen1L?).</span></div>
<div style="text-align: left;">
<span style="font-family: inherit;"><br /></span></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkXQN6jT0hIiVSLUeXtcPip7aPPbSU4VeFDJItRow3z8M9Hyr5VQzzAMcnDlBxi0tvUd8euNkT6Cpb8-KxE0CS-shQBZHoM3tsghRTjtzt9MPo12B6dfsN_TIcilYZ553qq2z-e68j0iQ/s1600/number_Variables.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" data-original-height="452" data-original-width="485" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkXQN6jT0hIiVSLUeXtcPip7aPPbSU4VeFDJItRow3z8M9Hyr5VQzzAMcnDlBxi0tvUd8euNkT6Cpb8-KxE0CS-shQBZHoM3tsghRTjtzt9MPo12B6dfsN_TIcilYZ553qq2z-e68j0iQ/s1600/number_Variables.png" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Since I know that there are 6 clickable objects on the slide, I can quickly check if they are all accounted for by looking at the numbers. Using slide numbers in variables helps you find them in the list, if you're using a lot of them.</td></tr>
</tbody></table>
<div style="text-align: left;">
<span style="font-family: inherit;"><br /></span></div>
<div style="text-align: left;">
In addition, it makes the "sanity check" quicker. When I need to double-check if everything is accounted for, I don't need to read the names of the variables and correlate them in my mind with the named objects. I compare numbers with numbers instead. Faster and less straining on my cognitive resources.</div>
<div style="text-align: left;">
<span style="font-family: inherit;"><br /></span></div>
<h2 style="text-align: left;">
<span style="font-family: inherit;">Conveyor-belt approach to changes</span></h2>
<div>
<span style="font-family: inherit;">Let's say you need to change 3 things on 5 slides (and you can't do this with master layouts). What I've noticed many tend to do (and what I did myself before) is to go slide by slide and make all adjustments on each. </span><span style="font-family: inherit;">While this may give you the satisfaction of having each slide done before moving onto next, I find this strategy inefficient. Think about it - you have to keep in mind at least three things. You also need to make sure you do not forget to do any of them even if someone distracts you. Then you actually need to do them, which also requires your attention and cognitive resources. It is actually hard, particularly if you're working in a busy open office.</span></div>
<div style="text-align: left;">
<span style="font-family: inherit;"><br /></span></div>
<div style="text-align: left;">
<span style="font-family: inherit;">When I "conveyor-belt" my tasks, I can focus only on one task at a time and don't need to mentally switch between them. This way I am more likely to get into the "flow", which gives me a faster pace. So, I go through all the slides, make one change, tick it off the list. Then go through the slides again, making another change and tick that one off, too. It sounds like it would take more effort, but I found this much easier purely from the cognitive load perspective.</span></div>
<div style="text-align: left;">
<span style="font-family: inherit;"><br /></span></div>
<h2 style="text-align: left;">
<span style="font-family: inherit;">Create one thing, test it, then copy it</span></h2>
<div>
<span style="font-family: inherit;">This can be said about pretty much anything: buttons, exercises, typical slides, quizzes - anything that you may want to reuse. I used create all of the elements on the slide. For example, if I had a menu with 4 buttons, I would make all four of them and then test how they all work. These days I create one button and 3 placeholders. Then I make sure that I like it and it is working as intended (because if it doesn't, I'm about to create a lot more work for myself). Then I either copy/paste the finished object or use "Format Painter" on the placeholders. </span></div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<span style="font-family: inherit;">Copy/pasting works particularly well for copying something to another slide. When you copy an object to another slide, it inherits:</span></div>
<div style="text-align: left;">
</div>
<ul style="text-align: left;">
<li>Position on the slide</li>
<li>Position on the timeline</li>
<li>Formatting</li>
<li>Triggers </li>
<li>Animations</li>
</ul>
<br />
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<span style="font-family: inherit;">It's not immediately obvious, but you can also copy/paste layers with their triggers, including into other slides.</span></div>
<div style="text-align: left;">
<br /></div>
<h2 style="text-align: left;">
<span style="font-family: inherit;">Precise position</span></h2>
<div style="text-align: left;">
<span style="font-family: inherit;">When my placeholders are on the same slide, copy/pasting will preserve the formatting and triggers, but not the position. But let's say my placeholders were perfectly arranged and now I want the copies of the actual objects to appear exactly in the same place. Let's also assume that my finished object also has triggers, which I want to keep, so using a Format Painter is not that efficient.</span></div>
<div style="text-align: left;">
<span style="font-family: inherit;"><br /></span></div>
<div style="text-align: left;">
<span style="font-family: inherit;">In this case, instead of copying and then manually dragging the elements across the slide, I use the <b>Size and Position </b>dialogue. To open it, select any object and press Shift+Ctrl+Enter. I note the coordinates of the placeholders and then enter the same numbers for the position of the copies. I can then delete the placeholders by selecting them on the timeline. </span></div>
<div style="text-align: left;">
<span style="font-family: inherit;"><br /></span></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggvLunEaJMJBmSLwServEYbDKct58-zNV3fU1nJhUmGpGc3mNAQa_75YOTGyCGHiEuGuDoQEDqCF-cFNokAu6SvheyAQs_Gc216CmFXJVmmqOTaiBqA3oYw_zymIUxIJmRD9ImzdC4W_c/s1600/location_menu.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" data-original-height="552" data-original-width="607" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggvLunEaJMJBmSLwServEYbDKct58-zNV3fU1nJhUmGpGc3mNAQa_75YOTGyCGHiEuGuDoQEDqCF-cFNokAu6SvheyAQs_Gc216CmFXJVmmqOTaiBqA3oYw_zymIUxIJmRD9ImzdC4W_c/s1600/location_menu.png" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">No more eyeballing, mouse-wrangling or nudging. Quick and easy.</td></tr>
</tbody></table>
<h3 style="text-align: left;">
<span style="font-family: inherit;"><br /></span></h3>
<h2 style="text-align: left;">
<span style="font-family: inherit;">Precise crop</span></h2>
<div style="text-align: left;">
<span style="font-family: inherit;">This option is not obvious at all and it took me a while to notice it. If you need to crop an image to a pixel (and you want to use Storyline, rather than an external tool), don't waste time and patience on the </span><b style="font-family: inherit;">Crop </b><span style="font-family: inherit;">button. Instead, select an image, press Shift+Ctrl+Enter to open </span><b style="font-family: inherit;">Size and Position</b><span style="font-family: inherit;"> dialogue again, and enter the crop values there, under </span><b style="font-family: inherit;">Size </b><span style="font-family: inherit;">tab. Pixel-perfect crop with the synchronous preview. </span></div>
<div style="text-align: left;">
<span style="font-family: inherit;"><br /></span></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrl0d27Xy-q7hdmuZ4vKTi6s902nc50iVR0f7drcOb_yLs2PovCx15CkrQce9SGrhWE3_Xom1V6YMsu1Ycs7uvE315H9nnkwqqDHraxG78yCiMt2GmatQQCw42jyEiBhYLKZsWYMgXRSQ/s1600/precise_crop.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" data-original-height="552" data-original-width="607" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrl0d27Xy-q7hdmuZ4vKTi6s902nc50iVR0f7drcOb_yLs2PovCx15CkrQce9SGrhWE3_Xom1V6YMsu1Ycs7uvE315H9nnkwqqDHraxG78yCiMt2GmatQQCw42jyEiBhYLKZsWYMgXRSQ/s1600/precise_crop.png" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Badum-tshh! Word of warning - does not work well with flipped/mirrored images, so crop them before you flip them.</td></tr>
</tbody></table>
<div style="text-align: left;">
<br /></div>
<h2 style="text-align: left;">
<span style="font-family: inherit;">"Set as Default…"</span></h2>
<div style="text-align: left;">
<span style="font-family: inherit;">Want to make sure that all of the text boxes you create from this point onward have 8% transparent background fill, #3333333 color text and 30 point margins on all sides? Create one element and format it as you wish. Then right-click it and select "Set as default…" in the menu. From now on all text boxes that you create will inherit these settings.</span></div>
<div style="text-align: left;">
<span style="font-family: inherit;"><br /></span></div>
<div style="text-align: left;">
<span style="font-family: inherit;">The "default" settings are separate for shapes, text boxes and buttons.</span></div>
<div style="text-align: left;">
<br /></div>
<h2 style="text-align: left;">
<span style="font-family: inherit;">"Change Shape"</span></h2>
<div style="text-align: left;">
<span style="font-family: inherit;">Let's say you made a square shape, added all sorts of fancy stuff to it, but now you need it to have rounded corners. Instead of deleting the old object and recreating everything from scratch, you can simply use <b>Change Shape </b>option in Storyline, which works exactly as the same function in PowerPoint. The only thing you may need to adjust is the shape size.</span></div>
<div style="text-align: left;">
<span style="font-family: inherit;"><br /></span></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgk-hdlDpT7gAadW42_RHemolVkLRabL1v4VVXLDyhyphenhyphenNkLY2H6WZvUYHDKAOuzEYxmjIETJb7sKvCconDbGt7LFJ_j05sH3dgCudaWqc9AjL5lX4FhZ-ly_WsJBqw5ymbmM9rb_NURTh_8/s1600/change_shape.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" data-original-height="404" data-original-width="658" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgk-hdlDpT7gAadW42_RHemolVkLRabL1v4VVXLDyhyphenhyphenNkLY2H6WZvUYHDKAOuzEYxmjIETJb7sKvCconDbGt7LFJ_j05sH3dgCudaWqc9AjL5lX4FhZ-ly_WsJBqw5ymbmM9rb_NURTh_8/s1600/change_shape.png" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Select a shape, click <b>Format </b>in the <b>Drawing Tools </b>and choose <b>Change Shape</b>.</td></tr>
</tbody></table>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<span style="font-family: inherit;">Note that this may not always work well with objects that have multiple states. For example, if you change a square button into a rounded square and adjust the size of the corners, the corner sizes will <i>not </i>be inherited by all states. Change wisely.</span></div>
<div style="text-align: left;">
<span style="font-family: inherit;"><br /></span></div>
<div style="text-align: left;">
<span style="font-family: inherit;"><br /></span></div>
<div style="text-align: left;">
<span style="font-family: inherit;"><br /></span></div>
<div style="text-align: left;">
<span style="font-family: inherit;"><i>Liked some ideas? Hated some ideas? Found a typo? Let me know in the comments or reach out to me through my fancy </i></span><i>(hey, there is "fancy" in "infancy"!) </i><i style="font-family: inherit;">new <a href="http://www.instructionaldesign.expert/" target="_blank">site</a>. </i></div>
<div style="text-align: left;">
<i style="font-family: inherit;"><br /></i></div>
</div>
Maija P.http://www.blogger.com/profile/03876378321908649349noreply@blogger.com0tag:blogger.com,1999:blog-1271059022930268937.post-16194927935847116782017-08-07T21:41:00.000+02:002017-08-07T21:41:25.220+02:00The world doesn't need a hero. All it needs is an instructional designer. <div dir="ltr" style="text-align: left;" trbidi="on">
"Can SME be an instructional designer?", "Do you need an education, or can you just learn Storyline?" or "Who needs those instructional designers anyway?" Somehow, I see a lot of these questions recently, so here are my unsolicited two cents...<br />
<br />
To answer these, I would look at the definition of instructional design. With some variations, it will say something like: "Instructional design is a systematic and systemic application of scientific knowledge to improve learning processes and outcomes". If you ever had a course on instructional design, you will most likely remember either this, or spending a lot of time discussing what is "systematic" and what is "systemic".<br />
<br />
So, there are two questions to ask when choosing an instructional designer (or deciding to become one). Does the candidate (or you) have scientific knowledge? Can they/you apply it in a way that<br />
<br />
<ul style="text-align: left;">
<li>makes sense</li>
<li>takes into account many interconnected factors and </li>
<li>leads to measurable results (i.e. more than the existence of a training program)? </li>
</ul>
<br />
The obvious, but for some reason elusive, point is: you need to have both: a solid theoretical grounding and a knack for its application. It sounds bizarre, but in my experience, it is hard to be practical without a good knowledge of theory. Without it, it is hard to have a critical view of the reality. For example, would the "10 ways to make your e-learning better" actually make it better? And why? Education alone won't get you anywhere, but practice alone will get you someplace random.<br />
<br />
As for the usefulness of instructional designers... It is tempting to create solutions, which replace either the knowledge, or the skill of its application. For example, I've often seen such interesting internal documents as "pedagogical styleguides". Their purpose is to document the standards of training development in a company. While it can be a nice idea from the point of view of process documentation, more often they do not make sense. Particularly when these standards deal with something that cannot actually be standardised. For example: "Company X uses exclusively constructivist approach" or "We're using only andragogical principles".<br />
<br />
Apart from sounding funny to an informed reader, these standards are impractical. The pedagogical theories are not "right" or "wrong". They are concerned with different aspects of learning. One cannot "choose" one theory and abandon all the others. Similarly impractical are suggestions to "include a knowledge check every 10 slides". Or "not include more than 5 learning objectives". What is the point? What is the purpose?<br />
<br />
In other words, professional instructional designers are not outdated, but extremely important. And no amount of guidelines or instructions to have a "20 questions quiz for each module" will replace them.</div>
Maija P.http://www.blogger.com/profile/03876378321908649349noreply@blogger.com0tag:blogger.com,1999:blog-1271059022930268937.post-87470358371353803542017-07-02T18:18:00.000+02:002017-08-29T12:37:29.496+02:00Building Games in Storyline: River Crossing Puzzle<div dir="ltr" style="text-align: left;" trbidi="on">
<a href="https://community.articulate.com/articles/brain-training-games" target="_blank">E-learning Heroes Challenge #173</a> is all about brain teasers: not only do users get to solve some puzzles, but you, the developer, have something to think about. For this challenge I decided to recreate one of the <a href="https://en.wikipedia.org/wiki/River_crossing_puzzle" target="_blank">river crossing puzzles</a>, where you need to move three things across the river: the wolf, the sheep, and the cabbage. There is space only for one cargo item on the boat. Naturally, when left alone, the wolf will eat the sheep and the sheep will eat the cabbage. You can see <a href="http://bit.ly/2sdJ3Fp" target="_blank">my version of it here.</a><br />
<br />
In this tutorial I will focus on creating the interaction and will omit the decorations, such as the moving water and clouds, animated boat, or the design of the feedback slides. However, if you'd like to hear more about these topics - let me know. The tutorial assumes that you know the interface of the Storyline and know how to start creating basic triggers, variables and states.<br />
<br />
<h2 style="text-align: left;">
The Assets</h2>
If you want to use the same assets as I did, you can download the exact images <a href="https://drive.google.com/open?id=0B2CXVo5Awkn7RkdIUFJGMzBaeWM" target="_blank">here</a>. Please note that these images are designed by <a href="http://www.freepik.com/" target="_blank">Freepik</a>. You can download the originals as follows:<br />
<ul style="text-align: left;">
<li><a href="http://www.freepik.com/free-vector/collection-of-colorful-animals-in-geometric-style_1040418.htm#term=colorful animals geometric sheep&page=1&position=1" target="_blank">Animals</a></li>
<li><a href="http://www.freepik.com/free-vector/decorative-nautical-background-with-ship-in-flat-design_997352.htm#term=decorative nautical boat&page=1&position=6" target="_blank">Boat</a></li>
<li><a href="http://www.freepik.com/free-vector/vegetables-icons-collection_779773.htm#term=vegetables icon collection&page=1&position=1" target="_blank">Cabbage</a></li>
</ul>
<br />
<h2 style="text-align: left;">
The Project</h2>
Before we begin, let's take a look at our final goal. Not counting the title slide, this project is using four slides in total. Two slides are "end slides", which the user will see in case either the sheep or the cabbage got eaten. The other two are the river shores.<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVf-PcgU68QsQsai179kraaBF8KmHKS-4T_510i_whlXp6uGk52RgxgA0rMoDPHcvnBw7RzBTkiVE4aOxAzX2y61n6o3jRbCJEOcvczsooS7FbFlQxAb_Iw5C7c0jzpuMJCb_EadWeQ7o/s1600/scene_slides.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" data-original-height="681" data-original-width="652" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVf-PcgU68QsQsai179kraaBF8KmHKS-4T_510i_whlXp6uGk52RgxgA0rMoDPHcvnBw7RzBTkiVE4aOxAzX2y61n6o3jRbCJEOcvczsooS7FbFlQxAb_Iw5C7c0jzpuMJCb_EadWeQ7o/s1600/scene_slides.png" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">The slides used in this challenge</td></tr>
</tbody></table>
<br />
There's a saying in Russian that "laziness is the driver of progress" and I tend to wholeheartedly agree. As you notice, I did not (and usually do not) build slides for each possible combination of animals on each shore. I know some Storyline users tend to do that, saying that it is easier than dealing with cumbersome variables. While this is true in some cases, looking back at the projects I built, in most situations I don't find this easier or more helpful than working with variables. Instead of keeping track of all this information myself, I prefer to give instructions to Storyline and let it do all the hard work. See? Laziness in action. I hope this tutorial will help you embrace your inner sloth and find ways to do less work in Storyline.<br />
<br />
<h3 style="text-align: left;">
Create the Slides</h3>
Go ahead and create three slides:<br />
<ul style="text-align: left;">
<li>Shore 1</li>
<li>Sheep Eaten</li>
<li>Cabbage Eaten</li>
</ul>
<br />
Note that we are not creating the slide "Shore 2" yet - this is intended.<br />
<div>
<br /></div>
Leave the "Shore 1" empty for now and put some text on the "Eaten" slides, so that you know which one is which when you test-run the project. You can, of course, design them a bit more, if you wish.<br />
<br />
<h3 style="text-align: left;">
Create Variables</h3>
We have three items (the wolf, the cabbage, and the sheep), two shores and two possible tragic outcomes. In other words, we need to know where our cargo is (in shore 1, shore 2 or in transit on the boat) and if it's still faring well.<br />
<br />
Let's start by creating several True/False variables, as shown below:<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZxtQROCrwG15URaLHB7cSTSz7cV04l4NtktutuqwYHeJMvoGgIVLgkStIX3Ch79TYNiP7geEPHNhk9V2bZVaKDSoeUvz5qG8TchsVKp7OJpgFoGUBp4G_jf-sQm9E_7gpCydPQJJd-RE/s1600/variables_list.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" data-original-height="512" data-original-width="690" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZxtQROCrwG15URaLHB7cSTSz7cV04l4NtktutuqwYHeJMvoGgIVLgkStIX3Ch79TYNiP7geEPHNhk9V2bZVaKDSoeUvz5qG8TchsVKp7OJpgFoGUBp4G_jf-sQm9E_7gpCydPQJJd-RE/s1600/variables_list.png" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">List of variables you will need</td></tr>
</tbody></table>
<br />
Since you begin with all the items on Shore1, set the variables for Shore1 to "True" and variables to Shore2 as "False". Since the cabbage and the sheep are not dead, set the variables for tracking their vital signs to "False".<br />
<br />
<h4 style="text-align: left;">
</h4>
<h3 style="text-align: left;">
Build Shore1: Objects and States</h3>
<div>
For the sake of brevity, I will refer to the wolf, the sheep and the cabbage as "animals" (sorry, cabbage!). Speaking of which, in addition to the obvious objects, such as a boat and the animals, you will also need to create the following:</div>
<div>
<ul style="text-align: left;">
<li>a shape for the cargo hold (this is what makes the animal "appear" on the ship)</li>
<li>a "Submit" button (this submits the user's choice and triggers the navigation to the other slides)</li>
</ul>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAND1vVCHPqhsS0tWXvHLOMtJ8s9zk67b_WbZPwy3EBV7C0U4DDJg9xfjbX_6mFDaQSLSrrJB5DCM1e-DwSo8vUIe7oaxDjy0MmFdnUfmPUavCjhI9HfyCruuMaan2fyXaBBRYkhkM6cc/s1600/shore1_objects.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" data-original-height="374" data-original-width="644" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAND1vVCHPqhsS0tWXvHLOMtJ8s9zk67b_WbZPwy3EBV7C0U4DDJg9xfjbX_6mFDaQSLSrrJB5DCM1e-DwSo8vUIe7oaxDjy0MmFdnUfmPUavCjhI9HfyCruuMaan2fyXaBBRYkhkM6cc/s1600/shore1_objects.jpg" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Important objects on Shore 1</td></tr>
</tbody></table>
<div>
<br /></div>
</div>
<div>
You can create the "Submit" button in any shape or format or even use the button in a player. In my example I'm using a hotspot positioned over the ship. Go ahead and create your "Submit" button in any shape you desire.</div>
<div>
<br /></div>
<div>
In my example, the users needs to click on the animals to move them to or from the boat. What happens in Storyline is that when the user clicks one of the animals, the state of the shape "Cargo" changes it's state to match the selected animal. The state of the selected animal changes as well. Let's build this.</div>
<div>
<br /></div>
<div>
Format the "Cargo" shape to have no fill and no outline. Then create a new state called, let's say, "Cabbage" and add a picture of the cabbage to it. You can also add a brief "Fade" animation to this picture. Repeat this for the states "Sheep" and "Wolf". This is what you should have in the end:</div>
<div>
<br /></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiuPO8gLMFxuPOOIIACvn17Tsc2kNyIJhnIndWpaT-d4LdWpNOE0gf38UR_Z7K3iLADRw7Bn71gLyzeVycEFiAxsCDG2O5zW1VEduZNkCTOllUvVnbc5Y3wsO6_I0DJW3mgUWqJ8CriPk/s1600/cargo_states.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" data-original-height="273" data-original-width="560" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiuPO8gLMFxuPOOIIACvn17Tsc2kNyIJhnIndWpaT-d4LdWpNOE0gf38UR_Z7K3iLADRw7Bn71gLyzeVycEFiAxsCDG2O5zW1VEduZNkCTOllUvVnbc5Y3wsO6_I0DJW3mgUWqJ8CriPk/s1600/cargo_states.png" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">States of the "Cargo" shape.</td></tr>
</tbody></table>
<div>
<br /></div>
Create states for the animals. In my examples I've created the "Hover", "Selected" and "Disabled" states. You can omit the "Hover" and "Disabled" state, if you like, the important part is to have the "Selected" state. For the ease of following this tutorial, I recommend including the "Disabled" state as well (otherwise you will need to use "Hidden" state in all triggers that use the "Disabled" state).<br />
<br />
"Selected" and "Disabled" states should be empty. To achieve this, simply delete the image of the animal from the state, while in the "Edit states" mode.<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiun7ZMy3gkY8oRbhtmc1QqESJtGBV8YQsAFZEng3yarKPk7tCr78BgcztTHPQ2KK4BbklO3uh9jZx-xrlnqebVset3QzV-A4p7WypUBlp-Jt1yBi0wEwDEHoV6SDUjhn2rDHGypQP6rAs/s1600/wolf_states.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" data-original-height="273" data-original-width="561" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiun7ZMy3gkY8oRbhtmc1QqESJtGBV8YQsAFZEng3yarKPk7tCr78BgcztTHPQ2KK4BbklO3uh9jZx-xrlnqebVset3QzV-A4p7WypUBlp-Jt1yBi0wEwDEHoV6SDUjhn2rDHGypQP6rAs/s1600/wolf_states.png" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">This is how the states of animals should look like.</td></tr>
</tbody></table>
<br />
<br />
<b>Note</b>: make sure that you're using the built-in states and not creating custom states that you name "Hover", "Selected", etc.<br />
<h3 style="text-align: left;">
<br />Shore 1: Loading the Animals (Triggers and Variables)</h3>
Time to make all of the objects interactive. What we're trying to achieve is the following:<br />
<br />
<ul style="text-align: left;">
<li>When an animal on the shore is clicked, the state of the "Cargo" should change and the variable "XonShore1" (X is the name of the animal) should change to "False"</li>
<li>When an animal in cargo is clicked, the state of the animal on the shore and the state of Cargo should change, and the variable "XonShore1" should become "True".</li>
</ul>
<br />
<br />
First, select all three animals and add them to the Button Set. Then, select and animal (e.g. wolf) and create the following two triggers:<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIc-NyPVhkv9fwZa3A5rQBtS90YHSVFjET3l_Lyxno0E6_1mEpfsCpRoB5sBlmvLkAQuPjzUtsJz0J6R44BTfqwtf-rAGLHtcQlyEnzgqF5dNnNbH9nGU_bZPWJlmKqYgsdPKh__HMpGg/s1600/wolf_triggers1.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" data-original-height="108" data-original-width="283" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIc-NyPVhkv9fwZa3A5rQBtS90YHSVFjET3l_Lyxno0E6_1mEpfsCpRoB5sBlmvLkAQuPjzUtsJz0J6R44BTfqwtf-rAGLHtcQlyEnzgqF5dNnNbH9nGU_bZPWJlmKqYgsdPKh__HMpGg/s1600/wolf_triggers1.png" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Repeat for each animal</td></tr>
</tbody></table>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
Add similar triggers to the sheep and the cabbage. Preview your slide - it should look like this:<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsJzK1DwWSnOIkN0kkjKxrHcAl1c0ExuVzulSO7D3_jBOLwN_XamKAl7PwXd6kQJtJqJqAO3ayqHKWKNX390Fz_e80Ns1ykG3CCm1bQoOfgNxhzKPTNfbTOy_owG7lnaXWu8NkuuL7AUI/s1600/Preview01.gif" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" data-original-height="449" data-original-width="802" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsJzK1DwWSnOIkN0kkjKxrHcAl1c0ExuVzulSO7D3_jBOLwN_XamKAl7PwXd6kQJtJqJqAO3ayqHKWKNX390Fz_e80Ns1ykG3CCm1bQoOfgNxhzKPTNfbTOy_owG7lnaXWu8NkuuL7AUI/s1600/Preview01.gif" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Animals are moving into cargo</td></tr>
</tbody></table>
<br />
Now we can load the animals, but we also need to have an option to unload them, without picking up a new passenger. Essentially, what should happen, is that the state of the animal on the shore should change from "Selected" to "Normal", when the user clicks the animal in the "Cargo". Which animal's state will change will depend on which animal is currently standing on this ship. In addition, we need to adjust the variable "Animal on Shore 1" to "True".<br />
<br />
Click on the "Cargo" and create the trigger to make the animal in cargo appear on the shore (I'm starting with a wolf in this example):<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYl5HtxPMy5EBCmcuAUsz026W657eJxP8sPnqABnayols2OanbqvYiuE9wht0ofTTq2qP5emISRxQwMA3pqvwl1Anl1RCx39lm5-xqTaaQmtto56r-9uV4hyQwg0pj7PMCoRUYAsP1UUU/s1600/shore1_cargo_wolf_trigger.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" data-original-height="487" data-original-width="485" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYl5HtxPMy5EBCmcuAUsz026W657eJxP8sPnqABnayols2OanbqvYiuE9wht0ofTTq2qP5emISRxQwMA3pqvwl1Anl1RCx39lm5-xqTaaQmtto56r-9uV4hyQwg0pj7PMCoRUYAsP1UUU/s1600/shore1_cargo_wolf_trigger.png" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">The state of the Wolf will change if the Wolf is in Cargo.</td></tr>
</tbody></table>
<br />
Next, create a trigger to adjust the variable "WolfonShore1" to "True" when the user clicks the Wolf in Cargo:<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjo8ppP3eRRlmNg8BjP9zv-MmUbtSqFUjzGhzRwHzP-M9L0A7nepOP8uAqmP9ST3QuM2xDCIwUDrgE6O3Qn4SRKOvxH-Fq58oSw56v1weQUy65b6yhSSvJLXDRiikY5FhTB_x7NCApaKdE/s1600/shore1_cargo_wolf_trigger-2.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" data-original-height="522" data-original-width="485" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjo8ppP3eRRlmNg8BjP9zv-MmUbtSqFUjzGhzRwHzP-M9L0A7nepOP8uAqmP9ST3QuM2xDCIwUDrgE6O3Qn4SRKOvxH-Fq58oSw56v1weQUy65b6yhSSvJLXDRiikY5FhTB_x7NCApaKdE/s1600/shore1_cargo_wolf_trigger-2.png" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Don't forget the condition.</td></tr>
</tbody></table>
<br />
Repeat the same for the remaining animals. In the end, the list of triggers for object "Cargo" should look like this:<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7Xdvf7J0YBiD3xVdCsay95xNmvU_pS1M5Hkl35QrOzrBS9dhM6zNrtkYrqCewoVJElyKlpsB1NIbt6bA6U11bTpTlTCnlG21xc3zQSoy3E8kaykubv4_ScsihWT786nrURZsdS3jAcwI/s1600/shore1_cargo_triggers1.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" data-original-height="350" data-original-width="333" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7Xdvf7J0YBiD3xVdCsay95xNmvU_pS1M5Hkl35QrOzrBS9dhM6zNrtkYrqCewoVJElyKlpsB1NIbt6bA6U11bTpTlTCnlG21xc3zQSoy3E8kaykubv4_ScsihWT786nrURZsdS3jAcwI/s1600/shore1_cargo_triggers1.png" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Two triggers for each animal.</td></tr>
</tbody></table>
<br />
<br />
Finally, add a trigger to change the state of the Cargo itself:<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMJee3Ofiqh42jNkqGZnINCMm5bBWAZqW0veraEM5QkpVE0tNrNEDgsh2WFID-tlTheBSycwf-uvEOIXZqevIq-AwDEze4g-zsa_61fsKPZPw61mnUKtAoHM3F08CAO5T4kNCKK5NiG7k/s1600/cargo_state.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" data-original-height="348" data-original-width="485" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMJee3Ofiqh42jNkqGZnINCMm5bBWAZqW0veraEM5QkpVE0tNrNEDgsh2WFID-tlTheBSycwf-uvEOIXZqevIq-AwDEze4g-zsa_61fsKPZPw61mnUKtAoHM3F08CAO5T4kNCKK5NiG7k/s1600/cargo_state.png" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Very easy</td></tr>
</tbody></table>
<br />
Make sure that this trigger appears <b>at the end</b> of the triggers associated with the object "Cargo". You can add conditions here (such as "If state of 'Cargo' is not 'Normal'") but they are not particularly necessary.<br />
<br />
When I work with variables, I often add a text box with the variable references to the slide, to have a clear visual indicator that they change correctly. For example:<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYWK03TYe3pM43PnVqRJL4VGgMWR96yaJZZ_xqNESXjncu72pR9yCT3yTIKhyphenhyphens5kudSjvjs24kTP-OXkwo1FFKWWP1WLW68_O2DCdtzsFRU1RcZI18o4IX_nfnZ1pteOJSIjh8W_sxxnM/s1600/variables_references.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" data-original-height="170" data-original-width="543" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYWK03TYe3pM43PnVqRJL4VGgMWR96yaJZZ_xqNESXjncu72pR9yCT3yTIKhyphenhyphens5kudSjvjs24kTP-OXkwo1FFKWWP1WLW68_O2DCdtzsFRU1RcZI18o4IX_nfnZ1pteOJSIjh8W_sxxnM/s1600/variables_references.png" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">These can be found in Insert > Reference menu in Storyline 2</td></tr>
</tbody></table>
<br />
<br />
Preview the slide and try to load and unload the animals. You should see something like this:<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkLYXtFGpVjwbxeNOaXOO5fBxNWKGFdGc1XLu0N5OGH947yGD_idTypiISSMNX3KB6hFUUbqXsYziBM9hbstqiXByaDG4cFeTCKGeb_siTl0CQ2dR7GDPt9TYfQQvTDR21GmpLOvU65y0/s1600/Preview02.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="449" data-original-width="767" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkLYXtFGpVjwbxeNOaXOO5fBxNWKGFdGc1XLu0N5OGH947yGD_idTypiISSMNX3KB6hFUUbqXsYziBM9hbstqiXByaDG4cFeTCKGeb_siTl0CQ2dR7GDPt9TYfQQvTDR21GmpLOvU65y0/s1600/Preview02.gif" /></a></div>
<br />
<br />
As you see, the variables are not always changing correctly. If I click on the sheep while the wolf is in cargo, the variable "WolfOnShore1" will remain false, even though the wolf is on the shore (this is also true for other animals). Let's fix this.<br />
<br />
We need a trigger that starts when the user clicks on an animal on the shore while another animal is staying in cargo. Select the wolf and add the following trigger:<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqgkAAGxfOE3PUy47ATPCGRh-EzUTRCw3AN_cB9o0VbfoRuRF75zyzFVtP3rLX281iAl9mvyIUhr1DOghSglqJk8Xd0A2IBgGFbLnZaxs0ra-gWGVZ-eCPhNmOcQWWdt7gF__rmyUMfLQ/s1600/wolf_more_triggers.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" data-original-height="522" data-original-width="485" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqgkAAGxfOE3PUy47ATPCGRh-EzUTRCw3AN_cB9o0VbfoRuRF75zyzFVtP3rLX281iAl9mvyIUhr1DOghSglqJk8Xd0A2IBgGFbLnZaxs0ra-gWGVZ-eCPhNmOcQWWdt7gF__rmyUMfLQ/s1600/wolf_more_triggers.png" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Is the sheep in cargo? Then it will be moved to the shore if we click another animal.</td></tr>
</tbody></table>
<br />
Add the similar trigger to the wolf, but this time with the cabbage. When you're done, take a look at the list of triggers associated with the wolf. If you've been following this tutorial exactly, you will note that one of the triggers - "Change State of Cargo to "Wolf" when the user clicks" - is located somewhere at the top of the list. Move this trigger to the very bottom, so that all variables get adjusted <i>before </i>Cargo changes it's state:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBeFXLyBLOhVWdPUnFc6Fihv0a8DGohIGCexiOkQIeYBRMfKTYMU6KXXyt5DTkrQmhyQyuF8PQm2SoKHYvThX7uA5IgibV_lCwsUXk-5Cd8zbl5tVGxyuMbdSpbG00KLrraR0zEZbg8Cw/s1600/wolf_triggers_summary.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="206" data-original-width="321" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBeFXLyBLOhVWdPUnFc6Fihv0a8DGohIGCexiOkQIeYBRMfKTYMU6KXXyt5DTkrQmhyQyuF8PQm2SoKHYvThX7uA5IgibV_lCwsUXk-5Cd8zbl5tVGxyuMbdSpbG00KLrraR0zEZbg8Cw/s1600/wolf_triggers_summary.png" /></a></div>
<br />
<br />
Repeat for other animals. In the end, the animals should have the following triggers associated with them:<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6Hf2Ag42XGuAT5hFWoZ5CqEk4sSKezgNmcgYdizdTm-MRrWmhzs5UDewJqMVIipP3Pki5WfhxvQOmuFfhim2p9iYS_LL4baoMvk_MJoD4TOVg_2JhZ-rgcH3dhhQYyes929G6ojGONFU/s1600/triggers_summary.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" data-original-height="626" data-original-width="327" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6Hf2Ag42XGuAT5hFWoZ5CqEk4sSKezgNmcgYdizdTm-MRrWmhzs5UDewJqMVIipP3Pki5WfhxvQOmuFfhim2p9iYS_LL4baoMvk_MJoD4TOVg_2JhZ-rgcH3dhhQYyes929G6ojGONFU/s1600/triggers_summary.png" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Note the order of triggers.</td></tr>
</tbody></table>
<br />
<br />
Preview the slide once again - the variables should adjust correctly no matter where and how you click. At any time, there should be only one "false" variable, as at this point only one animal can be on the boat (not on the shore).<br />
<br />
<h3 style="text-align: left;">
Shore 1: Set Sail</h3>
With the loading and unloading taking care of, it's time to turn our attention to the "Submit" object we created earlier and add the navigational triggers.<br />
<br />
This is a relatively easy part, as we will need to achieve the following:<br />
<br />
<ul style="text-align: left;">
<li>Show user the "Sheep Eaten" slide, if the wolf and the sheep are on the same shore</li>
<li>Show user the "Cabbage Eaten" slide, if the sheep and cabbage are on the same shore</li>
<li>Show user the "Shore 2" slide, if both the sheep and the cabbage are safe.</li>
</ul>
<br />
Create the following triggers for the "Submit" object:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhid1gsM4GY0Jcbyb7hUB9yHExrmcauQFzyHjR84X02L61T3l3ToX-wwuSWHAOOXfnu_kgiS4FZYd7PkELZVhMv9fZKsylfjo2Cn9063Z6sY8FCmpO4ZHfY_iofbFa-XsxKTYh_W-FdTog/s1600/submit_Triggers.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="338" data-original-width="251" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhid1gsM4GY0Jcbyb7hUB9yHExrmcauQFzyHjR84X02L61T3l3ToX-wwuSWHAOOXfnu_kgiS4FZYd7PkELZVhMv9fZKsylfjo2Cn9063Z6sY8FCmpO4ZHfY_iofbFa-XsxKTYh_W-FdTog/s1600/submit_Triggers.png" /></a></div>
<br />
<br />
The point of this is to, firstly, verify if either the Sheep or the Cabbage are "dead" and then navigate the users to the appropriate slide, depending on what happened.<br />
<br />
Note that since at this point we don't have the slide for Shore 2 yet, I used "jump to next slide" option as a placeholder. We will correct this in a moment. Also, don't forget to use "AND" in this trigger - the user should proceed only if both objects are safe.<br />
<br />
<h3 style="text-align: left;">
Building Shore 2: Setting the base</h3>
<div>
Duplicate the slide "Shore 1" and rename it to "Shore 2". Go back to "Shore 1" and update the "jump to next slide" trigger I mentioned earlier, so that it points to "Shore 2" instead. </div>
<div>
<br /></div>
<div>
Now, go through the list of all triggers on slide "Shore 2" and change anything that contains "Shore 1" in its name to the matching variable named "Shore 2" instead. For example, if you have a trigger that adjust variable "SheepOnShore1", change the variable to "SheepOnShore2", without changing anything else. It's a bit of a slog, but better than writing from scratch. Once you're done, preview the slide and check that variables for Shore 2 are changing appropriately (note that you will start with them as "False" at this stage - this is intended.</div>
<div>
<br /></div>
<h3 style="text-align: left;">
Shore 2: Reflecting the Reality</h3>
<div>
At this stage, when you preview "Shore 2", you will see all animals on the shore, even though they shouldn't be there. Let's change that and add these three slide triggers to disable the animals, when they are not on Shore 2:</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9WTJSIvPk2HKrf_b8WY8UzBPpiJJgvaqig8SaaC5gk_LUFl8oQe80A2XrnnNR9Enkgu6uiDSBCZT1A1wn1xch_bCKBTxjB-4eF44vyDtsxBsQGc9aq4R9pX6GChDflU0HMIn0U7gRhmE/s1600/shore2_slideTriggers.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="190" data-original-width="331" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9WTJSIvPk2HKrf_b8WY8UzBPpiJJgvaqig8SaaC5gk_LUFl8oQe80A2XrnnNR9Enkgu6uiDSBCZT1A1wn1xch_bCKBTxjB-4eF44vyDtsxBsQGc9aq4R9pX6GChDflU0HMIn0U7gRhmE/s1600/shore2_slideTriggers.png" /></a></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
In addition, we need to make sure that the user can see the correct animal on the ship. You may remember that when an animal is on the ship, it is, in terms of variable values, neither on Shore 1 nor Shore 2. In other words, if both these variables are "False", the animal is in the cargo. Let's add slide-level triggers to reflect that:</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXPqKlROoYBqFSMP_HLKHMCoopwm9hQUGsCPT0_v-R5LZuyJX9xj49s97MHtyikTtDLRxtCpueZoTCJk6QyZr2E7xvbocNv-N67Izk0InDsWVmlihIdi75KDjURdaYI5zSoqXZG-VtDMI/s1600/shore2_slideTriggers_2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="206" data-original-width="329" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXPqKlROoYBqFSMP_HLKHMCoopwm9hQUGsCPT0_v-R5LZuyJX9xj49s97MHtyikTtDLRxtCpueZoTCJk6QyZr2E7xvbocNv-N67Izk0InDsWVmlihIdi75KDjURdaYI5zSoqXZG-VtDMI/s1600/shore2_slideTriggers_2.png" /></a></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
To check if everything works, preview the whole scene and click around.</div>
<div>
<br /></div>
<h3 style="text-align: left;">
Back to Shore 1</h3>
<div>
In your preview you may have noticed that if you sail back to Shore 1, it will not show you the correct status of pretty much anything. Let's fix that. </div>
<div>
<br /></div>
<div>
First, adjust the slide properties for Shore 1 and Shore 2 to "reset to initial state". Then, go back to slide "Shore 1" and add the same triggers that we created previously for "Shore 2", but this time replace all variables with the ones that are relevant for "Shore 1". Essentially, you can simply copy the 6 triggers we created in the previous steps from "Shore 2" to "Shore 1" and make necessary adjustments. In the end, you should have the following Slide Triggers on "Shore 1":</div>
<div>
<br /></div>
<div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEis1lav9JToil8KSWn-_ZWUdB0jWcg6OVtO-a-xP8A4J1fD00FwLX1SAyX8yymM7SgQCRUE8fQjlkqaVfzkfa0fmbiKC57JYjJvbeRR7BrQLgNYCdqKLjjcBH8msyrFfR5jnDmJpXFlfT4/s1600/shore1_more_triggers.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="399" data-original-width="323" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEis1lav9JToil8KSWn-_ZWUdB0jWcg6OVtO-a-xP8A4J1fD00FwLX1SAyX8yymM7SgQCRUE8fQjlkqaVfzkfa0fmbiKC57JYjJvbeRR7BrQLgNYCdqKLjjcBH8msyrFfR5jnDmJpXFlfT4/s1600/shore1_more_triggers.png" /></a></div>
</div>
<div>
<br /></div>
<div>
<br /></div>
<h3 style="text-align: left;">
Final Feedback</h3>
<div>
Finally, let's go back to Shore 2 and add an option to let the user know that the task was completed. In my example, I used a layer that appears when the last animal have been moved to the shore. </div>
<div>
<br /></div>
<div>
Go ahead and create a layer with the matching message. In layer properties, select the option to "Prevent the user from clicking on the base layer". Then go back to the main layer, select "Cargo" shape, and add the following trigger to it: </div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8tOZtvrDdIfDZ8XkCLpBCo7WohL-b6o89SbB8dfKInssAV9QiSw7U81cXBw7YJ5980nV1BtfCVQ8x67k0wdVnzN9Rh_lTMDXWSaYMNj91HKo_7ki3IIG6jn74WGRN3MAhH-dd0CLBVZI/s1600/final-feedback.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="452" data-original-width="485" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8tOZtvrDdIfDZ8XkCLpBCo7WohL-b6o89SbB8dfKInssAV9QiSw7U81cXBw7YJ5980nV1BtfCVQ8x67k0wdVnzN9Rh_lTMDXWSaYMNj91HKo_7ki3IIG6jn74WGRN3MAhH-dd0CLBVZI/s1600/final-feedback.png" /></a></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
Preview your project and enjoy the ride - you have built your own river crossing puzzle. If something is not working, you can download the Storyline 2 file used in this tutorial from <a href="https://drive.google.com/open?id=0B2CXVo5Awkn7V09sd3RKZTVka2s" target="_blank">here</a>.</div>
<div>
<br /></div>
<i><br /></i>
<i>Questions? Comments? Anything missing or can be done better? Let me know in the comments or connect on <a href="https://www.linkedin.com/in/mperfiljeva/" target="_blank">LinkedIn</a>.</i><br />
<br />
<br /></div>
Maija P.http://www.blogger.com/profile/03876378321908649349noreply@blogger.com0tag:blogger.com,1999:blog-1271059022930268937.post-27890480440861291972016-10-25T23:33:00.000+02:002017-08-29T13:46:05.629+02:00Three Best Things: Tinkering with Animations in Storyline<div dir="ltr" style="text-align: left;" trbidi="on">
I like being inspired by other artists. I've recently noticed <a href="https://dribbble.com/shots/3003609-Photo-Walkthrough" target="_blank">this interaction concept</a> on Dribbble that seemed to transfer very well into Storyline.<br />
<br />
Originally, I intended this as an exercise in professional stealing - for practice, I stalk Dribbble artists and secretly try to recreate what they did, but in the Storyline or in other software programs. I do it as an exercise in understanding the creative process.<br />
<br />
So, a couple of moments later and I came up with this:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiIFpoujmQwJKm1GAlvwk9lDxh3u3UFzS6tBKCl3dfSUsqW0KbTnhowtiqdTMpTWWaQuTFZLNsG3ihC43tnU8MnNiROp0eCME4o3DCs_mejNkHBNHIE1AtriVZBbhXa0I7_iMinkCfEP4/s1600/Checklist2.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiIFpoujmQwJKm1GAlvwk9lDxh3u3UFzS6tBKCl3dfSUsqW0KbTnhowtiqdTMpTWWaQuTFZLNsG3ihC43tnU8MnNiROp0eCME4o3DCs_mejNkHBNHIE1AtriVZBbhXa0I7_iMinkCfEP4/s1600/Checklist2.gif" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both;">
In this case I used an oversized parallelogram shape that was set to move down on the straight animation path at the start of the slide's timeline. Each slide used "Push" transition. Text has "Fade" animation.</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
In the original example, my focus point was on the animated yellow shape. In the original we can see the edge of the yellow shape, which moves down when the next photo slides into the screen. This is not something easily achieved in Storyline as it deals with individual slides (it's not impossible, but not easy). Apart from transitions, there are no out-of-box solutions for making the slides interact together. In this case, however, I didn't want to go for anything overly complicated. </div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
So, while my first version was not bad, it was still lacking the grace of the original. At the same time, I knew that I won't be able to recreate the same animation and go to bed at a reasonable time. So I had to improvise and think about what's possible in Storyline. I played around with different transitions and added extra shapes in the screen, to suggest that there are more screens coming up:</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpke3m89fm1QRlr0XwyHTG4WwVBnHfim5kmcQp5QnHWXm3-1BvsK-vFXPDLn-gyWiCQLACKBnZkoP_lKQtS5y9x9NBtNlFgFqKXOP-UC6pN695rlLP5-P8CAfJXHuvHoBtKkRcsbm7FHI/s1600/Transitions.gif" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpke3m89fm1QRlr0XwyHTG4WwVBnHfim5kmcQp5QnHWXm3-1BvsK-vFXPDLn-gyWiCQLACKBnZkoP_lKQtS5y9x9NBtNlFgFqKXOP-UC6pN695rlLP5-P8CAfJXHuvHoBtKkRcsbm7FHI/s1600/Transitions.gif" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">With a little shape on the right side.</td></tr>
</tbody></table>
<div class="separator" style="clear: both; text-align: left;">
I liked the movement, but the added shapes themselves felt weird to me, particularly on the first slide. The last slide was also a bit odd because it didn't have any. Perhaps, it would have been less strange if I had more slides, but for just three it wasn't really good. </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
So, I kept experimenting and instead of the sideways "Push" transition, tried the up/down one. It didn't work too well at first, because, contrary to the original design, my shapes had different colors. </div>
<div class="separator" style="clear: both; text-align: left;">
The easy solution would have been to make the color of each shape the same, as I didn't really have any reason to make them different, other than for pure decorative purposes. Still, out of curiosity, I came up with another version of this interaction. I did the following:</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<ul style="text-align: left;">
<li>Added a custom state to each shape, changing it's color to the color of the shape from the previous screen. </li>
<li>Added a trigger to change the shape's state to normal based on the timeline (0.5 seconds).</li>
</ul>
<br />
<div class="separator" style="clear: both; text-align: left;">
Here's the result:</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4uK8Vm0UngVZ7pUqeNPjgHaonxHXW6KMSU_MmFj2cN7hC2DCAyAMNFOqq_dtG6JFpkrKXkrACJtOJGzPUydBLzIGodFdo5u6jF4WTJ_Tybs9EKrgFdu0BWqK8v_xJdvMnonWYCG-bgtY/s1600/Transitions2.gif" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4uK8Vm0UngVZ7pUqeNPjgHaonxHXW6KMSU_MmFj2cN7hC2DCAyAMNFOqq_dtG6JFpkrKXkrACJtOJGzPUydBLzIGodFdo5u6jF4WTJ_Tybs9EKrgFdu0BWqK8v_xJdvMnonWYCG-bgtY/s1600/Transitions2.gif" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Vertical transitions and the color change.</td></tr>
</tbody></table>
<div style="text-align: center;">
<br /></div>
While I was pleased with the result, the obvious weak point in this case is the reverse navigation. Specifically, if you click "Back" button, the shape colors will not match. Again, purely out of curiosity, I wanted to see if there was any way to work around that, apart from creating duplicate slides <a href="http://gamayun-training.blogspot.de/2016/08/elh-challenge-140-slide-transitions-and.html" target="_blank">as I did previously</a>.<br />
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
With this in mind, I added a custom "Back" state to each shape and added a trigger to change the state of each shape to "Back" when the user clicks "Back" button. Here's what happened:</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghYI1v8rWXMM4SHSJSJNkLp9HPlMCkK6g7mYIvmSOMQctLRSF2R4iuQ15GsiE7poyDr62_e7mEP9xazrf8C7M3i5w09Oj1DMOd6sUZLZIF3FfYcOJvjeUf7t0hbhKNvOk5dsNQ-EPXrwk/s1600/Transitions3.gif" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="245" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghYI1v8rWXMM4SHSJSJNkLp9HPlMCkK6g7mYIvmSOMQctLRSF2R4iuQ15GsiE7poyDr62_e7mEP9xazrf8C7M3i5w09Oj1DMOd6sUZLZIF3FfYcOJvjeUf7t0hbhKNvOk5dsNQ-EPXrwk/s400/Transitions3.gif" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Going forward and then back with changing states.</td></tr>
</tbody></table>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: left;">
It was an interesting outcome, but, in my opinion, too chaotic. As I mentioned before, there was no real reason to change the color of the animated shape and in this case I could really see that it adds more confusion / chaos to the whole concept. With this in mind, my final version of this interaction was this (<a href="https://s3.eu-central-1.amazonaws.com/elh-challenges/3+Best+Things/story.html" target="_blank">click here</a> for the published version):</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwtL-lRVJ0Sa4k-8Xu3QuYBFDTjOBY1RvepXttBGQd4t9RB81_EtZ7pVIujQJP18pGsVWy7fKvbyK769UGWe5bFLFUYVUI8ztzgUdgzvmq6bf7XfToBPZpDuiOhtYq8aYJ4ei8OfRsXv8/s1600/Transitions4.gif" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwtL-lRVJ0Sa4k-8Xu3QuYBFDTjOBY1RvepXttBGQd4t9RB81_EtZ7pVIujQJP18pGsVWy7fKvbyK769UGWe5bFLFUYVUI8ztzgUdgzvmq6bf7XfToBPZpDuiOhtYq8aYJ4ei8OfRsXv8/s1600/Transitions4.gif" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Final version.</td></tr>
</tbody></table>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Simple yet still interesting and works quite well when going forwards and backwards (if I do say so myself). In any case, definitely an interesting technical exercise.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
If you want to play around or use any of the versions of this interaction, you can download the complete Storyline file <a href="https://drive.google.com/open?id=0B2CXVo5Awkn7T19idVRVdEVWcmM" target="_blank">here</a>. Or grab just the <a href="https://drive.google.com/open?id=0B2CXVo5Awkn7Z0F2U2JMRUJVSDQ" target="_blank">final version</a>. Note that you will need Peace Sans font, which you can <a href="https://www.behance.net/gallery/34760019/Peace-Sans-FREE-FONT" target="_blank">download for free</a>.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
</div>
Maija P.http://www.blogger.com/profile/03876378321908649349noreply@blogger.com0tag:blogger.com,1999:blog-1271059022930268937.post-33521275500886647702016-10-16T12:57:00.000+02:002017-08-29T13:44:45.239+02:008 Ways to Make or Break a Software Training<div dir="ltr" style="text-align: left;" trbidi="on">
I've spent a lot of time facilitating, observing or receiving software training. For example, teaching someone how to use an LMS, a CMS, or a mysterious internal software. Today I want to share this:<br />
<br />
<h2 style="text-align: left;">
8-Step Plan for the Worst Software Training</h2>
<ol style="text-align: left;">
<li>Sit down at the "teacher's desk" in front of the audience projecting your screen on the tiniest projector possible.</li>
<li>Bonus points: make sure the projector is slightly out of focus, and flashes messages about the lamp needing to be changed, or other technical errors.</li>
<li>Be very apologetic about the complex subject matter and repeatedly remind the audience that "This is a lot to take in at once". </li>
<li>Bonus points: humorously blame it on "them", who didn't give you enough time to prepare or forced you to stick to a poor lesson plan.</li>
<li>Start explaining every single element of the user interface one by one, going from left to right.</li>
<li>Bonus points: explain EVERY SINGLE element/feature. Even those nobody is using. Make sure to talk about an element for a while, then say: "But we're never going to use it, so don't be afraid if you can't remember it".</li>
<li>More bonus points: show and explain even the most obvious elements of the interface. Everyone needs to hear that "Save" button saves the document or that "File name" shows the name of the file. Throw in a knowledge check, too!</li>
<li>Even more bonus points: cheer the students up by saying: "Don't worry, nobody can understand it from the start, it takes time". Or "Nobody expects you to memorize all this, I'm sure it will all become clear with time". Let them wander why are they listening to you now, rather than getting that experience.</li>
</ol>
If this sounds familiar and you want to stop apologising for your training, do this:<br />
<br />
<h2 style="text-align: left;">
8-Step Path Towards Better Software Training</h2>
<div>
<h3 style="text-align: left;">
1. Stop placing the blame. </h3>
</div>
This sounds harsh, but this is where you start. Don't make excuses about the quality of training! If you are an instructional designer, it is your job to take the raw subject matter in its primordial form and transform it to make learning possible. That's what instructional design actually is. If you are the trainer, it is up to you to make the best of the material and work with the developers to make it better. In any case, any conflicts between you and the "them" have no place in the training room.<br />
<br />
<h3 style="text-align: left;">
2. Stop telling learners how complex the tool is and how nobody can understand it.</h3>
This does not motivate anyone. Stand in front of the mirror and tell yourself that you will definitely fail, but it's ok, everyone does. Does that provide a sense of relief?<br />
<br />
<h3 style="text-align: left;">
3. Make a list of tasks that learners should be able to do by the end of the training.</h3>
Stop thinking "Tool training" and start thinking "Task training". In other words, forget about "They need to know..." and focus on "They need to do...". It is highly likely that the real goal of the training is not "to know the tool", but to perform specific tasks. For example: find data, correct data, cancel orders, save documents, etc. Find out what these tasks are and write them down. Did you notice that I didn't say "learning objectives"? This is to prevent objectives like "Will be able to understand the elements of the user interface".<br />
<br />
<h3 style="text-align: left;">
4. Rank the task list.</h3>
Depending on your context, you may end up with a huge list of tasks the learners need to do. In this case, talk to SMEs and the actual users of the tool to find out which tasks they do more often, or which tasks are more critical. Keep in mind that SMEs may not be reliable in their feelings about task frequency or importance. If you have access to data - use it as well. For example, in a call center, you will most likely have information about contact drivers. Map the most popular contacts to the tasks done in the tool.<br />
<br />
If applicable, compare what you've learned from SMEs with the vision of the management who asked you to develop the training. Highlight any discrepancies. Make sure these are discussed and cleared before you proceed with the training design.<br />
<br />
<h3 style="text-align: left;">
5. Design the activities that match the tasks. </h3>
If you identified the tasks that should be performed, you probably have a good idea on what activities you need. The main challenge here is often a sequence of activities, particularly for complex tools.<br />
<br />
To design a sequence of learning activities I consider the following about the task I am teaching: frequency, ease, tool elements and functions used. As a hypothetical example: opening a customer's account is easy and is done very often. Investigating a fraudulent activity on a hacked account is complicated and rare. Thus, opening customer's account should be the first task/activity to learn in this case.<br />
<br />
Keep in mind the cognitive load as well. The learners should be comfortable with the basics of the tool before dealing with tasks that need analytical thinking or creative application. For example, for those who have never created an e-learning, leaning how to create simple shapes and inserting pre-made buttons in Storyline should probably precede learning how to create custom buttons with your own triggers.<br />
<br />
<h3 style="text-align: left;">
6. Engage your learners early on. </h3>
Provide instructions and guidance for anything that's not obvious, but let learners figure out information that is more obvious. With some tools, what the learners need to know is the procedure: the sequence of actions they should do. What they can often (well, depending on your tool) figure out is to how to do these actions in the tool. In this case, give learners the list of actions to do, such as:<br />
<ol style="text-align: left;">
<li>Open customer's account, </li>
<li>Open customer's address </li>
<li>Change address </li>
</ol>
and allow the learner to find the right buttons. Especially if the buttons names are "open account", "open address", "change address". If you're making an e-learning, add an option to get a hint on demand. In the classroom encourage peer support between advanced learners and focus your attention on the others.<br />
<br />
Another option to teach a tool is to provide a step-by-step written guide (think <a href="https://design.tutsplus.com/tutorials/how-to-create-a-cozy-flat-interior-in-adobe-illustrator--cms-27124" target="_blank">tutorials</a>) and ask the learners to follow the steps in the actual tool on their own. In an e-learning, consider adding on-demand videos for learners to play if they need help. Instead of only watching someone doing something, learners will actually be doing it themselves. The benefit of this approach in a classroom is that it frees you up from lecturing and lets you manage the class by walking around and helping learners as needed.<br />
<br />
<h3 style="text-align: left;">
7. Include activities that learners will complete on their own.</h3>
Activities should be relevant to the learning objectives and rely on what has been learned, but should be slightly different from what has been taught in the course. These should be completed without guidance. The purpose of this is a) to practice and b) to verity the learning. These activities does not have to happen immediately. In fact, distributed practice works even better.<br />
<br />
<h3 style="text-align: left;">
8.Encourage your learners. </h3>
Instead of constantly highlighting that everyone is an idiot (and that's what the 'encouragement' like "nobody can understand it the first time" really says), highlight their successes, reassure them that they are doing great (if they do), provide developmental feedback, if they don't.<br />
<br />
<br />
Got any more ideas to make or break a software training? Disagree with something? Let me know in the comments or Twitter - <a href="https://twitter.com/GamayunTraining" target="_blank">@GamayunTraining</a><br />
<br />
<br /></div>
Maija P.http://www.blogger.com/profile/03876378321908649349noreply@blogger.com0tag:blogger.com,1999:blog-1271059022930268937.post-43939380812808057192016-10-09T22:29:00.001+02:002017-08-29T12:40:12.630+02:00Creating Adaptive Menu in Storyline<div dir="ltr" style="text-align: left;" trbidi="on">
I have always been fascinated by the idea of <a href="https://en.wikipedia.org/wiki/Learning_object" target="_blank">learning objects</a> and adaptive learning systems. This interest is partially selfish - as a learner I rebel against training materials that force me to click through every single thing on every single slide, without letting me skip anything that I might not need, or already know.<br />
<br />
For <a href="https://community.articulate.com/articles/checklist-interactions-in-elearning" target="_blank">this week's ELH Challenge</a>, I decided to approach the topic of checklists from my favorite perspective of adaptability. In <a href="http://bit.ly/2e0ctQM" target="_blank">my concept demo</a>, I am assuming an e-learning module with three chapters. I included three questions, which represent a pre-test on the training content. Based on the results of each asessment, the module chapters are shown as "mastered", "suggested for review" or highlighted as "focus points" for learning.<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLA3LyV2nm29d40XXFUodUoFt3vRh5f5LIZ8E3rXe_okC8Xcb-534tkKF79QcEYcQhy_s1t1VgPow9FLDf3mbjRXLW72I-i9sTtUhyphenhyphenZsfSGCa5kMHXyCrmHUjqozi0S9wR3Lhrn8gvLp0/s1600/Checklist2.gif" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLA3LyV2nm29d40XXFUodUoFt3vRh5f5LIZ8E3rXe_okC8Xcb-534tkKF79QcEYcQhy_s1t1VgPow9FLDf3mbjRXLW72I-i9sTtUhyphenhyphenZsfSGCa5kMHXyCrmHUjqozi0S9wR3Lhrn8gvLp0/s1600/Checklist2.gif" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Animated menu</td></tr>
</tbody></table>
<br />
In this post I will explain how the concept was created in the Storyline 2. However, the biggest challenge of this concept (assuming you would like to flesh it out) is not the development of the list, but the instructional design. Mostly because you will need to create a good assessment that will actually measure the learner's knowledge of the subject matter. Note that you will need to have as many sets of questions as you will have chapters in your e-learning.<br />
<br />
I will assume that you are not aiming to report the results of this pre-assessment to the LMS or otherwise track it, as it's not an intended purpose of this interaction.<br />
<br />
<h3 style="text-align: left;">
Creating Assessment </h3>
There are two ways to implement the assessment:<br />
<div style="text-align: left;">
</div>
<ul style="text-align: left;">
<li>do everything manually and use variables</li>
<li>use the <a href="https://community.articulate.com/series/getting-started-with-articulate-storyline-2/articles/building-quizzes-and-result-slides" target="_blank">question slides</a>. </li>
</ul>
<br />
The former will give you more control, the latter will save time.<br />
<br />
If you wish to draw questions randomly, divide them into <a href="https://community.articulate.com/series/4/articles/using-question-banks-in-articulate-storyline-2" target="_blank">questions banks</a> (one bank per chapter) and add <a href="https://community.articulate.com/series/4/articles/drawing-slides-from-a-question-bank" target="_blank">random draws from question banks</a> to your project. It is interesting to note that you can add <i>any </i>slide to the question bank. You don't have to use the built-in question slides or freeform interactions.<br />
<br />
If you're not using your own variables, you will also need to create a separate scene and add three blank <a href="https://community.articulate.com/series/articulate-storyline-2/articles/adding-result-slides-in-articulate-storyline-2" target="_blank">results slides</a> - one slide per each set of questions. Essentially, you're aiming for this:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTr4ahkGzc7wwjNfK_NxXuKQ4vd8M_zQspHuEKDc7Oqh1RdMhFhxtQBTsrhc3TSxRmRM55ptFNzRULZeO9ATFeDaxvw5hnAPrnTUQ86jD3T5K3-mKdslD0dsrkkZvsvF-XaO-Tmkyn0rc/s1600/Scenes.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTr4ahkGzc7wwjNfK_NxXuKQ4vd8M_zQspHuEKDc7Oqh1RdMhFhxtQBTsrhc3TSxRmRM55ptFNzRULZeO9ATFeDaxvw5hnAPrnTUQ86jD3T5K3-mKdslD0dsrkkZvsvF-XaO-Tmkyn0rc/s1600/Scenes.png" /></a></div>
<br />
It doesn't matter how your slide results look, since they will not be visited by learners - this is the reason they are in a separate scene. The only reason we need them is to have the quiz result variables. Specifically, we'll be interested in <i>ResultsX.ScorePercent</i> or <i>ResultsX.ScorePoints - </i>depending on whether you want to use percentage or points for the final scoring.<br />
<br />
<h3 style="text-align: left;">
Creating the Menu</h3>
<div>
<h4 style="text-align: left;">
Fancy Checkboxes</h4>
</div>
You will notice that self-ticking checkboxes are animated. To recreate this, first, create three separate objects: a "Normal" checkbox, a "Filled" checkbox, and a Check Mark. Note that I used a regular shape rather than a button. <br />
<br />
Create a custom state for "Normal" checkbox - let's call it "Checked".<br />
Add desired animations to the "Filled" checkbox and the Check Mark. Select both of these objects, cut (Ctrl+X) and paste them into the "Checked" state of the "Normal" checkbox. In other words, you'll have three objects inside an object:<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwtjIH5n-Fs8tYbKGPpIM0n1UgaFGPo0zGRxmwIWRwby4_bMw_q9tIV04vTCd8YhFLvhimyyLUw6sJQaXT0N3ech-ltmhNfytAoBDr0hpjlL4wTmmZOXCTZYzLPfF-LUNL1_zRoBK_qq4/s1600/state.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwtjIH5n-Fs8tYbKGPpIM0n1UgaFGPo0zGRxmwIWRwby4_bMw_q9tIV04vTCd8YhFLvhimyyLUw6sJQaXT0N3ech-ltmhNfytAoBDr0hpjlL4wTmmZOXCTZYzLPfF-LUNL1_zRoBK_qq4/s1600/state.png" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Check box state using two additional objects.</td></tr>
</tbody></table>
<br />
Don't forget to create three custom states to signal the chapter status, for example:<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjssMRUTVEia0dKTGY9jPACyrKueOBKI4Hcm1R4YIOrnblnsw3cEhvMzCdDl793LNY62B-LdfM4XpI6ZhP1y7Qs2Z-fMBSa_NvDV3tSnnScuC_3CLgvzx5k1m6iIsJNSsNfaQbQDGvN-i0/s1600/states2.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjssMRUTVEia0dKTGY9jPACyrKueOBKI4Hcm1R4YIOrnblnsw3cEhvMzCdDl793LNY62B-LdfM4XpI6ZhP1y7Qs2Z-fMBSa_NvDV3tSnnScuC_3CLgvzx5k1m6iIsJNSsNfaQbQDGvN-i0/s1600/states2.png" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Custom states of the "Chapter status" label</td></tr>
</tbody></table>
<br />
I used "Shape" animation for the filled checkbox, "Grow" for the check mark, and "Wipe" for the chapter status labels. I do recommend using animations for elements that need to turn from invisible into one of several possible states (such as chapter status labels in this example). Otherwise before changing to the custom state, they will flicker the "Normal" state for a second. Adding even a tiny bit of "Fade" solves this issue. Of course, you can try to create a "normal" state that is invisible, but consider animations, too.<br />
<br />
Create the rest of the objects and adjust their positions on the timeline, as you wish. In my example, I have arranged everything as follows:<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5ek6L_ex0ErnqNSKx-SZC7MMFrcTWrq_K1B_W6YpUBKKQZVHSzalArMVFyyE0V0L0L0NeGPkpjYOeoD5B6QvN5yTjSLuYB-ZLP2XMKwc4fBkdufVBKsTGJObQWjPcqmtjDsxG_sxFJhc/s1600/timeline.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5ek6L_ex0ErnqNSKx-SZC7MMFrcTWrq_K1B_W6YpUBKKQZVHSzalArMVFyyE0V0L0L0NeGPkpjYOeoD5B6QvN5yTjSLuYB-ZLP2XMKwc4fBkdufVBKsTGJObQWjPcqmtjDsxG_sxFJhc/s1600/timeline.png" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">The elements of one chapter (title, background, status, checkbox) are grouped together and arranged on the timeline. The group is then copied to preserve the timings.</td></tr>
</tbody></table>
<br />
To save time, I would recommend creating the elements for the first chapter "card", add animations, timeline positions, etc. Then group the elements and copy/paste the group as many times as you have chapters. This way you will keep all properties and timeline positions of all the elements within a group - no need to adjust each of the elements over and over.<br />
<br />
This is the way I created the "spinner" on the "Processing results" slide: I created and timed a group of 4 circles, grouped them and pasted the group several times on top of itself.<br />
<br />
<h4 style="text-align: left;">
Triggers</h4>
Finally, create the triggers to change the states of checkboxes and chapter status labels, based on the assessment results. For example:<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipaBPxv8j-QTKhowvlIPkdVqLXSiQPpmWwY6eXjB6df4huId_ljk9LDJ_GT3lD0Sr8VuDG63AFWct5E3JAJf2QpafAIe3Kk4fDCn4_esdOdbZL-IUScK2ckilMLSKkh5oWV3hhBEI4BGk/s1600/trigger.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipaBPxv8j-QTKhowvlIPkdVqLXSiQPpmWwY6eXjB6df4huId_ljk9LDJ_GT3lD0Sr8VuDG63AFWct5E3JAJf2QpafAIe3Kk4fDCn4_esdOdbZL-IUScK2ckilMLSKkh5oWV3hhBEI4BGk/s1600/trigger.png" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">The checkbox will be set to status "Completed" if the learner scores 85% or more on the first assessment.</td></tr>
</tbody></table>
You're done!<br />
<br />
<h3 style="text-align: left;">
Not Visiting Results Slides?</h3>
Yes, you <a href="https://community.articulate.com/discussions/articulate-storyline/submit-results-without-visiting-result-slide-possible" target="_blank">don't actually have to visit the results slide </a>to generate the quiz results. You can, if you like, create a "Loading screen" slide and add the "Submit quiz results" trigger to it (it will work for more than one assessment):<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_qBAcH6LhoEsmC7S-gNs5-bBY9ZeiWtjYZ8mm8ZHanKqreLqJw07vYG_OdLMjbzDtl7nM3EWIJ9pz4FLdAzcrr4tofEI_EwZOwTtA54eHehwQYBxpXEtaqhJL23nPkIeGUCfdPcbQ6Sw/s1600/slide_triggers.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_qBAcH6LhoEsmC7S-gNs5-bBY9ZeiWtjYZ8mm8ZHanKqreLqJw07vYG_OdLMjbzDtl7nM3EWIJ9pz4FLdAzcrr4tofEI_EwZOwTtA54eHehwQYBxpXEtaqhJL23nPkIeGUCfdPcbQ6Sw/s1600/slide_triggers.png" /></a></div>
<br />
<br />
While I haven't tested this concept on an LMS, I haven't had any issues with the menu items changing states with the described setup when viewing the published output online. As I mentioned before, the ability to report these results was not intended for this interaction, but if you need to report these results, feel free to experiment with the results slides or any other workarounds and let me know what you find out.<br />
<br /></div>
Maija P.http://www.blogger.com/profile/03876378321908649349noreply@blogger.com0tag:blogger.com,1999:blog-1271059022930268937.post-38465082619871865032016-10-09T14:05:00.000+02:002017-08-29T13:06:14.468+02:00Good Assessment: What is "Good"?<div dir="ltr" style="text-align: left;" trbidi="on">
As instructional designers, we often have to either write ourselves or use SME-written assessments, quizzes and other varieties of multiple (or not so multiple) choice questions. And often we're horrible at it. Before investing time into learning about the principles behind assessment writing, I did every single mistake that was possible, once again proving that learning without theory is not learning.<br />
<br />
<h3 style="text-align: left;">
A Good Assessment is...</h3>
While proper evaluation of assessment quality, which would be necessary for high-stakes assessment, requires specialised knowledge and skills, in my daily life I found it extremely helpful to be aware of the underlying complexity of assessment development. Which is why in this post I would like to provide a simplified overview of assessment quality criteria, as even basic knowledge of these helped me design better assessments.<br />
<br />
So, in simple terms, an assessment is good, when it is <b>valid </b>and <b>reliable</b>.<br />
<br />
<h3 style="text-align: left;">
Understanding Validity</h3>
Validity, put simply, means that your assessment is measuring what it is supposed to. There are multiple ways of measuring the validity of your test, but they ultimately depend on the purpose of your assessment, which should always be formulated clearly. For example, your assessment may claim that anyone who scores X out of Y points will be able to perform a job or a task they were taught. In this case,in order for your assessment to be valid, you need to confirm the correlation between the test score and the job performance. If you find that people who failed your assessment are performing just as good as anyone who passed, your assessment is most likely invalid.<br />
<br />
More often, however, you will most likely want to assess the achievement of learning objectives. In this case, the validity of your assessment can be evaluated by verifying if:<br />
<ul style="text-align: left;">
<li>Questions are <b>linked to the learning objectives</b>. In fact, each test item should measure only one learning objective or only one "thing". While it may seem like a good idea to create complex questions that relate to two or more learning objectives, this creates an issue with identifying the reasons behind failing the question. How can you know which learning objective wasn't achieved? </li>
<li>There is an <b>acceptable proportion of questions per each objective</b>. For example, a learning objective "Will be able to save a document" can most likely be assessed with one test question, while "Will be able to troubleshoot technical issues" most certainly needs more than one. </li>
<li>The <b>cognitive level of test items is adequate</b>. For example, if your objective is "To analyse the impact of World War II on global economy", the question like "In which year was World War II started" is not valid for this learning objective. This is the case where <a href="http://www.celt.iastate.edu/teaching/effective-teaching-practices/revised-blooms-taxonomy" target="_blank">Bloom's taxonomy</a> and well-formulated learning objectives are vital.</li>
<li>The <b>difficulty of test items and the assessment as a whole is appropriate</b>. While defining the difficulty can be quite complex, at the very least you can ask a group of SME as well as someone who most closely resembles the assessment target audience, to review your assessment draft and establish the level of difficulty. </li>
</ul>
<br />
<h3 style="text-align: left;">
Understanding Reliability</h3>
A valid test measures what it's supposed to. Reliable test does it constantly. For a quick example of the difference between validity and reliability, take a look at this ruler:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmUDUkU06LYtEO7CrdhAKqQFdwBma5IkZrPItZV_eTHOiwoCG3fEdtg4ISpgvcI6bS366YdjkRTpbEARtB6du2WiCK9SPbVLcEJHMxLVjQN5TV42w7AgTYr-PkBEmrIgiYUR68HDy8mIk/s1600/Picture1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmUDUkU06LYtEO7CrdhAKqQFdwBma5IkZrPItZV_eTHOiwoCG3fEdtg4ISpgvcI6bS366YdjkRTpbEARtB6du2WiCK9SPbVLcEJHMxLVjQN5TV42w7AgTYr-PkBEmrIgiYUR68HDy8mIk/s1600/Picture1.png" /></a></div>
<br />
It is very reliable (it will constantly measure the same distance), but invalid (because it actually has 8 centimeters instead of the declared 9).<br />
<br />
Assessment reliability measurement is usually complex and requires specific knowledge. Therefore, if you need to create a high-stakes assessment, such as a final exam or a certification program which has impact on the learners' employment or study outcomes, I would highly recommend hiring a professionally trained assessment specialist to assist you in this process. However, for the development of low-stakes assessment it is helpful to keep in mind the general principles.<br />
<br />
Generally speaking, assessment reliability can be verified by:<br />
<br />
<ul style="text-align: left;">
<li><b>Test/Retest</b> - administering the same test to the same audience over the period of time. For example, if you have ever taken the same personality test several times and got a different result each time (and there's nothing in your life that could dramatically affect your personality), then the test may not be reliable. </li>
<li><b>Equivalence </b>- successive administration of the parallel forms of the same test to two groups. In very simple terms, this means that you will need to create two copies of the test, with questions that are different, but assess the same learning objectives / skills / knowledge areas.</li>
<li><b>Item reliability</b> - a degree to which the test questions that address the same learning objective / skill / knowledge produce similar results. </li>
<li>When evaluating test questions, it is also helpful to consider if the <b>item discrimination</b>, or can the item identify good performers from the poor. For example, are there test questions that high performers find constantly confusing? </li>
<li><b>Inter-rater reliability - </b>if you're using human graders (for essay questions or observations), you should verify to which extent the grades for each test items can vary between individual graders.</li>
</ul>
<br />
Based on my practical experience with assessments following internal on-boarding programs, the reliability of assessment can be compromised by unreliable training processes. This is particularly true if your training program is being run across multiple locations, by training teams that are not operating jointly or even belong to different legal entities within your corporation. Local issues, miscommunication between departments, lack of support for trainers - all of these factors should be considered before making conclusion about either quality of the assessment or the learners' performance.<br />
<br />
<h3 style="text-align: left;">
Check Your LMS</h3>
It may not always be obvious, but some learning management systems (LMS) can actually help you assess your assessment. Particularly <a href="https://moodle.org/" target="_blank">Moodle</a> is extremely helpful in this regard. For example, it can identify test questions that have poor discrimination or inadequate difficulty. At the very least, your LMS should provide you with the percentage of learners answering each question correctly/incorrectly (and this is what is called "difficulty") - pay attention to questions which have extreme percentages (whether low or high) and particularly the 50/50 splits. This can indicate either an issue with the question, or an issue outside of the test, e.g. an outdated or inadequate training.<br />
<br />
<h3 style="text-align: left;">
Avoid</h3>
Creating an assessment that has <b>20 questions </b>and a <b>passing grade of 80%</b> w<b>ithout any reason behind it</b>, other than this being the so-called "best practice". Plainly speaking, neither the number of test items, nor passing grade should be set arbitrarily, as this compromises the validity of the assessment. In fact, assessment based solely on these two numbers usually leads to disputes and confusion, as there is no clarity on what these numbers mean or what is the purpose of assessment. There are specific principles that can help you make a reasonable decisions about the number of test items, as well as the passing grade - these should be applied to all assessments. <br />
<br />
In general, having poorly written assessment is at the very least a waste of time both yours as an assessment writer, and the learner's (and at worst - highly unethical or even illegal). In this case, no assessment is better than a bad assessment!<br />
<br />
<h3 style="text-align: left;">
Further Reading</h3>
In addition to <a href="http://www.creative-wisdom.com/teaching/assessment/reliability.html" target="_blank">this extensive summary of the views on validity and reliability</a> and <a href="http://www.hr-guide.com/data/G362.htm" target="_blank">this (less academic) overview</a>, I found the following printed resources helpful, practical and accessible to more general audiences:<br />
<ul style="text-align: left;">
<li>Anderson, P., Morgan, G. (2008) ‘Developing Tests and Questionnaires for a National Assessment of Educational Achievement’, vol. 2, World Bank Publication.</li>
<li>Burton et al. (1991) ‘How to Prepare Better Multiple-Choice Test Items: Guidelines for University Faculty’, Brigham Young University</li>
<li>Downing, S., Haladyna, T. (1997) ‘Test Item Development: Validity Evidence From Quality Assurance Procedures’, Applied Measurement in Education, nr. 10, vol. 1, pp.61-82.</li>
</ul>
Most of them may be found through <a href="https://scholar.google.com/" target="_blank">Google Scholar</a>.<br />
<br /></div>
Maija P.http://www.blogger.com/profile/03876378321908649349noreply@blogger.com0tag:blogger.com,1999:blog-1271059022930268937.post-3779485842133948782016-08-14T19:21:00.001+02:002017-08-29T12:41:40.970+02:00ELH Challenge 140: Slide Transitions and Back Navigation<div dir="ltr" style="text-align: left;" trbidi="on">
For <a href="https://community.articulate.com/articles/elearning-designers-know-about-addie-model" target="_blank">this week's ELH Challenge</a> (ADDIE model) I wanted to make something short. Therefore, highly interactive branching scenarios were out of scope, as well as anything that would require custom writing (as you can see by the frequency of my blogging, I'm not exactly a fan of writing in my spare time). Therefore, I settled on <a href="http://bit.ly/2b3K2SE" target="_blank">this demo</a> which describes ADDIE phases and touches upon their possible combinations/order.<br />
<br />
Since my submission was relatively straightforward (no variables here!), in this post I would like to talk about one of the aspects that is probably very easily missed - back navigation (what happens when the learner wants to go back). In the context of this challenge, I will focus specifically on slide transitions and the impact of back navigation on my design choices for this ELH Challenge.<br />
<br />
While most of the time back navigation is straightforward, in certain cases, particularly if you're tailoring animations and slide transitions to make your course look good while the learner progresses towards the end, overlooking back navigation may be detrimental to the experience you designed. For instance, let's review the slide transitions in my submission:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtHhuBLkgoPYRnJyNUb4p7tsHD78_P10-JGj694uZWwAUPERaB9Aay-1p7eTDxRGHfZUkV5ciNKydHZ1MeiIbeUJIEXdqL4vhIxnogptGAHfVbIlXC9KLoT8DkZQaXjahLRs7ejq-030U/s1600/Animation.gif" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtHhuBLkgoPYRnJyNUb4p7tsHD78_P10-JGj694uZWwAUPERaB9Aay-1p7eTDxRGHfZUkV5ciNKydHZ1MeiIbeUJIEXdqL4vhIxnogptGAHfVbIlXC9KLoT8DkZQaXjahLRs7ejq-030U/s1600/Animation.gif" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
As you will notice, when we move from the title slide ("ADDIE") to the "Analyze" slide, we zoom into it. The slides for the other phases (Design, Develop, etc.) use "Cover: From Left" transition instead. My logic behind this choice was to create a feeling that we are "zooming" (= looking closer) into the ADDIE abbreviation and then move from letter to letter to explore their meaning. This is why the first slide use "zooming", while the other slides use "Cover" (more on "why Cover and not something else?" later).</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
In the example above you will also notice, that if we go to slide "Design" and then navigate back, the slide "Analyze" will use a different transition. Since I was trying to create a feeling of moving between letters, I wanted to avoid this: </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcWTpeptnm5T5e6wI0O24NiWVP95AdKKbU4_zUMnMSiR3-r4kNljg1a97mHJsT2_biWKCKWx5jXIPppBYDT2NDGVyg6ofOlrtdHVLxOF0gNn1K9pkvVPO7XVjphyphenhyphen2Rz-jv62j859Ga954/s1600/Animation2.gif" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcWTpeptnm5T5e6wI0O24NiWVP95AdKKbU4_zUMnMSiR3-r4kNljg1a97mHJsT2_biWKCKWx5jXIPppBYDT2NDGVyg6ofOlrtdHVLxOF0gNn1K9pkvVPO7XVjphyphenhyphen2Rz-jv62j859Ga954/s1600/Animation2.gif" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
This is not disastrous, of course, but it does contradict the idea I am trying to communicate and is quite jarring.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
To ensure smooth back navigation, I added a duplicated "Analyze" slide and adjusted the navigation tied to the player buttons:</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://i.imgur.com/2r79AYH.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://i.imgur.com/2r79AYH.png" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Better user experience but more maintenance</td></tr>
</tbody></table>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
As you can see, the only way to get to slide 1.2 is from the title screen. All other navigation paths include slide 1.3. (which is an exact duplicate of slide 1.2 but with a different transition animation).</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
This might not be the best solution for the courses where you would need to update the course content very often (as you will need to make corrections in both copies of the slide), but for a stable content this might be a good workaround which would not require too many triggers/conditions or animation paths.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
As mentioned before, I should note the reasoning behind the "Cover" transition for other slides. Usually, to create an illusion of movement or uninterrupted flow between slides, I would recommend using "Push" transition, particularly if you're not allowing back navigation. However, look at what happens if I use "Push" transition in this case (remember, we want to feel that we're moving from left to right of the "ADDIE" abbreviation):</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKBvoXN4VbqTxfcynUNBKb8oRt1FNzociYgqjGxiAUjx1mIFuib2jc-DLHoAGi5FpWv8Amufc-Je29Ymag9ZcBpInXnfiWsIWgXlxF6RI0xRFkwDDAB5wDzURsGKVxk0QCW2WrqDn6hAA/s1600/Animation3.gif" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKBvoXN4VbqTxfcynUNBKb8oRt1FNzociYgqjGxiAUjx1mIFuib2jc-DLHoAGi5FpWv8Amufc-Je29Ymag9ZcBpInXnfiWsIWgXlxF6RI0xRFkwDDAB5wDzURsGKVxk0QCW2WrqDn6hAA/s1600/Animation3.gif" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
As you can see, this presents two issues. Firstly, the off-slide parts of the letters are cut-off, creating a rather ugly transition effect. Of course, this could be fixed by creating a different design, for example, by placing the letters so that they do not bleed off the left or the right edge of the screen. However, there is a second issue. When you click "Next", the slides are moving to the right, which is also the the direction that the "Next" button is indicating. When you click "Previous", you subconsciously expect that the previous slide will slide into the frame from the left slide, pushing the currently displayed side to the right. However, this doesn't happen. Instead, when you click "Previous", you see the same animation as if you were be navigating forward. I found this highly confusing and I'm confused by my own module, that's usually a sign that I need a different design solution! </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
With this in mind, after trying different combinations of transitions, I settled with "Cover", as it seemed to be the least confusing of all. Of course, there is a chance to create an amazing transition with the help of animation paths and other effects, but this will be my exploration opportunity for the next challenge.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<i>Do you know a better way or have seen examples with great experience for back navigation? Drop me a line in the comments (or Twitter - <a href="https://twitter.com/@GamayunTraining" target="_blank">@GamayunTraining</a>).</i></div>
<div class="separator" style="clear: both; text-align: left;">
<i><br /></i></div>
</div>
Maija P.http://www.blogger.com/profile/03876378321908649349noreply@blogger.com0tag:blogger.com,1999:blog-1271059022930268937.post-54832612386338183072016-07-26T09:17:00.001+02:002017-08-29T13:03:00.908+02:00Confessions of the Portfolio Newbie<div dir="ltr" style="text-align: left;" trbidi="on">
<a href="https://community.articulate.com/articles/tips-for-creating-effective-elearning-portfolios" target="_blank">ELH Challenge 138</a> asked us to answer the questions about our portfolios. As I now <a href="https://community.articulate.com/users/Maija_Perfiljeva" target="_blank">technically have one</a> and I've also had some experience reviewing the work of others, I decided to jump in and record my answers as well. I hope these will be useful or inspirational for those who are just staring or just thinking about creating a portfolio.<br />
<br />
Below you will find short summaries of my answers - you can hear the extended versions by playing the embedded audio tracks.<br />
<br />
<h2 style="text-align: left;">
Tell us a little about yourself. How did you get started in e-learning? How long have you been in the industry?</h2>
<div>
<iframe frameborder="no" height="166" scrolling="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/275566868%3Fsecret_token%3Ds-BcRcY&color=ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false" width="100%"></iframe></div>
<div>
<br /></div>
I graduated with MA in Teaching English as a Foreign Language, worked in the Learning & Development area and gradually grew from an instructional designer + trainer to instructional designer + e-learning developer. In addition I now have my second MA in Online and Distance Learning.<br />
<div>
<br />
<h2 style="text-align: left;">
Tell us about your e-learning portfolio. What types of projects do you include in your portfolio? How often do you update your portfolio?</h2>
<iframe frameborder="no" height="166" scrolling="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/275567029%3Fsecret_token%3Ds-gcYFi&color=ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false" width="100%"></iframe><br />
<br />
I've started creating a portfolio in April this year, and I use <a href="https://community.articulate.com/hubs/e-learning-challenges" target="_blank">ELH Challenges</a> to fill it. I update it almost weekly, or whenever I have another challenge done. At the moment I'm creating a "critical mass" of content and I will take a more critical look at it once I have a clearer goal for my portfolio. I decided to make it a work in progress rather than waiting for the moment when it becomes a perfection.<br />
<br />
<h2 style="text-align: left;">
What do you think makes a good online portfolio? What should and shouldn’t be included in an e-learning portfolio?</h2>
<iframe frameborder="no" height="166" scrolling="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/275567172%3Fsecret_token%3Ds-wGE4t&color=ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false" width="100%"></iframe><br />
<br />
I think about portfolios as resumes, but with less words. For me they represent me and the work that I would want to do, so that's the answer to the question of what should be there. As to what shouldn't - my pet peeve is plagiarism (seems obvious, but sadly, it happens) as well as examples that do not support your image as an instructional designer.<br />
<br />
On the subject of plagiarism, I've created ELH entries based on the work of others, for example, my "<a href="http://bit.ly/29QYT2f" target="_blank">Catman GO</a>" and an <a href="http://bit.ly/1SAR423" target="_blank">App-Style Navigation</a> examples. However, I reworked the originals, as well as clearly credited my sources.<br />
<br /></div>
<div>
<h2 style="text-align: left;">
What do you think clients or companies look for in an e-learning portfolio?</h2>
<iframe frameborder="no" height="166" scrolling="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/275567368%3Fsecret_token%3Ds-l74bG&color=ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false" width="100%"></iframe><br />
<br />
In short - whether the works presented in the portfolio match their needs. Some examples from my past are:<br />
<ul style="text-align: left;">
<li>whether an instructional designer can match the style of the courses that exist in the company.</li>
<li>and/or if they can follow branding guidelines so that their work doesn't contract with the existing course base.</li>
<li>do the portfolio items show instructional design and pedagogical thought.</li>
</ul>
<div>
<br /></div>
<h2 style="text-align: left;">
What platform or technology did you use to build your e-learning portfolio?</h2>
<iframe frameborder="no" height="166" scrolling="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/275567493%3Fsecret_token%3Ds-DGqYU&color=ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false" width="100%"></iframe><br />
<br />
Since I'm still at the beginning of my Project Portfolio, I'm simply using my <a href="https://community.articulate.com/users/MP-ccbf922b-d340-442a-b7e9-013ba0e1e7ea" target="_blank">Articulate Profile</a> as a front page. I host my modules on <a href="https://aws.amazon.com/" target="_blank">AWS</a> and occasionally write in this blog.<br />
<br />
<h2 style="text-align: left;">
What’s the most challenging part about building, designing, or maintaining portfolios?</h2>
<iframe frameborder="no" height="166" scrolling="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/275567947%3Fsecret_token%3Ds-Qa2Qf&color=ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false" width="100%"></iframe><br />
<br />
Starting, by which I mean finding time and fighting perfectionism. It was worth it, though, as I have my portfolio to thank for my new job.<br />
<br />
<h2 style="text-align: left;">
How do you handle confidentiality issues with projects in your portfolio?</h2>
<iframe frameborder="no" height="166" scrolling="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/275568039%3Fsecret_token%3Ds-YgSPE&color=ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false" width="100%"></iframe><br />
<br />
I fill my portfolio with ELH Challenges. Two of my entries are based on the actual trainings (<a href="http://bit.ly/1Wjm2v7" target="_blank">Elevator Speech</a> and <a href="http://bit.ly/264f4RM" target="_blank">Course Personalisation</a>), but these have been reworked beyond recognition, based on what I remember about these projects, as well as filled with my own content.<br />
<br />
<h2 style="text-align: left;">
What are your top three tips for users looking to build their first e-learning portfolio?</h2>
<iframe frameborder="no" height="166" scrolling="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/275568166%3Fsecret_token%3Ds-2KFN4&color=ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false" width="100%"></iframe><br />
<br />
Do it. Particularly if you're bad at self-marketing, portfolio will better showcase your achievements and skills.<br />
<br />
If you feel like you don't have time and energy - gather solid data (not hunches) on where you time goes. Then try reducing the amount of things you hate doing and/or things that do not benefit you directly, or that are not in line with your goals and values. Get "a room of your own" in the sense of free time and use it to build something that will show the world who you are.<br />
<br />
Get good feedback. Ideally, get a mentor or reach out to someone whose opinion you value. Talk to <a href="http://bit.ly/1ZmftqV" target="_blank">me on LinkedIn</a>, if you like.<br />
<br />
<br /></div>
</div>
Maija P.http://www.blogger.com/profile/03876378321908649349noreply@blogger.com0tag:blogger.com,1999:blog-1271059022930268937.post-4411586276907625272016-07-21T17:18:00.000+02:002017-08-29T13:27:01.502+02:00How to Create a Stealth Action Puzzle Game in Storyline 2<div dir="ltr" style="text-align: left;" trbidi="on">
In this post I wanted to describe the design and development process of <a href="http://bit.ly/29QYT2f" target="_blank">my submission</a> for <a href="https://community.articulate.com/articles/classic-elearning-board-games" target="_blank">ELH Challenge 137</a> - a remake of the computer game Hitman Go (if you haven't played the game, consider looking at <a href="https://www.youtube.com/watch?v=6DC6LXRgStw" target="_blank">this gameplay video</a> on YouTtube). I'm going to outline some pre-history of the project, describe my design process and what was going on in my head, what I spent time on, which elements of the submission had what reasoning behind them and why, as well as talk about the actual development of the module in Storyline 2.<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://i.imgur.com/cyzsoRc.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="382" src="https://i.imgur.com/cyzsoRc.png" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">The 3rd level of Catman Go (working title)</td></tr>
</tbody></table>
<br />
<h2 style="text-align: left;">
Background</h2>
I started experimenting with this idea a while ago, aiming not to think about the visual design and focus solely on the technical functionality. I also wanted to try and make a board that would scale or scroll (<a href="http://raisavenue.com/show/games/snl/v02.22/story.html" target="_blank">like in this great example</a> by Rais Omar) and the game piece that could be dragged. If you're curious, <a href="http://bit.ly/29VubRL" target="_blank">click here</a> for a published slide from my original experiment.<br />
<br />
Although I learned a lot and I was happy that I did this experiment, it turned out to be too much work for a "<a href="http://firstround.com/review/Spotifys-Design-Lead-on-Why-Side-Projects-Should-be-Stupid/" target="_blank">stupid side project</a>", particularly when it came to designing an elegant solution for preventing the player to drag the piece straight to the exit. Thus I shelved it and made a mental note to come back to it sometime later. Thankfully, ELH Challenge helped me revisit this project and implement the things I learned in its new version.<br />
<br />
<div>
For the Challenge, since wanted to have a finished product without too many shortcuts, I decided to narrow down the scope of my creativity and cut down the number of features. Specifically, I decided to get rid of dragging and dropping and abandon the idea of a scroll-able board.</div>
<div>
<br /></div>
<h2 style="text-align: left;">
Design </h2>
I started my design process with a research. Essentially, I did a lot of image searching in Google, Dribble and stock image websites, to saturate myself with images of game boards and screen-clipped anything I liked into OneNote.<br />
<br />
With this done, I started designing the layout of the largest level in <a href="https://inkscape.org/en/" target="_blank">Inkscape</a> (a free open-source alternative to Adobe Illustrator). Since I abandoned the idea of a scroll-able board, I needed to know how much real estate will be occupied by the essential elements: fields, pieces and goal tracking.<br />
<br />
With two levels compared, I had an interesting problem of having too much real estate on the first and just right on the last level. Therefore, I needed something to fill the void on the first level without breaking the unity of the overall design. After playing around with various wild ideas, I settled on the design that used the field grid from the last level with the extra fields being clearly unavailable. I achieved the effect by making the fields semi-transparent and removing the gray connectors between them.<br />
<div>
<br /></div>
<blockquote class="tr_bq">
<blockquote class="tr_bq">
As a side-note - while the need to have fields and pieces is quite obvious, you might wonder why goal tracking was important in such a simple game. Well, when playing Hitman Go, it took me approximately 10 or more levels to figure out where I can find the level goals... Since I consider myself a person of a reasonable cognitive ability, and I only had time to create three levels at most, I needed to make sure that my users don't miss the goals. In addition, as you probably know, it's a good instructional design practice to keep the task visible or within an easy reach of the learner.</blockquote>
</blockquote>
<br />
With all the elements created and arranged into the final level layout, I used <a href="http://www.palettable.io/" target="_blank">Palettable</a> to create a color-scheme matching the mood of the game, which I then applied to my design. Well, technically, I came up with 4 color schemes and engaged my family and friends to select the ones they liked.<br />
<br />
The logic behind the final coloring was this:<br />
<ul style="text-align: left;">
<li>Movement (beige) - the fields themselves and circles along the path</li>
<li>Direction (gray) - the connectors between fields</li>
<li>Focus points (black) - the cat itself and the arrows indicating the lines of sight</li>
<li>Goals (white) - mice and goal text</li>
<li>Background (blue)</li>
</ul>
Surprisingly, I spent quite a lot of time choosing fonts for an interaction that has a minimum amount of text. Below is the original font line-up I was choosing from (as well as an example of an alternative color scheme):<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://i.imgur.com/GuDU8fm.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="345" src="https://i.imgur.com/GuDU8fm.png" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Early font candidates</td></tr>
</tbody></table>
<br />
I discarded all the fonts that looked too straightforward/elegant/boring for the context of a game fit for a kid (such as Raleway). Then I discarded the fonts that looked hand-written (e.g. Apple Boy) or were too elaborate, since, in my opinion, they did not agree well with a precise and geometric design of the game board. The final candidates were <a href="http://www.fontfabric.com/perfograma-free-font/" target="_blank">Perfograma</a> and Showcard Gothic. As you can see, <a href="http://www.fontfabric.com/perfograma-free-font/" target="_blank">Perfograma</a> looked cool but still too sophisticated for a game like this - not fun at all:<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://i.imgur.com/j3KA3hh.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="353" src="https://i.imgur.com/j3KA3hh.png" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">I think it wants to spell "No fun allowed"</td></tr>
</tbody></table>
<br />
In comparison, Showcard Gothic was definitely winning the battle, particularly when paired with another font (in this case - GrilledCheese) and a little sad face:<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://i.imgur.com/3Gbrzm2.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="353" src="https://i.imgur.com/3Gbrzm2.png" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Nothing says "fun" as a sad face, right?</td></tr>
</tbody></table>
<br />
<h2 style="text-align: left;">
Development </h2>
To avoid recreating all of the elements in the Storyline, I exported them from Inkscape as .png files instead. While a time-saver for development, it is definitely a time-sink for any future changes. For example, if you use one and the same image for 20 objects, Storyline does not let you replace that image with one click (unlike Captivate or <a href="https://www.scirra.com/construct2" target="_blank">Construct 2</a>, which store images as global assets rather than individual objects) and you have to replace every single object (unless you want to mess around with the published output to replace the images there, or resort to other hacks). Do this only if your art is too complex to be created in Storyline, or if you're really sure that nothing is going to change in terms of colors or shapes.<br />
<br />
Since I designed all my levels in Inkscape, I knew exactly how the end project would look like, therefore I started with the biggest level and worked backwards from it. This way, instead of adding more triggers I had to delete unneeded objects and then delete any triggers with "Unassigned" values in them. The rest of the triggers I simply adjusted to match the demands of the level.<br />
<br />
Let's take a look at how a level is built.<br />
<br />
<h3 style="text-align: left;">
Objects</h3>
Each field is an object with three states, as you can see below:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikVvqUYDu8FILKnKt2eDLD-yQ2k2HOpMkVlo6TKMrQ_ojjVp-HZ9pJ9eLxUttpSvVs76J6NpQvLAF-jCp_uV1JQogl7jvcQoOJcPagJUSMmNojIFG9e8YrG2i7CsD485Vnu0rkBCK2NL4/s1600/button-states.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikVvqUYDu8FILKnKt2eDLD-yQ2k2HOpMkVlo6TKMrQ_ojjVp-HZ9pJ9eLxUttpSvVs76J6NpQvLAF-jCp_uV1JQogl7jvcQoOJcPagJUSMmNojIFG9e8YrG2i7CsD485Vnu0rkBCK2NL4/s1600/button-states.png" /></a></div>
<br />
By default, all fields are set to "Disabled", except the fields into which the player can move. This was done to ensure that the player doesn't just click on the "Exit" field from the start.<br />
<div>
<br /></div>
Every field had a number assigned to it and reflected in its name on the timeline. To keep my sanity and make the development and testing faster, I added a separate layer with the field numbers to serve as an overlay:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidFPa_LZwcl0MRjikIAShy_6j325-oqD0QwCQr7EhJJRDv1SUEWRzGzAIOD8tza9ScflnlVR7Jgr3BwSApljxIsU2mQBx5pozJnJNTmsA6QPK1Z4i5YLSWxYbHdi8kag4hvSwKNX7rnM8/s1600/catman02.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="378" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidFPa_LZwcl0MRjikIAShy_6j325-oqD0QwCQr7EhJJRDv1SUEWRzGzAIOD8tza9ScflnlVR7Jgr3BwSApljxIsU2mQBx5pozJnJNTmsA6QPK1Z4i5YLSWxYbHdi8kag4hvSwKNX7rnM8/s640/catman02.png" width="640" /></a></div>
<br />
I kept the numbers consistent throughout the module, which helped me greatly in reusing the triggers. The only difference is the Exit field, which is always 99, as it had a different set of triggers.<br />
<br />
The mice are separate objects. I thought about adding them to button states, but decided that this would complicate an already complicated system and added them on top of playing fields instead. The mice have the same numbers as the fields they are standing on.<br />
<br />
<h3 style="text-align: left;">
Variables and Triggers</h3>
Technically, the game uses only two types of variables: one variable to track the currently active field and a true/false variable to track the state of each mouse. Here's the list of variables actually used in the module:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsz0NYRivk3asx-uGYtnLOrH4Asti_9ohF-ZD8BlKDU0SXu8dlZ0APVjhkoN2acKtMs4CNqBbyyS0WhewVuR77KqjfdbOksyaVjbanHm5F-UaSYQdLJY1oou5iAQoYW9KIgrwKsyr7uk0/s1600/catman03.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="474" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsz0NYRivk3asx-uGYtnLOrH4Asti_9ohF-ZD8BlKDU0SXu8dlZ0APVjhkoN2acKtMs4CNqBbyyS0WhewVuR77KqjfdbOksyaVjbanHm5F-UaSYQdLJY1oou5iAQoYW9KIgrwKsyr7uk0/s640/catman03.png" width="640" /></a></div>
<br />
The variable "FieldSelected" changes when the player clicks on a field to move the cat. For example, if a player clicks on Field 12, the variable value is set to 12. The same trigger was added to mice as well, as otherwise the player would have to click the areas around the mice. For mice, however, you need to make sure to add a limiting conditions to the trigger, as otherwise players can click on each mice whenever they want:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNtGTUD1u7Cwoso2Y8U3kRXw0a_9Wng09tyMNSZQVgOVuOlMejk5HByVsx59mHLiaKuRgkZZIfxN_Jug9jmBBxsvAN7mtfDaWH3J-YVfsU38JRN9FUFjXdF7GUncQIF8yJw7ZrxocnekA/s1600/catman04.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNtGTUD1u7Cwoso2Y8U3kRXw0a_9Wng09tyMNSZQVgOVuOlMejk5HByVsx59mHLiaKuRgkZZIfxN_Jug9jmBBxsvAN7mtfDaWH3J-YVfsU38JRN9FUFjXdF7GUncQIF8yJw7ZrxocnekA/s1600/catman04.png" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Mouse can be clicked only if the field it's on is enabled / active.</td></tr>
</tbody></table>
<br />
Alternatively, you can set the mice to state "Disabled" and create triggers to enable them, based on the value of "FieldSelected" variable. This way you'd have to make more triggers, but on the upside, the player won't be able to see the "hand" cursor when the cursor hovers over the mice.<br />
<br />
In order to enable/disable all buttons correctly, you need to write two slide triggers for each button:<br />
<ul style="text-align: left;">
<li>Change field state to "Normal", if the value of the "FieldSelected" variable equals to the value of the nearby fields.</li>
<li>Change field state to "Disabled" if the value of "FieldSelected" does NOT equal to the value of any nearby fields. Note that in this case, if you need to have several conditions, the logic should be AND, not OR.</li>
</ul>
For example, in the situation below, Field 13 would only be enabled if "FieldSelected" equals 12, as Field 12 is the only field from which a player can reach field 13:<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkmuKKoPzhcyAFlGzBfQ0_mvukx6Cng2laoSB8rY92xBi0OUP8jccVDv8HokVXTK_LP5Amr86X1oxv-UXkVOh-qp4nGuz6enw1RsRsJSlwAFSxGT_FmmL_fBvKUUyGYqyN0Ih6VKdzI8Q/s1600/catman05.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkmuKKoPzhcyAFlGzBfQ0_mvukx6Cng2laoSB8rY92xBi0OUP8jccVDv8HokVXTK_LP5Amr86X1oxv-UXkVOh-qp4nGuz6enw1RsRsJSlwAFSxGT_FmmL_fBvKUUyGYqyN0Ih6VKdzI8Q/s1600/catman05.png" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Playing fields</td></tr>
</tbody></table>
<br />
Consequently, if "FieldSelected" does not equal 12, Field 13 should be disabled.<br />
<br />
For each mouse, you will need to create three triggers, following this example:<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhty74Kcj198ATHPvtFi5JwnkSykpZOEt6-G6Mxfthg47tauhBrrEYN2seNF6R0kQHZNURVTaJv2-9uYNb-wO4A95DicBfceLT610xdvMGJVenl9UiRLpS3LnzgI77OISLn9leHbcFACE/s1600/catman06.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhty74Kcj198ATHPvtFi5JwnkSykpZOEt6-G6Mxfthg47tauhBrrEYN2seNF6R0kQHZNURVTaJv2-9uYNb-wO4A95DicBfceLT610xdvMGJVenl9UiRLpS3LnzgI77OISLn9leHbcFACE/s1600/catman06.png" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Mouse triggers</td></tr>
</tbody></table>
<br />
Essentially, you need a trigger to interrupt the gameplay if the mouse is not dead when the player moves to a field it's observing (in this case, field 11). Secondly, you need a trigger to "eat" the mouse (variable MouseDead = true), if the player sneaks up on it. Thirdly, you need a trigger to hide the mouse once it's been "eaten" (variable "MouseDead" changed to true).<br />
<br />
In other words, you'll need two triggers per each field to manage its states, one trigger per field to adjust "FieldSelected" variable and three triggers per mouse to interrupt the gameplay or manage the state of the mouse.<br />
<br />
<h3 style="text-align: left;">
Final Touches</h3>
I was listening to <a href="http://mynoise.net/NoiseMachines/catPurrNoiseGenerator.php" target="_blank">Cat Purr Generator</a> while working on this example and I wanted to add some of that ambiance to the game. I didn't want to spend a lot of time on looking for matching royalty-free soundtracks, therefore I decided to limit the audio to occasional "feedback" sounds: a meow when the cat eats a mouse, a hiss in case of failure and a content purr at the end of the level.<br />
<br />
<h3 style="text-align: left;">
Lessons Learned</h3>
<ul style="text-align: left;">
<li>Set a clear and manageable scope for your project.</li>
<li>Design for largest and smallest amount of elements on the screen.</li>
<li>Start development with a very clear goal in mind.</li>
<li>Work from hardest to easiest (may not always be true, but applies in this case).</li>
</ul>
<br />
<br /></div>
Maija P.http://www.blogger.com/profile/03876378321908649349noreply@blogger.com2tag:blogger.com,1999:blog-1271059022930268937.post-83152776043595769512016-07-15T20:29:00.000+02:002017-08-29T13:41:54.019+02:00Creating a Badge Interaction in Storyline 2<div dir="ltr" style="text-align: left;" trbidi="on">
In this post I will walk you through the creation of <a href="http://bit.ly/28R3eC1">this badge interaction</a> in Storyline 2, which was a part of my submission for <a href="https://community.articulate.com/articles/ways-course-designers-personalize-learning-experiences" target="_blank">this ELH Challenge</a>. Please see my <a href="http://bit.ly/28R4h51" target="_blank"><span id="goog_2112995193"></span>previous post</a> for more background and context for this interaction.<br />
<br />
This tutorial is quite detailed, however, it assumes that you are familiar with the interface, tool names, and know how to create variables, objects and states. By the end of this tutorial you will create 4 slides: three slides for badge creation and one for badge overview.<br />
<br />
<h2 style="text-align: left;">
Step 1: Create the first slide</h2>
Create a blank slide with the background color of your choice. Since we will be using animated transition in this interaction, I recommend using a simple solid-color background.<br />
<br />
<h2 style="text-align: left;">
Step 2: Start the badge </h2>
Start by creating a blank badge on the first slide. You can use a "Rounded Rectangle" shape and fill it with the color of your choice or the color of actual badges if such are used within your company. In my example I'm using #F3F3F3 color for both fill and the outline.<br />
<br />
Add the text box with the question "What's your avatar?" Adjust the text size and properties as you desire. In this example, I'm using Open Sans, size 44, text color #C45500 and the text box has the same width as the badge.<br />
<br />
Make sure that your badge shape extends slightly beyond the slide on the bottom. It doesn't matter how far it goes, as long as it extends beyond slide limits:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8SmVmgXjIo6uXIPrxERPvVOc7KqExjDcBmKMrmEq6qtyWTVCHO91q9XNrrEeejSi0WyY0xLuMGI9w4H4e48yP2k5ITFgP0ZdnnbVvxRcW6fnmB6Sz-jh7049heCFv_CTJ8oq6ODf784w/s1600/badge01.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="336" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8SmVmgXjIo6uXIPrxERPvVOc7KqExjDcBmKMrmEq6qtyWTVCHO91q9XNrrEeejSi0WyY0xLuMGI9w4H4e48yP2k5ITFgP0ZdnnbVvxRcW6fnmB6Sz-jh7049heCFv_CTJ8oq6ODf784w/s400/badge01.png" width="400" /></a></div>
<br />
While you can adjust the image to the bottom of the slide, so nothing spills over, but I prefer making shapes larger than the slide to make sure that there are no gaps or surprises later on when we'll add the slide transition.<br />
<br />
<h3 style="text-align: left;">
Optional detail</h3>
To create a lanyard hole in your badge:<br />
<ul style="text-align: left;">
<li>Draw a small rounded rectangle shape and adjust the rounded corners to maximum.</li>
<li>Fill the shape with the background color (use Eyedropper if you didn't save the color in the palette).</li>
<li>Add an inner shadow to the shape. In this example I'm using "inside top" shadow, as I'm assuming that my light source is at the top of the screen. </li>
</ul>
<br /><h2 style="text-align: left;">
Step 3: Copy and adjust the badge</h2>
Duplicate Slide 1 to create Slide 2. Delete the lanyard hole if you created one and change the question text to "What's your name?". Then adjust the height of the badge so that it extends beyond the slide borders on both top and bottom:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFCZSR0TWPb8ZsZ0awaSp1d2onNeTdJEOb9uVrOIhLoIwaSBMCLJqZ0gzK7RqjnNOSXi6brEG5ZAXrAhnoEhuSbKZAhyIgjssnjvehUQ4eyNOvnVxa8mnhPsv7UGNtCCtlvhN6gObmjSE/s1600/badge03.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="354" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFCZSR0TWPb8ZsZ0awaSp1d2onNeTdJEOb9uVrOIhLoIwaSBMCLJqZ0gzK7RqjnNOSXi6brEG5ZAXrAhnoEhuSbKZAhyIgjssnjvehUQ4eyNOvnVxa8mnhPsv7UGNtCCtlvhN6gObmjSE/s400/badge03.png" width="400" /></a></div>
<br />
Don't forget to adjust the position of the text box. For example, you can use these position settings:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAKEolKS0Kv7GiHKE-6qsWfrgEDZ6vUS2WyZ0KtbrHJtwbM-J4boppdAldGe4xuPdH07nDeLcWmzsO2eN7EAnzKi03TA98BNktD5bAEr6GOQy-LT9IuRXbaauzX8GlFbSbYx9WrvwvHXI/s1600/badge04.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAKEolKS0Kv7GiHKE-6qsWfrgEDZ6vUS2WyZ0KtbrHJtwbM-J4boppdAldGe4xuPdH07nDeLcWmzsO2eN7EAnzKi03TA98BNktD5bAEr6GOQy-LT9IuRXbaauzX8GlFbSbYx9WrvwvHXI/s1600/badge04.png" /></a></div>
<br />
When you're done, duplicate Slide 2 to create Slide 3. All you need to do here is to change the text of the question and drag the bottom of the badge up so that that the shape extends beyond the top slide border only:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigks9wEKNE9VosmjS6-POwXiPe5Tv9fiGa4Lwp7-P658grZzUz2p9EmrJvXqzYV3AeNI0mACcvjpCFuQvep9gNsYH9OHZIP1KHBwb993Q_XoMu9vHg9tOy2p63h4ySF50hwr23VDQLVb4/s1600/badge05.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="312" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigks9wEKNE9VosmjS6-POwXiPe5Tv9fiGa4Lwp7-P658grZzUz2p9EmrJvXqzYV3AeNI0mACcvjpCFuQvep9gNsYH9OHZIP1KHBwb993Q_XoMu9vHg9tOy2p63h4ySF50hwr23VDQLVb4/s400/badge05.png" width="400" /></a></div>
<br />
<h2 style="text-align: left;">
Step 4: Set up transitions</h2>
Select all three slides and add the Push / From Bottom transition to them (note that if you're working on a real project, you may want to change the slide transition for the very first slide, depending on what type of slide or interaction precedes it). This way you will achieve the effect of the badge moving/scrolling as if before the user's eyes.<br />
<br />
You can preview the project at this stage to check if everything works well. The transition should be smooth and the badge should not "jump":<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOnIb0EpX2olAE-SqZKH0u3YoLH15N0uMGSRQZ_evD94HcOnBCCrkyUI8HZsY5FNVWimZeyElMwXs-qt_8_oTSw-M_fendoW1gKYKVW-Ba6Qik9qrTabH_pmDVddk3DSU34uxo_OUVH0g/s1600/badge_animated.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="297" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOnIb0EpX2olAE-SqZKH0u3YoLH15N0uMGSRQZ_evD94HcOnBCCrkyUI8HZsY5FNVWimZeyElMwXs-qt_8_oTSw-M_fendoW1gKYKVW-Ba6Qik9qrTabH_pmDVddk3DSU34uxo_OUVH0g/s400/badge_animated.gif" width="400" /></a></div>
<br />
<h2 style="text-align: left;">
Step 5: Photo selector - create objects</h2>
Go back to Slide 1 and create the following objects (feel free to adjust these to your needs or design):<br />
<ul style="text-align: left;">
<li>Background for the avatar.</li>
<li>Two buttons or shapes for paging between the avatars. Note that both of them should have a "Disabled" state. </li>
<li>Button to save the avatar.</li>
<li>An avatar with as many different states as you like. </li>
</ul>
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRJYpROqG3e0MBYXd84uAE96U1x3vatEPsd-tSbdcAYCPRRrR3eUhqTtIBjB6fJhyphenhyphen-Ypr5OBlFOArNX7P-rjX2Ya5wiETHX42qsEP9k-tbUMy1zdb-TFXSLdFXYnUszCF4e4slfG4PRI0/s1600/badge06.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRJYpROqG3e0MBYXd84uAE96U1x3vatEPsd-tSbdcAYCPRRrR3eUhqTtIBjB6fJhyphenhyphen-Ypr5OBlFOArNX7P-rjX2Ya5wiETHX42qsEP9k-tbUMy1zdb-TFXSLdFXYnUszCF4e4slfG4PRI0/s1600/badge06.png" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Objects on Slide 1</td></tr>
</tbody></table>
<br />
For making your life easier later on, I recommend naming the states with numbers, starting with 0. As a result, you will have a "normal" state, state 0, which is a duplicate of "Normal" and as many additional states as you need:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiM28Gp_VhvB0sqico9HbkSldwBUY0XUheKo5ygzKI2ctMSpERKm7B8vvpgxuDBG4gJkZ4CubupY-EqKu4GwqplwEQxWKAlc2sW-9jpdtosZ6RR6XFgrtgH2v6Sfv3OZbiWPPkI7cdVnJE/s1600/badge07.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiM28Gp_VhvB0sqico9HbkSldwBUY0XUheKo5ygzKI2ctMSpERKm7B8vvpgxuDBG4gJkZ4CubupY-EqKu4GwqplwEQxWKAlc2sW-9jpdtosZ6RR6XFgrtgH2v6Sfv3OZbiWPPkI7cdVnJE/s1600/badge07.png" /></a></div>
<br />
Why? This is because of the triggers and variables we're going to use later as you will need to match the state names with numerical variable values and matching state names will help you avoid confusion. If you feel that what I just said doesn't make sense, don't worry - just try creating and naming the avatar states as you see on the screenshot above and you'll see the system behind this madness later, I promise! For the rest of the tutorial I will assume that the amount and names of your avatar states match the ones on the screenshot.<br />
<br />
With the avatar states created, set its initial state to "0".<br />
<blockquote class="tr_bq">
<blockquote class="tr_bq">
If you're wondering why I am using avatar states rather than creating separate objects - in my opinion, states reduce visual clutter on the slide and often reduce the need for triggers. When a trigger changes an object's state, all other states become invisible, without any additional efforts on your side. If instead of 10 states you have 10 objects, you will most likely have to write either more or more complex triggers to manage their visibility and states. </blockquote>
</blockquote>
<br />
<h2 style="text-align: left;">
Step 6: Photo selector - create variables</h2>
With your objects created and arranged, create the following numerical variables:<br />
<ul style="text-align: left;">
<li><b>ClickCounter</b> (default value 0): to enable/disable avatar selection arrows and help Storyline understand which avatar state it should be displaying.</li>
<li><b>AvatarSelected</b> (default value 0): to store the information about the selected avatar for further use throughout the course.</li>
</ul>
<br /><h2 style="text-align: left;">
Step 7: Photo selector - create triggers</h2>
<div>
By now we have prepared all our objects and variables. Now we're going to bring them to life. Our end goal for the photo selector is to ensure that the user can page back and forth between the avatars and that the avatar selection arrows become disabled when the user reaches the end of the avatar selection. </div>
<br />
In case you haven't done so, name one of the buttons "PhotoNext" and the other "PhotoBack" to avoid confusion. Change the initial state of PhotoBack to "Disabled".<br />
<br />
Create the following trigger for PhotoNext:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiO2AMk8I2xpFJC-pdDp__iUaxLcPSL_wvs4pV8cxBTcOz9MDQxOFpZCT2Xs-SNPnQ7dnv6uxJGhThoU81jXfSsYjGm9AuQle-0G4LZNNPBvXTuDmwNPFcMYCTGwJJj_kZsfBqCGmGiKrA/s1600/badge08.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiO2AMk8I2xpFJC-pdDp__iUaxLcPSL_wvs4pV8cxBTcOz9MDQxOFpZCT2Xs-SNPnQ7dnv6uxJGhThoU81jXfSsYjGm9AuQle-0G4LZNNPBvXTuDmwNPFcMYCTGwJJj_kZsfBqCGmGiKrA/s1600/badge08.png" /></a></div>
<br />
And a similar trigger for PhotoBack, except in this case we will be <i>reducing </i>the ClickCounter value by one:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhknlClj5-1pzlbAviTE5swdSnJ1l-gy1id1RGsiPBjVOGaOiOvj93MSv2r8LYPN9yaBP4Vk514kdPh1N08Pmjm86CE8zBfb1TkmhRBLP0aqGl_023bcGF2ddgc1nI_M5vo3WYxQr4SLF0/s1600/badge09.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhknlClj5-1pzlbAviTE5swdSnJ1l-gy1id1RGsiPBjVOGaOiOvj93MSv2r8LYPN9yaBP4Vk514kdPh1N08Pmjm86CE8zBfb1TkmhRBLP0aqGl_023bcGF2ddgc1nI_M5vo3WYxQr4SLF0/s1600/badge09.png" /></a></div>
<br />
<ul style="text-align: left;">
</ul>
This way we can tell the course what the user is doing with the buttons and which avatar should be displayed.<br />
<br />
Next, let's add a trigger to change the state of the avatar based on the value of the ClickCounter variable - this is where avatar state naming becomes handy!<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVGpUbkmPoQ0ZMzUcjSBhJw-xPlYaUKFhhRPbSspcMQAcYuxK60yUhPxmFdqqO6SHrwehtUxYMK3Evo4caa5FhoAp0qm2zrRUia1dkTjsrE0WdjBqn5prJJZptEbVqyRo5qVmiboHstl4/s1600/badge10.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVGpUbkmPoQ0ZMzUcjSBhJw-xPlYaUKFhhRPbSspcMQAcYuxK60yUhPxmFdqqO6SHrwehtUxYMK3Evo4caa5FhoAp0qm2zrRUia1dkTjsrE0WdjBqn5prJJZptEbVqyRo5qVmiboHstl4/s1600/badge10.png" /></a></div>
<br />
Repeat this for each state of the avatar you have, except state Normal which we don't count in this case:<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAQSsqu5UP20BI2GbxFYJaF6DRY3MVBLf0oQJ0iA4Z3rawG0kYy44BST76f9HLOOFQBIBHRbJ5wzxyLH9wpm5C-WDUlmNL-UzwL3e3v5VJua4nbvo2xk-x-j7TQGCVjjAnaK571ZYhfBA/s1600/badge11.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAQSsqu5UP20BI2GbxFYJaF6DRY3MVBLf0oQJ0iA4Z3rawG0kYy44BST76f9HLOOFQBIBHRbJ5wzxyLH9wpm5C-WDUlmNL-UzwL3e3v5VJua4nbvo2xk-x-j7TQGCVjjAnaK571ZYhfBA/s1600/badge11.png" /></a></div>
<br />
As you've probably noticed, the creation of triggers is easy because the state names are identical to the values of clicks. In other words, if the ClickValue is 5, Storyline should display avatar state 5, if the value is 3 - state 3 and so on. This way you can have as many states as you want without losing track of what should happen. Way better than naming your states "Male01" or "FemaleYoung-10-happy".<br />
<br />
At this stage you can preview the slide to admire your work. If everything worked well, you will be able to flip through the avatars, but you won't be able to go back, since we set the PhotoBack button to appear disabled from the start and didn't create any triggers to enable it. You'll also notice that there's no limit to how much you can click PhotoNext button. Let's correct that.<br />
<br />
<h2 style="text-align: left;">
Step 8: Photo selector - create intelligent buttons</h2>
<div>
In essence, we need to enable PhotoBack button as soon as the user navigates away from Avatar 0 but disable it back when the user returns to Avatar 0. Similarly, we need to disable PhotoNext button once the user has seen the last avatar in the series and enable it once the user goes away from the last avatar. </div>
<div>
<br /></div>
<div>
Let's create triggers for PhotoBack button. This trigger enables it: </div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgZ3YHQetic7aXxGB3TWgljsF1TqgwWqf37XrRz8MlORuJtJCmcSawHS1PeIXjJJR-ESWnR8pRyOQi-ulw9TY3CeghLd4_BHSRX9mfGCcL1sEBfPdD0Nfgsnse910aYy4396FGy-ClawY/s1600/badge12.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgZ3YHQetic7aXxGB3TWgljsF1TqgwWqf37XrRz8MlORuJtJCmcSawHS1PeIXjJJR-ESWnR8pRyOQi-ulw9TY3CeghLd4_BHSRX9mfGCcL1sEBfPdD0Nfgsnse910aYy4396FGy-ClawY/s1600/badge12.png" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div>
And this trigger will disables it again:</div>
<div>
<br /></div>
<div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2dH90vwQF0NrSLRtzKFVnd6rhSyDGTN2wyvDhDj0zcDoCtAr6tLLjezEPu-dqWRGnvw_ict95r1yCUYVhJ0ub6eSc0DG-RnMS6nyjjfzhZx8vn_OMQeYWZ5Zzzf8Sea7bt8wAotA1Z54/s1600/badge13.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2dH90vwQF0NrSLRtzKFVnd6rhSyDGTN2wyvDhDj0zcDoCtAr6tLLjezEPu-dqWRGnvw_ict95r1yCUYVhJ0ub6eSc0DG-RnMS6nyjjfzhZx8vn_OMQeYWZ5Zzzf8Sea7bt8wAotA1Z54/s1600/badge13.png" /></a></div>
</div>
<div>
<br /></div>
<div>
As a small challenge for you, I won't include instructions for creating triggers for enabling/disabling PhotoNext button, but I can tell you that they are pretty similar.</div>
<div>
<br /></div>
<h2 style="text-align: left;">
Step 9: Photo selector - sanity check</h2>
<div>
Create a text box anywhere on the slide and add text %ClickCounter% to it. Alternatively, you can use the option Insert / Reference. Don't worry about formatting or position, this is just a way to verify that the value of clicks matches the state of the avatar. </div>
<div>
<br /></div>
<div>
Preview the slide, click the back/next button, check that the ClickCounter variable adjusts properly and that the avatar states and the button behaviour match the variable values: </div>
<div>
<br /></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFvPmOITEzgcIyXbqWsyfDEaP36kMIA3BEKG1FlsYh0fFkn79Bx-JwYW-kLNNLaQEfZCB1BBJ9MV_9smepirCDMcXhP8QZhoQwnAQuNEdawI6whsBPsx9BoqwRoFqTPzJERjYKmpRGDGc/s1600/badge_animated2.gif" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFvPmOITEzgcIyXbqWsyfDEaP36kMIA3BEKG1FlsYh0fFkn79Bx-JwYW-kLNNLaQEfZCB1BBJ9MV_9smepirCDMcXhP8QZhoQwnAQuNEdawI6whsBPsx9BoqwRoFqTPzJERjYKmpRGDGc/s1600/badge_animated2.gif" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Photo Selector in action (note the changing variable value)</td></tr>
</tbody></table>
<div>
<br /></div>
<div>
</div>
<div>
If all is well, delete the text box with the variable reference. </div>
<div>
<br /></div>
<div>
<h2 style="text-align: left;">
Step 10: Photo selector - saving information</h2>
</div>
<div>
Finally, we need to make sure that the course can remember which avatar did the user choose. For this you will need to create a very simple trigger like this: </div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoSPiRobmKrtTDAI02FYP21zLj93LgY006SkmNBVAB5fOrwDiwQkAlpD8vdZbe8Tzovbo4rXyDOowc1WAOTn6hI2N4_v8esm7lpfrclxuGdl0MjPBak_KXiwRDh6X0JzmA_GY6aCbuz6w/s1600/badge14.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoSPiRobmKrtTDAI02FYP21zLj93LgY006SkmNBVAB5fOrwDiwQkAlpD8vdZbe8Tzovbo4rXyDOowc1WAOTn6hI2N4_v8esm7lpfrclxuGdl0MjPBak_KXiwRDh6X0JzmA_GY6aCbuz6w/s1600/badge14.png" /></a></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
In other words, if current avatar's state is 0, the value of AvatarSelected should be set to 0 when the user clicks "Save" button. If avatar's state is 1, the value should be 1, and so forth. Again, numerical state numbers are helpful here. </div>
<div>
<br /></div>
<div>
Duplicate the trigger and adjust variable values/state names until you've covered all avatar states. </div>
<div>
<br /></div>
<div>
Congratulations, you've created the most complicate part of this interaction! </div>
<div>
<br /></div>
<h2 style="text-align: left;">
Step 11: Name field</h2>
<div>
On Slide 2 we will collect user's name to use it throughout the module. First, you will need to create at least the following objects:</div>
<div>
<ul style="text-align: left;">
<li>Question (you should already have the text box with the big orange text)</li>
<li>Text Entry field (you can find it in Insert > Controls menu)</li>
<li>"Save" button or shape</li>
</ul>
</div>
<div>
You can, of course, add more elements. </div>
<div>
<br /></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUPuzxhLATp3kQvG8O5tWkPqYTlLkV7PG1YkGL6rGwcAeb0EvTd4OI_FyIYIyq5vFNxokKBcEJfMlxjzRULUgGwWbrjqg6SyhOVPz5G1cgSTdKmdhowvd0cwz-n-BW4K8i8Mjlwdmqi0Y/s1600/badge15.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUPuzxhLATp3kQvG8O5tWkPqYTlLkV7PG1YkGL6rGwcAeb0EvTd4OI_FyIYIyq5vFNxokKBcEJfMlxjzRULUgGwWbrjqg6SyhOVPz5G1cgSTdKmdhowvd0cwz-n-BW4K8i8Mjlwdmqi0Y/s1600/badge15.png" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Objects on Slide 2</td></tr>
</tbody></table>
<div>
<br /></div>
<div>
You have probably noticed, that when you create a new Text Entry field, Storyline automatically creates a text variable called TextEntry, as well as the trigger that changes its value based on what the user typed into the text entry box: </div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjw4GSZtETKFwhmzj8t8gYrA-A1Dm_hPdaO_Od9ECWGmQBcG4cpwUBjQgaQYStReG6HQcVgD1WJslvCRW-MIGSZK45KuxvgoMyl05LMZV3caRoa8R63IwCM52MMW-1ddOkQ9r6zcZwocAQ/s1600/badge16.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjw4GSZtETKFwhmzj8t8gYrA-A1Dm_hPdaO_Od9ECWGmQBcG4cpwUBjQgaQYStReG6HQcVgD1WJslvCRW-MIGSZK45KuxvgoMyl05LMZV3caRoa8R63IwCM52MMW-1ddOkQ9r6zcZwocAQ/s1600/badge16.png" /></a></div>
<div>
<br /></div>
<div>
To avoid confusion, you can rename TextEntry variable into something more memorable. In this tutorial I'll assume that you renamed it to Name. </div>
<div>
<br /></div>
<div>
Technically, once you've done that, there's not a lot left to do on this slide, since the trigger for adjusting the variable has been created automatically and you don't have to do anything else. However, in this example, I wanted to prevent users from not entering anything. With this in mind, I added two triggers to the "Save" button:</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqp-FTMmd32uZ6kOVGzB2jKetXNyAna9XGHXYfKs5qTG4XCXOy3mPa5u8eNOopfN9JxfXPNYskYZ6_klInVyiTdbqxG68Qiw26Q6u9IvcFBpxuOeFhKThIbwmhYwvy4WpeLd77VgktOGE/s1600/badge17.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqp-FTMmd32uZ6kOVGzB2jKetXNyAna9XGHXYfKs5qTG4XCXOy3mPa5u8eNOopfN9JxfXPNYskYZ6_klInVyiTdbqxG68Qiw26Q6u9IvcFBpxuOeFhKThIbwmhYwvy4WpeLd77VgktOGE/s1600/badge17.png" /></a></div>
<div>
<br /></div>
<div>
This way the user cannot proceed until they have entered at least something into the text entry field. My objective here was to prevent blank values due to attention slips. While the name of the learner is not critical to this module, I didn't want to have any blank values as these would look like errors or strange issues in the e-learning. I didn't worry about gibberish entries (e.g. Ahkjhakshj) as that would be the user's choice. A blank value, however, could be more confusing, as well as not a user's choice. For instance, let's say a user wanted to enter their name, but got distracted. When they came back, they had to hurry up, so they forgot that they didn't enter any name and just clicked "Save". In this situation, having a reminder that the name hasn't been entered may be quite helpful.<br />
</div>
<h3 style="text-align: left;">
</h3>
<h2 style="text-align: left;">
Step 12: Department selector</h2>
<div>
In the real project this interaction is based on, the branching and flow of the slides as well as the type of content presented to the user depended on the nature of their work. Therefore, I needed to gather some information about what my users do. You can use the same idea to display content to users based on their seniority (New Hire vs Veteran employee), position in the department or company (e.g. Junior Associate vs Senior Associate), or location (e.g. Berlin vs Frankfurt; USA vs UK) and so on. </div>
<div>
<br /></div>
<div>
In this example, I have only three mutually exclusive options available for selection: phone, e-mail, chat. To recreate the same slide, you will need:</div>
<div>
<ul style="text-align: left;">
<li>a question (which you should have)</li>
<li>a radio button for each available choice</li>
<li>"Save" button or shape</li>
</ul>
</div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfw8EVbulvvHAS7mn9gkrDrg3o689IKo1rcL9USyDZdSswodEhiw1tmZkILlCf5GBJI4nRo4_4JhXWpEWUlluZ70vY_5fotKmmwaHinSDG37Zs-aKtLJIjyThCI6ecBlGwEmbUsQwCBD8/s1600/badge19.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfw8EVbulvvHAS7mn9gkrDrg3o689IKo1rcL9USyDZdSswodEhiw1tmZkILlCf5GBJI4nRo4_4JhXWpEWUlluZ70vY_5fotKmmwaHinSDG37Zs-aKtLJIjyThCI6ecBlGwEmbUsQwCBD8/s1600/badge19.png" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Objects on Slide 3</td></tr>
</tbody></table>
<div>
<br /></div>
<div>
Once you have created the radio buttons, add them to a <a href="https://community.articulate.com/series/4/articles/adding-button-sets-in-articulate-storyline-2" target="_blank">Button Set</a>. This way you will need to write less triggers. </div>
<div>
<br /></div>
<div>
Then create the following True/False variables, all with the default value of "False":</div>
<div>
<ul style="text-align: left;">
<li>Chat</li>
<li>Phone</li>
<li>Email </li>
</ul>
</div>
<div>
Of course, you can match the names of the variables to the choices you have created.</div>
<div>
<br /></div>
<div>
For every radio button you've created, add two triggers. One of the triggers should adjust the matching variable to the value "True" if the button's state is selected. Second trigger should adjust the variable value to "False" if the button's state is not selected. For example:</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixvwioXki8jVJihe8etr0UbRHWFLTL61lcVsW4I16WUhDcvWbc0CD6nbfDqXJ0raqtWvi7VDyKU128OKogNpyas40NhGHVxbm1lWr21RwLMUQsEkkKMs0bDjAF0SD-Z1LIyOZ0EDwBzfA/s1600/badge18.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixvwioXki8jVJihe8etr0UbRHWFLTL61lcVsW4I16WUhDcvWbc0CD6nbfDqXJ0raqtWvi7VDyKU128OKogNpyas40NhGHVxbm1lWr21RwLMUQsEkkKMs0bDjAF0SD-Z1LIyOZ0EDwBzfA/s1600/badge18.png" /></a></div>
<div>
<br /></div>
<div>
Since the radio buttons are in one Button Set, their states will automatically change to normal one another radio button is selected and the variable values will be adjusted without any additional triggers.<br />
<br /></div>
<h2 style="text-align: left;">
Step 13: Prevent user errors</h2>
<div>
Since navigation and the slides displayed depended on the user's input at this stage, it was crucial for me to ensure that the user does not leave the slide without making a choice. </div>
<div>
<br /></div>
<div>
To prevent the users from navigating away from this slide, you can add two simple triggers to the "Save" button. One to allow the users to move to next slide if at least one of the radio buttons is selected. The other trigger should show a warning (in this example - a layer with a tooltip message) in case none of the radio buttons is selected: </div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqIp2SjMlV9qO1PoZH-TG4s8wI6xF1VxiQsL3W6bR7HBgIFZvey7VjDYPhnLc6nba4323No-KOqT66-kSG3O7V7JR8aSqX3Q3aSGWZDok2UuV4f62U5bhM6yd0zSycoG-bkj8KwaBKyqo/s1600/badge20.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqIp2SjMlV9qO1PoZH-TG4s8wI6xF1VxiQsL3W6bR7HBgIFZvey7VjDYPhnLc6nba4323No-KOqT66-kSG3O7V7JR8aSqX3Q3aSGWZDok2UuV4f62U5bhM6yd0zSycoG-bkj8KwaBKyqo/s1600/badge20.png" /></a></div>
<div>
<br /></div>
<h2 style="text-align: left;">
Step 14: Badge overview</h2>
<div>
The final overview slide has very easy triggers. You simply need to adjust the states of the avatar and radio buttons based on the variable values created earlier. You will also need to include a reference to the "Name" variable to display learner's name. To save time, you can copy the avatar with all the states from Slide 1.</div>
<div>
<br /></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSOwq2CgThnfmd8OuEQWQ1wwHhSN9Sdb8Oana8enPPgoLaEHkkzIu0QCfv4wOH4daqPIGPsoBHWxrDOnI5HjZuan61mR0qcOz2077U9GzXzNlTkj7L-zTHDH-bc63_Hm9bMwbdaOU7z60/s1600/badge21.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSOwq2CgThnfmd8OuEQWQ1wwHhSN9Sdb8Oana8enPPgoLaEHkkzIu0QCfv4wOH4daqPIGPsoBHWxrDOnI5HjZuan61mR0qcOz2077U9GzXzNlTkj7L-zTHDH-bc63_Hm9bMwbdaOU7z60/s1600/badge21.png" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Objects on Slide 4</td></tr>
</tbody></table>
<div>
<br /></div>
<div>
First, create the triggers to adjust avatar state when the timeline starts, based on the value of variable AvatarSelected: </div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9s5qJMSuNKE15ztdpw0ZAHaZA1F_K6s7Npa53M0WhPe4kZKhw_cx_KwYATyORwli1CGeZsDgZBM07l1De6J7c9YVVXsXSPbhk_rRLydI2NWnOEjWlNqRtGAsGg9mGxGUQKMr2nAKNs1w/s1600/badge22.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9s5qJMSuNKE15ztdpw0ZAHaZA1F_K6s7Npa53M0WhPe4kZKhw_cx_KwYATyORwli1CGeZsDgZBM07l1De6J7c9YVVXsXSPbhk_rRLydI2NWnOEjWlNqRtGAsGg9mGxGUQKMr2nAKNs1w/s1600/badge22.png" /></a></div>
<div>
<br /></div>
<div>
Again, easy state names become quite handy in here, as you will need to have a trigger for each avatar state. </div>
<blockquote class="tr_bq">
You will notice that sometimes avatars take time to change their state at the slide timeline start and as a result for a second you see the wrong avatar. To work around this issue, I try to add a short (less than a second) "Fade" animation to the avatars, so that the course has a bit more time to change their states. </blockquote>
<div>
Finally, you will need to create the triggers to adjust the state of radio buttons to either "Selected" or "Disabled" based on the value of the respective variables. For example:</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3eSAYyu7zEiTBBhKF1g5BechJBTIIHIt0nzw1GSmbTLc924kvKKbduM8el53HDFvDkoIvqi6EGe_Y9qxjU8ST1NaVm7ZNFxj9Bp5z_th__ba74NHpMTtXcVvvY5t3QklHim5G7ukAOBo/s1600/badge23.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3eSAYyu7zEiTBBhKF1g5BechJBTIIHIt0nzw1GSmbTLc924kvKKbduM8el53HDFvDkoIvqi6EGe_Y9qxjU8ST1NaVm7ZNFxj9Bp5z_th__ba74NHpMTtXcVvvY5t3QklHim5G7ukAOBo/s1600/badge23.png" /></a></div>
<div>
<br /></div>
<div>
Respectively, you should create a trigger to adjust the radio button state to "Disabled" if the variable value equals to False. Although you can skip this part, I would recommend disabling the buttons to show the users that no changes are possible on this slide and that they really have to go back to make corrections. </div>
<div>
<br /></div>
<h2 style="text-align: left;">
Congratulations, you've created the badge interaction!</h2>
<div>
Is there anything missing in this tutorial? Do you have questions? Don't hesitate to let me know in the comments. </div>
<div>
<br /></div>
</div>
Maija P.http://www.blogger.com/profile/03876378321908649349noreply@blogger.com0tag:blogger.com,1999:blog-1271059022930268937.post-59221159351905914992016-07-02T16:36:00.001+02:002017-08-29T13:32:38.384+02:00"Hand-Drawn" Images in PowerPoint<div dir="ltr" style="text-align: left;" trbidi="on">
Everybody loves hand-drawn assets, but not everyone can draw that well, right? Nope. In fact, with PowerPoint you can easily start making hand-drawn images like a pro. You don't even need to have mad mouse skills or any special skills other than a little bit of patience.<br />
<br />
The trick is to use standard shapes and then edit points to make them slightly uneven and imperfect. Like this:<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://i.imgur.com/bXfKo3s.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://i.imgur.com/bXfKo3s.png" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Hand-edited from a standard speech bubble. </td></tr>
</tbody></table>
<br />
The image above was created by using an "oval callout" and a "curve" shapes. Take a look at the whole process (it doesn't take long) below:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<iframe allowfullscreen="" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/KcZIi22h-90/0.jpg" frameborder="0" height="266" src="https://www.youtube.com/embed/KcZIi22h-90?feature=player_embedded" width="320"></iframe></div>
<br />
<br />
Some of the points I'd highlight as keys to your success:<br />
<br />
<ul style="text-align: left;">
<li>Increase <b>line thickness</b>. In this case I used 6 to 7 points line thickness. This way the lines look bulkier and feel like they've been drawn with a marker. </li>
<li>In Line properties, set "<b>Cap type</b>" (the way the end of the line looks) "Join type" (the way the outside corners of your shape look like) to "<b>round</b>". This will add some smoothness to your shape.</li>
<li>Since it's practically impossible to make a long straight line by hand, make sure to<b> make any straight lines uneven</b> - even a little bit helps (at the end of the post I've added an image of a "hand-drawn" iPhone for your inspiration).</li>
<li><b>Be creative</b> when you "mess up" the shape. Don't hesitate to create copies in different stages of editing and then choose the one that you feel is best. For instance, you'll notice that in the images my speech bubble is even more rounded and uneven than in the video. After recording the video, I didn't particularly like the sharpness of the tail and softened/curved it a bit more.</li>
<li>Quite obvious, but don't forget to <b>use a font that looks like handwriting</b> and matches the style of your drawing. In the image below I've provided two examples of well-matched and not so well-matched fonts:</li>
</ul>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://i.imgur.com/jRdSvjC.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://i.imgur.com/jRdSvjC.png" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Good and bad.</td></tr>
</tbody></table>
<div>
<br />
The font examples on the rights are too calligraphic, even and elegant, particularly the top-right example, therefore, they do not match the hand-drawn style of the speech bubble. The fonts on the left are a better match in this case.<br />
<br />
In the video I'm using the font created from my own handwriting, which I made using http://www.myscriptfont.com/ It was suprisingly easy and took me only two attempts. The end results isn't perfect as kerning can be rather weird sometimes, but for informal projects it works great.</div>
<div>
<br />
Overall, it's remarkably easy to create "hand-drawn" shapes in PowerPoint - you are limited only by your imagination. In addition, you can try working with white outlines of dark background as in the example below:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://i.imgur.com/lQiEVuS.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://i.imgur.com/lQiEVuS.png" /></a></div>
<br />
If you try this out and feel that you're not very good at it - don't despair, as the quiality comes with practice. You can study existing hand-drawn drawings, create your own sketches and experiment in PowerPoint to become better.<br />
<br /></div>
</div>
Maija P.http://www.blogger.com/profile/03876378321908649349noreply@blogger.com2tag:blogger.com,1999:blog-1271059022930268937.post-61242678953676976622016-06-27T21:05:00.000+02:002017-08-29T13:31:07.097+02:006 ProTips for Using PowerPoint as a Vector Graphics Editor<div dir="ltr" style="text-align: left;" trbidi="on">
PowerPoint has a bad rep. When I mention that PowerPoint (particularly since version 2013) is my go-to tool for creating quick and easy graphic assets for e-learning and presentations, I get weird looks. Of course, PowerPoint is not the most comfortable tool for vector editing, but it's my go-to tool for simple assets and today I would like to share some of tips I've learned and which may be useful for you if you'd like to improve you "powerpointing" skills, particularly if you're not a learned designer (I'm not). <div class="separator" style="clear: both;">
<br /></div>
<h3 style="clear: both; text-align: left;">
ProTip 1: Start Simple</h3>
<div class="separator" style="clear: both;">
When I started using PowerPoint to create images, after making a couple of laptops and computer monitors, I decided that I'm going to do my own portrait. That's what happened:</div>
<div class="separator" style="clear: both;">
<br /></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgmqvT24Yi4Lvea2CIqw7XVpsDqNna5NaMihQuMH6MjcRghNr6j2eEHAMPDNbVIVC7MZVk4pD4UPzcECup6-06nzFArPgl-6RyjOhOMnmdCbVnKv1Dfc3OghRSz0aS_NAQEWV8W7BU8eQ/s1600/Picture3.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgmqvT24Yi4Lvea2CIqw7XVpsDqNna5NaMihQuMH6MjcRghNr6j2eEHAMPDNbVIVC7MZVk4pD4UPzcECup6-06nzFArPgl-6RyjOhOMnmdCbVnKv1Dfc3OghRSz0aS_NAQEWV8W7BU8eQ/s320/Picture3.png" width="234" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Hello! It's me, your first vector art! I will haunt you forever.</td></tr>
</tbody></table>
<div style="text-align: center;">
<br /></div>
<div class="separator" style="clear: both;">
It may not be that bad, but it definitely wasn't what I was aiming for. Fast forward through a year of hard slogs through the swamp of despair and that's what I can do now: </div>
<div class="separator" style="clear: both;">
<br /></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2f7hYOsPFwGFSD7geqOuINTIwncRBU7N0pYZ8UvzKM_1f2DBrn_vWhWt1eh_Pw8-rk2M3VQ4ybT27JaaLQulig4ah5Ewfg6Wg0RWULxc_q8XAlUGM9wBk853fi8EvW2G_eF1oJVTDHqw/s1600/ppt.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2f7hYOsPFwGFSD7geqOuINTIwncRBU7N0pYZ8UvzKM_1f2DBrn_vWhWt1eh_Pw8-rk2M3VQ4ybT27JaaLQulig4ah5Ewfg6Wg0RWULxc_q8XAlUGM9wBk853fi8EvW2G_eF1oJVTDHqw/s1600/ppt.png" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">I'm your 1000000th vector art. Well, at least you're dedicated.</td></tr>
</tbody></table>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
I'm not sharing this to brag about my progress, but rather to highlight that you shouldn't start with complex tasks as you don't start reading Shakespeare if you want to learn English. After being disappointed in my portraiture skills, I went back to simple things. Based on my experience, I would recommend the following practicing path (the list is not exhaustive):</div>
<div class="separator" style="clear: both;">
</div>
<ul style="text-align: left;">
<li>Man-made everyday objects (devices, gadgets, office equipment)</li>
<li>Geometrical buildings and architecture</li>
<li>Plants and other flora</li>
<li>Stylized living creatures</li>
</ul>
If you feel like jumping into the deep end - go for it, but keep in mind that it's OK to take a step back. It's not a sign of your failure as a person.<br />
<div class="separator" style="clear: both;">
<br /></div>
<h3 style="clear: both; text-align: left;">
ProTip 2: Practice expressing objects with basic shapes</h3>
<div class="separator" style="clear: both;">
By basic shapes I mean ovals, squares, rounded squares and triangles. Everyday mass-produced things are usually simple and can be reduced down to geometrical shapes. A keyboard is a rectangle. A monitor is a rectangle. An iPad is a rectangle. Your credit card is a rectangle. A folder is a rectangle and so forth. A drinking glass is a rectangle and an oval. A bowl is a half a circle and an oval. This is also the reason why I recommend this category as a starting point. </div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
Once you get accustomed to recognizing basic shapes in various objects, you can start thinking about simplifying complex shapes and/or adding more details to simple shapes. For example, if you create a rounded square to represent a credit card, it will be very hard for the viewer to recognize it as a credit card. You will need to add some features that make a credit card different from any other rectangular objects, such as a simplified logo or a representation of text.</div>
<div class="separator" style="clear: both;">
<br /></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://i.imgur.com/1yQUEbf.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://i.imgur.com/1yQUEbf.png" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">What makes a black square a credit card?</td></tr>
</tbody></table>
<div class="separator" style="clear: both;">
<br /></div>
<h3 style="clear: both; text-align: left;">
ProTip 3: Adjust the defaults and edit the points.</h3>
<div class="" style="clear: both;">
Note that I have adjusted the angle of the curved corners in the example above. If you compare a credit card (or an iPhone/iPad) with the default rounded square in PowerPoint, you will notice that the shape have much rounder corners, which make your images look bulky and not as elegant as the original products. Another thing you can do to make your objects less chunky and more appealing is to use "Edit points" feature to adjust the finer details of your object. For example, below is a quick time-lapse video of me creating an office chair in PowerPoint: </div>
<div class="separator" style="clear: both;">
<br /></div>
<div style="text-align: center;">
<iframe allowfullscreen="" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/fz_7_zP-9vc/0.jpg" frameborder="0" height="266" src="https://www.youtube.com/embed/fz_7_zP-9vc?feature=player_embedded" width="320"></iframe></div>
<br />
<div class="separator" style="clear: both;">
Note that I'm using points to adjust the curves of the chair back and the seat just a little bit. While my image is quite simple, these little details, like a curved seat or a smoother chair back add more credibility to it. In addition, you probably noticed that to create symmetrical shapes, I create only half of the shape, duplicate it and merge both together. </div>
<div class="separator" style="clear: both;">
<br /></div>
<h3 style="clear: both; text-align: left;">
ProTip 4: Use a model / guide</h3>
<div class="separator" style="clear: both;">
It is very hard to draw "out of your head", particularly if you're not accustomed to it or if your subject is complicated. There's also no need to do that! Even if you want to make a stylized iPhone, it helps to have a model. You will have better proportions and you will feel more confident about yourself. </div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
Don't hesitate to use photos or drawings of simple objects, such as books, phones or office supplies. Make sketches (by hand on paper) or take your own photos of objects and trace them in PowerPoint. Neither sketches nor photos have to be perfect - you can make your lines smoother and better in PowerPoint. Take a look at the example where I use a photo to create a human head:</div>
<div class="separator" style="clear: both;">
<br /></div>
<div style="text-align: center;">
<iframe allowfullscreen="" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/oqur5CIIgNo/0.jpg" frameborder="0" height="266" src="https://www.youtube.com/embed/oqur5CIIgNo?feature=player_embedded" width="320"></iframe></div>
<br />
<div class="separator" style="clear: both;">
Unless I'm making a very simple "dummy-shaped" or faceless avatars, I always use some sort of a guide - either sketches or royalty-free photography. At the very least, I start with some simple shapes thrown together to resemble an idea of the end result I want to achieve (as in the example with the office chair). Note that you don't have to re-create your models 1:1. For example, the picture below was based on this <a href="https://unsplash.com/photos/bkEakBqQL_E" target="_blank">Unsplash photo</a>.</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivibcIrR9uh8Gm6mAb1INPE7Lx5Q3xphJlUwsTDj1mYYRkl8lk-5sa6dI7ILGNnOxIT4qwxYSrlAd4VO0LcQebQ4Wl5cR4BaWU2M4tcc0nQsw4XCJw4nw2Z-RmzL9AQbZpcfF50B7pfTo/s1600/Picture2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivibcIrR9uh8Gm6mAb1INPE7Lx5Q3xphJlUwsTDj1mYYRkl8lk-5sa6dI7ILGNnOxIT4qwxYSrlAd4VO0LcQebQ4Wl5cR4BaWU2M4tcc0nQsw4XCJw4nw2Z-RmzL9AQbZpcfF50B7pfTo/s400/Picture2.png" width="273" /></a></div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
<br /></div>
<h3 style="clear: both; text-align: left;">
ProTip 5: Do not use too many points </h3>
<div class="separator" style="clear: both;">
For some reason, I (as well as quite a lot of other beginners) used to think that I need to have a lot of points to have a good drawing. However, I would always end up frustrated, because it was, of course, impossible to adjust every little tiny point and my shapes would end up very jagged and ugly no matter what I did. I'm not sure how I arrived at the idea of using less nodes, but since then my life has been much easier.</div>
<div class="" style="clear: both;">
<br /></div>
<div class="" style="clear: both;">
For this very reason, I do not recommend using "scribble" as your free-form drawing shape and would recommend "Curve" instead. Although it is not extremely intuitive to use from the start, it does produce better and cleaner curves. With Scribble you may end up spending more time on cleaning up your project from unneeded points than actually editing it. Compare:<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://i.imgur.com/Ba1JBTZ.png?1" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://i.imgur.com/Ba1JBTZ.png?1" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">This is a curve made with Scribble.</td></tr>
</tbody></table>
<br /></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://i.imgur.com/DCZ9lAx.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://i.imgur.com/DCZ9lAx.png" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">And this is a curve made with Curve.</td></tr>
</tbody></table>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
As you can see - much smoother and way lower "point noise". </div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="" style="clear: both;">
<h3 style="text-align: left;">
ProTip 6: Do not despair</h3>
</div>
<div class="separator" style="clear: both;">
When it comes to art, in any form, we tend to want to produce Great Things. The definition of Great Things, however, is quite hazy and makes this objective un-achievable. Instead of despairing and declaring that you're good for nothing because you cannot achieve Un-achievable Great Things, try to do simple things, but make them better every day (or week, or year). </div>
<div class="separator" style="clear: both;">
<br /></div>
</div>
Maija P.http://www.blogger.com/profile/03876378321908649349noreply@blogger.com4tag:blogger.com,1999:blog-1271059022930268937.post-15263553843585871342016-06-22T23:25:00.000+02:002017-08-29T13:23:47.942+02:00My Design Process: Badge Interaction<div dir="ltr" style="text-align: left;" trbidi="on">
This week's<a href="https://community.articulate.com/articles/personalize-elearning-course-with-gamification-techniques" target="_blank"> ELH Challenge</a> asked us to personalise an e-learning module. <a href="http://bit.ly/264f4RM" target="_blank">My submission</a> was based on the idea I implemented in the actual e-learning module in the past. Since I mostly designed internal trainings for employees wearing security badges, for me personalisation always starts with getting your badge. It's quite a familiar feeling for my audience as well and the reason why I used the "create your badge" approach to communicate the module personalisation mechanic to the learners.<br />
<br />
In this post I would like to focus on my reasoning behind the badge interaction design. While it may seem that not much thought is needed to design such a simple thing, I have to say that I've noticed that the final simplicity (a good one!) of my work most often results from the complexity of my design thinking or planning. So, if you're interested in a "look into designer's head" - read on!<br />
<br />
If you're more interested in the development and the insides of the Storyline file, check out <a href="http://bit.ly/29Ii22C" target="_blank">this post</a>.<br />
<br />
<h3 style="text-align: left;">
First Version</h3>
When I first created this module, the badge page looked approximately like this (note that this is not the exact original version, as I can't publish the original):<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://i.imgur.com/TKcklBD.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://i.imgur.com/TKcklBD.png" /></a></div>
<br />
The learner would see the badge on the left and instructions on the right. There were very few restrictive mechanisms built into the slide as I assumed that majority of learners would dutifully complete the badge and then experinece a lovely customised training module.<br />
<br />
Technically, I was correct and majority of cases worked out exactly as I wanted. However, majority does not mean 100% and in some rare cases learners forgot to tick a box or mark a radio button and as a result would get stuck in the middle of the course due to missing variable values. That's just plain bad.<br />
<br />
<h3 style="text-align: left;">
Second Version: ELH Submission</h3>
Keeping in mind the lessons learned in the original course, I decided to update the badge interaction for <a href="http://bit.ly/264f4RM" target="_blank">ELH challenge</a>. For example, I added vibrant callouts to draw learner's attention to the important parts of the badge (the labels disappear as the learner enters the answers):<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://i.imgur.com/YQrdbEf.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://i.imgur.com/YQrdbEf.png" /></a></div>
<br />
In addition, I've added more triggers to check if the learner answered all questions and to provide workarounds in case they didn't. For example, a gender-neutral name would be assigned if the learner's name was not provided (I know I often skip the "give me your name" part).<br />
<br />
Unfortunately, since I cannot test this version on the intended audience, I don't know if this version was an improvement. Perhaps it was. But, I was not happy with it! I felt that I was spending too much time trying to predict what could go wrong. My triggers were too complicated and were serving some vague "just in case" purpose. There's a saying in Russian: "Lazyness is the engine of the progress" and I definitely agree with it - if something is too hard (and, on top of that, I'm the one who's making it hard), then something is not quite right!<br />
<br />
<h3 style="text-align: left;">
The Problem</h3>
I took some time to think about it. The problem I was trying to solve was the missing data. The cause of missing data was either the lack of attention or distractions (or both). Imagine a hectic call center in the open office environment, where agents are expected to complete e-learnings within a very short period of time while being distracted either by direct questions or by the usual open office hustle and bustle. In this situation even a form with just three questions might be too overwhelming! Plus, let's admit it, from the learner's perspective, this is not a hugely important form.<br />
<br />
I couldn't know for sure if the orange labels helped in this situation. I can assume that since the labels would only disappear once the learner interacted with the relevant part of the badge, after recovering from a distraction the learner would clearly see the remaining lables and would proceed with the task from where they left it. Still, there was a possibility that this might not be enough, or that the users might simply disregard these warnings and deem the badge completion unimportant. I didn't want to add more text explaning why the module needs this information - since my target audience is located in the environment where three questions on one slide might be too much, adding more text didn't seem like a reasonable idea!<br />
<br />
In short, I needed to have a solution that would facilitate the recovery from multiple distractions for my learners as well as make work easier for me by reducing the amount of triggers and variables used as error control/recovery mechanisms.<br />
<br />
<h3 style="text-align: left;">
The Solution</h3>
You can see the third iteration of the badge mechanic <a href="http://bit.ly/28R3eC1" target="_blank">here</a>. To compensate for possible distractions, version three does not show everything there is to see to the learner. Instead, on every screen the learner sees one, clerly stated question:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://i.imgur.com/DOORO3p.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://i.imgur.com/DOORO3p.png" /></a></div>
<br />
If the learner fails to provide answers to important questions, the simple trigger stops the learner from proceeding and displays a brief reminder (the reminder can also be a good place to briefly explain the importance of the field to the learner, if necessary):<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://i.imgur.com/Y47taci.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://i.imgur.com/Y47taci.png" /></a></div>
<br />
In the end, the learner would see the completed badge, with an option to go back and correct any wrong information.<br />
<br />
The redesigned badge interaction definitely met the goal of reducing my workload in terms of trigger management. In addition, since the triggers that adjust variables were now spread across three slides, it could be easier for someone other than me to understand them. I definitely found it easier to manage chunks of triggers, rather than one big heap! I also feel that the new version is more dynamic, thanks to the added slide transitions, which simulate the top-to-bottom eye movement over the badge. However, to make the final commitment in real life, I'd need to test both options on the representative learners.<br />
<br />
<h3 style="text-align: left;">
Additional Resources</h3>
Since the challenge mentioned gamification, I would like to mention a game I deeply love and which can be a great source of inspiration in the use of badges and other corporate paraphernalia. The game is called <a href="https://tomorrowcorporation.com/humanresourcemachine" target="_blank">Human Resource Machine</a>. The interface design in this little gem is amazing: creative, cute and slightly ominous (as that's the point of the game) at the same time. Definitely gives you a lot of food for thought. And if you're into solving programming / math puzzles, then you will have a blast with the game itself - I certainly did.<br />
<br /></div>
Maija P.http://www.blogger.com/profile/03876378321908649349noreply@blogger.com0tag:blogger.com,1999:blog-1271059022930268937.post-10973275835963682016-05-03T23:27:00.000+02:002017-08-29T13:20:17.798+02:00My Instructional Design Process: Free Text Entries<div dir="ltr" style="text-align: left;" trbidi="on">
In this post I will describe the thinking and design process behind <a href="http://bit.ly/1Wjm2v7" target="_blank">my submission</a> for the ELH Challenge 127: <a href="https://community.articulate.com/articles/learning-journals-in-online-training" target="_blank">Learning Journals in Online Training</a>. I hope this may be useful for those who want to know what does an instructional designer do, where the time goes and what does it really take to create a short and technically simple interaction. I'll also touch on the mechanics of this project, such as triggers and variables. For those who already know these things, this reflection may serve as a way to compare notes or encourage reflective exploration of your own practice.<br />
<br />
<h2 style="text-align: left;">
Personal goal </h2>
In addition to the purpose of the challenge, I had a personal goal for this project: to use photos in the design - as simple as that. Working in the extremely fast-paced environment coupled with the action-packed personal life, I have to be very conscious about my time budget. I often gravitate towards flat design and shape-based graphics because it is faster for me to create my own simple assets than rake through piles of royalty-free resources, trying to find the exact picture that I need. This time I wanted to incorporate photographic assets while staying within my time budget.<br />
<br />
<h2 style="text-align: left;">
Choosing the subject</h2>
The example in the challenge already featured "compare your answer with expert's opinion" approach, which I have used myself quite often in the past and I wanted to make something different this time. In addition, I'm often skeptical about free-form writing in e-learning as it tends to produce gibberish answers. Of course, this doesn't mean that this technique should not be used, just that it should be used thoughtfully, providing some extrinsic motivation, benefit and/or purpose for the learner. Therefore, instead of creating an activity that would simply give you the correct answer regardless of what you typed in the data entry window, I wanted to have an interaction that would make the typing meaningful and necessary.<br />
<br />
With this in mind, I narrowed my options down to three:<br />
<br />
1. Setting personal learning goals for the module and reviewing them in the end.<br />
2. Creating and presenting an elevator speech for your presentation.<br />
3. Exercise in writing SMART goals.<br />
<br />
I started prototyping an example for the first option, but soon realised that it doesn't fully match my personal goal of using photographic assets, even though I spent quit some time on finding the right background photo. Therefore I abandoned that topic and moved on to the second one, which matched my goal and was more practical.<br />
<br />
<h2 style="text-align: left;">
Design and Development</h2>
<div>
<h3 style="text-align: left;">
The Structure</h3>
</div>
<div>
The elevator speech idea came from an instructor-led course on presentation skills. In the actual training, the learners are asked to create and then present an elevator speech to pitch their upcoming presentation. In my fist version of the challenge I went with the same approach: the learner would be asked to create an elevator speech using the provided form and then face a situation where they would have to present it.</div>
<br />
The original sequence looked like this:<br />
<ol style="text-align: left;">
<li>Title slide</li>
<li>Create an elevator speech</li>
<li>Meet an important stakeholder</li>
<li>Present your speech in the elevator</li>
<li>The end</li>
</ol>
Since I was keeping in mind a "reluctant learner" persona who would be inclined to skip complex tasks where possible, I realised that when the learner meets the stakeholder on slide 3, they may not actually have the elevator speech and that I need to decide how to deal with this. Should I make this a learning point and tell them that the stakeholder was disappointed with their lack of preparation? Should I allow the learner to go back and come up with an elevator speech now that they know it's important? In the end, however, I realised that since I'm trying to provide a "user error recovery" option, the best strategy would be to prevent this error from happening.<br />
<br />
With this in mind, I changed the flow of the interaction and made it more story-based:<br />
<ol style="text-align: left;">
<li>Title slide</li>
<li>Meet an important stakeholder</li>
<li>Flashback to creating an elevator speech "in the past"</li>
<li>Present your speech in the elevator</li>
<li>The end </li>
</ol>
<div>
Now the course felt as a more coherent story rather than a bunch of activities strung together. Furthermore, the learner would be directed to the writing activity via flashback in a story, rather than as a weird "oops, let me go back a slide and fix this" option. In addition, the situation would immediately provide the learner with the context for the activity, rather than make them annoyed about having to go back after realising the importance of the previous slide. As a gamer, I'm quite familiar with the latter feeling and it's not something that people enjoy!</div>
<div>
<br /></div>
<div>
Turning the course into a story also helped me solve the problem with transitioning the learner into the timed presentation slide. I didn't want to start the timer as soon as the leaner enters the elevator, as they would need time to understand what is happening and what they should do. In other words, I needed to explain the task and give the learner control over when to start the timer. Also, I wanted to explain why the elevator speech suddenly appears as if it's written on the wall. Returning from a flash-back made the transition easier and saying "you prepared so well you can almost see it in front of you" explained the appearance of the elevator speech.</div>
<div>
<br /></div>
<div>
As I mentioned in the discussion of the challenge, the scene in the elevator is the one I would test on real learners before committing to it. I would really want to know if the learners would find the presentation part valid and normal. In addition to their feelings, I would need to consider the environment as well: for example, would it be possible for the learners to actually present in front of the screen? If they are doing this course while sitting in the open office, this most likely wouldn't be feasible. </div>
<div>
<br /></div>
<h3 style="text-align: left;">
Mechanics</h3>
<div>
As you probably noticed, so far I haven't really said a single word about Storyline and how the course was technically created in terms of triggers, variables and other complex stuff. I think this is a great example that it's not the tools or technical complexities that are the key to instructional design, but our knowledge and creativity. </div>
<div>
<br /></div>
<div>
In fact, the Storyline side of the module is quite simple, as I used the text entry fields to set values for the text variables and then displayed the variable values on "Your Speech" slide.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmFAmE4rdTw4dDl9AYT80XYkPaj0Z4aeGe_mU2Bp3dZDw2E73Csue9lHjuvIbRAdNj3swbdb35me6bDW5tZ_XoncFmwtxhSacrchSjcai833yAFOz4aoRl9d2-xBb28Ph0JY0_S-c9qzk/s1600/set_variables.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmFAmE4rdTw4dDl9AYT80XYkPaj0Z4aeGe_mU2Bp3dZDw2E73Csue9lHjuvIbRAdNj3swbdb35me6bDW5tZ_XoncFmwtxhSacrchSjcai833yAFOz4aoRl9d2-xBb28Ph0JY0_S-c9qzk/s1600/set_variables.png" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4AIb0g7zP1NnRUad7QNyF_aqDR0qT3AI9RKU0mH5WSsYlimrQY4vOrgUxHt-TLylDvVZwD6YTm_iH5JLyw0wPG681QmxqXUQ5HpXrcyzACpzTxDupvZwpmTIzpHUkfkjo3BCGHfHMyGk/s1600/display_variables.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4AIb0g7zP1NnRUad7QNyF_aqDR0qT3AI9RKU0mH5WSsYlimrQY4vOrgUxHt-TLylDvVZwD6YTm_iH5JLyw0wPG681QmxqXUQ5HpXrcyzACpzTxDupvZwpmTIzpHUkfkjo3BCGHfHMyGk/s1600/display_variables.png" /></a></div>
<br />
The interesting part of the course is the "timer" in the elevator scene. Each elevator button has two states: "normal" and "selected", with "selected" being a customised built-in Storyline state. The "selected" state is triggered when the slide timeline reaches specific value. I didn't use cue points since I knew the exact second values I needed (i.e. 60 seconds divided by 9 floors).<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDU3huqilrwaTxWuSKa4M9JVqckmhq5hmyG2VlxIsmu3xP2imxUXN474HZX74syRZx1sTrKhO3lNi2_1WiURHfJfkFvLdZZN2cj3JpMCwjnYklYjZB5FXfw3l4bi37qLe7nEnXi8cCKZk/s1600/timer_triggers.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDU3huqilrwaTxWuSKa4M9JVqckmhq5hmyG2VlxIsmu3xP2imxUXN474HZX74syRZx1sTrKhO3lNi2_1WiURHfJfkFvLdZZN2cj3JpMCwjnYklYjZB5FXfw3l4bi37qLe7nEnXi8cCKZk/s1600/timer_triggers.png" /></a></div>
<br />
To ensure that only one button at a time stays lighted (i.e. in the "selected" state), I assigned all of the elements to the <a href="https://community.articulate.com/series/4/articles/adding-button-sets-in-articulate-storyline-2" target="_blank">button set</a>. This way the state of any button automatically changed to "normal" as soon as one of the buttons within the group was "selected".<br />
<br />
It can be pointed out that by adding "selected" states, the buttons became physically clickable, which is true. To hide my shortcut, I simply covered the button group with a triggerless hotspot and in its properties, disabled the option "Show hand cursor on hover", to be sure:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZorf8E8QQerzgTeJjz2fQ1R8NyH4awDeqE4fNLUhKYR78_QC3yb9tP-peqWlwsaAFFXusrEwPyY-VaDQszjM8Nf_1yQV3byWUUAV5nxE5d0Fr-qlNknbURa5I59oJfhzEXdPjJfSt6PI/s1600/hotspot_properties.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZorf8E8QQerzgTeJjz2fQ1R8NyH4awDeqE4fNLUhKYR78_QC3yb9tP-peqWlwsaAFFXusrEwPyY-VaDQszjM8Nf_1yQV3byWUUAV5nxE5d0Fr-qlNknbURa5I59oJfhzEXdPjJfSt6PI/s1600/hotspot_properties.png" /></a></div>
<br />
If you're a purist, you can simply create a trigger for each button to change it's state to normal based on the states of other buttons, but that takes quite a bit of time.<br />
<br />
The learner is taken to the next slide as soon as the time runs out. You can use a trigger based on the timeline, but I used the trigger based on the state of the last button: as soon as floor 9 lights up, the course moves to the next slide.<br />
<br /></div>
<h3 style="text-align: left;">
Look and Feel </h3>
<div>
I tend to spend a lot of time on playing around with colors, shapes and pictures. It gives me a lot of personal satisfaction, but doesn't always get the job done, so to avoid any time-sinks, I force myself to first create a colorless black-and-white course prototype, containing all the text and placeholder elements that I would need for the course to function (e.g. buttons). Once I know what I will have in my course and how everything will need to behave, I start selecting fonts, adding colors and other visual elements. Not only this approach keeps me focused on the right things at the right time, it also gives me a better idea where, how and if I can use slide masters and color schemes to speed up my design process. Coincidentally, it also matches well with the Elements of User Experience framework I <a href="http://gamayun-training.blogspot.de/2016/04/before-you-build-e-learning-template.html" target="_blank">mentioned previously</a>.</div>
<br />
The defining element for the color scheme was the elevator image as it was much easier to adjust my color scheme, than to find a good elevator photo that matched my idea.<br />
<br />
For the typeface, I wanted to have a clear sans-serif that would look good in all caps, produce bold (rather than elegant) headings, as well as a readable body text. In the end I found my font inspiration in <a href="https://dribbble.com/shots/1979860-We-re-Hiring" target="_blank">this Dribbble shot</a> and used <a href="https://www.fontsquirrel.com/" target="_blank">FontSquirrel</a> to find a free font matching the one in the picture (Raleway). With the title font selected, choosing the body font was mostly about finding a nice pairing and my final choice was Roboto.<br />
<br />
<h3 style="text-align: left;">
Get the file</h3>
If you want to take a look at the file itself, it is available <a href="http://bit.ly/26QLP2z" target="_blank">here</a>. Please note that you may need to install Roboto and Raleway fonts if you want to keep the original look and feel. I release this to the world under <a href="http://creativecommons.org/licenses/by-sa/4.0/" target="_blank">this Creative Commons license</a>, so as long as you attribute some of the credit to me, you can do whatever you want with it.<br />
<br />
Naturally, if you simply want to use any Storyline tricks (e.g. how to build a timer) or other things you may have learned, you don't have to credit me, but feel free to let me know in the comments if this was in any way helpful to you.<br />
<br />
<h2 style="text-align: left;">
<b>Areas of Improvement</b></h2>
Since my main limitation was the time budget, not all of my ideas made it into the final version of the challenge. Most of them, of course, concern the elevator presentation. As some of the commenters pointed out, the slide felt a bit too static. I have to say that I certainly agree with that and the static version was intended because of my time budget rather than not because I haven't thought about this. In fact, I had a lot of ideas, ranging from simple to complex, such as:<br />
<ul style="text-align: left;">
<li>Test the elevator scene with the realistic text that a learner may type. I have discovered that if you enter &gt;400 words into each field, the course "breaks down" and does not show any values at all, so you probably don't want to encourage essay writing. In addition, I'm not sure how the text box would react to large amounts of text - I would suggest building a scrolling panel just in case.</li>
<li>Making the avatar more animated (e.g. by changing her facial expressions) - this was actually something I later implemented, although I'm not fully happy with the result.</li>
<li>Adding some "hmms", "ahas" and "rights", to simulate passive listening. </li>
<li>Making a transparent elevator cabin so that the learner could see some movement outside of it and feel that the elevator is actually moving. </li>
<li>Adding ambient sounds throughout: sounds of the lobby noises, elevator arriving, doors opening, elevator moving, etc.</li>
<li>A hypothetical video that could be done inside the actual elevator.</li>
<li>Blue-sky thinking: adding a possibility for the e-learnign to analyse learner's speech and provide feedback, as well as adjust the avatar's expression. </li>
</ul>
<div>
However, since my resources were not unlimited, I had to make do with what was feasible within my budget/scope and matched the goals of this challenge. I also think that any imperfections are sometimes more valuable and encouraging learning points than ideal models. If you see a perfect product, you may feel that you will never be able to achieve that state and be awed and intimidated and discouraged in equal proportions. If you see an imperfection, you may get an idea how to improve it and be inspired to act upon it, ending up feeling better about yourself. <br />
<br /></div>
<h2 style="text-align: left;">
Summary</h2>
<div>
Some of the learning points from this challenge and this reflection:</div>
<div>
<ul style="text-align: left;">
<li>Use a story to create a coherent structure of your course content and activities. </li>
<li>Have a complete prototype with all the text and elements before desining the look and feel.</li>
<li>Use "Button set" if you need only one element out of many to be highlighted at a time.</li>
<li>Identify the dominant and hard-to-change elements of your course and align the easy-to-change elements with them. </li>
</ul>
<br />
<ul style="text-align: left;">
</ul>
</div>
</div>
Maija P.http://www.blogger.com/profile/03876378321908649349noreply@blogger.com0