Blog

Blog

Articulate Storyline 2 versus Storyline 3 which one is better?

With Storyline 2, I was having issues with complex behaviours in HTML5 (e.g. having custom controls, attaching custom variables and passing them to an LMS, and differences between development and published environments).

Here is some my background, I’m a Macbook Pro user using High Sierra running VMWare Fusion. I come from a design background with web and mobile development experience.

I wanted to test to see what the differences were between Storyline 2 and 3. Most of our customers are large organizations and we wanted to test drive Storyline 3 before making a recommendation.

Overall Storyline 3 comes as an improvement to its predecessor Storyline 2.

A trial version of Storyline 3 can be downloaded here:

https://articulate.com/p/trial?product=storyline-3

Some of the main differences between Storyline 2 and 3 are as follows:

New Responsive Player
Storyline 3 has a new responsive player that adjusts the course content to various devices such as smartphones and tablets without any additional programming.

Custom Closed Captions
Storyline 3 supports customizing closed captioning while helping you create more accessible eLearning. It supports all the standard caption files. You can import, export, show and hide the captions at your convenience. You can even use the custom fonts for closed captions.

Superior HTML5 Output
Articulate has put a lot of effort to fine tune the HTML5 output so that your eLearning courses work smoothly on any device. Articulate claims that no matter how custom or complex your eLearning course design gets, it’s going to run on any device or browser. Elearning developers can now choose a format they desire and create responsive HTML5-based eLearning content. All you have to do is simply drag the ‘Publish As’ slider and choose the desired publishing options.

Better Starting Templates
Articulate has some smart looking templates which cover the core features an elearning developer needs.

Our tests upgrading a project from Storyline 2 to 3

I took one of the courses we had previously developed which I had had to customize to get it to work properly.  With Storyline 2, I had to write a fair amount of custom javascript and other workarounds with states and variables in order to get everything to work.

I did a full publish in Storyline 3 and below are my comments:

  • The Storyline 3 player forces older storyline projects to be upgraded. It creates a backup of the older project so no need to worry about losing it.
  • Publish speeds seem about the same.
  • The user interface of the product seems a little faster and more polished.
  • There are different loader screens after publishing – gone is the spinner, now it’s just 3 dots.
  • The HTML5 version seems a little faster in terms of load time.
  • Some of the javascript, tweaks of states etc. I had made previously in Storyline 2 don’t seem to work correctly in Storyline 3.
  • I installed the mobile Articulate Player app.  It didn’t seem to work.  All I got was a blank screen.  I could not bring up menus. (Hmmm not a strong recommendation for mobile only use).
  • I uninstalled the Articulate Player app on my phone and tried again.
  • I viewed the course on an Android Pixel 2 phone which took me to the Google Play store but I got a blank screen.
  • The video player seems to work better in HTML. I’m able to skip to certain sections.
  • The embed code works for videos in HTML5 and Flash (though no one uses it anymore).
  • Good testing for playback on various devices e.g. desktop and mobile.
  • States and Javascripts seem more accurate. When I compare the amount of code I had to add in order for Storyline 2 to work versus 3. It has been reduced greatly.
  • Screen recordings have been greatly improved. Screen elements before were shifting and moving for HTML5. They have all been fixed. Looks solid.

Link to Latest Version of Articulate Mobile Player

https://play.google.com/store/apps/details?id=air.com.articulate.articulatemobileplayer

Samples of Glitchy Screens when Upgraded Project from Storyline 2 to Storyline 3

Image 1: Image of hand is repeated and multiple selections on screen are highlighted simultaneously.

Image 2: Masking seems to cut off the text slightly (see final bullet on page, text is cut off).

Conclusion
Choosing the right elearning authoring tool for responsive mobile learning is a bit overwhelming. Storyline 3 is a simple and intuitive authoring tool with a short learning curve. Though Storyline 3 addresses the concerns of multi-device eLearning, it is not very effective for developing fully responsive eLearning courses. The responsive player shrinks the content to the screen size of the device instead of adapting the layout. Articulate hasn’t made an attempt to address this issue in Storyline 3.  Overall, it fixes many of the Storyline 2 problem in terms of HTML5, though I wouldn’t recommend upgrading existing projects from 2 to 3.  I would recommend however recommend choosing Storyline 3 over Storyline 2.  You’ll save lots of time in testing and coding.

Euphoria is proud to sponsor the Canadian Sport Film Festival

Euphoria Interactive is proud to sponsor the Canadian Sport Film Festival. The festival is running from June 8-10, 2018 at TIFF Bell Lightbox.

Their mission is to provoke dialogue on the power of sport to inspire social change.

Check out their website:

CSFF Sports Film Festival

And hope to see you at the movies.

Here is our promo video which will be screened for the first time at the event.

Using and Setting up Adobe Prime from our Perspective

Here is some background about myself. I come from working in the software and marketing industries being a developer, programmer and a UI UX Designer for a wide variety of platforms. I’m very comfortable troubleshooting Storyline with custom javascript and variables to make it SCORM or Tin Can compliant.

I’d recommend this product for medium to large organizations that require: solid functionality, decent reporting and a mobile friendly experience.

I was given the task of working with a client who had difficulty integrating Adobe Prime as a Learning Management System in their organization. Some of the issues were related to migrating from Adobe Connect (a repository for content that can be consumed for other LMS systems) and others were related to lack of documentation from Adobe Prime.

Here were some of the constraints with the project :

  • The majority of content was designed for Adobe Connect
  • Starting with a large library of content in a variety of formats that were mostly produced by Adobe Captivate
  • Multiple standards from a variety of different vendors
  • Starting with a large number of zipped folders that were made in a variety of formats e.g. zipped versions of Adobe Connect and SCORM 1.2 files
  • Multi-language setup
  • Previous administrator had uploaded Adobe Connect files to Prime
  • Adobe Prime has little documentation, no stackoverflow, no user forums outside of the Adobe community

Where to begin?

Prepping for Adobe Prime

First we had to do a full audit of the zipped files and source files and apply some standards e.g. all files are Captivate 10 (with standardized settings, naming conventions and outputted files in Standard SCORM 1.2 format). This required opening up the source files, making all the requested changes, saving them in the various formats, and lots of testing.

How Adobe Prime Works

The application is divided into four primary roles: Administrator, Integration Administrator, Author and Learner. Users can toggle back and forth between roles they have been assigned appropriate permission. In each of the four areas, video tutorials guide the way.

Learning Options
The learning options that we used to build a program from scratch were as follows:
1) Make sure you are logged in as an Author.
2) Add content. Go to the content Library and add your content (you’ll be able to upload a a variety of different file formats.

For Interactive Content
The supported format is .zip.

  • Scorm 1.2
  • Scorm 2004
  • AICC
  • TinCan

For Static Content

  • Videos: mp4, .avi, .wmv, .mov, .mpg, .m4v, .3gp
  • Pdf
  • PowerPoint – .pptx, .ppt
  • Word files – .docx, .doc
  • Excel files – .xslx, .xls

Step 1. Create courses. Combine any modules you have uploaded to create a course. This was straight forward to use you can drag and drop and rearrange with no difficulty.

Step 2. Create learning programs. Combine any courses that you want in an ordered or unordered fashion.

Step 3. Add users. They can be internal and external. We found that for testing purposes it was better to do this via an incognito window. Our client wanted an external user and attach learners to that user.

Types of Users
New users can be added in a number of ways. You can enter users individually, import them in bulk, and or allow users to self-register. There are two main groups of users: internal and external.

  • Internal users – You can add internal learners a few different ways. You’ll probably want to use the Bulk Import option. This allows you to use a standard CSV (comma-separated values or delimited) file that you generate from your organization’s human resources system. This is fast and easy. Besides expected fields such as names and email addresses, you can also import fields specific to your organization to include in the reports that Prime will generate. You can even have Prime automatically create groups for you from information in the CSV file, such as job categories, departments, and other factors. You can also set up other groups and even tenant-sharing.
  • External users – External learners are those who are not part of your organization. From within Prime, you create a group name for an external organization or category and generate a link and QR code to send to its external users. You can brand the group as well, a nice way of differentiating each group. The users who follow the link then create their own login name and password.

Step 4. Create learning plans.  Adobe Prime lets you set up events that are based on one of these occurrences:

  • A new user is added
  • A user is added to a group
  • A user completes a learning object
  • A user achieves a skill level
  • A date is added

Yeah you’re done…

Some Extra Notes

Reporting
Choose from sample reports or create your own. I found these to be really hassle-free. Prime tracks everything thrown at it—completion data, time spent, etc.—and then allows you to create reports from any and all data collected. You can create your own custom reports or base them on the following:

  • Enrolled and completed courses
  • Course effectiveness
  • Enrolled and completed learning programs
  • Learning time spent per course
  • Learning time spent per quarter
  • Assigned and achieved skills

Set up your X and Y axes and the time span, and you’re ready to go.

Some Important Prime Features

  • Mobile access – Learners can download the free Captivate Prime app to take courses on their mobile devices. I’d recommend the Mobile App it seems a little bit more polished.
  • Fluidic Player – When students launch courses, Prime’s Fluidic Player lets them very nicely experience all kinds of content, such as PDFs, videos, PowerPoints, and courses you’ve created in Adobe Captivate or similar products on different devices.
  • Adaptive video streaming – Prime is able to convert video embedded in Captivate into formats optimized for HTML5 and mobile devices.
  • Microlearning – The ability to combine the different resources and modules that you upload means it’s easy to combine them into short courses, learning programs, or certifications.

Final Thoughts

Using the product there was a little bit of a learning curve, and some of the features seem a little bit non-intuitive,  e.g. the Left menu keeps changing when the user clicks on a link, when it might be easier to just have an expanded and collapsed menu. Also, the lack of a larger community using the product is a limitation in terms of seeing from other users what’s worked and what hasn’t. The product seems constantly evolving which is good and bad. Good in terms that new features are being added. However, it is bad when there is a lack of communication with its users on what those changes are. Though, the product is imperfect there is still a lot to like about this product. It’s quite flexible in terms of gamification and microlearning. I’d recommend this product for people that are in this space and have been using other LMS products in the past.

My thoughts using Sketch

First some background information on myself.

I’m a big adobe creative suite user. I use the adobe suite for all aspects of creating designs for user interface, web, illustrations and print. I was finding that for rapid UI creation and creating screens for projects, illustrator was getting a little bloated. Illustrator is great for general creation but, with specific UI creation (rapid screen design) it’s a little slow. I did a couple of small projects for comparison purposes.

My Approach
My workflow for UI design is typically as follows: Requirements Documents, Balsmaiq, Illustrator and Silverlight (for high fidelity interactive prototypes). Using Sketch I found it simplified the process of by combing aspects of my workflow and being more of a lightweight product. The process for Sketch would be requirements docs, sketch and InVision.

Sketch is the ultimate tool for iOS, Android and Web design. It barely weights 41MB in disk space, compared to Illustrator’s 1.6GB. As soon as you open it, you are greeted with an infinite canvas. No window will ask you about what units to use or what size your canvas should be. Just like native OS X apps, you have a familiar user interface with a Toolbar, Navigator and Inspector. As a result, new users will find Sketch far more approachable because it doesn’t get in the way of producing simple designs.

Designing for Screens
You’re not overwhelmed by a Toolbar where half of the options were intended for photo editing, digital painting and 3D all screens are in pixels only.

There’s nothing wrong with them, but focusing on just user interface design will allow you to be more efficient and less distracted.

UI Templates
Sketch comes preloaded with a number of user interface templates for iOS, Material Design and Responsive Web. To access them for example you simply have to go File >New From Template > iOS UI Design.

A great place to download a unique templates for a specific requirements is:

https://www.sketchappsources.com/

Working With Text
If you’re new to typography, I suggest heading to the Typography section and start downloading a few modern fonts. The good ones that comes with OS X or free on Google Fonts are San Francisco, Avenir Next, Open Sans and Roboto. If you have a subscription to Typekit, download Museo and Proxima Nova.

Working With Icons
Last but not least, you’ll need in your arsenal a nice library of vector icons. The ones by PixelLove and Streamline will work well for iOS. Sketch is entirely vector-based so you can easily import SVG icons (a universal vector format), and edit them as you see fit. If you’re uncomfortable working with vector paths, you can at least change the color and size to fit your project. To get an introduction to vectors in Sketch, I suggest heading to the section

Working with Pages
Each Page represents a platform or a completely different resolution. For most projects, you’ll have twenty something Artboards for a platform like iOS. Then, you’d create another Page for Android, Web, Apple Watch, tvOS, etc. That way, you can have an entire project within a single Sketch file, saving you a ton of time switching between screens and platforms.

Working Symbols
I found this to be very powerful if not the most powerful feature. When I downloaded a bootstrap template it had all the buttons and states already in a library, before I would have to recreate this and now they are already available. This reminds me of coding the same feature is HTML CSS e.g. calling a particular class. Symbols work much the same way, I could call in the design with the appropriate state already based on the design requirement. Symbols makes it easy to share the same elements across multiple Artboards. This is especially useful when you re-use the same elements multiple times like for Status Bar, Navigation bar or Tab Bar. You won’t need to go back and edit those elements one by one. As you update one, it’ll synchronize to all the other ones that share the same Symbol.

Quick Export to Multiple Resolutions
Perhaps my favorite new feature is the ability to easily export at multiple screen resolutions. By using Make Exportable in the bottom right of the screen, you can export at any scale (1x, 2x, 3x) and 6 file formats (JPG, PNG, SVG, PDF, TIFF and EPS). PDF in particular is useful for iOS assets, and SVG is a fantastic format for the Web. For many users, this is what makes Sketch shine from the other apps.
Click Make Exportable to set up your slices. By default, it’ll set the scale at 1x, but click again and you’ll quickly get 2x, then 3x. You can also set the scale to a width (w) or height (h). For instance, if you wish your asset to export at maximum 800 px wide, set 800w.

Using Sketch and InVision
Sketch feels more like an open source product than illustrator. When combined with Invision a user can easily add interactive designs that come to life. Previously, a designer would have to design the screens before in illustrator than re-create them in another fashion like HTML, silverlight, PDFs etc to simulate some sort of interactivity. With Invision using the Craft plugin a designer can combine a couple of these steps and as a bonus can create interactive prototypes on a variety of platforms iOS, Android and iPad. The bonus of using InVision is the collaboration aspect, clients are able to draw on the prototype and individual screens which is much faster than sending emails back and fourth.

https://www.invisionapp.com/sketch-prototyping
https://www.invisionapp.com/craft

Web and App Design Trends for 2017

Some top predictions on what will be web and app design trends for 2017. It’s hard to predict. So let’s see what top industry experts are saying.

Adham Dannaway, UX/UI Designer & Front-end Developer

Adham is half UX/UI Designer, half Front-end Developer, 100% interface jedi. His work has been featured on Smashing Magazine, Web Designer Magazine and Awwwards

Style Guides and UI Patterns:

Adham believes in more of a focus on UI pattern libraries and style guides. Making user experiences more consistent, practical and usable. Designers will become more involved in strategy rather than visuals.

Prototyping Tools:

More demand for prototyping and interaction design tools.

Virtual Reality and Augmented Reality (AR) Opportunites:

We are at the start of Virtual Reality (VR) and Augmented Reality industry. This will create new opportunities for UI and Product designers.

Nir Eyal, Author of “Hooked: How to Build Habit-Forming Products“

Conversational UIs:

Nor believes that computer software will become more natural like in the way it interacts with a user. Currently, There are a wave of startups that promises to radically simplify our lives by making it harder to determine whether we’re communicating with a person or computer code.

Adi Mazor Kario, UX Architect and Founder of Wizard UI Consulting

Natural User Interfaces and Bot Interfaces:

She believes the industry will see more social collaboration & shared economy applications. Users trust strangers more and this will lead to new services and applications (mainly mobile apps that could add location-based options)

Mobile features added to web interfaces:

Adi believe that the trend for web interfaces with more mobile features, and look-n-feel, will grow.

James Archer, VP of Sales & Marketing at Crowd Favorite & UX Expert

James is an expert and design, content and marketing in the digital space, frequent conference speaker and part-time fiction writer

Death of the hamburger menu!:

By now it’s been pretty well established that the hamburger menu doesn’t work, but we’re still waiting for app and responsive web designs to catch up. As the year goes on, we’ll start to see the hamburgers being methodically replaced with tab bars, Priority+ menus, and other alternative forms of navigation.

Device-appropriate design:

Designers seem to keep getting mobile-first wrong by leaving desktop experiences feeling weak and incomplete, and users are feeling the pain. Next year will see a renewed interest in designing not primarily for mobile at the expense of desktop, but rather in creating experiences appropriate to whatever device they’re used on.

Tighter design/developer relationships:

As interface technology continues to advance, the static mockups of yesteryear become increasingly obsolete, requiring a renewed focus on tight collaboration between designers and developers. Neither one can get very far without the other, but together they can change the world.

Joanna Ngai, UX Designer at Microsoft

Joanna released her first book, ‘UX for Beginners: A practical handbook on the space of user experience design and strategy‘, on Kindle this year

Mobile first / Mobile only markets:

Millions of consumers have leapfrogged the PC era altogether, joining the connected world in earnest through their mobile phones. Product designs should be reimagined for a mobile environment, not just adapted to fit a small screen.

Special thanks to

Justinmind: Prototyping tool for web and mobile apps

New Green Rooftop Deck at the office

I love being in my office building. They just rebuilt the rooftop garden. Click Continue Reading link to see a picture!

Our office building at 401 Richmond Street West has always been focused on the Toronto Green Roof initiative. They just rebuilt the rooftop garden. I love it!

E-Learning for Corporate Training – What you Need to Consider

While e-Learning has many advantages in corporate training, it is important to implement the following key points when developing courses. This helps to ensure a smooth delivery with successful outcomes.

Are the learning objectives and goals measurable?

Ensure that the objectives and outcomes for the course are well planned and clearly outlined.  Having well developed expectations set from the outset provides a clear path for the learner.  This also serves as a roadmap for the delivery of the content. In other words, the objectives should read; “At the end of this course you will be able to…” as opposed to “This course will teach you…”

At the end of each section, refer back to the objectives to reinforce the relevance of the content.  In doing so, this roadmap emphasizes the key components of the course. This, in turn, provides the learner with a clear path so they feel the learning is a valuable use of their time.
According to Adobe Articulate’s e-Learning community, one of the world’s leading e-learning software provider, understanding why the course is being built and what the learner will take away from it, helps to create learning objectives that meet the course’s goals.

Who are the learners?

When it comes to learning, one size does not fit all. It is important to incorporate various e-Learning tools in order to ensure the content is effective for all learning styles and approaches. A major selling feature of e-Learning is the ability to learn anything, anywhere. This can be accomplished by integrating interactive content to engage the learner. At the same time, these tools test the knowledge gained. Clients can then customize the e-Learning programs by picking and choosing the tools they feel are best suited for the learners. Clients can empower their employees to learn more effectively and at their own pace by taking advantage of this flexibility.

Is the content accessible?

Not only must the content be relevant and presented in an engaging and effective manner, it must also be accessible. Learners may miss content or give up entirely if it is not easy to navigate through the content. Keep in mind the technology level of the users when developing the layout and delivery of the content. What is the point of developing a flashy e-Learning program with all the bells and whistles if the learners are not able to navigate it?
At the other end of the spectrum, if the graphics are outdated, for example images of professionals with flip phones, or of poor quality, this could be translated to the content being obsolete.
E-Learning programs hit the mark when they are user friendly and the content is presented in a clear and professional manner.

What are the end goals?

Be sure to review the content from their perspective, in order to increase the buy-in from the learner. Here are some questions to consider:

• What will I get out of this?  / What’s in it for me?
• How is the content related to my day-to-day activities?
• Why do I have to take this course? I don’t have time.
• Will this course lead to advancement in the company?
• Will this course help me to do my job more effectively/efficiently?
• How will I be recognized / rewarded for completing this course?

It is important that the learner sees the advantages and relevance of what they are learning. As employers, it is essential to provide employees with the tools and resources they need to succeed in their role. Therefore, the employee must be able to take the outcomes of the course and directly relate them to their role within the organization. It also demonstrates that the company is investing in them by expanding their skill sets and knowledge.

Are you tracking the results of the training?

Another key factor is to do a check once the training is complete. The Kirkpatrick Four-Level Training Evaluation Model can be employed to gauge the outcome of the training. This model considers the following levels of post-training:

• Reaction:  The degree to which participants react favourably to the training.  (Did the participants like the training?)
• Learning:  The degree to which the participants acquired the intended knowledge and skills.  (Are the participants getting the knowledge they require to fulfill their current role).
• Behaviour:  The degree to which the knowledge gained through the training is applied to their daily activities on the job. (Will the participants use the training in their daily performance on the job?)
• Results:  The degree to which the desired outcomes were met as a direct result of the training.  (Did the training succeed at achieving the initial goals?)

Many learning systems focus on the delivery of the training. This includes incorporating interactivity to gauge the participants’ motivation and assessments to measure retention.  However, it is essential to include tools to track the results and to provide on the job resources or job aids as a form of on-going support.

With these key points in mind, e-Learning can become an effective complement to more traditional corporate training approaches.

Another Successful Launch of Compliance Training

Financial Institutions are required to ensure all employees receive Compliance Training. Working with our client’s Subject Matter Experts, Euphoria just launched the transformed annual refresher courses to e-learning. We have now begun to revitalize the Compliance training for all new hires. Theses courses are due to be launch in early 2016.

Financial Institutions are required to ensure all employees receive Compliance Training. Working with our client’s Subject Matter Experts, Euphoria just launched the transformed annual refresher courses to e-learning. We have now begun to revitalize the Compliance training for all new hires. Theses courses are due to be launch in early 2016.