Methods of Replicating Workflow Screens

Article Overview

To create an interactive Skyllful simulation of an application, you must first capture the application's UI.  In this article, we will discuss common methods used to capture workflow screens.

1. Executive Summary
2. Method Capture Fidelity, Effort, and Resource Considerations
3. HTML Considerations
4. Device Recording Considerations
5. Screenshot Considerations

1) Executive Summary

Best Practice for Most Use Cases

Methods of Screen Capture 

1. HTML: If your application has a web interface that matches the learner's experience on their device -> you can capture the HTML via the web interface and we can use that to build lessons inside of Skyllful.  

2. Device Recording:  SMEs can use the native, or 3rd party, recording feature on the learner's device to record workflows.  If the microphone is enabled, SMEs can also provide voiceover instructions and context during the recording instead of creating additional written resources for the curriculum development team.

3. Screen Captures:  SMEs can take individual screen captures of each workflow interface. In addition, the SME must provide guidance documentation for the order in which the screens go into the workflow, the expected learner actions, and the training context. 

2) Fidelity, Effort, and Resource Considerations

Effort Level & Required Resources

Fidelity

• Crispness:  how clearly the screens render.
• Responsiveness:  The ability for on screen elements to adjust in response to screen size/shape changes.  Think of a browser page and how the items on your screen move and change sizes as you shrink or grow the browser.
• Interactivity: All rendering types can be equally interactive. [★ More effort required | ★★ Less effort required]
• Editability: How easy it is to alter sensitive text or change visual elements.
• File Size:  This addresses the digital storage considerations.
• Maintenance: When the target application changes, this addresses the effort level required to edit the lesson

Screenshot and Video Recording Options

3) HTML Considerations

High Level How-To Guide

1. Using a plugin, such as Single File, capture the html for every screen used in the workflow
2. Number the html files
3. Provide written or audio guidance on the expected learner action for each step/screen
4. Provide written or audio context for the designer to use when crafting instruction

Pros | Considerations

PROS 

• Efficient lesson development resulting in reduced curriculum development timeline
• Authentic interactivity is built into the file and doesn't need to be recreated inside of Skyllful
• Sensitive information is easy to remove from the lesson with basic coding skills 

CONSIDERATIONS

• SME must provide several resources for lesson development
• Basic coding skills may be required for screen content, or appearance, adjustments
• Some code developers will insert 'hacks' to the code which may require cleanup upon import

4) Device Recording Considerations

High Level How-To Guide

1. Gain SME access to the same device type on which the learner will consume training
2. Enable the microphone and a screen recorder the SME device
3. Record the workflow while explaining the process 

Pros | Considerations

PROS 

• Only a single resource needs to be submitted for lesson development (mp4)
• Screen ratios match perfectly to ensure an authentic simulation
• Efficient lesson preparation for the SME
• Fewer points of failure in the workflow capture, sequencing, and development

CONSIDERATIONS

• IT may need to get involved on the frontend to make sure the SME device has recording functionality
• If the lesson is consumed on a PC, it is crucial to establish standardized workflow capture resolutions
• Workflow capture best practices are ESSENTIAL to timely curriculum development
• Some interactivity that is available in an html file is not available when creating interactive elements from scratch

5) Screenshot Considerations

High Level How-To Guide

1. Gain SME access to the same device type on which the learner will consume training
2. Enable screen capture functionality on the SME device
3. Take a screenshot of every screen used in the workflow
4. Number the .png files
5. Provide written or audio guidance on the expected learner action for each step/screen
6. Provide written or audio context for the designer to use when crafting instruction

Pros | Considerations

PROS 

• Familiar processes for the SME
• Screen ratios match perfectly to ensure an authentic simulation

CONSIDERATIONS

• SME must provide several resources for lesson development
• IT may need to get involved on the frontend to make sure the SME device has screenshot functionality
• If the lesson is consumed on a PC, it is crucial to establish standardized workflow capture resolutions
• Some interactivity that is available in an html file is not available when creating interactive elements from scratch