DevLearn 2019 – Day 1

Articulate User Conference

Design Inspiration is All Around Us
– Tracy Parish

Design is all around us — our clothing, mugs, airport, etc. Touches our lives in all different ways. Here are some trends in media, marketing, etc. (and how they are influencing our lessons and learners):

1. Color – more subtle shading; Shutter Stock takes stock of what colors are most downloaded in every country! So, color and music are not universal. (Even see Spotify & Instagram — bold colors and monochrome)
   • Might use for buttons or hover states.
   • Have to think about accessibility, as well.
   • Stripe.com – designing accessibility color issues.
     
2. Natural images – we are tired of stock images. Find images that tell a story and evoke an image. See WOCInTech, Leanin.org (add more each month, work w/ Getty to put money back into Leanin.org) use your phone! Take pictures around the office.
   
3. Hero images – travel sites are amazing, but they crop and send message to users. **Google ZEEF TRACY PARISH, for huge list of resources. (Here it is!)
   
4. Character images
   
5. Keep it Interesting – e.g., turn slider on the side and make a menu; use hover states and transitions to surprise learners. Use accordian, color shading, etc. Sit down and do deliberate practice — is there a way to make this work.
   • See Nicole Legault – seamless-scrolling-effect download.
   • See HUGE website — black, then hover to red to keep user going.
   • See awwwards.com
     
6. Motion – purposeful, meaningful context, and give user control.
   • See beer brewing 101 – markers, cards come up, and animation INSIDE cards.
   • See SlideSugar — parallex effect, (bear safety w/ Sarah Hodge)
     
7. Typography – are they legible, easy to read, but still pull in fonts that are big and bold, as well. Tell diff. messages on diff. screens. (word broken/trailing off side of screen is popular in marketing now, but wouldn’t work for eLearning, as well)

---

5-Minute Makeovers in Storyline 360
– David Anderson

Talked w/ David Anderson! Thanked him for his help w/ Storyline in the past and told him I would be joining eLearning Challenges soon. I mentioned Jodi and Tracy being rockstars, and he encouraged me about that they have only been working w/ Articulate for 1.5 years. He encouraged me to check back over past and see how *their* work has grown over time. We learn and grow, as we join in the eLearning Challenges!

Common Issues that we can’t completely revamp projects (no time). But, what if we improved *one* thing — marginally improve and allow us to practice skills. So, then when stakeholders are ready for a change, you’ll have a bank of new skills to insert.

• Gamify Content Library
  • Personalization (easy and can do it through rest of course)
    Use Input button on ribbon, text entry field; Storyline automatically creates project variable; can use variable reference just to doublecheck (textbox, don’t click away, reference)
  • Animated Timers (we don’t have timers; have timers for quizzes). So, here’s a way you can insert timer (David’s more of a fade animation person; doesn’t use others. We need to know tools, so we know why we do/do not want to use them.) We can find different uses for our tools.
  • Make a project with all the bells and whistles we DON’T use and why. This way, if a client wants something, we can tell them, “this is what it would look like,” and show in a visual way why it’s not the best choice.

NOTES:
When have more than 1 attempt, the counter auto goes down.
Variables are 3 step process – create, adjust, use.
Triggers are 2 step process – what do you want to do; when do you want to do it.
Only have to put Attempts on base layer (not each layer)

• Escape Room – see challenge Discovery Ideas

• Click-Reveal
  • Counter (click 3, reveals secret key)
  • Dial
  • Slider
    
• Badges and Progress
  • Track number of attempts (mini trophies) in upper right. Used true/false variables. Want to make it as efficient as possible. Because if client likes it and asks for additional, you don’t want to make adding a “hard thing” or back to drawing board.
  • Easy to troubleshoot on layers, but could do it on Slide Master instead.
    
• Customizing Drag and Drop
  • For example drag-n-drop file cabinet & trashcan. **See editing states, and you can choose drag-n-drop correct or incorrect.
    
  • Doubleclick format painter and duplicate states on all other notes!
    
  • Key: pull down drag-n-drop options and UNCHECK the delay until submit. This way, learner has visual of correct/incorrect before submit (less of gotcha).
    
  • Animated effects on Drag and Drop states (again see notes shrinking into trashcan) — can use cue points instead of triggers — when timeline reaches cue point. Hidden when object is *dropped on* trash, for example.
    
  • Select correct trigger, copy, select all other objects and paste trigger onto it.
    
  • For example, when you introduce a new function, it will break others. So, each time introduce, be prepared to troubleshoot other unexpected results. (e.g., have to add hot spot to reset to normal — so you can move notes around top w/o having it reflected as incorrect).
    
  • Force learner to get one “ordered” step correct before progressing to next. Can do this by limiting number of correct targets. Many viable targets, but only one has availability. Change viable correct target each time. — rest are set to none (see Complete Steps in Sequence.story)
    
  • Show Hint After Number of times.story — try again layer fires each time. Instead of minus, we are adding to drag tries. Then, show layer “hint” if number of tries is over ____. Great way to enhance existing project.

Contact David with any questions, after looking at resource slides.

community.articulate.com/articles/userconf

---

Common Mistakes in Storyline
– Stefanie Lawless

1. Label slides (will reflect in player)
   
2. Check for updates (Articulate updates every 6 weeks)
   
3. Work on Slide Masters
   • Story Size (Design tab)
   • Modern player is scalable (can open side panel, but responsive to size — 16:9)
   • iPad is more 4:3 scaling.
   • Make decisions before inserting type/content. Branding is key here.
   • Check out pdfs in Community — [email protected] — and see what each color does (hover state, font colors, etc).
   • Can edit feedback on questions (hover states — correct, incorrect, try again).
   • **See player, Aa Text Labels (and can change default text from “incorrect” to “think about this.”) Change it in that one place; changes it for entire course!
     
4. States
   • slides, states, layers, and triggers (building blocks of Storyline).
   • Can “overprogram a slide” visited = clicks and lets go. So, people sometimes create triggers to do something that Storyline already does. Don’t have to tell it to hover, it already happens.
   • Where you have to change a state … is when it’s disabled, then available. Need to trigger state change. If you give something a different name, need a trigger.
   • Ctrl-Shift-Drag to copy buttons.
   • Button sets – create multiple choice functionality. By default, nothing is in a set. Select Button Set 1. So deselect others when a choice is made. Also works for anything clickable in Storyline — not just buttons. Just a few — like hotspots and videos don’t have states. When put an object into a set, you automatically now have selected states (characters, etc) Again, use format painter and toggle so it stays in the copy cue until you unselect it.
   • May not want buttons to start as Normal. May want to start as disabled. Not have access to something unless they satisfy some criteria. (Change to disabled when the timeline starts. BUT, here’s a shortcut — Pull down Initial State as disabled instead of creating trigger).
   • Can insert text bubble into selected state.
     
5. Miscellaneous –
   • Best practices to name objects (no “untitled”) b/c easier. Shows up in alpha order. Then, if you share work w/ other people, less difficult b/c they all know to look for names of objects. Name motion paths, all actionable objects.
   • Over program; variables are long-term memory. If you need to know in slide 20 whether they selected something on slide 5, then need variable. Otherwise, just use short-term memory (states). **Use error messages “Select each tab before continuing” as a separate layer. This is an alternative to hiding “next button.”
   • Workflow Tip with Copying Triggers – copy trigger, select other buttons, paste, and all have same trigger.
     
6. Sliders and Dials
   • Name slide variables.
   • Use reference to ensure is doing what should be doing.
   • Each slider point points to different layer. (1-1968; 2-1970; 3-1975, etc).
   • If slide has just audio and you let Storyline decide (resume saved, reset to initial, auto decide), Storyline will elect to reset to initial state. If other elements are involved, then Storyline will make best judgment.

---

Graphic Design and Image Editing Techniques in Storyline 360
– David Anderson

1. Backgrounds

• Create sense of depth in lessons, using basic graphic design techniques.
  
• Can be less strict about it (ruler baseboard for classroom, for example).
  
• Can search for floor in Content Library.
  • Gradients can provide great backgrounds.
  • Crop tool.
  • Collect as baseboard, wall, floor, etc. and keep as a project.
  • NOTE: David only uses about 3-4 things his whole career, but in different ways.
    
• USA Today Snapshots — check it out. Pulls you into the story. See lower left of front page. Focuses on the learner (not the client). Also, book on this.
  
• Use graphs, tables, etc. For example, use entire receipt as background, w/ hotspots.

• 30 Second Template
  • Take a screenshot of a website and look and feel.
  • Make a background for this, by using crop tool, cropping sliver, stretching out.
    
• 15 Second Template
  • Can use eye dropper to use nice color schemes to make workflow quicker.
    
• No way to automatically connect color palette to theme colors. (David will submit to Storyline for new update)
  
• Tip – Space out tips; don’t use all tips at once. Use one, get comfortable, milk it, and then move to next one.
  • Blurred background
    • Can’t blur in Storyline, but *can* in PP (under Picture Effects). Bring in bunch of images, blur several, save all as pngs, and work into Storyline.

2. Characters in Circles

• Tip – Insert new slide below, and contains all same formatting. (no need to choose basic layout, etc)
  
• Use block art (using tools in ways other than meant). For example, half moon/arc. Do half/copy bottom half, insert character.

3. Silhouettes (removes emphasis on characters) – can picture and brightness down, instant!

4. Alignment and Guides

• Be sure to insert gutters/vertical – horizontal.
• Don’t want to use math.
• Use simple shapes, and duplicate to align.
• Come up w/ layouts for courses, then trade out the backgrounds (notice vertical lines below).
• with bullet points, increase after paragraph.
  

5. Gradient Effect

6. Custom Drop Shadows

• Loneliest tool is moon tool (great for curled pages).

---

“Hacking” Storyline for Learner Engagement
– Tracy Parish

• Take a look at her resource files (not yet on Articulate website).
  • bit.ly/DL-Articulate
  • bit.ly/printdemo
    
• Survey
  • Survey Monkey embedded in screen (thru web object).
  • Tracy’s LMS doesn’t track all slides, so she didn’t want to buy more licenses. Did surveys instead.
  • Learner doesn’t know the question exists, but Tracy inserts question on last slide .(have you completed?) and that sends completed to tracking.
  • Typeform is another survey that can embed; a little slicker.
    
• Using Google forms and sheets to create dynamic graphs in Storyline
  • Built with yes questions.
  • Negative – don’t get a lot of control over look and feel (e.g., font).
  • Next slide, showed pie chart with real-time results.
  • 3 dots in upper right of chart, publish, check interactive box (so it gets updated each learner response).
  • Insert – input – data entry.
  • Check David Anderson’s instructions for connecting to Google sheet.
  • Can use the trigger to play java script to insert files that Tracy provided us in practice files (to capture and push results).
    
• Using JavaScript to print anything out (bit.ly/printdemo).
  • short essay answer (how would you handle this case study?) then show recommended answer.
  • Contact Owen Holt in Storyline Community, if have questions about javascript.
    • Player – Features, can create your own tab, calling it “print button”. Can jump to resource page, to a certificate page, or in this case to javascript.
    • window.print(); will fire javascript
    • add custom link and make it look like a button.
    • job aid could be last page (where they can print), by showing custom link.

---

What’s Next in Articulate 360
– Megan Cleveland & Mike Olivieri

Storyline 360 Changes Coming:

• media library
• rename assets
• slide numbers
• media library alt text and closed captions
• media library notes
• feedback Master Theme previews
• Project Recovery
• Glossary Import and Export
• One-Click Slide Insert
• Insert Pictures as States
• HTML5 Player Preview
• Coming Soon – Triggers Panel and Workflow
• Coming Soon – Accessible Player

Scenarios –  https://www.youtube.com/watch?v=dkdzY950e9o

Trigger Changes in Storyline 360 –  https://www.youtube.com/watch?v=2Vh5VTR-62s]