Your address will show here 12 34 56 78
TBAUG_June I will be presenting at the Tampa Bay Articulate User Group meeting June 16. The topic?  MadLibs. I shared this tactic a few times before: http://businesscriticallearning.com/blog/2011/03/14/using-madlibs-and-concatenate-for-assessments/ The tactic is still effective, and Storyline has some fantastic tools to kick it up a notch. Anyone wanting to experiment during the session (or afterwards) can download files here: Note: All files are in the TBAUG Folder. Storyline files are Storyline 2.
  • ImportExample.story file is a Storyline file which you will use to import updates from the Microsoft Word document Import_this.doc (if you haven’t used Storyline’s Translation Export/Import to allow SMEs to directly update documents, it is something to explore)
  • TBAUG- SL2 Backup.story is a “completed” file.
    • It will pull one of three equivalent pay verification scenario (4 steps each) from a question bank, putting all the steps in the right order (that’s a Storyline specific hack!)
    • To create the file, I used the IMPORT function to update the second scenario set, and Storyline Variables (along with equations) for the third set
    • It shows a single-source strategy for remediation slides (which could be core course content)- triggered as a lightbox from “Try Again” feedback
    • It also shows an assessment methodology that provides good analytics without scoring users (I have written about this previously)
    • You can see the output sample here. Each time you refresh, you should see the 3 different variable scenarios load (one female, one white male, one black male- each customer has a unique paystub statement with differing values).
      [icon name=”fa-exclamation-circle” iconsize=”small” iconcolor=”000000″ ] Important: The Amanda Baker scenario will not correctly display the fonts unless they are natively embedded on your machine. This was purposely done to show how variable fonts are not embedded for published Storyline outputs.
  • The MadLibsExample.xlxs Excel file shows the CONCATENATE function used (as described in the Madlibs post) as well as how simple formulas for financials can adapt one great scenario into an almost limitless amount with little effort
I promised the session would be deep, engaging, and thought provoking. I also expect the presentation will be the BEGINNING of a conversation and your experimentation. Please feel free to comment below to share with peers, reach out for help, etc.
1

Presentation1 Here is another Before & After example.

BEFORE- the original content

Like the other interactions in this series, this comes from huge, high-visibility orientation course on workplace attitudes and behaviors initially developed by a junior developer in our group. This particular action needed little work- the concept was fine, it just needed a bit more improvement in graphics and flow in my opinion. Let’s review the original (text blurred to protect the organization’s material).

Intro Screen (not shown)

Standard scenario intro setup using an Articulate character: “Meet <name>. She just received a call from…”

Interaction

The interaction concept is simple. The main character gets a call and needs to pick the best reply. The user clicks the next button to get to the interaction.    

Feedback

  Feedback is triggered instantly when the user makes a selection. This is a vast improvement on prior screens in the course that was using the “next” button as a submission trigger. However, this also creates a consistency issue. Because on this screen it actually acts as a next button enabling users to skip the interaction. The feedback itself only has small presentation issues. Incorrect and Correct feedback are actually difficult to distinguish from one another and the Correct feedback prompt area seems to crop part of the customer service image. cust_serv_orig_incorrect cust_serv_orig_correct  

AFTER – the revision

[button title=”click here to see this in action” type=”linkbutton” color=”blue-lite” url=”http://businesscriticallearning.com/wp-content/uploads/storyline/customerservice/story.html” target=”_blank” ]

Intro Screen (not shown)

The intro screen is just a different aesthetic choice using photos and color vs the original white background and Storyline characters.

Interaction

The left half of the screen animates a conversation just as a text stream would through standard phone SMS texts or popular messaging applications. I though this would be a good way to make it more current and for most users, immediately intuitive. After the drop-target area shows, the options to drag display.If users drop a reply outside the drop target, it returns it’s original position.

Feedback

The feedback triggers immediately when an option is dropped on the drop target. The columns for the customer conversation and feedback were made consistent in presentation and Incorrect and Correct feedback each have different color schemes.  

The client didn’t use it- but you can!

Since the organization went in a different direction with the final version of the course, this interaction won’t be used, so I removed company-specific information, to offer you the .story file – have fun making it your own. More to come!
0

Presentation1 Back again with another before and after example from the content conversions I’ve been doing.

BEFORE- the original content

This is one interaction from a huge, high-visibility orientation course on workplace attitudes and behaviors initially developed by a junior developer in our group. The concepts are fundamentally sound, but the graphics and flow had opportunity for improvement during our conversion. Let’s review the original (text blurred to protect the organization’s material).

Intro Screen (not shown)

Standard scenario intro setup using an Articulate character: “Meet <name>. He just overheard a conversation between his manager and a home office employee.”

Interaction

The interaction concept is simple. The main character overhears a conversation where his manager and a home office employee are planning to do something legal, but not consistent with the values of the organization. He has several courses of action he could pursue, but really needs to distinguish between good and bad ideas he is considering. The original designer put in an animation. The left half of the screen renders to introduce the scenario and show the conversation. Then, the right half displays the main character and the interaction. Despite the use of animation, the design falls into the common trap of “flat design thinking” I mentioned in my previous before and after post. The end result is too much on the screen at once. Only half of the real estate is dedicated to the interaction, which is the purpose for this screen. The design of the “idea boxes” was not immediately intuitive to a some users and the boxes sizing did not distinguish them as clear drop targets for the interaction. “Tonight, the role of the submit button will be played by the next button”… On virtually every screen of the course, the right pointing arrow is for navigating to the next slide. One some interactions, the next button suffers this identity crisis. There were a other opportunities to improve the interaction. These are easier to see in the following screenshot: interactionissues [list style=”arrow” color=”blue”]
  • The size of the thought bubbles overflow the drop targets as well as the stage area.
  • Thought bubbles do not need to be dropped on any valid drop target to submit the interaction (for example, you can just drag it over the main character as shown).
  • Once the first item is dropped on a drop target, you can no longer read the name (as shown, you can no longer determine which box was for a good ideas, which one was for bad ideas).
[/list]

Feedback

Incorrect feedback essentially says “Incorrect. <Character> should choose a different course of action.” and a Try Again button resets the interaction. So a user possibly need to try every possible combination to get the correct answer to advance in the course. This is a bit harsh in my opinion, considering there is no feedback to help guide users to perform better, and this is one small interaction in a very large course. Despite the issues, there is a great opportunity here. So often in business, we are faced with situations that aren’t black and white and have actions could take and others that we might consider, but really shouldn’t pursue. So, I set out to develop a “Good idea/Bad idea” template that could apply to many business scenarios (I’d attempt to develop a similar interaction for husbands: “good thing to say to wife” vs “do not say this to your wife”, but my bride of 14 years can assure you that I don’t score well on that test).

AFTER – the revision

[button title=”click here to see this in action” type=”linkbutton” color=”blue-lite” url=”http://businesscriticallearning.com/wp-content/uploads/storyline/overheard/story.html” target=”_blank” ]

Intro Screen (not shown)

The intro screen is just a different aesthetic choice using photos and color vs the original white background and Storyline characters.

Interaction

The setup was separated from the interaction itself. I attempted to create a little ambiance by selecting a photo that makes it look as if you have snuck in behind your manager and stumbled upon the conversation that occurred. Each idea appear one at a time for the user to considers and drop onto a very obvious drop-target area. If the user drops the idea on the incorrect drop target, it returns to the neutral position for quick, instant feedback. Once all of the ideas are dropped onto the correct drop target, a final congratulations message displays.

This ended up on the cutting room floor- so enjoy!

The organization did not select this version of the content treatment, so this template will not be used. Instead of letting it die unused on the cutting room floor, I removed company-specific information, and I am offerring it to you to adapt for your own needs Download the .story file and have fun! More to come!
0

Presentation1 I’ve been a a flurry of development due to an acquisition. I’ve had to convert a LOT of content, and sometimes when we convert, we use the opportunity to put in some improvements.

BEFORE- the original content

This is one interaction in a huge, high-visibility orientation course on workplace attitudes and behaviors (so, yes… there are many before & after items coming soon). This was initially developed by a junior developer in our group. Generally speaking, the concepts and interactions are fundamentally sound, but the graphics and flow could improve. Let’s review the original (text blurred to protect the organization’s material).

Intro Screen

Interaction

The first thing I noticed is a common issue- “thinking flat”. I am not talking about flat design (which I am fond of), but the inability to think of layering content and using timing/animations to progressively display information. Many junior designers work to fit everything on screen all at once and don’t think to user layering. In this case, the choice limits the real estate for the interaction and makes the screen look busy. Another issue I wanted to address was the identity confusion of the “next” button as a submit button. The click interaction has: [list style=”arrow” color=”blue”]
  • 5 correct answers (wrong nametag, unlocked file cabinet, deadflowers, overflowing trash, and the stack of papers on the desk)
  • 3 incorrect options (2 pens on the left that select as a group, the pen on the right edge of the desk, and the man and computer that select as a group)
[/list] There is no way to click any additional areas (such as the files or papers left out in the back office or the day planner). The active areas display the select (hand) icon on hover, so it telecasts the click opportunity on these select zones. There is only one attempt at the interaction before you receive feedback: “Correct” or “Incorrect”.

Feedback

The immediate feedback triggered essentially says “nice try, but there are different things that should have been selected”, and prompts the user to go to a summary slide which shows what should have been selected. Correct feedback essentially says “Nice work – you found the items” and prompts you to go to the same summary slide.   feedback1 The interaction is all or nothing, so if the user gets 4 of 5 correct, they get the same score and feedback as a user who selected only two incorrect items and submits the interaction (which will submit even if just one item is selected). I see a lot of opportunity to tighten the interaction and feedback to really help the user.

Summary Screen

Once the user clicks “Continue” from the Correct or Incorrect feedback prompt, they go to a summary screen with a hover interaction. These interactions give the users details on the 5 correct items. The first thing I noticed is that it said “Congratulations on identifying the five things…” even if the user got to the screen from the incorrect feedback prompt when they didn’t select the right things. feedback2 Despite the issues, there is truly some good raw material here. With a little tightening and polish, it can really bring out the best in the interaction.

AFTER – the revision

[button title=”click here to see this in action” type=”linkbutton” color=”blue-lite” url=”http://businesscriticallearning.com/wp-content/uploads/storyline/office/story.html” target=”_blank” ]

Intro Screen

Interaction

interactionrevision Where the Intro screen brought only cosmetic changes, the interaction brought significant functional changes. Every area of the screen (excepting the prompt) is clickable. Clicking an incorrect area gives incorrect feedback. Clicking one of the 5 items does three things:
  1. it checks the item and changes it to an inactive state so it can’t be selected a second time
  2. it triggers a running counter of the number of items found
  3. it prompts feedback specific to the item found

Feedback – specific to the click

Summary screen- removed

There is no need for a summary screen dedicated to guide users through the 5 items at the end of the interaction, because the users have received that feedback all along. So, I did something different. When the user finds 5 of 5 items, the “Continue” button changes from “close layer to return to interaction” to “close layer and move to next slide”. It is a simple state change to have the “hide layer” continue button to go to hidden state then the counter hits 5, and the “next slide” continue button to toggle from hidden state to normal. The same trick is used to provide a final message to wrap up the interaction. When you look under the hood, what appears to be complex interaction is truly just some really well played slight of hand to look much slicker than it really is (I know there are many more elegant ways to go about this with variables and/or Javascript).

This was the REJECT- so it is yours!

Yes, you read that correctly.This treatment of the content was rejected, and we went in a different direction with the revision, so the best thing to do is to share it so you can take the functional elements and make it your own. Download the .story file and have fun adapting it for your own interactions! More interactions and examples from this coming soon (just have to remove any company-specific text).  
1