#mLearning: A mockup for a mobile solution with @Articulate Storyline

Some best practices to enhance mobile UX:

–          Prioritize a single action. Focus on the primary goal of your application.

–          Designed a streamlined interface with a clear and consistent navigation in order to guide the learners/users towards the desired result quickly.

–          Consider the context of use for your application and exploit the potential of personalized information and feedback.

Some general observations about minimalist design:

–          “Everything is strategically designed to support and reinforce the primary the desired primary action the designer wants the users to take.” (Source)


Principles of Minimalist Design applied to this solution

–          Try to create a good visual hierarchy. “Visual hierarchy is the deliberate arrangement of the elements in a design so that the most important elements are seen first.” (Source)

Great tutorial on how to create a Slider mechanism in Storyline by Richard Calcutt:

– http://www.screenr.com/VbYH

How to design a final summary of relevant feedback:

1-      Create different states for each slider according to the number of possible answers.

2-      Create variables for all the positive answers and attach the question number to identify them. For questions about frequency, create a variable for each adverb of frequency.

3-      Set up triggers to adjust the variables and assign them the value “True” if the state of the slider is the “Yes” state when the user submits his answer. By doing this, you will be able to record the user´s answer to a specific question and then, you can retrieve that information in order to provide the final summary.


Adjusting the variables for Yes-No Questions


Adjusting the variables for Questions about Frequency

4-      On the final screen, you will need more states and conditions. Create different states for your text boxes that show/repeat the feedback for each question according to the answer previously provided by the user.

5-      Set up a trigger that tells Storyline which state should be displayed by specifying the corresponding conditions.



  Bonus Tip: After completing the questionnaire, users can take a screenshot of the final summary with their iPad built in camera to keep that information.

If you are designing this type of summary and you know that end-users will be accessing it from a desktop computer or laptop, you can enable the users to print the results by using this JavaScript command: window.print(); (courtesy of Articulate community :)) Also, I will be expanding on JavaScript and Storyline very soon!


7 thoughts on “#mLearning: A mockup for a mobile solution with @Articulate Storyline

  1. Hi,

    Thank you very much for this video. I’d like to know which mobile phones this will work on. As I understand Storyline, it only works on the iPhone. Is that correct?

    Is there a reason you have an arrow to go to the next screen rather than the default “Next”? I’ve found that some of the default controls don’t work well on my iPhone. Is the arrow better for mobile phones?

    Thank you.

    • Hi Nina,

      Many thanks for your comment and questions. Articulate doesn´t officially support Android devices or browsers but some Storyline content may be displayed through these devices. It all depends on the type of interactions you have created. However, when developing for Android I prefer to use other tools so as to avoid any potential issue.

      Articulate Storyline is indeed my favorite tool for developing content that will be available on the iPad because Articulate Mobile Player significantly optimizes content viewing on that device and even the most complex interactions and simulations play seamlessly. I always recommend my clients to use Articulate Mobile Player (which is by the way a free native app) to deliver their content instead of relying on mobile browsers because HTML5 output presents some limitations. My goal is to make sure that learners will have the best possible experience so I try to bear in mind all these considerations to avoid performance issues.

      As regards your question about the arrow, that´s just a personal choice because I always create the whole interface from scratch and I design every visual/navigation element. If you have encounter issues with default controls, you can use an image and add a simple trigger to call a specific action. That always works for me.

      Hope this helps!

  2. Hi Mayra, and thank you for the wonderful video. Only if all these would work properly on iPads…. 🙂

    We utilize Storyline heavily, and the need to make the courses bulletproof at least on iPads comes up again and again. And of course it is a pain sometimes, knowing that the tricks and techniques that should work in theory do not work in reality, or break easily.

    Still, I consider your tutorial very useful, and I still stand behind Storyline as a very formidable authoring tool. Just an additional word of advise to everyone who uses it for mobile – do not rely exclusively on Articulate documentation when it comes to things that are “mobile safe”. Test, experiment, and test again – then you will be confident in your solution, and will know what works and what does not.

    • Hi Misha,

      Thank you for sharing your views! I don´t quite understand your first comment, though. As you could see, at the beginning of my video, I was playing the mockup right from my iPad and the process was flawless. The real application also worked perfectly well on iPads. I do admit that there are some tricks that you need to consider to avoid performance issues but that is true for most widely-adopted content authoring tools that were developed with only one delivery channel in mind: desktop computers. Many of these tools fall short for mobile solutions and you need to look for workarounds.

      I completely agree with the idea of testing and experimenting while we are entering this new arena of mobile design and I wrote a post about this and other tips to optimize your Storyline courses for iPad here http://www.articulate.com/blog/6-tips-on-designing-courses-for-ipad-with-articulate-storyline/ Again, many thanks for sharing your thoughts!

      • Mayra, your example did play well, but you used the AMP to play it. The Mobile player is certainly much more reliable than the HTML5 output, but unfortunately this output often cannot be used because most of Elearning implementations still require dependency on SCORM. Therefore HTML5 output becomes the necessity, and it is the lack of reliability of the HTML5 output that I was referring to in my opening statement.

        Misha Milshtein Director of Engineering Misha@sweetrush.com 925.708.1094


      • Oh now I get you, Misha. Many thanks for clarifying this. You are right, in fact, in the blogpost I shared in my previous message I have included a link to the list of all the features that are not fully supported in HTML5. In this particular case, a SCORM-compliant solution was not part of the project requirement, because the client´s priority was not to track who completed the survey or not. The priority was to deliver content in the specific context and to achieve the specific goal described in the video.
        I think it is always important to know what the priorities are: is it really necessary to track every single activity? Or should we prioritize the type and quality of the experience, although this could mean to make some targeted sacrifices?
        As a learning consultant, I personally think that we need to push the boundaries and don’t get trapped into old conventions and systems like SCORM. While it´s true that many companies are reluctant to innovate towards more dynamic and unrestrained solutions, at least they need to know what they are missing if they continued with this mindset. We need to make technologies work for us and help us deliver the best possible experiences and not the other way around. If we leave systems, specifications and tools make decisions for us we will never move forward.

  3. Pingback: Creating Flat Design Websites [Book Review] | "Creative Design of Learning Experiences"

Please, share your thoughts!

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s