To Use a Layer, State Change, or New Slide, that is the Question: A Daily Storyline Drama

Kris Felstehausen, MS, MMJim WallaceHudson/Mastech

At the end of this session, you will be able to:• Discuss the pros and cons of using different programming strategies in

Articulate Storyline to preview, and review in detail, a number of steps in a process, guidelines to follow, FAQs, or parts of some concept.

• Discuss the pros and cons of using layers in Articulate Storyline.• Learn the percentage of session attendees that prefer using specific types

of programming strategies (layers vs. state changes vs. multiple slides) in Articulate Storyline.

Session Process and Voting• Introduce a typical Storyline situation• Show you examples of common ways we’ve seen it programmed• Ask you to vote on which way you typically program it

– A QR code will display on each “voting” screen – use your smartphone QR code reader to quickly access the SurveyMonkey• You can download a free (or cheap) QR Reader from your App Store

– A URL will also be given – type the URL into your browser to access the SurveyMonkey

– Be sure to “Submit” each survey you complete• Ask for volunteers to “defend/explain” their choice• Discuss pros and cons of choices

Topics to Discuss1. Locking down the “Next” button2. Rollovers/click-ons: layers or state changes?3. Multi-part graphic: individual pics or hotspots? 4. Progress bars5. Multi-step process: layers, close buttons, or new slides?6. Animation: base slide timeline or separate layers?7. Slide/info available throughout course8. Multi-step learner actions and instructions9. Character pose changes

LOCKING THE “NEXT” BUTTON

Next Button LockedWhen you want to lock down the Next button so that the learner cannot advance until all interactions have been completed, do you:

A. Use navigational buttons in the player, but uncheck them for slides you want locked down. Create buttons for only these slides?

B. Turn off navigational buttons in player for entire course and create your own buttons for each slide?

C. Other?

https://www.surveymonkey.com/r/P9RSH8C

Survey ResultsResponses = 29

A = 69%

B = 24%

C = 7%

Pros/ConsOption Pros ConsTurn off player nav buttons in entire course and create your own nav buttons

• Buttons on all slides are consistent • Need triggers on each slide for all buttons; more to maintain; adds to file size; can be confusing for troubleshooting

• Have to pay attention to the position of buttons on each slide to keep them consistent from slide to slide – adds work and requires attention to detail

• If SME decides later to change look of buttons, have to change them in entire course

Use nav buttons in player, but disable for slides you want locked down; create your own button for only these slides

• Easiest for developer to do – less work overall

• Easier to maintain• Reduces file size as you don’t need

all the extra triggers on each slide

• Less control over what nav buttons look like (especially if SMEs want a particular look)

ROLLOVERS/CLICK-ONS: LAYERS OR STATE CHANGES?

Rollovers/Click-ons: Layers or State ChangesWhen you have a graphic and you want the learner to roll mouse over (or click on) part of the graphic to see text that pops open (or audio that launches), do you:

A. Use layers to show text? [example 3]

B. Use state changes to show text? [example 2]

C. Use markers to show text?

D. Other?

https://www.surveymonkey.com/r/PD3C5WX

Survey ResultsResponses = 23

A = 52%

B = 39%

C = 9%

D = 0%

Pros/ConsOption Pros ConsUse layers to show text • Allows use of very

easy trigger: “Show layer X when user hovers mouse over”

• If printing out “Word” storyboard, each layer shows up as a different slide – can be very confusing for SMEs.

Use state changes to show text

• Allows use of very easy trigger: “Change state of X to normal when user hovers mouse over”

• Text is often stacked on top of each other & is difficult to edit. Have to turn on text boxes to see each and remember to turn back on.

• If printing out “Word” storyboard, SME cannot read and edit text in each text box.

Use markers to show text

• Markers open and close easily

• Learner has to click on marker – much smaller area to hit than a part of a larger graphic; is more difficult to instruct them to click on markers than on larger parts of a graphic

• Text in markers do not show up at all when printing out “Word” storyboard. If you want SMEs to be able to edit, you have to remember to copy the text from the markers into the Notes section so SMEs can edit it.

MULTI-PART GRAPHIC: INDIVIDUAL PICS OR HOTSPOTS

Multi-part Graphic: Individual Pics or HotspotsWhen you have a multi-part graphic (like a pie chart) and you want learners to be able to click on each part/segment to make something appear (either using layers or state changes), do you:

A. Bring the different segments of the graphic in as separate pics; create different states for each segment; and use triggers to show text or layers for each segment? [example 8]

B. Bring the graphic in as 1 pic; draw hotspots on top of each segment of the graphic; and use triggers to show text or layers? [example 10]

C. Other?

https://www.surveymonkey.com/r/PTD5BTT

Survey ResultsResponses = 25

A = 52%

B = 48%

C = 0%

Pros/ConsOption Pros ConsBring the different segments of the graphic in as separate pics; create different states for each segment; and use triggers to show text or layers for each segment

• Can change the state of each piece of the graphic – like graying out each segment once learners have clicked on it

• Can easily add triggers to each segment of a graphic

• Can add text labels or other animations/triggers to the individual pics

• Piecing together smaller segments of a larger graphic can be very frustrating!

• Lots of triggers can be confusing for developer when troubleshooting or performing maintenance

Bring the graphic in as 1 pic; draw hotspots on top of each segment of the graphic; and use triggers to show text or layers

• Simplest for developer to do • Cannot change the state of each piece of the graphic (or add triggers) – like graying out each segment once learners have clicked on it; learners won’t know what they’ve clicked on

PROGRESS BARS

Progress BarsWhen you want to display progress bars on slides, do you:

A. Create separate pics of progressively full progress bars and just place them on slides? [example 4 – without state changes]

B. Create 1 progress bar with multiple states (each state with pic of progressively full bar), then choose applicable “initial” state for each slide? [example 4]

C. Use variables (on the master) to create incrementing/ decrementing slide counter that automatically generates an appropriately full/empty progress bar on each slide? [example 5]

D. Add Slider control to master, and use variables on each slide to calculate slider value? [Scene 2]

E. Other?

https://www.surveymonkey.com/r/PSQD3MY

Survey ResultsResponses = 16

A = 19%

B = 31%

C = 13%

D = 31%

E = 6%

Pros/ConsOption Pros ConsCreate separate pics and place on screens

• Simple, easy to do • Have to wait til very end of project to add bars

• Have to remember to adjust when slides are added or deleted

• Very manualCreate 1 progress bar with multiple states; choose “initial” state

• Simple, easy do do• Can create 1 base pic and

create all states; then copy from slide to slide

• Have to wait til very end of project to set initial state for each slide

• Have to remember to adjust when slides are added or deleted

• Takes a little time to set upUse variables to create incrementing/ decrementing slide counter

• Once working, will automatically generate progress bars with no further intervention

• Do not need to remember to adjust when slides are added/ deleted

• Complex – hard to set up• Adds triggers to each slide which can

add confusion• Adds size to file• One more thing to break• Not good for non-linear courses

Add Slider control to master, and use triggers on each slide to calculate slider value

• Works well for non-linear courses

• Same as 1st 4 bullets above

MULTI-STEP PROCESS GRAPHIC WITH STEP DETAILS

Multi-step Process Graphic with Step DetailsYou have a multi-step process illustrated by a multi-part graphic. You want to review each step of the process in more detail - and the detail needs 1 whole slide per step. Do you:

A. Ask learner to click on each part of graphic to review detail; have 1 layer per step and provide “Return/Close" button on each layer to hide layer (i.e. learner returns to base slide each time to see next step)? [example 8]

B. Use layers - 1 for each step. Provide both “Return/Close" and “Next Step” button so learner can either return to base slide to access next layer or advance to next layer? [example 9]

C. Use separate slides for the overview graphic and each step?D. Other?

https://www.surveymonkey.com/r/PYXW722

Survey ResultsResponses = 15

A = 54%

B = 13%

C = 33%

D = 0%

Pros/ConsOption Pros ConsLearner clicks on each part of graphic to review each step (on separate layers); each layer has “Return/Close" button

• Builds learner context by forcing learner to connect sub-steps with the larger process

• Layers print out as separate slides in “Word” storyboard

• Previewing layers can be frustrating as you have to run through the base slide to preview the layer

• Have to build triggers to show and hide layers• In Storyline there is only 1 ‘Notes’ section – for the base slide

only. If you are using the ‘Notes’ section for audio, the audio for all layer is listed on the base slide only. When printing out a “Word” storyboard, you have to remember to cut/paste the audio to move under each layer.

• There is no separate audio progression bar for layers. Therefore, you have to remember to extend the timeline for the base layer to include the audio time of the layers (and maintain if layer audio times change). If you don’t, it may be confusing for learners.

• Might be annoying for learner – adds more clicks

Use layers, but provide both “Return" and “Next Step” button

• Learners might like better; can choose to build context or move on

• Ditto on 1st 4 bullets above

Use separate slides for the overview graphic and each step

• Easy to preview and edit

• Fails to build learner context with larger process

ANIMATION: BASE SLIDE TIMELINE OR SEPARATE LAYERS

Animated Audio SequenceWhen you want to show animation to accompany a longer audio passage (to illustrate what is being said with pictures and words), do you:

A. Put all the graphics and text onto 1 slide and just position everything on the timeline? [example 6]

B. Break the graphics/animation and audio into smaller segments; create layers for each segment; use triggers to automatically flow from layer to layer? [example 7]

C. Other?

https://www.surveymonkey.com/r/PRSYTRV

Survey ResultsResponses = 3

A = 67%

B = 33%

C = 0%

Pros/ConsOption Pros ConsPut all the graphics and text onto 1 slide and just position everything on the timeline

• Everything is on 1 slide – don’t have to cut up the audio

• Editing can be very confusing – must label all graphics/text and keep them very organized when bringing onto timeline

• Have to turn objects on and off to see when editing – and remember to turn back on

• If you produce a “Word” storyboard, the screenshot of the slide looks very messy; it’s hard for the SME to see the graphics and text

Break the graphics/ animation and audio into smaller segments; create layers for each segment; use triggers to automatically flow from layer to layer

• If you produce a “Word” storyboard, the layers print out as separate slides; SMEs will be able to see the graphics and text for editing

• Easier to edit and make changes

• Previewing layers can be frustrating as you have to run through the base slide to see the layers

• If you produce a “Word” storyboard, you have to remember to cut/paste the audio script for each layer from the base slide “Notes” to under each layer slide

• Need triggers to show/hide layers• There is no separate audio progression bar for layers.

Therefore, you have to remember to extend the timeline for the base layer to include the audio time of the layers (and maintain if layer audio times change). If you don’t, it may be confusing for learners.

SLIDE/INFO AVAILABLE THROUGHOUT COURSE

Slide/Info Available throughout CourseWhen you want to have a reference slide (or info) available to learners throughout the course, do you:

A. Put info in pdf and attach it to player as "resource"?

B. Put info in lightbox and add link to player to open lightbox?

C. Put icon on every slide and add trigger to icon to open content in lightbox? [example 5]

D. Other?

https://www.surveymonkey.com/r/PM9NFF7

Survey ResultsResponses = 3

A = 33%

B = 67%

C = 0%

D = 0%

Pros/ConsOption Pros ConsPut info in pdf and attach it to player as "resource"

• Learners can download the resource and/or print

• Easy for developer to do

• A little harder to edit or maintain as you have to edit attachment and then re-attach

• Potential problems when you deploy the course as you have to make sure attachment is in zip file

• Potential problems with learners not being able to open resource once loaded onto client’s LMS

Put info in lightbox, and add link to player to open lightbox

• Easiest for developer• Clean and neat – does not

take up screen real estate• No extra triggers on each

slide

• Learners cannot download or print info

Put icon on every slide, and add trigger to icon to open content in lightbox

• May fit better into a client’s “template” or preferred look

• Icon takes up screen real estate• Extra triggers on each slide – adds complexity and

file size – one more thing to break• If client changes their mind about look or function of

icon, you have to change it on every slide!• Learners cannot download or print info

MULTI-STEP LEARNER ACTIONS & INSTRUCTIONS

Multi-Step Learner Actions & InstructionsWhen you have a slide with multiple learner actions, do you:

A. Put all actions on 1 slide, but show them one at a time; show only the instructions learner needs to take for each action? [Ex 11]

– Position instructions on timeline so they appear only when learner needs to take each action. Once learner has taken action, use triggers to show next action and change state of instructions.

B. Put all actions on 1 slide and give learner all instructions at once? [Ex 12]

C. Use multiple slides with only 1 learner action on each slide. When learner completes action, either have them click Next or automatically advance to next slide?

D. Other?

https://www.surveymonkey.com/r/PXVFF69

Survey ResultsResponses = 3

A 67%

B = 33%

C = 0%

D = 0%

Pros/ConsOption Pros ConsPut all actions on 1 slide, but show them one at a time; show only the instructions learner needs to take for each action

• Best for learners; they see 1 action at a time and instructions that go with it

• Everything is on 1 slide for ease of content changes and future maintenance

• Have to create a state for each set of instructions• Have to “edit state” of instructions text box to see

all sets of instructions – these will not show up on slide if you produce a “Word” storyboard

• Have to add triggers to change state of objects to visited so you can have a trigger to change the state of the instructions once learner action is complete

• Lots of triggers can be confusing for developer when editing and troubleshooting

Put all actions on 1 slide and give learner all instructions at once

• Easiest for developer and for maintenance

• Confusing for learners!

Use multiple slides with only 1 learner action on each slide; when learner completes action, either have them click Next or automatically advance to next slide

• Provides 1 learner action and instruction at a time with no need for lots of triggers

• If you have multiple copies of same slide, you will have to make any content changes on all copies (not smart for editing or maintenance!)

• If you produce a “Word” storyboard, each slide will print out as a separate slide – confusing for SMEs!

CHARACTER POSE CHANGE

Character Pose ChangeWhen you want to add pose changes to a character, do you:

A. Use a series of separate screenshots stacked on top of each other and position each screenshot on timeline? [Example 5]

B. Create different states for character (each state with a different pose); add cue points where you want pose changes; use triggers to “change state of X when timeline reaches cue point Y”? [Example 4, 6, 7]

C. Other?

https://www.surveymonkey.com/r/PXBJ5X7

Survey ResultsResponses = 3

A = 0%

B = 67%

C = 33%

Pros/ConsOption Pros ConsUse a series of separate screenshots stacked on top of each other; position each screenshot on timeline

• Simple; easy to do – no triggers or cue points needed

• Easiest to add animation to individual pics (fade in/out – entrance/exit)

• Character looks weird when producing “Word” storyboard

• Have to insert pics of characters on each slide (or copy from slide to slide)

• Hard to get all pics aligned so pose changes look smooth – easy to mess up during editing

• Hard to see the poses when editing (have to hide poses and remember to turn back on)

Create different states for the character, add cue points, and use triggers to “change the state of X when the timeline reaches cue point Y”

• Can create base slides with character positioned on right/middle/left; create multiple states with lots of poses; add triggers to change states; copy character from slide to slide; just add cue points and select poses as desired

• Cannot see pose changes initially on slide – have to “edit states” to see all potential pose changes

• Takes time to initially set-up series of states and triggers

• Can still add animation – but have to add to each state

Next Steps:With the conference materials for this presentation we will post:

• The PowerPoint presentation• The story file containing the examples• The survey results

We would like you to complete the survey questions that we didn’t get to, then we will update the survey results in the presentation materials.

SUMMARY

Session Evaluation & ID Skills Self-Assessment• Please complete the Evaluation using the app. If you don’t have your phone, ask

your session monitor for a paper evaluation.-------------------------------• Are you getting the feedback you need to continuously enhance your ID skills?• For FREE feedback on 150+ ID & PM skills, take our Skills Self-Assessment at:

https://www.surveymonkey.com/r/6DQ9G5N

• Upon submitting your assessment, you will receive a detailed personal report that provides:– A summary of how you scored on each skill compared to others– Your top areas of strength and opportunities for development– Suggestions for developing each skill area– A template for a development plan that you can create to further enhance your ID/PM skills

• To thank you for your participation, you will also receive a 30% discount coupon for the purchase of the VADDIP Business Learning Handbook